Docs Update

- update Getting Started, Typography and Generator docs
heyjul3s · Jan 4, 2021 · 4d20a9b · 4d20a9b
1 parent d9687d2
commit 4d20a9b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 23 deletions.
diff --git a/docs/containers/Generator/Generator.tsx b/docs/containers/Generator/Generator.tsx
@@ -64,13 +64,10 @@ export function GeneratorContent() {
         The component-generator library or generator for short, includes a{' '}
         <Strong>createComponents</Strong> utility function to generate some
         simple Styled Components. The objective of this function is to attempt
-        to create consistent style bases for component development and does not
-        cater to detailed, complex, and or single-use cases.
-      </Paragraph>
-
-      <Paragraph>
-        This utility is included to provide some flexibility as sometimes a need
-        for custom style properties may arise.
+        to create consistent style bases for component development and provide
+        some flexibility as sometimes a need for custom style properties may
+        arise. This does not cater to detailed, complex, and or single-use case
+        components that you may require.
       </Paragraph>
 
       <HR />

diff --git a/docs/containers/Generator/examples/createComponentsUsage.ts b/docs/containers/Generator/examples/createComponentsUsage.ts
@@ -3,7 +3,7 @@ export const createComponentsUsage = `
   import { createComponents } from 'artifak';
   import { theme } from './theme';
 
-  // # EXAMPLE 1
+  // # EXAMPLE 1 - USING A CONFIGURATION OBJECT AS BASE
   // Note that this is just an example, please use the
   // "button" HTML element whenever possible. In the
   // examples, we will see full usage of the
@@ -19,7 +19,7 @@ export const createComponentsUsage = `
     styleProps: [position],
     attrs: { role: 'button' },
     element: 'div'
-  }
+  };
 
   // Define your component styles
   const config = {
@@ -65,7 +65,7 @@ export const createComponentsUsage = `
   } = createComponents<typeof config, typeof theme>(BaseComponent, config);
 
 
-  // # EXAMPLE 2
+  // # EXAMPLE 2 - USING A COMPONENT AS BASE
   // You can also pass in a component to use as base.
   // For example, let us create a BasicButton component.
 

diff --git a/docs/containers/GettingStarted/content/Setup.tsx b/docs/containers/GettingStarted/content/Setup.tsx
@@ -6,7 +6,7 @@ import { setupExample } from '../examples';
 export function Setup() {
   return (
     <>
-      <H3 color={theme.colors.primary}>Setup Your Components (Optional)</H3>
+      <H3 color={theme.colors.primary}>Setup Your Components</H3>
 
       <Paragraph>
         For greenfield projects, it would usually involve some basic setups to

diff --git a/docs/containers/GettingStarted/examples/setup.ts b/docs/containers/GettingStarted/examples/setup.ts
@@ -1,9 +1,17 @@
 export const setupExample = `
   // For example, let's say we created a new file called Typography
   // and then add the following
-  import { createTypographyComponents } from 'artifak';
+  import { createTypography } from 'artifak';
+  import { theme } from './theme';
 
-  const styles = {
+  const base = {
+    styles: {
+      fontFamily: theme.fonts.primary,
+      marginTop: 0
+    }
+  }
+
+  const config = {
     Heading1: {
       fontSize: ['36px', '42px', '48px']
       lineHeight: 1.4,
@@ -26,9 +34,9 @@ export const setupExample = `
     }
   };
 
-  const { 
-    Heading1, 
-    Heading2, 
-    Paragraph 
+  const {
+    Heading1,
+    Heading2,
+    Paragraph
   } = createTypographyComponents<typeof styles>(styles);
 `;
diff --git a/docs/containers/Typography/Typography.tsx b/docs/containers/Typography/Typography.tsx
@@ -80,10 +80,17 @@ export function TypographyContent() {
         }}
       />
 
-      <Paragraph>This function helps generate Typography components.</Paragraph>
+      <Paragraph>
+        As opposed to branching off of a single component, this function allows
+        you to generate your Typography components. This way you will have more
+        room to operate in terms of defining the tone of your Typographic
+        elements via variants.
+      </Paragraph>
 
       <Syntax>{createTypographExample}</Syntax>
 
+      <HR />
+
       <H4>Generics</H4>
 
       <Paragraph>
@@ -130,11 +137,8 @@ export function TypographyContent() {
 
       <Paragraph>
         <Strong>base</Strong> is what is used as a basis to generate components
-        defined in settings. It can accept another component or a configuration
-        object with properties as described by the table below. Note that the
-        end result will also include a <Strong>Base</Strong> component if a
-        configuration object is passed as an argument for the{' '}
-        <Strong>base</Strong> parameter and can be used as you see fit.
+        defined in settings. It accepts a configuration object with properties
+        as described by the table below.
       </Paragraph>
 
       <ParamsTable APIname={'base'} cells={createBlocksBaseCells} />