Storybook show code fix

.storybook/preview.js

@@ -1,3 +1,4 @@
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  format: false
 };

src/stories/datadisplay/Avatar.stories.tsx

@@ -1,17 +1,22 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import Avatar, { AvatarProps } from "../../components/Avatar";
+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",
   parameters: {
-    componentSubtitle: `${pkg.name} - ${pkg.version}`
+    componentSubtitle: `${pkg.name} - ${pkg.version}`,
+    docs: {
+      source: {
+        type: "dynamic"
+      }
+    }
   },
   component: Avatar
 } as Meta;
 
-const Template: Story<AvatarProps> = (args: any) => <Avatar {...args} />;
+const Template: Story<AvatarProps> = (args: AvatarProps) => <Avatar {...args} />;
 
 /**
  * Implementation of Avatar

src/stories/datadisplay/AvatarGroup.stories.tsx

@@ -1,18 +1,23 @@
 import React from "react";
-import { Meta, Story } from "@storybook/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",
   parameters: {
-    componentSubtitle: `${pkg.name} - ${pkg.version}`
+    componentSubtitle: `${pkg.name} - ${pkg.version}`,
+    docs: {
+      source: {
+        type: "dynamic"
+      }
+    }
   },
   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>DH</Avatar>

src/stories/datadisplay/Badge.stories.tsx

@@ -1,54 +1,94 @@
-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
-} as Meta;
+} as Meta
 
-const Template: Story<BadgeProps> = (args: any) => (
+const Template: Story<BadgeProps> = (args: BadgeProps) => (
   <Badge {...args}>
     <MailIcon />
   </Badge>
-);
+)
 
 /**
  * Implementation of Badge
  */
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   badgeContent: 4
-};
+}
+
+Default.parameters = {
+  docs: {
+    source: {
+      // language=HTML
+      code: `<Badge badgeContent={4}><MailIcon /></Badge>`
+    }
+  }
+}
 
 /**
  * Badge having the primary colour.
  */
-export const PrimaryColoured = Template.bind({});
+export const PrimaryColoured = Template.bind({})
 PrimaryColoured.args = {
-  color: "primary",
+  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({});
+export const CircleOverlap = Template.bind({})
 CircleOverlap.args = {
-  overlap: "circle",
+  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({});
+export const DotVariant = Template.bind({})
 DotVariant.args = {
-  variant: "dot",
+  variant: 'dot',
   ...PrimaryColoured.args
-};
+}
+
+DotVariant.parameters = {
+  docs: {
+    source: {
+      code: `<Badge badgeContent={4} color={'primary'} variant={'dot'}><MailIcon /></Badge>`
+    }
+  }
+}

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 { Divider, DividerProps } from "../../components/Divider";
 import pkg from "../../components/Divider/package.json";
-import List, { ListItem, ListItemIcon, ListItemText } from "../../components/List";
+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",
   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,
+    },
+  },
 };