Extract ingredient list logic to its own component. Improve styles for Recipe Card

recipes/src/components/IngredientList/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ISubRecipe } from 'src/types/recipes';
+
+import './styles.scss';
+
+type ShowIngredientsProps = {
+  ingredients: ISubRecipe[],
+  className?: string,
+};
+
+export default function ShowIngredients(props: ShowIngredientsProps) {
+  const { ingredients } = props;
+  return (
+    <div className={`cbk-ingredient-list ${props.className ? props.className : ''}`} >
+      {
+        ingredients.map((subRecipe, i) => (
+          <ul key={i}>
+            {
+              subRecipe.name ? 
+                <li className='cbk-ingredient-list__sub-recipe'>
+                  {subRecipe.name}
+                </li>
+                : null
+            }
+            {
+              subRecipe.ingredients.map((ing, j) => (
+                <li className='cbk-ingredient-list__ingredient' key={j}>
+                  <span>{ing.name}</span>
+                  <span>{ing.quantity + ing.unit}</span>
+                </li>
+              ))
+            }
+          </ul>
+        ))
+      }
+    </div>
+  )
+};

recipes/src/components/IngredientList/styles.scss

@@ -0,0 +1,42 @@
+@import 'styles/_variables.scss';
+
+.cbk-ingredient-list {
+  font-family: $font-family-display;
+  font-size: $font-size-large;
+  color: $grey-700;
+
+  &__sub-recipe {
+    font-weight: $font-weight-bold;
+  }
+
+  &__ingredient {
+    display: table;
+    span {
+      display: table-cell;
+    }
+
+    span:first-child {
+      position: relative;
+      overflow: hidden;
+    }
+
+    span:first-child:after {
+      content: '';
+      position: absolute;
+      bottom: 0.2em;
+      margin-left: 0.5em;
+      width: 100%;
+      border-bottom: 2px dotted $grey-400;
+    }
+    span + span {
+      text-align: right;
+      width: 1%;
+      vertical-align: bottom;
+      padding-left: 0.5em;
+    }
+  }
+
+  &__ingredient:last-child {
+    margin-bottom: $spacing-small;
+  }
+}

recipes/src/components/RecipeCard/index.tsx

@@ -1,12 +1,10 @@
 import React, { Component } from 'react';
-import IRecipe, { IIngComponent, IIngredient } from '../../types/recipes';
+import IRecipe, { ISubRecipe, IIngredient } from '../../types/recipes';
 import Card, {
-  CardActions,
-  CardActionButtons,
-  CardPrimaryContent,
   CardMedia,
 } from "@material/react-card";
 import Icon from 'components/Icon';
+import Ingredients from 'components/IngredientList';
 import moment from 'moment';
 
 import sample_img from "components/Card/sample.png";
@@ -16,41 +14,6 @@ import { ReactComponent as Servings } from 'svgs/servings.svg';
 
 import './styles.scss';
 
-
-type ShowIngredientsProps = {
-  ingredients: IIngComponent[]
-};
-
-function ShowIngredients(props: ShowIngredientsProps) {
-  const { ingredients } = props;
-  return (
-    <div className="cbk-ingredient-list">
-      {
-        ingredients.map((item, i) => (
-          <ul key={i}>
-            {
-              item.name ? 
-                <li className="section-name">
-                  {item.name}
-                </li>
-                : null
-            }
-            {
-              item.ingredients.map((ing, j) => (
-                <li className='ingredient' key={j}>
-                  <span>{ing.name}</span>
-                  <span>{ing.quantity + ing.unit}</span>
-                </li>
-              ))
-            }
-          </ul>
-        ))
-      }
-    </div>
-  )
-}
-
-
 type RecipeCardProps = {
   recipe: IRecipe,
 }
@@ -86,13 +49,13 @@ function CBKRecipeCard(props: RecipeCardProps) {
       </div>
       <div className='cbk-recipe-card__content'>
         <div className='cbk-recipe-card__content__ingredients'>
-          <ShowIngredients ingredients={recipe.ingredients} />
+          <Ingredients ingredients={recipe.ingredients} />
         </div>
         <div className='cbk-recipe-card__content__instructions'>
           <ol>
             {
-              recipe.instructions.map((instruction, i) => (
-                <li key={i}>{instruction}</li>
+              recipe.instructions.map((step, i) => (
+                <li key={i}>{step}</li>
               ))
             }            
           </ol>

recipes/src/components/RecipeCard/styles.scss

@@ -1,49 +1,8 @@
 @import 'styles/_variables.scss';
 
-.cbk-ingredient-list {
-  font-family: $font-family-display;
-  font-size: $font-size-large;
-  color: $grey-700;
-
-  li.section-name {
-    font-weight: $font-weight-bold;
-  }
-
-  li.ingredient {
-    display: table;
-    span {
-      display: table-cell;
-    }
-
-    span:first-child {
-      position: relative;
-      overflow: hidden;
-    }
-
-    span:first-child:after {
-      content: '';
-      position: absolute;
-      bottom: 0.2em;
-      margin-left: 0.5em;
-      width: 100%;
-      border-bottom: 2px dotted $grey-400;
-    }
-    span + span {
-      text-align: right;
-      width: 1%;
-      vertical-align: bottom;
-      padding-left: 0.5em;
-    }
-  }
-
-  li.ingredient:last-child {
-    margin-bottom: $spacing-small;
-  }
-}
-
 .cbk-recipe-card {
   border: 0px;
-  padding: $spacing-large;
+  padding: $spacing-x-large;
   
   &__primary {
     display: flex;
@@ -104,4 +63,22 @@
       }
     }
   }
+
+  &__content {
+    &__ingredients {
+      margin: $spacing-regular 0px;
+    }
+    &__instructions {
+      color: $grey-700;
+      ol {
+        margin: 0px;
+        padding-left: $spacing-small;
+        text-align: justify;
+
+        li {
+          margin: $spacing-small 0px;
+        }
+      }
+    }
+  }
 }

recipes/src/types/recipes.ts

@@ -4,7 +4,7 @@ export interface IIngredient {
   unit: string,
   _original: string,
 }
-export interface IIngComponent {
+export interface ISubRecipe {
   name: string,
   ingredients: IIngredient[]
 }
@@ -19,7 +19,7 @@ export default interface IRecipe {
     cookingTime: string,
     servings: number
   },
-  ingredients: IIngComponent[],
+  ingredients: ISubRecipe[],
   instructions: string[],
   name: string,
   summary: string,