Merge pull request #241 from silinternational/feature/add-inputID

expose inputID as prop on Checkbox

components/mdc/Checkbox/Checkbox.svelte

@@ -15,13 +15,13 @@ export let checked = false
 export let disabled = false
 /** @type {boolean} if the label should be uppercase or not */
 export let uppercase = false
+/** @type {string} random id prefixed with checkbox- for the input id*/
+export let inputID = generateRandomID('checkbox-')
 
 let checkboxElement = {}
 let formFieldElement = {}
 let checkbox
 
-const inputID = generateRandomID('checkbox-')
-
 $: if (checkbox) checkbox.checked = checked
 
 onMount(() => {

index.d.ts

@@ -36,6 +36,7 @@ declare module '@silintl/ui-components' {
     disabled?: boolean
     uppercase?: boolean
     class?: string
+    inputID?: string
   }
   export class Checkbox extends SvelteComponentTyped<CheckboxProps> {}
 

stories/Checkbox.stories.svelte

@@ -1,13 +1,13 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { Checkbox } from '../components/mdc'
+import { Checkbox, setNotice, Snackbar } from '../'
 import { copyAndModifyArgs } from './helpers.js'
 
 const args = {
   label: 'Checkbox',
   class: '', //only works for global classes
-  'on:checked': () => alert('checked'),
-  'on:unchecked': () => alert('unchecked'),
+  'on:checked': () => setNotice('checked'),
+  'on:unchecked': () => setNotice('unchecked'),
 }
 </script>
 
@@ -24,3 +24,5 @@ const args = {
 <Story name="Uppercase" args={copyAndModifyArgs(args, { uppercase: true })} />
 
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
+
+<Snackbar />

stories/Switch.stories.svelte

@@ -1,11 +1,11 @@
 <script>
 import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
-import { Switch } from '../components/mdc'
+import { Switch, setNotice, Snackbar } from '../'
 
 const args = {
   class: '',
-  'on:selected': () => alert('switch is on'),
-  'on:deselected': () => alert('switch is off'),
+  'on:selected': () => setNotice('switch is on'),
+  'on:deselected': () => setNotice('switch is off'),
 }
 </script>
 
@@ -22,3 +22,5 @@ const args = {
 <Story name="Disabled" args={{ ...args, disabled: true }} />
 
 <Story name="Initially Selected" args={{ ...args, selected: true }} />
+
+<Snackbar />