Merge pull request #22 from silinternational/feature/Dialog-story

Dialog 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 and List so they can accept global classes
+- $$props.class to Fab, TextArea, Select, Checkbox, Datatable, Dialog.Simple, Dialog.Alert 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/Datatable/Datatable.svelte

@@ -22,7 +22,7 @@ onMount(() => {
 })
 </script>
 
-<div class="mdc-data-table w-100" bind:this={element}>
+<div class="mdc-data-table w-100 {$$props.class}" bind:this={element}>
   <div class="mdc-data-table__table-container">
     <table class="mdc-data-table__table" aria-label={label}>
       <slot />

components/mdc/Dialog/Alert.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 })
 </script>
 
-<div class="mdc-dialog" bind:this={element}>
+<div class="mdc-dialog {$$props.class}" bind:this={element}>
   <div class="mdc-dialog__container">
     <div class="mdc-dialog__surface"
          role="alertdialog"

components/mdc/Dialog/Simple.svelte

@@ -35,7 +35,7 @@ const toAction = json => JSON.stringify(json)
 const fromAction = s => JSON.parse(s)
 </script>
 
-<div class="mdc-dialog" bind:this={element}>
+<div class="mdc-dialog {$$props.class}" bind:this={element}>
   <div class="mdc-dialog__container">
     <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-content">
       <!--(notes from docs) Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->

stories/Alert.stories.svelte

@@ -0,0 +1,60 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Dialog } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    onChosen: e => console.log(e.detail),
+    onClosed: () => {},
+    open: true,
+    class: '', //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Atoms/Dialog.Alert"
+  component={Dialog.Alert}
+/>
+
+<Template let:args>
+  <Dialog.Alert {...args} on:chosen={args.onChosen} on:closed={args.onClosed}>Main slot here</Dialog.Alert>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Title"
+  args={
+    copyAndModifyArgs(args, {title: 'title'})
+  }
+/>
+
+<Story
+  name="Default action"
+  args={
+    copyAndModifyArgs(args, {defaultAction: 'cancel'})
+  }
+/>
+
+<Story
+  name="Buttons"
+  args={
+    copyAndModifyArgs(args, {
+      buttons: [
+        {
+          label: 'quit', 
+          action: 'quit',
+          class: 'mdc-dialog__button'
+        },
+        {
+          label: 'discard', 
+          action: 'discard',
+          class: 'mdc-dialog__button'
+        }
+      ]
+    })
+  }
+/>

stories/Simple.stories.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Dialog } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    onChosen: e => console.log(e.detail),
+    open: true,
+    items: [
+      {id: '1', name: 'item1 name'},
+      {id: '2', name: 'item2 name'}
+    ],
+    class: '', //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Atoms/Dialog.Simple"
+  component={Dialog.Simple}
+/>
+
+<Template let:args>
+  <Dialog.Simple {...args} on:chosen={args.onChosen}/>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Title"
+  args={
+    copyAndModifyArgs(args, {title: 'title'})
+  }
+/>
+
+<Story
+  name="Items"
+  args={
+    copyAndModifyArgs(args, {items: [
+      {id: '1', name: 'item1 name'},
+      {id: '2', name: 'item2 name'},
+      {id: '3', name: 'item3 name'},
+      {id: '4', name: 'item4 name'}
+    ]})
+  }
+/>