From e6353eb6ea2ab3483476bb767be326764f353607 Mon Sep 17 00:00:00 2001 From: domyen Date: Tue, 14 May 2019 15:42:00 +0800 Subject: [PATCH 01/15] Add Storybook DS package and show in Storybook --- .storybook/config.js | 8 +- package.json | 1 + src/components/basics/Avatar.stories.js | 2 +- src/components/basics/Badge.stories.js | 2 +- src/components/basics/Button.stories.js | 2 +- src/components/basics/Cardinal.stories.js | 2 +- src/components/basics/Checkbox.stories.js | 2 +- src/components/basics/Icon.stories.js | 2 +- src/components/basics/Input.stories.js | 2 +- src/components/basics/Link.stories.js | 2 +- src/components/basics/ListItem.stories.js | 2 +- src/components/basics/ProgressDots.stories.js | 2 +- src/components/basics/Subheading.stories.js | 2 +- src/components/basics/Video.stories.js | 2 +- src/components/basics/color.stories.js | 2 +- src/components/basics/modal/Modal.stories.js | 2 +- .../basics/modal/WithModal.stories.js | 2 +- .../basics/tooltip/Tooltip.stories.js | 2 +- .../basics/tooltip/TooltipLinkList.stories.js | 2 +- .../basics/tooltip/TooltipMessage.stories.js | 2 +- .../basics/tooltip/TooltipNote.stories.js | 2 +- .../basics/tooltip/WithTooltip.stories.js | 2 +- src/components/basics/typography.stories.js | 2 +- src/components/layout/CTA.stories.js | 2 +- .../layout/ConfirmedMailingList.stories.js | 2 +- src/components/layout/Eyebrow.stories.js | 2 +- src/components/layout/Feature.stories.js | 2 +- .../layout/FeaturesLayout.stories.js | 2 +- src/components/layout/Footer.stories.js | 2 +- src/components/layout/Header.stories.js | 2 +- .../MailingListSubscribeForm.stories.js | 2 +- .../layout/NpmDownloadCount.stories.js | 2 +- src/components/layout/PageLayout.stories.js | 2 +- src/components/layout/PageTitle.stories.js | 2 +- .../layout/PlaceholderAspectRatio.stories.js | 2 +- src/components/layout/SocialProof.stories.js | 2 +- src/components/layout/Testimonial.stories.js | 2 +- src/components/layout/ValueProp.stories.js | 2 +- .../AddonScreen/AddonCustom.stories.js | 2 +- .../screens/AddonScreen/AddonItem.stories.js | 2 +- .../screens/AddonScreen/AddonList.stories.js | 2 +- .../AddonScreen/AddonScreen.stories.js | 2 +- .../CommunityScreen/CommunityHero.stories.js | 2 +- .../CommunityScreen/CommunityItem.stories.js | 2 +- .../CommunityScreen/CommunityList.stories.js | 2 +- .../CommunityScreen.stories.js | 2 +- .../CommunitySidebar.stories.js | 2 +- .../CommunitySocial.stories.js | 2 +- .../IndexScreen/BenefitItem.stories.js | 2 +- .../IndexScreen/BenefitList.stories.js | 2 +- src/components/screens/IndexScreen/Hero.js | 2 + .../screens/IndexScreen/Hero.stories.js | 2 +- .../IndexScreen/IndexScreen.stories.js | 2 +- .../NotFoundScreen/NotFoundScreen.stories.js | 2 +- .../SupportScreen/SupportScreen.stories.js | 2 +- .../TeamScreen/ContributorItem.stories.js | 2 +- .../screens/TeamScreen/TeamItem.stories.js | 2 +- .../screens/TeamScreen/TeamList.stories.js | 2 +- .../screens/TeamScreen/TeamScreen.stories.js | 2 +- .../UseCasesScreen/ComponentCanvas.stories.js | 2 +- .../UseCasesScreen/ComponentItem.stories.js | 2 +- .../UseCasesScreen/ComponentList.stories.js | 2 +- .../UseCasesScreen/LogoToggle.stories.js | 2 +- .../UseCasesScreen/UseCasesScreen.stories.js | 2 +- yarn.lock | 1963 +---------------- 65 files changed, 102 insertions(+), 1994 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index ed7d5e4e..f90607d9 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -35,10 +35,12 @@ if (window.navigator.userAgent.match('Chromatic')) { LazyLoad.disabled = true; } -// automatically import all files ending in *.stories.js -const req = require.context('../src', true, /.stories.js$/); - function loadStories() { + // automatically import all files ending in *.stories.js + let req = require.context('../src', true, /.stories.js$/); + req.keys().forEach(filename => req(filename)); + + req = require.context('../node_modules/@storybook/design-system', true, /.stories.js$/); req.keys().forEach(filename => req(filename)); } diff --git a/package.json b/package.json index 4f3a4ba5..4afcae14 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "email": "dom@hichroma.com" }, "dependencies": { + "@storybook/design-system": "^0.0.5", "babel-plugin-styled-components": "^1.9.4", "gatsby": "^2.3.22", "gatsby-image": "^2.0.15", diff --git a/src/components/basics/Avatar.stories.js b/src/components/basics/Avatar.stories.js index fa4fe350..aaf6df3f 100644 --- a/src/components/basics/Avatar.stories.js +++ b/src/components/basics/Avatar.stories.js @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import Avatar from './Avatar'; -storiesOf('basics/Avatar', module) +storiesOf('Frontpage|basics/Avatar', module) .add('large', () => (
diff --git a/src/components/basics/Badge.stories.js b/src/components/basics/Badge.stories.js index d7ad669d..cd8062a6 100644 --- a/src/components/basics/Badge.stories.js +++ b/src/components/basics/Badge.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import Badge from './Badge'; -storiesOf('basics/Badge', module) +storiesOf('Frontpage|basics/Badge', module) .add('all badges', () => (
Positive diff --git a/src/components/basics/Button.stories.js b/src/components/basics/Button.stories.js index 599ffd33..8da49a27 100644 --- a/src/components/basics/Button.stories.js +++ b/src/components/basics/Button.stories.js @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import Button from './Button'; import Icon from './Icon'; -storiesOf('basics/Button', module).add('all buttons', () => ( +storiesOf('Frontpage|basics/Button', module).add('all buttons', () => (
diff --git a/src/components/basics/Cardinal.stories.js b/src/components/basics/Cardinal.stories.js index 70fee21b..2225faf5 100644 --- a/src/components/basics/Cardinal.stories.js +++ b/src/components/basics/Cardinal.stories.js @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import Cardinal from './Cardinal'; -storiesOf('basics/Cardinal', module) +storiesOf('Frontpage|basics/Cardinal', module) .add('all cardinals', () => (
diff --git a/src/components/basics/Checkbox.stories.js b/src/components/basics/Checkbox.stories.js index a7792615..4f8d0eaa 100644 --- a/src/components/basics/Checkbox.stories.js +++ b/src/components/basics/Checkbox.stories.js @@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions'; import Checkbox from './Checkbox'; const onChange = action('change'); -storiesOf('basics/Checkbox', module) +storiesOf('Frontpage|basics/Checkbox', module) .add('all checkboxes', () => (
diff --git a/src/components/basics/Icon.stories.js b/src/components/basics/Icon.stories.js index 2ed3b1d8..5f2ae2f9 100644 --- a/src/components/basics/Icon.stories.js +++ b/src/components/basics/Icon.stories.js @@ -49,7 +49,7 @@ const List = styled.div` flex-flow: row wrap; `; -storiesOf('basics/Icon', module) +storiesOf('Frontpage|basics/Icon', module) .add('labels', () => ( {Object.keys(icons).map(key => ( diff --git a/src/components/basics/Input.stories.js b/src/components/basics/Input.stories.js index 71f626db..777d5531 100644 --- a/src/components/basics/Input.stories.js +++ b/src/components/basics/Input.stories.js @@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions'; import Input from './Input'; const onChange = action('change'); -storiesOf('basics/Input', module) +storiesOf('Frontpage|basics/Input', module) .add('all inputs', () => ( diff --git a/src/components/basics/Link.stories.js b/src/components/basics/Link.stories.js index 884219f7..2277f4a1 100644 --- a/src/components/basics/Link.stories.js +++ b/src/components/basics/Link.stories.js @@ -7,7 +7,7 @@ import Link from './Link'; import Icon from './Icon'; const onLinkClick = action('onLinkClick'); -storiesOf('basics/Link', module).add('all', () => ( +storiesOf('Frontpage|basics/Link', module).add('all', () => (
Default
diff --git a/src/components/basics/ListItem.stories.js b/src/components/basics/ListItem.stories.js index 06510d17..dce8f2c9 100644 --- a/src/components/basics/ListItem.stories.js +++ b/src/components/basics/ListItem.stories.js @@ -5,7 +5,7 @@ import ListItem from './ListItem'; import Icon from './Icon'; -storiesOf('basics/ListItem', module) +storiesOf('Frontpage|basics/ListItem', module) .add('all', () => (
diff --git a/src/components/basics/ProgressDots.stories.js b/src/components/basics/ProgressDots.stories.js index 66203e5b..ea5b3570 100644 --- a/src/components/basics/ProgressDots.stories.js +++ b/src/components/basics/ProgressDots.stories.js @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import ProgressDots from './ProgressDots'; -storiesOf('basics/ProgressDots', module) +storiesOf('Frontpage|basics/ProgressDots', module) .add('loading', () => ) .add('starting', () => ) .add('halfway', () => ) diff --git a/src/components/basics/Subheading.stories.js b/src/components/basics/Subheading.stories.js index c11da3d4..fd0e01e3 100644 --- a/src/components/basics/Subheading.stories.js +++ b/src/components/basics/Subheading.stories.js @@ -3,4 +3,4 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import Subheading from './Subheading'; -storiesOf('basics/Subheading', module).add('subheading', () => Subheading); +storiesOf('Frontpage|basics/Subheading', module).add('subheading', () => Subheading); diff --git a/src/components/basics/Video.stories.js b/src/components/basics/Video.stories.js index a8021da8..83b5bf1f 100644 --- a/src/components/basics/Video.stories.js +++ b/src/components/basics/Video.stories.js @@ -10,7 +10,7 @@ const VideoWrapper = styled('div')` margin: 0px auto; `; -storiesOf('basics/Video', module).add( +storiesOf('Frontpage|basics/Video', module).add( 'video', () => ( diff --git a/src/components/basics/color.stories.js b/src/components/basics/color.stories.js index 42d6eac7..99813205 100644 --- a/src/components/basics/color.stories.js +++ b/src/components/basics/color.stories.js @@ -66,7 +66,7 @@ const monochromeColors = [ color.lightest, ]; -storiesOf('basics/color', module).add('all', () => ( +storiesOf('Frontpage|basics/color', module).add('all', () => ( diff --git a/src/components/basics/modal/Modal.stories.js b/src/components/basics/modal/Modal.stories.js index 72a6b1b8..c2a5a090 100644 --- a/src/components/basics/modal/Modal.stories.js +++ b/src/components/basics/modal/Modal.stories.js @@ -11,7 +11,7 @@ export const actions = { onClose: action('onClose'), }; -storiesOf('basics/modal/Modal', module) +storiesOf('Frontpage|basics/modal/Modal', module) .addDecorator(storyFn => (
This is an example background {storyFn()} diff --git a/src/components/basics/modal/WithModal.stories.js b/src/components/basics/modal/WithModal.stories.js index f4d3a62c..da724ebb 100644 --- a/src/components/basics/modal/WithModal.stories.js +++ b/src/components/basics/modal/WithModal.stories.js @@ -27,7 +27,7 @@ const ModalContents = ({ onClose }) => (
); -storiesOf('basics/modal/WithModal', module) +storiesOf('Frontpage|basics/modal/WithModal', module) .addDecorator(storyFn => (
This is an example background {storyFn()} diff --git a/src/components/basics/tooltip/Tooltip.stories.js b/src/components/basics/tooltip/Tooltip.stories.js index 4ad8093b..d024573a 100644 --- a/src/components/basics/tooltip/Tooltip.stories.js +++ b/src/components/basics/tooltip/Tooltip.stories.js @@ -16,7 +16,7 @@ const Content = styled.div` background: #eee; `; -storiesOf('basics/tooltip/Tooltip', module) +storiesOf('Frontpage|basics/tooltip/Tooltip', module) .add('basic, default', () => ( Text diff --git a/src/components/basics/tooltip/TooltipLinkList.stories.js b/src/components/basics/tooltip/TooltipLinkList.stories.js index 123c4667..e5c92621 100644 --- a/src/components/basics/tooltip/TooltipLinkList.stories.js +++ b/src/components/basics/tooltip/TooltipLinkList.stories.js @@ -14,7 +14,7 @@ export const links = [ { title: 'callback', onClick: action('onClick') }, ]; -storiesOf('basics/tooltip/TooltipLinkList', module) +storiesOf('Frontpage|basics/tooltip/TooltipLinkList', module) .addDecorator(storyFn => (
diff --git a/src/components/basics/tooltip/TooltipMessage.stories.js b/src/components/basics/tooltip/TooltipMessage.stories.js index 0d2af744..427cb0ca 100644 --- a/src/components/basics/tooltip/TooltipMessage.stories.js +++ b/src/components/basics/tooltip/TooltipMessage.stories.js @@ -5,7 +5,7 @@ import WithTooltip from './WithTooltip'; import TooltipMessage from './TooltipMessage'; -storiesOf('basics/tooltip/TooltipMessage', module) +storiesOf('Frontpage|basics/tooltip/TooltipMessage', module) .addDecorator(storyFn => (
diff --git a/src/components/basics/tooltip/TooltipNote.stories.js b/src/components/basics/tooltip/TooltipNote.stories.js index 44fe7cc6..fc842cd0 100644 --- a/src/components/basics/tooltip/TooltipNote.stories.js +++ b/src/components/basics/tooltip/TooltipNote.stories.js @@ -5,7 +5,7 @@ import WithTooltip from './WithTooltip'; import TooltipNote from './TooltipNote'; -storiesOf('basics/tooltip/TooltipNote', module) +storiesOf('Frontpage|basics/tooltip/TooltipNote', module) .addDecorator(storyFn => (
diff --git a/src/components/basics/tooltip/WithTooltip.stories.js b/src/components/basics/tooltip/WithTooltip.stories.js index e714a1bc..86db47e3 100644 --- a/src/components/basics/tooltip/WithTooltip.stories.js +++ b/src/components/basics/tooltip/WithTooltip.stories.js @@ -46,7 +46,7 @@ Tooltip.defaultProps = { onHide: null, }; -storiesOf('basics/tooltip/WithTooltip', module) +storiesOf('Frontpage|basics/tooltip/WithTooltip', module) .addDecorator(storyFn => ( diff --git a/src/components/basics/typography.stories.js b/src/components/basics/typography.stories.js index f3c6665e..4a3f7bfc 100644 --- a/src/components/basics/typography.stories.js +++ b/src/components/basics/typography.stories.js @@ -72,7 +72,7 @@ const Page = styled.div` padding: 3rem; `; -storiesOf('basics/typography', module).add('all', () => ( +storiesOf('Frontpage|basics/typography', module).add('all', () => (
diff --git a/src/components/layout/CTA.stories.js b/src/components/layout/CTA.stories.js index 81ca4c1a..d222aa3c 100644 --- a/src/components/layout/CTA.stories.js +++ b/src/components/layout/CTA.stories.js @@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react'; import Button from '../basics/Button'; import CTA from './CTA'; -storiesOf('layout/CTA', module) +storiesOf('Frontpage|layout/CTA', module) .addDecorator(storyFn =>
{storyFn()}
) .add('default', () => ( ( )) diff --git a/src/components/layout/Eyebrow.stories.js b/src/components/layout/Eyebrow.stories.js index b755669c..46abb0a4 100644 --- a/src/components/layout/Eyebrow.stories.js +++ b/src/components/layout/Eyebrow.stories.js @@ -5,7 +5,7 @@ import { Link } from '../basics'; import Eyebrow from './Eyebrow'; -storiesOf('layout/Eyebrow', module).add('default', () => ( +storiesOf('Frontpage|layout/Eyebrow', module).add('default', () => (
Default eyebrow lorem ipsum dolor{' '} diff --git a/src/components/layout/Feature.stories.js b/src/components/layout/Feature.stories.js index 5d188ba5..f89afe48 100644 --- a/src/components/layout/Feature.stories.js +++ b/src/components/layout/Feature.stories.js @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import DirectionSVG from '../../images/colored-icons/direction.svg'; import Feature from './Feature'; -storiesOf('layout/Feature', module) +storiesOf('Frontpage|layout/Feature', module) .add('default', () => ( } diff --git a/src/components/layout/FeaturesLayout.stories.js b/src/components/layout/FeaturesLayout.stories.js index 45b6f68d..c6402e6a 100644 --- a/src/components/layout/FeaturesLayout.stories.js +++ b/src/components/layout/FeaturesLayout.stories.js @@ -6,7 +6,7 @@ import Feature from './Feature'; import FeaturesLayout from './FeaturesLayout'; import DirectionSVG from '../../images/colored-icons/direction.svg'; -storiesOf('layout/FeaturesLayout', module) +storiesOf('Frontpage|layout/FeaturesLayout', module) .add('2 column', () => (