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 <maarten.carsjens@gxsoftware.com>
nl-design-system · May 8, 2021 · 8b5a96c · 8b5a96c
1 parent 1c607de
commit 8b5a96c
Show file tree

Hide file tree

Showing 40 changed files with 1,900 additions and 497 deletions.
diff --git 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
@@ -1,33 +1,38 @@
-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<AvatarProps> = (args: any) => <Avatar {...args} />;
+const Template: Story<AvatarProps> = (args: AvatarProps) => <Avatar {...args} />;
 
 /**
  * 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',
 };
 
 /**
  * Implementation of Avatar using a Letter
  */
 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
@@ -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<AvatarGroupProps> = (args: any) => (
+const Template: Story<AvatarGroupProps> = (args: AvatarGroupProps) => (
   <AvatarGroup {...args}>
-    <Avatar src={"https://c1.staticflickr.com/9/8486/8245351490_2746ef972c_b.jpg"} alt="Planet Earth" />
+    <Avatar src={'https://c1.staticflickr.com/9/8486/8245351490_2746ef972c_b.jpg'} alt="Planet Earth" />
     <Avatar>DH</Avatar>
     <Avatar
-      src={"https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/the-portal-aged-pixel.jpg"}
+      src={'https://images.fineartamerica.com/images/artworkimages/mediumlarge/1/the-portal-aged-pixel.jpg'}
       alt="Woman staring into a portal"
     />
   </AvatarGroup>
@@ -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
@@ -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<BadgeProps> = (args: any) => (
+const Template: Story<BadgeProps> = (args: BadgeProps) => (
   <Badge {...args}>
     <MailIcon />
   </Badge>
@@ -23,32 +28,67 @@ const Template: Story<BadgeProps> = (args: any) => (
  */
 export const Default = Template.bind({});
 Default.args = {
-  badgeContent: 4
+  badgeContent: 4,
+};
+
+Default.parameters = {
+  docs: {
+    source: {
+      // language=HTML
+      code: `<Badge badgeContent={4}><MailIcon /></Badge>`,
+    },
+  },
 };
 
 /**
  * Badge having the primary colour.
  */
 export const PrimaryColoured = Template.bind({});
 PrimaryColoured.args = {
-  color: "primary",
-  ...Default.args
+  color: 'primary',
+  ...Default.args,
+};
+
+PrimaryColoured.parameters = {
+  docs: {
+    source: {
+      // language=HTML
+      code: `<Badge badgeContent={4} color={'primary'}><MailIcon /></Badge>`,
+    },
+  },
 };
 
 /**
  * Badge with circled overlap.
  */
 export const CircleOverlap = Template.bind({});
 CircleOverlap.args = {
-  overlap: "circle",
-  ...PrimaryColoured.args
+  overlap: 'circle',
+  ...PrimaryColoured.args,
+};
+
+CircleOverlap.parameters = {
+  docs: {
+    source: {
+      // language=HTML
+      code: `<Badge badgeContent={4} color={'primary'} overlap={'circle'}><MailIcon /></Badge>`,
+    },
+  },
 };
 
 /**
  * Badge using the dot variant.
  */
 export const DotVariant = Template.bind({});
 DotVariant.args = {
-  variant: "dot",
-  ...PrimaryColoured.args
+  variant: 'dot',
+  ...PrimaryColoured.args,
+};
+
+DotVariant.parameters = {
+  docs: {
+    source: {
+      code: `<Badge badgeContent={4} color={'primary'} variant={'dot'}><MailIcon /></Badge>`,
+    },
+  },
 };
diff --git 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<DividerProps> = (args: any) => (
+const Template: Story<DividerProps> = (args: DividerProps) => (
   <List>
     <ListItem button>
       <ListItemIcon>
@@ -32,31 +37,135 @@ const Template: Story<DividerProps> = (args: any) => (
   </List>
 );
 
+// language=JS
+const defaultCode = `
+<List>
+  <ListItem button>
+    <ListItemIcon>
+      <InboxIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am above the divider."/>
+  </ListItem>
+  <Divider/>
+  <ListItem button>
+    <ListItemIcon>
+      <DraftsIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am under the divider."/>
+  </ListItem>
+</List>
+`;
+
+// language=JS
+const insetCode = `
+<List>
+  <ListItem button>
+    <ListItemIcon>
+      <InboxIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am above the divider."/>
+  </ListItem>
+  <Divider variant="inset"/>
+  <ListItem button>
+    <ListItemIcon>
+      <DraftsIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am under the divider."/>
+  </ListItem>
+</List>
+`;
+
+// language=JS
+const lightCode = `
+<List>
+  <ListItem button>
+    <ListItemIcon>
+      <InboxIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am above the divider."/>
+  </ListItem>
+  <Divider light/>
+  <ListItem button>
+    <ListItemIcon>
+      <DraftsIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am under the divider."/>
+  </ListItem>
+</List>
+`;
+
+// language=JS
+const absoluteCode = `
+<List>
+  <ListItem button>
+    <ListItemIcon>
+      <InboxIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am above the divider."/>
+  </ListItem>
+  <Divider absolute/>
+  <ListItem button>
+    <ListItemIcon>
+      <DraftsIcon/>
+    </ListItemIcon>
+    <ListItemText primary="I am under the divider."/>
+  </ListItem>
+</List>
+`;
+
 /**
  * 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,
+    },
+  },
 };
 
 /**
  * Divider with a lighter colour.
  */
 export const LightColoured = Template.bind({});
 LightColoured.args = {
-  light: true
+  light: true,
+};
+LightColoured.parameters = {
+  docs: {
+    source: {
+      code: lightCode,
+    },
+  },
 };
 
 /**
  * Divider with an absolute position.
  */
 export const AbsolutePosition = Template.bind({});
 AbsolutePosition.args = {
-  absolute: true
+  absolute: true,
+};
+AbsolutePosition.parameters = {
+  docs: {
+    source: {
+      code: absoluteCode,
+    },
+  },
 };