Organizing Storybook components

Author: dcooney

components/atoms/RichText/RichText.module.css

@@ -7,6 +7,10 @@
   & p,
   &.p {
     @apply font-primary text-root-em mb-20;
+
+    & > a {
+      @apply text-primary;
+    }
   }
 
   /* Heading Styles */

components/atoms/RichText/RichText.stories.mdx

@@ -1,7 +1,7 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
 import RichText from '.'
 
-<Meta title="Design System/Atoms/RichText" component={RichText} />
+<Meta title="Components/Atoms/RichText" component={RichText} />
 
 # RichText
 
@@ -23,9 +23,8 @@ The following shows examples that have generic styles applied.
 
 <Canvas>
   <Story name="ContentSamples">
-    <RichText tag='div'>
-      {
-        `<h1>H1</h1>
+    <RichText tag="div">
+      {`<h1>H1</h1>
         <h2>H2</h2>
         <h3>H3</h3>
         <h3>H3</h3>
@@ -54,8 +53,7 @@ The following shows examples that have generic styles applied.
             </ol>
           </li>
           <li>OL List item 3</li>
-        </ol>`
-      }
+        </ol>`}
     </RichText>
   </Story>
 </Canvas>
@@ -66,7 +64,7 @@ In certain cases the wrapper element should change according to the content need
 
 <Canvas>
   <Story name="Tag">
-    <RichText tag='h2'>
+    <RichText tag="h2">
       {`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
     </RichText>
   </Story>
@@ -79,9 +77,9 @@ Arbitrary HTML attributes can be added to the RichText component with the `attri
 <Canvas>
   <Story name="Attributes">
     <RichText
-      tag='h2'
+      tag="h2"
       attributes={{
-        'data-att': true,
+        'data-att': true
       }}
     >
       {`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
@@ -101,10 +99,9 @@ export const Template = (args) => <Icon {...args} />
     args={{
       id: 'component-id',
       className: 'component-class',
-      children: <p>Paragraph content.</p>,
+      children: <p>Paragraph content.</p>
     }}
   >
     {Template.bind({})}
   </Story>
 </Canvas>
-

components/molecules/AlgoliaSearch/AlgoliaSearch.stories.mdx

@@ -1,7 +1,7 @@
 import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
 import AlgoliaSearch from './'
 
-<Meta title="Design System/Molecules/AlgoliaSearch" component={AlgoliaSearch} />
+<Meta title="Components/Molecules/AlgoliaSearch" component={AlgoliaSearch} />
 
 # Search
 

components/molecules/Form/Form.stories.mdx

@@ -6,7 +6,7 @@ import * as Yup from 'yup'
 
 import Form from '.'
 
-<Meta title="Design System/Molecules/Form" component={Form} />
+<Meta title="Components/Molecules/Form" component={Form} />
 
 # Form
 

components/molecules/GravityForm/Fields/Field.stories.mdx

@@ -73,7 +73,7 @@ export const fieldsSample = [
   }
 ]
 
-<Meta title="Design System/Molecules/GravityForm/Fields" component={Fields} />
+<Meta title="Components/Molecules/GravityForm/Fields" component={Fields} />
 
 # Fields
 

components/molecules/GravityForm/GravityForm.stories.mdx

@@ -229,7 +229,7 @@ export const sampleForm = {
   }
 }
 
-<Meta title="Design System/Molecules/GravityForm" component={GravityForm} />
+<Meta title="Components/Molecules/GravityForm" component={GravityForm} />
 
 # GravityForm