# 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

    10x

    10x
    40x

    40x

    40x
    40x
    40x
    10x

    10x
    20x
    20x

    40x
    20x

    20x

    10x
    10x
    10x

    10x

    10x

     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';

    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(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,
      unstyled: PropTypes.bool,
    };

    List.defaultProps = {
      ...defaultStylesBase,
    };

    /** @component */
    export { List };