Adds autodocs to new design system

Also refactors some older components to use newer
Storybook components.

.storybook/main.js

@@ -46,7 +46,8 @@ module.exports = {
     };
   },
   docsPage: {
-    docs: 'automatic',
+    autodocs: 'tag',
+    defaultName: 'Documentation',
   },
   staticDirs: ['../public'],
 };

.storybook/preview.js

@@ -2,6 +2,14 @@
 import 'resize-observer-polyfill';
 
 import providersDecorator from './providersDecorator';
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks';
 import { MockedProvider } from '@apollo/client/testing';
 
 // Import design system component styles for our Stories.
@@ -15,6 +23,18 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  docs: {
+    page: () => (
+      <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Primary />
+        <Controls />
+        <Stories />
+      </>
+    ),
+  },
   apolloClient: {
     MockedProvider,
     // any props you want to pass to MockedProvider on every story

src/design-system/components/Badge/Badge.stories.tsx

@@ -1,16 +1,15 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Badge from './Badge';
 
 export default {
   title: 'Design-System/Badge',
   component: Badge,
-} as ComponentMeta<typeof Badge>;
+  tags: ['autodocs'],
+} as Meta;
 
-const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  children: 'Primary badge',
+export const Default: StoryObj<typeof Badge> = {
+  render: () => {
+    return <Badge>Badge</Badge>;
+  },
 };

src/design-system/components/Button/Button.stories.tsx

@@ -1,40 +1,55 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import Button from './Button';
 import Icon from '../Icon/Icon';
 
 export default {
   title: 'Design-System/Button',
   component: Button,
+  tags: ['autodocs'],
+  args: {
+    variant: 'primary',
+    htmlElement: 'button',
+    href: 'www.google.com',
+  },
   argTypes: {
-    children: { table: { disable: true } },
-    variant: { table: { disable: true } },
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+    htmlElement: {
+      options: ['button', 'a'],
+      control: { type: 'radio' },
+    },
+    href: {
+      control: 'text',
+      description: 'Only required when using the button as a link',
+    },
   },
-  args: { href: 'www.google.com' },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+} as Meta;
 
-export const Primary = Template.bind({});
-
-Primary.args = {
-  children: <span>Primary button</span>,
-  variant: 'primary',
-  htmlElement: 'button',
+export const Primary: StoryObj<typeof Button> = {
+  render: (args) => {
+    return <Button {...args}>Primary</Button>;
+  },
 };
 
-export const Secondary = Template.bind({});
-
-Secondary.args = {
-  children: 'Secondary button',
-  variant: 'secondary',
-  htmlElement: 'button',
+export const Secondary: StoryObj<typeof Button> = {
+  render: () => {
+    return (
+      <Button variant="secondary" htmlElement="button">
+        Secondary
+      </Button>
+    );
+  },
 };
 
-export const WithIcon = Template.bind({});
-
-WithIcon.args = {
-  children: <Icon icon="xmark" size="small" />,
-  variant: 'secondary',
-  htmlElement: 'button',
+export const WithIcon: StoryObj<typeof Button> = {
+  render: () => {
+    return (
+      <Button variant="secondary" htmlElement="button">
+        <Icon icon="xmark" size="small" />
+      </Button>
+    );
+  },
 };

src/design-system/components/Icon/Icon.stories.tsx

@@ -4,6 +4,7 @@ import Icon from './Icon';
 
 export default {
   title: 'Design-System/Icon',
+  tags: ['autodocs'],
   component: Icon,
   args: {
     icon: 'list',

src/design-system/components/InputField/InputField.stories.tsx

@@ -9,6 +9,7 @@ export default {
   args: {
     placeholder: 'Enter a location e.g. London',
   },
+  tags: ['autodocs'],
   parameters: {
     iframeHeight: 200,
     docs: {

src/design-system/components/RadioInput/RadioInput.stories.tsx

@@ -4,7 +4,6 @@ import Radio from './RadioInput';
 
 export default {
   title: 'Design-System/Form Elements/Radio Input',
-
   tags: ['autodocs'],
   args: {
     defaultChecked: false,

src/design-system/components/Switch/Switch.stories.tsx

@@ -6,6 +6,7 @@ import { useState } from 'react';
 const meta: Meta<typeof Switch> = {
   title: 'Design-System/Form Elements/Switch',
   component: Switch,
+  tags: ['autodocs'],
 };
 
 export default meta;

src/design-system/components/TextArea/TextArea.stories.tsx

@@ -5,6 +5,7 @@ import TextArea from './TextArea';
 const meta: Meta<typeof TextArea> = {
   title: 'Design-System/Form Elements/TextArea',
   component: TextArea,
+  tags: ['autodocs'],
 };
 
 export default meta;