docs: add stories for form, form-group and form-item components

src/components/CvForm/CvForm.stories.mdx

@@ -0,0 +1,185 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvButton from '../CvButton';
+import CvTextInput from '../CvTextInput';
+import CvTextArea from '../CvTextArea';
+import { CvForm, CvFormGroup, CvFormItem } from '.';
+
+<Meta title={`${sbCompPrefix}/CvForm`} component={CvForm} />
+
+export const Template = args => ({
+  components: {
+    CvForm,
+    CvFormGroup,
+    CvFormItem,
+    CvButton,
+    CvTextInput,
+    CvTextArea,
+  },
+  setup: () => ({
+    args: { ...args, template: undefined },
+  }),
+  template: args.template,
+});
+
+export const defaultTemplate = `
+  <cv-form>
+    <cv-text-input
+      label="Text input label"
+      placeholder="Optional placeholder text"
+      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
+    />
+    <cv-text-area
+      label="Text area label"
+      placeholder="Optional placeholder text"
+      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
+    />
+    <cv-button>Submit</cv-button>
+  </cv-form>
+`;
+
+export const formGroupTemplate = `
+  <cv-form-group v-bind="args">
+    <template #label>
+      FormGroup label-legend
+    </template>
+    <template #content>
+      <cv-text-input label="First name" />
+      <cv-text-input label="Last name" />
+    </template>
+  </cv-form-group>
+`;
+
+export const formItemTemplate = `
+  <cv-form-item>
+    <label for="text-input-3" class="bx--label">Text Input label</label>
+    <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text" />
+  </cv-form-item>
+`;
+
+# CvForm
+
+These components are purely wrapper elements for use in creating forms.
+
+## Usage CvForm
+
+CvForm has no properties and a single default slot
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['template']
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+    }}
+    argTypes={{
+      default: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        }
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+## CvFormGroup
+
+Used inside a form to group components such as checkboxes and radio buttons.
+
+<Canvas>
+  <Story
+    name="FormGroup-Default"
+    parameters={{
+      controls: {
+        exclude: ['template', 'default']
+      },
+      docs: { source: { code: formGroupTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: formGroupTemplate,
+    }}
+    argTypes={{
+      content: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        },
+      },
+      label: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        },
+        description: 'Legend element content',
+      },
+      invalid: {
+        type: 'boolean',
+        table: {
+          type: { summary: 'boolean' },
+          category: 'props',
+        },
+        description: 'Specify whether the `FormGroup` is invalid',
+      },
+      message: {
+        type: 'string',
+        table: {
+          type: { summary: 'string' },
+          category: 'props',
+        },
+        description: 'Specify a message to be placed at the end of the `FormGroup`',
+      },
+      noMargin: {
+        type: 'boolean',
+        table: {
+          type: { summary: 'boolean' },
+          category: 'props',
+        },
+        description: 'Remove default margins set on `FormGroup`',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## CvFormItem
+
+Used inside a form to provide positional styling.
+
+<Canvas>
+  <Story
+    name="FormItem-Default"
+    parameters={{
+      controls: {
+        exclude: ['template']
+      },
+      docs: { source: { code: formItemTemplate } },
+    }}
+    args={{
+      template: formItemTemplate,
+    }}
+    argTypes={{
+      default: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        }
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>