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 | 8x 8x 40x 40x 40x 40x 40x 8x 8x 16x 16x 40x 16x 16x 8x 8x 8x 8x 8x | 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 }; |