feat(ordered-list): Update variant prop to listStyle

And it options to match the HTML spec for list-style-type
telus · Sep 11, 2017 · b7e9c40 · b7e9c40
1 parent c1f5c0c
commit b7e9c40
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/src/components/Lists/OrderedList/OrderedList.jsx b/src/components/Lists/OrderedList/OrderedList.jsx
@@ -6,10 +6,9 @@ import OrderedItem from './OrderedItem/OrderedItem'
 
 import styles from './OrderedList.modules.scss'
 
-const OrderedList = ({ variant, size, children, ...rest }) => {
+const OrderedList = ({ listStyle, size, children, ...rest }) => {
   const classes = `
-    ${styles.base}
-    ${styles[variant]}
+    ${styles[listStyle]}
     ${styles[size]}
   `
   return (
@@ -23,10 +22,10 @@ OrderedList.propTypes = {
   /**
    * The type of list.
    */
-  variant: PropTypes.oneOf([
-    'number',
-    'capital',
-    'lowercase'
+  listStyle: PropTypes.oneOf([
+    'decimal',
+    'upper-alpha',
+    'lower-alpha'
   ]),
   /**
    * The font size
@@ -42,7 +41,7 @@ OrderedList.propTypes = {
 }
 
 OrderedList.defaultProps = {
-  variant: 'number',
+  listStyle: 'decimal',
   size: 'medium'
 }
 

diff --git a/src/components/Lists/OrderedList/OrderedList.md b/src/components/Lists/OrderedList/OrderedList.md
@@ -2,7 +2,7 @@
 <OrderedList size="large">
   <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 variant="capital">
+    <OrderedList variant="upper-alpha">
       <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
@@ -1,17 +1,22 @@
 .base {
   padding-left: 40px;
-  list-style: none;
 }
 
-.number {
+.decimal {
+  composes: base;
+
   list-style-type: decimal;
 }
 
-.capital {
+.upper-alpha {
+  composes: base;
+
   list-style-type: upper-alpha;
 }
 
-.lowercase {
+.lower-alpha {
+  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
@@ -22,12 +22,12 @@ describe('<OrderedList />', () => {
     expect(orderedList).toHaveTagName('ol')
   })
 
-  it('can have a variant', () => {
-    let orderedList = doShallow({ variant: undefined })
-    expect(orderedList).toHaveClassName('number')
+  it('can have a list style', () => {
+    let orderedList = doShallow({ listStyle: undefined })
+    expect(orderedList).toHaveClassName('decimal')
 
-    orderedList = doShallow({ variant: 'capital' })
-    expect(orderedList).toHaveClassName('capital')
+    orderedList = doShallow({ listStyle: 'upper-alpha' })
+    expect(orderedList).toHaveClassName('upper-alpha')
   })
 
 

diff --git a/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap b/src/components/Lists/OrderedList/__tests__/__snapshots__/OrderedList.spec.jsx.snap
@@ -3,8 +3,7 @@
 exports[`<OrderedList /> renders 1`] = `
 <ol
   className="
-    base
-    number
+    decimal
     medium
   "
 >