vcc-ui/_src/components/grid/col.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import { useFela } from 'react-fela';
import { Flex } from '../flex';
import { styles } from './styles';
import PropTypes from 'prop-types';

function getSizes(size) {
  if (typeof size === 'number') {
    return {
      default: size,
    };
  }

  return {
    default: 4,
    ...size,
  };
}

export function Col({
  size = { default: 4, '@media (min-width: 1024px)': 12 },
  children,
}) {
  const { theme } = useFela();

  const styleProps = {
    sizes: getSizes(size),
    theme,
  };

  return <Flex extend={styles.column(styleProps)}>{children}</Flex>;
}

Col.propTypes = {
  /** Size of column */
  size: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
  /** A JSX node */
  children: PropTypes.node,
};