Create ShoppingList components: implements List component for a specified shopping cart list. Improve List styles

recipes/src/components/List/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classnames from 'classnames';
 
 import './styles.scss';
 
@@ -12,7 +13,12 @@ type ListProps<T> = {
 }
 
 const CBKList = <T extends {}>(props: ListProps<T>) => (
-  <ul className='cbk-list'>
+  <ul className={
+    classnames({
+      'cbk-list': true,
+      'cbk-list--dense': props.dense
+    })
+  }>
     {
       props.items.map((item, index) => (
         <li

recipes/src/components/List/styles.scss

@@ -11,11 +11,10 @@
     height: 48px;
     padding: 0 16px;
     overflow: hidden;
-    transition: opacity 15ms linear,
-                background-color 15ms linear;
     &:hover,
     &--focus {
-      background-color: rgba(0,0,0,0.04)
+      background-color: $yellow
+      ;
     }
     .primary-text,
     .secondary-text {
@@ -32,4 +31,10 @@
       width: 20%;
     }
   }
+  &--dense {
+    padding: 0;
+    .cbk-list__item {
+      height: auto;
+    }
+  }
 }

recipes/src/components/ShoppingList/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import List from 'components/List';
+import ShoppingItem from 'types/shopping-cart';
+import { groupBy } from 'ramda';
+
+import './styles.scss';
+
+interface ShoppingListProps {
+  items: ShoppingItem[],
+}
+
+const ShoppingList: React.FunctionComponent<ShoppingListProps> = ({ items }) => (
+  <div className='cbk-shopping-list'>
+    <List
+      dense
+      items={items}
+      render={ item => (
+        <div className='cbk-shopping-list__item'>
+          <div className='cbk-shopping-list__item__name'>
+            {item.name}
+            <div className='cbk-shopping-list__item__name__recipes'>
+              {
+                item.recipeName && item.recipeName.join(', ')
+              }
+            </div>
+          </div>
+          <div className='cbk-shopping-list__item__quantity'>
+            {item.quantity} {item.unit}
+          </div>
+        </div>
+      )}
+    />
+  </div>
+)
+
+export default ShoppingList;

recipes/src/components/ShoppingList/styles.scss

@@ -0,0 +1,36 @@
+@import 'styles/_variables';
+
+.cbk-shopping-list {
+  column-count: 2;
+  column-gap: $spacing-regular;
+
+  li {
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  &__item {
+    display: flex;
+    flex: 1;
+    padding: 4px 0;
+
+    &__name {
+      flex: 2;
+      font-weight: $font-weight-bold;
+      &__recipes {
+        font-size: 0.75rem;
+        font-style: italic;
+        color: $grey-600;
+        font-weight: initial;
+        span {
+          margin-right: $spacing-small/2;
+        }
+      }
+    }
+    &__quantity {
+      flex: 1;
+      text-align: right;
+    }
+  }
+}