Merge pull request #18 from silinternational/feature/select-story

Select story

Author: hobbitronics

CHANGELOG.md

@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - actions, isAboveMobile, isAboveTablet, setNotice to index.js so they can be imported directly
-- $$props.class to Fab, TextArea and List so they can accept global classes
+- $$props.class to Fab, TextArea, Select, Checkbox and List so they can accept global classes
 - README: Theming, Drawer example and Storybook url.
 - Storybook for showcasing components at https://silinternational.github.io/ui-components/
 

components/mdc/Checkbox/Checkbox.svelte

@@ -30,7 +30,7 @@ onMount(() => {
 const handleChange = () => dispatch(checkbox.checked ? 'checked' : 'unchecked')
 </script>
 
-<div class="mdc-form-field" bind:this={formFieldElement}>
+<div class="mdc-form-field {$$props.class}" bind:this={formFieldElement}>
   <div class="mdc-checkbox" bind:this={checkboxElement}>
     <input type="checkbox" {disabled} on:change={handleChange} class="mdc-checkbox__native-control" id={inputID} />
     <div class="mdc-checkbox__background">

components/mdc/Select/Select.svelte

@@ -40,7 +40,7 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined" bind:this={element} style="width: {width}">
+<div class="mdc-select mdc-select--outlined {$$props.class}" bind:this={element} style="width: {width}">
   <div class="mdc-select__anchor"
        role="button"
        aria-haspopup="listbox"

stories/Checkbox.stories.svelte

@@ -5,6 +5,7 @@
 
   const args = {
     label: "Checkbox",
+    class: '', //only works for global classes
   }
 </script>
 

stories/Select.stories.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Select } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    options: [
+      {name: 'choice 1', id: '0'},
+      {name: 'choice 2', id: '1'},
+      {name: 'choice 3', id: '2'},
+      {name: 'choice 4', id: '3'},
+      {name: 'choice 5', id: '4'},
+      {name: 'choice 6', id: '5'}
+    ],
+    onChange: e => console.log(e.detail),
+    class: '', //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Atoms/Select"
+  component={Select}
+/>
+
+<Template let:args>
+  <Select {...args} on:change={args.onChange}/>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Label"
+  args={
+    copyAndModifyArgs(args, {label: 'Label'})
+  }
+/>
+
+<Story
+  name="Width"
+  args={
+    copyAndModifyArgs(args, {width: '560px'})
+  }
+/>
+
+<Story
+  name="Disabled"
+  args={
+    copyAndModifyArgs(args, {disabled: true})
+  }
+/>