All files / elements/typography/List styled.js

100% Statements 22/22
100% Branches 8/8
100% Functions 6/6
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94                                              21x   21x 40x               40x     40x 40x 40x 21x           21x 42x 42x   40x 42x       42x                                     21x 21x 21x   21x               21x              
import React from 'react';
import PropTypes from 'prop-types';
import propTypes from '@styled-system/prop-types';
import styled from 'styled-components';
import { getGlobalStyles } from 'src/global-styles';
import { fontWeight, space } from 'styled-system';
import {
  colorCore,
  ellipsisCore,
  defaultStylesBase,
  fontFamilyCore,
  fontSizeCore,
  fontStyleCore,
  letterSpacingCore,
  lineHeightCore,
  scaleFont,
  textAlignCore,
  textDecorationCore,
  typography,
} from 'src/utils/styledHelpers';
import { removeSomeProps } from 'src/utils/componentHelpers';
import { withHideable } from 'src/elements/utils/Hideable';
 
const { grid: gridSchema } = getGlobalStyles();
 
const inlineStyle = props => {
  const style = `
    > li {
      display: inline-block;
      &:not(:last-child) {
        margin-right: ${scaleFont(gridSchema.gutter, 0.5)};
      }
    }
  `;
  return `${props.inline ? style : ''}`;
};
 
const paddingLeft = props => `padding-left:  ${(props.unstyled || props.inline) ? '0' : '2.5rem'};`;
const listStyle = props => `${props.unstyled ? '> li { list-style: none; }' : ''}`;
const margin = props => `margin: 0 0 ${gridSchema.gutter};`;
const listComponentPropsToTrim = {
  ...propTypes.space,
  ...typography.propTypes,
  inline: PropTypes.bool,
  unstyled: PropTypes.bool,
};
const listFactory = factoryProps => {
  const { tag } = factoryProps;
  const ListComponent = ({
    children, ...props
  }) => React.createElement(tag, removeSomeProps(props, Object.keys(listComponentPropsToTrim)), children);
  ListComponent.propTypes = {
    children: PropTypes.any.isRequired,
  };
 
  return styled(withHideable(ListComponent))`
    ${colorCore}
    ${ellipsisCore}
    ${fontFamilyCore}
    ${fontSizeCore}
    ${fontWeight}
    ${letterSpacingCore}
    ${lineHeightCore}
    ${fontStyleCore}
    ${textAlignCore}
    ${textDecorationCore}
    ${margin}
    ${paddingLeft}
    ${listStyle}
    ${inlineStyle}
    ${space}
  `;
};
 
const List = listFactory({ tag: 'ul' });
List.ul = List;
List.ol = listFactory({ tag: 'ol' });
 
List.propTypes = {
  ...typography.propTypes,
  inline: PropTypes.bool,
  /** Hides component */
  isHidden: PropTypes.bool,
  unstyled: PropTypes.bool,
};
 
List.defaultProps = {
  ...defaultStylesBase,
  isHidden: false,
};
 
/** @component */
export { List };