From 3edf9ea2a2ff80b33312236afd3026ce8befee64 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 16:31:07 -0700
Subject: [PATCH] feat(content-switcher): add "sm", "xl" size variants

---
 COMPONENT_INDEX.md                            |  9 +++++----
 docs/src/pages/components/ContentSwitcher.svx | 16 ++++++++++++++++
 src/ContentSwitcher/ContentSwitcher.svelte    |  7 +++++++
 types/index.d.ts                              |  7 ++++++-
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c1c105f3..7d722f42 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -857,10 +857,11 @@ import { ContentSwitcher } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name     | Type                 | Default value |
-| :------------ | :------------------- | :------------ |
-| selectedIndex | <code>number</code>  | 0             |
-| light         | <code>boolean</code> | false         |
+| Prop name     | Type                          | Default value |
+| :------------ | :---------------------------- | :------------ |
+| selectedIndex | <code>number</code>           | 0             |
+| light         | <code>boolean</code>          | false         |
+| size          | <code>"sm" &#124; "xl"</code> | --            |
 
 ### Slots
 
diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index 0a60a60f..a9c00922 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -31,6 +31,22 @@
   <Switch text="Switch 2" />
 </ContentSwitcher>
 
+### Extra-large size
+
+<ContentSwitcher size="xl">
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+
+### Small size
+
+<ContentSwitcher size="sm">
+  <Switch text="Switch 1" />
+  <Switch text="Switch 2" />
+  <Switch text="Switch 3" />
+</ContentSwitcher>
+
 ### Disabled
 
 <ContentSwitcher>
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index 791590bb..a4e86eb8 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -11,6 +11,12 @@
    */
   export let light = false;
 
+  /**
+   * Specify the size of the content switcher
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
   import { afterUpdate, createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
 
@@ -61,6 +67,7 @@
   class:bx--content-switcher="{true}"
   class:bx--content-switcher--light="{light}"
   {...$$restProps}
+  class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter
diff --git a/types/index.d.ts b/types/index.d.ts
index 56024cf9..5b2e8b1c 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -261,7 +261,7 @@ export class ButtonSkeleton extends CarbonSvelteComponent {
     size?: "default" | "field" | "small";
 
     /**
-     *
+     * Set to `true` to use the small variant
      * @default false
      */
     small?: boolean;
@@ -717,6 +717,11 @@ export class ContentSwitcher extends CarbonSvelteComponent {
      * @default false
      */
     light?: boolean;
+
+    /**
+     * Specify the size of the content switcher
+     */
+    size?: "sm" | "xl";
   };
 
   $$slot_def: { default: {} };