feat(ordered-list): Remove Text component wrapper in OrderedList and …

…OrderedList.Item and set size u
telus · Sep 13, 2017 · 13e4e71 · 13e4e71
1 parent 5bd600c
commit 13e4e71
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 65 deletions.
diff --git a/src/components/Lists/OrderedList/OrderedItem.jsx b/src/components/Lists/OrderedList/OrderedItem.jsx
@@ -2,26 +2,32 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../../safeRest'
-import Text from '../../Typography/Text/Text'
+
+import styles from '../../Typography/Text/Text.modules.scss'
 
 const OrderedItem = ({ size, children, ...rest }) => {
   return (
-    <li {...safeRest(rest)}>
-      <Text size={size}>
-        {children}
-      </Text>
+    <li {...safeRest(rest)} className={styles[size]}>
+      {children}
     </li>
   )
 }
 
 OrderedItem.propTypes = {
-  size: PropTypes.string,
+  size: PropTypes.oneOf([
+    'medium',
+    'large'
+  ]),
   /**
    * The content
    */
   children: PropTypes.node.isRequired
 }
 
+OrderedItem.defaultProps = {
+  size: undefined
+}
+
 OrderedItem.displayName = 'OrderedList.Item'
 
 export default OrderedItem
diff --git a/src/components/Lists/OrderedList/OrderedList.jsx b/src/components/Lists/OrderedList/OrderedList.jsx
@@ -2,7 +2,6 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import safeRest from '../../../safeRest'
-import Text from '../../Typography/Text/Text'
 import OrderedItem from './OrderedItem'
 
 import styles from './OrderedList.modules.scss'
@@ -20,11 +19,9 @@ const OrderedList = ({ listStyle, size, children, ...rest }) => {
   const items = React.Children.map(children, sizeChildren)
 
   return (
-    <Text size={size || 'base'}>
-      <ol {...safeRest(rest)} className={classes}>
-        {items}
-      </ol>
-    </Text>
+    <ol {...safeRest(rest)} className={classes}>
+      {items}
+    </ol>
   )
 }
 

diff --git a/src/components/Lists/OrderedList/OrderedList.md b/src/components/Lists/OrderedList/OrderedList.md
@@ -1,18 +1,6 @@
 ```
-<OrderedList>
-  <OrderedList.Item>Nunc condimentum non est sed rutrum. Donec porta torto mattis velit fermentum iaculis</OrderedList.Item>
-  <OrderedList.Item>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-    <OrderedList listStyle="upper-alpha" size="medium">
-      <OrderedList.Item>Quisque tincidunt dolor</OrderedList.Item>
-      <OrderedList.Item>Nunc condimentum non est sed rutrum. Donec porta tortor mattis velit</OrderedList.Item>
-    </OrderedList>
-  </OrderedList.Item>
-  <OrderedList.Item>
-    Non est sed rutrum
-  </OrderedList.Item>
-  <OrderedList.Item>
-    Donec porta tortor mattis velit
-  </OrderedList.Item>
-</OrderedList>
+  <OrderedList listStyle="upperAlpha" size="medium">
+    <OrderedList.Item>Quisque tincidunt dolor</OrderedList.Item>
+    <OrderedList.Item>Nunc condimentum non est sed rutrum. Donec porta tortor mattis velit</OrderedList.Item>
+  </OrderedList>
 ```
diff --git a/src/components/Lists/OrderedList/OrderedList.modules.scss b/src/components/Lists/OrderedList/OrderedList.modules.scss
@@ -8,13 +8,13 @@
   list-style-type: decimal;
 }
 
-.upper-alpha {
+.upperAlpha {
   composes: base;
 
   list-style-type: upper-alpha;
 }
 
-.lower-alpha {
+.lowerAlpha {
   composes: base;
 
   list-style-type: lower-alpha;

diff --git a/src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx b/src/components/Lists/OrderedList/__tests__/OrderedList.spec.jsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { shallow, render } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
-import Text from '../../../Typography/Text/Text'
 import OrderedList from '../OrderedList'
 
 describe('<OrderedList />', () => {
@@ -35,14 +34,13 @@ describe('<OrderedList />', () => {
   it('OrderList renders an HTML ol tag', () => {
     const orderedList = doShallowList()
 
-    expect(orderedList).toHaveTagName('Text')
+    expect(orderedList).toHaveTagName('ol')
   })
 
   it('OrderList.Item renders an HTML li tag', () => {
     const orderedListItem = doShallowItem()
 
     expect(orderedListItem).toHaveTagName('li')
-    expect(orderedListItem).toContainReact(<Text>Some content</Text>)
   })
 
   it('can have a list style', () => {

diff --git a/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap b/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap
@@ -1,40 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<OrderedList /> renders 1`] = `
-<span
+<ol
   class="
-    base
-    baseFont
-    color
+    decimal
   "
 >
-  <ol
-    class="
-      decimal
-    "
+  <li
+    class="undefined"
   >
-    <li>
-      <span
-        class="
-          base
-          baseFont
-          color
-        "
-      >
-        Lorem ipsum
-      </span>
-    </li>
-    <li>
-      <span
-        class="
-          base
-          baseFont
-          color
-        "
-      >
-        Dolor sit amet
-      </span>
-    </li>
-  </ol>
-</span>
+    Lorem ipsum
+  </li>
+  <li
+    class="undefined"
+  >
+    Dolor sit amet
+  </li>
+</ol>
 `;
diff --git a/src/components/Lists/UnorderedList/UnorderedItem.jsx b/src/components/Lists/UnorderedList/UnorderedItem.jsx
@@ -30,6 +30,11 @@ UnorderedItem.propTypes = {
   children: PropTypes.node.isRequired
 }
 
+UnorderedItem.defaultProps = {
+  listStyle: 'circle',
+  size: undefined
+}
+
 UnorderedItem.displayName = 'UnorderedList.Item'
 
 export default UnorderedItem