feat(SearchableSelect): add required prop

Author: hobbitronics

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -9,6 +9,7 @@ export let padding = '12px'
 export let width = '232px'
 export let maxlength = 255
 export let disabled = false
+export let required = false
 
 let element = {}
 
@@ -73,6 +74,7 @@ const onChange = () => {
     {maxlength}
     class="fs-14 {$$props.class}"
     style="width: {width}"
+    {required}
     list={randomId}
     placeholder=" "
     bind:this={element}

stories/SearchableSelect.stories.svelte

@@ -1,6 +1,7 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
 import { SearchableSelect } from '../components/custom'
+import { Button } from '../components/mdc'
 import { copyAndModifyArgs } from './helpers.js'
 
 const args = {
@@ -12,6 +13,7 @@ const args = {
   },
   placeholder: 'choice 1',
   padding: '12px',
+  required: false,
   choice: 'choice 1',
   width: '232px',
   maxlength: 255,
@@ -26,7 +28,10 @@ const args = {
 <Meta title="Atoms/SearchableSelect" component={SearchableSelect} />
 
 <Template let:args>
-  <SearchableSelect {...args} on:chosen={args['on:chosen']} on:check={args['on:check']} />
+  <form on:submit={() => console.log('submitted')}>
+    <SearchableSelect {...args} on:chosen={args['on:chosen']} on:check={args['on:check']} />
+    <Button>Submit</Button>
+  </form>
 </Template>
 
 <Story name="Default" {args} />
@@ -35,3 +40,7 @@ const args = {
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
 <Story name="Maxlength" args={copyAndModifyArgs(args, { maxlength: 25 })} />
 <Story name="padding" args={copyAndModifyArgs(args, { padding: '20px' })} />
+<Story
+  name="required"
+  args={copyAndModifyArgs(args, { required: true, 'on:check': () => console.log('this is required') })}
+/>