@indoqa/style-system/lib/components/grid/Col.js

A style system for React with Typescript typed theme support and several base components.

import * as React from 'react';
import { FelaComponent } from 'react-fela';
import { createFontCSSProps, createPaddingCSSProps, createStylingCSSProps } from '../base';
import { createResponsiveStyles, mergeThemedStyles } from '../utils';
import { GridContext } from './GridContext';
import { testGridContext } from './testGridContext';
export const GRID_SIZE = 12;
function createBaseStyles(props, theme) {
    return {
        ...createPaddingCSSProps(props, theme),
        ...createFontCSSProps(props, theme),
        ...createStylingCSSProps(props, theme),
    };
}
function themedBoxStyles(props) {
    return {
        ...createResponsiveStyles(props, createBaseStyles),
    };
}
export class Col extends React.Component {
    render() {
        const { children, style, testId, innerRef, ...otherProps } = this.props;
        const styles = mergeThemedStyles(themedBoxStyles, style);
        return (React.createElement(GridContext.Consumer, null, ({ spacing }) => {
            const child = (React.createElement(FelaComponent, { style: styles, spacing: spacing, ...otherProps }, ({ className }) => (React.createElement("div", { className: className, "data-testid": testId, ref: innerRef }, children))));
            return testGridContext(spacing, child);
        }));
    }
}
Col.defaultProps = {
    size: GRID_SIZE,
};
//# sourceMappingURL=Col.js.map