feat(ui): convert StateList to a styled component

packages/ui/src/molecules/StateList.js

@@ -2,10 +2,27 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { map, uniqueId, keys, last } from 'lodash'
 import { ChevronRight } from 'react-feather'
+import styled from 'styled-components'
 
-import classes from './StateList.local.scss'
 import StateItem from '../atoms/StateItem'
 
+const StateListContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+`
+
+const ItemContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+`
+
+const Delimiter = styled(ChevronRight).attrs({ size: 16 })`
+  margin-left: 5px;
+  margin-right: 5px;
+`
+
 const StateList = ({ currentValues, update, values }) => {
   const progressIds = keys(values)
   const lastItem = last(progressIds)
@@ -18,27 +35,22 @@ const StateList = ({ currentValues, update, values }) => {
   }
 
   const items = map(values, (valueList, currentItem) => {
-    let delimiter
     const currentValueIndex = currentValues[currentItem]
 
-    if (currentItem !== lastItem) {
-      delimiter = <ChevronRight className={classes.delimiter} size={16} />
-    }
-
     return (
-      <div className={classes.itemContainer} key={uniqueId()}>
+      <ItemContainer key={uniqueId()}>
         <StateItem
           disabled={!canAct(currentItem)}
           index={currentValueIndex}
           update={handleUpdate}
           values={valueList}
         />
-        {delimiter}
-      </div>
+        {currentItem !== lastItem && <Delimiter />}
+      </ItemContainer>
     )
   })
 
-  return <div className={classes.stateListContainer}>{items}</div>
+  return <StateListContainer>{items}</StateListContainer>
 }
 
 StateList.propTypes = {

packages/ui/src/molecules/StateList.local.scss

-.stateListContainer {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-}
-
-.itemContainer {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-}
-
-.delimiter {
-  margin-left: 5px;
-  margin-right: 5px;
-}

packages/ui/test/__snapshots__/StateList.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StateList is rendered correctly 1`] = `
-.c0 {
+.c2 {
   cursor: pointer;
   font-family: var(--font-interface);
   font-size: 16px;
@@ -9,24 +9,57 @@ exports[`StateList is rendered correctly 1`] = `
   padding: 0;
 }
 
-.c0:focus {
+.c2:focus {
   outline: none;
 }
 
-.c0:hover {
+.c2:hover {
   color: #404040;
   -webkit-transition: 0.25s ease-in-out 0s;
   transition: 0.25s ease-in-out 0s;
 }
 
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c3 {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
 <div
-  className="stateListContainer"
+  className="c0"
 >
   <div
-    className="itemContainer"
+    className="c1"
   >
     <span
-      className="c0"
+      className="c2"
       disabled={false}
       onClick={[Function]}
       onKeyPress={[Function]}
@@ -36,7 +69,7 @@ exports[`StateList is rendered correctly 1`] = `
       To Clean
     </span>
     <svg
-      className="delimiter"
+      className="c3"
       fill="none"
       height={16}
       stroke="currentColor"
@@ -53,10 +86,10 @@ exports[`StateList is rendered correctly 1`] = `
     </svg>
   </div>
   <div
-    className="itemContainer"
+    className="c1"
   >
     <span
-      className="c0"
+      className="c2"
       disabled={false}
       onClick={[Function]}
       onKeyPress={[Function]}
@@ -66,7 +99,7 @@ exports[`StateList is rendered correctly 1`] = `
       To Edit
     </span>
     <svg
-      className="delimiter"
+      className="c3"
       fill="none"
       height={16}
       stroke="currentColor"
@@ -83,10 +116,10 @@ exports[`StateList is rendered correctly 1`] = `
     </svg>
   </div>
   <div
-    className="itemContainer"
+    className="c1"
   >
     <span
-      className="c0"
+      className="c2"
       disabled={false}
       onClick={[Function]}
       onKeyPress={[Function]}
@@ -96,7 +129,7 @@ exports[`StateList is rendered correctly 1`] = `
       To Review
     </span>
     <svg
-      className="delimiter"
+      className="c3"
       fill="none"
       height={16}
       stroke="currentColor"
@@ -113,10 +146,10 @@ exports[`StateList is rendered correctly 1`] = `
     </svg>
   </div>
   <div
-    className="itemContainer"
+    className="c1"
   >
     <span
-      className="c0"
+      className="c2"
       disabled={false}
       onClick={[Function]}
       onKeyPress={[Function]}