Merge pull request #24 from silinternational/feature/Snackbar-story

Snackbar 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, Select, Checkbox, Datatable, Dialog.Simple, Dialog.Alert, Tooltip and List so they can accept global classes
+- $$props.class to Fab, TextArea, Select, Checkbox, Datatable, Dialog.Simple, Dialog.Alert, Tooltip, Snackbar and List so they can accept global classes
 - barColorProvided to Progress.Linear to allow bypass of bar-color class when no color is provided
 - bgColorIsVariant to TopAppBar to allow bypass of bg-color-variant if no color is provided
 - README: Theming, Drawer example, CSS utility classes and Storybook url.

components/mdc/Snackbar/Snackbar.svelte

@@ -46,7 +46,7 @@ function open(msg) {
 </script>
 
 <div class="mdc-snackbar" bind:this={element}>
-  <div class="mdc-snackbar__surface mdc-theme--secondary-variant">
+  <div class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class}">
     <div class="mdc-snackbar__label" role="status" aria-live="polite">
     </div>
     {#if action}

stories/Snackbar.stories.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Snackbar, setNotice } from "../components/mdc"
+  import { onMount } from "svelte"
+
+  const args = {
+    class: '', //only works for global classes
+  }
+
+  onMount(() => {
+    setTimeout(
+      () => setNotice('Here is a notice set by the setNotice function'), 2000
+    )
+  })
+</script>
+
+<Meta
+  title="Atoms/Snackbar"
+  component={Snackbar}
+/>
+
+<Template let:args>
+  <Snackbar {...args}/>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>