From b9a2a7425388655c4d4055062c59880467f1da0d Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Fri, 27 Nov 2020 12:20:10 +1100
Subject: [PATCH] Docs - update Container, Section, Typography to  new artifak
 api

---
 docs/components/Container.tsx  |  10 ++-
 docs/components/Section.tsx    |  10 ++-
 docs/components/Typography.tsx | 136 +++++++++++++++++++--------------
 3 files changed, 90 insertions(+), 66 deletions(-)

diff --git a/docs/components/Container.tsx b/docs/components/Container.tsx
index 2ad31b9..cb6e639 100644
--- a/docs/components/Container.tsx
+++ b/docs/components/Container.tsx
@@ -1,11 +1,13 @@
 import { theme } from '../theme';
 import { createBlockComponents } from 'artifak';
 
-const styles = {
+const settings = {
   Container: {
-    margin: '0 auto',
-    maxWidth: theme.container
+    styles: {
+      margin: '0 auto',
+      maxWidth: theme.container
+    }
   }
 };
 
-export const { Container } = createBlockComponents<typeof styles>(styles);
+export const { Container } = createBlockComponents<typeof settings>(settings);
diff --git a/docs/components/Section.tsx b/docs/components/Section.tsx
index e3487e0..3b299da 100644
--- a/docs/components/Section.tsx
+++ b/docs/components/Section.tsx
@@ -1,10 +1,12 @@
 import { createBlockComponents } from 'artifak';
 
-const styles = {
+const settings = {
   Section: {
-    marginBottom: ['1.5em', '5em'],
-    as: 'section'
+    styles: {
+      marginBottom: ['1.5em', '5em'],
+      as: 'section'
+    }
   }
 };
 
-export const { Section } = createBlockComponents<typeof styles>(styles);
+export const { Section } = createBlockComponents<typeof settings>(settings);
diff --git a/docs/components/Typography.tsx b/docs/components/Typography.tsx
index 4c6c1be..b0350ca 100644
--- a/docs/components/Typography.tsx
+++ b/docs/components/Typography.tsx
@@ -2,91 +2,111 @@ import styled from 'styled-components';
 import { createTypographyComponents, fontWeight } from 'artifak';
 import { theme } from '../theme';
 
-const styles = {
+const settings = {
   H1: {
-    fontSize: [48, 56],
-    fontFamily: theme.fontFamily.poppins,
-    margin: '0 0 0.5em',
-    lineHeight: 1.5,
-    as: 'h1'
+    styles: {
+      fontSize: [48, 56],
+      fontFamily: theme.fontFamily.poppins,
+      margin: '0 0 0.5em',
+      lineHeight: 1.5,
+      as: 'h1'
+    }
   },
 
   H2: {
-    fontSize: [24, 32, 40],
-    fontFamily: theme.fontFamily.poppins,
-    lineHeight: 1.45,
-    margin: '0 0 0.5em',
-    as: 'h2'
+    styles: {
+      fontSize: [24, 32, 40],
+      fontFamily: theme.fontFamily.poppins,
+      lineHeight: 1.45,
+      margin: '0 0 0.5em',
+      as: 'h2'
+    }
   },
 
   H3: {
-    fontSize: [24, 28, 30, 32],
-    fontFamily: theme.fontFamily.poppins,
-    lineHeight: 1.45,
-    margin: '0 0 0.5em',
-    as: 'h3'
+    styles: {
+      fontSize: [24, 28, 30, 32],
+      fontFamily: theme.fontFamily.poppins,
+      lineHeight: 1.45,
+      margin: '0 0 0.5em',
+      as: 'h3'
+    }
   },
 
   H4: {
-    fontSize: [18, 20, 22, 24],
-    fontFamily: theme.fontFamily.poppins,
-    lineHeight: 1.45,
-    margin: '0 0 0.5em',
-    as: 'h4'
+    styles: {
+      fontSize: [18, 20, 22, 24],
+      fontFamily: theme.fontFamily.poppins,
+      lineHeight: 1.45,
+      margin: '0 0 0.5em',
+      as: 'h4'
+    }
   },
 
   H5: {
-    fontSize: [16, 17, 19, 21],
-    fontFamily: theme.fontFamily.poppins,
-    lineHeight: 1.45,
-    margin: '0 0 0.5em',
-    as: 'h5'
+    styles: {
+      fontSize: [16, 17, 19, 21],
+      fontFamily: theme.fontFamily.poppins,
+      lineHeight: 1.45,
+      margin: '0 0 0.5em',
+      as: 'h5'
+    }
   },
 
   H6: {
-    fontSize: [16, 17, 19, 21],
-    fontFamily: theme.fontFamily.poppins,
-    lineHeight: 1.45,
-    margin: '0 0 0.5em',
-    as: 'h6'
+    styles: {
+      fontSize: [16, 17, 19, 21],
+      fontFamily: theme.fontFamily.poppins,
+      lineHeight: 1.45,
+      margin: '0 0 0.5em',
+      as: 'h6'
+    }
   },
 
   LargeLead: {
-    color: theme.colors.primary,
-    fontWeight: fontWeight.semiBold,
-    fontSize: [18, 20, 22, 24],
-    fontFamily: theme.fontFamily.poppins,
-    marginTop: 0,
-    marginBottom: '0.4em',
-    as: 'p'
+    styles: {
+      color: theme.colors.primary,
+      fontWeight: fontWeight.semiBold,
+      fontSize: [18, 20, 22, 24],
+      fontFamily: theme.fontFamily.poppins,
+      marginTop: 0,
+      marginBottom: '0.4em',
+      as: 'p'
+    }
   },
 
   SmallLead: {
-    color: theme.colors.text,
-    fontWeight: fontWeight.semiBold,
-    fontSize: [17, 18, 19, 21],
-    fontFamily: theme.fontFamily.poppins,
-    lineHeight: 1.45,
-    marginTop: 0,
-    as: 'p'
+    styles: {
+      color: theme.colors.text,
+      fontWeight: fontWeight.semiBold,
+      fontSize: [17, 18, 19, 21],
+      fontFamily: theme.fontFamily.poppins,
+      lineHeight: 1.45,
+      marginTop: 0,
+      as: 'p'
+    }
   },
 
   Paragraph: {
-    fontSize: ['1rem', '1.1rem'],
-    fontWeight: 300,
-    fontFamily: theme.fontFamily.biryani,
-    lineHeight: 1.45,
-    marginTop: 0,
-    as: 'p'
+    styles: {
+      fontSize: ['1rem', '1.1rem'],
+      fontWeight: 300,
+      fontFamily: theme.fontFamily.biryani,
+      lineHeight: 1.45,
+      marginTop: 0,
+      as: 'p'
+    }
   },
 
   SmallParagraph: {
-    fontSize: [12, 14],
-    fontWeight: fontWeight.regular,
-    fontFamily: theme.fontFamily.biryani,
-    lineHeight: 1.45,
-    marginTop: 0,
-    as: 'p'
+    styles: {
+      fontSize: [12, 14],
+      fontWeight: fontWeight.regular,
+      fontFamily: theme.fontFamily.biryani,
+      lineHeight: 1.45,
+      marginTop: 0,
+      as: 'p'
+    }
   }
 };
 
@@ -101,7 +121,7 @@ export const {
   SmallLead,
   Paragraph,
   SmallParagraph
-} = createTypographyComponents<typeof styles>(styles);
+} = createTypographyComponents<typeof settings>(settings);
 
 export const Strong = styled.strong`
   font-weight: ${({ theme }) => theme.fontWeight.BLACK};