Merge pull request #20 from silinternational/feature/TopAppBar-story

TopAppBar story

Author: hobbitronics

CHANGELOG.md

@@ -12,7 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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
 - barColorProvided to Progress.Linear to allow bypass of bar-color class when no color is provided
-- README: Theming, Drawer example and Storybook url.
+- 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.
 - Storybook for showcasing components at https://silinternational.github.io/ui-components/
 
 ### Fixed

README.md

@@ -90,7 +90,7 @@ Tooltip (tooltipID, positionX, positionY) [
 	Tooltip.Wrapper (ariaDescribedBy)
 ]
 
-TopAppBar (dense, fixed, navIconBreakpointClass) [
+TopAppBar (dense, fixed, navIconBreakpointClass, bgColorIsVariant) [
 	actions.js, title.js
 ]
 
@@ -179,7 +179,10 @@ An example of using Drawer:
 ```
 
 ### storybook
-Check out our components at https://silinternational.github.io/ui-components/
+Try out our components at https://silinternational.github.io/ui-components/
+
+### CSS utility classes
+Classes from [global.css](https://github.com/silinternational/ui-components/blob/develop/components/global.css) can be applied to all components and even components and elements from your app.
 
 ### theming
-If you are using an MDC theme https://material.io/develop/web/docs/theming and typography https://material.io/develop/web/components/typography then import your _index.scss file to the App.svelte file so they get applied to the ui-components.
+If you are using an [MDC theme](https://material.io/develop/web/docs/theming) and [typography](https://material.io/develop/web/components/typography) then import your _index.scss file to the App.svelte file so they get applied to the ui-components.

components/mdc/TopAppBar/TopAppBar.svelte

@@ -5,6 +5,7 @@ import { MDCTopAppBar } from '@material/top-app-bar'
 import { createEventDispatcher, onMount } from 'svelte'
 import title from './title'
 
+export let bgColorIsVariant = true
 export let dense = false
 export let fixed = false
 export let navIconBreakpointClass = ''
@@ -23,15 +24,16 @@ onMount(() => {
 </script>
 
 <style>
-header {
-  position: absolute;
+.bg-color-variant {
   background-color: var(--mdc-theme-primary-variant);  /* had to override this because we're going against the MDC spec that the top app bar should be the primary color. */
 }
 </style>
 
-<header class="mdc-top-app-bar"
+<header class="mdc-top-app-bar absolute"
         class:mdc-top-app-bar--dense={dense}
-        class:mdc-top-app-bar--fixed={fixed} bind:this={element}>
+        class:mdc-top-app-bar--fixed={fixed}
+        class:bg-color-variant={bgColorIsVariant}
+        bind:this={element}>
   <div class="mdc-top-app-bar__row">
     <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
       <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button {navIconBreakpointClass}" aria-label="Open navigation menu">menu</button>

stories/TopAppBar.stories.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { TopAppBar } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    class: '', //only works for global classes
+    bgColorIsVariant: false,
+    onNav: () => {},
+  }
+</script>
+
+<Meta
+  title="Atoms/TopAppBar"
+  component={TopAppBar}
+/>
+
+<Template let:args>
+  <TopAppBar {...args} on:nav={args.onNav}/>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Dense"
+  args={copyAndModifyArgs(args, {dense: true})}
+/>
+
+<Story
+  name="Fixed"
+  args={copyAndModifyArgs(args, {fixed: true})}
+/>
+
+<Story
+  name="Hide above tablet"
+  args={copyAndModifyArgs(args, {navIconBreakpointClass: "hide-above-tablet"})}
+/>