diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 8e1c34cc91..410586ae87 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -24,7 +24,6 @@ "@storybook/addon-a11y": "^5.3.21", "@storybook/addon-actions": "^5.3.21", "@storybook/addon-docs": "^5.3.21", - "@storybook/addon-info": "^5.3.21", "@storybook/addon-knobs": "^5.3.21", "@storybook/addon-viewport": "^5.3.21", "@storybook/react": "^5.3.21", diff --git a/packages/autocomplete/src/Autocomplete.stories.js b/packages/autocomplete/src/Autocomplete.stories.js index 41eecd5c56..870e9d2398 100644 --- a/packages/autocomplete/src/Autocomplete.stories.js +++ b/packages/autocomplete/src/Autocomplete.stories.js @@ -1,6 +1,5 @@ /* eslint-disable react/no-children-prop */ import React from 'react' -import { storiesOf } from '@storybook/react' import Component from '@reach/component-component' import { Box, Text, ThemeProvider } from 'pcln-design-system' @@ -28,8 +27,50 @@ const kayakTheme = { }, } -storiesOf('pcln-autocomplete/Autocomplete', module) - .add('default', () => ( +export default { + title: 'pcln-autocomplete/Autocomplete', + component: Autocomplete, +} + +export const Default = () => ( + ( + + { + setState({ value: item }) + }} + match={match} + > + + + + {cats.map((cat) => ( + + + {cat} + + ))} + + + + This text should be covered up by the Autocomplete.Menu when open. + + + The current value is {state.value} + + + )} + /> +) + +Default.story = { + name: 'default', +} + +export const Themed = () => ( + ( @@ -60,38 +101,9 @@ storiesOf('pcln-autocomplete/Autocomplete', module) )} /> - )) - .add('themed', () => ( - - ( - - { - setState({ value: item }) - }} - match={match} - > - - - - {cats.map((cat) => ( - - - {cat} - - ))} - - - - This text should be covered up by the Autocomplete.Menu when open. - - - The current value is {state.value} - - - )} - /> - - )) + +) + +Themed.story = { + name: 'themed', +} diff --git a/packages/core/src/Absolute/Absolute.stories.js b/packages/core/src/Absolute/Absolute.stories.js index 892beacd72..5537bfc1a5 100644 --- a/packages/core/src/Absolute/Absolute.stories.js +++ b/packages/core/src/Absolute/Absolute.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import styled from 'styled-components' import { Absolute, Card, Flag, Image, Relative, Text } from '..' import { Close as CloseIcon } from 'pcln-icons' @@ -24,83 +23,101 @@ const ExtraLargeAbsolute = styled(Absolute)` height: 400px; ` -storiesOf('Absolute', module) - .add('Over an image', () => ( - - - Hello Flag +export default { + title: 'Absolute', + component: Absolute, +} + +export const OverAnImage = () => ( + + + Hello Flag + + + +) + +OverAnImage.story = { + name: 'Over an image', +} + +export const PositioningAnIcon = () => ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et nisl + dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec + quis nisi ac est elementum consequat a eu risus. Phasellus id facilisis + nulla. Aliquam vel semper enim, id lobortis dolor. Morbi sed leo at + turpis rutrum posuere. Nullam tincidunt ex vitae mi sagittis, vel + sollicitudin lectus viverra. Curabitur sit amet fringilla velit. + + + - - )) - .add('Positioning an icon', () => ( - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et - nisl dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Donec quis nisi ac est elementum consequat a eu risus. Phasellus id - facilisis nulla. Aliquam vel semper enim, id lobortis dolor. Morbi sed - leo at turpis rutrum posuere. Nullam tincidunt ex vitae mi sagittis, - vel sollicitudin lectus viverra. Curabitur sit amet fringilla velit. - - - - - - - )) - .add('Multiple absolutely positioned boxes', () => ( - - - - - z-index 1 - - - - - z-index 2 - - - - - z-index 3 - - - - - z-index 4 - - - - - )) + +) + +PositioningAnIcon.story = { + name: 'Positioning an icon', +} + +export const MultipleAbsolutelyPositionedBoxes = () => ( + + + + + z-index 1 + + + + + z-index 2 + + + + + z-index 3 + + + + + z-index 4 + + + + +) + +MultipleAbsolutelyPositionedBoxes.story = { + name: 'Multiple absolutely positioned boxes', +} diff --git a/packages/core/src/Avatar/Avatar.stories.js b/packages/core/src/Avatar/Avatar.stories.js index f1d84d4061..2aebb3c18f 100644 --- a/packages/core/src/Avatar/Avatar.stories.js +++ b/packages/core/src/Avatar/Avatar.stories.js @@ -1,16 +1,20 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Avatar } from '..' const elonJPG = 'https://pbs.twimg.com/media/DwSta0wUcAAQQR9.jpg' -storiesOf('Avatar', module) - .add('Default', () => ) - .add('Initials', () => ) - .add('Elon', () => ( - - )) +export default { + title: 'Avatar', + component: Avatar, +} + +export const Default = () => +export const Initials = () => + +export const Elon = () => ( + +) diff --git a/packages/core/src/BackgroundImage/BackgroundImage.stories.js b/packages/core/src/BackgroundImage/BackgroundImage.stories.js index 8f61bc12fe..2878d2b462 100644 --- a/packages/core/src/BackgroundImage/BackgroundImage.stories.js +++ b/packages/core/src/BackgroundImage/BackgroundImage.stories.js @@ -1,7 +1,5 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { optionsKnob, withKnobs } from '@storybook/addon-knobs' -import { withInfo } from '@storybook/addon-info' import { Catch, LiveEditor, Markdown } from '@compositor/kit' import { BackgroundImage, Box, Flex, Text } from '..' @@ -12,31 +10,35 @@ const parallaxImage = const variations = { static: 'static', parallax: 'parallax' } -storiesOf('BackgroundImage', module) - .addParameters({ component: BackgroundImage }) - .addDecorator((story) => ( - - - {`Use the <BackgroundImage /> component to render a background image. Use the *variation* prop to change the attachment mode of the background.`} - - {story()} - - )) - .addDecorator(withKnobs) - .addDecorator( - withInfo({ - inline: false, - }) - ) - .add('Variations', () => { - const variation = optionsKnob('Variation', variations, 'parallax', { - display: 'select', - }) +export default { + title: 'BackgroundImage', + + decorators: [ + (story) => ( + + + {`Use the <BackgroundImage /> component to render a background image. Use the *variation* prop to change the attachment mode of the background.`} + + {story()} + + ), + withKnobs, + ], + + parameters: { + component: BackgroundImage, + }, +} + +export const Variations = () => { + const variation = optionsKnob('Variation', variations, 'parallax', { + display: 'select', + }) - return ( - - + `} - scope={{ BackgroundImage }} - /> - - ) - }) - .add('Fixed Height', () => ( - - - - - Hello - - - - - )) - .add('Responsive', () => ( - - - - - Hello - - - - - )) + scope={{ BackgroundImage }} + /> + + ) +} + +export const FixedHeight = () => ( + + + + + Hello + + + + +) + +export const Responsive = () => ( + + + + + Hello + + + + +) diff --git a/packages/core/src/Badge/Badge.stories.js b/packages/core/src/Badge/Badge.stories.js index c968623258..47c32a5a48 100644 --- a/packages/core/src/Badge/Badge.stories.js +++ b/packages/core/src/Badge/Badge.stories.js @@ -1,6 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Cartesian } from '@compositor/kit' import { Badge } from '..' @@ -24,39 +22,95 @@ const colors = { background: 'background', } -storiesOf('Badge', module) - .add( - 'Badge component', - withInfo({ - inline: true, - text: 'Use the component to render a primitive badge.', - })(() => badge) - ) - .add('All', () => ( - - Badge - - )) - .add('default', () => default) - .add('blue', () => blue) - .add('lightBlue', () => lightBlue) - .add('green', () => green) - .add('lightGreen', () => lightGreen) - .add('red', () => red) - .add('lightRed', () => lightRed) - .add('orange', () => orange) - .add('text (custom)', () => ( - - text (custom) - - )) - .add('lightBlue and text (custom)', () => ( - - lightBlue and text (custom) - - )) +export default { + title: 'Badge', + component: Badge, + parameters: { + docs: { + description: { + component: 'Use the component to render a primitive badge.', + }, + }, + }, +} + +export const BadgeComponent = () => badge + +export const All = () => ( + + Badge + +) + +export const Default = () => default + +Default.story = { + name: 'default', +} + +export const Blue = () => blue + +Blue.story = { + name: 'blue', +} + +export const LightBlue = () => lightBlue + +LightBlue.story = { + name: 'lightBlue', +} + +export const Green = () => green + +Green.story = { + name: 'green', +} + +export const LightGreen = () => lightGreen + +LightGreen.story = { + name: 'lightGreen', +} + +export const Red = () => red + +Red.story = { + name: 'red', +} + +export const LightRed = () => lightRed + +LightRed.story = { + name: 'lightRed', +} + +export const Orange = () => orange + +Orange.story = { + name: 'orange', +} + +export const TextCustom = () => ( + + text (custom) + +) + +TextCustom.story = { + name: 'text (custom)', +} + +export const LightBlueAndTextCustom = () => ( + + lightBlue and text (custom) + +) + +LightBlueAndTextCustom.story = { + name: 'lightBlue and text (custom)', +} diff --git a/packages/core/src/Banner/Banner.stories.js b/packages/core/src/Banner/Banner.stories.js index 622bcca034..a53593cdb8 100644 --- a/packages/core/src/Banner/Banner.stories.js +++ b/packages/core/src/Banner/Banner.stories.js @@ -1,719 +1,773 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Box, Banner, Flex, Heading, Text } from '..' -storiesOf('Banner', module) - .add('All bgs', () => ( - - - - - - - - - - - - - - )) - .add('All bgs header only', () => ( - - - - - - - - - - - )) - .add('All bgs text only', () => ( - - - - - - - - - - - )) - .add('Sans Close Button', () => ( - - - - - - - - - - - )) - .add('Sans Icon', () => ( - - - - - - - - - - - )) - .add('Without Icon or Close Button', () => ( - - - - - - - - - - - )) - .add('Sans Close Button, Text only', () => ( - - - - - - - - - - - )) - .add('Sans Icon, Text only', () => ( - - - - - - - - - - - )) - .add('Custom header as node', () => ( - - LOUD HEADER} - textAlign='right' - mb={2} - p={2} - text='default' - onClose={action('closed')} - showIcon={false} - /> - quiet header} - textAlign='right' - mb={2} - p={2} - text='default' - onClose={action('closed')} - showIcon={false} - /> - - )) - .add('Without Icon or Close Button, Text only', () => ( - - - - - - - - - - - )) - .add('With custom icons and sizes', () => ( - - - - - - - - - - - )) - .add('With children', () => ( - - - - - Pink box! - - - Red box! - - - - - - I am a text component! - - - - )) +export default { + title: 'Banner', + component: Banner, +} + +export const AllBgs = () => ( + + + + + + + + + + + + + +) + +AllBgs.story = { + name: 'All bgs', +} + +export const AllBgsHeaderOnly = () => ( + + + + + + + + + + +) + +AllBgsHeaderOnly.story = { + name: 'All bgs header only', +} + +export const AllBgsTextOnly = () => ( + + + + + + + + + + +) + +AllBgsTextOnly.story = { + name: 'All bgs text only', +} + +export const SansCloseButton = () => ( + + + + + + + + + + +) + +export const SansIcon = () => ( + + + + + + + + + + +) + +export const WithoutIconOrCloseButton = () => ( + + + + + + + + + + +) + +WithoutIconOrCloseButton.story = { + name: 'Without Icon or Close Button', +} + +export const SansCloseButtonTextOnly = () => ( + + + + + + + + + + +) + +SansCloseButtonTextOnly.story = { + name: 'Sans Close Button, Text only', +} + +export const SansIconTextOnly = () => ( + + + + + + + + + + +) + +SansIconTextOnly.story = { + name: 'Sans Icon, Text only', +} + +export const CustomHeaderAsNode = () => ( + + LOUD HEADER} + textAlign='right' + mb={2} + p={2} + text='default' + onClose={action('closed')} + showIcon={false} + /> + quiet header} + textAlign='right' + mb={2} + p={2} + text='default' + onClose={action('closed')} + showIcon={false} + /> + +) + +CustomHeaderAsNode.story = { + name: 'Custom header as node', +} + +export const WithoutIconOrCloseButtonTextOnly = () => ( + + + + + + + + + + +) + +WithoutIconOrCloseButtonTextOnly.story = { + name: 'Without Icon or Close Button, Text only', +} + +export const WithCustomIconsAndSizes = () => ( + + + + + + + + + + +) + +WithCustomIconsAndSizes.story = { + name: 'With custom icons and sizes', +} + +export const WithChildren = () => ( + + + + + Pink box! + + + Red box! + + + + + + I am a text component! + + + +) + +WithChildren.story = { + name: 'With children', +} diff --git a/packages/core/src/BlockLink/BlockLink.stories.js b/packages/core/src/BlockLink/BlockLink.stories.js index 1fa2091769..6c422c30df 100644 --- a/packages/core/src/BlockLink/BlockLink.stories.js +++ b/packages/core/src/BlockLink/BlockLink.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { BackgroundImage, BlockLink, Box, Button, Flex, Text } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' @@ -7,45 +6,63 @@ import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' const image = 'https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=aee8a50c86478d935556d865624506e4' -storiesOf('BlockLink', module) - .add('containing BackgroundImage', () => ( - - - - - - Click to open priceline.com in new tab! - - - - - - )) - .add('Forward refs', () => ( - ( - <> - - I am a link! - -
- - - )} - /> - )) - .add('composition without container', () => ( - - - - Click to go to google.com! - - - - )) +export default { + title: 'BlockLink', + component: BlockLink, +} + +export const ContainingBackgroundImage = () => ( + + + + + + Click to open priceline.com in new tab! + + + + + +) + +ContainingBackgroundImage.story = { + name: 'containing BackgroundImage', +} + +export const ForwardRefs = () => ( + ( + <> + + I am a link! + +
+ + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} + +export const CompositionWithoutContainer = () => ( + + + + Click to go to google.com! + + + +) + +CompositionWithoutContainer.story = { + name: 'composition without container', +} diff --git a/packages/core/src/Box/Box.stories.js b/packages/core/src/Box/Box.stories.js index c5acbbb264..e53c3447c2 100644 --- a/packages/core/src/Box/Box.stories.js +++ b/packages/core/src/Box/Box.stories.js @@ -1,6 +1,5 @@ /* eslint-disable react/no-unescaped-entities */ import React from 'react' -import { storiesOf } from '@storybook/react' import { withInfo } from '@storybook/addon-info' import { Box, Text } from '..' @@ -8,152 +7,192 @@ import { Box, Text } from '..' const description = 'A low-level layout component for setting color, display, height, margin, maxHeight, maxWidth, minHeight, minWidth, padding, size, textAlign, and width.' -storiesOf('Box', module) - .add( - 'Layout component', - withInfo({ - text: description, - inline: true, - })(() => Hello) - ) - .add('Display and size', () => ( - +export default { + title: 'Box', +} + +export const LayoutComponent = withInfo({ + text: description, + inline: true, +})(() => Hello) + +LayoutComponent.story = { + name: 'Layout component', + component: Box, +} + +export const DisplayAndSize = () => ( + + Hello + +) + +DisplayAndSize.story = { + name: 'Display and size', +} + +export const Padding = () => Hello + +export const Height = () => ( + +) + +export const MaxAndMinValues = () => ( + +) + +MaxAndMinValues.story = { + name: 'Max and min values', +} + +export const Margin = () => Hello + +export const Color = () => ( + + Hello + +) + +export const BoxShadow = () => ( +
+ {['sm', 'md', 'lg', 'xl'].map((boxShadow) => ( + + box-shadow: {boxShadow} + + ))} +
+) + +BoxShadow.story = { + name: 'Box shadow', +} + +export const BackgroundColor = () => ( + + Hello - )) - .add('Padding', () => Hello) - .add('Height', () => ( - - )) - .add('Max and min values', () => ( - - )) - .add('Margin', () => Hello) - .add('Color', () => ( - + Hello - )) - .add('Box shadow', () => ( -
- {['sm', 'md', 'lg', 'xl'].map((boxShadow) => ( - - box-shadow: {boxShadow} - - ))} -
- )) - .add('Background Color', () => ( - - - Hello - - - Hello - - - Hello - - - Hello - - - )) - .add('Size', () => ) - .add('Width', () => ( - - Half Width - - )) - .add('Pixel Width', () => ( - - 256px width - - )) - .add('VW Width', () => ( - - 50vw width - - )) - .add('Directional Padding', () => ( - - - Padding Top - - - Padding Right - - - Padding Bottom - - - Padding Left - - - Padding X-Axis - - - Padding Y-Axis - + + Hello + + + Hello - )) - .add('Directional Margin', () => ( + +) + +export const Size = () => + +export const Width = () => ( + + Half Width + +) + +export const PixelWidth = () => ( + + 256px width + +) + +export const VwWidth = () => ( + + 50vw width + +) + +VwWidth.story = { + name: 'VW Width', +} + +export const DirectionalPadding = () => ( + + + Padding Top + + + Padding Right + + + Padding Bottom + + + Padding Left + + + Padding X-Axis + + + Padding Y-Axis + + +) + +export const DirectionalMargin = () => ( + + + Margin Top + + + Margin Right + + + Margin Bottom + + + Margin Left + + + Margin X-Axis + + + Margin Y-Axis + + +) + +export const ThemeUserCaseColorText = () => ( + - - Margin Top + + color="text" w/o bg prop: retains the original "text" color from + original color set as backward compatible: expected style w. "text" + color and white background - - Margin Right - - - Margin Bottom - - - Margin Left - - - Margin X-Axis - - - Margin Y-Axis + + color="purple" as none "text" color w/o bg prop - )) - .add('Theme user case: color=text', () => ( - - - - color="text" w/o bg prop: retains the original "text" color from - original color set as backward compatible: expected style w. "text" - color and white background - - - color="purple" as none "text" color w/o bg prop - + + + Theme 1: color="text.lightest" value & bg="background.dark" - - - Theme 1: color="text.lightest" value & bg="background.dark" - - - Theme 2: color="text" & "bg"="background.lightest" - + + Theme 2: color="text" & "bg"="background.lightest" - - )) + + +) + +ThemeUserCaseColorText.story = { + name: 'Theme user case: color=text', +} diff --git a/packages/core/src/Breadcrumbs/Breadcrumbs.stories.js b/packages/core/src/Breadcrumbs/Breadcrumbs.stories.js index 3432591312..d673998d3c 100644 --- a/packages/core/src/Breadcrumbs/Breadcrumbs.stories.js +++ b/packages/core/src/Breadcrumbs/Breadcrumbs.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Flights as FlightsIcon, Home as HomeIcon, @@ -9,65 +8,75 @@ import { import { Breadcrumbs, Button } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' -storiesOf('Breadcrumbs', module) - .add('Basic', () => ( - - - - - - )) - .add('Icons', () => ( - - } - /> - } - /> - } - /> - - )) - .add('Forward refs to links', () => ( - ( - <> - - } - /> - } - /> - - - - )} +export default { + title: 'Breadcrumbs', + component: Breadcrumbs, +} + +export const Basic = () => ( + + + + + +) + +export const Icons = () => ( + + } /> - )) + } + /> + } + /> + +) + +export const ForwardRefsToLinks = () => ( + ( + <> + + } + /> + } + /> + + + + )} + /> +) + +ForwardRefsToLinks.story = { + name: 'Forward refs to links', +} diff --git a/packages/core/src/Button/Button.stories.js b/packages/core/src/Button/Button.stories.js index 37bd9e043a..4e11a668ea 100644 --- a/packages/core/src/Button/Button.stories.js +++ b/packages/core/src/Button/Button.stories.js @@ -1,8 +1,6 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { withKnobs, boolean, optionsKnob } from '@storybook/addon-knobs' -import { withInfo } from '@storybook/addon-info' import { Cartesian, Catch, LiveEditor, Markdown, XRay } from '@compositor/kit' import { Box, Button } from '..' @@ -32,41 +30,45 @@ const colors = { background: 'background', } -storiesOf('Button', module) - .addParameters({ component: Button }) - .addDecorator((story) => ( - - - {` -Use the <Button /> component to render a primitive button. Use the *variation* prop to change the appearance of the button. - `} - - {story()} - - )) - .addDecorator(withKnobs) - .addDecorator( - withInfo({ - inline: false, - }) - ) - .add('Button', () => { - const variation = optionsKnob('Variation', variations, 'fill', { - display: 'select', - }) - const size = optionsKnob('Size', sizes, 'medium', { - display: 'select', - }) - const color = optionsKnob('Palette Color', colors, 'primary', { - display: 'select', - }) - const disabled = boolean('Disabled?', false) - const fullWidth = boolean('Full Width?', false) - - return ( - - ( + + + {` + Use the <Button /> component to render a primitive button. Use the *variation* prop to change the appearance of the button. + `} + + {story()} + + ), + withKnobs, + ], + + parameters: { + component: Button, + }, +} + +export const _Button = () => { + const variation = optionsKnob('Variation', variations, 'fill', { + display: 'select', + }) + const size = optionsKnob('Size', sizes, 'medium', { + display: 'select', + }) + const color = optionsKnob('Palette Color', colors, 'primary', { + display: 'select', + }) + const disabled = boolean('Disabled?', false) + const fullWidth = boolean('Full Width?', false) + + return ( + + <Button /> component to render a primitive button. Us width={${fullWidth ? 1 : null}}> BUTTON `} - scope={{ - Button, - }} - /> - - ) + scope={{ + Button, + }} + /> + + ) +} + +export const TryIt = () => { + const variation = optionsKnob('Variation', variations, 'fill', { + display: 'multi-select', }) - .add('Try It!', () => { - const variation = optionsKnob('Variation', variations, 'fill', { - display: 'multi-select', - }) - const size = optionsKnob('Size', sizes, 'medium', { - display: 'multi-select', - }) - const color = optionsKnob('Palette Color', colors, 'primary', { - display: 'multi-select', - }) - const disabled = boolean('Disabled?', false) - const fullWidth = boolean('Full Width?', false) - - return ( - - Try This Button! - - ) + const size = optionsKnob('Size', sizes, 'medium', { + display: 'multi-select', }) - - .add('All', () => { - return ( - - I am a Button - - ) + const color = optionsKnob('Palette Color', colors, 'primary', { + display: 'multi-select', }) + const disabled = boolean('Disabled?', false) + const fullWidth = boolean('Full Width?', false) - .add('Geometry', () => ( - - - Button Geometry - - - )) - - .add('Forward refs', () => ( - ( - <> - -
- - - )} - /> - )) - .add('Styled Button should not lose its styling', () => { - return ( - - BUTTON - - ) - }) + return ( + + Try This Button! + + ) +} + +TryIt.story = { + name: 'Try It!', +} + +export const All = () => { + return ( + + I am a Button + + ) +} + +export const Geometry = () => ( + + + Button Geometry + + +) + +export const ForwardRefs = () => ( + ( + <> + +
+ + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} + +export const StyledButtonShouldNotLoseItsStyling = () => { + return ( + + BUTTON + + ) +} + +StyledButtonShouldNotLoseItsStyling.story = { + name: 'Styled Button should not lose its styling', +} diff --git a/packages/core/src/Card/Card.stories.js b/packages/core/src/Card/Card.stories.js index fdc0304082..013a63bb95 100644 --- a/packages/core/src/Card/Card.stories.js +++ b/packages/core/src/Card/Card.stories.js @@ -1,149 +1,166 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Box, Card } from '..' -storiesOf('Card', module) - .add('Box Shadows with default border', () => ( - - - Small Shadow - - - Medium Shadow - - - Large Shadow - - - XLarge Shadow - - - )) - .add('Box Shadows with focused 2px border', () => ( - - - Small Shadow - - - Medium Shadow - - - Large Shadow - - - XLarge Shadow - - - )) - .add('Box Shadows with varying border radii', () => ( - - - Small Shadow - 0px - - - Medium Shadow - 10px - - - Large Shadow - 20px - - - XLarge Shadow - 30px - - - )) +export default { + title: 'Card', + component: Card, +} + +export const BoxShadowsWithDefaultBorder = () => ( + + + Small Shadow + + + Medium Shadow + + + Large Shadow + + + XLarge Shadow + + +) + +BoxShadowsWithDefaultBorder.story = { + name: 'Box Shadows with default border', +} + +export const BoxShadowsWithFocused2PxBorder = () => ( + + + Small Shadow + + + Medium Shadow + + + Large Shadow + + + XLarge Shadow + + +) + +BoxShadowsWithFocused2PxBorder.story = { + name: 'Box Shadows with focused 2px border', +} + +export const BoxShadowsWithVaryingBorderRadii = () => ( + + + Small Shadow - 0px + + + Medium Shadow - 10px + + + Large Shadow - 20px + + + XLarge Shadow - 30px + + +) + +BoxShadowsWithVaryingBorderRadii.story = { + name: 'Box Shadows with varying border radii', +} diff --git a/packages/core/src/Checkbox/Checkbox.stories.js b/packages/core/src/Checkbox/Checkbox.stories.js index 2b93d50477..066c0fcaa8 100644 --- a/packages/core/src/Checkbox/Checkbox.stories.js +++ b/packages/core/src/Checkbox/Checkbox.stories.js @@ -1,7 +1,6 @@ /* eslint-disable react/prop-types */ import React from 'react' import styled from 'styled-components' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Checkbox, Text, Box, Heading, Button, Label } from '..' @@ -32,141 +31,159 @@ const checkAction = (e) => { action(`${e.target.id} was clicked`)(e.target.value, e.target.checked) } -storiesOf('Checkbox', module) - .add('Checkbox states', () => ( -
- - - - Unchecked by default - - +export default { + title: 'Checkbox', + component: Checkbox, +} - - - - Checked by default - - +export const CheckboxStates = () => ( +
+ + + + Unchecked by default + + - - - - Disabled - - - - - - - Disabled & Checked - - - - -
formAction(e)}> -
- Fancy Form - - - - -  In This Form - - - - -
-
- -
-
- -
- )) - .add('color', () => ( -
- - - - Secondary color unchecked by default - - - - Secondary color checked by default - - - - Secondary color disabled - - - - - - Error color unchecked by default - - - - Error color checked by default - - - - Error color disabled - - -
- )) - .add('Forward refs', () => ( - ( - <> - {/* + + + + Checked by default + + + + + + + Disabled + + + + + + + Disabled & Checked + + + + +
formAction(e)}> +
+ Fancy Form + + + + +  In This Form + + + + +
+
+ +
+
+ +
+) + +CheckboxStates.story = { + name: 'Checkbox states', +} + +export const Color = () => ( +
+ + + + Secondary color unchecked by default + + + + Secondary color checked by default + + + + Secondary color disabled + + + + + + Error color unchecked by default + + + + Error color checked by default + + + + Error color disabled + + +
+) + +Color.story = { + name: 'color', +} + +export const ForwardRefs = () => ( + ( + <> + {/* This example is for SC3 */} - - - Checkbox with ref - - - - )} - /> - )) + + + Checkbox with ref + + + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} diff --git a/packages/core/src/CloseButton/CloseButton.stories.js b/packages/core/src/CloseButton/CloseButton.stories.js index bd3156bf16..523d0fff7a 100644 --- a/packages/core/src/CloseButton/CloseButton.stories.js +++ b/packages/core/src/CloseButton/CloseButton.stories.js @@ -1,28 +1,40 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Button, CloseButton } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' -storiesOf('CloseButton', module) - .add('with click handler', () => ( - - )) - .add('Forward refs', () => ( - ( - <> - -
- - - )} - /> - )) +export default { + title: 'CloseButton', + component: CloseButton, +} + +export const WithClickHandler = () => ( + +) + +WithClickHandler.story = { + name: 'with click handler', +} + +export const ForwardRefs = () => ( + ( + <> + +
+ + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} diff --git a/packages/core/src/Container/Container.stories.js b/packages/core/src/Container/Container.stories.js index c898ec7041..443ea16214 100644 --- a/packages/core/src/Container/Container.stories.js +++ b/packages/core/src/Container/Container.stories.js @@ -1,19 +1,31 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Container, Box } from '..' -storiesOf('Container', module) - .add('Default align with theme max width', () => ( - - - Container Compnent - - - )) - .add('Input maxWidth', () => ( - - - Container Compnent - - - )) +export default { + title: 'Container', + component: Container, +} + +export const DefaultAlignWithThemeMaxWidth = () => ( + + + Container Compnent + + +) + +DefaultAlignWithThemeMaxWidth.story = { + name: 'Default align with theme max width', +} + +export const InputMaxWidth = () => ( + + + Container Compnent + + +) + +InputMaxWidth.story = { + name: 'Input maxWidth', +} diff --git a/packages/core/src/Divider/Divider.stories.js b/packages/core/src/Divider/Divider.stories.js index 0681d11f83..f06e3dcdaf 100644 --- a/packages/core/src/Divider/Divider.stories.js +++ b/packages/core/src/Divider/Divider.stories.js @@ -1,44 +1,47 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Divider, Flex } from '..' import styled from 'styled-components' const description = - '
with settings for padding, margin, width, and borderColor' + 'Horizontal rule with settings for padding, margin, width, and borderColor' const ColumnFlex = styled(Flex)` flex-direction: column; ` -storiesOf('Divider', module) - .add( - 'Divider component', - withInfo({ - text: description, - inline: true, - })(() => ) - ) - .add('Margin', () => ) - .add('Width', () => ) - .add('Pixel Width', () => ) - .add('VW Width', () => ) - .add('Border Color', () => ) - .add('Directional Margin', () => ( -
- - - - - - -
- )) - .add('Inside Column Flex', () => ( - - - - - - - - )) +export default { + title: 'Divider', + component: Divider, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, +} + +export const Default = () => +export const Margin = () => +export const Width = () => +export const PixelWidth = () => +export const VWWidth = () => +export const BorderColor = () => +export const DirectionalMargin = () => ( +
+ + + + + + +
+) +export const InsideColumnFlex = () => ( + + + + + + + +) diff --git a/packages/core/src/Flag/Flag.stories.js b/packages/core/src/Flag/Flag.stories.js index 2c9c0c80e3..99bb90b846 100644 --- a/packages/core/src/Flag/Flag.stories.js +++ b/packages/core/src/Flag/Flag.stories.js @@ -1,91 +1,115 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Box, Card, Flag, Flex, Text } from '..' import { Loyalty as LoyaltyIcon } from 'pcln-icons' -storiesOf('Flag', module) - .add('Default', () => ( - - - Hello Flag - Hello - - - )) - .add('Colors', () => ( - - - - Hello Orange - - - Hello Blue - - - Hello Purple - - - - )) +export default { + title: 'Flag', + component: Flag, +} - .add('with custom hex bg color', () => ( - - - - Hello #085397 - - - Hello #f2633a - - - Hello #0a84c1 - - - Hello #3c910e - - - - )) - .add('Compensating for 1px border', () => ( - - - - Hello - - - - )) - .add('Wrapped text', () => ( - - - - Hello - This is a really long string of text that should wrap when it gets too - long. But then the flag part to the right will probably break. - - - - )) - .add('With Icon', () => ( - - - - - - Hello World - - - - - )) - .add('With custom padding', () => ( - - - - - Hello World - - - - - )) +export const Default = () => ( + + + Hello Flag + Hello + + +) + +export const Colors = () => ( + + + + Hello Orange + + + Hello Blue + + + Hello Purple + + + +) + +export const WithCustomHexBgColor = () => ( + + + + Hello #085397 + + + Hello #f2633a + + + Hello #0a84c1 + + + Hello #3c910e + + + +) + +WithCustomHexBgColor.story = { + name: 'with custom hex bg color', +} + +export const CompensatingFor1PxBorder = () => ( + + + + Hello + + + +) + +CompensatingFor1PxBorder.story = { + name: 'Compensating for 1px border', +} + +export const WrappedText = () => ( + + + + Hello + This is a really long string of text that should wrap when it gets too + long. But then the flag part to the right will probably break. + + + +) + +WrappedText.story = { + name: 'Wrapped text', +} + +export const WithIcon = () => ( + + + + + + Hello World + + + + +) + +export const WithCustomPadding = () => ( + + + + + Hello World + + + + +) + +WithCustomPadding.story = { + name: 'With custom padding', +} diff --git a/packages/core/src/Flex/Flex.stories.js b/packages/core/src/Flex/Flex.stories.js index 6f05d4b23f..3b9a1fb814 100644 --- a/packages/core/src/Flex/Flex.stories.js +++ b/packages/core/src/Flex/Flex.stories.js @@ -1,55 +1,70 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Flex, Box } from '..' -storiesOf('Flex', module) - .add('Basic', () => ( - - - Flex - - - Box - - - )) - .add('Wrap', () => ( - - - Flex - - - Wrap - - - )) - .add('Justify', () => ( - - - Flex - - - Justify - - - )) - .add('deprecated align shim', () => ( - - - Flex - - - Box - - - )) - .add('deprecated bg shim', () => ( - - - Flex - - - Box - - - )) +export default { + title: 'Flex', + component: Flex, +} + +export const Basic = () => ( + + + Flex + + + Box + + +) + +export const Wrap = () => ( + + + Flex + + + Wrap + + +) + +export const Justify = () => ( + + + Flex + + + Justify + + +) + +export const DeprecatedAlignShim = () => ( + + + Flex + + + Box + + +) + +DeprecatedAlignShim.story = { + name: 'deprecated align shim', +} + +export const DeprecatedBgShim = () => ( + + + Flex + + + Box + + +) + +DeprecatedBgShim.story = { + name: 'deprecated bg shim', +} diff --git a/packages/core/src/FormField/FormField.stories.js b/packages/core/src/FormField/FormField.stories.js index f29f24a796..97ae99fe8e 100644 --- a/packages/core/src/FormField/FormField.stories.js +++ b/packages/core/src/FormField/FormField.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Flex, Box, FormField, Label, Input, Select, Tooltip } from '..' import { Check as CheckIcon, @@ -9,116 +8,154 @@ import { Warning as WarningIcon, } from 'pcln-icons' -storiesOf('FormField', module) - .add('with Icon', () => ( - - - - - - )) - .add('dynamic label', () => ( - - - - - - - - - - - - - - - - - - - - )) - .add('dynamic label with value', () => ( - - - - - )) - .add('Icon to the right', () => ( - - - - - - )) - .add('with Select', () => ( - - - - - - )) - .add('with successful validation', () => ( - - - - - - )) - .add('with error Tooltip', () => ( - +export default { + title: 'FormField', + component: FormField, +} + +export const WithIcon = () => ( + + + + + +) + +WithIcon.story = { + name: 'with Icon', +} + +export const DynamicLabel = () => ( + + + + + + + + - + - - - Email address is required - - )) + + + + + + +) + +DynamicLabel.story = { + name: 'dynamic label', +} + +export const DynamicLabelWithValue = () => ( + + + + +) + +DynamicLabelWithValue.story = { + name: 'dynamic label with value', +} + +export const IconToTheRight = () => ( + + + + + +) + +IconToTheRight.story = { + name: 'Icon to the right', +} + +export const WithSelect = () => ( + + + + + +) + +WithSelect.story = { + name: 'with Select', +} + +export const WithSuccessfulValidation = () => ( + + + + + +) + +WithSuccessfulValidation.story = { + name: 'with successful validation', +} + +export const WithErrorTooltip = () => ( + + + + + + + + Email address is required + + +) + +WithErrorTooltip.story = { + name: 'with error Tooltip', +} diff --git a/packages/core/src/Heading/Heading.stories.js b/packages/core/src/Heading/Heading.stories.js index f03124586e..b7f3b25540 100644 --- a/packages/core/src/Heading/Heading.stories.js +++ b/packages/core/src/Heading/Heading.stories.js @@ -1,6 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Heading } from '..' const description = @@ -8,44 +6,60 @@ const description = ' using HTML h1-h6 element for setting section headings,' + ' supporting all props' -storiesOf('Heading', module) - .add( - 'Heading component', - withInfo({ - inline: true, - text: description, - })(() => Heading component) - ) - .add('Using dot-notation with h1-h6', () => ( -
- Heading h1 - Heading h2 - Heading h3 - Heading h4 - Heading h5 - Heading h6 -
- )) - .add('With Text Shadows', () => ( -
- Heading h1 - Heading h2 - Heading h3 - Heading h4 - Heading h5 - Heading h6 -
- )) - .add('Using props', () => ( -
- - Heading Left - - - Heading Center - - - Heading Right - -
- )) +export default { + title: 'Heading', + component: Heading, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, +} + +export const HeadingComponent = () => Heading component + +export const UsingDotNotationWithH1H6 = () => ( +
+ Heading h1 + Heading h2 + Heading h3 + Heading h4 + Heading h5 + Heading h6 +
+) + +UsingDotNotationWithH1H6.story = { + name: 'Using dot-notation with h1-h6', +} + +export const WithTextShadows = () => ( +
+ Heading h1 + Heading h2 + Heading h3 + Heading h4 + Heading h5 + Heading h6 +
+) + +export const UsingTextProps = () => ( +
+ + Heading Left + + + Heading Center + + + Heading Right + +
+) + +UsingTextProps.story = { + name: 'Using props', +} diff --git a/packages/core/src/Hide/Hide.stories.js b/packages/core/src/Hide/Hide.stories.js index 9d086b94fb..381f8802d3 100644 --- a/packages/core/src/Hide/Hide.stories.js +++ b/packages/core/src/Hide/Hide.stories.js @@ -1,8 +1,12 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Hide, Box, Flex } from '..' -storiesOf('Hide', module).add('Hide', () => ( +export default { + title: 'Hide', + component: Hide, +} + +export const _Hide = () => ( @@ -41,4 +45,4 @@ storiesOf('Hide', module).add('Hide', () => ( Hide.text (inline) -)) +) diff --git a/packages/core/src/Hug/Hug.stories.js b/packages/core/src/Hug/Hug.stories.js index 041edc3d52..45db771298 100644 --- a/packages/core/src/Hug/Hug.stories.js +++ b/packages/core/src/Hug/Hug.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { withKnobs, select } from '@storybook/addon-knobs' import { ThumbsUp } from 'pcln-icons' import { Hug, Hide, Card, Text } from '..' @@ -21,58 +20,91 @@ const responsiveText = ( ) -storiesOf('Hug', module) - .addDecorator(withKnobs) - .add('With a card inside', () => ( - - - I‘m a card within a hug! - - - )) - .add('With icon and a card inside', () => ( - }> - - I‘m a card within a hug! - - - )) - .add('With a card in a card', () => ( - - - - I‘m a card within a card within a hug! - - - - )) - .add('With plain text instead of component', () => ( - - - I‘m a card within a hug! - - - )) - .add('With an array of nodes', () => ( - - - I‘m a card within a hug! - - - )) - .add('With a responsive hug', () => ( - } - iconDisplay={select('Display', { - Block: 'block', - None: 'none', - })} - > +export default { + title: 'Hug', + component: Hug, + decorators: [withKnobs], +} + +export const WithACardInside = () => ( + + + I‘m a card within a hug! + + +) + +WithACardInside.story = { + name: 'With a card inside', +} + +export const WithIconAndACardInside = () => ( + }> + + I‘m a card within a hug! + + +) + +WithIconAndACardInside.story = { + name: 'With icon and a card inside', +} + +export const WithACardInACard = () => ( + + - I‘m a card within a hug! + I‘m a card within a card within a hug! - - )) + + +) + +WithACardInACard.story = { + name: 'With a card in a card', +} + +export const WithPlainTextInsteadOfComponent = () => ( + + + I‘m a card within a hug! + + +) + +WithPlainTextInsteadOfComponent.story = { + name: 'With plain text instead of component', +} + +export const WithAnArrayOfNodes = () => ( + + + I‘m a card within a hug! + + +) + +WithAnArrayOfNodes.story = { + name: 'With an array of nodes', +} + +export const WithAResponsiveHug = () => ( + } + iconDisplay={select('Display', { + Block: 'block', + None: 'none', + })} + > + + I‘m a card within a hug! + + +) + +WithAResponsiveHug.story = { + name: 'With a responsive hug', +} diff --git a/packages/core/src/IconButton/IconButton.stories.js b/packages/core/src/IconButton/IconButton.stories.js index ebe71d01ef..ad7a328c26 100644 --- a/packages/core/src/IconButton/IconButton.stories.js +++ b/packages/core/src/IconButton/IconButton.stories.js @@ -1,51 +1,78 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Calendar } from 'pcln-icons' import { Button, IconButton } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' -storiesOf('IconButton', module) - .add('default', () => ( - } - /> - )) - .add('with color', () => ( - } - /> - )) - .add('with size', () => ( - } - /> - )) - .add('with disabled', () => ( - } - disabled - /> - )) - .add('Forward refs', () => ( - ( - <> - } - dsRef={dsRef} - /> -
- - - )} - /> - )) +export default { + title: 'IconButton', + component: IconButton, +} + +export const Default = () => ( + } + /> +) + +Default.story = { + name: 'default', +} + +export const WithColor = () => ( + } + /> +) + +WithColor.story = { + name: 'with color', +} + +export const WithSize = () => ( + } + /> +) + +WithSize.story = { + name: 'with size', +} + +export const WithDisabled = () => ( + } + disabled + /> +) + +WithDisabled.story = { + name: 'with disabled', +} + +export const ForwardRefs = () => ( + ( + <> + } + dsRef={dsRef} + /> +
+ + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} diff --git a/packages/core/src/IconField/IconField.stories.js b/packages/core/src/IconField/IconField.stories.js index ef568dd75c..896ca143f2 100644 --- a/packages/core/src/IconField/IconField.stories.js +++ b/packages/core/src/IconField/IconField.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { IconField, Input, Select, IconButton } from '..' import { Calendar as CalendarIcon, @@ -8,57 +7,90 @@ import { } from 'pcln-icons' import { action } from '@storybook/addon-actions' -storiesOf('IconField', module) - .add('Icon and Input', () => ( - - - - - )) - .add('Input and Icon', () => ( - - - - - )) - .add('Input and Icon Button', () => ( - - - } - size={24} - color='gray' - title='Clear text' - onClick={action('Icon button clicked')} - /> - - )) - .add('Icon, Input, and Icon', () => ( - - - - - - )) - .add('Icon, Input and Icon Button', () => ( - - - - } - size={24} - color='gray' - title='Clear text' - onClick={action('Icon button clicked')} - /> - - )) - .add('Icon and Select', () => ( - - - - - )) +export default { + title: 'IconField', + component: IconField, +} + +export const IconAndInput = () => ( + + + + +) + +IconAndInput.story = { + name: 'Icon and Input', +} + +export const InputAndIcon = () => ( + + + + +) + +InputAndIcon.story = { + name: 'Input and Icon', +} + +export const InputAndIconButton = () => ( + + + } + size={24} + color='gray' + title='Clear text' + onClick={action('Icon button clicked')} + /> + +) + +InputAndIconButton.story = { + name: 'Input and Icon Button', +} + +export const IconInputAndIcon = () => ( + + + + + +) + +IconInputAndIcon.story = { + name: 'Icon, Input, and Icon', +} + +export const IconInputAndIconButton = () => ( + + + + } + size={24} + color='gray' + title='Clear text' + onClick={action('Icon button clicked')} + /> + +) + +IconInputAndIconButton.story = { + name: 'Icon, Input and Icon Button', +} + +export const IconAndSelect = () => ( + + + + +) + +IconAndSelect.story = { + name: 'Icon and Select', +} diff --git a/packages/core/src/Image/Image.stories.js b/packages/core/src/Image/Image.stories.js index f4a919bfd3..4a28c9e591 100644 --- a/packages/core/src/Image/Image.stories.js +++ b/packages/core/src/Image/Image.stories.js @@ -1,24 +1,27 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Image } from '..' const description = 'A low-level layout component that renders an image' -storiesOf('Image', module) - .add( - 'Image component', - withInfo({ - text: description, - inline: true, - })(() => ( - - )) - ) +export default { + title: 'Image', + component: Image, + parameters: { + docs: { + description: { + component: description, + }, + }, + }, +} - .add('Responsive width', () => ( - - )) +export const Default = () => ( + +) + +export const ResponsiveWidth = () => ( + +) diff --git a/packages/core/src/Input/Input.stories.js b/packages/core/src/Input/Input.stories.js index d1136301f2..fbaba4c4bf 100644 --- a/packages/core/src/Input/Input.stories.js +++ b/packages/core/src/Input/Input.stories.js @@ -1,37 +1,46 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Box, Input, Label } from '..' -storiesOf('Input', module) - .add( - 'Input component', - withInfo({ - inline: true, - text: - 'Simple styled input component that accepts a color and whether or not to show an error container.', - })(() => ) - ) - .add('Colors', () => ( - - - - - - - - - )) - .add('With external label', () => ( - - - - - )) +export default { + title: 'Input', + component: Input, + parameters: { + docs: { + description: { + component: + 'Simple styled input component that accepts a color and whether or not to show an error container.', + }, + }, + }, +} + +export const InputComponent = () => + +export const Colors = () => ( + + + + + + + + +) + +export const WithExternalLabel = () => ( + + + + +) + +WithExternalLabel.story = { + name: 'With external label', +} diff --git a/packages/core/src/InputGroup/InputGroup.stories.js b/packages/core/src/InputGroup/InputGroup.stories.js index c3995d9cf5..404a923f04 100644 --- a/packages/core/src/InputGroup/InputGroup.stories.js +++ b/packages/core/src/InputGroup/InputGroup.stories.js @@ -1,54 +1,65 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Box, Button, Input, Label } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' -storiesOf('Input', module) - .add( - 'Input component', - withInfo({ - inline: true, - text: - 'Simple styled input component that accepts a color and whether or not to show an error container.', - })(() => ) - ) - .add('Colors', () => ( - - - - - - - - - )) - .add('Forward refs', () => ( - ( - <> - - - - )} +export default { + title: 'Input', + component: Input, + parameters: { + docs: { + description: { + component: + 'Simple styled input component that accepts a color and whether or not to show an error container.', + }, + }, + }, +} + +export const InputComponent = () => + +export const Colors = () => ( + + + + - )) - .add('With external label', () => ( - - - - - )) + + + + +) + +export const ForwardRefs = () => ( + ( + <> + + + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} + +export const WithExternalLabel = () => ( + + + + +) + +WithExternalLabel.story = { + name: 'With external label', +} diff --git a/packages/core/src/Label/Label.stories.js b/packages/core/src/Label/Label.stories.js index 155626fe0a..c9fc51c0c0 100644 --- a/packages/core/src/Label/Label.stories.js +++ b/packages/core/src/Label/Label.stories.js @@ -1,77 +1,106 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Label, Input, Radio, Flex } from '..' -storiesOf('Label', module) - .add( - 'Label component', - withInfo({ - inline: true, - text: - 'Simple styled label component that supports a number of the styled-system props.', - })(() => ) - ) - .add('Using fontSize', () => ( -
- - - - - - - -
- )) - .add('Spacing', () => ( -
- - -
- )) - .add('color', () => ( -
- - -
- )) - .add('htmlFor', () => ( -
- Clicking{' '} - {' '} - should focus on the input element. -
- -
- )) - .add('nowrap', () => ( - - - - - - )) - .add('width', () => ( -
- - - -
- )) +export default { + title: 'Label', + component: Label, + parameters: { + docs: { + description: { + component: + 'Simple styled label component that supports a number of the styled-system props.', + }, + }, + }, +} + +export const LabelComponent = () => + +export const UsingFontSize = () => ( +
+ + + + + + + +
+) + +UsingFontSize.story = { + name: 'Using fontSize', +} + +export const Spacing = () => ( +
+ + +
+) + +export const Color = () => ( +
+ + +
+) + +Color.story = { + name: 'color', +} + +export const HtmlFor = () => ( +
+ Clicking{' '} + {' '} + should focus on the input element. +
+ +
+) + +HtmlFor.story = { + name: 'htmlFor', +} + +export const Nowrap = () => ( + + + + + +) + +Nowrap.story = { + name: 'nowrap', +} + +export const Width = () => ( +
+ + + +
+) + +Width.story = { + name: 'width', +} diff --git a/packages/core/src/Link/Link.stories.js b/packages/core/src/Link/Link.stories.js index 8b57b35f2d..77d315a1e9 100644 --- a/packages/core/src/Link/Link.stories.js +++ b/packages/core/src/Link/Link.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { Cartesian } from '@compositor/kit' @@ -25,53 +24,73 @@ const colors = { background: 'background', } -storiesOf('Link', module) - .add('Link component', () => ( - - Priceline Home - - )) - .add('Link open self', () => ( - - Open the Priceline Home in the same window - - )) - .add('Forward refs', () => ( - ( - <> - - I am a link! - -
- - - )} - /> - )) - .add('Color', () => ( -
- I am a different color! -
- I am a different color! -
- I am a different color! -
- )) - .add('All', () => ( - - Link Text - - )) +export default { + title: 'Link', + component: Link, +} + +export const LinkComponent = () => ( + + Priceline Home + +) + +LinkComponent.story = { + name: 'Link component', +} + +export const LinkOpenSelf = () => ( + + Open the Priceline Home in the same window + +) + +LinkOpenSelf.story = { + name: 'Link open self', +} + +export const ForwardRefs = () => ( + ( + <> + + I am a link! + +
+ + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} + +export const Color = () => ( +
+ I am a different color! +
+ I am a different color! +
+ I am a different color! +
+) + +export const All = () => ( + + Link Text + +) diff --git a/packages/core/src/Radio/Radio.stories.js b/packages/core/src/Radio/Radio.stories.js index 4f6fb98b50..0d27bb7a48 100644 --- a/packages/core/src/Radio/Radio.stories.js +++ b/packages/core/src/Radio/Radio.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import styled from 'styled-components' @@ -58,36 +57,54 @@ class MockForm extends React.Component { } } -storiesOf('Radio', module) - .add('3 states', () => ( -
- - - -
- )) - .add('Mock form', () => ) - .add('Forward refs', () => ( - ( - <> - - - - )} - /> - )) +export default { + title: 'Radio', + component: Radio, +} + +export const _3States = () => ( +
+ + + +
+) + +_3States.story = { + name: '3 states', +} + +export const _MockForm = () => + +_MockForm.story = { + name: 'Mock form', +} + +export const ForwardRefs = () => ( + ( + <> + + + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} diff --git a/packages/core/src/RatingBadge/RatingBadge.stories.js b/packages/core/src/RatingBadge/RatingBadge.stories.js index 41ea36e452..907ad901a4 100644 --- a/packages/core/src/RatingBadge/RatingBadge.stories.js +++ b/packages/core/src/RatingBadge/RatingBadge.stories.js @@ -1,7 +1,13 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { RatingBadge } from '..' -storiesOf('RatingBadge', module).add('default', () => ( - 9.0 -)) +export default { + title: 'RatingBadge', + component: RatingBadge, +} + +export const Default = () => 9.0 + +Default.story = { + name: 'default', +} diff --git a/packages/core/src/Relative/Relative.stories.js b/packages/core/src/Relative/Relative.stories.js index 8390eef674..e22b46e852 100644 --- a/packages/core/src/Relative/Relative.stories.js +++ b/packages/core/src/Relative/Relative.stories.js @@ -1,31 +1,43 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Absolute, Card, Flag, Image, Relative, Text } from '..' import { Close as CloseIcon } from 'pcln-icons' -storiesOf('Relative', module) - .add('Around an Image and an absolutely positioned Flag', () => ( - - - Hello Flag +export default { + title: 'Relative', + component: Relative, +} + +export const AroundAnImageAndAnAbsolutelyPositionedFlag = () => ( + + + Hello Flag + + + +) + +AroundAnImageAndAnAbsolutelyPositionedFlag.story = { + name: 'Around an Image and an absolutely positioned Flag', +} + +export const AroundTextAndAnAbsolutelyPositionedIcon = () => ( + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et nisl + dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec + quis nisi ac est elementum consequat a eu risus. Phasellus id facilisis + nulla. Aliquam vel semper enim, id lobortis dolor. Morbi sed leo at + turpis rutrum posuere. Nullam tincidunt ex vitae mi sagittis, vel + sollicitudin lectus viverra. Curabitur sit amet fringilla velit. + + + - - )) - .add('Around Text and an absolutely positioned Icon', () => ( - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et - nisl dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Donec quis nisi ac est elementum consequat a eu risus. Phasellus id - facilisis nulla. Aliquam vel semper enim, id lobortis dolor. Morbi sed - leo at turpis rutrum posuere. Nullam tincidunt ex vitae mi sagittis, - vel sollicitudin lectus viverra. Curabitur sit amet fringilla velit. - - - - - - - )) + +) + +AroundTextAndAnAbsolutelyPositionedIcon.story = { + name: 'Around Text and an absolutely positioned Icon', +} diff --git a/packages/core/src/Select/Select.stories.js b/packages/core/src/Select/Select.stories.js index 703acb6b61..0d283cec80 100644 --- a/packages/core/src/Select/Select.stories.js +++ b/packages/core/src/Select/Select.stories.js @@ -1,61 +1,83 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { Select, Label, Box, Button } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' -storiesOf('Select', module) - .add('default', () => ( - - - - - )) - .add('long option string', () => ( - - - - - )) - .add('hidden label', () => ( - - - - - )) - .add('Forward refs', () => ( - ( - <> - - - - )} - /> - )) +export default { + title: 'Select', + component: Select, +} + +export const Default = () => ( + + + + +) + +Default.story = { + name: 'default', +} + +export const LongOptionString = () => ( + + + + +) + +LongOptionString.story = { + name: 'long option string', +} + +export const HiddenLabel = () => ( + + + + +) + +HiddenLabel.story = { + name: 'hidden label', +} + +export const ForwardRefs = () => ( + ( + <> + + + + )} + /> +) + +ForwardRefs.story = { + name: 'Forward refs', +} diff --git a/packages/core/src/SrOnly/SrOnly.stories.js b/packages/core/src/SrOnly/SrOnly.stories.js index 1ee4b86255..9300d73364 100644 --- a/packages/core/src/SrOnly/SrOnly.stories.js +++ b/packages/core/src/SrOnly/SrOnly.stories.js @@ -1,11 +1,15 @@ import React from 'react' -import { storiesOf } from '@storybook/react' import { SrOnly, Text, BackgroundImage, Box } from '..' const image = 'https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=aee8a50c86478d935556d865624506e4' -storiesOf('SrOnly', module).add('Screenreader description of content', () => ( +export default { + title: 'SrOnly', + component: SrOnly, +} + +export const ScreenreaderDescriptionOfContent = () => ( @@ -16,4 +20,8 @@ storiesOf('SrOnly', module).add('Screenreader description of content', () => ( Turn ON screenreader... -)) +) + +ScreenreaderDescriptionOfContent.story = { + name: 'Screenreader description of content', +} diff --git a/packages/core/src/Stamp/Stamp.js b/packages/core/src/Stamp/Stamp.js index acf97a8483..7b332d4398 100644 --- a/packages/core/src/Stamp/Stamp.js +++ b/packages/core/src/Stamp/Stamp.js @@ -76,10 +76,7 @@ Stamp.displayName = 'Stamp' Stamp.propTypes = { ...space.propTypes, ...fontSize.propTypes, - size: PropTypes.oneOfType([ - Object.keys(sizes), - PropTypes.arrayOf(Object.keys(sizes)), - ]), + size: PropTypes.oneOfType([PropTypes.arrayOf(Object.keys(sizes))]), variation: PropTypes.oneOf(Object.keys(variations)), color: deprecatedColorValue(), bg: deprecatedPropType('color'), diff --git a/packages/core/src/Stamp/Stamp.stories.js b/packages/core/src/Stamp/Stamp.stories.js index 6e5bd7e50e..b49884f4d4 100644 --- a/packages/core/src/Stamp/Stamp.stories.js +++ b/packages/core/src/Stamp/Stamp.stories.js @@ -1,7 +1,5 @@ import React from 'react' import styled from 'styled-components' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Cartesian } from '@compositor/kit' import { Stamp, Text } from '..' @@ -34,92 +32,102 @@ const BlueStamp = styled(Stamp).attrs({ mr: 2, })`` -storiesOf('Stamp', module) - .add( - 'Default Stamp', - withInfo({ - inline: true, - text: - 'Use the component to subtly display attributes alongside listing cells and on product detail pages. Use it in conjunction with a named `pcln-icons` icon component to give it more context. An icon placed within a Stamp will inherit the assigned Stamp color.', - })(() => default stamp) - ) - .add('All', () => ( - component to subtly display attributes alongside listing cells and on product detail pages. Use it in conjunction with a named `pcln-icons` icon component to give it more context. An icon placed within a Stamp will inherit the assigned Stamp color.', + }, + }, + }, +} + +export const All = () => ( + + <> + top location + + +) + +export const CustomBackgroundAndBorderColor = () => ( +
+ - <> - top location - - - )) - .add('Custom Background and Border Color', () => ( -
- - custom border and background - - - custom border and background - -
- )) - .add('Custom Text Size', () => ( -
- - Yorkie - - - Jack Russell - - - Golden Retriever - - - Doberman - - - Malamute - -
- )) - .add('Pass an array of sizes', () => ( -
- - - Larger at xs - - - - Larger at sm - - - - Larger at md - - - - Larger at lg - - - - Larger at xl - - - - Larger at xxl - -
- )) + custom border and background + + + custom border and background + +
+) + +CustomBackgroundAndBorderColor.story = { + name: 'Custom Background and Border Color', +} + +export const CustomTextSize = () => ( +
+ + Yorkie + + + Jack Russell + + + Golden Retriever + + + Doberman + + + Malamute + +
+) + +export const PassAnArrayOfSizes = () => ( +
+ + + Larger at xs + + + + Larger at sm + + + + Larger at md + + + + Larger at lg + + + + Larger at xl + + + + Larger at xxl + +
+) + +PassAnArrayOfSizes.story = { + name: 'Pass an array of sizes', +} diff --git a/packages/core/src/Step/Step.stories.js b/packages/core/src/Step/Step.stories.js index 567fe5a327..baaa1f5cf7 100644 --- a/packages/core/src/Step/Step.stories.js +++ b/packages/core/src/Step/Step.stories.js @@ -1,25 +1,39 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { action } from '@storybook/addon-actions' import { Step } from '.' const onClick = action('Step Clicked') -storiesOf('Step', module) - .add( - 'Step component', - withInfo({ - inline: true, - text: 'Use the component to render a step.', - })(() => Step) - ) - .add('Current Step', () => Step) - .add('Completed Step', () => Step) - .add('Current and Completed Step', () => ( - - Step - - )) - .add('Clickable Step', () => Step) +export default { + title: 'Step', + component: Step, + parameters: { + docs: { + description: { + component: 'Use the component to render a step.', + }, + }, + }, +} + +export const StepComponent = () => Step + +StepComponent.story = { + name: 'Step component', +} + +export const CurrentStep = () => Step +export const CompletedStep = () => Step + +export const CurrentAndCompletedStep = () => ( + + Step + +) + +CurrentAndCompletedStep.story = { + name: 'Current and Completed Step', +} + +export const ClickableStep = () => Step diff --git a/packages/core/src/Stepper/Stepper.stories.js b/packages/core/src/Stepper/Stepper.stories.js index 245d7537b4..c239a6f3a2 100644 --- a/packages/core/src/Stepper/Stepper.stories.js +++ b/packages/core/src/Stepper/Stepper.stories.js @@ -1,6 +1,4 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { action } from '@storybook/addon-actions' import { Stepper } from '..' @@ -16,10 +14,16 @@ const children = ( ) -storiesOf('Stepper', module).add( - 'Stepper component', - withInfo({ - inline: true, - text: 'Use the component to render a stepper.', - })(() => {children}) -) +export default { + title: 'Stepper', + component: Stepper, + parameters: { + docs: { + description: { + component: 'Use the component to render a stepper.', + }, + }, + }, +} + +export const Default = () => {children} diff --git a/packages/core/src/Text/Text.stories.js b/packages/core/src/Text/Text.stories.js index 8793732b4c..b3d589b41b 100644 --- a/packages/core/src/Text/Text.stories.js +++ b/packages/core/src/Text/Text.stories.js @@ -1,73 +1,131 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Text } from '..' -storiesOf('Text', module) - .add( - 'Typography component', - withInfo({ - inline: true, - text: - 'A low-level component for setting font-size, typographic styles, margin, and color', - })(() => Hello) - ) - .add('fontSize', () => ( -
- Hello 6 - Hello 5 - Hello 4 - Hello 3 - Hello 2 - Hello 1 - Hello 0 -
- )) - .add('textAlign', () => ( -
- Hello Left - Hello Center - Hello Right -
- )) - .add('regular', () => Hello Regular) - .add('bold', () => Hello Bold) - .add('caps', () => Hello Caps) - .add('italic', () => Hello italic) - .add('strikethrough', () => Hello Strikethrough) - .add('margin', () => ( - - Hello Margin +export default { + title: 'Text', + component: Text, + parameters: { + docs: { + description: { + component: + 'A low-level component for setting font-size, typographic styles, margin, and color', + }, + }, + }, +} + +export const TypographyComponent = () => Hello + +export const FontSize = () => ( +
+ Hello 6 + Hello 5 + Hello 4 + Hello 3 + Hello 2 + Hello 1 + Hello 0 +
+) + +FontSize.story = { + name: 'fontSize', +} + +export const TextAlign = () => ( +
+ Hello Left + Hello Center + Hello Right +
+) + +TextAlign.story = { + name: 'textAlign', +} + +export const Regular = () => Hello Regular + +Regular.story = { + name: 'regular', +} + +export const Bold = () => Hello Bold + +Bold.story = { + name: 'bold', +} + +export const Caps = () => Hello Caps + +Caps.story = { + name: 'caps', +} + +export const Italic = () => Hello italic + +Italic.story = { + name: 'italic', +} + +export const Strikethrough = () => Hello Strikethrough + +Strikethrough.story = { + name: 'strikethrough', +} + +export const Margin = () => ( + + Hello Margin + +) + +Margin.story = { + name: 'margin', +} + +export const Color = () => ( +
+ Hello Blue + Hello Green +
+) + +Color.story = { + name: 'color', +} + +export const MinMaxHeight = () => ( +
+ + Hello Blue - )) - .add('color', () => ( -
- Hello Blue - Hello Green -
- )) - .add('min/maxHeight', () => ( -
- - Hello Blue - - - Hello Green - -
- )) - .add('Hide on > lg breakpoints', () => ( -
- - Hidden text on larger screens - - - I am always show. But the text above, hides on larger screens. - -
- )) + + Hello Green + +
+) + +MinMaxHeight.story = { + name: 'min/maxHeight', +} + +export const HideOnLgBreakpoints = () => ( +
+ + Hidden text on larger screens + + + I am always show. But the text above, hides on larger screens. + +
+) + +HideOnLgBreakpoints.story = { + name: 'Hide on > lg breakpoints', +} diff --git a/packages/core/src/TextArea/TextArea.stories.js b/packages/core/src/TextArea/TextArea.stories.js index 0b641def1f..ca7b7789d4 100644 --- a/packages/core/src/TextArea/TextArea.stories.js +++ b/packages/core/src/TextArea/TextArea.stories.js @@ -1,73 +1,79 @@ import React from 'react' -import { storiesOf } from '@storybook/react' -import { withInfo } from '@storybook/addon-info' import { Box, TextArea, Label, Button } from '..' import ForwardRefDemo from '../../storybook/utils/ForwardRefsDemo' -storiesOf('TextArea', module) - .add( - 'TextArea component', - withInfo({ - inline: true, - text: 'Simple styled textarea component that accepts a color.', - })(() =>