feat(Select): Add Select.name for convenient form submission

components/mdc/Select/Select.svelte

@@ -19,6 +19,8 @@ export let selectedID = ''
 export let required = false
 /** @type {boolean} applies the mdc-select--invalid class */
 export let showError = false
+/** @type {string} a name for the hidden input field for form submission*/
+export let name = ''
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -72,6 +74,7 @@ afterUpdate(() => {
   bind:this={element}
   style="width: {width}"
 >
+  <input {required} type="hidden" {name} />
   <div
     class="mdc-select__anchor"
     aria-required={required}

index.d.ts

@@ -237,6 +237,7 @@ declare module '@silintl/ui-components' {
   interface SelectProps {
     disabled?: boolean
     label?: string
+    name?: string
     options?: { name: string; id: string }[]
     required?: boolean
     showError?: boolean

stories/Select.stories.svelte

@@ -1,7 +1,8 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { Select } from '../components/mdc'
+import { Button, Select, Snackbar, setNotice } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
+import { Form } from '../components/custom'
 
 const args = {
   options: [
@@ -21,7 +22,14 @@ const args = {
 <Meta title="Atoms/Select" component={Select} />
 
 <Template let:args>
-  <Select {...args} on:change={args['on:change']} on:populated={args['on:populated']} />
+  <Form on:submit={(e) => setNotice('submitted')}>
+    <p>
+      <Select {...args} on:change={args['on:change']} on:populated={args['on:populated']} />
+    </p>
+    <Button raised>Submit</Button>
+  </Form>
+
+  <Snackbar />
 </Template>
 
 <Story name="Default" {args} />
@@ -37,3 +45,5 @@ const args = {
 <Story name="required" args={copyAndModifyArgs(args, { required: true })} />
 
 <Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />
+
+<Story name="name" args={copyAndModifyArgs(args, { name: 'category' })} />