Merge pull request #27 from silinternational/develop

Release 1.1.0

Author: hobbitronics

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

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.

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">

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 />

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"

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>
 

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>

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>

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">

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?
 }