vcc-ui/_src/components/grid/index.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 PropTypes from 'prop-types';
import { Flex } from '../flex';

const styles = {
  grid: ({ theme }) => ({
    boxSizing: 'border-box',
    width: '100%',
    maxWidth: 1400,
    margin: '0 auto',
    paddingLeft: theme.baselineGrid * 2,
    paddingRight: theme.baselineGrid * 2,

    // We use onlyM here so that breakpoint orders don't need to be defined by the user
    [theme.breakpoints.onlyM]: {
      paddingLeft: theme.baselineGrid * 3,
      paddingRight: theme.baselineGrid * 3,
    },

    [theme.breakpoints.fromL]: {
      paddingLeft: theme.baselineGrid * 5,
      paddingRight: theme.baselineGrid * 5,
    },
  }),
};

export function Grid({ children }) {
  return <Flex extend={styles.grid}>{children}</Flex>;
}

Grid.propTypes = {
  /** A JSX node */
  children: PropTypes.node,
};