feat(website): add component to list storybook stories

plouc · Aug 26, 2018 · 6b9ce02 · 6b9ce02
1 parent b44c854
commit 6b9ce02
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 27 deletions.
diff --git a/website/src/components/ChartCode.js b/website/src/components/ChartCode.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import CollapsibleCard from './CollapsibleCard'
 
-class ChartCode extends Component {
+export default class ChartCode extends Component {
     shouldComponentUpdate(nextProps) {
         if (nextProps.code === this.props.code) {
             return false
@@ -22,5 +22,3 @@ class ChartCode extends Component {
         )
     }
 }
-
-export default ChartCode
diff --git a/website/src/components/Stories.js b/website/src/components/Stories.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import VisitIcon from 'react-icons/lib/md/keyboard-arrow-right'
+import config from '../config'
+import CollapsibleCard from './CollapsibleCard'
+
+const buildStoryLink = ({ kind, story }) =>
+    `${config.storybookUrl}?selectedKind=${encodeURIComponent(
+        kind
+    )}&selectedStory=${encodeURIComponent(story)}`
+
+export default class Stories extends Component {
+    static propTypes = {
+        stories: PropTypes.arrayOf(
+            PropTypes.shape({
+                label: PropTypes.string.isRequired,
+                link: PropTypes.shape({
+                    kind: PropTypes.string.isRequired,
+                    story: PropTypes.string.isRequired,
+                }).isRequired,
+            })
+        ),
+    }
+
+    render() {
+        const { stories } = this.props
+
+        return (
+            <CollapsibleCard title="Demos" expandedByDefault={true}>
+                {stories.map((story, i) => (
+                    <a
+                        key={i}
+                        className="stories__item"
+                        href={buildStoryLink(story.link)}
+                        target="_blank"
+                    >
+                        {story.label}
+                        <VisitIcon size={20} color="#bbb" />
+                    </a>
+                ))}
+            </CollapsibleCard>
+        )
+    }
+}
diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js
@@ -16,6 +16,8 @@ import ChartTabs from '../../ChartTabs'
 import BarControls from './BarControls'
 import config from '../../../config'
 import generateCode from '../../../lib/generateChartCode'
+import Stories from '../../Stories'
+import { barStories } from './stories'
 import ComponentPropsDocumentation from '../../properties/ComponentPropsDocumentation'
 import properties from './props'
 import nivoTheme from '../../../nivoTheme'
@@ -241,16 +243,7 @@ export default class Bar extends Component {
                     >
                         sample
                     </a>{' '}
-                    or <Link to="/bar/api">try it using the API client</Link>. You can also see more
-                    example usages in{' '}
-                    <a
-                        href={`${config.storybookUrl}?selectedKind=Bar&selectedStory=stacked`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        the storybook
-                    </a>
-                    .
+                    or <Link to="/bar/api">try it using the API client</Link>.
                 </p>
                 <p>
                     See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
@@ -265,6 +258,8 @@ export default class Bar extends Component {
             </div>
         )
 
+        const stories = <Stories stories={barStories} />
+
         return (
             <div className="page_content grid">
                 <div className="chart-page_main">
@@ -285,12 +280,14 @@ export default class Bar extends Component {
                         settings={settings}
                         onChange={this.handleSettingsUpdate}
                     />
+                    <MediaQuery query="(max-width: 1000px)">{stories}</MediaQuery>
                     <ComponentPropsDocumentation chartClass="Bar" properties={properties} />
                 </div>
                 <div className="chart-page_aside">
                     <MediaQuery query="(min-width: 1000px)">
                         {header}
                         {description}
+                        {stories}
                     </MediaQuery>
                 </div>
             </div>

diff --git a/website/src/components/charts/bar/stories.js b/website/src/components/charts/bar/stories.js
@@ -0,0 +1,44 @@
+export const barStories = [
+    {
+        label: 'Using markers',
+        link: {
+            kind: 'Bar',
+            story: 'with marker',
+        },
+    },
+    {
+        label: 'Stacked diverging bar chart',
+        link: {
+            kind: 'Bar',
+            story: 'diverging stacked',
+        },
+    },
+    {
+        label: 'Grouped diverging bar chart',
+        link: {
+            kind: 'Bar',
+            story: 'diverging grouped',
+        },
+    },
+    {
+        label: 'Custom bar element',
+        link: {
+            kind: 'Bar',
+            story: 'custom bar item',
+        },
+    },
+    {
+        label: 'Formatting values',
+        link: {
+            kind: 'Bar',
+            story: 'with formatted values',
+        },
+    },
+    {
+        label: 'Using custom tooltip',
+        link: {
+            kind: 'Bar',
+            story: 'custom tooltip',
+        },
+    },
+]
diff --git a/website/src/components/charts/bubble/Bubble.js b/website/src/components/charts/bubble/Bubble.js
@@ -15,6 +15,8 @@ import { patternLinesDef } from '@nivo/core'
 import ChartHeader from '../../ChartHeader'
 import ChartTabs from '../../ChartTabs'
 import generateCode from '../../../lib/generateChartCode'
+import Stories from '../../Stories'
+import { bubbleStories } from './stories'
 import BubbleControls from './BubbleControls'
 import ComponentPropsDocumentation from '../../properties/ComponentPropsDocumentation'
 import properties from './props'
@@ -147,6 +149,8 @@ export default class Bubble extends Component {
             </div>
         )
 
+        const stories = <Stories stories={bubbleStories} />
+
         return (
             <div className="page_content grid">
                 <div className="chart-page_main">
@@ -166,12 +170,14 @@ export default class Bubble extends Component {
                         settings={settings}
                         onChange={this.handleSettingsUpdate}
                     />
+                    <MediaQuery query="(max-width: 1000px)">{stories}</MediaQuery>
                     <ComponentPropsDocumentation chartClass="Bubble" properties={properties} />
                 </div>
                 <div className="chart-page_aside">
                     <MediaQuery query="(min-width: 1000px)">
                         {header}
                         {description}
+                        {stories}
                     </MediaQuery>
                 </div>
             </div>

diff --git a/website/src/components/charts/bubble/stories.js b/website/src/components/charts/bubble/stories.js
@@ -0,0 +1,16 @@
+export const bubbleStories = [
+    {
+        label: 'Using formatted values',
+        link: {
+            kind: 'Bubble',
+            story: 'with formatted values',
+        },
+    },
+    {
+        label: 'Using custom tooltip',
+        link: {
+            kind: 'Bubble',
+            story: 'custom tooltip',
+        },
+    },
+]
diff --git a/website/src/styles/components.css b/website/src/styles/components.css
@@ -21,17 +21,3 @@
     margin-right: 7px;
     margin-bottom: 7px;
 }
-
-/*
-.component_meta_tag:before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 9px;
-    left: 7px;
-    width: 6px;
-    height: 6px;
-    border-radius: 3px;
-    background: var(--main-background-color);
-}
-*/
diff --git a/website/src/styles/index.css b/website/src/styles/index.css
@@ -14,6 +14,7 @@
 @import 'home.css';
 @import 'charts.css';
 @import 'controls.css';
+@import 'stories.css';
 @import 'components/components-filters.css';
 @import 'components/components-grid.css';
 @import 'components/components-search.css';

diff --git a/website/src/styles/stories.css b/website/src/styles/stories.css
@@ -0,0 +1,15 @@
+.stories__item {
+    padding: 12px 24px;
+    border-top: 1px solid #e2e5e6;
+    font-size: 14px;
+    line-height: 1.6em;
+    cursor: pointer;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.stories__item:hover {
+    background: #f7fafb;
+}