From 1b246accefd1a095a2df6a7c3597272d85de7d81 Mon Sep 17 00:00:00 2001 From: Jeroen Ransijn Date: Thu, 19 Jul 2018 14:03:51 -0700 Subject: [PATCH] size in lists + icons (#234) --- src/typography/src/ListItem.js | 62 +++++++++++++- src/typography/src/OrderedList.js | 28 +++++- src/typography/src/UnorderedList.js | 41 ++++++++- src/typography/stories/index.stories.js | 108 ++++++++++++++++++------ 4 files changed, 209 insertions(+), 30 deletions(-) diff --git a/src/typography/src/ListItem.js b/src/typography/src/ListItem.js index 4e75c75dc..a6178d6f2 100644 --- a/src/typography/src/ListItem.js +++ b/src/typography/src/ListItem.js @@ -1,12 +1,70 @@ import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { Icon } from '../../icon' import Text from './Text' export default class ListItem extends PureComponent { static propTypes = { - ...Text.propTypes + ...Text.propTypes, + + /** + * When passed, adds a icon before the list item. + * See Evergreen `Icon` for documentation. + */ + icon: PropTypes.string, + + /** + * The color of the icon. + */ + iconColor: PropTypes.string } render() { - return + const { children, size, icon, iconColor, ...props } = this.props + + let paddingLeft + if (size === 300) paddingLeft = 4 + if (size === 400) paddingLeft = 8 + if (size === 500) paddingLeft = 8 + if (size === 600) paddingLeft = 12 + + let iconTop + if (size === 300) iconTop = 1 + if (size === 400) iconTop = 3 + if (size === 500) iconTop = 3 + if (size === 600) iconTop = 4 + + let iconSize + if (size === 300) iconSize = 12 + if (size === 400) iconSize = 14 + if (size === 500) iconSize = 14 + if (size === 600) iconSize = 16 + + let iconLeft = -iconSize - 4 + if (size === 600) iconLeft = -iconSize + + return ( + + {icon && ( + + )} + {children} + + ) } } diff --git a/src/typography/src/OrderedList.js b/src/typography/src/OrderedList.js index 222ddc979..bd076b415 100644 --- a/src/typography/src/OrderedList.js +++ b/src/typography/src/OrderedList.js @@ -1,9 +1,16 @@ import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' import Box from 'ui-box' export default class OrderedList extends PureComponent { static propTypes = { - ...Box.propTypes + ...Box.propTypes, + + /** + * Size of the text used in a list item. + * Can be: 300, 400, 500, 600. + */ + size: PropTypes.oneOf([300, 400, 500, 600]).isRequired } static styles = { @@ -16,6 +23,23 @@ export default class OrderedList extends PureComponent { } render() { - return + const { children, ...props } = this.props + + const finalChildren = React.Children.map(children, child => { + if (!React.isValidElement(child)) { + return child + } + + return React.cloneElement(child, { + // Prefer more granularly defined icon if present + size: child.props.size || this.props.size + }) + }) + + return ( + + {finalChildren} + + ) } } diff --git a/src/typography/src/UnorderedList.js b/src/typography/src/UnorderedList.js index 77c8556d2..7a235ca34 100644 --- a/src/typography/src/UnorderedList.js +++ b/src/typography/src/UnorderedList.js @@ -1,9 +1,27 @@ import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' import Box from 'ui-box' export default class UnorderedList extends PureComponent { static propTypes = { - ...Box.propTypes + ...Box.propTypes, + + /** + * Size of the text used in a list item. + * Can be: 300, 400, 500, 600. + */ + size: PropTypes.oneOf([300, 400, 500, 600]).isRequired, + + /** + * When passed, adds a icon before each list item in the list + * You can override this on a individual list item. + */ + icon: PropTypes.string, + + /** + * The color of the icon in each list item in the list. + */ + iconColor: PropTypes.string } static styles = { @@ -16,6 +34,25 @@ export default class UnorderedList extends PureComponent { } render() { - return + const { children, ...props } = this.props + + const finalChildren = React.Children.map(children, child => { + if (!React.isValidElement(child)) { + return child + } + + return React.cloneElement(child, { + // Prefer more granularly defined icon if present + size: child.props.size || this.props.size, + icon: child.props.icon || this.props.icon, + iconColor: child.props.iconColor || this.props.iconColor + }) + }) + + return ( + + {finalChildren} + + ) } } diff --git a/src/typography/stories/index.stories.js b/src/typography/stories/index.stories.js index c2feca8d6..834251e4c 100644 --- a/src/typography/stories/index.stories.js +++ b/src/typography/stories/index.stories.js @@ -77,33 +77,93 @@ storiesOf('typography', module) .add('Strong', () =>
{previewTextComponent(Strong)}
) .add('UnorderedList', () => ( - - A paragraph before a list. You have to manually set the margins on a - list. - - - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - - A paragraph after a list. + {[300, 400, 500].map(size => ( + + + Size {size} + + + A paragraph before a list. You have to manually set the margins on a + list. + + + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + + + A paragraph after a list. + + + ))} + + )) + .add('UnorderedList with icons', () => ( + + {[300, 400, 500].map(size => ( + + + Size {size} + + + You can add icons to list items individually. + + + + Lorem ipsum dolar set amet + + + Lorem ipsum dolar set amet + + + Lorem ipsum dolar set amet + + + Lorem ipsum dolar set amet + + + + Or you can set the icon on the list. + + + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + + + ))} )) .add('OrderedList', () => ( - - A paragraph before a list. You have to manually set the margins on a - list. - - - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - Lorem ipsum dolar set amet - - A paragraph after a list. + {[300, 400, 500].map(size => ( + + + Size {size} + + + A paragraph before a list. You have to manually set the margins on a + list. + + + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + Lorem ipsum dolar set amet + + + A paragraph after a list. + + + ))} ))