feat(tabs): added disable and tabHeaderHtml capability

you can now disable tabs and render html as tab headers!
freshworks · Jun 17, 2020 · 4ec6be8 · 4ec6be8
1 parent cc53bd4
commit 4ec6be8
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 20 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -299,13 +299,17 @@ export namespace Components {
     }
     interface FwTab {
         /**
-          * Message that is displayed when a user navigates away from a tab.
+          * Disables this tab
          */
-        "message": string;
+        "disabled": boolean;
         /**
           * Name of the tab displayed on the UI.
          */
         "tabHeader": string;
+        /**
+          * HTML that can be rendered in tab header.
+         */
+        "tabHeaderHtml": string;
     }
     interface FwTabs {
     }
@@ -918,15 +922,23 @@ declare namespace LocalJSX {
     }
     interface FwTab {
         /**
-          * Message that is displayed when a user navigates away from a tab.
+          * Disables this tab
          */
-        "message"?: string;
+        "disabled"?: boolean;
         /**
           * Name of the tab displayed on the UI.
          */
         "tabHeader"?: string;
+        /**
+          * HTML that can be rendered in tab header.
+         */
+        "tabHeaderHtml"?: string;
     }
     interface FwTabs {
+        /**
+          * Triggered when a the view switches to a new tab.
+         */
+        "onFwChange"?: (event: CustomEvent<any>) => void;
     }
     interface FwTag {
         /**

diff --git a/src/components/tab/readme.md b/src/components/tab/readme.md
@@ -7,10 +7,11 @@ fw-tab provides child elements for fw-tabs, to enable tab style navigation.
 
 ## Properties
 
-| Property    | Attribute    | Description                                                      | Type     | Default     |
-| ----------- | ------------ | ---------------------------------------------------------------- | -------- | ----------- |
-| `message`   | `message`    | Message that is displayed when a user navigates away from a tab. | `string` | `undefined` |
-| `tabHeader` | `tab-header` | Name of the tab displayed on the UI.                             | `string` | `undefined` |
+| Property        | Attribute         | Description                              | Type      | Default     |
+| --------------- | ----------------- | ---------------------------------------- | --------- | ----------- |
+| `disabled`      | `disabled`        | Disables this tab                        | `boolean` | `undefined` |
+| `tabHeader`     | `tab-header`      | Name of the tab displayed on the UI.     | `string`  | `undefined` |
+| `tabHeaderHtml` | `tab-header-html` | HTML that can be rendered in tab header. | `string`  | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
@@ -13,9 +13,14 @@ export class Tab {
   @Prop() tabHeader: string;
 
   /**
-   * Message that is displayed when a user navigates away from a tab.
+   * HTML that can be rendered in tab header.
    */
-  @Prop() message: string;
+  @Prop() tabHeaderHtml: string;
+
+  /**
+   * Disables this tab
+   */
+  @Prop() disabled: boolean;
 
   render() {
     return (

diff --git a/src/components/tabs/readme.md b/src/components/tabs/readme.md
@@ -35,6 +35,13 @@ fw-tabs displays a series of tabs on the user interface and enables tab-style na
 <!-- Auto Generated Below -->
 
 
+## Events
+
+| Event      | Description                                      | Type               |
+| ---------- | ------------------------------------------------ | ------------------ |
+| `fwChange` | Triggered when a the view switches to a new tab. | `CustomEvent<any>` |
+
+
 ## CSS Custom Properties
 
 | Name                     | Description                    |

diff --git a/src/components/tabs/tabs.e2e.ts b/src/components/tabs/tabs.e2e.ts
@@ -66,7 +66,7 @@ describe('fw-tabs', () => {
             </div>
           </li>
           <li class="tabs__item">
-            <div class="tabs__item__nav" id="#tab-2">
+            <div class="disabled tabs__item__nav" id="#tab-2">
               <span class="tab-title--tab-icon">
                 <span class="tab-title">
                   Tab 3

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
@@ -59,6 +59,7 @@
 
       &.disabled {
         cursor: not-allowed;
+        opacity: 0.7;
       }
     }
 

diff --git a/src/components/tabs/tabs.stories.mdx b/src/components/tabs/tabs.stories.mdx
@@ -35,6 +35,29 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 </Preview>
 
 
+### Default
+<Preview>
+<Story name='With HTML Headers'>{() => `
+<fw-tabs>
+  <fw-tab tab-header-html="<i>Tab 1</i>">
+    <section>
+        <p>Tab 1 Content</P>
+    </section>
+  </fw-tab>
+  <fw-tab tab-header-html="<h2>Tab 2</h2>">
+        <p>Tab 2 Content</P>
+  </fw-tab>
+  <fw-tab tab-header-html="<h3>Tab 3</h3>" disabled>
+    <p>TAB 3 Content</p>
+  </fw-tab>
+  <fw-tab tab-header-html="<h3>Tab 4</h3>">
+    <p>TAB 4 Content</p>
+  </fw-tab>
+</fw-tabs>
+`}</Story>
+</Preview>
+
+
 ### With Child components
 <Preview>
 <Story name='With Child Components'>{() => `

diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
@@ -1,6 +1,8 @@
 import {
   Component,
   Element,
+  Event,
+  EventEmitter,
   State,
   h
 } from '@stencil/core';
@@ -24,25 +26,33 @@ export class Tabs {
    * Active tab indec
    */
   @State()
-  activeTabIndex = 0;
+  activeTabIndex = undefined;
 
   /**
    * Active class for tab container
    */
   @State()
   activeChildClass = '';
 
+  /**
+   * Triggered when a the view switches to a new tab.
+   */
+  @Event() fwChange: EventEmitter;
+
   init() {
     this.tabs = Array.from(this.el.querySelectorAll('fw-tab'));
     this.displayTab(0);
   }
 
   displayTab(index: number) {
-    this.activeTabIndex = index;
-    this.tabs = this.tabs?.map((tab, i) => {
-      tab.style.display = index === i ? 'block' : 'none';
-      return tab;
-    });
+    if (index !== this.activeTabIndex) {
+      this.fwChange.emit({ tabIndex: this.activeTabIndex });
+      this.activeTabIndex = index;
+      this.tabs = this.tabs?.map((tab, i) => {
+        tab.style.display = index === i ? 'block' : 'none';
+        return tab;
+      });
+    }
   }
 
   componentWillLoad() {
@@ -72,10 +82,14 @@ export class Tabs {
       <div class="tabs">
         <ul role="tablist" class="tabs__items">
           {this.tabs.map((tab, index) =>
-            <li onClick={() => this.displayTab(index)} class="tabs__item">
-              <div id={'#tab-' + index} class={'tabs__item__nav ' + (index === this.activeTabIndex ? 'active' : '')}>
+            <li onClick={() => tab.disabled ? '' : this.displayTab(index)} class="tabs__item">
+              <div id={'#tab-' + index} class={'tabs__item__nav ' + (index === this.activeTabIndex ? 'active' : '') + (tab.disabled ? 'disabled' : '')}>
                 <span class="tab-title--tab-icon">
-                  <span class="tab-title">{tab.tabHeader}</span>
+                  {
+                    tab.tabHeaderHtml
+                    ? <span innerHTML={tab.tabHeaderHtml}></span>
+                    : <span class="tab-title">{tab.tabHeader}</span>
+                  }
                 </span>
               </div>
             </li>