export const Gutters = (
gutters: string | number | GuttersProps,
gutterType: string = 'margin',
gutterPosition: string[] = ['right', 'left'],
negative: boolean = false,
): string[] => {
// Output our margin gutters.
if (typeof gutters === 'object') {
const strings: string[] = [];
for (const key in gutters) {
if (typeof gutters[key] === 'number' || typeof gutters[key] === 'string') {
strings.push(
mediaquery(key)`${cssBuilder(
gutters[key],
negative,
gutterType,
gutterPosition,
)}`,
);
}
}
return strings;
}
return [cssBuilder(gutters, negative, gutterType, gutterPosition)];
};
const ResponsiveCellCss = (props: ResponsiveCellCssProps): string[] => {
let css: string[] = [];
const types = ['auto', 'full', 'grow', 'shrink'];
const hasGutterType = props.gutterType !== undefined;
css.push(CellBase(props.cellType || 'full'));
css = css.concat(
CellStatic(
props.cellType || props.gridColumns,
hasGutterType,
props.gutterSizes,
props.gutterType || 'padding',
'small',
props.vertical,
),
);
for (const breakpoint in Breakpoints) {
if (typeof props[breakpoint] === 'string' && types.includes(props[breakpoint])) {
css = css.concat(mediaquery(breakpoint)`
${CellBase(props[breakpoint])}
${CellStatic(
props[breakpoint],
hasGutterType,
props.gutterSizes,
props.gutterType || 'padding',
'small',
props.vertical,
)}
`);
}
}
return css;
};
const BreakpointGutterCss = (props: GutterCssProps): string[] => {
let breakpoints: string[] = [];
let lastBreakpoint;
for (const breakpoint in Breakpoints) {
if (
props[breakpoint] !== undefined &&
typeof props[breakpoint] === 'number' &&
props[breakpoint] !== 0
) {
if (props.gutterSizes[breakpoint] !== undefined) {
lastBreakpoint = breakpoint;
}
breakpoints = breakpoints.concat(
mediaquery(breakpoint)`${CellStatic(
props[breakpoint],
props.gutterType !== undefined,
props.gutterSizes,
props.gutterType || 'padding',
lastBreakpoint,
props.vertical,
)}`,
);
}
}
if (breakpoints.length !== 0) {
breakpoints.push('flex-basis: auto;');
}
return breakpoints;
};
export const CellOffset = (
size: number | string,
breakpoint: string,
gutterType: string = 'margin',
vertical: boolean = false,
rtl: boolean = false,
gutters: GuttersProps = DefaultGutters,
mediaQueryOptions: MediaQueryOptionsProps = MediaQueryOptions,
): string => {
let direction;
if (vertical) {
direction = 'top';
} else if (rtl) {
direction = 'right';
} else {
direction = 'left';
}
let lastBreakpointName = 'small';
if (gutters[breakpoint] === undefined) {
for (const breakpointName in mediaQueryOptions.breakpoints) {
if (typeof breakpointName === 'string' && gutters[breakpointName] !== undefined) {
lastBreakpointName = breakpointName;
}
}
} else {
lastBreakpointName = breakpoint;
}
let lastBreakpoint: number;
if (typeof gutters[lastBreakpointName] === 'string') {
lastBreakpoint = +stripUnit(`${gutters[lastBreakpointName]}`);
} else {
lastBreakpoint = +gutters[lastBreakpointName];
}
const gutter = rem(lastBreakpoint / 2);
const gutterSize =
gutterType === 'margin' ? `calc(${CellSize(size)} + ${gutter})` : CellSize(size);
const css = `margin-${direction}: ${gutterSize};`;
return mediaquery(breakpoint, mediaQueryOptions)`${css}`;
};
const calcHeading = (
heading: number,
fontSize: string,
lineHeight: number,
breakpoints: {},
mediaQuery: MediaQueryOptionsProps,
): FlattenSimpleInterpolation => {
if (Object.entries(breakpoints).length === 0) {
throw new Error('Cant be empty @todo error message');
}
const size = stripUnit(em(fontSize));
const lineHeightSpacing = (factor = 1): number => {
return size * lineHeight * factor;
};
const spacingValue = lineHeightSpacing();
const mediaqueries: string[] = [];
for (const key in breakpoints) {
if (Array.isArray(breakpoints[key])) {
const calcSize = size * breakpoints[key][heading];
let calcLineHeight = 0;
let multiplier = 1;
if (calcSize <= spacingValue) {
calcLineHeight = spacingValue / calcSize;
} else {
while (lineHeightSpacing(multiplier) < calcSize) {
multiplier += 0.5;
}
calcLineHeight = lineHeightSpacing(multiplier) / calcSize;
}
mediaqueries.push(mediaquery(key, mediaQuery)`
font-size: ${em(calcSize, size)};
line-height: ${calcLineHeight};
font-weight: 700;
`);
}
}
return css`
${mediaqueries}
`;
};
export const BreakpointCell = (
size: number,
breakpoint: string,
vertical: boolean,
): string[] => {
if (size === 0) {
return [];
}
if (DefaultGutters[breakpoint] === undefined) {
return [];
}
return mediaquery(breakpoint)`${CellStatic(
size,
false,
DefaultGutters,
'margin',
breakpoint,
vertical,
)}`;
};