ENH Storybook Doc Blocks

.storybook/main.js

@@ -29,7 +29,8 @@ const config = {
     storyStoreV7: false
   },
   docs: {
-    autodocs: "tag"
+    autodocs: "tag",
+    defaultName: 'Documentation',
   },
   webpackFinal: async (config) => {
     return {

client/src/components/ActionMenu/tests/ActionMenu-story.js

@@ -4,6 +4,22 @@ import { DropdownItem } from 'reactstrap';
 
 export default {
   title: 'Admin/ActionMenu',
+  component: ActionMenu,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'ActionMenu Component description.'
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+      controls: {
+        sort: 'alpha',
+      }
+    }
+  },
+  argTypes: {}
 };
 
 export const Single = () => (

client/src/components/Badge/tests/Badge-story.js

@@ -3,30 +3,60 @@ import { jsxDecorator } from 'storybook-addon-jsx';
 import Badge, { statuses } from 'components/Badge/Badge';
 
 export default {
-  title: 'Admin/Badges',
+  title: 'Admin/Badges/Badge',
   component: Badge,
   decorators: [
-    jsxDecorator,
-    (Story) => <div><Story/></div>
+    jsxDecorator
   ],
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Badge component for displaying a message in a Bootstrap "badge" style.'
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+    }
+  },
   argTypes: {
+    message: {
+      description: 'The string to display in the badge.',
+      control: 'text',
+    },
     status: {
+      description: "The status for the badge, takes bootstrap's values.",
       control: 'select',
-      options: statuses
+      options: statuses,
+      table: {
+        type: { summary: 'success, warning, danger, info, default' },
+        defaultValue: { summary: 'default' },
+      }
     },
     inverted: {
-      control: 'boolean'
+      description: 'If the colours should be inverted.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
     },
     className: {
+      description: 'Any extra classes to apply for the badge.',
       control: 'inline-radio',
       options: {
         'Empty class name': '',
         'badge-pill class name': 'badge-pill'
-      }
+      },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'badge-pill' },
+      },
     }
   }
 };
 
+/** Test message */
 export const _Badge = {
   args: {
     message: 'Hello World!',

client/src/components/Breadcrumb/tests/Breadcrumb-story.js

@@ -63,25 +63,68 @@ export default {
   decorators: [
     jsxDecorator
   ],
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'The breadcrumbs for the current section of the CMS.'
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+      controls: {
+        sort: 'alpha',
+      }
+    }
+  },
   argTypes: {
-    levels: {
+    href: {
+      table: {
+        type: { summary: 'string' },
+      }
+    },
+    text: {
+      table: {
+        type: { summary: 'string' },
+      }
+    },
+    crumbs: {
+      description: 'An array of objects, each object should have a `text` and `href` key.',
+      table: {
+        type: { summary: 'array' },
+      }
+    },
+    level: {
       control: 'select',
-      options: levels
+      options: levels,
+      table: {
+        type: { summary: 'string' },
+      },
     },
-    icons: {
+    icon: {
+      description: 'The font icon font name.',
       control: 'select',
-      options: icons
+      options: icons,
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    icons: {
+      description: 'Array of icons',
+      table: {
+        type: { summary: 'array' },
+      },
     },
   },
   args: {
-    levels: 'First',
-    icons: ''
+    level: 'First',
+    icon: ''
   }
 };
 
 export const _Breadcrumb = (args) => {
   // eslint-disable-next-line no-shadow
-  const { levels, icons } = args;
-  return (<Breadcrumb crumbs={buildBreadCrumb(0, levels, icons)}/>);
+  const { level, icon } = args;
+  return (<Breadcrumb crumbs={buildBreadCrumb(0, level, icon)}/>);
 };
 

client/src/components/Button/tests/BackButton-story.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { jsxDecorator } from 'storybook-addon-jsx';
+import { action } from '@storybook/addon-actions';
+import BackButton from '../BackButton';
+
+const colors = [
+  'primary',
+  'secondary',
+  'success',
+  'info',
+  'warning',
+  'danger',
+  'link',
+];
+const sizes = ['sm', 'md', 'lg'];
+const icons = [
+  '',
+  'search',
+  'sync',
+  'plus-circled',
+  'cancel-circled',
+  'check-mark',
+  'edit',
+];
+
+const onClick = (event) => {
+  event.preventDefault();
+  return action('onClick')(event);
+};
+onClick.toString = () => 'onClick';
+
+export default {
+  title: 'Admin/Buttons/BackButton',
+  component: BackButton,
+  decorators: [
+    jsxDecorator
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Generic Button component to allow users to return to a preview view. It displays a `<` icon and has an appropriate `aria-label.'
+      },
+      canvas: {
+        sourceState: 'shown',
+      },
+      controls: {
+        sort: 'alpha',
+      }
+    }
+  },
+  argTypes: {
+    children: {
+      description: "If present, any nested content inside the button will apply to the `aria-label` attribute. Otherwise, the localised string 'Back' will be used.",
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    className: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      }
+    },
+    onClick: {
+      action: 'clicked',
+      table: {
+        type: { summary: 'function' },
+      }
+    }
+  }
+};
+
+export const _BackButton = (args) => <BackButton {...args}/>;
+_BackButton.args = {
+  onClick,
+  className: '',
+  children: 'Back'
+};