From 9a78f9900d05e92f9344bf6aa83f6f47129a1b51 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jul 2020 19:58:33 -0700
Subject: [PATCH] feat(content-switcher): support light variant

---
 src/ContentSwitcher/ContentSwitcher.Story.svelte | 3 +++
 src/ContentSwitcher/ContentSwitcher.stories.js   | 6 +++++-
 src/ContentSwitcher/ContentSwitcher.svelte       | 2 ++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/ContentSwitcher/ContentSwitcher.Story.svelte b/src/ContentSwitcher/ContentSwitcher.Story.svelte
index fce5687e..81875b9f 100644
--- a/src/ContentSwitcher/ContentSwitcher.Story.svelte
+++ b/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);
diff --git a/src/ContentSwitcher/ContentSwitcher.stories.js b/src/ContentSwitcher/ContentSwitcher.stories.js
index 43de4986..676b4898 100644
--- a/src/ContentSwitcher/ContentSwitcher.stories.js
+++ b/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),
   },
 });
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 80a6e302..a3c5502f 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/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