size in lists + icons (#234)

segmentio · Jul 19, 2018 · 1b246ac · 1b246ac
1 parent a737a38
commit 1b246ac
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 30 deletions.
diff --git 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 <Text is="li" marginY="0.5em" {...this.props} />
+    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 (
+      <Text
+        is="li"
+        position="relative"
+        marginY="0.5em"
+        size={size}
+        listStyleType={icon ? 'none' : null}
+        paddingLeft={icon ? paddingLeft : null}
+        {...props}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            color={iconColor}
+            position="absolute"
+            size={iconSize}
+            left={iconLeft}
+            top={iconTop}
+          />
+        )}
+        {children}
+      </Text>
+    )
   }
 }
diff --git 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 <Box {...OrderedList.styles} {...this.props} />
+    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 (
+      <Box {...OrderedList.styles} {...props}>
+        {finalChildren}
+      </Box>
+    )
   }
 }
diff --git 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 <Box {...UnorderedList.styles} {...this.props} />
+    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 (
+      <Box {...UnorderedList.styles} {...props}>
+        {finalChildren}
+      </Box>
+    )
   }
 }
diff --git a/src/typography/stories/index.stories.js b/src/typography/stories/index.stories.js
@@ -77,33 +77,93 @@ storiesOf('typography', module)
   .add('Strong', () => <div>{previewTextComponent(Strong)}</div>)
   .add('UnorderedList', () => (
     <Box padding={40}>
-      <Paragraph>
-        A paragraph before a list. You have to manually set the margins on a
-        list.
-      </Paragraph>
-      <UnorderedList marginY={16}>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-      </UnorderedList>
-      <Paragraph>A paragraph after a list.</Paragraph>
+      {[300, 400, 500].map(size => (
+        <Box key={size}>
+          <Heading size={700} marginTop="default">
+            Size {size}
+          </Heading>
+          <Paragraph size={size} marginTop="default">
+            A paragraph before a list. You have to manually set the margins on a
+            list.
+          </Paragraph>
+          <OrderedList size={size} marginY={16}>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+          </OrderedList>
+          <Paragraph size={size} marginTop="default">
+            A paragraph after a list.
+          </Paragraph>
+        </Box>
+      ))}
+    </Box>
+  ))
+  .add('UnorderedList with icons', () => (
+    <Box padding={40}>
+      {[300, 400, 500].map(size => (
+        <Box key={size}>
+          <Heading size={700} marginTop="default">
+            Size {size}
+          </Heading>
+          <Paragraph size={size} marginTop="default">
+            You can add icons to list items individually.
+          </Paragraph>
+          <UnorderedList size={size} marginY={16}>
+            <ListItem icon="tick-circle" iconColor="success">
+              Lorem ipsum dolar set amet
+            </ListItem>
+            <ListItem icon="tick-circle" iconColor="success">
+              Lorem ipsum dolar set amet
+            </ListItem>
+            <ListItem icon="ban-circle" iconColor="danger">
+              Lorem ipsum dolar set amet
+            </ListItem>
+            <ListItem icon="ban-circle" iconColor="danger">
+              Lorem ipsum dolar set amet
+            </ListItem>
+          </UnorderedList>
+          <Paragraph size={size}>
+            Or you can set the icon on the list.
+          </Paragraph>
+          <UnorderedList
+            size={size}
+            marginY={16}
+            icon="tick"
+            iconColor="success"
+          >
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+          </UnorderedList>
+        </Box>
+      ))}
     </Box>
   ))
   .add('OrderedList', () => (
     <Box padding={40}>
-      <Paragraph>
-        A paragraph before a list. You have to manually set the margins on a
-        list.
-      </Paragraph>
-      <OrderedList marginY={16}>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-        <ListItem>Lorem ipsum dolar set amet</ListItem>
-      </OrderedList>
-      <Paragraph>A paragraph after a list.</Paragraph>
+      {[300, 400, 500].map(size => (
+        <Box key={size}>
+          <Heading size={700} marginTop="default">
+            Size {size}
+          </Heading>
+          <Paragraph size={size} marginTop="default">
+            A paragraph before a list. You have to manually set the margins on a
+            list.
+          </Paragraph>
+          <UnorderedList size={size} marginY={16}>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+            <ListItem>Lorem ipsum dolar set amet</ListItem>
+          </UnorderedList>
+          <Paragraph size={size} marginTop="default">
+            A paragraph after a list.
+          </Paragraph>
+        </Box>
+      ))}
     </Box>
   ))