Drawer story and additions

CHANGELOG.md

@@ -19,10 +19,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - $$props.class to Badge, Form, CustomCard, Tour and StaticChip so they can accept global classes
-- Badge, CustomCard, Form, StaticChip and Tour stories to Storybook
+- Badge, CustomCard, Drawer, Form, StaticChip and Tour stories to Storybook
 - global.scss to generate full range of padding and margin from 1rem to 8rem, height and width from 0 to 100% in increments of 5, z-index from 0 to 10.
 - align-item and align-self flex utilites to global.scss
 - .text-align-start, .text-align-end, .d-inline, .d-block, .relative, .fixed and .fs-10 added to global.scss
+- toggle (opens and closes Drawer when modal or dismissible), dismissible(Drawer is hidden by default) and hasTopAppBar props to Drawer
 
 ### Removed
 - global.css was removed and added to .gitignore

README.md

@@ -58,7 +58,7 @@ Dialog [
 	Dialog.Alert (open, title, defaultAction), Dialog.Simple(open, title)
 ]
 
-Drawer (title, subtitle, menuItems)
+Drawer (title, subtitle, menuItems, toggle, modal, dismissible, hasTopAppBar)
 
 Fab (icon, label, url)
 

components/mdc/Drawer/Drawer.svelte

@@ -9,6 +9,10 @@ import TopAppBar from '../TopAppBar'
 export let title = ''
 export let subtitle = ''
 export let menuItems = []
+export let hasTopAppBar = true
+export let modal = false
+export let dismissible = false
+export let toggle = true
 
 let mdcDrawer = {}
 let element = {}
@@ -24,6 +28,7 @@ onMount(() => {
 const isMenuItemActive = (currentUrl, menuItemUrl) => currentUrl === menuItemUrl
 
 $: currentUrl = window.location.pathname
+$: toggle, toggleDrawer()
 
 $beforeUrlChange(({ url }) => {
   currentUrl = url
@@ -32,14 +37,10 @@ $beforeUrlChange(({ url }) => {
 })
 
 const showAppropriateDrawer = () => {
-  isDesktop() ? showStandardDrawer() : showModalDrawer()
-}
-const showModalDrawer = () => {
-  element.classList && element.classList.add("mdc-drawer--modal")
-}
-const showStandardDrawer = () => {
-  element.classList && element.classList.remove("mdc-drawer--modal")
+  isDesktop() && !dismissible ? showStandardDrawer() : showModalDrawer()
 }
+const showModalDrawer = () => modal = true
+const showStandardDrawer = () => modal = false
 const closeDrawer = () => mdcDrawer.open = false
 const toggleDrawer = () => mdcDrawer.open = !mdcDrawer.open
 </script>
@@ -53,7 +54,6 @@ const toggleDrawer = () => mdcDrawer.open = !mdcDrawer.open
 .app-content {
   flex: auto;
   overflow: auto;
-  position: relative;
 }
 main {
   overflow: auto;
@@ -64,14 +64,7 @@ main {
 /* TODO: keep an eye on this bug https://github.com/material-components/material-components-web/issues/5242, overriding for now so menu items will take on the themed color */
 .mdc-drawer .mdc-list-item--activated,
 .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
-  color: var(--mdc-theme-primary-variant);
-}
-.mdc-list {
-  /* override built-in padding so height 100 works correctly without creating a vertical scroller */
-  padding: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+  color: var(--mdc-theme-primary-variant, var(--mdc-theme-primary));
 }
 .mdc-list-item {
   /* changing the list to flex causes the margins to not collapse */
@@ -81,15 +74,16 @@ main {
 
 <svelte:window on:resize={showAppropriateDrawer}/>
 
-<aside class="mdc-drawer mdc-drawer--modal" bind:this={element}>
+<aside class="mdc-drawer" class:mdc-drawer--modal={modal} class:mdc-drawer--dismissible={dismissible} bind:this={element}>
   {#if title || subtitle}
     <div class="mdc-drawer__header mt-1">
       <slot name="header"/>
     </div>
   {/if}
 
   <div class="mdc-drawer__content">
-    <nav class="mdc-list" on:click={closeDrawer}>
+    <!-- override built-in padding so height 100 works correctly without creating a vertical scroller -->
+    <nav class="mdc-list flex column p-0 h-100" on:click={closeDrawer}>
       {#each menuItems as {icon, label, url, hide}, i}
         {#if label === '--break--'}
           <span class="grow-1" />
@@ -114,12 +108,14 @@ main {
 
 <div class="mdc-drawer-scrim" />
 
-<div class="app-content">
-  <TopAppBar dense fixed on:nav={toggleDrawer} navIconBreakpointClass="hide-above-tablet" />
+<div class="app-content relative">
+  {#if hasTopAppBar}
+    <TopAppBar dense fixed bgColorIsVariant on:nav={toggleDrawer} navIconBreakpointClass="hide-above-tablet" />
+  {/if}
 
   <main class="h-100">
     <div class="mdc-top-app-bar--dense-fixed-adjust h-100">
       <slot />
     </div>
   </main>
-</div>
+</div>

components/mdc/Drawer/_index.scss

@@ -1,4 +1,7 @@
 @use "@material/drawer";
+@use "@material/list";
 
 @include drawer.core-styles;
+@include drawer.dismissible-core-styles;
 @include drawer.modal-core-styles;
+@include list.core-styles;

stories/Drawer.stories.svelte

@@ -0,0 +1,71 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Drawer, Button } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    class: '', //only works for global classes
+    title: 'Title',
+    toggle: true,
+    menuItems: [
+      {},
+			{
+				url: './',
+        icon: 'account_circle',
+				label: 'see our components in storybook'
+			},
+      {
+        label: '--break--',
+      },
+			{
+				url: './',
+				label: 'see our components in storybook'
+			},
+      {
+				url: './',
+				label: 'see our components in storybook'
+			},
+      {
+        label: '--break--',
+      },
+			{
+				url: './',
+				label: 'see our components in storybook'
+			}
+		]
+  }
+</script>
+
+<Meta
+  title="Molecule/Drawer"
+  component={Drawer}
+/>
+
+<Template let:args>
+  <body>
+    <Drawer {...args}>
+      <span class="pointer" slot="header">
+        <img class="w-100" src="/logo.png" alt="logo">
+        <Button on:click={() => args.toggle = !args.toggle}>Toggle drawer</Button>
+      </span>
+
+      <Button on:click={() => args.toggle = !args.toggle}>Toggle drawer</Button>
+
+    </Drawer>
+  </body>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Subtitle"
+  args={copyAndModifyArgs(args, {subtitle: 'subtitle'})}
+/>
+
+<Story
+  name="Dismissible"
+  args={copyAndModifyArgs(args, {dismissible: true})}
+/>

stories/Linear.stories.svelte

@@ -2,6 +2,7 @@
   import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
   import { Progress } from "../components/mdc"
   import { copyAndModifyArgs } from "./helpers.js"
+  import './_index.scss'
 
   const args = {
     class: '', //only works for global classes

stories/_index.scss

@@ -0,0 +1 @@
+@use './theme';

stories/_theme.scss

@@ -0,0 +1,13 @@
+// https://material.io/develop/web/docs/theming
+
+:root {
+  --mdc-theme-primary: #00A7E1;
+  --mdc-theme-primary-variant: #0078AF;
+  --mdc-theme-secondary: #FF4800;
+  --mdc-theme-error: #C30000;
+  --progress-bar-color: #005CB9;
+}
+
+.mdc-theme--primary-variant {
+  color: var(--mdc-theme-primary-variant);
+}