vcc-ui/_src/components/spacer/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';

export const Spacer = React.forwardRef(({ size = 1 }, ref) => {
  const { css, theme } = useFela();
  const actualSize = typeof size == 'object' ? size.default : size;
  const breakpointSizes = {};
  if (typeof size == 'object') {
    Object.keys(size).forEach(key => {
      if (key === 'default') return;
      breakpointSizes[key] = {
        flexBasis: size[key] * theme.baselineGrid,
        width: size[key] * theme.baselineGrid,
      };
    });
  }

  const style = {
    flexShrink: 0,
    flexBasis: actualSize * theme.baselineGrid,
    width: actualSize * theme.baselineGrid,
    ...breakpointSizes,
  };

  return <div ref={ref} className={css(style)} />;
});

Spacer.displayName = 'Spacer';

Spacer.propTypes = {
  /** Spacer size (multiple of macro baseline grid) */
  size: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
};