Merge pull request #19 from silinternational/feature/progress-story

Progress story

Author: hobbitronics

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - actions, isAboveMobile, isAboveTablet, setNotice to index.js so they can be imported directly
 - $$props.class to Fab, TextArea, Select, Checkbox and List so they can accept global classes
+- barColorProvided to Progress.Linear to allow bypass of bar-color class when no color is provided
 - README: Theming, Drawer example and Storybook url.
 - Storybook for showcasing components at https://silinternational.github.io/ui-components/
 

README.md

@@ -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)

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

stories/Circular.stories.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Progress } from "../components/mdc"
+
+  const args = {
+    class: '', //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Atoms/Progress.Circular"
+  component={Progress.Circular}
+/>
+
+<Template let:args>
+  <Progress.Circular {...args}/>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>

stories/Linear.stories.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Progress } from "../components/mdc"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    class: '', //only works for global classes
+    value: .5,
+    barColorProvided: false
+  }
+</script>
+
+<Meta
+  title="Atoms/Progress.Linear"
+  component={Progress.Linear}
+/>
+
+<Template let:args>
+  <Progress.Linear {...args}/>
+</Template>
+
+<Story
+  name="Determinate"
+  {args}
+/>
+
+<Story
+  name="Indeterminate"
+  args={copyAndModifyArgs(args, {indeterminate: true})}
+/>