feat(components): add Form, FormGroup, FormItem, FormLabel

Supports #17

Fixes broken storybook.

TODO: Define stories using other components (e.g. NumberInput, Select...)

src/components/Form/Form.svelte

@@ -0,0 +1,13 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form', className);
+</script>
+
+<form class={_class} {style}>
+  <slot />
+</form>

src/components/Form/index.js

@@ -0,0 +1,3 @@
+import Form from './Form.svelte';
+
+export default Form;

src/components/FormGroup/FormGroup.svelte

@@ -0,0 +1,22 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let legendText = '';
+  export let invalid = false;
+  export let message = false;
+  export let messageText = '';
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--fieldset', className);
+  const _legendClass = cx('--label', className);
+</script>
+
+<fieldset data-invalid={invalid ? '' : undefined} class={_class} {style}>
+  <legend class={_legendClass}>{legendText}</legend>
+  <slot />
+  {#if message}
+    <div class={cx('--form__requirements')}>{messageText}</div>
+  {/if}
+</fieldset>

src/components/FormGroup/index.js

@@ -0,0 +1,3 @@
+import FormGroup from './FormGroup.svelte';
+
+export default FormGroup;

src/components/FormItem/FormItem.svelte

@@ -0,0 +1,13 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form-item', className);
+</script>
+
+<div class={_class} {style}>
+  <slot />
+</div>

src/components/FormItem/index.js

@@ -0,0 +1,3 @@
+import FormItem from './FormItem.svelte';
+
+export default FormItem;

src/components/FormLabel/FormLabel.svelte

@@ -0,0 +1,14 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random();
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--form-item', className);
+</script>
+
+<label for={id} class={_class} {style}>
+  <slot />
+</label>

src/components/FormLabel/index.js

@@ -0,0 +1,3 @@
+import FormLabel from './FormLabel.svelte';
+
+export default FormLabel;

src/components/RadioButtonGroup/RadioButtonGroup.Story.svelte

@@ -2,7 +2,7 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import RadioButtonGroup from './RadioButtonGroup.svelte';
   import RadioButton from '../RadioButton';
-  import { FormGroup } from '../Form';
+  import FormGroup from '../FormGroup';
 </script>
 
 <Layout>

src/index.js

@@ -7,6 +7,10 @@ import Copy from './components/Copy';
 import CopyButton from './components/CopyButton';
 import CodeSnippet, { CodeSnippetSkeleton } from './components/CodeSnippet';
 import DataTableSkeleton from './components/DataTableSkeleton';
+import Form from './components/Form';
+import FormGroup from './components/FormGroup';
+import FormItem from './components/FormItem';
+import FormLabel from './components/FormLabel';
 import InlineLoading from './components/InlineLoading';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
@@ -75,6 +79,10 @@ export {
   Copy,
   CopyButton,
   DataTableSkeleton,
+  Form,
+  FormGroup,
+  FormItem,
+  FormLabel,
   ExpandableTile,
   InlineLoading,
   InlineNotification,