feat(list): Updates to UnorderedList

Use listStyle instead of bulletType or variant and also remove base option from size prop for both
Ordered and Unordered List

src/components/Lists/OrderedList/OrderedList.jsx

@@ -20,7 +20,7 @@ const OrderedList = ({ listStyle, size, children, ...rest }) => {
   const items = React.Children.map(children, sizeChildren)
 
   return (
-    <Text size={size}>
+    <Text size={size || 'base'}>
       <ol {...safeRest(rest)} className={classes}>
         {items}
       </ol>
@@ -34,14 +34,13 @@ OrderedList.propTypes = {
    */
   listStyle: PropTypes.oneOf([
     'decimal',
-    'upper-alpha',
-    'lower-alpha'
+    'upperAlpha',
+    'lowerAlpha'
   ]),
   /**
    * The font size
    */
   size: PropTypes.oneOf([
-    'base',
     'medium',
     'large'
   ]),
@@ -53,7 +52,7 @@ OrderedList.propTypes = {
 
 OrderedList.defaultProps = {
   listStyle: 'decimal',
-  size: 'base'
+  size: undefined
 }
 
 OrderedList.Item = OrderedItem

src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx

@@ -49,8 +49,8 @@ describe('<OrderedList />', () => {
     let orderedList = doShallowList({ listStyle: undefined })
     expect(findOrderedList(orderedList)).toHaveClassName('decimal')
 
-    orderedList = doShallowList({ listStyle: 'upper-alpha' })
-    expect(findOrderedList(orderedList)).toHaveClassName('upper-alpha')
+    orderedList = doShallowList({ listStyle: 'upperAlpha' })
+    expect(findOrderedList(orderedList)).toHaveClassName('upperAlpha')
   })
 
   it('passes additional attributes to ol element', () => {

src/components/Lists/UnorderedList/UnorderedItem.jsx

@@ -2,25 +2,34 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../../safeRest'
+import Text from '../../Typography/Text/Text'
 
-// import styles from './UnorderedList.modules.scss'
+import styles from './UnorderedList.modules.scss'
 
-const UnorderedItem = ({ listStyle, children, ...rest }) => {
-  return (
-    <li {...safeRest(rest)}>
+const UnorderedItem = ({ size, listStyle, children, ...rest }) => (
+  <li {...safeRest(rest)} className={styles[`${listStyle}Item`]}>
+    <Text size={size || 'base'}>
       {children}
-    </li>
-  )
-}
+    </Text>
+  </li>
+)
 
 UnorderedItem.propTypes = {
-  listStyle: PropTypes.string,
+  listStyle: PropTypes.oneOf([
+    'circle',
+    'checkmark',
+    'x'
+  ]),
+  size: PropTypes.oneOf([
+    'medium',
+    'large'
+  ]),
+  /**
+   * The content
+   */
   children: PropTypes.node.isRequired
 }
 
-UnorderedItem.defaultProps = {
-}
-
 UnorderedItem.displayName = 'UnorderedList.Item'
 
 export default UnorderedItem

src/components/Lists/UnorderedList/UnorderedList.jsx

@@ -2,36 +2,59 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../../safeRest'
+import Text from '../../Typography/Text/Text'
 import UnorderedItem from './UnorderedItem'
 
 import styles from './UnorderedList.modules.scss'
 
-const UnorderedList = ({ variant, children, ...rest }) => {
+const UnorderedList = ({ listStyle, size, children, ...rest }) => {
   const classes = `
-    ${styles.base}
-    ${styles[variant]}
+    ${styles[listStyle]}
   `
+
+  const generateChildren = child =>
+    React.cloneElement(child, {
+      size,
+      listStyle
+    })
+
+  const items = React.Children.map(children, generateChildren)
+
+
   return (
-    <ul {...safeRest(rest)} className={classes}>
-      {children}
-    </ul>
+    <Text size={size || 'base'}>
+      <ul {...safeRest(rest)} className={classes}>
+        {items}
+      </ul>
+    </Text>
   )
 }
 
 UnorderedList.propTypes = {
   /**
    * The type of list.
    */
-  variant: PropTypes.oneOf([
-    'bullet',
+  listStyle: PropTypes.oneOf([
+    'circle',
     'checkmark',
-    'error'
+    'x'
   ]),
+  /**
+   * The font size
+   */
+  size: PropTypes.oneOf([
+    'medium',
+    'large'
+  ]),
+  /**
+   * The list items
+   */
   children: PropTypes.node.isRequired
 }
 
 UnorderedList.defaultProps = {
-  variant: 'bullet'
+  listStyle: 'circle',
+  size: undefined
 }
 
 UnorderedList.Item = UnorderedItem

src/components/Lists/UnorderedList/UnorderedList.md

@@ -1,15 +1,22 @@
 ```
-<UnorderedList>
+<UnorderedList listStyle="circle">
   <UnorderedList.Item>Optik Internet 25
-    <UnorderedList>
+    <UnorderedList listStyle="checkmark">
       <UnorderedList.Item>Optik Internet 25</UnorderedList.Item>
       <UnorderedList.Item>Internet 25</UnorderedList.Item>
       <UnorderedList.Item>Optik High Speed Turbo</UnorderedList.Item>
       <UnorderedList.Item>High Speed Turbo 25</UnorderedList.Item>
     </UnorderedList>
   </UnorderedList.Item>
   <UnorderedList.Item>Internet 25</UnorderedList.Item>
-  <UnorderedList.Item>Optik High Speed Turbo</UnorderedList.Item>
+  <UnorderedList.Item>Optik High Speed Turbo
+  <UnorderedList listStyle="x">
+    <UnorderedList.Item>Optik Internet 25</UnorderedList.Item>
+    <UnorderedList.Item>Internet 25</UnorderedList.Item>
+    <UnorderedList.Item>Optik High Speed Turbo</UnorderedList.Item>
+    <UnorderedList.Item>High Speed Turbo 25</UnorderedList.Item>
+  </UnorderedList>
+  </UnorderedList.Item>
   <UnorderedList.Item>High Speed Turbo 25</UnorderedList.Item>
 </UnorderedList>
 ```

src/components/Lists/UnorderedList/UnorderedList.modules.scss

@@ -1,15 +1,53 @@
 @import '../../../scss/settings/colours';
+@import '../../../scss/settings/typography';
 
 .base {
   padding-left: 40px;
   position: relative;
   margin-bottom: 0.5rem;
 }
 
-.fixedWidth {
-  width: 2rem;
+.item {
+  font-family: $font-icons;
 }
 
-// .icon {
-//   color: $color-telus-purple;
-// }
+.circle {
+  composes: base;
+}
+
+.circleItem::before {
+  // composes: item;
+  font-family: $font-icons;
+
+  display: block;
+  position: absolute;
+  content: '\002022';
+  color: $color-telus-purple;
+  left: -21px;
+}
+
+.checkmark {
+  composes: base;
+}
+
+.checkmarkItem::before {
+  // composes: item;
+  font-family: $font-icons;
+
+  content: "\f101";
+  color: $color-primary;
+  left: -33px;
+}
+
+.x {
+  composes: base;
+}
+
+.xItem::before {
+  // composes: item;
+  font-family: $font-icons;
+
+  content: "\f104";
+  color: $color-cardinal;
+  left: -33px;
+}

src/components/Lists/UnorderedList/__tests__/UnorderedList.spec.jsx

@@ -1,32 +1,69 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { shallow, render } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
+import Text from '../../../Typography/Text/Text'
 import UnorderedList from '../UnorderedList'
 
 describe('<UnorderedList />', () => {
-  const defaultChildren = '<li>One</li><li>Two</li>'
-  const doShallow = (props = {}, children = defaultChildren) => (
-    shallow(<UnorderedList {...props}>{children}</UnorderedList>)
+  const doRender = (overrides = {}) => render(
+    <UnorderedList {...overrides}>
+      <UnorderedList.Item>Lorem ipsum</UnorderedList.Item>
+      <UnorderedList.Item>Dolor sit amet</UnorderedList.Item>
+    </UnorderedList>
+  )
+
+  const doShallowList = (overrides = {}) => shallow(
+    <UnorderedList {...overrides}>
+      <UnorderedList.Item>Lorem ipsum</UnorderedList.Item>
+      <UnorderedList.Item>Dolor sit amet</UnorderedList.Item>
+    </UnorderedList>
+  )
+
+  const findUnorderedList = unorderedList => unorderedList.find('ul')
+
+  const doShallowItem = (overrides = {}) => shallow(
+    <UnorderedList.Item {...overrides}>Some content</UnorderedList.Item>
   )
 
   it('renders', () => {
-    const unorderedList = doShallow()
+    const unorderedList = doRender()
 
     expect(toJson(unorderedList)).toMatchSnapshot()
   })
 
   it('renders an HTML ul tag', () => {
-    const unorderedList = doShallow()
+    const unorderedList = doShallowList()
+
+    expect(unorderedList).toHaveTagName('Text')
+  })
+
+  it('UnOrderList.Item renders an HTML li tag', () => {
+    const unorderedListItem = doShallowItem()
 
-    expect(unorderedList).toHaveTagName('ul')
+    expect(unorderedListItem).toHaveTagName('li')
+    expect(unorderedListItem).toContainReact(<Text>Some content</Text>)
   })
 
-  // it('can have a list style', () => {
-  //   let unorderedList = doShallow({ listStyle: undefined })
-  //   expect(unorderedList).toHaveClassName('bullet')
-  //
-  //   unorderedList = doShallow({ listStyle: 'checkmark' })
-  //   expect(unorderedList).toHaveClassName('checkmark')
-  // })
+  it('can have a list style', () => {
+    let unorderedList = doShallowList({ listStyle: undefined })
+    expect(findUnorderedList(unorderedList)).toHaveClassName('circle')
+
+    unorderedList = doShallowList({ listStyle: 'x' })
+    expect(findUnorderedList(unorderedList)).toHaveClassName('x')
+  })
+
+  it('passes additional attributes to ul element', () => {
+    const unorderedList = doShallowList({ id: 'the-list', tabindex: 1 })
+
+    expect(findUnorderedList(unorderedList)).toHaveProp('id', 'the-list')
+    expect(findUnorderedList(unorderedList)).toHaveProp('tabindex', 1)
+  })
+
+  it('does not allow custom CSS', () => {
+    const unorderedList = doShallowList({ className: 'my-custom-class', style: { color: 'hotpink' } })
+
+    expect(findUnorderedList(unorderedList)).not.toHaveProp('className', 'my-custom-class')
+    expect(findUnorderedList(unorderedList)).not.toHaveProp('style')
+  })
 })

src/components/Lists/UnorderedList/__tests__/__snapshots__/UnorderedList.spec.jsx.snap

@@ -1,12 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<UnorderedList /> renders 1`] = `
-<ul
-  className="
+<span
+  class="
     base
-    bullet
+    baseFont
+    color
   "
 >
-  &lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;
-</ul>
+  <ul
+    class="
+      circle
+    "
+  >
+    <li
+      class="circleItem"
+    >
+      <span
+        class="
+          base
+          baseFont
+          color
+        "
+      >
+        Lorem ipsum
+      </span>
+    </li>
+    <li
+      class="circleItem"
+    >
+      <span
+        class="
+          base
+          baseFont
+          color
+        "
+      >
+        Dolor sit amet
+      </span>
+    </li>
+  </ul>
+</span>
 `;