Merge pull request #29 from silinternational/feature/more-stories

More stories, Tour bugfix

Author: hobbitronics

CHANGELOG.md

@@ -4,6 +4,17 @@ 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]
+### Changed
+- README - Instructions for running Storybook locally
+
+### Added
+- $$props.class to Badge, Form, CustomCard, Tour and StaticChip so they can accept global classes
+- Badge, CustomCard, Form, StaticChip and Tour stories to Storybook
+
+### 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

@@ -180,6 +180,7 @@ An example of using Drawer:
 
 ### storybook
 Try out our components 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.

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="dib align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>

components/CustomCard.svelte

@@ -25,7 +25,7 @@
     }
 </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>

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,7 +10,7 @@
   }
 </style>
 
-<div class="chip black flex justify-center aligned mb-1 mr-2 fs-14 br-16px">
+<div class="chip black flex justify-center aligned mb-1 mr-2 fs-14 br-16px {$$props.class}">
   <div class="chip-content flex aligned">
     <slot></slot>
   </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>

stories/Badge.stories.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Badge } from "../"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    class: '', //only works for global classes
+    color: 'gray'
+  }
+</script>
+
+<Meta
+  title="Atoms/Badge"
+  component={Badge}
+/>
+
+<Template let:args>
+  <Badge {...args}>S</Badge>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="Blue"
+  args={copyAndModifyArgs(args, {color: 'blue'})}
+/>

stories/CustomCard.stories.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { CustomCard } from "../"
+  import { copyAndModifyArgs } from "./helpers.js"
+
+  const args = {
+    class: '', //only works for global classes
+  }
+</script>
+
+<Meta
+  title="Molecule/CustomCard"
+  component={CustomCard}
+/>
+
+<Template let:args>
+  <CustomCard {...args}></CustomCard>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>
+
+<Story
+  name="FooterText"
+  args={copyAndModifyArgs(args, {footerText: 'Here is some footertext'})}
+/>
+
+<Story
+  name="Icon"
+  args={copyAndModifyArgs(args, {icon: 'face'})}
+/>
+
+<Story
+  name="Buttons"
+  args={copyAndModifyArgs(args, {buttons: [{label: 'return to root', url: './'}]})}
+/>
+
+<Story
+  name="Disabled"
+  args={copyAndModifyArgs(args, {disabled: true})}
+/>

stories/Form.stories.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf"
+  import { Form, TextField } from "../"
+
+  const args = {
+    class: '', //only works for global classes
+    onSubmit: () => {}
+  }
+</script>
+
+<Meta
+  title="Molecule/Form"
+  component={Form}
+/>
+
+<Template let:args>
+  <Form on:submit={args.onSubmit} {...args}>
+    <TextField></TextField>
+  </Form>
+</Template>
+
+<Story
+  name="Default"
+  {args}
+/>