Merge pull request #27 from silinternational/develop

Release 1.1.0
silinternational · May 26, 2021 · 930ef55 · 930ef55
2 parents 886c497 + 052764f
commit 930ef55
Show file tree

Hide file tree

Showing 42 changed files with 26,272 additions and 2,398 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,35 @@
+# Changelog
+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).
+
+## [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
+
+### 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, 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.
+- Storybook for showcasing components at https://silinternational.github.io/ui-components/
+
+### Fixed
+- README: import from '@silintl/ui-components' not 'ui-components'
+
+## [1.0.1](https://github.com/silinternational/ui-components/releases/tag/v1.0.1) - 2021-05-18
+### Changed
+- updated package-lock.json
+- installation instructions in README. Now install with npm: `npm i @silintl/ui-components`
+
+## [1.0.0](https://github.com/silinternational/ui-components/releases/tag/v1.0.0) - 2021-05-18
+### Added
+- package.json and package-lock.json
+- ./random/index.js to generate random IDs for some components
+- components - for use in svelte projects based on material design
+- index.js to expose components
+- README to provide basic installation, configuration, examples and usage instructions
+- global.css for styling components and using as utilities in the dependent
+- peerDependencies: @roxi/routify, material-components-web, svelte
diff --git a/README.md b/README.md
@@ -41,7 +41,7 @@ module.exports = {
 		// ...
 ```
 
-### Components
+### components
 A list of all components (subcomponents and js files for interfacing in []) followed by their properties in ():
 
 Button (disabled, outlined, raised, prependIcon, appendIcon, url)
@@ -69,7 +69,7 @@ List (twoLine, avatar) [
 ]
 
 Progress [
-	Progress.Circular, Progress.Linear (indeterminate, value)
+	Progress.Circular, Progress.Linear (indeterminate, value, barColorProvided)
 ]
 
 Select (options, width, disabled, selectedID)
@@ -90,7 +90,7 @@ Tooltip (tooltipID, positionX, positionY) [
 	Tooltip.Wrapper (ariaDescribedBy)
 ]
 
-TopAppBar (dense, fixed, navIconBreakpointClass) [
+TopAppBar (dense, fixed, navIconBreakpointClass, bgColorIsVariant) [
 	actions.js, title.js
 ]
 
@@ -110,29 +110,79 @@ StaticChip
 
 Tour (steps, data)
 
-### Importing Components
+### importing components
 After installation and bundler configuration all of the components are ready to be imported.
 
-Here is an example of importing Button and Card:
+Just include `import { Button } from '@silintl/ui-components'` in your script section to import Button and any other components you want to use.
 
+### examples
+Here is a demo app with examples of how to use components.
+https://github.com/hobbitronics/svelte-ui-components-app
+
+It was buit from https://github.com/sveltejs/template
+
+If you are building a single page app with routify then it is recommended to use this template https://github.com/roxiness/routify-starter
+
+An example of using Button and Card:
 ```
 <script>
-  import { Button, Card } from 'ui-components'
+  import { Button, Card } from '@silintl/ui-components'
+
+	// ...
 </script>
 
 <Card class="mb-1">
 	<p>This is a card.</p>
 
 	<span slot="actions">
-		<Button on:click={doSomething} >Click here!</Button>
+		<Button raised prependIcon="done" on:click={doSomething} >Click here!</Button>
 	</span>
 </Card>
 ```
-### 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.
 
-### Example template
-Here is a template with more examples of how to use components.
-https://github.com/hobbitronics/svelte-ui-components-app
+An example of using Drawer:
+```
+<script>
+  import { actions, Drawer } from '@silintl/ui-components'
+	// ...
+	$: menuItems = [
+			// ...
+			{},
+			{
+				label: '--break--',
+			},
+			{},
+			{
+				url: 'https://silinternational.github.io/ui-components/index.html?path=/story/atoms-button--primary',
+				label: 'see our components in storybook'
+			}
+		]
+
+		onMount(() => {
+			//actions are for TopAppBar which Drawer uses as a child.
+			$actions = [
+				{
+					icon: 'info_outline',
+					label: 'action demo',
+					onClick: () => alert('you clicked an action'),
+				},
+			]
+		})
+</script>
+
+<Drawer {menuItems} title={appName}>
+	<span class="pointer" on:click={() => $goto('./someUrl')} slot="header">
+		<img class="w-100" src="" alt="logo">
+	</span>
+	<slot />
+</Drawer>
+```
+
+### storybook
+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.
 
-It was buit from https://github.com/sveltejs/template
+### 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.
diff --git a/components/mdc/Checkbox/Checkbox.svelte b/components/mdc/Checkbox/Checkbox.svelte
@@ -30,7 +30,7 @@ onMount(() => {
 const handleChange = () => dispatch(checkbox.checked ? 'checked' : 'unchecked')
 </script>
 
-<div class="mdc-form-field" bind:this={formFieldElement}>
+<div class="mdc-form-field {$$props.class}" bind:this={formFieldElement}>
   <div class="mdc-checkbox" bind:this={checkboxElement}>
     <input type="checkbox" {disabled} on:change={handleChange} class="mdc-checkbox__native-control" id={inputID} />
     <div class="mdc-checkbox__background">

diff --git a/components/mdc/Datatable/Datatable.svelte b/components/mdc/Datatable/Datatable.svelte
@@ -22,7 +22,7 @@ onMount(() => {
 })
 </script>
 
-<div class="mdc-data-table w-100" bind:this={element}>
+<div class="mdc-data-table w-100 {$$props.class}" bind:this={element}>
   <div class="mdc-data-table__table-container">
     <table class="mdc-data-table__table" aria-label={label}>
       <slot />

diff --git a/components/mdc/Dialog/Alert.svelte b/components/mdc/Dialog/Alert.svelte
@@ -45,7 +45,7 @@ onMount(() => {
 
 <div class="mdc-dialog" bind:this={element}>
   <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface"
+    <div class="mdc-dialog__surface {$$props.class}"
          role="alertdialog"
          aria-modal="true"
          aria-labelledby="title"

diff --git a/components/mdc/Dialog/Simple.svelte b/components/mdc/Dialog/Simple.svelte
@@ -37,7 +37,7 @@ const fromAction = s => JSON.parse(s)
 
 <div class="mdc-dialog" bind:this={element}>
   <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-content">
+    <div class="mdc-dialog__surface {$$props.class}" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-content">
       <!--(notes from docs) Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
       <h2 class="mdc-dialog__title" id="dialog-title">{title}</h2>
 

diff --git a/components/mdc/Fab/Fab.svelte b/components/mdc/Fab/Fab.svelte
@@ -24,7 +24,7 @@ onMount(() => {
 }
 </style>
 
-<a class="mdc-fab" aria-label={label} bind:this={element} href={url}>
+<a class="mdc-fab {$$props.class}" aria-label={label} bind:this={element} href={url}>
   <div class="mdc-fab__ripple"></div>
   <span class="mdc-fab__icon material-icons">{icon}</span>
 </a>
diff --git a/components/mdc/List/List.svelte b/components/mdc/List/List.svelte
@@ -19,7 +19,7 @@ ul {
 }
 </style>
 
-<ul class="mdc-list" class:mdc-list--two-line={twoLine}
+<ul class="mdc-list {$$props.class}" class:mdc-list--two-line={twoLine}
     class:mdc-list--avatar-list={avatar} bind:this={element}>
   <slot />
 </ul>
diff --git a/components/mdc/Progress/Linear.svelte b/components/mdc/Progress/Linear.svelte
@@ -5,6 +5,7 @@ import { onMount } from 'svelte'
 
 export let indeterminate = false
 export let value = 0
+export let barColorProvided = true
 
 let element = {}
 let mdcProgress
@@ -24,7 +25,7 @@ onMount(() => {
     <div class="mdc-linear-progress__buffer-bar"></div>
     <div class="mdc-linear-progress__buffer-dots"></div>
   </div>
-  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar bar-color">
+  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar" class:bar-color={barColorProvided}>
     <span class="mdc-linear-progress__bar-inner"></span>
   </div>
   <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">

diff --git a/components/mdc/Progress/_index.scss b/components/mdc/Progress/_index.scss
@@ -4,5 +4,5 @@
 @include linear-progress.core-styles;
 
 .bar-color {    
-  @include linear-progress.bar-color(var(--sil-primary-blue));
+  @include linear-progress.bar-color(var(--sil-primary-blue)); //TODO change variable name to something more generic, fallback to primary theme color?
 }
diff --git a/components/mdc/Select/Select.svelte b/components/mdc/Select/Select.svelte
@@ -40,7 +40,7 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined" bind:this={element} style="width: {width}">
+<div class="mdc-select mdc-select--outlined {$$props.class}" bind:this={element} style="width: {width}">
   <div class="mdc-select__anchor"
        role="button"
        aria-haspopup="listbox"

diff --git a/components/mdc/Snackbar/Snackbar.svelte b/components/mdc/Snackbar/Snackbar.svelte
@@ -46,7 +46,7 @@ function open(msg) {
 </script>
 
 <div class="mdc-snackbar" bind:this={element}>
-  <div class="mdc-snackbar__surface mdc-theme--secondary-variant">
+  <div class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class}">
     <div class="mdc-snackbar__label" role="status" aria-live="polite">
     </div>
     {#if action}

diff --git a/components/mdc/TabBar/TabBar.svelte b/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>
diff --git a/components/mdc/TextInput/TextArea.svelte b/components/mdc/TextInput/TextArea.svelte
@@ -55,7 +55,7 @@ label {
 }
 </style>
 
-<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea textfield-radius"
+<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea {$$props.class} textfield-radius"
        class:mdc-text-field--no-label={!label}
        class:mdc-text-field--label-floating={label}
        class:mdc-text-field--with-internal-counter={maxlength}

diff --git a/components/mdc/Tooltip/Tooltip.svelte b/components/mdc/Tooltip/Tooltip.svelte
@@ -33,7 +33,7 @@
 </script>
 
 <div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
-  <div class="mdc-tooltip__surface">
+  <div class="mdc-tooltip__surface {$$props.class}">
     <slot></slot>
   </div>
 </div>
diff --git a/components/mdc/TopAppBar/TopAppBar.svelte b/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>

diff --git a/components/mdc/index.js b/components/mdc/index.js
@@ -4,6 +4,7 @@
 // icons: https://material.io/resources/icons/
 // !! (keep an eye on this):  https://github.com/material-components/material-components-web-components
 import './_index.scss'
+import actions from './TopAppBar/actions'
 import Button from './Button'
 import Card from './Card'
 import Checkbox from './Checkbox'
@@ -13,6 +14,7 @@ import Drawer from './Drawer'
 import Fab from './Fab'
 import IconButton from './IconButton'
 import './icons'
+import { isAboveMobile, isAboveTablet } from './breakpoints'
 import List from './List'
 import Progress from './Progress'
 import Select from './Select'
@@ -21,8 +23,10 @@ import TabBar from './TabBar'
 import {TextArea, TextField} from './TextInput'
 import Tooltip from './Tooltip'
 import TopAppBar from './TopAppBar'
+import { setNotice } from './Snackbar/notice'
 
 export {
+  actions,
   Button,
   Card,
   Checkbox,
@@ -31,13 +35,16 @@ export {
   Drawer,
   Fab,
   IconButton,
+  isAboveMobile,
+  isAboveTablet,
   List,
   Progress,
-  Select,
-  Snackbar,
   TabBar,
   TextArea,
   TextField,
   Tooltip,
   TopAppBar,
+  Snackbar,
+  Select,
+  setNotice
 }
diff --git a/index.js b/index.js
@@ -1,4 +1,5 @@
 import {
+  actions,
   Button,
   Card,
   Checkbox,
@@ -7,6 +8,8 @@ import {
   Drawer,
   Fab,
   IconButton,
+  isAboveMobile,
+  isAboveTablet,
   List,
   Progress,
   Select,
@@ -16,6 +19,7 @@ import {
   TextField,
   Tooltip,
   TopAppBar,
+  setNotice
 } from './components/mdc'
 
 import Badge from './components/Badge.svelte'
@@ -26,7 +30,10 @@ import StaticChip from './components/StaticChip.svelte'
 import Tour from './components/Tour.svelte'
 
 export {
+  actions,
   Button,
+  isAboveMobile,
+  isAboveTablet,
   Card,
   Checkbox,
   Datatable,
@@ -48,5 +55,6 @@ export {
   Form,
   Page,
   StaticChip,
+  setNotice,
   Tour
 }