From 8b5a96cb78f0a52824b6bdfbc4615690b9a0b61f Mon Sep 17 00:00:00 2001 From: Jeroen de Klerk Date: Sat, 24 Apr 2021 14:08:06 +0200 Subject: [PATCH] Storybook show code fix (#117) * Show code showing actual code in layout Storybook. * Show code showing actual code in navigation Storybook. * Show code showing actual code in surfaces Storybook. * Show code showing actual code in data display Storybook. * Show code showing actual code in input Storybook. * Experimental commit, providing different types of code docs per component to properly display its implementation. * Redefined code examples of components based on best possible overview * Experimental commit: Show possibility of providing custom code documentation for each component variant in Storybook * Experimental commit: custom code docs per component. * Applied per-component docs specification for input components. * Applied per-component code doc specs to layout components. * Applied per-component code doc specs to navigation components. * Applied per-component code doc specs to surface components. * Shortened import * Defined custom code in separate variable to fix indentation * Defined custom code in separate variable to fix indentation for input components. * Defined custom code in separate variable to fix indentation for navigation components. * Defined custom code in separate variable to fix indentation for navigation (yes, twice) components. * Defined custom code in separate variable to fix indentation for surface components. * Fixed indendation for surfaces.. Again... * Fixed indendation for navigation.. Again... * Fixed indendation for layout.. Again... * Fixed indendation for input.. Again... * Fixed indendation for datadisplay.. Again... * Prettifier go brrr * Prettifier go brrr and also fixed indentation again because Checkboxes decided to be selfish pricks. Co-authored-by: Maarten Carsjens --- .storybook/preview.js | 1 + src/stories/datadisplay/Avatar.stories.tsx | 29 +-- .../datadisplay/AvatarGroup.stories.tsx | 29 +-- src/stories/datadisplay/Badge.stories.tsx | 72 ++++++-- src/stories/datadisplay/Divider.stories.tsx | 137 ++++++++++++-- src/stories/datadisplay/List.stories.tsx | 168 ++++++++++++++++-- .../datadisplay/Typography.stories.tsx | 29 +-- src/stories/input/Button.stories.tsx | 43 +++-- src/stories/input/ButtonGroup.stories.tsx | 33 ++-- src/stories/input/Checkbox.stories.tsx | 127 ++++++++++++- src/stories/input/DatePicker.stories.tsx | 91 ++++++++-- .../input/FormControlLabel.stories.tsx | 115 ++++++++++-- src/stories/input/FormGroup.stories.tsx | 27 +-- src/stories/input/IconButton.stories.tsx | 69 +++++-- .../input/KeyBoardDatePicker.stories.tsx | 50 ++++-- src/stories/input/Radio.stories.tsx | 60 ++++--- src/stories/input/RadioGroup.stories.tsx | 25 +-- src/stories/input/Select.stories.tsx | 25 +-- src/stories/input/Switch.stories.tsx | 29 +-- src/stories/input/TextField.stories.tsx | 41 +++-- src/stories/layout/Box.stories.tsx | 15 +- src/stories/layout/Container.stories.tsx | 23 ++- src/stories/layout/Grid.stories.tsx | 23 ++- src/stories/layout/GridList.stories.tsx | 23 ++- src/stories/layout/GridListTile.stories.tsx | 21 ++- .../layout/GridListTileBar.stories.tsx | 119 +++++++++---- src/stories/layout/Hidden.stories.tsx | 20 ++- src/stories/navigation/Drawer.stories.tsx | 152 ++++++++++++++-- src/stories/navigation/Link.stories.tsx | 23 ++- src/stories/navigation/Menu.stories.tsx | 125 +++++++++++-- src/stories/navigation/MenuItem.stories.tsx | 27 +-- src/stories/navigation/MenuList.stories.tsx | 19 +- src/stories/navigation/Stepper.stories.tsx | 23 ++- .../navigation/SwipeableDrawer.stories.tsx | 19 +- src/stories/navigation/Tab.stories.tsx | 153 ++++++++++++++-- src/stories/navigation/Tabs.stories.tsx | 33 ++-- src/stories/surfaces/Accordion.stories.tsx | 129 ++++++++++++-- src/stories/surfaces/AppBar.stories.tsx | 99 +++++++++-- src/stories/surfaces/Card.stories.tsx | 124 +++++++++++-- src/stories/surfaces/Paper.stories.tsx | 27 +-- 40 files changed, 1900 insertions(+), 497 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index b285aacafd..9378fd7b46 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,3 +1,4 @@ export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, + format: false }; diff --git a/src/stories/datadisplay/Avatar.stories.tsx b/src/stories/datadisplay/Avatar.stories.tsx index a6889bcef8..c5aca57857 100644 --- a/src/stories/datadisplay/Avatar.stories.tsx +++ b/src/stories/datadisplay/Avatar.stories.tsx @@ -1,25 +1,30 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Avatar, { AvatarProps } from "../../components/Avatar"; -import pkg from "../../components/Avatar/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Avatar, AvatarProps } from '../../components/Avatar'; +import pkg from '../../components/Avatar/package.json'; export default { - title: "Components/Data Display/Avatar", + title: 'Components/Data Display/Avatar', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Avatar + component: Avatar, } as Meta; -const Template: Story = (args: any) => ; +const Template: Story = (args: AvatarProps) => ; /** * Implementation of Avatar */ export const Default = Template.bind({}); Default.args = { - src: "https://c1.staticflickr.com/9/8486/8245351490_2746ef972c_b.jpg", - alt: "Planet Earth" + src: 'https://c1.staticflickr.com/9/8486/8245351490_2746ef972c_b.jpg', + alt: 'Planet Earth', }; /** @@ -27,7 +32,7 @@ Default.args = { */ export const Letter = Template.bind({}); Letter.args = { - children: "DH" + children: 'DH', }; /** @@ -36,5 +41,5 @@ Letter.args = { export const Squared = Template.bind({}); Squared.args = { ...Default.args, - variant: "square" + variant: 'square', }; diff --git a/src/stories/datadisplay/AvatarGroup.stories.tsx b/src/stories/datadisplay/AvatarGroup.stories.tsx index 1398b0205d..1d088e8abd 100644 --- a/src/stories/datadisplay/AvatarGroup.stories.tsx +++ b/src/stories/datadisplay/AvatarGroup.stories.tsx @@ -1,23 +1,28 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Avatar from "../../components/Avatar"; -import AvatarGroup, { AvatarGroupProps } from "../../components/AvatarGroup"; -import pkg from "../../components/AvatarGroup/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Avatar from '../../components/Avatar'; +import AvatarGroup, { AvatarGroupProps } from '../../components/AvatarGroup'; +import pkg from '../../components/AvatarGroup/package.json'; export default { - title: "Components/Data Display/AvatarGroup", + title: 'Components/Data Display/AvatarGroup', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: AvatarGroup + component: AvatarGroup, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: AvatarGroupProps) => ( - + DH @@ -33,5 +38,5 @@ export const Default = Template.bind({}); */ export const SmallSpacing = Template.bind({}); SmallSpacing.args = { - spacing: "small" + spacing: 'small', }; diff --git a/src/stories/datadisplay/Badge.stories.tsx b/src/stories/datadisplay/Badge.stories.tsx index 21f2a23992..85d650eaa9 100644 --- a/src/stories/datadisplay/Badge.stories.tsx +++ b/src/stories/datadisplay/Badge.stories.tsx @@ -1,18 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Badge, { BadgeProps } from "../../components/Badge"; -import MailIcon from "@material-ui/icons/Mail"; -import pkg from "../../components/Badge/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Badge, BadgeProps } from '../../components/Badge'; +import MailIcon from '@material-ui/icons/Mail'; +import pkg from '../../components/Badge/package.json'; export default { - title: "Components/Data Display/Badge", + title: 'Components/Data Display/Badge', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'code', + }, + }, }, - component: Badge + component: Badge, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: BadgeProps) => ( @@ -23,7 +28,16 @@ const Template: Story = (args: any) => ( */ export const Default = Template.bind({}); Default.args = { - badgeContent: 4 + badgeContent: 4, +}; + +Default.parameters = { + docs: { + source: { + // language=HTML + code: ``, + }, + }, }; /** @@ -31,8 +45,17 @@ Default.args = { */ export const PrimaryColoured = Template.bind({}); PrimaryColoured.args = { - color: "primary", - ...Default.args + color: 'primary', + ...Default.args, +}; + +PrimaryColoured.parameters = { + docs: { + source: { + // language=HTML + code: ``, + }, + }, }; /** @@ -40,8 +63,17 @@ PrimaryColoured.args = { */ export const CircleOverlap = Template.bind({}); CircleOverlap.args = { - overlap: "circle", - ...PrimaryColoured.args + overlap: 'circle', + ...PrimaryColoured.args, +}; + +CircleOverlap.parameters = { + docs: { + source: { + // language=HTML + code: ``, + }, + }, }; /** @@ -49,6 +81,14 @@ CircleOverlap.args = { */ export const DotVariant = Template.bind({}); DotVariant.args = { - variant: "dot", - ...PrimaryColoured.args + variant: 'dot', + ...PrimaryColoured.args, +}; + +DotVariant.parameters = { + docs: { + source: { + code: ``, + }, + }, }; diff --git a/src/stories/datadisplay/Divider.stories.tsx b/src/stories/datadisplay/Divider.stories.tsx index a4cc474977..0c74235389 100644 --- a/src/stories/datadisplay/Divider.stories.tsx +++ b/src/stories/datadisplay/Divider.stories.tsx @@ -1,20 +1,25 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Divider, { DividerProps } from "../../components/Divider"; -import pkg from "../../components/Divider/package.json"; -import List, { ListItem, ListItemIcon, ListItemText } from "../../components/List"; -import InboxIcon from "@material-ui/icons/Inbox"; -import DraftsIcon from "@material-ui/icons/Drafts"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Divider, DividerProps } from '../../components/Divider'; +import pkg from '../../components/Divider/package.json'; +import { List, ListItem, ListItemIcon, ListItemText } from '../../components/List'; +import InboxIcon from '@material-ui/icons/Inbox'; +import DraftsIcon from '@material-ui/icons/Drafts'; export default { - title: "Components/Data Display/Divider", + title: 'Components/Data Display/Divider', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Divider + component: Divider, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: DividerProps) => ( @@ -32,17 +37,107 @@ const Template: Story = (args: any) => ( ); +// language=JS +const defaultCode = ` + + + + + + + + + + + + + + + +`; + +// language=JS +const insetCode = ` + + + + + + + + + + + + + + + +`; + +// language=JS +const lightCode = ` + + + + + + + + + + + + + + + +`; + +// language=JS +const absoluteCode = ` + + + + + + + + + + + + + + + +`; + /** * Implementation of Divider. */ export const Default = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; /** * Divider in the inset variant. */ export const InsetVariant = Template.bind({}); InsetVariant.args = { - variant: "inset" + variant: 'inset', +}; +InsetVariant.parameters = { + docs: { + source: { + code: insetCode, + }, + }, }; /** @@ -50,7 +145,14 @@ InsetVariant.args = { */ export const LightColoured = Template.bind({}); LightColoured.args = { - light: true + light: true, +}; +LightColoured.parameters = { + docs: { + source: { + code: lightCode, + }, + }, }; /** @@ -58,5 +160,12 @@ LightColoured.args = { */ export const AbsolutePosition = Template.bind({}); AbsolutePosition.args = { - absolute: true + absolute: true, +}; +AbsolutePosition.parameters = { + docs: { + source: { + code: absoluteCode, + }, + }, }; diff --git a/src/stories/datadisplay/List.stories.tsx b/src/stories/datadisplay/List.stories.tsx index 1ddb3ac9ab..bfb056c711 100644 --- a/src/stories/datadisplay/List.stories.tsx +++ b/src/stories/datadisplay/List.stories.tsx @@ -1,28 +1,33 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import pkg from "../../components/List/package.json"; -import List, { ListProps } from "../../components/List"; -import ListItem from "../../components/ListItem"; -import ListItemAvatar from "../../components/ListItemAvatar"; -import ListItemIcon from "../../components/ListItemIcon"; -import ListItemSecondaryAction from "../../components/ListItemSecondaryAction"; -import ListItemText from "../../components/ListItemText"; -import ListSubheader from "../../components/ListSubheader"; -import Checkbox from "../../components/Checkbox"; -import IconButton from "../../components/IconButton"; -import Avatar from "../../components/Avatar"; -import CommentIcon from "@material-ui/icons/Comment"; -import FolderIcon from "@material-ui/icons/Folder"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import pkg from '../../components/List/package.json'; +import List, { ListProps } from '../../components/List'; +import ListItem from '../../components/ListItem'; +import ListItemAvatar from '../../components/ListItemAvatar'; +import ListItemIcon from '../../components/ListItemIcon'; +import ListItemSecondaryAction from '../../components/ListItemSecondaryAction'; +import ListItemText from '../../components/ListItemText'; +import ListSubheader from '../../components/ListSubheader'; +import Checkbox from '../../components/Checkbox'; +import IconButton from '../../components/IconButton'; +import Avatar from '../../components/Avatar'; +import CommentIcon from '@material-ui/icons/Comment'; +import FolderIcon from '@material-ui/icons/Folder'; export default { - title: "Components/Data Display/List", + title: 'Components/Data Display/List', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: List, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: ListProps) => ( @@ -46,10 +51,117 @@ const Template: Story = (args: any) => ( ); +// language=JS +const defaultCode = ` + + + + + + + + + + + + + + + + + + + + + +`; + +// language=JS +const denseCode = ` + + + + + + + + + + + + + + + + + + + + + +`; + +// language=JS +const paddingCode = ` + + + + + + + + + + + + + + + + + + + + + +`; + +// language=JS +const subheaderCode = ` + + + + + + + + + + + + + + + + + + + + + +`; + /** * Implementation of List. */ export const Default = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; /** * Dense variant of List component @@ -58,6 +170,13 @@ export const Dense = Template.bind({}); Dense.args = { dense: true, }; +Dense.parameters = { + docs: { + source: { + code: denseCode, + }, + }, +}; /** * Variant of List component with padding disabled @@ -66,6 +185,13 @@ export const PaddingDisabled = Template.bind({}); PaddingDisabled.args = { disablePadding: true, }; +PaddingDisabled.parameters = { + docs: { + source: { + code: paddingCode, + }, + }, +}; /** * Variant of List component with Subheader @@ -74,3 +200,11 @@ export const Subheader = Template.bind({}); Subheader.args = { subheader: Nested Subheader, }; +Subheader.parameters = { + docs: { + source: { + // language=HTML + code: subheaderCode, + }, + }, +}; diff --git a/src/stories/datadisplay/Typography.stories.tsx b/src/stories/datadisplay/Typography.stories.tsx index 4f293f00c3..ce10deb693 100644 --- a/src/stories/datadisplay/Typography.stories.tsx +++ b/src/stories/datadisplay/Typography.stories.tsx @@ -1,17 +1,22 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Typography, { TypographyProps } from "../../components/Typography"; -import pkg from "../../components/Typography/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Typography, { TypographyProps } from '../../components/Typography'; +import pkg from '../../components/Typography/package.json'; export default { - title: "Components/Data Display/Typography", + title: 'Components/Data Display/Typography', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Typography + component: Typography, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: TypographyProps) => ( This is a bit of text inside a Typography component. Play around with the variants property to see me in different variants! @@ -28,7 +33,7 @@ export const Default = Template.bind({}); */ export const Heading = Template.bind({}); Heading.args = { - variant: "h1" + variant: 'h1', }; /** @@ -36,7 +41,7 @@ Heading.args = { */ export const noWrap = Template.bind({}); noWrap.args = { - noWrap: true + noWrap: true, }; /** @@ -44,7 +49,7 @@ noWrap.args = { */ export const Centered = Template.bind({}); Centered.args = { - align: "center" + align: 'center', }; /** @@ -52,5 +57,5 @@ Centered.args = { */ export const Paragraphed = Template.bind({}); Paragraphed.args = { - paragraph: true + paragraph: true, }; diff --git a/src/stories/input/Button.stories.tsx b/src/stories/input/Button.stories.tsx index 17f3a060e4..9546033c19 100644 --- a/src/stories/input/Button.stories.tsx +++ b/src/stories/input/Button.stories.tsx @@ -1,25 +1,30 @@ -import React from "react"; +import React from 'react'; // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 -import { Meta, Story } from "@storybook/react/types-6-0"; -import Button, { ButtonProps } from "../../components/Button"; -import pkg from "../../components/Button/package.json"; +import { Meta, Story } from '@storybook/react/types-6-0'; +import Button, { ButtonProps } from '../../components/Button'; +import pkg from '../../components/Button/package.json'; export default { - title: "Components/Input/Button", + title: 'Components/Input/Button', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Button + component: Button, } as Meta; -const Template: Story = (args: any) => ; +const Template: Story = (args: ButtonProps) => ; /** * Default Button */ export const Default = Template.bind({}); Default.args = { - variant: "contained" + variant: 'contained', }; /** @@ -27,8 +32,8 @@ Default.args = { */ export const Primary: Story = Template.bind({}); Primary.args = { - color: "primary", - variant: "contained" + color: 'primary', + variant: 'contained', }; /** @@ -36,8 +41,8 @@ Primary.args = { */ export const Secondary: Story = Template.bind({}); Secondary.args = { - color: "secondary", - variant: "contained" + color: 'secondary', + variant: 'contained', }; /** @@ -45,7 +50,7 @@ Secondary.args = { */ export const Outlined: Story = Template.bind({}); Outlined.args = { - variant: "outlined" + variant: 'outlined', }; /** @@ -53,7 +58,7 @@ Outlined.args = { */ export const Text: Story = Template.bind({}); Text.args = { - variant: "text" + variant: 'text', }; /** @@ -61,7 +66,7 @@ Text.args = { */ export const Small: Story = Template.bind({}); Small.args = { - size: "small" + size: 'small', }; /** @@ -69,7 +74,7 @@ Small.args = { */ export const Medium: Story = Template.bind({}); Medium.args = { - size: "medium" + size: 'medium', }; /** @@ -77,7 +82,7 @@ Medium.args = { */ export const Large: Story = Template.bind({}); Large.args = { - size: "large" + size: 'large', }; /** @@ -85,5 +90,5 @@ Large.args = { */ export const Disabled: Story = Template.bind({}); Disabled.args = { - disabled: true + disabled: true, }; diff --git a/src/stories/input/ButtonGroup.stories.tsx b/src/stories/input/ButtonGroup.stories.tsx index d0a394db7f..e79a41e3b7 100644 --- a/src/stories/input/ButtonGroup.stories.tsx +++ b/src/stories/input/ButtonGroup.stories.tsx @@ -1,18 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import ButtonGroup, { ButtonGroupProps } from "../../components/ButtonGroup"; -import pkg from "../../components/ButtonGroup/package.json"; -import Button from "../../components/Button"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import ButtonGroup, { ButtonGroupProps } from '../../components/ButtonGroup'; +import pkg from '../../components/ButtonGroup/package.json'; +import Button from '../../components/Button'; export default { - title: "Components/Input/ButtonGroup", + title: 'Components/Input/ButtonGroup', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: ButtonGroup + component: ButtonGroup, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: ButtonGroupProps) => ( @@ -30,7 +35,7 @@ export const Default = Template.bind({}); */ export const DisabledGroup = Template.bind({}); DisabledGroup.args = { - disabled: true + disabled: true, }; /** @@ -38,7 +43,7 @@ DisabledGroup.args = { */ export const FullWidth = Template.bind({}); FullWidth.args = { - fullWidth: true + fullWidth: true, }; /** @@ -46,7 +51,7 @@ FullWidth.args = { */ export const SecondaryColoured = Template.bind({}); SecondaryColoured.args = { - color: "secondary" + color: 'secondary', }; /** @@ -54,7 +59,7 @@ SecondaryColoured.args = { */ export const VerticalOriented = Template.bind({}); VerticalOriented.args = { - orientation: "vertical" + orientation: 'vertical', }; /** @@ -62,5 +67,5 @@ VerticalOriented.args = { */ export const Textual = Template.bind({}); Textual.args = { - variant: "text" + variant: 'text', }; diff --git a/src/stories/input/Checkbox.stories.tsx b/src/stories/input/Checkbox.stories.tsx index e7038a6701..bd254eaf05 100644 --- a/src/stories/input/Checkbox.stories.tsx +++ b/src/stories/input/Checkbox.stories.tsx @@ -1,14 +1,19 @@ -import React from "react"; +import React from 'react'; // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 -import { Story, Meta } from "@storybook/react/types-6-0"; -import Checkbox, { CheckboxProps } from "../../components/Checkbox"; -import FormControlLabel from "../../components/FormControlLabel"; -import pkg from "../../components/Checkbox/package.json"; +import { Story, Meta } from '@storybook/react/types-6-0'; +import Checkbox, { CheckboxProps } from '../../components/Checkbox'; +import FormControlLabel from '../../components/FormControlLabel'; +import pkg from '../../components/Checkbox/package.json'; export default { - title: "Components/Input/Checkbox", + title: 'Components/Input/Checkbox', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Checkbox, } as Meta; @@ -17,17 +22,81 @@ const Template: Story = (args: any) => ( } /> ); +// language=JS +const defaultCode = ` + + + +`; + +// language=JS +const primaryCode = ` + + + +`; + +// language=JS +const secondaryCode = ` + + + +`; + +// language=JS +const checkedDefault = ` + + + +`; + +// language=JS +const smallCode = ` + + + +`; + +// language=JS +const indeterminateCode = ` + + + +`; + +// language=JS +const disabledCode = ` + + + +`; + /** * Default Checkbox */ export const Default: Story = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; /** * Primary Checkbox */ export const Primary: Story = Template.bind({}); Primary.args = { - color: "primary", + color: 'primary', +}; + +Primary.parameters = { + docs: { + source: { + code: primaryCode, + }, + }, }; /** @@ -35,7 +104,15 @@ Primary.args = { */ export const Secondary: Story = Template.bind({}); Secondary.args = { - color: "secondary", + color: 'secondary', +}; + +Secondary.parameters = { + docs: { + source: { + code: secondaryCode, + }, + }, }; /** @@ -46,12 +123,28 @@ CheckedByDefault.args = { defaultChecked: true, }; +CheckedByDefault.parameters = { + docs: { + source: { + code: checkedDefault, + }, + }, +}; + /** * Small Checkbox */ export const Small: Story = Template.bind({}); Small.args = { - size: "small", + size: 'small', +}; + +Small.parameters = { + docs: { + source: { + code: smallCode, + }, + }, }; /** @@ -62,6 +155,14 @@ Indeterminate.args = { indeterminate: true, }; +Indeterminate.parameters = { + docs: { + source: { + code: indeterminateCode, + }, + }, +}; + /** * Disabled Checkbox */ @@ -69,3 +170,11 @@ export const Disabled: Story = Template.bind({}); Disabled.args = { disabled: true, }; + +Disabled.parameters = { + docs: { + source: { + code: disabledCode, + }, + }, +}; diff --git a/src/stories/input/DatePicker.stories.tsx b/src/stories/input/DatePicker.stories.tsx index fee64117c3..59f1418fc4 100644 --- a/src/stories/input/DatePicker.stories.tsx +++ b/src/stories/input/DatePicker.stories.tsx @@ -1,20 +1,20 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import DateFnsUtils from "@date-io/date-fns"; -import DatePicker, { DatePickerProps } from "../../components/Pickers/DatePicker/DatePicker"; -import PickersUtilsProvider from "../../components/PickersUtilsProvider"; -import pkg from "../../components/Pickers/package.json"; +import React from 'react'; +import { Story, Meta } from '@storybook/react'; +import DateFnsUtils from '@date-io/date-fns'; +import DatePicker, { DatePickerProps } from '../../components/Pickers/DatePicker/DatePicker'; +import { PickersUtilsProvider } from '../../components/PickersUtilsProvider'; +import pkg from '../../components/Pickers/package.json'; export default { - title: "Components/Input/DatePicker", + title: 'Components/Input/DatePicker', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, }, - component: DatePicker + component: DatePicker, } as Meta; -const Template: Story = (args: any) => { - const [value, setValue] = React.useState("1970-01-01"); +const Template: Story = (args: DatePickerProps) => { + const [value, setValue] = React.useState('1970-01-01'); args.onChange = (newValue: any) => { setValue(newValue); }; @@ -27,23 +27,84 @@ const Template: Story = (args: any) => { ); }; +// language=JS +const defaultCode = ` +import DateFnsUtils from "@date-io/date-fns"; + +const [value, setValue] = React.useState("1970-01-01"); + + + { + setValue(newValue); + }}/> + +`; + /** * Default Datepicker */ export const Default: Story = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; /** - * Inline Checkbox + * Inline Datepicker */ export const Inline: Story = Template.bind({}); Inline.args = { - variant: "inline" + variant: 'inline', }; +// language=JS +const inlineCode = ` +import DateFnsUtils from "@date-io/date-fns"; + +const [value, setValue] = React.useState("1970-01-01"); + + + { + setValue(newValue); + }}/> + +`; + +Inline.parameters = { + docs: { + source: { + code: inlineCode, + }, + }, +}; + +// language=JS +const staticCode = ` +import DateFnsUtils from "@date-io/date-fns"; + +const [value, setValue] = React.useState("1970-01-01"); + + + { + setValue(newValue); + }}/> + +`; + /** - * Inline Checkbox + * Static Datepicker */ export const Static: Story = Template.bind({}); Static.args = { - variant: "static" + variant: 'static', +}; +Static.parameters = { + docs: { + source: { + code: staticCode, + }, + }, }; diff --git a/src/stories/input/FormControlLabel.stories.tsx b/src/stories/input/FormControlLabel.stories.tsx index cdb2dcae10..a8c331879c 100644 --- a/src/stories/input/FormControlLabel.stories.tsx +++ b/src/stories/input/FormControlLabel.stories.tsx @@ -1,55 +1,146 @@ -import React from "react"; +import React from 'react'; // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 -import { Meta, Story } from "@storybook/react/types-6-0"; -import Checkbox from "../../components/Checkbox/Checkbox"; -import FormControlLabel, { FormControlLabelProps } from "../../components/FormControlLabel"; -import pkg from "../../components/FormControlLabel/package.json"; +import { Meta, Story } from '@storybook/react/types-6-0'; +import Checkbox from '../../components/Checkbox/Checkbox'; +import FormControlLabel, { FormControlLabelProps } from '../../components/FormControlLabel'; +import pkg from '../../components/FormControlLabel/package.json'; export default { - title: "Components/Input/FormControlLabel", + title: 'Components/Input/FormControlLabel', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: FormControlLabel + component: FormControlLabel, } as Meta; const Template: Story = (args: any) => ( } {...args} /> ); +// language=JS +const defaultCode = ` + +`; + /** * Default FormControlLabel */ export const Default: Story = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; + +// language=JS +const startCode = ` + +`; /** * FormControlLabel with label before the FormControl */ export const Start: Story = Template.bind({}); Start.args = { - labelPlacement: "start" + labelPlacement: 'start', }; +Start.parameters = { + docs: { + source: { + code: startCode, + }, + }, +}; + +// language=JS +const topCode = ` + +`; /** * FormControlLabel with label on top of the FormControl */ export const Top: Story = Template.bind({}); Top.args = { - labelPlacement: "top" + labelPlacement: 'top', }; +Top.parameters = { + docs: { + source: { + code: topCode, + }, + }, +}; + +// language=JS +const bottomCode = ` + +`; + /** * FormControlLabel with label on the bottom of the FormControl */ export const Bottom: Story = Template.bind({}); Bottom.args = { - labelPlacement: "bottom" + labelPlacement: 'bottom', +}; +Bottom.parameters = { + docs: { + source: { + code: bottomCode, + }, + }, }; +// language=JS +const endCode = ` + +`; + /** * FormControlLabel with label after the FormControl */ export const End: Story = Template.bind({}); End.args = { - labelPlacement: "end" + labelPlacement: 'end', +}; + +End.parameters = { + docs: { + source: { + code: endCode, + }, + }, }; diff --git a/src/stories/input/FormGroup.stories.tsx b/src/stories/input/FormGroup.stories.tsx index d6f8840492..f78a0f74da 100644 --- a/src/stories/input/FormGroup.stories.tsx +++ b/src/stories/input/FormGroup.stories.tsx @@ -1,20 +1,25 @@ -import React from "react"; +import React from 'react'; // also exported from '@storybook/react' if you can deal with breaking changes in 6.1 -import { Meta, Story } from "@storybook/react/types-6-0"; -import Checkbox from "../../components/Checkbox/Checkbox"; -import FormControlLabel from "../../components/FormControlLabel"; -import FormGroup, { FormGroupProps } from "../../components/FormGroup"; -import pkg from "../../components/FormGroup/package.json"; +import { Meta, Story } from '@storybook/react/types-6-0'; +import Checkbox from '../../components/Checkbox/Checkbox'; +import FormControlLabel from '../../components/FormControlLabel'; +import FormGroup, { FormGroupProps } from '../../components/FormGroup'; +import pkg from '../../components/FormGroup/package.json'; export default { - title: "Components/Input/FormGroup", + title: 'Components/Input/FormGroup', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: FormGroup + component: FormGroup, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: FormGroupProps) => ( } label="Checkbox 1" /> } label="Checkbox 2" /> @@ -25,5 +30,5 @@ export const Default: Story = Template.bind({}); export const Row: Story = Template.bind({}); Row.args = { - row: true + row: true, }; diff --git a/src/stories/input/IconButton.stories.tsx b/src/stories/input/IconButton.stories.tsx index 925f561a70..7992785e4f 100644 --- a/src/stories/input/IconButton.stories.tsx +++ b/src/stories/input/IconButton.stories.tsx @@ -1,37 +1,84 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import { IconButton, IconButtonProps } from "../../components/IconButton"; -import DeleteIcon from "@material-ui/icons/Delete"; -import pkg from "../../components/IconButton/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { IconButton, IconButtonProps } from '../../components/IconButton'; +import DeleteIcon from '@material-ui/icons/Delete'; +import pkg from '../../components/IconButton/package.json'; export default { - title: "Components/Input/IconButton", + title: 'Components/Input/IconButton', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: IconButton + component: IconButton, } as Meta; -const Template: Story = (args: any) => ( +const Template: Story = (args: IconButtonProps) => ( ); +// language=JS +const defaultCode = ` + + + +`; + /** * Implementation of IconButton */ export const Default = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; + +//language=JS +const primaryCode = ` + + + +`; /** * Implementation of IconButton with primary coloured components. */ export const PrimaryColoured = Template.bind({}); PrimaryColoured.args = { - color: "primary" + color: 'primary', }; +PrimaryColoured.parameters = { + docs: { + source: { + code: primaryCode, + }, + }, +}; + +// language=JS +const smallCode = ` + + + +`; export const SmallSized = Template.bind({}); SmallSized.args = { - size: "small" + size: 'small', +}; +SmallSized.parameters = { + docs: { + source: { + code: smallCode, + }, + }, }; diff --git a/src/stories/input/KeyBoardDatePicker.stories.tsx b/src/stories/input/KeyBoardDatePicker.stories.tsx index 3c5ea582c1..6ac1ddeada 100644 --- a/src/stories/input/KeyBoardDatePicker.stories.tsx +++ b/src/stories/input/KeyBoardDatePicker.stories.tsx @@ -1,23 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; +import React from 'react'; +import { Story, Meta } from '@storybook/react'; import { KeyboardDatePicker, - KeyboardDatePickerProps -} from "../../components/Pickers/KeyboardDatePicker/KeyboardDatePicker"; -import PickersUtilsProvider from "../../components/PickersUtilsProvider"; -import DateFnsUtils from "@date-io/date-fns"; -import pkg from "../../components/Pickers/package.json"; + KeyboardDatePickerProps, +} from '../../components/Pickers/KeyboardDatePicker/KeyboardDatePicker'; +import { PickersUtilsProvider } from '../../components/PickersUtilsProvider'; +import DateFnsUtils from '@date-io/date-fns'; +import pkg from '../../components/Pickers/package.json'; export default { - title: "Components/Input/KeyboardDatePicker", + title: 'Components/Input/KeyboardDatePicker', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, }, - component: KeyboardDatePicker + component: KeyboardDatePicker, } as Meta; const Template: Story = (args: any) => { - const [value, setValue] = React.useState("1970-01-01"); + const [value, setValue] = React.useState('1970-01-01'); args.onChange = (newValue: any) => { setValue(newValue); }; @@ -30,10 +30,36 @@ const Template: Story = (args: any) => { ); }; +// language=JS +const defaultCode = ` +import DateFnUtils from '@date-io/date-fns'; + +const [value, setValue] = React.useState('1970-01-01'); + + + { + setValue(newValue); + } + } + clearable + /> + +`; + /** * Default KeyboardDatePicker */ export const Default: Story = Template.bind({}); Default.args = { - clearable: true + clearable: true, +}; +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, }; diff --git a/src/stories/input/Radio.stories.tsx b/src/stories/input/Radio.stories.tsx index d455f2c7b9..5e897da4cf 100644 --- a/src/stories/input/Radio.stories.tsx +++ b/src/stories/input/Radio.stories.tsx @@ -1,46 +1,62 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react/types-6-0"; -import FormControlLabel from "../../components/FormControlLabel"; -import Radio, { RadioProps } from "../../components/Radio"; -import pkg from "../../components/Radio/package.json"; +import React from 'react'; +import { Story, Meta } from '@storybook/react/types-6-0'; +import { FormControlLabel } from '../../components/FormControlLabel'; +import { Radio } from '../..'; +import { RadioProps } from '../../components/Radio'; +import pkg from '../../components/Radio/package.json'; -import ThumbDownIcon from "@material-ui/icons/ThumbDown"; -import ThumbUpIcon from "@material-ui/icons/ThumbUp"; +import ThumbDownIcon from '@material-ui/icons/ThumbDown'; +import ThumbUpIcon from '@material-ui/icons/ThumbUp'; export default { - title: "Components/Input/Radio", + title: 'Components/Input/Radio', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Radio + component: Radio, } as Meta; -const Template: Story = (args: any) => { - return ( -
- } /> -
- ); -}; +const Template: Story = (args: any) => } />; export const Default: Story = Template.bind({}); Default.args = { - color: "default", - size: "medium" + color: 'default', + size: 'medium', }; export const Primary: Story = Template.bind({}); Primary.args = { - color: "primary" + color: 'primary', }; export const Secondary: Story = Template.bind({}); Secondary.args = { - color: "secondary" + color: 'secondary', }; +// language=JS +const iconCode = ` + } icon={} onChange={() => {}}/>} + label="Radio" + /> +`; + export const Icons: Story = Template.bind({}); Icons.args = { icon: , - checkedIcon: + checkedIcon: , +}; +Icons.parameters = { + docs: { + source: { + // language=HTML + code: iconCode, + }, + }, }; diff --git a/src/stories/input/RadioGroup.stories.tsx b/src/stories/input/RadioGroup.stories.tsx index 550f6129e0..809434b39a 100644 --- a/src/stories/input/RadioGroup.stories.tsx +++ b/src/stories/input/RadioGroup.stories.tsx @@ -1,15 +1,20 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react/types-6-0"; -import { RadioGroup, RadioGroupProps } from "../../components/RadioGroup"; -import pkg from "../../components/RadioGroup/package.json"; -import { FormControlLabel, Radio } from "../.."; +import React from 'react'; +import { Meta, Story } from '@storybook/react/types-6-0'; +import { RadioGroup, RadioGroupProps } from '../../components/RadioGroup'; +import pkg from '../../components/RadioGroup/package.json'; +import { FormControlLabel, Radio } from '../..'; export default { - title: "Components/Input/RadioGroup", + title: 'Components/Input/RadioGroup', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: RadioGroup + component: RadioGroup, } as Meta; const Template: Story = (args: any) => ( @@ -26,10 +31,10 @@ export const Primary: Story = Template.bind({}); export const SelectDefault: Story = Template.bind({}); SelectDefault.args = { - defaultValue: "c" + defaultValue: 'c', }; export const Row: Story = Template.bind({}); Row.args = { - row: true + row: true, }; diff --git a/src/stories/input/Select.stories.tsx b/src/stories/input/Select.stories.tsx index 14d812de32..2a84d8d536 100644 --- a/src/stories/input/Select.stories.tsx +++ b/src/stories/input/Select.stories.tsx @@ -1,16 +1,21 @@ -import React from "react"; -import { Meta } from "@storybook/react"; -import { createStyles, makeStyles, Theme } from "@material-ui/core"; -import pkg from "../../components/Select/package.json"; -import Select, { SelectProps } from "../../components/Select"; -import FormControl from "../../components/FormControl"; -import InputLabel from "../../components/InputLabel"; -import MenuItem from "../../components/MenuItem"; +import React from 'react'; +import { Meta } from '@storybook/react'; +import { createStyles, makeStyles, Theme } from '@material-ui/core'; +import pkg from '../../components/Select/package.json'; +import Select, { SelectProps } from '../../components/Select'; +import FormControl from '../../components/FormControl'; +import InputLabel from '../../components/InputLabel'; +import MenuItem from '../../components/MenuItem'; export default { - title: "Components/Input/Select", + title: 'Components/Input/Select', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Select, } as Meta; @@ -21,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => margin: theme.spacing(1), minWidth: 120, }, - }) + }), ); export function DefaultSelect(props: SelectProps): React.ReactElement { diff --git a/src/stories/input/Switch.stories.tsx b/src/stories/input/Switch.stories.tsx index e6ab19f7e6..c5da3c56f9 100644 --- a/src/stories/input/Switch.stories.tsx +++ b/src/stories/input/Switch.stories.tsx @@ -1,15 +1,20 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import pkg from "../../components/Switch/package.json"; -import Switch, { SwitchProps } from "../../components/Switch"; -import FormControlLabel from "../../components/FormControlLabel"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import pkg from '../../components/Switch/package.json'; +import Switch, { SwitchProps } from '../../components/Switch'; +import FormControlLabel from '../../components/FormControlLabel'; export default { - title: "Components/Input/Switch", + title: 'Components/Input/Switch', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Switch + component: Switch, } as Meta; const Template: Story = (args: any) => { @@ -30,7 +35,7 @@ export const Default: Story = Template.bind({}); */ export const DefaultChecked: Story = Template.bind({}); DefaultChecked.args = { - defaultChecked: true + defaultChecked: true, }; /** @@ -38,7 +43,7 @@ DefaultChecked.args = { */ export const Primary: Story = Template.bind({}); Primary.args = { - color: "primary" + color: 'primary', }; /** @@ -46,7 +51,7 @@ Primary.args = { */ export const Secondary: Story = Template.bind({}); Secondary.args = { - color: "secondary" + color: 'secondary', }; /** @@ -54,5 +59,5 @@ Secondary.args = { */ export const Disabled: Story = Template.bind({}); Disabled.args = { - disabled: true + disabled: true, }; diff --git a/src/stories/input/TextField.stories.tsx b/src/stories/input/TextField.stories.tsx index 4e527abee4..320fb42814 100644 --- a/src/stories/input/TextField.stories.tsx +++ b/src/stories/input/TextField.stories.tsx @@ -1,12 +1,17 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import pkg from "../../components/TextField/package.json"; -import TextField, { TextFieldProps } from "../../components/TextField"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import pkg from '../../components/TextField/package.json'; +import TextField, { TextFieldProps } from '../../components/TextField'; export default { - title: "Components/Input/TextField", + title: 'Components/Input/TextField', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: TextField, argTypes: { @@ -25,29 +30,29 @@ const Template: Story = (args: TextFieldProps) => { */ export const Default: Story = Template.bind({}); Default.args = { - label: "Default text field", + label: 'Default text field', }; /** * Primary TextField */ export const Primary: Story = Template.bind({}); Primary.args = { - label: "Primary text field", + label: 'Primary text field', }; /** * Secondary TextField */ export const Secondary: Story = Template.bind({}); Secondary.args = { - label: "Secondary text field", - color: "secondary", + label: 'Secondary text field', + color: 'secondary', }; /** * Disabled TextField */ export const Disabled: Story = Template.bind({}); Disabled.args = { - label: "Disabled text field", + label: 'Disabled text field', disabled: true, }; /** @@ -55,20 +60,20 @@ Disabled.args = { */ const currencies = [ { - value: "USD", - label: "$", + value: 'USD', + label: '$', }, { - value: "EUR", - label: "€", + value: 'EUR', + label: '€', }, { - value: "BTC", - label: "฿", + value: 'BTC', + label: '฿', }, { - value: "JPY", - label: "¥", + value: 'JPY', + label: '¥', }, ]; diff --git a/src/stories/layout/Box.stories.tsx b/src/stories/layout/Box.stories.tsx index 795fdf1886..886eed49d0 100644 --- a/src/stories/layout/Box.stories.tsx +++ b/src/stories/layout/Box.stories.tsx @@ -1,12 +1,17 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Box, { BoxProps } from "../../components/Box"; -import pkg from "../../components/Box/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Box, { BoxProps } from '../../components/Box'; +import pkg from '../../components/Box/package.json'; export default { - title: "Components/Layout/Box", + title: 'Components/Layout/Box', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Box, } as Meta; diff --git a/src/stories/layout/Container.stories.tsx b/src/stories/layout/Container.stories.tsx index 31331f8d94..0d0526a195 100644 --- a/src/stories/layout/Container.stories.tsx +++ b/src/stories/layout/Container.stories.tsx @@ -1,14 +1,19 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Container, { ContainerProps } from "../../components/Container"; -import pkg from "../../components/Container/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Container, { ContainerProps } from '../../components/Container'; +import pkg from '../../components/Container/package.json'; export default { - title: "Components/Layout/Container", + title: 'Components/Layout/Container', component: Container, parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` - } + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, + }, } as Meta; const Template: Story = (args: any) => This is a container.; @@ -23,7 +28,7 @@ export const Default = Template.bind({}); */ export const NoPadding = Template.bind({}); NoPadding.args = { - disableGutters: true + disableGutters: true, }; /** @@ -31,5 +36,5 @@ NoPadding.args = { */ export const FixedWidth = Template.bind({}); FixedWidth.args = { - fixed: true + fixed: true, }; diff --git a/src/stories/layout/Grid.stories.tsx b/src/stories/layout/Grid.stories.tsx index 49660597a0..4df9393872 100644 --- a/src/stories/layout/Grid.stories.tsx +++ b/src/stories/layout/Grid.stories.tsx @@ -1,14 +1,19 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Grid, { GridProps } from "../../components/Grid"; -import pkg from "../../components/Grid/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Grid, { GridProps } from '../../components/Grid'; +import pkg from '../../components/Grid/package.json'; export default { - title: "Components/Layout/Grid", + title: 'Components/Layout/Grid', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Grid + component: Grid, } as Meta; const Template: Story = (args: any) => ( @@ -29,7 +34,7 @@ export const Default = Template.bind({}); */ export const ContainerGrid = Template.bind({}); ContainerGrid.args = { - container: true + container: true, }; /** @@ -37,5 +42,5 @@ ContainerGrid.args = { */ export const ZeroMinWidthGrid = Template.bind({}); ZeroMinWidthGrid.args = { - zeroMinWidth: true + zeroMinWidth: true, }; diff --git a/src/stories/layout/GridList.stories.tsx b/src/stories/layout/GridList.stories.tsx index 8f5ac4f02a..ea5a31a9f9 100644 --- a/src/stories/layout/GridList.stories.tsx +++ b/src/stories/layout/GridList.stories.tsx @@ -1,16 +1,21 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import GridListTile from "../../components/GridListTile"; -import GridList, { GridListProps } from "../../components/GridList"; -import pkg from "../../components/GridList/package.json"; -import imageFile from "../assets/logo.svg"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import GridListTile from '../../components/GridListTile'; +import GridList, { GridListProps } from '../../components/GridList'; +import pkg from '../../components/GridList/package.json'; +import imageFile from '../assets/logo.svg'; export default { - title: "Components/Layout/GridList", + title: 'Components/Layout/GridList', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: GridList + component: GridList, } as Meta; const Template: Story = (args: any) => ( diff --git a/src/stories/layout/GridListTile.stories.tsx b/src/stories/layout/GridListTile.stories.tsx index 796fb85ef4..b20f04eb7d 100644 --- a/src/stories/layout/GridListTile.stories.tsx +++ b/src/stories/layout/GridListTile.stories.tsx @@ -1,15 +1,20 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import GridList from "../../components/GridList"; -import GridListTile, { GridListTileProps } from "../../components/GridListTile"; -import pkg from "../../components/GridListTile/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import GridList from '../../components/GridList'; +import GridListTile, { GridListTileProps } from '../../components/GridListTile'; +import pkg from '../../components/GridListTile/package.json'; export default { - title: "Components/Layout/GridList/GridListTile", + title: 'Components/Layout/GridList/GridListTile', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: GridListTile + component: GridListTile, } as Meta; const Template: Story = (args: any) => ( diff --git a/src/stories/layout/GridListTileBar.stories.tsx b/src/stories/layout/GridListTileBar.stories.tsx index a35c569bf3..7bf983d3b0 100644 --- a/src/stories/layout/GridListTileBar.stories.tsx +++ b/src/stories/layout/GridListTileBar.stories.tsx @@ -1,19 +1,24 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import InfoIcon from "@material-ui/icons/Info"; -import IconButton from "../../components/IconButton"; -import GridListTileBar, { GridListTileBarProps } from "../../components/GridListTileBar"; -import GridListTile from "../../components/GridListTile"; -import GridList from "../../components/GridList"; -import pkg from "../../components/GridListTileBar/package.json"; -import imageFile from "../assets/logo.svg"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import InfoIcon from '@material-ui/icons/Info'; +import IconButton from '../../components/IconButton'; +import GridListTileBar, { GridListTileBarProps } from '../../components/GridListTileBar'; +import GridListTile from '../../components/GridListTile'; +import GridList from '../../components/GridList'; +import pkg from '../../components/GridListTileBar/package.json'; +import imageFile from '../assets/logo.svg'; export default { - title: "Components/Layout/GridList/GridListTile/GridListTileBar", + title: 'Components/Layout/GridList/GridListTile/GridListTileBar', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: GridListTileBar + component: GridListTileBar, } as Meta; const Template: Story = (args: any) => ( @@ -25,6 +30,20 @@ const Template: Story = (args: any) => ( ); +// language=JS +const defaultCode = ` + + + The Hague municipality emblem + + + +`; + /** * Default implementation of GridListTileBar. */ @@ -35,36 +54,76 @@ Default.args = { ), - title: "GridListTileBar", - subtitle: "I am a GridListTileBar!" + title: 'GridListTileBar', + subtitle: 'I am a GridListTileBar!', }; +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; + +// language=JS +const topCode = ` + + + The Hague municipality emblem + + + +`; + /** * Implementation with tilebar at top position. */ export const TopPosition = Template.bind({}); TopPosition.args = { - actionIcon: ( - - - - ), - title: "GridListTileBar", - subtitle: "I am GridListTileBar!", - titlePosition: "top" + ...Default.args, + titlePosition: 'top', }; +TopPosition.parameters = { + docs: { + source: { + code: topCode, + }, + }, +}; + +// language=JS +const buttonLeftCode = ` + + + The Hague municipality emblem + + + +`; /** * Implementation with IconButton on the left. */ export const ButtonLeft = Template.bind({}); ButtonLeft.args = { - actionIcon: ( - - - - ), - actionPosition: "left", - title: "GridListTileBar", - subtitle: "I am GridListTileBar!" + ...Default.args, + actionPosition: 'left', +}; +ButtonLeft.parameters = { + docs: { + source: { + code: buttonLeftCode, + }, + }, }; diff --git a/src/stories/layout/Hidden.stories.tsx b/src/stories/layout/Hidden.stories.tsx index 972565b016..c6d525ba1c 100644 --- a/src/stories/layout/Hidden.stories.tsx +++ b/src/stories/layout/Hidden.stories.tsx @@ -1,19 +1,27 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Hidden, { HiddenProps } from "../../components/Hidden"; -import pkg from "../../components/Hidden/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Hidden, { HiddenProps } from '../../components/Hidden'; +import pkg from '../../components/Hidden/package.json'; export default { - title: "Components/Layout/Hidden", + title: 'Components/Layout/Hidden', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Hidden, } as Meta; const Template: Story = (args: any) => ( -

This text is hidden.

+

+ This text can be hidden. Set different "Up" and "Down" properties to true to hide + this text based on screen sizes. +

); diff --git a/src/stories/navigation/Drawer.stories.tsx b/src/stories/navigation/Drawer.stories.tsx index 754805ab07..65d2c4d721 100644 --- a/src/stories/navigation/Drawer.stories.tsx +++ b/src/stories/navigation/Drawer.stories.tsx @@ -1,18 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Drawer, { DrawerProps } from "../../components/Drawer"; -import Button from "../../components/Button"; -import pkg from "../../components/Drawer/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Drawer, DrawerProps } from '../../components/Drawer'; +import Button from '../../components/Button'; +import pkg from '../../components/Drawer/package.json'; export default { - title: "Components/Navigation/Drawer", + title: 'Components/Navigation/Drawer', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Drawer, } as Meta; -const Template: Story = (args: any) => { +const Template: Story = (args: DrawerProps) => { const [state, setState] = React.useState({ open: args.open, }); @@ -23,7 +28,7 @@ const Template: Story = (args: any) => { return (
- + toggleDrawer(false)}> @@ -33,39 +38,160 @@ const Template: Story = (args: any) => { ); }; +// language=JS +const defaultCode = ` +const [state, setState] = React.useState({ + open: false +}); + +const toggleDrawer = (open: boolean) => { + setState({ open: open }); +} + +return ( +
+ + toggleDrawer(false)}> + + + + +
+); +`; + /** * Implementation of Drawer * "open" property is set to true to enforce the Drawer appearing. */ export const Default = Template.bind({}); Default.args = { - open: true, - anchor: "left", + open: false, + anchor: 'left', +}; + +Default.parameters = { + docs: { + source: { + // language=JS + code: defaultCode, + }, + }, }; +// language=JS +const bottomCode = ` +const [state, setState] = React.useState({ + open: false +}); + +const toggleDrawer = (open: boolean) => { + setState({ open: open }); +} + +return ( +
+ + toggleDrawer(false)}> + + + + +
+); +`; + /** * Implementation of Drawer anchored at the bottom. */ export const BottomDrawer = Template.bind({}); BottomDrawer.args = { open: false, - anchor: "bottom", + anchor: 'bottom', +}; + +BottomDrawer.parameters = { + docs: { + source: { + code: bottomCode, + }, + }, }; +// language=JS +const topCode = ` +const [state, setState] = React.useState({ + open: false +}); + +const toggleDrawer = (open: boolean) => { + setState({ open: open }); +} + +return ( +
+ + toggleDrawer(false)}> + + + + +
+); +`; + /** * Implementation of Drawer anchored at the top. */ export const TopDrawer = Template.bind({}); TopDrawer.args = { open: false, - anchor: "top", + anchor: 'top', +}; +TopDrawer.parameters = { + docs: { + source: { + // language=JS + code: topCode, + }, + }, }; +// language=JS +const rightCode = ` +const [state, setState] = React.useState({ + open: false +}); + +const toggleDrawer = (open: boolean) => { + setState({ open: open }); +} + +return ( +
+ + toggleDrawer(false)}> + + + + +
+); +`; + /** * Implementation of Drawer anchored at the right. */ export const RightDrawer = Template.bind({}); RightDrawer.args = { open: false, - anchor: "right", + anchor: 'right', +}; + +RightDrawer.parameters = { + docs: { + source: { + code: rightCode, + }, + }, }; diff --git a/src/stories/navigation/Link.stories.tsx b/src/stories/navigation/Link.stories.tsx index c774367cb5..e05429fc59 100644 --- a/src/stories/navigation/Link.stories.tsx +++ b/src/stories/navigation/Link.stories.tsx @@ -1,18 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Link, { LinkProps } from "../../components/Link"; -import pkg from "../../components/Link/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Link, { LinkProps } from '../../components/Link'; +import pkg from '../../components/Link/package.json'; export default { - title: "Components/Navigation/Link", + title: 'Components/Navigation/Link', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Link, } as Meta; const Template: Story = (args: unknown) => ( - + Click me! ); @@ -21,15 +26,15 @@ export const Default = Template.bind({}); export const NoUnderline = Template.bind({}); NoUnderline.args = { - underline: "none", + underline: 'none', }; export const SecondaryColoured = Template.bind({}); SecondaryColoured.args = { - color: "secondary", + color: 'secondary', }; export const HeaderTwoVariant = Template.bind({}); HeaderTwoVariant.args = { - variant: "h2", + variant: 'h2', }; diff --git a/src/stories/navigation/Menu.stories.tsx b/src/stories/navigation/Menu.stories.tsx index c2c7af85b3..ef9d3d2198 100644 --- a/src/stories/navigation/Menu.stories.tsx +++ b/src/stories/navigation/Menu.stories.tsx @@ -1,16 +1,21 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Menu, { MenuProps } from "../../components/Menu"; -import MenuItem from "../../components/MenuItem"; -import Button from "../../components/Button/Button"; -import pkg from "../../components/Menu/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Menu, MenuProps } from '../../components/Menu'; +import MenuItem from '../../components/MenuItem'; +import pkg from '../../components/Menu/package.json'; +import Button from '../../components/Button/Button'; export default { - title: "Components/Navigation/Menu", + title: 'Components/Navigation/Menu', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Menu + component: Menu, } as Meta; const opened = false; @@ -28,13 +33,11 @@ const Template: Story = (args: any) => { - + -

The "open" property is set to true to force the menu to be visible for demo purposes.

+

+ Set the "open" property to true to force the menu to open. +

Click me! @@ -50,20 +53,108 @@ const Template: Story = (args: any) => { ); }; +// language=JS +const defaultCode = ` +const [anchorEl, setAnchorEl] = React.useState(null); +const handleClick = (event) => { setAnchorEl(event.currentTarget); }; +const handleClose = () => { setAnchorEl(null); }; + +return ( +
+ + + +

Set the "open" property to + true + to force the menu to open. +

+ + + Click me! + + + Or me! + + + Or me! + + +
+); +`; + /** * Default implementation of the Menu component. * "open" property is set to true to force the menu's visibility for demo purposes. */ export const Default = Template.bind({}); Default.args = { - open: opened + open: opened, +}; + +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, }; +// language=JS +const menuCode = ` +const [anchorEl, setAnchorEl] = React.useState(null); +const handleClick = (event) => { setAnchorEl(event.currentTarget); }; +const handleClose = () => { setAnchorEl(null); }; + +return ( +
+ + + +

Set the "open" property to + true + to force the menu to open. +

+ + + Click me! + + + Or me! + + + Or me! + + +
+); +`; + /** * Menu implemented with 'Menu' variant. */ export const MenuVariant = Template.bind({}); MenuVariant.args = { open: opened, - variant: "menu" + variant: 'menu', +}; + +MenuVariant.parameters = { + docs: { + source: { + // language=JS + code: menuCode, + }, + }, }; diff --git a/src/stories/navigation/MenuItem.stories.tsx b/src/stories/navigation/MenuItem.stories.tsx index 3520325a42..b1123f2808 100644 --- a/src/stories/navigation/MenuItem.stories.tsx +++ b/src/stories/navigation/MenuItem.stories.tsx @@ -1,16 +1,21 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import MenuItem, { MenuItemProps } from "../../components/MenuItem"; -import Menu from "../../components/Menu"; -import pkg from "../../components/MenuItem/package.json"; -import Button from "../../components/Button/Button"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import MenuItem, { MenuItemProps } from '../../components/MenuItem'; +import Menu from '../../components/Menu'; +import pkg from '../../components/MenuItem/package.json'; +import Button from '../../components/Button/Button'; export default { - title: "Components/Navigation/Menu/MenuItem", + title: 'Components/Navigation/Menu/MenuItem', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: MenuItem + component: MenuItem, } as Meta; const Template: Story = (args: any) => { @@ -45,7 +50,7 @@ export const Default = Template.bind({}); */ export const DenseMenu = Template.bind({}); DenseMenu.args = { - dense: true + dense: true, }; /** @@ -53,5 +58,5 @@ DenseMenu.args = { */ export const DisabledGutter = Template.bind({}); DisabledGutter.args = { - disableGutters: true + disableGutters: true, }; diff --git a/src/stories/navigation/MenuList.stories.tsx b/src/stories/navigation/MenuList.stories.tsx index e8870f168f..047c49ab3b 100644 --- a/src/stories/navigation/MenuList.stories.tsx +++ b/src/stories/navigation/MenuList.stories.tsx @@ -1,13 +1,18 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import MenuList, { MenuListProps } from "../../components/MenuList"; -import MenuItem from "../../components/MenuItem"; -import pkg from "../../components/MenuList/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import MenuList, { MenuListProps } from '../../components/MenuList'; +import MenuItem from '../../components/MenuItem'; +import pkg from '../../components/MenuList/package.json'; export default { - title: "Components/Navigation/Menu/MenuList", + title: 'Components/Navigation/Menu/MenuList', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: MenuList, } as Meta; @@ -30,5 +35,5 @@ export const Default = Template.bind({}); */ export const MenuVariant = Template.bind({}); MenuVariant.args = { - variant: "menu", + variant: 'menu', }; diff --git a/src/stories/navigation/Stepper.stories.tsx b/src/stories/navigation/Stepper.stories.tsx index b8b775e76d..05e4654741 100644 --- a/src/stories/navigation/Stepper.stories.tsx +++ b/src/stories/navigation/Stepper.stories.tsx @@ -1,15 +1,20 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Stepper, { StepperProps } from "../../components/Stepper"; -import Step from "../../components/Step"; -import StepLabel from "../../components/StepLabel"; -import StepContent from "../../components/StepContent"; -import pkg from "../../components/Stepper/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Stepper, { StepperProps } from '../../components/Stepper'; +import Step from '../../components/Step'; +import StepLabel from '../../components/StepLabel'; +import StepContent from '../../components/StepContent'; +import pkg from '../../components/Stepper/package.json'; export default { - title: "Components/navigation/Stepper", + title: 'Components/navigation/Stepper', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: Stepper, } as Meta; @@ -60,7 +65,7 @@ Default.args = { export const VerticalOrientation = Template.bind({}); VerticalOrientation.args = { activeStep: 0, - orientation: "vertical", + orientation: 'vertical', }; /** diff --git a/src/stories/navigation/SwipeableDrawer.stories.tsx b/src/stories/navigation/SwipeableDrawer.stories.tsx index 85c41a27b9..32e7b3ba2a 100644 --- a/src/stories/navigation/SwipeableDrawer.stories.tsx +++ b/src/stories/navigation/SwipeableDrawer.stories.tsx @@ -1,13 +1,18 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import SwipeableDrawer, { SwipeableDrawerProps } from "../../components/SwipeableDrawer"; -import Button from "../../components/Button"; -import pkg from "../../components/SwipeableDrawer/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import SwipeableDrawer, { SwipeableDrawerProps } from '../../components/SwipeableDrawer'; +import Button from '../../components/Button'; +import pkg from '../../components/SwipeableDrawer/package.json'; export default { - title: "Components/Navigation/SwipeableDrawer", + title: 'Components/Navigation/SwipeableDrawer', parameters: { componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, component: SwipeableDrawer, } as Meta; @@ -37,5 +42,5 @@ const Template: Story = (args: any) => { */ export const Default = Template.bind({}); Default.args = { - open: true, + open: false, }; diff --git a/src/stories/navigation/Tab.stories.tsx b/src/stories/navigation/Tab.stories.tsx index 08eee348bc..2aa4a65f98 100644 --- a/src/stories/navigation/Tab.stories.tsx +++ b/src/stories/navigation/Tab.stories.tsx @@ -1,17 +1,22 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Tab, { TabProps } from "../../components/Tab"; -import TabContext from "../../components/TabContext"; -import Tabs from "../../components/Tabs"; -import TabPanel from "../../components/TabPanel"; -import pkg from "../../components/Tab/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Tab, { TabProps } from '../../components/Tab'; +import pkg from '../../components/Tab/package.json'; +import TabContext from '../../components/TabContext'; +import Tabs from '../../components/Tabs'; +import TabPanel from '../../components/TabPanel'; export default { - title: "Components/Navigation/Tabs/Tab", + title: 'Components/Navigation/Tabs/Tab', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Tab + component: Tab, } as Meta; const Template: Story = (args: any) => { @@ -36,38 +41,152 @@ const Template: Story = (args: any) => { ); }; +// language=JS +const defaultCode = ` +const [value, setValue] = React.useState(0); + +return ( + + , newValue: number) => { + setValue(newValue); + }}> + + + + + Item One + Item Two + Item Three + +); +`; + /** * Implementation of Tab */ export const Default = Template.bind({}); Default.args = { - label: "A tab" + label: 'A tab', +}; + +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, }; +// language=JS +const disabledCode = ` +const [value, setValue] = React.useState(0); + +return ( + + , newValue: number) => { + setValue(newValue); + }}> + + + + + Item One + Item Two + Item Three + +); +`; + /** * Implementation of Tab which is disabled */ export const Disabled = Template.bind({}); Disabled.args = { - label: "A disabled tab", - disabled: true + label: 'A disabled tab', + disabled: true, +}; + +Disabled.parameters = { + docs: { + source: { + code: disabledCode, + }, + }, }; +// language=JS +const disabledRippleCode = ` +const [value, setValue] = React.useState(0); + +return ( + + , newValue: number) => { + setValue(newValue); + }}> + + + + + Item One + Item Two + Item Three + +); +`; + /** * Implementation of Tab without a ripple effect. */ export const DisabledRipple = Template.bind({}); DisabledRipple.args = { - label: "A disabled ripple tab", + label: 'A disabled ripple tab', disableRipple: true, - disableFocusRipple: true + disableFocusRipple: true, +}; + +DisabledRipple.parameters = { + docs: { + source: { + // language=JS + code: disabledRippleCode, + }, + }, }; +// language=JS +const wrappedCode = ` +const [value, setValue] = React.useState(0); + +return ( + + , newValue: number) => { + setValue(newValue); + }}> + + + + + Item One + Item Two + Item Three + +); +`; + /** * Implementation of Tab with wrapped labels */ export const Wrapped = Template.bind({}); Wrapped.args = { - label: "This label is very long since it needs to be wrapped around the tab", - wrapped: true + label: 'This label is very long since it needs to be wrapped around the tab', + wrapped: true, +}; + +Wrapped.parameters = { + docs: { + source: { + // language=JS + code: wrappedCode, + }, + }, }; diff --git a/src/stories/navigation/Tabs.stories.tsx b/src/stories/navigation/Tabs.stories.tsx index cf36297d32..318d581d6b 100644 --- a/src/stories/navigation/Tabs.stories.tsx +++ b/src/stories/navigation/Tabs.stories.tsx @@ -1,18 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Tabs, { TabsProps } from "../../components/Tabs"; -import Tab from "../../components/Tab/Tab"; -import TabContext from "../../components/TabContext"; -import AppBar from "../../components/AppBar"; -import TabPanel from "../../components/TabPanel"; -import pkg from "../../components/Tabs/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Tabs, { TabsProps } from '../../components/Tabs'; +import Tab from '../../components/Tab/Tab'; +import TabContext from '../../components/TabContext'; +import AppBar from '../../components/AppBar'; +import TabPanel from '../../components/TabPanel'; +import pkg from '../../components/Tabs/package.json'; export default { - title: "Components/Navigation/Tabs", + title: 'Components/Navigation/Tabs', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Tabs + component: Tabs, } as Meta; const Template: Story = (args: any) => { @@ -53,7 +58,7 @@ export const Default = Template.bind({}); */ export const VerticalOrientation = Template.bind({}); VerticalOrientation.args = { - orientation: "vertical" + orientation: 'vertical', }; /** @@ -61,7 +66,7 @@ VerticalOrientation.args = { */ export const SecondaryColouredText = Template.bind({}); SecondaryColouredText.args = { - textColor: "secondary" + textColor: 'secondary', }; /** @@ -69,5 +74,5 @@ SecondaryColouredText.args = { */ export const SecondaryColouredIndicator = Template.bind({}); SecondaryColouredIndicator.args = { - indicatorColor: "secondary" + indicatorColor: 'secondary', }; diff --git a/src/stories/surfaces/Accordion.stories.tsx b/src/stories/surfaces/Accordion.stories.tsx index 5006e09f77..40c2377a91 100644 --- a/src/stories/surfaces/Accordion.stories.tsx +++ b/src/stories/surfaces/Accordion.stories.tsx @@ -1,18 +1,23 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import { ExpandMore } from "@material-ui/icons"; -import Accordion, { AccordionProps } from "../../components/Accordion"; -import AccordionSummary from "../../components/AccordionSummary"; -import Typography from "../../components/Typography"; -import AccordionDetails from "../../components/AccordionDetails"; -import pkg from "../../components/Accordion/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { ExpandMore } from '@material-ui/icons'; +import Accordion, { AccordionProps } from '../../components/Accordion'; +import AccordionSummary from '../../components/AccordionSummary'; +import Typography from '../../components/Typography'; +import AccordionDetails from '../../components/AccordionDetails'; +import pkg from '../../components/Accordion/package.json'; export default { - title: "Components/Surfaces/Accordion", + title: 'Components/Surfaces/Accordion', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Accordion + component: Accordion, } as Meta; const Template: Story = (args: any) => ( @@ -29,31 +34,127 @@ const Template: Story = (args: any) => ( ); +// language=JS +const defaultCode = ` + + }> + Click me to collapse me! + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo + lobortis eget. + + + +`; + /** * Implementation of Accordion */ export const Default = Template.bind({}); +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, +}; + +// language=JS +const defaultExpandedCode = ` + + }> + Click me to collapse me! + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit + leo + lobortis eget. + + + +`; /** * A tab which is expanded by default */ export const DefaultExpanded = Template.bind({}); DefaultExpanded.args = { - defaultExpanded: true + defaultExpanded: true, }; +DefaultExpanded.parameters = { + docs: { + source: { + code: defaultExpandedCode, + }, + }, +}; + +// language=JS +const disabledCode = ` + + }> + Click me to collapse me! + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit + leo + lobortis eget. + + + +`; + /** * A disabled Accordion */ export const Disabled = Template.bind({}); Disabled.args = { - disabled: true + disabled: true, }; +Disabled.parameters = { + docs: { + source: { + // language=JS + code: disabledCode, + }, + }, +}; + +// language=JS +const squaredCode = ` + + }> + Click me to collapse me! + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit + leo + lobortis eget. + + + +`; + /** * An Accordion component with square edges. */ export const Squared = Template.bind({}); Squared.args = { - square: true + square: true, +}; + +Squared.parameters = { + docs: { + source: { + // language=JS + code: squaredCode, + }, + }, }; diff --git a/src/stories/surfaces/AppBar.stories.tsx b/src/stories/surfaces/AppBar.stories.tsx index 60fbe7dfa1..bfcb3cef94 100644 --- a/src/stories/surfaces/AppBar.stories.tsx +++ b/src/stories/surfaces/AppBar.stories.tsx @@ -1,19 +1,24 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import MenuIcon from "@material-ui/icons/Menu"; -import AppBar, { AppBarProps } from "../../components/AppBar"; -import Toolbar from "../../components/Toolbar/Toolbar"; -import IconButton from "../../components/IconButton"; -import Typography from "../../components/Typography"; -import Button from "../../components/Button"; -import pkg from "../../components/AppBar/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import MenuIcon from '@material-ui/icons/Menu'; +import { AppBar, AppBarProps } from '../../components/AppBar'; +import pkg from '../../components/AppBar/package.json'; +import Toolbar from '../../components/Toolbar/Toolbar'; +import IconButton from '../../components/IconButton'; +import Typography from '../../components/Typography'; +import Button from '../../components/Button'; export default { - title: "Components/Surfaces/AppBar", + title: 'Components/Surfaces/AppBar', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: AppBar + component: AppBar, } as Meta; const Template: Story = (args: any) => { @@ -30,27 +35,89 @@ const Template: Story = (args: any) => { ); }; +// language=JS +const defaultCode = ` + + + + + + News + + + +`; + /** * Implementation of AppBar */ export const Default = Template.bind({}); Default.args = { - position: "relative" + position: 'relative', +}; + +Default.parameters = { + docs: { + source: { + code: defaultCode, + }, + }, }; +// language=JS +const staticCode = ` + + + + + + News + + + +`; + /** * Statically positioned AppBar */ export const StaticPosition = Template.bind({}); StaticPosition.args = { - position: "static" + position: 'static', }; +StaticPosition.parameters = { + docs: { + source: { + code: staticCode, + }, + }, +}; + +// language=JS +const secondaryCode = ` + + + + + + News + + + +`; + /** * A statically coloured AppBar */ export const SecondaryColoured = Template.bind({}); SecondaryColoured.args = { - position: "static", - color: "secondary" + position: 'static', + color: 'secondary', +}; +SecondaryColoured.parameters = { + docs: { + source: { + code: secondaryCode, + }, + }, }; diff --git a/src/stories/surfaces/Card.stories.tsx b/src/stories/surfaces/Card.stories.tsx index 2a08684989..8ec7b4c111 100644 --- a/src/stories/surfaces/Card.stories.tsx +++ b/src/stories/surfaces/Card.stories.tsx @@ -1,24 +1,29 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import FavoriteIcon from "@material-ui/icons/Favorite"; -import ShareIcon from "@material-ui/icons/Share"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import MoreVertIcon from "@material-ui/icons/MoreVert"; -import Card, { CardProps } from "../../components/Card"; -import CardActions from "../../components/CardActions"; -import CardContent from "../../components/CardContent"; -import CardHeader from "../../components/CardHeader"; -import Typography from "../../components/Typography"; -import Avatar from "../../components/Avatar"; -import IconButton from "../../components/IconButton"; -import pkg from "../../components/Card/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import pkg from '../../components/Card/package.json'; +import Card, { CardProps } from '../../components/Card'; +import CardActions from '../../components/CardActions'; +import CardContent from '../../components/CardContent'; +import CardHeader from '../../components/CardHeader'; +import Typography from '../../components/Typography'; +import { Avatar } from '../../components/Avatar'; +import { IconButton } from '../../components/IconButton'; export default { - title: "Components/Surfaces/Card", + title: 'Components/Surfaces/Card', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Card + component: Card, } as Meta; const Template: Story = (args: any) => ( @@ -53,15 +58,98 @@ const Template: Story = (args: any) => ( ); +// language=JS +const defaultCode = ` + + R} + action={ + + + + } + title='Shrimp and Chorizo Paella' + subheader='September 14, 2016'> + + + This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of + frozen peas along with the mussels, if you like. + + + + + + + + + + + + + + + +`; + /** * Implementation of Card */ export const Default = Template.bind({}); +Default.parameters = { + docs: { + source: { + // language=JS + code: defaultCode, + }, + }, +}; + +// language=JS +const raisedCode = ` + + R} + action={ + + + + } + title='Shrimp and Chorizo Paella' + subheader='September 14, 2016'> + + + This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 + cup of + frozen peas along with the mussels, if you like. + + + + + + + + + + + + + + + +`; /** * Raised variant of Card component */ export const Raised = Template.bind({}); Raised.args = { - raised: true + raised: true, +}; +Raised.parameters = { + docs: { + source: { + // language=JS + code: raisedCode, + }, + }, }; diff --git a/src/stories/surfaces/Paper.stories.tsx b/src/stories/surfaces/Paper.stories.tsx index 6f145e1bd7..c7e4298143 100644 --- a/src/stories/surfaces/Paper.stories.tsx +++ b/src/stories/surfaces/Paper.stories.tsx @@ -1,15 +1,20 @@ -import React from "react"; -import { Meta, Story } from "@storybook/react"; -import Paper, { PaperProps } from "../../components/Paper"; -import Typography from "../../components/Typography"; -import pkg from "../../components/Paper/package.json"; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Paper, { PaperProps } from '../../components/Paper'; +import Typography from '../../components/Typography'; +import pkg from '../../components/Paper/package.json'; export default { - title: "Components/Surfaces/Paper", + title: 'Components/Surfaces/Paper', parameters: { - componentSubtitle: `${pkg.name} - ${pkg.version}` + componentSubtitle: `${pkg.name} - ${pkg.version}`, + docs: { + source: { + type: 'dynamic', + }, + }, }, - component: Paper + component: Paper, } as Meta; const Template: Story = (args: any) => ( @@ -28,7 +33,7 @@ export const Default = Template.bind({}); */ export const Outlined = Template.bind({}); Outlined.args = { - variant: "outlined" + variant: 'outlined', }; /** @@ -36,7 +41,7 @@ Outlined.args = { */ export const Squared = Template.bind({}); Squared.args = { - square: true + square: true, }; /** @@ -44,5 +49,5 @@ Squared.args = { */ export const MaxElevated = Template.bind({}); MaxElevated.args = { - elevation: 24 + elevation: 24, };