Merge pull request #55 from silinternational/develop

Release 2.4.0

CHANGELOG.md

@@ -5,6 +5,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+## [2.4.0](https://github.com/silinternational/ui-components/releases/tag/v2.4.0) - 2021-08-03
+
+### Added
+- capitalize to global.scss
+- $$class.props and isFullHeightMenu property to Drawer
+- button to menu array in Drawer
+
+### Changed
+- update README index
+
+### Fixed
+- typo in global.scss
+- bug in Drawer by defaulting to modal
 
 ## [2.3.1](https://github.com/silinternational/ui-components/releases/tag/v2.3.1) - 2021-07-22
 ### Fixed

README.md

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

components/global.scss

@@ -172,6 +172,9 @@ $i: 0;
 	text-transform: uppercase;
 }
 
+.capitalize {
+	text-transform: capitalize;
+}
 /* text color */
 .black {
 	color: #2A3032;
@@ -250,7 +253,7 @@ $i: 0;
 	align-items: flex-end;
 }
 
-.align-items-strech {
+.align-items-stretch {
 	align-items: stretch;
 }
 

components/mdc/Drawer/Drawer.svelte

@@ -2,9 +2,9 @@
 <script>
 import { isAboveTablet as isDesktop } from '../breakpoints'
 import { MDCDrawer } from '@material/drawer'
+import { Button, TopAppBar } from '../index'
 import { beforeUrlChange } from '@roxi/routify'
 import { onMount } from 'svelte'
-import TopAppBar from '../TopAppBar'
 
 export let title = ''
 export let subtitle = ''
@@ -13,6 +13,7 @@ export let hasTopAppBar = true
 export let modal = false
 export let dismissible = false
 export let toggle = false
+export let isFullHeightMenu = true
 
 let mdcDrawer = {}
 let element = {}
@@ -29,6 +30,7 @@ const isMenuItemActive = (currentUrl, menuItemUrl) => currentUrl === menuItemUrl
 
 $: currentUrl = window.location.pathname
 $: toggle, toggleDrawer()
+$: !dismissible && (modal = true) //prevents error if neither is selected
 
 $beforeUrlChange(({ url }) => {
   currentUrl = url
@@ -67,14 +69,13 @@ main {
   color: var(--mdc-theme-primary-variant, var(--mdc-theme-primary));
 }
 .mdc-list-item {
-  /* changing the list to flex causes the margins to not collapse */
   margin: 4px 8px;
 }
 </style>
 
 <svelte:window on:resize={showAppropriateDrawer}/>
 
-<aside class="mdc-drawer" class:mdc-drawer--modal={modal} class:mdc-drawer--dismissible={dismissible} bind:this={element}>
+<aside class="mdc-drawer {$$props.class}" 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"/>
@@ -83,19 +84,25 @@ main {
 
   <div class="mdc-drawer__content">
     <!-- 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}
+    <!-- changing the list to flex causes the margins to not collapse -->
+    <nav class="mdc-list flex column p-0" class:h-100={isFullHeightMenu} on:click={closeDrawer}>
+      {#each menuItems as {icon, label, url, hide, button}, i}
         {#if label === '--break--'}
           <span class="grow-1" />
         {:else if !hide}
-          {#if url}
+          {#if url && button}
+            <Button prependIcon={button} {url} >{label}</Button>
+          {:else if url}
             <a class="mdc-list-item" class:mdc-list-item--activated={isMenuItemActive(currentUrl, url)} href={url}
               aria-current={isMenuItemActive(currentUrl, url) ? "page" : null} tabindex={i === 0 ? 0 : undefined}>
               <span class="mdc-list-item__ripple" />
               {#if icon}
                 <i class="material-icons mdc-list-item__graphic" aria-hidden="true">{icon}</i>
               {/if}
-              <span class="mdc-list-item__text">{label}</span>
+
+              {#if label}
+                <span class="mdc-list-item__text">{label}</span>
+              {/if}
             </a>
           {:else}
             <hr class="mdc-list-divider mdc-list-divider--inset-leading mdc-list-divider--inset-trailing" role="separator" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silintl/ui-components",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Reusable Svelte components for some internal applications",
   "main": "index.js",
   "scripts": {
@@ -44,7 +44,7 @@
     "@storybook/svelte": "^6.3.2",
     "css-loader": "^5.2.6",
     "material-components-web": "^10.0.0",
-    "sass": "^1.32.12",
+    "sass": "1.32.x",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "svelte": "^3.x",