Merge pull request #29 from WebDevStudios/feature/25-storybook-mdx

Greg Rickaby · web-flow · commit a5d762ffc7d1 · 2020-12-22T06:55:42.000-06:00
Feature/25 storybook mdx
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -6,7 +6,7 @@ module.exports = {
     fastRefresh: true,
     strictMode: true
   },
-  stories: ['../components/**/**/*.stories.js'],
+  stories: ['../components/**/**/*.stories.@(js|mdx)'],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-essentials',
diff --git a/components/molecules/Alert/Alert.js b/components/molecules/Alert/Alert.js
diff --git a/components/molecules/Alert/Alert.stories.mdx b/components/molecules/Alert/Alert.stories.mdx
@@ -0,0 +1,24 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import {Info, Warning} from './'
+
+<Meta title="Design System/Molecules/Alert" component={Info} />
+
+# Info
+
+Use this component to display an informational alert.
+
+<Canvas>
+  <Story name="Info">
+    <Info>This is an Info Alert</Info>
+  </Story>
+</Canvas>
+
+# Warning
+
+Use this component to display an warning alert.
+
+<Canvas>
+  <Story name="Warning">
+    <Warning>This is a Warning Alert</Warning>
+  </Story>
+</Canvas>
diff --git a/components/molecules/Alert/index.js b/components/molecules/Alert/index.js
@@ -0,0 +1 @@
+export {Info, Warning} from './Alert.js'
diff --git a/components/molecules/Alerts.stories.js b/components/molecules/Alerts.stories.js
diff --git a/components/molecules/Hero/Hero.js b/components/molecules/Hero/Hero.js
diff --git a/components/molecules/Hero/Hero.stories.js b/components/molecules/Hero/Hero.stories.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Hero from './Hero'
+import Hero from './'
 
 /**
  * The following is a story.
diff --git a/components/molecules/Hero/index.js b/components/molecules/Hero/index.js
@@ -0,0 +1 @@
+export {default} from './Hero'
diff --git a/components/organisms/Header.js b/components/organisms/Header.js
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import Navigation from '../molecules/Navigation'
+import Navigation from './Navigation'
 
 function Logo() {
   return (
diff --git a/components/organisms/Navigation.js b/components/organisms/Navigation.js
diff --git a/pages/about.js b/pages/about.js
@@ -1,5 +1,5 @@
 import Layout from '@/components/common/Layout'
-import {Info} from '@/components/molecules/Alerts'
+import {Info} from '@/components/molecules/Alert'
 
 export default function About() {
   return (
diff --git a/pages/isr.js b/pages/isr.js
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types'
 import Layout from '@/components/common/Layout'
+import {Info} from '@/components/molecules/Alert'
 import {fetcher} from '@/lib/functions'
 import Link from 'next/link'
-import {Info} from '@/components/molecules/Alerts'
+import PropTypes from 'prop-types'
 
 export default function IncrementalStaticRegeneration(props) {
   return (
diff --git a/pages/posts/[id].js b/pages/posts/[id].js
@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
 import Layout from '@/components/common/Layout'
+import {Info} from '@/components/molecules/Alert'
 import {fetcher} from '@/lib/functions'
-import {Info} from '@/components/molecules/Alerts'
+import PropTypes from 'prop-types'
 
 export default function BlogPost({post}) {
   return (
diff --git a/pages/ssg.js b/pages/ssg.js
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types'
 import Layout from '@/components/common/Layout'
+import {Info} from '@/components/molecules/Alert'
 import {fetcher} from '@/lib/functions'
 import Link from 'next/link'
-import {Info} from '@/components/molecules/Alerts'
+import PropTypes from 'prop-types'
 
 export default function StaticGeneration(props) {
   return (
diff --git a/pages/ssr.js b/pages/ssr.js
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types'
 import Layout from '@/components/common/Layout'
+import {Info} from '@/components/molecules/Alert'
 import {fetcher} from '@/lib/functions'
 import Link from 'next/link'
-import {Info} from '@/components/molecules/Alerts'
+import PropTypes from 'prop-types'
 
 export default function ServerSideRendering(props) {
   return (

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export {Info, Warning} from './Alert.js'`