Merge pull request #25 from silinternational/feature/TabBar-story

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

@@ -23,6 +23,6 @@ onMount(() => {
 }
 </style>
 
-<div class="mdc-tab-bar" role="tablist" bind:this={element}>
+<div class="mdc-tab-bar {$$props.class}" role="tablist" bind:this={element}>
   <slot />
 </div>

stories/TabBar.stories.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { TabBar } from "../components/mdc"
+
+  const args = {
+    tab: 0,
+    onClick: () => {},
+    class: '' //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Atoms/TabBar"
+  component={TabBar}
+/>
+
+<Template let:args>
+  <TabBar {...args}>
+    <TabBar.Scroller>
+      <TabBar.Tab label="tab 1" on:click={args.onClick} active={args.tab === 0} />
+      <TabBar.Tab label="tab 2" on:click={args.onClick} active={args.tab === 1} />
+      <TabBar.Tab label="tab 3" on:click={args.onClick} active={args.tab === 2} />
+    </TabBar.Scroller>
+  </TabBar>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>