Merge pull request #210 from IBM/content-switcher

feat(content-switcher): support light variant

src/ContentSwitcher/ContentSwitcher.Story.svelte

@@ -1,5 +1,6 @@
 <script>
   export let story = undefined;
+  export let light = false;
 
   import ContentSwitcher from "./ContentSwitcher.svelte";
   import Switch from "./Switch.svelte";
@@ -11,6 +12,7 @@
 
 {#if story === 'selected'}
   <ContentSwitcher
+    {light}
     on:change={({ detail }) => {
       console.log('on:change', detail);
     }}>
@@ -20,6 +22,7 @@
   </ContentSwitcher>
 {:else}
   <ContentSwitcher
+    {light}
     bind:selectedIndex
     on:change={({ detail }) => {
       console.log('on:change', detail);

src/ContentSwitcher/ContentSwitcher.stories.js

@@ -5,7 +5,10 @@ export default { title: "ContentSwitcher", decorators: [withKnobs] };
 
 export const Default = () => ({
   Component,
-  props: { disabled: boolean("Disabled (disabled)", false) },
+  props: {
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+  },
 });
 
 export const Selected = () => ({
@@ -13,5 +16,6 @@ export const Selected = () => ({
   props: {
     story: "selected",
     disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
   },
 });

src/ContentSwitcher/ContentSwitcher.svelte

@@ -1,5 +1,6 @@
 <script>
   export let selectedIndex = 0;
+  export let light = false;
 
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -49,6 +50,7 @@
 <div
   role="tablist"
   class:bx--content-switcher={true}
+  class:bx--content-switcher--light={light}
   {...$$restProps}
   on:click
   on:mouseover