From c06aa929788a6beae39ff782164609ecbf863f5b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 27 Jul 2020 20:13:56 -0700
Subject: [PATCH] chore(tabs): document prop types

---
 src/Tabs/Tab.svelte        | 34 +++++++++++++++++++++++++-----
 src/Tabs/TabContent.svelte |  4 +---
 src/Tabs/Tabs.svelte       | 42 ++++++++++++++++++++++++++++----------
 3 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 89b1e879..2e830a4a 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -1,8 +1,27 @@
 <script>
-  export let disabled = false;
-  export let href = "#";
+  /**
+   * Specify the tab label
+   * Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
+   * @type {string} [label=""]
+   */
   export let label = "";
-  export let role = "presentation";
+
+  /**
+   * Specify the href attribute
+   * @type {string} [href="#"]
+   */
+  export let href = "#";
+
+  /**
+   * Set to `true` to disable the tab
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
 
   /**
@@ -10,6 +29,11 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the anchor HTML element
+   * @type {null | HTMLAnchorElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext } from "svelte";
@@ -26,7 +50,7 @@
 
 <li
   tabindex="-1"
-  {role}
+  role="presentation"
   {id}
   class:bx--tabs__nav-item={true}
   class:bx--tabs__nav-item--disabled={disabled}
@@ -59,6 +83,6 @@
     aria-disabled={disabled}
     {href}
     class:bx--tabs__nav-link={true}>
-    {label}
+    <slot>{label}</slot>
   </a>
 </li>
diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte
index 6801011c..ed2a62da 100644
--- a/src/Tabs/TabContent.svelte
+++ b/src/Tabs/TabContent.svelte
@@ -18,9 +18,7 @@
   aria-hidden={!selected}
   hidden={!selected}
   {id}
-  {...$$restProps}
   class:bx--tab-content={true}
-  class={$$restProps.class}
-  style={$$restProps.style}>
+  {...$$restProps}>
   <slot />
 </div>
diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte
index 20d76dee..6bcde363 100644
--- a/src/Tabs/Tabs.svelte
+++ b/src/Tabs/Tabs.svelte
@@ -1,25 +1,42 @@
 <script>
-  export let iconDescription = "Show menu options";
-  export let role = "navigation";
+  /**
+   * Specify the selected tab index
+   * @type {number} [selected=0]
+   */
   export let selected = 0;
-  export let triggerHref = "#";
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"} [type="default"]
+   */
   export let type = "default";
 
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
+  export let iconDescription = "Show menu options";
+
+  /**
+   * Specify the tab trigger href attribute
+   * @type {string} [triggerHref="#"]
+   */
+  export let triggerHref = "#";
+
   import { createEventDispatcher, afterUpdate, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
 
   const dispatch = createEventDispatcher();
 
-  let dropdownHidden = true;
-  let tabs = writable([]);
-  let tabsById = derived(tabs, (_) =>
+  const tabs = writable([]);
+  const tabsById = derived(tabs, (_) =>
     _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
   );
-  let currentIndex = selected;
-  let selectedTab = writable(undefined);
-  let content = writable([]);
-  let selectedContent = writable(undefined);
+
+  const selectedTab = writable(undefined);
+  const content = writable([]);
+  const selectedContent = writable(undefined);
 
   setContext("Tabs", {
     selectedTab,
@@ -64,6 +81,9 @@
     selected = currentIndex;
   });
 
+  let dropdownHidden = true;
+  let currentIndex = selected;
+
   $: currentIndex = selected;
   $: currentTab = $tabs[currentIndex] || undefined;
   $: currentContent = $content[currentIndex] || undefined;
@@ -84,7 +104,7 @@
 </script>
 
 <div
-  {role}
+  role="navigation"
   class:bx--tabs={true}
   class:bx--tabs--container={type === 'container'}
   {...$$restProps}>