From 6b9ce02ec79a0b8a524323300e3a14250df4cddb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Sun, 26 Aug 2018 11:35:19 +0900 Subject: [PATCH] feat(website): add component to list storybook stories --- website/src/components/ChartCode.js | 4 +- website/src/components/Stories.js | 44 +++++++++++++++++++ website/src/components/charts/bar/Bar.js | 17 +++---- website/src/components/charts/bar/stories.js | 44 +++++++++++++++++++ .../src/components/charts/bubble/Bubble.js | 6 +++ .../src/components/charts/bubble/stories.js | 16 +++++++ website/src/styles/components.css | 14 ------ website/src/styles/index.css | 1 + website/src/styles/stories.css | 15 +++++++ 9 files changed, 134 insertions(+), 27 deletions(-) create mode 100644 website/src/components/Stories.js create mode 100644 website/src/components/charts/bar/stories.js create mode 100644 website/src/components/charts/bubble/stories.js create mode 100644 website/src/styles/stories.css diff --git a/website/src/components/ChartCode.js b/website/src/components/ChartCode.js index 7db150237..b5c88c645 100644 --- 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 new file mode 100644 index 000000000..42d46b34f --- /dev/null +++ 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 ( + + {stories.map((story, i) => ( + + {story.label} + + + ))} + + ) + } +} diff --git a/website/src/components/charts/bar/Bar.js b/website/src/components/charts/bar/Bar.js index a2d9db875..de14c201e 100644 --- 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 {' '} - or try it using the API client. You can also see more - example usages in{' '} - - the storybook - - . + or try it using the API client.

See the dedicated guide on how to setup @@ -265,6 +258,8 @@ export default class Bar extends Component { ) + const stories = + return (

@@ -285,12 +280,14 @@ export default class Bar extends Component { settings={settings} onChange={this.handleSettingsUpdate} /> + {stories}
{header} {description} + {stories}
diff --git a/website/src/components/charts/bar/stories.js b/website/src/components/charts/bar/stories.js new file mode 100644 index 000000000..32e9a4c9a --- /dev/null +++ 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 index 509a6ceb6..bd01898f5 100644 --- 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 { ) + const stories = + return (
@@ -166,12 +170,14 @@ export default class Bubble extends Component { settings={settings} onChange={this.handleSettingsUpdate} /> + {stories}
{header} {description} + {stories}
diff --git a/website/src/components/charts/bubble/stories.js b/website/src/components/charts/bubble/stories.js new file mode 100644 index 000000000..9319435c2 --- /dev/null +++ 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 index d54157633..cb3de94cb 100644 --- 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 index f37279197..5e3af4070 100644 --- 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 new file mode 100644 index 000000000..fb9fa2ab4 --- /dev/null +++ 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; +}