feat(lists): Add styles for UnorderedList

And create new scss files to share classes between UnorderedList and OrderedList

src/components/Lists/List.modules.scss

@@ -0,0 +1,3 @@
+.base {
+  padding-left: 40px;
+}

src/components/Lists/ListItem.modules.scss

@@ -0,0 +1,5 @@
+@import '../../scss/settings/spacing';
+
+.item {
+  margin-bottom: $spacing-tight;
+}

src/components/Lists/OrderedList/OrderedItem.jsx

@@ -3,13 +3,21 @@ import PropTypes from 'prop-types'
 
 import safeRest from '../../../safeRest'
 
-import styles from '../../Typography/Text/Text.modules.scss'
+import textStyles from '../../Typography/Text/Text.modules.scss'
+import styles from '../ListItem.modules.scss'
 
-const OrderedItem = ({ size, children, ...rest }) => (
-  <li {...safeRest(rest)} className={styles[size]}>
-    {children}
-  </li>
-)
+const OrderedItem = ({ size, children, ...rest }) => {
+  const classes = `
+    ${styles.item}
+    ${textStyles[size]}
+  `
+
+  return (
+    <li {...safeRest(rest)} className={classes}>
+      {children}
+    </li>
+  )
+}
 
 OrderedItem.propTypes = {
   size: PropTypes.oneOf([

src/components/Lists/OrderedList/OrderedList.modules.scss

@@ -1,21 +1,17 @@
-.base {
-  padding-left: 40px;
-}
-
 .decimal {
-  composes: base;
+  composes: base from '../List.modules.scss';
 
   list-style-type: decimal;
 }
 
 .upperAlpha {
-  composes: base;
+  composes: base from '../List.modules.scss';
 
   list-style-type: upper-alpha;
 }
 
 .lowerAlpha {
-  composes: base;
+  composes: base from '../List.modules.scss';
 
   list-style-type: lower-alpha;
 }

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

@@ -5,12 +5,18 @@ exports[`<OrderedList /> renders 1`] = `
   class="decimal"
 >
   <li
-    class="undefined"
+    class="
+      item
+      undefined
+    "
   >
     Lorem ipsum
   </li>
   <li
-    class="undefined"
+    class="
+      item
+      undefined
+    "
   >
     Dolor sit amet
   </li>

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

@@ -1,19 +1,25 @@
 @import '../../../../scss/settings/colours';
 @import '../../../../scss/settings/typography';
 
-.item::before {
-  font-family: $font-icons;
+.item {
+  composes: item from '../../ListItem.modules.scss';
+  position: relative;
+
+  &::before {
+    display: block;
+    position: absolute;
+    left: -24px;
+
+    font-family: $font-icons;
+  }
 }
 
 .circle {
   composes: item;
 
   &::before {
-    display: block;
-    position: absolute;
     content: '\002022';
     color: $color-telus-purple;
-    left: -21px;
   }
 }
 
@@ -23,7 +29,6 @@
   &::before {
     content: "\f101";
     color: $color-primary;
-    left: -33px;
   }
 }
 
@@ -33,6 +38,5 @@
   &::before {
     content: "\f104";
     color: $color-cardinal;
-    left: -33px;
   }
 }

src/components/Lists/UnorderedList/UnorderedList.jsx

@@ -5,7 +5,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 import safeRest from '../../../safeRest'
 import UnorderedItem from './UnorderedItem/UnorderedItem'
 
-import styles from './UnorderedList.modules.scss'
+import styles from '../List.modules.scss'
 
 const injectSizeAndListStyle = (child, size, listStyle) => (
   React.cloneElement(child, { size, listStyle })