Merge pull request #41 from silinternational/develop

Release 2.0.0

Author: hobbitronics

.github/workflows/gh-pages.yml

@@ -3,7 +3,7 @@ name: github pages
 on:
   push:
     branches:
-      - main  # Set a branch name to trigger deployment
+      - develop  # Set a branch name to trigger deployment
 
 jobs:
   deploy:
@@ -24,6 +24,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
+      - run: npm install -g sass
       - run: npm ci
       - run: npm test
 
@@ -32,7 +33,7 @@ jobs:
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
-        if: github.ref == 'refs/heads/main'
+        if: github.ref == 'refs/heads/develop'
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./storybook-static
+          publish_dir: ./storybook-static

.gitignore

@@ -104,4 +104,8 @@ dist
 .tern-port
 
 # MacOs
-.DS_Store
+.DS_Store
+
+#CSS compiled for Storybook
+global.css.map
+global.css

CHANGELOG.md

@@ -4,6 +4,37 @@ All notable changes to this project will be documented in this file.
 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.0.0](https://github.com/silinternational/ui-components/releases/tag/v2.0.0) - 2021-07-02
+### Changed
+- README - Instructions for running Storybook locally
+- global.css is compiled during Storybook dev and deployment build from global.scss and used only for Storybook
+- _index.scss uses global.scss
+
+### BREAKING CHANGES
+- .align-center, .align-left and .align-right global classes are now .text-align-center, .text-align-left and .text-align-right.
+- .aligned global class is now .align-items-center
+- Progress.Linear barColorProvided prop deleted
+- Progress.Linear uses --progress-bar-color instead of --sil-primary-blue from the apps _theme file and falls back to --mdc-theme-primary
+- TopAppBar prop bgColorIsVariant default value is now false
+
+### Added
+- $$props.class to Badge, Form, CustomCard, Tour and StaticChip so they can accept global classes
+- mdc-typography class to Badge, StaticChip and Card as it was not being applied
+- 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
+- barColorProvided from Progress.Linear
+
+### Fixed
+- Tour was failing to replace key with value of data prop in steps content.
+
 ## [1.1.0](https://github.com/silinternational/ui-components/releases/tag/v1.1.0) - 2021-05-26
 ### Changed
 - package.json version to 1.1.0

README.md

@@ -5,7 +5,7 @@ Reusable Svelte components for some internal applications
 To install to your Svelte project, open your project's root directory in a terminal. Type `npm i @silintl/ui-components` and press enter.
 
 ### bundler configuration
-Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte (it may work still without autoPreprocess):
+Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte:
 ```
 import postcss from 'rollup-plugin-postcss';
 import autoPreprocess from 'svelte-preprocess';
@@ -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)
 
@@ -69,7 +69,7 @@ List (twoLine, avatar) [
 ]
 
 Progress [
-	Progress.Circular, Progress.Linear (indeterminate, value, barColorProvided)
+	Progress.Circular, Progress.Linear (indeterminate, value)
 ]
 
 Select (options, width, disabled, selectedID)
@@ -179,10 +179,11 @@ An example of using Drawer:
 ```
 
 ### storybook
-Try out our components at https://silinternational.github.io/ui-components/
+Try out our components and see examples at https://silinternational.github.io/ui-components/
+or run storybook locally. Just copy this repo to your machine and run `npm install` then `npm run dev.` Storybook should open a browser window when it finishes building.
 
 ### 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.
+Classes from [global.scss](https://github.com/silinternational/ui-components/blob/develop/components/global.scss) 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.

components/Badge.svelte

@@ -14,4 +14,4 @@
   }
 </style>
 
-<span class="dib align-center white fs-16 br-50 background" style="--theme-color: {color}" ><slot /></span>
+<span class="mdc-typography dib text-align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>

components/CustomCard.svelte

@@ -25,12 +25,12 @@
     }
 </style>
 
-<Card class="h-100 py-1">
+<Card class="h-100 py-1 {$$props.class}">
     <div class="flex justify-center">
         <img class="w-100" {src} {alt} class:disabled/>
     </div>
 
-    <div class="flex justify-between aligned black">
+    <div class="flex justify-between align-items-center black">
         <h4>{title}</h4>
 
         <span class="material-icons">{icon}</span>  

components/Form.svelte

@@ -4,6 +4,6 @@
 }
 </style>
 
-<form class="w-100" on:submit|preventDefault autocomplete="off">
+<form class="w-100 {$$props.class}" on:submit|preventDefault autocomplete="off">
   <slot />
 </form>

components/StaticChip.svelte

@@ -10,8 +10,8 @@
   }
 </style>
 
-<div class="chip black flex justify-center aligned mb-1 mr-2 fs-14 br-16px">
-  <div class="chip-content flex aligned">
+<div class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}">
+  <div class="chip-content flex align-items-center">
     <slot></slot>
   </div>  
 </div>

components/Tour.svelte

@@ -56,9 +56,9 @@
     tourTitle = thisStep.title || ''
     target = thisStep.target || ''
     for (const [key, value] of Object.entries(data)) {
-      tourMessage = tourMessage.replace(`{${key}}`, value)
-      tourTitle = tourTitle.replace(`{${key}}`, value)
-      target = target.replace(`{${key}}`, value)
+      tourMessage = tourMessage.replace(key, value)
+      tourTitle = tourTitle.replace(key, value)
+      target = target.replace(key, value)
     }
 
     buttons = [
@@ -68,4 +68,4 @@
   }
   </script>
 
-  <Dialog.Alert title={tourTitle} on:chosen={event => alertChosen(event.detail)} open={openDialog} {buttons}>{@html tourMessage}</Dialog.Alert>
+  <Dialog.Alert class="{$$props.class}" title={tourTitle} on:chosen={event => alertChosen(event.detail)} open={openDialog} {buttons}>{@html tourMessage}</Dialog.Alert>