diff --git a/.gitignore b/.gitignore index 5a246f97c..69507ddc5 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ npm-debug.log coverage .idea .vscode -dist \ No newline at end of file +dist +.bojagi/tmp diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 000000000..e72ec42b9 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,4 @@ +const stories = require('./stories'); +module.exports = { + stories, +}; diff --git a/.storybook/config.js b/.storybook/preview.js similarity index 55% rename from .storybook/config.js rename to .storybook/preview.js index ea014c90a..5a0e67fbb 100644 --- a/.storybook/config.js +++ b/.storybook/preview.js @@ -1,20 +1,8 @@ import React from 'react'; -import 'babel-polyfill'; import 'loki/configure-react'; -import { configure, addDecorator } from '@storybook/react'; import { withOptions } from '@storybook/addon-options'; import { UiStyle } from '@catho/quantum-storybook-ui'; import GlobalStyle from '../components/GlobalStyle'; -import stories from './stories'; - -addDecorator( - withOptions({ - name: 'Quantum', - showAddonPanel: false, - addonPanelInRight: false, - url: 'https://github.com/catho/quantum/', - }), -); const CSSDecorator = storyFn => <>{storyFn()}; const FontDecorator = storyFn => ( @@ -24,14 +12,14 @@ const FontDecorator = storyFn => ( ); -addDecorator(UiStyle); -addDecorator(CSSDecorator); -addDecorator(FontDecorator); - -const reqStories = require.context('../stories', true, /.story.jsx?$/); - -function loadStories() { - stories.forEach(filename => reqStories(filename)); -} - -configure(loadStories, module); +export const decorators = [ + withOptions({ + name: 'Quantum', + showAddonPanel: false, + addonPanelInRight: false, + url: 'https://github.com/catho/quantum/', + }), + UiStyle, + CSSDecorator, + FontDecorator, +]; diff --git a/.storybook/regression-test/config.js b/.storybook/regression-test/config.js deleted file mode 100644 index 4de9947b9..000000000 --- a/.storybook/regression-test/config.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import 'babel-polyfill'; -import 'loki/configure-react'; -import { configure, addDecorator } from '@storybook/react'; -import { UiStyle } from '@catho/quantum-storybook-ui'; -import GlobalStyle from '../../components/GlobalStyle'; -import stories from './stories'; - -const CSSDecorator = storyFn => <>{storyFn()}; -const FontDecorator = storyFn => ( - <> - - {storyFn()} - -); - -addDecorator(UiStyle); -addDecorator(CSSDecorator); -addDecorator(FontDecorator); - -const reqStories = require.context( - '../../stories', - true, - /.regression-test.story.jsx?$/, -); - -function loadStories() { - stories.forEach(filename => reqStories(filename)); -} - -configure(loadStories, module); diff --git a/.storybook/regression-test/main.js b/.storybook/regression-test/main.js new file mode 100644 index 000000000..e72ec42b9 --- /dev/null +++ b/.storybook/regression-test/main.js @@ -0,0 +1,4 @@ +const stories = require('./stories'); +module.exports = { + stories, +}; diff --git a/.storybook/regression-test/preview.js b/.storybook/regression-test/preview.js new file mode 100644 index 000000000..281b872e4 --- /dev/null +++ b/.storybook/regression-test/preview.js @@ -0,0 +1,15 @@ +import React from 'react'; +import 'loki/configure-react'; +import { addDecorator } from '@storybook/react'; +import { UiStyle } from '@catho/quantum-storybook-ui'; +import GlobalStyle from '../../components/GlobalStyle'; + +const CSSDecorator = storyFn => <>{storyFn()}; +const FontDecorator = storyFn => ( + <> + + {storyFn()} + +); + +export const decorators = [UiStyle, CSSDecorator, FontDecorator]; diff --git a/.storybook/regression-test/stories.js b/.storybook/regression-test/stories.js index 3d7694476..cfeaf659c 100644 --- a/.storybook/regression-test/stories.js +++ b/.storybook/regression-test/stories.js @@ -4,7 +4,7 @@ * order is reflected in storybook sidebar */ -export default [ +module.exports = [ 'Avatar', 'Icon', 'Accordion', @@ -34,4 +34,4 @@ export default [ 'Tooltip', 'Stepper', 'SegmentedControl', -].map(s => `./${s}/${s}.regression-test.story.jsx`); +].map(s => `../../stories/${s}/${s}.regression-test.story.jsx`); diff --git a/.storybook/stories.js b/.storybook/stories.js index ba919d111..b411d8175 100644 --- a/.storybook/stories.js +++ b/.storybook/stories.js @@ -4,7 +4,7 @@ * order is reflected in storybook sidebar */ -export default [ +module.exports = [ 'Introduction', // Foundations @@ -78,4 +78,4 @@ export default [ 'Stepper', 'SegmentedControl', -].map(s => `./${s}/${s}.story.jsx`); +].map(s => `../stories/${s}/${s}.story.jsx`); diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 51fe687a7..f967d043f 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -10,6 +10,15 @@ module.exports = { ], module: { rules: [ + { + test: /\.jsx$/, + use: [ + { + loader: 'babel-loader', + options: {}, + }, + ], + }, { test: /\.css$/, use: [ diff --git a/components/shared/uniqId.js b/components/shared/uniqId.js index 17d7a0a45..1f1611490 100644 --- a/components/shared/uniqId.js +++ b/components/shared/uniqId.js @@ -1,5 +1,3 @@ -import 'babel-polyfill'; - export default function*(prefix = '') { let _counter = -1; while (true) yield `${prefix}${(_counter += 1)}`; diff --git a/jest-config.js b/jest-config.js index 10bb359f0..faf5e5b01 100644 --- a/jest-config.js +++ b/jest-config.js @@ -1,5 +1,6 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import 'jest-styled-components'; +import 'babel-polyfill'; Enzyme.configure({ adapter: new Adapter() }); diff --git a/package.json b/package.json index ede44edae..295c1c481 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@babel/node": "^7.2.2", "@babel/preset-env": "^7.3.1", "@babel/preset-react": "^7.0.0", + "@bojagi/cli": "^0.18.0-next.0", "@catho/quantum-storybook-ui": "^1.3.1", "@semantic-release/commit-analyzer": "^8.0.1", "@semantic-release/exec": "^5.0.0", diff --git a/stories/Accordion/Accordion.regression-test.story.jsx b/stories/Accordion/Accordion.regression-test.story.jsx index a1baa2414..6d39361c5 100644 --- a/stories/Accordion/Accordion.regression-test.story.jsx +++ b/stories/Accordion/Accordion.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import mockedProps, { mockWithFirstItemOpened, mockWithLastItemOpened, @@ -8,14 +7,36 @@ import mockedProps, { import { Accordion } from '../../components'; -storiesOf('Accordion', module) - .add('Accordion default', () => ) - .add('Accordion with first item opened', () => ( - - )) - .add('Accordion with last item opened', () => ( - - )) - .add('Accordion with all items closed', () => ( - - )); +export default { + title: 'Accordion', +}; + +export const AccordionDefault = () => ; + +AccordionDefault.story = { + name: 'Accordion default', +}; + +export const AccordionWithFirstItemOpened = () => ( + +); + +AccordionWithFirstItemOpened.story = { + name: 'Accordion with first item opened', +}; + +export const AccordionWithLastItemOpened = () => ( + +); + +AccordionWithLastItemOpened.story = { + name: 'Accordion with last item opened', +}; + +export const AccordionWithAllItemsClosed = () => ( + +); + +AccordionWithAllItemsClosed.story = { + name: 'Accordion with all items closed', +}; diff --git a/stories/Accordion/Accordion.story.jsx b/stories/Accordion/Accordion.story.jsx index c02d854ce..a9d54f453 100644 --- a/stories/Accordion/Accordion.story.jsx +++ b/stories/Accordion/Accordion.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Heading, Tab, @@ -17,7 +16,11 @@ import accordionExamples from './examples'; const description = "An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed', with just a short label visible, or 'expanded' to show the complete content."; -storiesOf('Accordion', module).add('Accordion', () => ( +export default { + title: 'Accordion', +}; + +export const _Accordion = () => ( <> {description} @@ -72,4 +75,4 @@ storiesOf('Accordion', module).add('Accordion', () => ( -)); +); diff --git a/stories/Alert/Alert.regression-test.story.jsx b/stories/Alert/Alert.regression-test.story.jsx index 030b91a9d..3347bfafc 100644 --- a/stories/Alert/Alert.regression-test.story.jsx +++ b/stories/Alert/Alert.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Alert } from '../../components'; const sampleChildren = ( @@ -18,25 +17,52 @@ const props = { icon: 'info', }; -storiesOf('Alert', module) - .add('default', () => {sampleChildren}) - .add('skin primary', () => ( - - {sampleChildren} - - )) - .add('skin success', () => ( - - {sampleChildren} - - )) - .add('skin error', () => ( - - {sampleChildren} - - )) - .add('skin warning', () => ( - - {sampleChildren} - - )); +export default { + title: 'Alert', +}; + +export const Default = () => {sampleChildren}; + +Default.story = { + name: 'default', +}; + +export const SkinPrimary = () => ( + + {sampleChildren} + +); + +SkinPrimary.story = { + name: 'skin primary', +}; + +export const SkinSuccess = () => ( + + {sampleChildren} + +); + +SkinSuccess.story = { + name: 'skin success', +}; + +export const SkinError = () => ( + + {sampleChildren} + +); + +SkinError.story = { + name: 'skin error', +}; + +export const SkinWarning = () => ( + + {sampleChildren} + +); + +SkinWarning.story = { + name: 'skin warning', +}; diff --git a/stories/Alert/Alert.story.jsx b/stories/Alert/Alert.story.jsx index 99ec9a3d2..3f2d9bf3f 100644 --- a/stories/Alert/Alert.story.jsx +++ b/stories/Alert/Alert.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoExample } from '@catho/quantum-storybook-ui'; import { Alert } from '../../components'; @@ -17,7 +16,11 @@ const sampleChildren = ( ); -storiesOf('Alert', module).add('Alert', () => ( +export default { + title: 'Alert', +}; + +export const _Alert = () => ( ( icon: 'info', }} /> -)); +); diff --git a/stories/Avatar/Avatar.regression-test.story.jsx b/stories/Avatar/Avatar.regression-test.story.jsx index 548e91e3d..9f4b1969e 100644 --- a/stories/Avatar/Avatar.regression-test.story.jsx +++ b/stories/Avatar/Avatar.regression-test.story.jsx @@ -1,22 +1,48 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Avatar from '../../components/Avatar'; const encodedPicture = 'data:image/jpeg;base64,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'; -storiesOf('Avatar', module) - .add('default', () => ) - .add('with notification', () => ) - .add('with picture', () => ) - .add('with text and toggle', () => ) - .add('with all props', () => ( - - )); +export default { + title: 'Avatar', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const WithNotification = () => ; + +WithNotification.story = { + name: 'with notification', +}; + +export const WithPicture = () => ; + +WithPicture.story = { + name: 'with picture', +}; + +export const WithTextAndToggle = () => ; + +WithTextAndToggle.story = { + name: 'with text and toggle', +}; + +export const WithAllProps = () => ( + +); + +WithAllProps.story = { + name: 'with all props', +}; diff --git a/stories/Avatar/Avatar.story.jsx b/stories/Avatar/Avatar.story.jsx index 5bc4e2ef6..7871327a8 100644 --- a/stories/Avatar/Avatar.story.jsx +++ b/stories/Avatar/Avatar.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoExample, Tab, @@ -72,7 +71,11 @@ const TabExample = ( const description = `Avatars are used for showing a thumbnail of the user picture or an user icon if the picture is done defined, also it can display a dot to alert that there is some notification.`; -storiesOf('Avatar', module).add('Avatar', () => ( +export default { + title: 'Avatar', +}; + +export const _Avatar = () => ( ( }} additionalTabs={TabExample} /> -)); +); diff --git a/stories/Badge/Badge.regression-test.story.jsx b/stories/Badge/Badge.regression-test.story.jsx index ed86932d3..dc52cf1bc 100644 --- a/stories/Badge/Badge.regression-test.story.jsx +++ b/stories/Badge/Badge.regression-test.story.jsx @@ -1,19 +1,60 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Badge from '../../components/Badge'; import Icon from '../../components/Icon'; -storiesOf('Badge', module) - .add('default', () => ) - .add('high number', () => ) - .add('skin primary', () => ) - .add('skin secondary', () => ) - .add('skin success', () => ) - .add('skin error', () => ) - .add('inverted', () => ) - .add('dot', () => ( - - - - )); +export default { + title: 'Badge', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const HighNumber = () => ; + +HighNumber.story = { + name: 'high number', +}; + +export const SkinPrimary = () => ; + +SkinPrimary.story = { + name: 'skin primary', +}; + +export const SkinSecondary = () => ; + +SkinSecondary.story = { + name: 'skin secondary', +}; + +export const SkinSuccess = () => ; + +SkinSuccess.story = { + name: 'skin success', +}; + +export const SkinError = () => ; + +SkinError.story = { + name: 'skin error', +}; + +export const Inverted = () => ; + +Inverted.story = { + name: 'inverted', +}; + +export const Dot = () => ( + + + +); + +Dot.story = { + name: 'dot', +}; diff --git a/stories/Badge/Badge.story.jsx b/stories/Badge/Badge.story.jsx index bc68a58bc..f7bebd153 100644 --- a/stories/Badge/Badge.story.jsx +++ b/stories/Badge/Badge.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoExample, Tab, @@ -88,7 +87,11 @@ const TabExample = ( const description = `Badges are used for showing quantity of something, as warnings, inbox messages and others.`; -storiesOf('Badge', module).add('Badge', () => ( +export default { + title: 'Badge', +}; + +export const _Badge = () => ( ( }} additionalTabs={TabExample} /> -)); +); diff --git a/stories/Breakpoints/Breakpoints.story.jsx b/stories/Breakpoints/Breakpoints.story.jsx index 93340e897..b259b7d6c 100644 --- a/stories/Breakpoints/Breakpoints.story.jsx +++ b/stories/Breakpoints/Breakpoints.story.jsx @@ -6,7 +6,6 @@ import { Title, StoryContainer, } from '@catho/quantum-storybook-ui'; -import { storiesOf } from '@storybook/react'; import { BREAKPOINTS } from '../../components/shared'; import { query } from '../../components/Grid/sub-components/shared'; @@ -34,7 +33,11 @@ const StyledDivExample = styled.div` `} `; -storiesOf('Foundation', module).add('Breakpoints', () => ( +export default { + title: 'Foundation', +}; + +export const Breakpoints = () => ( <> Breakpoints - Quantum provides a breakpoints object that you can use with @@ -118,4 +121,4 @@ const StyledDiv = styled.div\` Test me in different sizes =) -)); +); diff --git a/stories/Button/Button.regression-test.story.jsx b/stories/Button/Button.regression-test.story.jsx index 4965aecce..d4ba13cdf 100644 --- a/stories/Button/Button.regression-test.story.jsx +++ b/stories/Button/Button.regression-test.story.jsx @@ -1,84 +1,190 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Button from '../../components/Button'; -import SocialButton from '../../components/SocialButton'; - -storiesOf('Buttons', module) - .add('primary default', () => ) - .add('primary disabled', () => ) - .add('primary stroked', () => ) - - .add('primary full', () => ) - .add('primary icon info', () => ) - .add('primary size xsmall', () => ) - .add('primary size small', () => ) - .add('primary size large', () => ) - .add('primary size xlarge', () => ) - - .add('secondary default', () => ) - .add('secondary disabled', () => ( - - )) - .add('secondary stroked', () => ( - - )) - - .add('neutral default', () => ) - .add('neutral disabled', () => ( - - )) - .add('neutral stroked', () => ( - - )) - - .add('success default', () => ) - .add('success disabled', () => ( - - )) - .add('success stroked', () => ( - - )) - - .add('warning default', () => ) - .add('warning disabled', () => ( - - )) - .add('warning stroked', () => ( - - )) - - .add('error default', () => ) - .add('error disabled', () => ( - - )) - .add('error stroked', () => ( - - )); - -storiesOf('SocialButtons', module) - .add('provider google', () => ( - - )) - .add('provider facebook', () => ( - - )); + +export default { + title: 'Buttons', +}; + +export const PrimaryDefault = () => ; + +PrimaryDefault.story = { + name: 'primary default', +}; + +export const PrimaryDisabled = () => ; + +PrimaryDisabled.story = { + name: 'primary disabled', +}; + +export const PrimaryStroked = () => ; + +PrimaryStroked.story = { + name: 'primary stroked', +}; + +export const PrimaryFull = () => ; + +PrimaryFull.story = { + name: 'primary full', +}; + +export const PrimaryIconInfo = () => ; + +PrimaryIconInfo.story = { + name: 'primary icon info', +}; + +export const PrimarySizeXsmall = () => ; + +PrimarySizeXsmall.story = { + name: 'primary size xsmall', +}; + +export const PrimarySizeSmall = () => ; + +PrimarySizeSmall.story = { + name: 'primary size small', +}; + +export const PrimarySizeLarge = () => ; + +PrimarySizeLarge.story = { + name: 'primary size large', +}; + +export const PrimarySizeXlarge = () => ; + +PrimarySizeXlarge.story = { + name: 'primary size xlarge', +}; + +export const SecondaryDefault = () => ; + +SecondaryDefault.story = { + name: 'secondary default', +}; + +export const SecondaryDisabled = () => ( + +); + +SecondaryDisabled.story = { + name: 'secondary disabled', +}; + +export const SecondaryStroked = () => ( + +); + +SecondaryStroked.story = { + name: 'secondary stroked', +}; + +export const NeutralDefault = () => ; + +NeutralDefault.story = { + name: 'neutral default', +}; + +export const NeutralDisabled = () => ( + +); + +NeutralDisabled.story = { + name: 'neutral disabled', +}; + +export const NeutralStroked = () => ( + +); + +NeutralStroked.story = { + name: 'neutral stroked', +}; + +export const SuccessDefault = () => ; + +SuccessDefault.story = { + name: 'success default', +}; + +export const SuccessDisabled = () => ( + +); + +SuccessDisabled.story = { + name: 'success disabled', +}; + +export const SuccessStroked = () => ( + +); + +SuccessStroked.story = { + name: 'success stroked', +}; + +export const WarningDefault = () => ; + +WarningDefault.story = { + name: 'warning default', +}; + +export const WarningDisabled = () => ( + +); + +WarningDisabled.story = { + name: 'warning disabled', +}; + +export const WarningStroked = () => ( + +); + +WarningStroked.story = { + name: 'warning stroked', +}; + +export const ErrorDefault = () => ; + +ErrorDefault.story = { + name: 'error default', +}; + +export const ErrorDisabled = () => ( + +); + +ErrorDisabled.story = { + name: 'error disabled', +}; + +export const ErrorStroked = () => ( + +); + +ErrorStroked.story = { + name: 'error stroked', +}; diff --git a/stories/Button/Button.story.jsx b/stories/Button/Button.story.jsx index ad93ac73b..a2d33861f 100644 --- a/stories/Button/Button.story.jsx +++ b/stories/Button/Button.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import LinkTo from '@storybook/addon-links/react'; import { Tab, @@ -134,28 +133,36 @@ const socialDescription = `These buttons are used to realize action related to t respective social media. It could be for example: realizing a login using the OAuth API from Google`; -storiesOf('Buttons', module) - .add('Button', () => ( - <> - - - )) - .add('SocialButton', () => ( - <> - - - )); +export default { + title: 'Buttons', +}; + +export const _Button = () => ( + <> + + +); + +export const _SocialButton = () => ( + <> + + +); + +_SocialButton.story = { + name: 'SocialButton', +}; diff --git a/stories/Button/SocialButtons.regression-test.story.jsx b/stories/Button/SocialButtons.regression-test.story.jsx new file mode 100644 index 000000000..5d74ef3ae --- /dev/null +++ b/stories/Button/SocialButtons.regression-test.story.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import SocialButton from '../../components/SocialButton'; + +export default { + title: 'SocialButtons', +}; + +export const ProviderGoogle = () => ( + +); + +ProviderGoogle.story = { + name: 'provider google', +}; + +export const ProviderFacebook = () => ( + +); + +ProviderFacebook.story = { + name: 'provider facebook', +}; diff --git a/stories/Card/Card.regression-test.story.jsx b/stories/Card/Card.regression-test.story.jsx index dc645ac49..0eb3d7c29 100644 --- a/stories/Card/Card.regression-test.story.jsx +++ b/stories/Card/Card.regression-test.story.jsx @@ -1,11 +1,27 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import SimpleCard from './examples/SimpleCard'; import JobAdCard from './examples/JobAdCard'; import AdvancedCard from './examples/AdvancedCard'; -storiesOf('Card', module) - .add('SimpleCard', () => ) - .add('JobAd Card', () => ) - .add('AdvancedCard', () => ); +export default { + title: 'Card', +}; + +export const _SimpleCard = () => ; + +_SimpleCard.story = { + name: 'SimpleCard', +}; + +export const _JobAdCard = () => ; + +_JobAdCard.story = { + name: 'JobAd Card', +}; + +export const _AdvancedCard = () => ; + +_AdvancedCard.story = { + name: 'AdvancedCard', +}; diff --git a/stories/Card/Card.story.jsx b/stories/Card/Card.story.jsx index 8cc965271..88186a547 100644 --- a/stories/Card/Card.story.jsx +++ b/stories/Card/Card.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { TabbedView, Tab, @@ -20,7 +19,11 @@ import Button from '../../components/Button'; import { Container, Col, Row } from '../../components/Grid'; import { Typography } from '../../components/GlobalStyle'; -storiesOf('Card', module).add('Card', () => ( +export default { + title: 'Card', +}; + +export const _Card = () => ( <> @@ -198,4 +201,4 @@ storiesOf('Card', module).add('Card', () => ( -)); +); diff --git a/stories/Carousel/Carousel.regression-test.story.jsx b/stories/Carousel/Carousel.regression-test.story.jsx index 7e0660e80..f4ecd4298 100644 --- a/stories/Carousel/Carousel.regression-test.story.jsx +++ b/stories/Carousel/Carousel.regression-test.story.jsx @@ -1,18 +1,49 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Carousel from '../../components/Carousel'; import { content, contentWithLongTexts } from './Content'; -storiesOf('Carousel', module) - .add('Small cards', () => ) - .add('Medium cards', () => ) - .add('Medium cards with ellipsis', () => ( - - )) - .add('Medium cards without dots', () => ( - - )) - .add('Large cards', () => ) - .add('Large cards with ellipsis', () => ( - - )); +export default { + title: 'Carousel', +}; + +export const SmallCards = () => ; + +SmallCards.story = { + name: 'Small cards', +}; + +export const MediumCards = () => ; + +MediumCards.story = { + name: 'Medium cards', +}; + +export const MediumCardsWithEllipsis = () => ( + +); + +MediumCardsWithEllipsis.story = { + name: 'Medium cards with ellipsis', +}; + +export const MediumCardsWithoutDots = () => ( + +); + +MediumCardsWithoutDots.story = { + name: 'Medium cards without dots', +}; + +export const LargeCards = () => ; + +LargeCards.story = { + name: 'Large cards', +}; + +export const LargeCardsWithEllipsis = () => ( + +); + +LargeCardsWithEllipsis.story = { + name: 'Large cards with ellipsis', +}; diff --git a/stories/Carousel/Carousel.story.jsx b/stories/Carousel/Carousel.story.jsx index 397b9dce3..79544537d 100644 --- a/stories/Carousel/Carousel.story.jsx +++ b/stories/Carousel/Carousel.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Tab, TabbedView, @@ -13,7 +12,11 @@ import Carousel from '../../components/Carousel'; import Alert from '../../components/Alert'; import { content, contentWithLongTexts } from './Content'; -storiesOf('Carousel', module).add('Carousel', () => ( +export default { + title: 'Carousel', +}; + +export const _Carousel = () => ( <> Carousel is a component that presents cards to go through a series of @@ -97,4 +100,4 @@ storiesOf('Carousel', module).add('Carousel', () => ( -)); +); diff --git a/stories/Checkbox/Checkbox.regression-test.story.jsx b/stories/Checkbox/Checkbox.regression-test.story.jsx index 1c0df96e5..da58cc14e 100644 --- a/stories/Checkbox/Checkbox.regression-test.story.jsx +++ b/stories/Checkbox/Checkbox.regression-test.story.jsx @@ -1,11 +1,42 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Checkbox } from '../../components'; -storiesOf('Checkbox', module) - .add('default', () => ) - .add('disabled', () => ) - .add('checked', () => ) - .add('error', () => ) - .add('label', () => ) - .add('value', () => ); +export default { + title: 'Checkbox', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const Disabled = () => ; + +Disabled.story = { + name: 'disabled', +}; + +export const Checked = () => ; + +Checked.story = { + name: 'checked', +}; + +export const Error = () => ; + +Error.story = { + name: 'error', +}; + +export const Label = () => ; + +Label.story = { + name: 'label', +}; + +export const Value = () => ; + +Value.story = { + name: 'value', +}; diff --git a/stories/Checkbox/Checkbox.story.jsx b/stories/Checkbox/Checkbox.story.jsx index 0e39ebb07..fd67e5493 100644 --- a/stories/Checkbox/Checkbox.story.jsx +++ b/stories/Checkbox/Checkbox.story.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { storiesOf } from '@storybook/react'; import { AutoPropsApi, CodeExample, @@ -33,7 +32,11 @@ CheckboxGroupExample.propTypes = { component: PropTypes.node.isRequired, }; -storiesOf('Forms', module).add('Checkbox', () => ( +export default { + title: 'Forms', +}; + +export const _Checkbox = () => ( <> Checkboxes are used when there is a list of options and the user may @@ -90,4 +93,4 @@ storiesOf('Forms', module).add('Checkbox', () => ( -)); +); diff --git a/stories/CircularLoader/CircularLoader.regression-test.story.jsx b/stories/CircularLoader/CircularLoader.regression-test.story.jsx index c2bceeec5..be74be158 100644 --- a/stories/CircularLoader/CircularLoader.regression-test.story.jsx +++ b/stories/CircularLoader/CircularLoader.regression-test.story.jsx @@ -1,12 +1,48 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { CircularLoader } from '../../components'; -storiesOf('CircularLoader', module) - .add('default', () => ) - .add('with secondary theme', () => ) - .add('with medium size', () => ) - .add('with large size', () => ) - .add('with xlarge size', () => ) - .add('with xxlarge size', () => ) - .add('with xxxlarge size', () => ); +export default { + title: 'CircularLoader', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const WithSecondaryTheme = () => ; + +WithSecondaryTheme.story = { + name: 'with secondary theme', +}; + +export const WithMediumSize = () => ; + +WithMediumSize.story = { + name: 'with medium size', +}; + +export const WithLargeSize = () => ; + +WithLargeSize.story = { + name: 'with large size', +}; + +export const WithXlargeSize = () => ; + +WithXlargeSize.story = { + name: 'with xlarge size', +}; + +export const WithXxlargeSize = () => ; + +WithXxlargeSize.story = { + name: 'with xxlarge size', +}; + +export const WithXxxlargeSize = () => ; + +WithXxxlargeSize.story = { + name: 'with xxxlarge size', +}; diff --git a/stories/Colors/Colors.story.jsx b/stories/Colors/Colors.story.jsx index aca691731..1b6f3feb5 100644 --- a/stories/Colors/Colors.story.jsx +++ b/stories/Colors/Colors.story.jsx @@ -1,9 +1,12 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Heading } from '@catho/quantum-storybook-ui'; import Colors from './Colors'; -storiesOf('Foundation', module).add('Color Palette', () => ( +export default { + title: 'Foundation', +}; + +export const ColorPalette = () => ( <> Catho's color palette consists of brand, support and neutral accents. @@ -12,4 +15,4 @@ storiesOf('Foundation', module).add('Color Palette', () => ( -)); +); diff --git a/stories/Dropdown/Dropdown.regression-test.story.jsx b/stories/Dropdown/Dropdown.regression-test.story.jsx index 6346e2092..cf84babe8 100644 --- a/stories/Dropdown/Dropdown.regression-test.story.jsx +++ b/stories/Dropdown/Dropdown.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Simple, @@ -10,10 +9,42 @@ import { WithImages, } from './examples'; -storiesOf('Dropdown', module) - .add('default', () => ) - .add('autocomplete', () => ) - .add('required', () => ) - .add('error', () => ) - .add('disabled', () => ) - .add('with images', () => ); +export default { + title: 'Dropdown', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const Autocomplete = () => ; + +Autocomplete.story = { + name: 'autocomplete', +}; + +export const Required = () => ; + +Required.story = { + name: 'required', +}; + +export const Error = () => ; + +Error.story = { + name: 'error', +}; + +export const _Disabled = () => ; + +_Disabled.story = { + name: 'disabled', +}; + +export const _WithImages = () => ; + +_WithImages.story = { + name: 'with images', +}; diff --git a/stories/Dropdown/Dropdown.story.jsx b/stories/Dropdown/Dropdown.story.jsx index 813d25805..0ba64f28d 100644 --- a/stories/Dropdown/Dropdown.story.jsx +++ b/stories/Dropdown/Dropdown.story.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { storiesOf } from '@storybook/react'; import { AutoPropsApi, Heading, @@ -44,7 +43,11 @@ DropdownExample.propTypes = { const importCode = "import { Dropdown } from '@catho/quantum';"; -storiesOf('Forms', module).add('Dropdown', () => ( +export default { + title: 'Forms', +}; + +export const _Dropdown = () => ( <> A dropdown receives user input, allowing it to choose one of several @@ -95,4 +98,4 @@ storiesOf('Forms', module).add('Dropdown', () => ( -)); +); diff --git a/stories/Form/Form.story.jsx b/stories/Form/Form.story.jsx index 5880b5e6a..1da94b0a0 100644 --- a/stories/Form/Form.story.jsx +++ b/stories/Form/Form.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Heading, CodeExample, @@ -20,7 +19,11 @@ import * as AdvancedValidation from './AdvancedValidation'; const importForm = `import { Form } from '@catho/quantum';`; -storiesOf('Forms', module).add('Form', () => ( +export default { + title: 'Forms', +}; + +export const _Form = () => ( <> A Form displays a set of related user input fields in a structured way, @@ -109,4 +112,4 @@ storiesOf('Forms', module).add('Form', () => ( -)); +); diff --git a/stories/Grid/Grid.regression-test.story.jsx b/stories/Grid/Grid.regression-test.story.jsx index 59caeb07d..ded8ad062 100644 --- a/stories/Grid/Grid.regression-test.story.jsx +++ b/stories/Grid/Grid.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import styled from 'styled-components'; import { Row, Col, Hide } from '../../components/Grid'; @@ -114,9 +113,36 @@ const OffsetExample = () => ( ); -storiesOf('Grid', module) - .add('HorizontalExample', () => ) - .add('MobileDesktopExample', () => ) - .add('HideExample', () => ) - .add('NoGuttersExample', () => ) - .add('OffsetExample', () => ); +export default { + title: 'Grid', +}; + +export const _HorizontalExample = () => ; + +_HorizontalExample.story = { + name: 'HorizontalExample', +}; + +export const _MobileDesktopExample = () => ; + +_MobileDesktopExample.story = { + name: 'MobileDesktopExample', +}; + +export const _HideExample = () => ; + +_HideExample.story = { + name: 'HideExample', +}; + +export const _NoGuttersExample = () => ; + +_NoGuttersExample.story = { + name: 'NoGuttersExample', +}; + +export const _OffsetExample = () => ; + +_OffsetExample.story = { + name: 'OffsetExample', +}; diff --git a/stories/Grid/Grid.story.jsx b/stories/Grid/Grid.story.jsx index 7c201e088..11983c618 100644 --- a/stories/Grid/Grid.story.jsx +++ b/stories/Grid/Grid.story.jsx @@ -1,9 +1,12 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Heading } from '@catho/quantum-storybook-ui'; import Grid from './Grid'; -storiesOf('Foundation', module).add('Grid System', () => ( +export default { + title: 'Foundation', +}; + +export const GridSystem = () => ( <> This Grid is based on{' '} @@ -16,4 +19,4 @@ storiesOf('Foundation', module).add('Grid System', () => ( -)); +); diff --git a/stories/Hamburger/Hamburger.regression-test.story.jsx b/stories/Hamburger/Hamburger.regression-test.story.jsx index 07f04f012..8fadf4f0a 100644 --- a/stories/Hamburger/Hamburger.regression-test.story.jsx +++ b/stories/Hamburger/Hamburger.regression-test.story.jsx @@ -1,6 +1,5 @@ import React from 'react'; import styled from 'styled-components'; -import { storiesOf } from '@storybook/react'; import Hamburger from '../../components/Hamburger'; @@ -9,24 +8,56 @@ const InvertedBackground = styled.span` display: inline-block; `; -storiesOf('Hamburger', module) - .add('default', () => ( - - - - )) - .add('showNotification', () => ( - - - - )) - .add('isOpened', () => ( - - - - )) - .add('inverted', () => ) - .add('inverted showNotification', () => ( - - )) - .add('inverted isOpened', () => ); +export default { + title: 'Hamburger', +}; + +export const Default = () => ( + + + +); + +Default.story = { + name: 'default', +}; + +export const ShowNotification = () => ( + + + +); + +ShowNotification.story = { + name: 'showNotification', +}; + +export const IsOpened = () => ( + + + +); + +IsOpened.story = { + name: 'isOpened', +}; + +export const Inverted = () => ; + +Inverted.story = { + name: 'inverted', +}; + +export const InvertedShowNotification = () => ( + +); + +InvertedShowNotification.story = { + name: 'inverted showNotification', +}; + +export const InvertedIsOpened = () => ; + +InvertedIsOpened.story = { + name: 'inverted isOpened', +}; diff --git a/stories/Hamburger/Hamburger.story.jsx b/stories/Hamburger/Hamburger.story.jsx index 121c72f9b..76b7017b3 100644 --- a/stories/Hamburger/Hamburger.story.jsx +++ b/stories/Hamburger/Hamburger.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoExample, Tab, @@ -77,10 +76,14 @@ const TabExample = ( const description = `Hamburger is used for opening mobile menu. You can also pass a aria-label description to inform screen readers that there are new notifications`; -storiesOf('Hamburger', module).add('Hamburger', () => ( +export default { + title: 'Hamburger', +}; + +export const _Hamburger = () => ( -)); +); diff --git a/stories/Icon/Icon.regression-test.story.jsx b/stories/Icon/Icon.regression-test.story.jsx index c947d055c..7e9780ef8 100644 --- a/stories/Icon/Icon.regression-test.story.jsx +++ b/stories/Icon/Icon.regression-test.story.jsx @@ -1,12 +1,33 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Icon from '../../components/Icon'; import { colors } from '../../components/shared/theme'; -storiesOf('Icon', module) - .add('default', () => ) - .add('with skin (color)', () => ( - - )) - .add('with large size', () => ) - .add('with small size', () => ); +export default { + title: 'Icon', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const WithSkinColor = () => ( + +); + +WithSkinColor.story = { + name: 'with skin (color)', +}; + +export const WithLargeSize = () => ; + +WithLargeSize.story = { + name: 'with large size', +}; + +export const WithSmallSize = () => ; + +WithSmallSize.story = { + name: 'with small size', +}; diff --git a/stories/Icon/Icon.story.jsx b/stories/Icon/Icon.story.jsx index dd4593631..60d38b523 100644 --- a/stories/Icon/Icon.story.jsx +++ b/stories/Icon/Icon.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import LinkTo from '@storybook/addon-links/react'; import styled from 'styled-components'; import { @@ -68,7 +67,11 @@ const exampleIncorrectCode = ` const importIcon = `import { Icon } from '@catho/quantum';`; -storiesOf('Foundation', module).add('Icons', () => ( +export default { + title: 'Foundation', +}; + +export const Icons = () => ( Quantum use Material icons, beautifully crafted symbols for common actions @@ -128,4 +131,4 @@ storiesOf('Foundation', module).add('Icons', () => ( -)); +); diff --git a/stories/Input/Input.regression-test.story.jsx b/stories/Input/Input.regression-test.story.jsx index ac0fc9c57..144ece66f 100644 --- a/stories/Input/Input.regression-test.story.jsx +++ b/stories/Input/Input.regression-test.story.jsx @@ -1,15 +1,61 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Input from '../../components/Input'; -storiesOf('Input', module) - .add('default', () => ) - .add('with label', () => ) - .add('with default value', () => ) - .add('search', () => ) - .add('error', () => ) - .add('disabled', () => ) - .add('disabled with text', () => ) - .add('helper', () => ) - .add('with placeholder', () => ); +export default { + title: 'Input', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const WithLabel = () => ; + +WithLabel.story = { + name: 'with label', +}; + +export const WithDefaultValue = () => ; + +WithDefaultValue.story = { + name: 'with default value', +}; + +export const Search = () => ; + +Search.story = { + name: 'search', +}; + +export const Error = () => ; + +Error.story = { + name: 'error', +}; + +export const Disabled = () => ; + +Disabled.story = { + name: 'disabled', +}; + +export const DisabledWithText = () => ; + +DisabledWithText.story = { + name: 'disabled with text', +}; + +export const Helper = () => ; + +Helper.story = { + name: 'helper', +}; + +export const WithPlaceholder = () => ; + +WithPlaceholder.story = { + name: 'with placeholder', +}; diff --git a/stories/Input/Input.story.jsx b/stories/Input/Input.story.jsx index c5f8539b5..c194b6a27 100644 --- a/stories/Input/Input.story.jsx +++ b/stories/Input/Input.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoExample, Tab, SimpleHighlight } from '@catho/quantum-storybook-ui'; import { Container, Row, Col } from '../../components/Grid'; import examples from './examples'; @@ -23,7 +22,11 @@ const tabExample = ( ); -storiesOf('Forms', module).add('Input', () => ( +export default { + title: 'Forms', +}; + +export const _Input = () => ( <> ( additionalTabs={tabExample} /> -)); +); diff --git a/stories/Introduction/Introduction.story.jsx b/stories/Introduction/Introduction.story.jsx index 25797bb0e..d9952af4f 100644 --- a/stories/Introduction/Introduction.story.jsx +++ b/stories/Introduction/Introduction.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Heading } from '@catho/quantum-storybook-ui'; import styled from 'styled-components'; import Introduction from './Introduction'; @@ -18,7 +17,11 @@ const StyledHeading = styled(Heading)` } `; -storiesOf('Introduction', module).add('Getting started', () => ( +export default { + title: 'Introduction', +}; + +export const GettingStarted = () => ( <> CSS in JS based reusable components, are the core of Quantum @@ -27,4 +30,8 @@ storiesOf('Introduction', module).add('Getting started', () => ( -)); +); + +GettingStarted.story = { + name: 'Getting started', +}; diff --git a/stories/Loaders/Loaders.story.jsx b/stories/Loaders/Loaders.story.jsx index 62496865b..409ebdc84 100644 --- a/stories/Loaders/Loaders.story.jsx +++ b/stories/Loaders/Loaders.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoExample, Tab, SimpleHighlight } from '@catho/quantum-storybook-ui'; import { ProgressBarExample, @@ -40,25 +39,38 @@ const renderExampleTab = componentExamples => ( ); -storiesOf('Loaders', module) - .add('ProgressBar', () => ( - - )) - .add('CircularLoader', () => ( - - )) - .add('Skeleton', () => ( - - )); +export default { + title: 'Loaders', +}; + +export const _ProgressBar = () => ( + +); + +_ProgressBar.story = { + name: 'ProgressBar', +}; + +export const _CircularLoader = () => ( + +); + +_CircularLoader.story = { + name: 'CircularLoader', +}; + +export const _Skeleton = () => ( + +); diff --git a/stories/Modal/Modal.regression-test.story.jsx b/stories/Modal/Modal.regression-test.story.jsx index bf3d7ae69..02647d8ea 100644 --- a/stories/Modal/Modal.regression-test.story.jsx +++ b/stories/Modal/Modal.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Modal, Button } from '../../components'; const modalHeader = (titleProps = {}) => ( @@ -20,37 +19,54 @@ const modalContent = ( const modalFooterSimple = this is a modal footer; -storiesOf('Modal', module) - .add('simple modal', () => ( - <> - {modalHeader()} - {modalContent} - {modalFooterSimple} - - )) - .add('simple modal with small text title', () => ( - <> - {modalHeader({ small: true })} - {modalContent} - {modalFooterSimple} - - )) - .add('modal with button actions', () => ( - <> - {modalHeader()} - {modalContent} - -
- - -
-
- - )); +export default { + title: 'Modal', +}; + +export const SimpleModal = () => ( + <> + {modalHeader()} + {modalContent} + {modalFooterSimple} + +); + +SimpleModal.story = { + name: 'simple modal', +}; + +export const SimpleModalWithSmallTextTitle = () => ( + <> + {modalHeader({ small: true })} + {modalContent} + {modalFooterSimple} + +); + +SimpleModalWithSmallTextTitle.story = { + name: 'simple modal with small text title', +}; + +export const ModalWithButtonActions = () => ( + <> + {modalHeader()} + {modalContent} + +
+ + +
+
+ +); + +ModalWithButtonActions.story = { + name: 'modal with button actions', +}; diff --git a/stories/Modal/Modal.story.jsx b/stories/Modal/Modal.story.jsx index c6ced6003..44ed2f9c5 100644 --- a/stories/Modal/Modal.story.jsx +++ b/stories/Modal/Modal.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { TabbedView, Tab, @@ -14,7 +13,11 @@ import { Modal, Row, Col } from '../../components'; import ModalExample from './examples/ModalExample'; import ModalSmallTitleExample from './examples/ModalSmallTitleExample'; -storiesOf('Modal', module).add('Modal', () => ( +export default { + title: 'Modal', +}; + +export const _Modal = () => ( <> Modals inform users about a task and can contain critical information, @@ -121,4 +124,4 @@ storiesOf('Modal', module).add('Modal', () => ( -)); +); diff --git a/stories/Pagination/Pagination.regression-test.story.jsx b/stories/Pagination/Pagination.regression-test.story.jsx index 21ccb736a..5ed6b6857 100644 --- a/stories/Pagination/Pagination.regression-test.story.jsx +++ b/stories/Pagination/Pagination.regression-test.story.jsx @@ -1,24 +1,45 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Pagination } from '../../components'; -storiesOf('Pagination', module) - .add('basic', () => ) - .add('several pages and active', () => ( - - )) - .add('custom next prev buttons', () => ( - - )) - .add('helperText', () => ( - `${activePage} of ${totalPage}`} - /> - )); +export default { + title: 'Pagination', +}; + +export const Basic = () => ; + +Basic.story = { + name: 'basic', +}; + +export const SeveralPagesAndActive = () => ( + +); + +SeveralPagesAndActive.story = { + name: 'several pages and active', +}; + +export const CustomNextPrevButtons = () => ( + +); + +CustomNextPrevButtons.story = { + name: 'custom next prev buttons', +}; + +export const HelperText = () => ( + `${activePage} of ${totalPage}`} + /> +); + +HelperText.story = { + name: 'helperText', +}; diff --git a/stories/Pagination/Pagination.story.jsx b/stories/Pagination/Pagination.story.jsx index 4bfc5623c..982503560 100644 --- a/stories/Pagination/Pagination.story.jsx +++ b/stories/Pagination/Pagination.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import styled from 'styled-components'; import { TabbedView, @@ -23,7 +22,11 @@ const MobileWrapper = styled.div` justify-content: center; `; -storiesOf('Pagination', module).add('Pagination', () => ( +export default { + title: 'Pagination', +}; + +export const _Pagination = () => ( <> Add pagination buttons to help split up your long content into shorter, @@ -322,4 +325,4 @@ storiesOf('Pagination', module).add('Pagination', () => ( -)); +); diff --git a/stories/Popover/Popover.regression-test.story.jsx b/stories/Popover/Popover.regression-test.story.jsx index a8a618d3b..492333826 100644 --- a/stories/Popover/Popover.regression-test.story.jsx +++ b/stories/Popover/Popover.regression-test.story.jsx @@ -1,15 +1,6 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Popover, Button, Row, Col } from '../../components'; -import { components } from '../../components/shared/theme'; - -const { - popover: { skins: popoverSkins }, -} = components; - -const directions = ['top', 'bottom', 'left', 'right']; -const skins = Object.keys(popoverSkins); const handleDirectionPosition = direction => { if (direction === 'right') return { paddingTop: '80px', paddingLeft: '20px' }; @@ -18,7 +9,7 @@ const handleDirectionPosition = direction => { return { paddingTop: '80px', paddingLeft: '160px' }; }; -const popoverExample = (direction, skin) => ( +const popoverExample = ({ direction, skin }) => (
@@ -35,10 +26,126 @@ const popoverExample = (direction, skin) => (
); -skins.forEach(skin => { - directions.forEach(direction => { - storiesOf('Popover', module).add(`${skin} ${direction}`, () => - popoverExample(direction, skin), - ); - }); -}); +export default { + title: 'Popover', +}; + +export const NeutralTop = popoverExample.bind(null); +NeutralTop.args = { + direction: 'top', + skin: 'neutral', +}; + +export const NeutralBottom = popoverExample.bind(null); +NeutralBottom.args = { + direction: 'bottom', + skin: 'neutral', +}; + +export const NeutralLeft = popoverExample.bind(null); +NeutralLeft.args = { + direction: 'left', + skin: 'neutral', +}; + +export const NeutralRight = popoverExample.bind(null); +NeutralRight.args = { + direction: 'right', + skin: 'neutral', +}; + +export const PrimaryTop = popoverExample.bind(null); +PrimaryTop.args = { + direction: 'top', + skin: 'primary', +}; + +export const PrimaryBottom = popoverExample.bind(null); +PrimaryBottom.args = { + direction: 'bottom', + skin: 'primary', +}; + +export const PrimaryLeft = popoverExample.bind(null); +PrimaryLeft.args = { + direction: 'left', + skin: 'primary', +}; + +export const PrimaryRight = popoverExample.bind(null); +PrimaryRight.args = { + direction: 'right', + skin: 'primary', +}; + +export const SuccessTop = popoverExample.bind(null); +SuccessTop.args = { + direction: 'top', + skin: 'success', +}; + +export const SuccessBottom = popoverExample.bind(null); +SuccessBottom.args = { + direction: 'bottom', + skin: 'success', +}; + +export const SuccessLeft = popoverExample.bind(null); +SuccessLeft.args = { + direction: 'left', + skin: 'success', +}; + +export const SuccessRight = popoverExample.bind(null); +SuccessRight.args = { + direction: 'right', + skin: 'success', +}; + +export const WarningTop = popoverExample.bind(null); +WarningTop.args = { + direction: 'top', + skin: 'warning', +}; + +export const WarningBottom = popoverExample.bind(null); +WarningBottom.args = { + direction: 'bottom', + skin: 'warning', +}; + +export const WarningLeft = popoverExample.bind(null); +WarningLeft.args = { + direction: 'left', + skin: 'warning', +}; + +export const WarningRight = popoverExample.bind(null); +WarningRight.args = { + direction: 'right', + skin: 'warning', +}; + +export const ErrorTop = popoverExample.bind(null); +ErrorTop.args = { + direction: 'top', + skin: 'error', +}; + +export const ErrorBottom = popoverExample.bind(null); +WarningBottom.args = { + direction: 'bottom', + skin: 'error', +}; + +export const ErrorLeft = popoverExample.bind(null); +ErrorLeft.args = { + direction: 'left', + skin: 'error', +}; + +export const ErrorRight = popoverExample.bind(null); +ErrorRight.args = { + direction: 'right', + skin: 'error', +}; diff --git a/stories/Popover/Popover.story.jsx b/stories/Popover/Popover.story.jsx index 19e16137c..b2ce0e2e7 100644 --- a/stories/Popover/Popover.story.jsx +++ b/stories/Popover/Popover.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { AutoPropsApi, Heading, @@ -14,7 +13,11 @@ import { Row, Col } from '../../components/Grid'; import Popover from '../../components/Popover'; import examples from './examples/examples'; -storiesOf('Popover', module).add('Popover', () => ( +export default { + title: 'Popover', +}; + +export const _Popover = () => ( <> Popovers are used for showing quantity of something, as warnings, inbox @@ -56,4 +59,4 @@ storiesOf('Popover', module).add('Popover', () => ( -)); +); diff --git a/stories/ProgressBar/ProgressBar.regression-test.story.jsx b/stories/ProgressBar/ProgressBar.regression-test.story.jsx index e90724deb..f1da1878e 100644 --- a/stories/ProgressBar/ProgressBar.regression-test.story.jsx +++ b/stories/ProgressBar/ProgressBar.regression-test.story.jsx @@ -1,48 +1,74 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { ProgressBar } from '../../components'; const progressPercent = 25; const progressText = 25; const label = '% percent to finish'; -storiesOf('ProgressBar', module) - .add('neutral default', () => ( - - )) - .add('neutral with label', () => ( - - )) - .add('primary with label', () => ( - - )) - .add('secondary with label', () => ( - - )) - .add('primary with differents values and percent', () => ( - - )); +export default { + title: 'ProgressBar', +}; + +export const NeutralDefault = () => ( + +); + +NeutralDefault.story = { + name: 'neutral default', +}; + +export const NeutralWithLabel = () => ( + +); + +NeutralWithLabel.story = { + name: 'neutral with label', +}; + +export const PrimaryWithLabel = () => ( + +); + +PrimaryWithLabel.story = { + name: 'primary with label', +}; + +export const SecondaryWithLabel = () => ( + +); + +SecondaryWithLabel.story = { + name: 'secondary with label', +}; + +export const PrimaryWithDifferentsValuesAndPercent = () => ( + +); + +PrimaryWithDifferentsValuesAndPercent.story = { + name: 'primary with differents values and percent', +}; diff --git a/stories/RadioGroup/RadioGroup.regression-test.story.jsx b/stories/RadioGroup/RadioGroup.regression-test.story.jsx index 6d37c6a99..577b95966 100644 --- a/stories/RadioGroup/RadioGroup.regression-test.story.jsx +++ b/stories/RadioGroup/RadioGroup.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import RadioGroup from '../../components/RadioGroup'; @@ -25,11 +24,28 @@ disabledOptions[1] = { disabled: true, }; -storiesOf('RadioGroup', module) - .add('default', () => ) - .add('error', () => ( - - )) - .add('disabled', () => ( - - )); +export default { + title: 'RadioGroup', +}; + +export const Default = () => ; + +Default.story = { + name: 'default', +}; + +export const Error = () => ( + +); + +Error.story = { + name: 'error', +}; + +export const Disabled = () => ( + +); + +Disabled.story = { + name: 'disabled', +}; diff --git a/stories/RadioGroup/RadioGroup.story.jsx b/stories/RadioGroup/RadioGroup.story.jsx index 5a021684a..facedf734 100644 --- a/stories/RadioGroup/RadioGroup.story.jsx +++ b/stories/RadioGroup/RadioGroup.story.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { storiesOf } from '@storybook/react'; import { Heading, AutoPropsApi, @@ -36,8 +35,8 @@ RadioGroupExample.propTypes = { const importRadioGroup = `import { RadioGroup } from '@catho/quantum';`; -const stories = storiesOf('Forms', module); -stories.add('Radio group', () => ( +// eslint-disable-next-line import/prefer-default-export +export const _RadioGroup = () => ( <> Radio group is a list of radio buttons that are used when a list of two or @@ -155,4 +154,6 @@ stories.add('Radio group', () => ( -)); +); + +_RadioGroup.storyName = 'Radio group'; diff --git a/stories/RangeSlider/RangeSlider.regression-test.story.jsx b/stories/RangeSlider/RangeSlider.regression-test.story.jsx index 34e40983a..d5050e9d8 100644 --- a/stories/RangeSlider/RangeSlider.regression-test.story.jsx +++ b/stories/RangeSlider/RangeSlider.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Row, Col } from '../../components'; import rangeSliderUtils from '../../components/RangeSlider/utils'; @@ -17,43 +16,45 @@ const sliderProps = { const { mountMarksByArray } = rangeSliderUtils; -const components = [ - { name: 'default', el: }, - { - name: 'with marks', - el: ( - - ), - }, - { name: 'TipFormatter', el: }, - { - name: 'TipFormatter with marks', - el: ( - `R$ ${v}`)} - /> - ), - }, - { name: 'Range', el: }, - { - name: 'MinMax', - el: , - }, - { - name: 'BasicDisabledSlider', - el: , - }, -]; - -const renderComponents = component => ( +const decorator = Story => ( - {component.el} + + + ); -components.forEach(component => { - storiesOf('RangeSlider', module).add(`${component.name}`, () => - renderComponents(component), - ); -}); +export default { + title: 'RangeSlider', + decorators: [decorator], +}; + +export const Default = () => ; + +export const WithMarks = () => ( + +); + +export const TipFormatterStory = () => ; +TipFormatterStory.storyName = 'TipFormatter'; + +export const TipFormatterWithMarks = () => ( + `R$ ${v}`)} + /> +); +TipFormatterWithMarks.storyName = 'TipFormatter with Marks'; + +export const RangeStory = () => ; +RangeStory.storyName = 'Range'; + +export const MinMaxStory = () => ( + +); +MinMaxStory.storyName = 'MinMax'; + +export const BasicDisabledSliderStory = () => ( + +); +BasicDisabledSliderStory.storyName = 'BasicDisabledSlider'; diff --git a/stories/RangeSlider/RangeSlider.story.jsx b/stories/RangeSlider/RangeSlider.story.jsx index 342dc3023..4bbda19b8 100644 --- a/stories/RangeSlider/RangeSlider.story.jsx +++ b/stories/RangeSlider/RangeSlider.story.jsx @@ -1,6 +1,5 @@ import React from 'react'; import styled from 'styled-components'; -import { storiesOf } from '@storybook/react'; import { Title, Heading, @@ -54,7 +53,11 @@ const ColSample = styled(Col)` padding-top: 15px; `; -storiesOf('Forms', module).add('RangeSlider', () => ( +export default { + title: 'Forms', +}; + +export const _RangeSlider = () => ( <> RangeSlider is a component to select a value from a predefined range. @@ -195,4 +198,8 @@ storiesOf('Forms', module).add('RangeSlider', () => ( -)); +); + +_RangeSlider.story = { + name: 'RangeSlider', +}; diff --git a/stories/SegmentedControl/SegmentedControl.regression-test.story.jsx b/stories/SegmentedControl/SegmentedControl.regression-test.story.jsx index cb7f03f37..6d7b8e1ef 100644 --- a/stories/SegmentedControl/SegmentedControl.regression-test.story.jsx +++ b/stories/SegmentedControl/SegmentedControl.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import SegmentedControl from '../../components/SegmentedControl'; import { defaultContent, @@ -11,50 +10,105 @@ import { threeContentsWithIcon, } from '../../components/SegmentedControl/exampleContents'; -storiesOf('Segmented control', module) - .add('Segmented control[text]: with 3 items ', () => ( - - )) - .add('Segmented control[text]: with 2 items ', () => ( - - )) - .add('Segmented control[icon]: with 5 items ', () => ( - - )) - .add('Segmented control[icon]: with 5 items and first one checked ', () => ( - - )) - .add('Segmented control[icon]: with 3 items ', () => ( - - )) - .add('Segmented control[text]: with 3 items and no item checked ', () => ( - - )) - .add('Segmented control[icon]: with 5 items and no item checked ', () => ( - - )) - .add('Segmented control[Dark theme]: with 3 items', () => ( - - )) - .add('Segmented control[Dark theme]: with 5 items ', () => ( - - )) - .add( - 'Segmented control[Dark theme]: with 5 items and first one checked ', - () => , - ) - .add( - 'Segmented control[Dark theme]: with 3 items and no item checked ', - () => ( - - ), - ) - .add( - 'Segmented control[Dark theme]: with 5 items and no item checked ', - () => ( - - ), - ); +export default { + title: 'Segmented control', +}; + +export const SegmentedControlTextWith3Items = () => ( + +); + +SegmentedControlTextWith3Items.story = { + name: 'Segmented control[text]: with 3 items ', +}; + +export const SegmentedControlTextWith2Items = () => ( + +); + +SegmentedControlTextWith2Items.story = { + name: 'Segmented control[text]: with 2 items ', +}; + +export const SegmentedControlIconWith5Items = () => ( + +); + +SegmentedControlIconWith5Items.story = { + name: 'Segmented control[icon]: with 5 items ', +}; + +export const SegmentedControlIconWith5ItemsAndFirstOneChecked = () => ( + +); + +SegmentedControlIconWith5ItemsAndFirstOneChecked.story = { + name: 'Segmented control[icon]: with 5 items and first one checked ', +}; + +export const SegmentedControlIconWith3Items = () => ( + +); + +SegmentedControlIconWith3Items.story = { + name: 'Segmented control[icon]: with 3 items ', +}; + +export const SegmentedControlTextWith3ItemsAndNoItemChecked = () => ( + +); + +SegmentedControlTextWith3ItemsAndNoItemChecked.story = { + name: 'Segmented control[text]: with 3 items and no item checked ', +}; + +export const SegmentedControlIconWith5ItemsAndNoItemChecked = () => ( + +); + +SegmentedControlIconWith5ItemsAndNoItemChecked.story = { + name: 'Segmented control[icon]: with 5 items and no item checked ', +}; + +export const SegmentedControlDarkThemeWith3Items = () => ( + +); + +SegmentedControlDarkThemeWith3Items.story = { + name: 'Segmented control[Dark theme]: with 3 items', +}; + +export const SegmentedControlDarkThemeWith5Items = () => ( + +); + +SegmentedControlDarkThemeWith5Items.story = { + name: 'Segmented control[Dark theme]: with 5 items ', +}; + +export const SegmentedControlDarkThemeWith5ItemsAndFirstOneChecked = () => ( + +); + +SegmentedControlDarkThemeWith5ItemsAndFirstOneChecked.story = { + name: 'Segmented control[Dark theme]: with 5 items and first one checked ', +}; + +export const SegmentedControlDarkThemeWith3ItemsAndNoItemChecked = () => ( + +); + +SegmentedControlDarkThemeWith3ItemsAndNoItemChecked.story = { + name: 'Segmented control[Dark theme]: with 3 items and no item checked ', +}; + +export const SegmentedControlDarkThemeWith5ItemsAndNoItemChecked = () => ( + +); + +SegmentedControlDarkThemeWith5ItemsAndNoItemChecked.story = { + name: 'Segmented control[Dark theme]: with 5 items and no item checked ', +}; diff --git a/stories/SegmentedControl/SegmentedControl.story.jsx b/stories/SegmentedControl/SegmentedControl.story.jsx index 2f23cca4a..cb93076b0 100644 --- a/stories/SegmentedControl/SegmentedControl.story.jsx +++ b/stories/SegmentedControl/SegmentedControl.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { TabbedView, Tab, @@ -18,7 +17,11 @@ import { } from '../../components/SegmentedControl/exampleContents'; import SegmentedControl from '../../components/SegmentedControl'; -storiesOf('SegmentedControl', module).add('SegmentedControl', () => ( +export default { + title: 'SegmentedControl', +}; + +export const _SegmentedControl = () => ( <> The Segmented control component is a linear set of two or more alternation @@ -85,4 +88,8 @@ storiesOf('SegmentedControl', module).add('SegmentedControl', () => ( -)); +); + +_SegmentedControl.story = { + name: 'SegmentedControl', +}; diff --git a/stories/Skeleton/Skeleton.regression-test.story.jsx b/stories/Skeleton/Skeleton.regression-test.story.jsx index 5d20e6e28..deb43cd5d 100644 --- a/stories/Skeleton/Skeleton.regression-test.story.jsx +++ b/stories/Skeleton/Skeleton.regression-test.story.jsx @@ -1,56 +1,74 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Skeleton } from '../../components'; -storiesOf('Skeleton', module) - .add('rect as default', () => ( - <> - -
- -
- - - )) - .add('text', () => ( - <> - -
- -
- - - )) - .add('circle', () => ) - .add('Button', () => ( - <> - -
- -
- -
- -
- -
- - - )) - .add('Tag', () => ( - <> - - -
- -
- - -
- - -
- - - - )); +export default { + title: 'Skeleton', +}; + +export const RectAsDefault = () => ( + <> + +
+ +
+ + +); + +RectAsDefault.story = { + name: 'rect as default', +}; + +export const _Text = () => ( + <> + +
+ +
+ + +); + +_Text.story = { + name: 'text', +}; + +export const _Circle = () => ; + +_Circle.story = { + name: 'circle', +}; + +export const _Button = () => ( + <> + +
+ +
+ +
+ +
+ +
+ + +); + +export const _Tag = () => ( + <> + + +
+ +
+ + +
+ + +
+ + + +); diff --git a/stories/SnackBar/SnackBar.story.jsx b/stories/SnackBar/SnackBar.story.jsx index cf2223300..caa55577d 100644 --- a/stories/SnackBar/SnackBar.story.jsx +++ b/stories/SnackBar/SnackBar.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { TabbedView, Tab, @@ -21,7 +20,11 @@ import { SnackBarExampleCallback, } from './examples'; -storiesOf('SnackBar', module).add('SnackBar', () => ( +export default { + title: 'SnackBar', +}; + +export const _SnackBar = () => ( <> SnackBars are used to give a actions support that have just been maded: @@ -113,4 +116,8 @@ storiesOf('SnackBar', module).add('SnackBar', () => ( -)); +); + +_SnackBar.story = { + name: 'SnackBar', +}; diff --git a/stories/Socials/Socials.regression-test.story.jsx b/stories/Socials/Socials.regression-test.story.jsx index 78f0e0519..3ebc8f151 100644 --- a/stories/Socials/Socials.regression-test.story.jsx +++ b/stories/Socials/Socials.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Socials from '../../components/Socials'; @@ -21,40 +20,76 @@ const allItems = [ }, ]; -storiesOf('Socials', module) - .add('All items', () => ( -
- -
- )) - - .add('all items (24px)', () => ( -
- -
- )) - .add('only Facebook', () => ( -
- -
- )) - .add('only Twitter', () => ( -
- -
- )) - .add('only Youtube', () => ( -
- -
- )) - .add('all items without box (24px)', () => ( -
- -
- )) - .add('all items without box', () => ( -
- -
- )); +export default { + title: 'Socials', +}; + +export const AllItems = () => ( +
+ +
+); + +AllItems.story = { + name: 'All items', +}; + +export const AllItems24Px = () => ( +
+ +
+); + +AllItems24Px.story = { + name: 'all items (24px)', +}; + +export const OnlyFacebook = () => ( +
+ +
+); + +OnlyFacebook.story = { + name: 'only Facebook', +}; + +export const OnlyTwitter = () => ( +
+ +
+); + +OnlyTwitter.story = { + name: 'only Twitter', +}; + +export const OnlyYoutube = () => ( +
+ +
+); + +OnlyYoutube.story = { + name: 'only Youtube', +}; + +export const AllItemsWithoutBox24Px = () => ( +
+ +
+); + +AllItemsWithoutBox24Px.story = { + name: 'all items without box (24px)', +}; + +export const AllItemsWithoutBox = () => ( +
+ +
+); + +AllItemsWithoutBox.story = { + name: 'all items without box', +}; diff --git a/stories/Socials/Socials.story.jsx b/stories/Socials/Socials.story.jsx index b0be90b1a..b3257aa4f 100644 --- a/stories/Socials/Socials.story.jsx +++ b/stories/Socials/Socials.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { TabbedView, Tab, @@ -21,7 +20,11 @@ import { SocialExampleWithoutBoxChangingSize, } from './examples/SocialExamples'; -storiesOf('Socials', module).add('Socials', () => ( +export default { + title: 'Socials', +}; + +export const _Socials = () => ( <> Socials component is used to share the social media in applications. @@ -100,4 +103,4 @@ storiesOf('Socials', module).add('Socials', () => ( -)); +); diff --git a/stories/Stepper/Stepper.regression-test.story.jsx b/stories/Stepper/Stepper.regression-test.story.jsx index c50389402..317c2cb0d 100644 --- a/stories/Stepper/Stepper.regression-test.story.jsx +++ b/stories/Stepper/Stepper.regression-test.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import Stepper from '../../components/Stepper'; @@ -8,166 +7,192 @@ const i18n = { nextWord: 'próximo', }; -storiesOf('Stepper', module) - .add('Stepper with total 2', () => ( -
- - -
- )) - .add('Stepper with total 3', () => ( -
- - - -
- )) - .add('Stepper with total 4', () => ( -
- - - - -
- )) - .add('Stepper with total 5', () => ( -
- - - - - -
- )) +export default { + title: 'Stepper', +}; + +export const StepperWithTotal2 = () => ( +
+ + +
+); + +StepperWithTotal2.story = { + name: 'Stepper with total 2', +}; + +export const StepperWithTotal3 = () => ( +
+ + + +
+); + +StepperWithTotal3.story = { + name: 'Stepper with total 3', +}; + +export const StepperWithTotal4 = () => ( +
+ + + + +
+); - .add('Stepper with total 6', () => ( -
- - - - - - -
- )); +StepperWithTotal4.story = { + name: 'Stepper with total 4', +}; + +export const StepperWithTotal5 = () => ( +
+ + + + + +
+); + +StepperWithTotal5.story = { + name: 'Stepper with total 5', +}; + +export const StepperWithTotal6 = () => ( +
+ + + + + + +
+); + +StepperWithTotal6.story = { + name: 'Stepper with total 6', +}; diff --git a/stories/Stepper/Stepper.story.jsx b/stories/Stepper/Stepper.story.jsx index 2da20fdd4..c8f9049cc 100644 --- a/stories/Stepper/Stepper.story.jsx +++ b/stories/Stepper/Stepper.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Tab, Example, @@ -40,7 +39,11 @@ const exampleTab = ( ); -storiesOf('Stepper', module).add('Stepper', () => ( +export default { + title: 'Stepper', +}; + +export const _Stepper = () => ( <> ; -storiesOf('TabbedView', module) - .add('default', () => ( - - Candidates content - Companies content - Education content - - )) - .add('fluid', () => ( - - Candidates content - Companies content - Education content - - )) - .add('primary', () => ( - - - With badge content - - - With icon content - - - With icon and badge content - - With only text content - - )); +export default { + title: 'TabbedView', +}; + +export const Default = () => ( + + Candidates content + Companies content + Education content + +); + +Default.story = { + name: 'default', +}; + +export const Fluid = () => ( + + Candidates content + Companies content + Education content + +); + +Fluid.story = { + name: 'fluid', +}; + +export const Primary = () => ( + + + With badge content + + + With icon content + + + With icon and badge content + + With only text content + +); + +Primary.story = { + name: 'primary', +}; diff --git a/stories/TabbedView/TabbedView.story.jsx b/stories/TabbedView/TabbedView.story.jsx index d66c18af2..b0945e9f4 100644 --- a/stories/TabbedView/TabbedView.story.jsx +++ b/stories/TabbedView/TabbedView.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Heading, TabbedView, @@ -20,7 +19,11 @@ import { const badge = ; const icon = ; -storiesOf('TabbedView', module).add('TabbedView', () => ( +export default { + title: 'TabbedView', +}; + +export const _TabbedView = () => ( <> TabbedView and Tab are components created to organize content into @@ -252,4 +255,8 @@ storiesOf('TabbedView', module).add('TabbedView', () => ( -)); +); + +_TabbedView.story = { + name: 'TabbedView', +}; diff --git a/stories/Tag/Tag.regression-test.story.jsx b/stories/Tag/Tag.regression-test.story.jsx index a8c779304..dc2684a66 100644 --- a/stories/Tag/Tag.regression-test.story.jsx +++ b/stories/Tag/Tag.regression-test.story.jsx @@ -1,72 +1,98 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Tag } from '../../components'; -storiesOf('Tag', module) - .add('skin', () => ( - <> - Neutral (Default) - Primary - Success - Warning - Error - - )) - .add('inverted', () => ( - <> - Neutral (Default) - - Primary - - - Success - - - Warning - - - Error - - - )) - .add('stroked', () => ( - <> - Neutral (Default) - - Primary - - - Success - - - Warning - - - Error - - - )) - .add('closables', () => ( - <> - {}}>Neutral (Default) - {}} skin="primary"> - Primary - - {}} skin="success"> - Success - - {}} skin="warning"> - Warning - - {}} skin="error"> - Error - - - )) - .add('sizes', () => ( - <> - Small - Medium (Default) - Large - - )); +export default { + title: 'Tag', +}; + +export const Skin = () => ( + <> + Neutral (Default) + Primary + Success + Warning + Error + +); + +Skin.story = { + name: 'skin', +}; + +export const Inverted = () => ( + <> + Neutral (Default) + + Primary + + + Success + + + Warning + + + Error + + +); + +Inverted.story = { + name: 'inverted', +}; + +export const Stroked = () => ( + <> + Neutral (Default) + + Primary + + + Success + + + Warning + + + Error + + +); + +Stroked.story = { + name: 'stroked', +}; + +export const Closables = () => ( + <> + {}}>Neutral (Default) + {}} skin="primary"> + Primary + + {}} skin="success"> + Success + + {}} skin="warning"> + Warning + + {}} skin="error"> + Error + + +); + +Closables.story = { + name: 'closables', +}; + +export const Sizes = () => ( + <> + Small + Medium (Default) + Large + +); + +Sizes.story = { + name: 'sizes', +}; diff --git a/stories/Tag/Tag.story.jsx b/stories/Tag/Tag.story.jsx index 5852574bf..12f22be12 100644 --- a/stories/Tag/Tag.story.jsx +++ b/stories/Tag/Tag.story.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import { Tab, AutoExample, StoryContainer } from '@catho/quantum-storybook-ui'; import { Tag } from '../../components'; import { @@ -25,10 +24,14 @@ const exampleTab = ( const description = `Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.`; -storiesOf('Tag', module).add('Tag', () => ( +export default { + title: 'Tag', +}; + +export const _Tag = () => ( -)); +); diff --git a/stories/TextArea/TextArea.regression-test.story.jsx b/stories/TextArea/TextArea.regression-test.story.jsx index 470cd8e68..e1ef4c28b 100644 --- a/stories/TextArea/TextArea.regression-test.story.jsx +++ b/stories/TextArea/TextArea.regression-test.story.jsx @@ -1,13 +1,49 @@ import React from 'react'; -import { storiesOf } from '@storybook/react'; import TextArea from '../../components/TextArea'; -storiesOf('TextArea', module) - .add('default', () =>