vcc-ui/_src/components/row/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 { useFela } from 'react-fela';
import { Flex } from '../flex';

const styles = {
  row: ({ theme, align }) => ({
    boxSizing: 'border-box',
    justifyContent: align === 'center' ? 'center' : 'flex-' + align,
    marginLeft: -theme.baselineGrid,
    marginRight: -theme.baselineGrid,
    flexDirection: 'row',
    flexWrap: 'wrap',

    [theme.breakpoints.fromL]: {
      marginLeft: theme.baselineGrid * -1.5,
      marginRight: theme.baselineGrid * -1.5,
    },
  }),
};

export function Row({ children, align = 'start' }) {
  const { theme } = useFela();
  const styleProps = {
    theme,
    align,
  };
  return <Flex extend={styles.row(styleProps)}>{children}</Flex>;
}

Row.propTypes = {
  /** Align columns */
  align: PropTypes.oneOf(['start', 'end', 'center']),
  /** A JSX node */
  children: PropTypes.node,
};