Merge 7e1337c into 930f27a

.storybook/config.js

@@ -11,6 +11,15 @@ import { withKnobs } from '@storybook/addon-knobs/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import { withHTML } from '@whitespace/storybook-addon-html/react';
+/*
+ *  app fonts
+ *  jest requires 'index.css' for import to be mocked.
+ *  see @ https://github.com/facebook/jest/issues/8988
+ */
+import 'typeface-montserrat/index.css';
+import 'typeface-poppins/index.css';
+import 'typeface-roboto/index.css';
+// styles
 import '../app/style/custom.scss';
 import './storybook.css';
 

.storybook/storybook.css

@@ -9,11 +9,9 @@ body {
 }
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-body.fontLoaded {
-  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 #app {
@@ -24,7 +22,7 @@ body.fontLoaded {
 
 p,
 label {
-  font-family: Georgia, Times, 'Times New Roman', serif;
+  font-family: 'Poppins', Georgia, Times, 'Times New Roman', serif;
   line-height: 1.5em;
 }
 

app/components/atoms/Text/index.js

@@ -7,6 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'styled-components';
 
 export const TextColors = [
   'primary',
@@ -26,9 +27,15 @@ export const TextColors = [
 
 export const TextVariants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', ''];
 
+const StyledText = styled.p`
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+`;
+
 const Text = ({ variant, color, className, children }) => {
   const elClass = `${variant} text-${color} ${className}`;
-  return <p className={elClass}>{children}</p>;
+  return <StyledText className={elClass}>{children}</StyledText>;
 };
 
 Text.defaultProps = {

app/components/atoms/Title/index.js

@@ -13,6 +13,7 @@ const Title = styled.h1.attrs(({ size, className }) => ({
 }))`
   color: ${props => props.color};
   margin-bottom: 0.25em;
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 `;
 
 Title.defaultProps = {

app/components/molecules/Hero/tests/__snapshots__/index.test.js.snap

@@ -14,7 +14,7 @@ exports[`<Hero /> Should render and match the snapshot 1`] = `
         class="pb-3 my-auto col-6"
       >
         <h1
-          class="Title-sc-3abvrr-0 Hero__HeroTitle-sc-1ele3ck-1 bqYlOi mb-0 font-weight-bold display-1 mb-0 font-weight-bold"
+          class="Title-sc-3abvrr-0 Hero__HeroTitle-sc-1ele3ck-1 bVtUDZ mb-0 font-weight-bold display-1 mb-0 font-weight-bold"
           color="#fefefe"
           size="1"
         >

app/components/organisms/HomeHero/tests/__snapshots__/index.test.js.snap

@@ -17,7 +17,7 @@ exports[`<HomeHero /> Should render and match the snapshot 1`] = `
           class="pb-3 my-auto col-6"
         >
           <h1
-            class="Title-sc-3abvrr-0 Hero__HeroTitle-sc-1ele3ck-1 bqYlOi mb-0 font-weight-bold display-1 mb-0 font-weight-bold"
+            class="Title-sc-3abvrr-0 Hero__HeroTitle-sc-1ele3ck-1 bVtUDZ mb-0 font-weight-bold display-1 mb-0 font-weight-bold"
             color="#fefefe"
             size="1"
           >

app/components/templates/HomeLayout/tests/__snapshots__/index.test.js.snap

@@ -17,7 +17,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
           class="banner-text text-center"
         >
           <p
-            class=" text-body m-0 p-1"
+            class="Text__StyledText-sc-1foatad-0 ckNvnb  text-body m-0 p-1"
           >
             banner content
           </p>
@@ -232,7 +232,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
             class="pb-3 my-auto col-6"
           >
             <h1
-              class="Title-sc-3abvrr-0 Hero__HeroTitle-sc-1ele3ck-1 bqYlOi mb-0 font-weight-bold display-1 mb-0 font-weight-bold"
+              class="Title-sc-3abvrr-0 Hero__HeroTitle-sc-1ele3ck-1 bVtUDZ mb-0 font-weight-bold display-1 mb-0 font-weight-bold"
               color="#fefefe"
               size="1"
             >
@@ -279,12 +279,12 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
               class="p-3 col-md-7 col-9"
             >
               <p
-                class="h3 text-light text-justify text-center mb-3"
+                class="Text__StyledText-sc-1foatad-0 ckNvnb h3 text-light text-justify text-center mb-3"
               >
                 Subscribe to our Newsletter
               </p>
               <p
-                class=" text-light text-center m-0"
+                class="Text__StyledText-sc-1foatad-0 ckNvnb  text-light text-center m-0"
               >
                 Don't miss out on any deals and stay up to date with the latest trends.
               </p>

app/global-styles.js

@@ -13,7 +13,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   body.fontLoaded {
-    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: 'Montserrat', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   }
 
   #app {
@@ -24,7 +24,7 @@ const GlobalStyle = createGlobalStyle`
 
   p,
   label {
-    font-family: Georgia, Times, 'Times New Roman', serif;
+    font-family: 'Poppins', Georgia, Times, 'Times New Roman', serif;
     line-height: 1.5em;
   }