vcc-ui/dist/esm/components/col/col.js

A React library for building user interfaces at Volvo Cars

import PropTypes from 'prop-types';
// Not worth converting to TypeScript until Grid implementation is revisited /Jacob Rask
import React, { createContext, useContext } from 'react';
import { useFela } from 'react-fela';
import { Flex } from '../flex';
const ColContext = /*#__PURE__*/createContext();
const styles = {
  column: _ref => {
    let {
      theme,
      sizes: {
        default: defaultSize,
        ...otherSizes
      }
    } = _ref;
    return {
      boxSizing: 'border-box',
      flexBasis: `${defaultSize / 4 * 100}%`,
      maxWidth: `${defaultSize / 4 * 100}%`,
      paddingLeft: theme.baselineGrid,
      paddingRight: theme.baselineGrid,
      [theme.breakpoints.fromL]: {
        flexBasis: `${defaultSize / 12 * 100}%`,
        maxWidth: `${defaultSize / 12 * 100}%`,
        paddingLeft: theme.baselineGrid * 1.5,
        paddingRight: theme.baselineGrid * 1.5
      },
      extend: [{
        condition: otherSizes[theme.breakpoints.fromM],
        style: {
          // We use onlyM here so that breakpoint orders don't need to be defined by the user
          [theme.breakpoints.onlyM]: {
            flexBasis: `${otherSizes[theme.breakpoints.fromM] / 4 * 100}%`,
            maxWidth: `${otherSizes[theme.breakpoints.fromM] / 4 * 100}%`
          }
        }
      }, {
        condition: otherSizes[theme.breakpoints.fromL],
        style: {
          [theme.breakpoints.fromL]: {
            flexBasis: `${otherSizes[theme.breakpoints.fromL] / 12 * 100}%`,
            maxWidth: `${otherSizes[theme.breakpoints.fromL] / 12 * 100}%`
          }
        }
      }]
    };
  }
};
function getSizes(size, theme) {
  if (typeof size === 'number') {
    return {
      default: 4,
      [theme.breakpoints.fromL]: size
    };
  }
  return {
    default: 4,
    ...size
  };
}
function getRealSizes(size, contextSize, theme) {
  const sizes = getSizes(size, theme);
  if (!contextSize) {
    return sizes;
  }
  const availableSizes = getSizes(contextSize, theme);
  const realSizes = {};
  for (let key in sizes) {
    if (availableSizes[key]) {
      if (key === theme.breakpoints.fromL) {
        realSizes[key] = 12 / availableSizes[key] * sizes[key];
      } else {
        realSizes[key] = 4 / availableSizes[key] * sizes[key];
      }
    } else {
      realSizes[key] = sizes[key];
    }
  }
  return realSizes;
}
function resolveNamedBreakpoints(size, breakpoints) {
  if (typeof size === 'number') {
    return size;
  }
  return Object.keys(size).reduce((resolvedSize, key) => {
    const breakpoint = breakpoints[key] || key;
    resolvedSize[breakpoint] = size[key];
    return resolvedSize;
  }, {});
}

/**
 * @deprecated This component is deprecated and can be recreated using CSS only. See [Grid](https://developer.volvocars.com/design-system/web/?path=/docs/layout-grid--docs)
 */

export function Col(_ref2) {
  let {
    size = {
      default: 4,
      '@media (min-width: 1024px)': 12
    },
    children
  } = _ref2;
  const {
    theme
  } = useFela();
  const contextSize = useContext(ColContext);
  const resolvedSize = resolveNamedBreakpoints(size, theme.breakpoints);
  const styleProps = {
    sizes: getRealSizes(resolvedSize, contextSize, theme),
    theme
  };
  return /*#__PURE__*/React.createElement(ColContext.Provider, {
    value: resolvedSize
  }, /*#__PURE__*/React.createElement(Flex, {
    extend: styles.column(styleProps)
  }, children));
}
Col.propTypes = {
  /** Size of column */
  size: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
  /** A JSX node */
  children: PropTypes.node
};