From f51406cb2971aeb5b93dd9ad8e030d10535f15bf Mon Sep 17 00:00:00 2001 From: adoroshk Date: Wed, 29 Nov 2023 14:34:59 +0000 Subject: [PATCH] deploy: 249074f8216b6c3cd1b135c8e2fe6e978c054b35 --- ...84ca264df59d6ac2624.css => 13893-da514f2c09ec99b871f7.css} | 0 ...-384ca264df59d6ac2624.js => 13893-da514f2c09ec99b871f7.js} | 2 +- ...72715ee5257466853d5.css => 28905-5f46fd89017d90ceb720.css} | 0 ...-c72715ee5257466853d5.js => 28905-5f46fd89017d90ceb720.js} | 0 ...8319d4930c3ed7b4eda.css => 42673-fd56af9f90298b7c3429.css} | 0 ...-58319d4930c3ed7b4eda.js => 42673-fd56af9f90298b7c3429.js} | 2 +- ...35d2906fb3b76084f16.css => 46944-71d5651aea99c897dddd.css} | 0 ...-335d2906fb3b76084f16.js => 46944-71d5651aea99c897dddd.js} | 0 pull/1916/47782-4297fb349c92fb5ff39b.js | 1 - ...297fb349c92fb5ff39b.css => 47782-9a954b209972f27d3c9a.css} | 0 pull/1916/47782-9a954b209972f27d3c9a.js | 1 + ...81216a5347e7facaf2e.css => 54380-de0e4e15779c56c8a22c.css} | 0 ...-781216a5347e7facaf2e.js => 54380-de0e4e15779c56c8a22c.js} | 0 ...05991053288ac544292.css => 54545-94ea1a4cc329c6004ce0.css} | 2 +- ...-305991053288ac544292.js => 54545-94ea1a4cc329c6004ce0.js} | 0 ...d0b7676c2f0785eec93.css => 59726-ef565c78acbcfe661e97.css} | 0 ...-dd0b7676c2f0785eec93.js => 59726-ef565c78acbcfe661e97.js} | 0 ...519a0711fef55c0bb48.css => 75611-2c382a3b8afb255fadc0.css} | 0 ...-1519a0711fef55c0bb48.js => 75611-2c382a3b8afb255fadc0.js} | 2 +- ...93111732a3e70feddf9.css => 76018-bbb25ad3677855f8b3e1.css} | 0 ...-593111732a3e70feddf9.js => 76018-bbb25ad3677855f8b3e1.js} | 0 pull/1916/77138-37b544fc3135a922379a.js | 1 - ...7b544fc3135a922379a.css => 77138-af1fdce68d5ed22e7f90.css} | 0 pull/1916/77138-af1fdce68d5ed22e7f90.js | 1 + pull/1916/84923-4b9ee0e069b8f6680ab2.js | 1 - ...b9ee0e069b8f6680ab2.css => 84923-a17fc4f0bd5f0a039dde.css} | 0 pull/1916/84923-a17fc4f0bd5f0a039dde.js | 1 + ...321ba3d723daff011fd.css => 90445-bde083c6571774f65084.css} | 0 ...-a321ba3d723daff011fd.js => 90445-bde083c6571774f65084.js} | 0 ...9d5cd02a622ee6bb0c4.css => 91016-5d0c5256185abe3c54e6.css} | 0 ...-d9d5cd02a622ee6bb0c4.js => 91016-5d0c5256185abe3c54e6.js} | 0 ...238e704318ba6d251e6.css => index-3573256da02dca867acb.css} | 0 ...-2238e704318ba6d251e6.js => index-3573256da02dca867acb.js} | 4 ++-- ....LICENSE.txt => index-3573256da02dca867acb.js.LICENSE.txt} | 0 pull/1916/index.html | 2 +- 35 files changed, 10 insertions(+), 10 deletions(-) rename pull/1916/{13893-384ca264df59d6ac2624.css => 13893-da514f2c09ec99b871f7.css} (100%) rename pull/1916/{13893-384ca264df59d6ac2624.js => 13893-da514f2c09ec99b871f7.js} (99%) rename pull/1916/{28905-c72715ee5257466853d5.css => 28905-5f46fd89017d90ceb720.css} (100%) rename pull/1916/{28905-c72715ee5257466853d5.js => 28905-5f46fd89017d90ceb720.js} (100%) rename pull/1916/{42673-58319d4930c3ed7b4eda.css => 42673-fd56af9f90298b7c3429.css} (100%) rename pull/1916/{42673-58319d4930c3ed7b4eda.js => 42673-fd56af9f90298b7c3429.js} (99%) rename pull/1916/{46944-335d2906fb3b76084f16.css => 46944-71d5651aea99c897dddd.css} (100%) rename pull/1916/{46944-335d2906fb3b76084f16.js => 46944-71d5651aea99c897dddd.js} (100%) delete mode 100644 pull/1916/47782-4297fb349c92fb5ff39b.js rename pull/1916/{47782-4297fb349c92fb5ff39b.css => 47782-9a954b209972f27d3c9a.css} (100%) create mode 100644 pull/1916/47782-9a954b209972f27d3c9a.js rename pull/1916/{54380-781216a5347e7facaf2e.css => 54380-de0e4e15779c56c8a22c.css} (100%) rename pull/1916/{54380-781216a5347e7facaf2e.js => 54380-de0e4e15779c56c8a22c.js} (100%) rename pull/1916/{54545-305991053288ac544292.css => 54545-94ea1a4cc329c6004ce0.css} (99%) rename pull/1916/{54545-305991053288ac544292.js => 54545-94ea1a4cc329c6004ce0.js} (100%) rename pull/1916/{59726-dd0b7676c2f0785eec93.css => 59726-ef565c78acbcfe661e97.css} (100%) rename pull/1916/{59726-dd0b7676c2f0785eec93.js => 59726-ef565c78acbcfe661e97.js} (100%) rename pull/1916/{75611-1519a0711fef55c0bb48.css => 75611-2c382a3b8afb255fadc0.css} (100%) rename pull/1916/{75611-1519a0711fef55c0bb48.js => 75611-2c382a3b8afb255fadc0.js} (99%) rename pull/1916/{76018-593111732a3e70feddf9.css => 76018-bbb25ad3677855f8b3e1.css} (100%) rename pull/1916/{76018-593111732a3e70feddf9.js => 76018-bbb25ad3677855f8b3e1.js} (100%) delete mode 100644 pull/1916/77138-37b544fc3135a922379a.js rename pull/1916/{77138-37b544fc3135a922379a.css => 77138-af1fdce68d5ed22e7f90.css} (100%) create mode 100644 pull/1916/77138-af1fdce68d5ed22e7f90.js delete mode 100644 pull/1916/84923-4b9ee0e069b8f6680ab2.js rename pull/1916/{84923-4b9ee0e069b8f6680ab2.css => 84923-a17fc4f0bd5f0a039dde.css} (100%) create mode 100644 pull/1916/84923-a17fc4f0bd5f0a039dde.js rename pull/1916/{90445-a321ba3d723daff011fd.css => 90445-bde083c6571774f65084.css} (100%) rename pull/1916/{90445-a321ba3d723daff011fd.js => 90445-bde083c6571774f65084.js} (100%) rename pull/1916/{91016-d9d5cd02a622ee6bb0c4.css => 91016-5d0c5256185abe3c54e6.css} (100%) rename pull/1916/{91016-d9d5cd02a622ee6bb0c4.js => 91016-5d0c5256185abe3c54e6.js} (100%) rename pull/1916/{index-2238e704318ba6d251e6.css => index-3573256da02dca867acb.css} (100%) rename pull/1916/{index-2238e704318ba6d251e6.js => index-3573256da02dca867acb.js} (86%) rename pull/1916/{index-2238e704318ba6d251e6.js.LICENSE.txt => index-3573256da02dca867acb.js.LICENSE.txt} (100%) diff --git a/pull/1916/13893-384ca264df59d6ac2624.css b/pull/1916/13893-da514f2c09ec99b871f7.css similarity index 100% rename from pull/1916/13893-384ca264df59d6ac2624.css rename to pull/1916/13893-da514f2c09ec99b871f7.css diff --git a/pull/1916/13893-384ca264df59d6ac2624.js b/pull/1916/13893-da514f2c09ec99b871f7.js similarity index 99% rename from pull/1916/13893-384ca264df59d6ac2624.js rename to pull/1916/13893-da514f2c09ec99b871f7.js index 10d02fbc3f6..f005e4f515d 100644 --- a/pull/1916/13893-384ca264df59d6ac2624.js +++ b/pull/1916/13893-da514f2c09ec99b871f7.js @@ -1 +1 @@ -"use strict";(self.webpackChunkterra_framework=self.webpackChunkterra_framework||[]).push([[13893],{22863:function(t,a,r){var e=r(64836);a.Z=void 0;var n=e(r(67294)),l=e(r(45697)),d=e(r(47166)),o=e(r(17422)),m=d.default.bind(o.default),u={name:l.default.string.isRequired,src:l.default.string,url:l.default.string,version:l.default.string.isRequired},s=function(t){var a=t.src,r=t.name,e=t.url,l=t.version,d=n.default.createElement("a",{className:m("badge"),href:e||"https://www.npmjs.org/package/".concat(r,"/v/").concat(l)},n.default.createElement("span",{className:m("badge-name")},e?"package":"npm"),n.default.createElement("span",{className:m("badge-version")},"v".concat(l))),o=a?n.default.createElement("a",{className:m("badge"),href:a},n.default.createElement("span",{className:m("badge-name")},"github"),n.default.createElement("span",{className:m("badge-version")},"source")):void 0;return n.default.createElement("div",{className:m("badge-container")},d,o)};s.propTypes=u;var b=s;a.Z=b},13893:function(t,a,r){r.r(a),r.d(a,{default:function(){return s}});var e=r(87462),n=r(44925),l=(r(67294),r(81254)),d=r(63718),o=["components"],m={},u="wrapper";function s(t){var a=t.components,r=(0,n.Z)(t,o);return(0,l.mdx)(u,(0,e.Z)({},m,r,{components:a,mdxType:"MDXLayout"}),(0,l.mdx)(d.C,{mdxType:"Badge"}),(0,l.mdx)("h1",{id:"terra-tabs-upgrade-guide"},"Terra Tabs Upgrade Guide"),(0,l.mdx)("h2",{id:"changes-from-version-6-to-version-7"},"Changes from version 6 to version 7"),(0,l.mdx)("h3",{id:"removed-props"},"Removed props"),(0,l.mdx)("ul",null,(0,l.mdx)("li",{parentName:"ul"},"Removed responsiveTo")),(0,l.mdx)("h2",{id:"changes-from-version-3-to-version-4"},"Changes from version 3 to version 4"),(0,l.mdx)("h3",{id:"changes-to-css-custom-properties"},"Changes to CSS Custom Properties"),(0,l.mdx)("h4",{id:"renamed"},"Renamed"),(0,l.mdx)("table",null,(0,l.mdx)("thead",{parentName:"table"},(0,l.mdx)("tr",{parentName:"thead"},(0,l.mdx)("th",{parentName:"tr",align:null},"Previous"),(0,l.mdx)("th",{parentName:"tr",align:null},"New"))),(0,l.mdx)("tbody",{parentName:"table"},(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-width"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-bottom-width")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-active-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-hover-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-width"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-bottom-width")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-disabled-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-disabled-hover-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-background-image"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-active-focus-background-image")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-focus-border-radius"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-active-focus-border-radius")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-rtl-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-active-focus-rtl-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-ltr-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-active-focus-ltr-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-selection-bar-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-selection-bar-background-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-menu-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-menu-bar-border-radius"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-border-radius")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-width"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-bottom-width")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-margin-between-tabs"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-between-tabs-margin-left")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-timing"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-timing-function")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-duration"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-active-before-transition-duration")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-timing"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-active-before-transition-timing-function")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-background-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-hover-background-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-hover-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-opacity"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-hover-opacity")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-background-image"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-active-focus-background-image")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-rtl-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-active-focus-rtl-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-ltr-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-active-focus-ltr-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-label-margin-next-to-icon"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-label-next-to-icon-margin-left")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-menu-arrow-left-margin"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-menu-arrow-margin-left")))),(0,l.mdx)("h4",{id:"added"},"Added"),(0,l.mdx)("ul",null,(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-content-background-image"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-border-bottom-width"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-position"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-before-content-background"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-before-content-height"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-extended-tabs-border-radius"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-active-background-image"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-focus-background-image"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-menu-bar-focus-border-bottom-color"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-menu-bar-focus-border-bottom-width")))}s.isMDXComponent=!0},63718:function(t,a,r){r.d(a,{C:function(){return l}});var e=r(67294),n=r(22863),l=function(t){var a=t.url;return e.createElement(n.Z,{src:"https://github.com/cerner/terra-framework/tree/main/packages/terra-tabs",name:"terra-tabs",version:"7.12.0",url:a})}},17422:function(t,a,r){r.r(a),a.default={badge:"Badges-module__badge___vex-+","badge-container":"Badges-module__badge-container___B13Mv","badge-name":"Badges-module__badge-name___jkN0m","badge-version":"Badges-module__badge-version___agZ+P"}},87462:function(t,a,r){function e(){return e=Object.assign?Object.assign.bind():function(t){for(var a=1;a=0||(n[r]=t[r]);return n}(t,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(e=0;e=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}r.d(a,{Z:function(){return e}})}}]); \ No newline at end of file +"use strict";(self.webpackChunkterra_framework=self.webpackChunkterra_framework||[]).push([[13893],{22863:function(t,a,r){var e=r(64836);a.Z=void 0;var n=e(r(67294)),l=e(r(45697)),d=e(r(47166)),o=e(r(17422)),m=d.default.bind(o.default),u={name:l.default.string.isRequired,src:l.default.string,url:l.default.string,version:l.default.string.isRequired},s=function(t){var a=t.src,r=t.name,e=t.url,l=t.version,d=n.default.createElement("a",{className:m("badge"),href:e||"https://www.npmjs.org/package/".concat(r,"/v/").concat(l)},n.default.createElement("span",{className:m("badge-name")},e?"package":"npm"),n.default.createElement("span",{className:m("badge-version")},"v".concat(l))),o=a?n.default.createElement("a",{className:m("badge"),href:a},n.default.createElement("span",{className:m("badge-name")},"github"),n.default.createElement("span",{className:m("badge-version")},"source")):void 0;return n.default.createElement("div",{className:m("badge-container")},d,o)};s.propTypes=u;var b=s;a.Z=b},13893:function(t,a,r){r.r(a),r.d(a,{default:function(){return s}});var e=r(87462),n=r(44925),l=(r(67294),r(81254)),d=r(63718),o=["components"],m={},u="wrapper";function s(t){var a=t.components,r=(0,n.Z)(t,o);return(0,l.mdx)(u,(0,e.Z)({},m,r,{components:a,mdxType:"MDXLayout"}),(0,l.mdx)(d.C,{mdxType:"Badge"}),(0,l.mdx)("h1",{id:"terra-tabs-upgrade-guide"},"Terra Tabs Upgrade Guide"),(0,l.mdx)("h2",{id:"changes-from-version-6-to-version-7"},"Changes from version 6 to version 7"),(0,l.mdx)("h3",{id:"removed-props"},"Removed props"),(0,l.mdx)("ul",null,(0,l.mdx)("li",{parentName:"ul"},"Removed responsiveTo")),(0,l.mdx)("h2",{id:"changes-from-version-3-to-version-4"},"Changes from version 3 to version 4"),(0,l.mdx)("h3",{id:"changes-to-css-custom-properties"},"Changes to CSS Custom Properties"),(0,l.mdx)("h4",{id:"renamed"},"Renamed"),(0,l.mdx)("table",null,(0,l.mdx)("thead",{parentName:"table"},(0,l.mdx)("tr",{parentName:"thead"},(0,l.mdx)("th",{parentName:"tr",align:null},"Previous"),(0,l.mdx)("th",{parentName:"tr",align:null},"New"))),(0,l.mdx)("tbody",{parentName:"table"},(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-width"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-collapsed-modular-tab-bar-border-bottom-width")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-active-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-hover-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-width"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-tab-bar-border-bottom-width")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-disabled-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-disabled-hover-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-background-image"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-active-focus-background-image")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-focus-border-radius"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-active-focus-border-radius")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-rtl-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-active-focus-rtl-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-ltr-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-active-focus-ltr-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-selection-bar-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-modular-selection-bar-background-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-menu-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-menu-bar-border-radius"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-collapsed-border-radius")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-bottom-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-width"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-tab-bar-border-bottom-width")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-margin-between-tabs"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-between-tabs-margin-left")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-timing"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-timing-function")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-duration"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-active-before-transition-duration")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-transition-timing"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-active-before-transition-timing-function")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-background-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-hover-background-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-color"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-hover-color")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-opacity"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-disabled-hover-opacity")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-background-image"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-structural-active-focus-background-image")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-rtl-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-active-focus-rtl-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-focus-ltr-box-shadow"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-keyboard-active-focus-ltr-box-shadow")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-label-margin-next-to-icon"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-label-next-to-icon-margin-left")),(0,l.mdx)("tr",{parentName:"tbody"},(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-menu-arrow-left-margin"),(0,l.mdx)("td",{parentName:"tr",align:null},"--terra-tabs-menu-arrow-margin-left")))),(0,l.mdx)("h4",{id:"added"},"Added"),(0,l.mdx)("ul",null,(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-content-background-image"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-border-bottom-width"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-position"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-before-content-background"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-before-content-height"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-extended-tabs-border-radius"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-active-background-image"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-focus-background-image"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-menu-bar-focus-border-bottom-color"),(0,l.mdx)("li",{parentName:"ul"},"--terra-tabs-structural-collapsed-menu-bar-focus-border-bottom-width")))}s.isMDXComponent=!0},63718:function(t,a,r){r.d(a,{C:function(){return l}});var e=r(67294),n=r(22863),l=function(t){var a=t.url;return e.createElement(n.Z,{src:"https://github.com/cerner/terra-framework/tree/main/packages/terra-tabs",name:"terra-tabs",version:"7.13.0",url:a})}},17422:function(t,a,r){r.r(a),a.default={badge:"Badges-module__badge___vex-+","badge-container":"Badges-module__badge-container___B13Mv","badge-name":"Badges-module__badge-name___jkN0m","badge-version":"Badges-module__badge-version___agZ+P"}},87462:function(t,a,r){function e(){return e=Object.assign?Object.assign.bind():function(t){for(var a=1;a=0||(n[r]=t[r]);return n}(t,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(e=0;e=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}r.d(a,{Z:function(){return e}})}}]); \ No newline at end of file diff --git a/pull/1916/28905-c72715ee5257466853d5.css b/pull/1916/28905-5f46fd89017d90ceb720.css similarity index 100% rename from pull/1916/28905-c72715ee5257466853d5.css rename to pull/1916/28905-5f46fd89017d90ceb720.css diff --git a/pull/1916/28905-c72715ee5257466853d5.js b/pull/1916/28905-5f46fd89017d90ceb720.js similarity index 100% rename from pull/1916/28905-c72715ee5257466853d5.js rename to pull/1916/28905-5f46fd89017d90ceb720.js diff --git a/pull/1916/42673-58319d4930c3ed7b4eda.css b/pull/1916/42673-fd56af9f90298b7c3429.css similarity index 100% rename from pull/1916/42673-58319d4930c3ed7b4eda.css rename to pull/1916/42673-fd56af9f90298b7c3429.css diff --git a/pull/1916/42673-58319d4930c3ed7b4eda.js b/pull/1916/42673-fd56af9f90298b7c3429.js similarity index 99% rename from pull/1916/42673-58319d4930c3ed7b4eda.js rename to pull/1916/42673-fd56af9f90298b7c3429.js index 8e2b126f92f..a7abdd5ae9c 100644 --- a/pull/1916/42673-58319d4930c3ed7b4eda.js +++ b/pull/1916/42673-fd56af9f90298b7c3429.js @@ -1 +1 @@ -(self.webpackChunkterra_framework=self.webpackChunkterra_framework||[]).push([[42673],{22863:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(45697)),r=t(a(47166)),i=t(a(17422)),s=r.default.bind(i.default),d={name:o.default.string.isRequired,src:o.default.string,url:o.default.string,version:o.default.string.isRequired},c=function(e){var n=e.src,a=e.name,t=e.url,o=e.version,r=l.default.createElement("a",{className:s("badge"),href:t||"https://www.npmjs.org/package/".concat(a,"/v/").concat(o)},l.default.createElement("span",{className:s("badge-name")},t?"package":"npm"),l.default.createElement("span",{className:s("badge-version")},"v".concat(o))),i=n?l.default.createElement("a",{className:s("badge"),href:n},l.default.createElement("span",{className:s("badge-name")},"github"),l.default.createElement("span",{className:s("badge-version")},"source")):void 0;return l.default.createElement("div",{className:s("badge-container")},r,i)};c.propTypes=d;var m=c;n.Z=m},49271:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(27424)),r=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!==l(e)&&"function"!=typeof e)return{default:e};var a=b(n);if(a&&a.has(e))return a.get(e);var t={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}t.default=e,a&&a.set(e,t);return t}(a(67294)),i=t(a(45697)),s=t(a(47166)),d=a(21538),c=t(a(33864)),m=t(a(23399)),u=a(51051),p=t(a(53560));function b(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(b=function(e){return e?a:n})(e)}var f=s.default.bind(p.default),y={example:i.default.element,exampleSrc:i.default.element,exampleCssSrc:i.default.element,title:i.default.string,description:i.default.node,isExpanded:i.default.bool},h=function(e){e.currentTarget.setAttribute("data-focus-styles-enabled","true")},T=function(e){e.currentTarget.setAttribute("data-focus-styles-enabled","false")},x=function(e){var n=e.example,a=e.exampleSrc,t=e.exampleCssSrc,l=e.title,i=e.description,s=e.isExpanded,p=(0,r.useState)(s),b=(0,o.default)(p,2),y=b[0],x=b[1],v=(0,r.useState)(!1),g=(0,o.default)(v,2),C=g[0],E=g[1],w=r.default.useContext(d.ThemeContext),P=void 0!==t,k=function(){E(!C),y&&x(!y)},N=function(){x(!y),C&&E(!C)},I=function(e,n){e.nativeEvent.keyCode!==u.KEY_SPACE&&e.nativeEvent.keyCode!==u.KEY_RETURN||(e.preventDefault(),n())};return r.default.createElement("div",{className:f("template",w.className)},r.default.createElement("div",{className:f("header")},l&&r.default.createElement("h2",{className:f("title")},l)),r.default.createElement("div",{className:f("content")},i&&r.default.createElement("div",{className:f("description")},i),n),r.default.createElement("div",{className:f("footer")},a?r.default.createElement("div",{className:f("button-container")},P&&r.default.createElement("button",{type:"button",className:f("css-toggle","item",{"is-selected":C}),onClick:k,onKeyDown:function(e){return I(e,k)},onBlur:h,onMouseDown:T,tabIndex:0,"data-focus-styles-enabled":!0},r.default.createElement(c.default,{className:f("chevron")}),r.default.createElement("span",null,"CSS"),r.default.createElement(m.default,{className:f("chevron")})),r.default.createElement("button",{type:"button",className:f("code-toggle","item",{"is-selected":y}),onClick:N,onKeyDown:function(e){return I(e,N)},onBlur:h,onMouseDown:T,tabIndex:0,"data-focus-styles-enabled":!0},r.default.createElement(c.default,{className:f("chevron")}),r.default.createElement("span",null,"Code"),r.default.createElement(m.default,{className:f("chevron")}))):null,r.default.createElement("div",null,C&&r.default.createElement("div",{className:f("css")},t),y&&r.default.createElement("div",{className:f("code")},a))))};x.propTypes=y,x.defaultProps={isExpanded:!1};var v=x;n.Z=v},42673:function(e,n,a){"use strict";a.r(n),a.d(n,{default:function(){return _e}});var t=a(87462),l=a(44925),o=a(67294),r=a(81254),i=a(63718),s=a(78530),d=["components"],c={},m="wrapper";function u(e){var n=e.components,a=(0,l.Z)(e,d);return(0,r.mdx)(m,(0,t.Z)({},c,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)(s.ZP,{mdxType:"PropsTable"},(0,r.mdx)(s.X2,{key:"ROW1",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"tabFill"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Indicates if tabs should fill the width available in the tab bar."))),(0,r.mdx)(s.X2,{key:"ROW2",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"fill"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Indicates if the pane content should fill to the height of the parent container."))),(0,r.mdx)(s.X2,{key:"ROW3",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"onChange"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"func\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Callback function when selection has changed.\nParameters: 1. Event 2. Selected pane's key"))),(0,r.mdx)(s.X2,{key:"ROW4",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"children"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"node\n"))),(0,r.mdx)(s.dS,{isRequired:!0,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Tabs.Pane components to be displayed."))),(0,r.mdx)(s.X2,{key:"ROW5",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"activeKey"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"string\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Key of the pane that should be active. Use this prop along with onChange to create controlled tabs."))),(0,r.mdx)(s.X2,{key:"ROW6",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"defaultActiveKey"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"string\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Key of the pane that should be open initially."))),(0,r.mdx)(s.X2,{key:"ROW7",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"isClosable"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Whether or not the tab is closable."))),(0,r.mdx)(s.X2,{key:"ROW8",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"isDraggable"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Whether or not the tab is draggable."))),(0,r.mdx)(s.X2,{key:"ROW9",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"onTabOrderChange"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"func\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Callback function triggered when tab is drag and dropped."))),(0,r.mdx)(s.X2,{key:"ROW10",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"onTabClose"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"func\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Callback function triggered on close button click. will be available only when ",(0,r.mdx)("inlineCode",{parentName:"p"},"isClosable")," is set to true."))),(0,r.mdx)(s.X2,{key:"ROW11",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"onSelectAddButton"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"func\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Callback function triggered when add button is clicked.\nParameters: 1. Event 2. Selected pane's key"))),(0,r.mdx)(s.X2,{key:"ROW12",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"ariaLabelAddTab"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"string\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"The label to set on the add icon element."))),(0,r.mdx)(s.X2,{key:"ROW13",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"verticalOrientation"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"By Default Orientation will be Horizontal and Orientation will be Vertical When verticalOrientation set to ",(0,r.mdx)("inlineCode",{parentName:"p"},"true"),"."))),(0,r.mdx)(s.X2,{key:"ROW14",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"setFocusOnContent"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Sets focus on content when set to ",(0,r.mdx)("inlineCode",{parentName:"p"},"true"),".")))))}u.isMDXComponent=!0;var p=["components"],b={},f="wrapper";function y(e){var n=e.components,a=(0,l.Z)(e,p);return(0,r.mdx)(f,(0,t.Z)({},b,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)(s.ZP,{mdxType:"PropsTable"},(0,r.mdx)(s.X2,{key:"ROW1",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"icon"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"element\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Icon to be displayed on the tab."))),(0,r.mdx)(s.X2,{key:"ROW2",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"label"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"string\n"))),(0,r.mdx)(s.dS,{isRequired:!0,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Text to be displayed on the tab."))),(0,r.mdx)(s.X2,{key:"ROW3",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"customDisplay"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"node\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"A custom display for the tab. Component will fallback to label text when collapsed into the menu."))),(0,r.mdx)(s.X2,{key:"ROW4",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"children"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"node\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("p",null,"none")),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Content to be displayed when the tab is selected."))),(0,r.mdx)(s.X2,{key:"ROW5",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"isDisabled"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Indicates if the pane should be disabled."))),(0,r.mdx)(s.X2,{key:"ROW6",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"isIconOnly"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"Indicates if the pane label should only display the icon. When tab collapses into menu the label text will be used."))),(0,r.mdx)(s.X2,{key:"ROW7",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"isActive"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"If enabled, this prop will apply the ",(0,r.mdx)("inlineCode",{parentName:"p"},"aria-selected")," style to the pane."))),(0,r.mdx)(s.X2,{key:"ROW8",mdxType:"Row"},(0,r.mdx)(s.O,{mdxType:"PropNameCell"},"showIcon"),(0,r.mdx)(s.Di,{mdxType:"TypeCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"bool\n"))),(0,r.mdx)(s.dS,{isRequired:!1,mdxType:"RequiredCell"}),(0,r.mdx)(s.mW,{mdxType:"DefaultValueCell"},(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-javascript"},"false\n"))),(0,r.mdx)(s.Ex,{mdxType:"DescriptionCell"},(0,r.mdx)("p",null,"If enabled, this prop will show the icon on the tab and also in the menu if pane is collapsed.")))))}y.isMDXComponent=!0;var h=a(55653),T=["components"],x={};function v(e){var n=e.components,a=(0,l.Z)(e,T);return(0,r.mdx)("wrapper",(0,t.Z)({},x,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport classNames from 'classnames/bind';\nimport PropTypes from 'prop-types';\nimport IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nconst propTypes = {\n id: PropTypes.string,\n};\n\nconst TabsTemplate = (props) => {\n const tabKey = props.id ? props.id : 'compact';\n const labelTab = (\n \n \n \n );\n\n const iconTab = (\n } key={`${tabKey}IconTab`} id={`${tabKey}IconTab`}>\n \n \n );\n return (\n
\n \n {labelTab}\n {iconTab}\n \n
\n );\n};\n\nTabsTemplate.propTypes = propTypes;\nexport default TabsTemplate;\n\n")))}v.isMDXComponent=!0;var g=a(49271),C=["components"],E={};function w(e){var n=e.components,a=(0,l.Z)(e,C);return(0,r.mdx)("wrapper",(0,t.Z)({},E,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-scss"},":local {\n .content-wrapper {\n padding: 10px;\n }\n\n .tab-content-template {\n height: 100%;\n padding: 10px;\n }\n\n .custom-display {\n color: #f00;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .content-container {\n height: 400px;\n padding: 25px;\n }\n\n .content-container-vertical {\n height: 240px;\n }\n}\n\n")))}w.isMDXComponent=!0;var P=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Tabs Template",description:a,example:o.createElement(h.default,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(v,null),isExpanded:t})},k=a(45856),N=["components"],I={};function D(e){var n=e.components,a=(0,l.Z)(e,N);return(0,r.mdx)("wrapper",(0,t.Z)({},I,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport PropTypes from \'prop-types\';\nimport IconBriefcase from \'terra-icon/lib/icon/IconBriefcase\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport Tabs from \'terra-tabs\';\nimport TabContentTemplate from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst propTypes = {\n tabFill: PropTypes.bool,\n};\n\nconst TabsTemplate = (props) => {\n const labelTab = (\n \n \n \n );\n\n const iconTab = (\n } key="ExpandedIconTab">\n \n \n );\n\n const customTab = (\n \n Custom display\n \n )}\n label="Custom display"\n key="ExpandedCustomTab"\n >\n \n \n );\n\n const longLabel = (\n \n \n \n );\n\n const lastTab = (\n \n \n \n );\n\n const disabledTab = (\n } isDisabled key="ExpandedDisabledTab" />\n );\n\n return (\n
\n \n {labelTab}\n {iconTab}\n {customTab}\n {disabledTab}\n {longLabel}\n {lastTab}\n \n
\n );\n};\n\nTabsTemplate.propTypes = propTypes;\n\nconst TabExpanded = () => (\n \n);\nexport default TabExpanded;\n\n')))}D.isMDXComponent=!0;var _=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Tabs Template Expanded",description:a,example:o.createElement(k.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(D,null),isExpanded:t})},A=a(76465),O=["components"],S={};function R(e){var n=e.components,a=(0,l.Z)(e,O);return(0,r.mdx)("wrapper",(0,t.Z)({},S,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport Tabs from \'terra-tabs\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst TabsWithFilledContent = () => {\n const tab1 = (\n \n \n

\n Users need to know what is going on, and get appropriate feedback during interaction. For example, users need confirmation messages when actions are completed, such as when forms are submitted. Also, error messages must provide clear directions rather than confuse users.\n People with some cognitive and learning disabilities, who may be easily confused by unexpected behavior and unclear error messages.\n People with partial sight and blindness, who rely on notifications, instructions, and errors messages to understand the context and interactions.\n Content is more usable for people who are new to the particular website or application.\n

\n

\n Content is more usable for people who are not confident using computers and the web.\n Content is less confusing and daunting to everyone, regardless of skills.\n Use clear and simple language to make error messages more understandable. For example, describe how to fix an error. When forms are submitted, provide a confirmation message. When a change is made on the screen, such as new content added, alert users to the change.\n Content must be easy to follow and understand for many users. For most content, this means simply avoiding overly complex sentences and jargon, and providing clear layout and design. For some complex content such as medical information, separate, easy-to-read information may be necessary.\n People with learning disabilities who cannot understand complex sentence structures and vocabulary.\n

\n

\n People with cognitive disabilities who have difficulty focusing on long passages of dense text.\n Content is more usable for people with lower language skills, such as people who are not fluent in the language of the website and people with low literacy.\n Content is easier to understand by users who are not familiar with the topic.\n Content is easier to skim, and get an overview of the information.\n

\n

\n Avoid overly complex words, jargon, and acronyms, or provide explanations when they need to be used. Provide structure using headings, lists, and spacing. Provide illustrations that clarify the content, when helpful. Provide clear layout and design with consistent orientation and navigation cues.\n Some users need to be able to change the way text is displayed so that they can read the text. This includes changing the size, spacing, font, color, and other text properties. When users change these properties, no information or functionality should be lost, and the text should re-flow so users don’t have to scroll horizontally to read sentences. Text customization is more than the zoom functionality, which only changes the text size.\n People with low vision who are not using screen magnification software.\n People with some forms of dyslexia and other cognitive and learning disabilities who need a particular presentation of text to read it.\n Content is more adaptable to smaller and larger screen sizes.\n Content is more adaptable to personal preferences and comfort.\n

\n

\n Content is more adaptable when translated, since words and sentences are different lengths in different languages.\n Content must be properly designed and coded so that it can adapt to different customization settings. This includes using relative rather than absolute units for the size of fonts, controls, and other objects. Applications should use the operating system and web browser text settings. Websites and applications could also provide information to help users change their settings. Web browsers and other web tools need to provide users with text customization functionality.\n The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens.\n People with physical disabilities who have reduced dexterity.\n Content is more usable on touch screens, especially on smaller mobile devices.\n

\n

\n Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using.\n Content is more usable in situations where the device cannot be held steady.\n Design large controls or activation areas around the controls. (Increasing the font size of the control sometimes isn’t enough.) Provide adequate separation between selectable controls. Provide labels for controls, which enlarges the activation area in many browsers because the label for checkboxes and option buttons is also clickable.\n

\n \n \n );\n\n const tab2 = (\n \n \n \n );\n\n return (\n
\n \n {tab1}\n {tab2}\n \n
\n );\n};\nconst TabFill = () => (\n \n);\n\nexport default TabFill;\n\n')))}R.isMDXComponent=!0;var M=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Tabs With Filled Content",description:a,example:o.createElement(A.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(R,null),isExpanded:t})},j=a(29230),L=["components"],W={};function B(e){var n=e.components,a=(0,l.Z)(e,L);return(0,r.mdx)("wrapper",(0,t.Z)({},W,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport IconBriefcase from \'terra-icon/lib/icon/IconBriefcase\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport IconBookmark from \'terra-icon/lib/icon/IconBookmark\';\nimport PropTypes from \'prop-types\';\nimport IconCalendar from \'terra-icon/lib/icon/IconCalendar\';\nimport Tabs from \'terra-tabs\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\nconst propTypes = {\n id: PropTypes.string,\n};\nconst IconOnlyTabs = (props) => {\n const searchTab = (\n } isIconOnly key="Search">\n \n \n );\n\n const briefcaseTab = (\n } isIconOnly key="Briefcase">\n \n \n );\n\n const bookmarkTab = (\n } isIconOnly key="Bookmark">\n \n \n );\n\n const calendarTab = (\n } isIconOnly key="Calendar">\n \n \n );\n\n return (\n
\n \n {searchTab}\n {briefcaseTab}\n {bookmarkTab}\n {calendarTab}\n \n
\n );\n};\nIconOnlyTabs.propTypes = propTypes;\nexport default IconOnlyTabs;\n\n')))}B.isMDXComponent=!0;var V=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Icon Only Tabs",description:a,example:o.createElement(j.default,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(B,null),isExpanded:t})},K=a(74584),Z=["components"],F={};function q(e){var n=e.components,a=(0,l.Z)(e,Z);return(0,r.mdx)("wrapper",(0,t.Z)({},F,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport PropTypes from 'prop-types';\nimport ResponsiveTabsVariantWrapper from './ResponsiveTabsVariantWrapper';\nimport TabsTemplate from './TabsTemplate';\nimport IconOnlyTabs from './IconOnlyTabs';\n\nconst propTypes = { renderIconTabs: PropTypes.bool };\n\nconst TabsColorVariants = ({\n ...props\n}) => {\n if (props.renderIconTabs) {\n return ();\n }\n\n return ();\n};\n\nTabsColorVariants.propTypes = propTypes;\nexport default ResponsiveTabsVariantWrapper(TabsColorVariants);\n\n")))}q.isMDXComponent=!0;var z=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Responsive Tabs Variant",description:a,example:o.createElement(K.Z,null),exampleSrc:o.createElement(q,null),isExpanded:t})},X=a(86196),H=["components"],$={};function U(e){var n=e.components,a=(0,l.Z)(e,H);return(0,r.mdx)("wrapper",(0,t.Z)({},$,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport Tabs from \'terra-tabs\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport IconBriefcase from \'terra-icon/lib/icon/IconBriefcase\';\nimport IconBookmark from \'terra-icon/lib/icon/IconBookmark\';\nimport IconCalendar from \'terra-icon/lib/icon/IconCalendar\';\nimport IconEnvelope from \'terra-icon/lib/icon/IconEnvelope\';\nimport IconPrinter from \'terra-icon/lib/icon/IconPrinter\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst IconsOnlyAndInMenuTabs = () => {\n const searchTab = (\n } showIcon key="MenuTabSearch">\n \n \n );\n\n const briefcaseTab = (\n // eslint-disable-next-line react/forbid-component-props\n } showIcon key="MenuTabBriefcase">\n \n \n );\n\n const bookmarkTab = (\n } showIcon key="MenuTabBookmark">\n \n \n );\n\n const calendarTab = (\n } showIcon key="MenuTabCalendar">\n \n \n );\n\n const envelopeTab = (\n } showIcon key="MenuTabEnvelope">\n \n \n );\n\n const printerTab = (\n } showIcon key="MenuTabPrinter">\n \n \n );\n\n return (\n
\n \n {searchTab}\n {briefcaseTab}\n {bookmarkTab}\n {calendarTab}\n {envelopeTab}\n {printerTab}\n \n
\n );\n};\n\nexport default IconsOnlyAndInMenuTabs;\n\n')))}U.isMDXComponent=!0;var G=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Icons In Menu Tabs",description:a,example:o.createElement(X.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(U,null),isExpanded:t})},Y=a(19762),J=["components"],Q={};function ee(e){var n=e.components,a=(0,l.Z)(e,J);return(0,r.mdx)("wrapper",(0,t.Z)({},Q,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport Tabs from \'terra-tabs\';\nimport IconInformation from \'terra-icon/lib/icon/IconInformation\';\n\nclass DraggableTabs extends React.Component {\n constructor(props) {\n super(props);\n this.state = { activeKey: \'Hematology\' };\n this.handleSelection = this.handleSelection.bind(this);\n this.handleTabActivation = this.handleTabActivation.bind(this);\n }\n\n handleSelection(event, selectedKey) {\n if (selectedKey !== this.state.activeKey) {\n this.setState({ activeKey: selectedKey });\n }\n }\n\n handleTabActivation() {\n this.setState({ activeKey: \'Radiology\' });\n }\n\n render() {\n const tab1 = (\n \n

\n Radiology represents a branch of medicine that deals with radiant energy in the diagnosis and treatment of diseases.\n This field can be divided into two broad areas - diagnostic radiology and interventional radiology.\n A physician who specializes in radiology is called radiologist.\n

\n \n );\n\n const tab2 = (\n \n

\n Hematology is the study of blood and blood disorders.\n Hematologists and hematopathologists are highly trained healthcare providers who specialize in diseases of the blood and blood components.\n These include blood and bone marrow cells.\n

\n \n );\n\n const tab3 = (\n \n

\n The term cardiology is derived from the Greek words “cardia,” which refers to the heart and “logy” meaning “study of.”\n Cardiology is a branch of medicine that concerns diseases and disorders of the heart.\n It may range from congenital defects through to acquired heart diseases such as coronary artery disease and congestive heart failure.\n Physicians who specialize in cardiology are called cardiologists and they are responsible for the medical management of various heart diseases.\n Cardiac surgeons are the specialist physicians who perform surgical procedures to correct heart disorders.\n

\n \n );\n const tab4 = (\n } isIconOnly label="Orthopaedics" key="Orthopaedics" id="tab4">\n

\n Orthopaedic surgery refers to surgical intervention in the case of diseases or injuries concerning the musculoskeletal system.\n After proper diagnoses and consultation, orthopaedic surgeons treat several conditions that affect the bones, joints, ligaments, nerves and muscles.\n

\n \n );\n\n const tab5 = (\n } showIcon label="Paediatrics" key="Paediatrics" id="tab5">\n

\n Pediatrics is the branch of medicine dealing with the health and medical care of infants, children, and adolescents from birth up to the age of 18.\n The word “paediatrics” means “healer of children”; they are derived from two Greek words: (pais = child) and (iatros = doctor or healer).\n Paediatrics is a relatively new medical specialty, developing only in the mid-19th century. Abraham Jacobi (1830–1919) is known as the father of paediatrics.\n

\n \n );\n\n const tab6 = (\n \n

\n Oncology is the study of cancer.\n An oncologist is a doctor who treats cancer and provides medical care for a person diagnosed with cancer.\n An oncologist may also be called a cancer specialist.\n The field of oncology has 3 major areas based on treatments: medical oncology, radiation oncology, and surgical oncology.\n

\n \n );\n\n return (\n
\n \n
\n

\n Last Triggered Tab:\n {this.state.activeKey}\n

\n
\n \n {tab1}\n {tab2}\n {tab3}\n {tab4}\n {tab5}\n {tab6}\n \n
\n );\n }\n}\nexport default DraggableTabs;\n\n')))}ee.isMDXComponent=!0;var ne=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Draggable Tabs",description:a,example:o.createElement(Y.Z,null),exampleSrc:o.createElement(ee,null),isExpanded:t})},ae=a(90643),te=["components"],le={};function oe(e){var n=e.components,a=(0,l.Z)(e,te);return(0,r.mdx)("wrapper",(0,t.Z)({},le,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React, { useState } from 'react';\nimport classNames from 'classnames/bind';\nimport IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';\nimport IconSearch from 'terra-icon/lib/icon/IconSearch';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nlet i = -1;\n\nconst AddTab = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n const [activeKey, setActiveKey] = useState();\n\n tabsExample.push(\n {\n label: 'Self Registration',\n key: 'AddLabelTab',\n content: 'Self Registration',\n },\n );\n\n tabsExample.push(\n {\n label: 'Find A Doctor',\n icon: ,\n isIconOnly: true,\n key: 'AddIconTab',\n content: 'Find A Doctor',\n },\n );\n\n tabsExample.push(\n {\n label: 'View Specialities',\n customDisplay:
View Specialities
,\n key: 'AddCustomTab',\n content: 'View Specialities',\n },\n );\n\n tabsExample.push(\n {\n label: 'Pharmacy',\n key: 'AddDisabledTab',\n icon: ,\n },\n );\n\n tabsExample.push(\n {\n label: 'Billing, Insurance & Payment',\n key: 'AddlongLabel',\n content: 'Billing, Insurance & Payment',\n },\n );\n\n tabsExample.push(\n {\n label: 'Lab Medicine',\n key: 'AddlastTab',\n content: 'Lab Medicine',\n },\n );\n\n const addMoreTabPanes = () => {\n i += 1;\n const tabsArray = tabs;\n tabsArray.push(\n {\n label: `Added New Tab_${i}`,\n isIconOnly: false,\n key: `AddTab_${i}`,\n content: `Added New Tab_${i}`,\n isActive: true,\n },\n );\n setActiveKey(`AddTab_${i}`);\n setTabs(tabsArray);\n };\n\n const handleSelection = (event, selectedKey) => {\n if (selectedKey !== activeKey) {\n setActiveKey(selectedKey);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n \n ))}\n \n
\n );\n};\n\nexport default AddTab;\n\n")))}oe.isMDXComponent=!0;var re=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Add Tab",description:a,example:o.createElement(ae.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(oe,null),isExpanded:t})},ie=a(37902),se=["components"],de={};function ce(e){var n=e.components,a=(0,l.Z)(e,se);return(0,r.mdx)("wrapper",(0,t.Z)({},de,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React, { useState } from 'react';\nimport classNames from 'classnames/bind';\nimport IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';\nimport IconSearch from 'terra-icon/lib/icon/IconSearch';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nconst ClosableTab = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n\n tabsExample.push(\n {\n label: 'Doctors',\n key: 'CloseLabelTab',\n content: 'Doctor details',\n },\n );\n\n tabsExample.push(\n {\n label: 'Pharmacy',\n icon: ,\n isIconOnly: true,\n key: 'CloseIconTab',\n content: 'Pharmacy details',\n },\n );\n\n tabsExample.push(\n {\n label: 'Customized Tab',\n customDisplay:
Customized Tab
,\n key: 'CloseCustomTab',\n content: 'Custom display',\n },\n );\n\n tabsExample.push(\n {\n label: 'Disabled Tab',\n key: 'CloseDisabledTab',\n icon: ,\n isDisabled: true,\n },\n );\n\n tabsExample.push(\n {\n label: 'List of In-Patient Details Department Wise',\n key: 'CloselongLabel',\n content: 'List for In-Patient Details Department Wise',\n },\n );\n\n tabsExample.push(\n {\n label: 'Appointments',\n key: 'CloselastTab',\n content: 'Appointments',\n },\n );\n\n const handleTabClose = (tabdata, itemKey) => {\n const tabsArray = [...tabs];\n const indexToRemove = tabsArray.findIndex(tab => tab.key === itemKey);\n if (indexToRemove !== -1) {\n tabsArray.splice(indexToRemove, 1);\n setTabs(tabsArray);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n \n ))}\n \n
\n );\n};\n\nexport default ClosableTab;\n\n")))}ce.isMDXComponent=!0;var me=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Closable Tab",description:a,example:o.createElement(ie.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(ce,null),isExpanded:t})},ue=a(19747),pe=["components"],be={};function fe(e){var n=e.components,a=(0,l.Z)(e,pe);return(0,r.mdx)("wrapper",(0,t.Z)({},be,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React, { useState } from 'react';\nimport classNames from 'classnames/bind';\nimport IconAddPerson from 'terra-icon/lib/icon/IconAddPerson';\nimport IconSearch from 'terra-icon/lib/icon/IconSearch';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nlet i = -1;\n\nconst AddCloseTab = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n const [activeKey, setActiveKey] = useState();\n\n tabsExample.push(\n {\n label: 'Patient Information',\n key: 'AddcloseLabelTab',\n content: 'Patient Information',\n },\n );\n\n tabsExample.push(\n {\n label: 'Add Patient',\n icon: ,\n isIconOnly: true,\n key: 'AddcloseIconTab',\n content: 'Add Patient',\n },\n );\n\n tabsExample.push(\n {\n label: 'TPA & Insurance',\n customDisplay:
TPA & Insurance
,\n key: 'AddcloseCustomTab',\n content: 'TPA & Insurance',\n },\n );\n\n tabsExample.push(\n {\n label: 'Disabled Tab',\n key: 'AddcloseDisabledTab',\n icon: ,\n isDisabled: true,\n },\n );\n\n tabsExample.push(\n {\n label: 'List of Out-Patient Details Department Wise',\n key: 'AddcloselongLabel',\n content: 'List of Out-Patient Details Department Wise',\n },\n );\n\n tabsExample.push(\n {\n label: 'Ambulance Service',\n key: 'AddcloselastTab',\n content: 'Ambulance Service',\n },\n );\n\n const handleTabClose = (tabdata, itemKey) => {\n const tabsArray = [...tabs];\n const indexToRemove = tabsArray.findIndex(tab => tab.key === itemKey);\n if (indexToRemove !== -1) {\n tabsArray.splice(indexToRemove, 1);\n setTabs(tabsArray);\n }\n };\n\n const addMoreTabPanes = () => {\n i += 1;\n const tabsArray = tabs;\n tabsArray.push(\n {\n label: `Added New Tab_${i}`,\n isIconOnly: false,\n key: `AddcloseTab_${i}`,\n content: `Added New Tab_${i}`,\n isActive: true,\n },\n );\n setActiveKey(`AddcloseTab_${i}`);\n setTabs(tabsArray);\n };\n\n const handleSelection = (event, selectedKey) => {\n if (selectedKey !== activeKey) {\n setActiveKey(selectedKey);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n \n ))}\n \n
\n );\n};\n\nexport default AddCloseTab;\n\n")))}fe.isMDXComponent=!0;var ye=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Add Close Tab",description:a,example:o.createElement(ue.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(fe,null),isExpanded:t})},he=a(10514),Te=["components"],xe={};function ve(e){var n=e.components,a=(0,l.Z)(e,Te);return(0,r.mdx)("wrapper",(0,t.Z)({},xe,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React, { useState } from \'react\';\nimport classNames from \'classnames/bind\';\nimport IconAddPerson from \'terra-icon/lib/icon/IconAddPerson\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport Tabs from \'terra-tabs\';\nimport Radio from \'terra-form-radio\';\nimport Field from \'terra-form-field\';\nimport Input from \'terra-form-input\';\nimport Fieldset from \'terra-form-fieldset\';\nimport TabContentTemplate from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nlet i = -1;\n\nconst AddCloseTabInteractive = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n const [activeKey, setActiveKey] = useState();\n\n tabsExample.push(\n {\n label: \'Patient Information\',\n key: \'AddcloseInteractiveLabelTab\',\n content: \'Patient Information\',\n children:\n <>\n \n \n ,\n },\n );\n\n tabsExample.push(\n {\n label: \'Add Patient\',\n icon: ,\n isIconOnly: true,\n key: \'AddcloseInteractiveIconTab\',\n children:\n <>\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n ,\n },\n );\n\n tabsExample.push(\n {\n label: \'TPA & Insurance\',\n customDisplay:
TPA & Insurance
,\n key: \'AddcloseInteractiveCustomTab\',\n content: \'TPA & Insurance\',\n children:\n <>\n \n \n ,\n },\n );\n\n tabsExample.push(\n {\n label: \'Disabled Tab\',\n key: \'AddcloseInteractiveDisabledTab\',\n icon: ,\n isDisabled: true,\n },\n );\n\n tabsExample.push(\n {\n label: \'List of Out-Patient Details Department Wise\',\n key: \'AddcloseInteractivelongLabel\',\n content: \'List of Out-Patient Details Department Wise\',\n },\n );\n\n tabsExample.push(\n {\n label: \'Ambulance Service\',\n key: \'AddcloseInteractivelastTab\',\n content: \'Ambulance Service\',\n },\n );\n\n const handleTabClose = (tabdata, itemKey) => {\n const tabsArray = [...tabs];\n const indexToRemove = tabsArray.findIndex(tab => tab.key === itemKey);\n if (indexToRemove !== -1) {\n tabsArray.splice(indexToRemove, 1);\n setTabs(tabsArray);\n }\n };\n\n const addMoreTabPanes = () => {\n i += 1;\n const tabsArray = tabs;\n tabsArray.push(\n {\n label: `Added New Tab_${i}`,\n isIconOnly: false,\n key: `AddcloseInteractiveTab_${i}`,\n content: `Added New Tab_${i}`,\n isActive: true,\n },\n );\n setActiveKey(`AddcloseInteractiveTab_${i}`);\n setTabs(tabsArray);\n };\n\n const handleSelection = (event, selectedKey) => {\n if (selectedKey !== activeKey) {\n setActiveKey(selectedKey);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n {tab.children}\n \n \n ))}\n \n
\n );\n};\n\nexport default AddCloseTabInteractive;\n\n')))}ve.isMDXComponent=!0;var ge=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Add Close Tab Interactive",description:a,example:o.createElement(he.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(ve,null),isExpanded:t})},Ce=a(89527),Ee=["components"],we={};function Pe(e){var n=e.components,a=(0,l.Z)(e,Ee);return(0,r.mdx)("wrapper",(0,t.Z)({},we,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport IconAdd from \'terra-icon/lib/icon/IconAdd\';\nimport IconPerson from \'terra-icon/lib/icon/IconPerson\';\nimport Tabs from \'terra-tabs\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst VerticalTabs = () => {\n const labelTab = (\n \n \n \n );\n\n const onlyiconTab = (\n } key="tonlyIconTab">\n \n \n );\n\n const iconTab = (\n } key="tIconTab">\n \n \n );\n\n const customTab = (\n \n Surgical Department\n \n )}\n label="Surgical Department"\n key="tCustomTab"\n >\n \n \n );\n\n const longLabel = (\n \n \n \n );\n\n const lastTab = (\n \n \n \n );\n\n return (\n
\n \n {onlyiconTab}\n {labelTab}\n {iconTab}\n {customTab}\n {longLabel}\n {lastTab}\n \n
\n );\n};\n\nexport default VerticalTabs;\n\n')))}Pe.isMDXComponent=!0;var ke=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Vertical Tabs",description:a,example:o.createElement(Ce.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(Pe,null),isExpanded:t})},Ne=["components"],Ie={},De="wrapper";function _e(e){var n=e.components,a=(0,l.Z)(e,Ne);return(0,r.mdx)(De,(0,t.Z)({},Ie,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)(i.C,{mdxType:"Badge"}),(0,r.mdx)("h1",{id:"terra-tabs"},"Terra Tabs"),(0,r.mdx)("p",null,"Tabs are containers used to organize content. They allow for quick switching between groups of contextually related content. Content is divided into different containers and each container is viewable one at a time. The user can switch between containers by selecting the corresponding tab control."),(0,r.mdx)("p",null,"Tabs are meant to organize content as to provide quick access to a group of contextually related content that does not need to be compared or accessed simultaneously. Tabs are not intended for navigation."),(0,r.mdx)("h2",{id:"getting-started"},"Getting Started"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},"Install with ",(0,r.mdx)("a",{parentName:"li",href:"https://www.npmjs.com/"},"npmjs"),":",(0,r.mdx)("ul",{parentName:"li"},(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"npm install terra-tabs"))))),(0,r.mdx)("h2",{id:"peer-dependencies"},"Peer Dependencies"),(0,r.mdx)("p",null,"This component requires the following peer dependencies be installed in your app for the component to properly function."),(0,r.mdx)("table",null,(0,r.mdx)("thead",{parentName:"table"},(0,r.mdx)("tr",{parentName:"thead"},(0,r.mdx)("th",{parentName:"tr",align:null},"Peer Dependency"),(0,r.mdx)("th",{parentName:"tr",align:null},"Version"))),(0,r.mdx)("tbody",{parentName:"table"},(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"react"),(0,r.mdx)("td",{parentName:"tr",align:null},"^16.8.5")),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"react-dom"),(0,r.mdx)("td",{parentName:"tr",align:null},"^16.8.5")),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"react-intl"),(0,r.mdx)("td",{parentName:"tr",align:null},"^2.8.0")))),(0,r.mdx)("h2",{id:"usage"},"Usage"),(0,r.mdx)("h3",{id:"note"},"Note"),(0,r.mdx)("p",null,"The tabs component will apply the prop ",(0,r.mdx)("inlineCode",{parentName:"p"},"isLabelHidden")," to all components passed as content for Tabs.Pane. This will indicate if any of the tabs are icon only or have been truncated. When this prop is true a header should be rendered in the content area to for accessibility purposes."),(0,r.mdx)("h3",{id:"controlled-vs-uncontrolled-tabs"},"Controlled vs. Uncontrolled Tabs"),(0,r.mdx)("p",null,"Terra-tabs allows you to use either a controlled or uncontrolled mode in order to have the amount control over the state that you need."),(0,r.mdx)("h3",{id:"uncontrolled-tabs"},"Uncontrolled Tabs"),(0,r.mdx)("p",null,"Uncontrolled tabs is the default mode of terra-tabs. In this mode the tabs will handle all state internally and the initial active tab can optionally be set using ",(0,r.mdx)("inlineCode",{parentName:"p"},"defaultActiveKey")," on the ",(0,r.mdx)("inlineCode",{parentName:"p"},"")," component."),(0,r.mdx)("h3",{id:"controlled-tabs"},"Controlled Tabs"),(0,r.mdx)("p",null,"In controlled mode terra-tabs does not handle any of the selection state internally, it is left up to the consumer. This mode is enabled by setting the ",(0,r.mdx)("inlineCode",{parentName:"p"},"activeKey")," prop on the ",(0,r.mdx)("inlineCode",{parentName:"p"},"")," component. A handler is needed for ",(0,r.mdx)("inlineCode",{parentName:"p"},"onChange")," to be notified of user selection and update the state. If both ",(0,r.mdx)("inlineCode",{parentName:"p"},"activeKey")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"defaultActiveKey")," are set, then ",(0,r.mdx)("inlineCode",{parentName:"p"},"defaultActiveKey")," will have no effect."),(0,r.mdx)("h3",{id:"keyboard-navigation-guide"},"Keyboard Navigation Guide"),(0,r.mdx)("h4",{id:"performing-drag-and-drop"},"Performing Drag and Drop"),(0,r.mdx)("p",null,"When a draggable tab has focus press the ",(0,r.mdx)("inlineCode",{parentName:"p"},"Spacebar")," key to start the drag. Once a drag is started, the following keyboard shortcuts can be used:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Spacebar")," - Drop the tab"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Escape")," - Cancel the drag"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Left arrow")," - move the tab to the left."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Right arrow")," - move the tab to the right.")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import Tabs from 'terra-tabs';\n")),(0,r.mdx)("h2",{id:"component-features"},"Component Features"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support"},"Cross-Browser Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support"},"Responsive Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support"},"Mobile Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n"},"Internationalization Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n"},"Localization Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl"},"LTR/RTL Support"))),(0,r.mdx)("h2",{id:"examples"},"Examples"),(0,r.mdx)(P,{title:"Compact",mdxType:"TabsTemplate"}),(0,r.mdx)(_,{title:"Expanded",mdxType:"TabsTemplateExpanded"}),(0,r.mdx)(V,{title:"Icon Only",mdxType:"IconOnlyTabs"}),(0,r.mdx)(G,{title:"Will Display Icons in Menu When Collapsed",mdxType:"IconsInMenuTabs"}),(0,r.mdx)(M,{title:"Fill Parent Container",mdxType:"TabsWithFilledContent"}),(0,r.mdx)(z,{title:"Toggle responsiveTo Variants",mdxType:"ResponsiveTabsVariant"}),(0,r.mdx)(ne,{title:"Draggable Tabs",mdxType:"DraggableTabs"}),(0,r.mdx)(re,{title:"Add New Tab",mdxType:"AddTab"}),(0,r.mdx)(me,{title:"Closable Tabs",mdxType:"ClosableTab"}),(0,r.mdx)(ye,{title:"Add and Close Tab",mdxType:"AddCloseTab"}),(0,r.mdx)(ge,{title:"Add and Close with Interactive Content",mdxType:"AddCloseTabInteractive"}),(0,r.mdx)(ke,{title:"Vertical Tabs",mdxType:"VerticalTabs"}),(0,r.mdx)("h2",{id:"tabs-props-table"},"Tabs Props Table"),(0,r.mdx)(u,{mdxType:"TabsPropsTable"}),(0,r.mdx)("h2",{id:"tabs-pane-props-table"},"Tabs Pane Props Table"),(0,r.mdx)(y,{mdxType:"PanePropsTable"}),(0,r.mdx)("h2",{id:"testing"},"Testing"),(0,r.mdx)("p",null,"Tabs uses ",(0,r.mdx)("inlineCode",{parentName:"p"},"uuid")," which changes the component's description id dynamically. To mock the return value with the Jest testing library, ",(0,r.mdx)("inlineCode",{parentName:"p"},"jest.spyOn")," can be used."),(0,r.mdx)("p",null,"If Enzyme ",(0,r.mdx)("inlineCode",{parentName:"p"},"shallow")," rendering is being used for the tests then the mock may not be required. However, if ",(0,r.mdx)("inlineCode",{parentName:"p"},"mount")," is used then ",(0,r.mdx)("inlineCode",{parentName:"p"},"uuid")," should be mocked as shown below:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-js"},"import { v4 as uuidv4 } from 'uuid';\n\nlet mockSpyUuid;\n\n// using a variable may result in failures. For best results, mock return value.\nbeforeAll(() => {\n mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');\n});\n\n// restore the mock\nafterAll(() => {\n mockSpyUuid.mockRestore();\n});\n\n")))}_e.isMDXComponent=!0},63718:function(e,n,a){"use strict";a.d(n,{C:function(){return o}});var t=a(67294),l=a(22863),o=function(e){var n=e.url;return t.createElement(l.Z,{src:"https://github.com/cerner/terra-framework/tree/main/packages/terra-tabs",name:"terra-tabs",version:"7.12.0",url:n})}},19747:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(861)),r=t(a(27424)),i=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=b(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),s=t(a(47166)),d=t(a(68766)),c=t(a(50826)),m=t(a(76414)),u=t(a(2331)),p=t(a(85492));function b(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(b=function(e){return e?a:n})(e)}var f=s.default.bind(p.default),y=-1;n.Z=function(){var e=[],n=(0,i.useState)(e),a=(0,r.default)(n,2),t=a[0],l=a[1],s=(0,i.useState)(),p=(0,r.default)(s,2),b=p[0],h=p[1];e.push({label:"Patient Information",key:"AddcloseLabelTab",content:"Patient Information"}),e.push({label:"Add Patient",icon:i.default.createElement(d.default,null),isIconOnly:!0,key:"AddcloseIconTab",content:"Add Patient"}),e.push({label:"TPA & Insurance",customDisplay:i.default.createElement("div",{className:f("custom-display")},"TPA & Insurance"),key:"AddcloseCustomTab",content:"TPA & Insurance"}),e.push({label:"Disabled Tab",key:"AddcloseDisabledTab",icon:i.default.createElement(c.default,null),isDisabled:!0}),e.push({label:"List of Out-Patient Details Department Wise",key:"AddcloselongLabel",content:"List of Out-Patient Details Department Wise"}),e.push({label:"Ambulance Service",key:"AddcloselastTab",content:"Ambulance Service"});return i.default.createElement("div",{className:f("content-wrapper")},i.default.createElement(m.default,{id:"Addclose",onChange:function(e,n){n!==b&&h(n)},activeKey:b,setFocusOnContent:!0,isClosable:!0,onSelectAddButton:function(){y+=1;var e=t;e.push({label:"Added New Tab_".concat(y),isIconOnly:!1,key:"AddcloseTab_".concat(y),content:"Added New Tab_".concat(y),isActive:!0}),h("AddcloseTab_".concat(y)),l(e)},ariaLabelAddTab:"Add Tab",onTabClose:function(e,n){var a=(0,o.default)(t),r=a.findIndex((function(e){return e.key===n}));-1!==r&&(a.splice(r,1),l(a))}},t.map((function(e){return i.default.createElement(m.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},i.default.createElement(u.default,{label:e.content}))}))))}},10514:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(861)),r=t(a(27424)),i=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=T(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),s=t(a(47166)),d=t(a(68766)),c=t(a(50826)),m=t(a(76414)),u=t(a(79029)),p=t(a(47717)),b=t(a(55142)),f=t(a(96388)),y=t(a(2331)),h=t(a(85492));function T(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(T=function(e){return e?a:n})(e)}var x=s.default.bind(h.default),v=-1;n.Z=function(){var e=[],n=(0,i.useState)(e),a=(0,r.default)(n,2),t=a[0],l=a[1],s=(0,i.useState)(),h=(0,r.default)(s,2),T=h[0],g=h[1];e.push({label:"Patient Information",key:"AddcloseInteractiveLabelTab",content:"Patient Information",children:i.default.createElement(i.default.Fragment,null,i.default.createElement(u.default,{id:"default-radio",labelText:"Default Radio",name:"default",disabled:!0}),i.default.createElement(u.default,{id:"default1-radio",labelText:"Default Radio",name:"default"}))}),e.push({label:"Add Patient",icon:i.default.createElement(d.default,null),isIconOnly:!0,key:"AddcloseInteractiveIconTab",children:i.default.createElement(i.default.Fragment,null,i.default.createElement("div",null,i.default.createElement(f.default,{type:"checkbox",legend:"Give your full name here",name:"children_present",value:"children_present",error:"All fields must be filled out",required:!0},i.default.createElement(p.default,{label:"First",isInline:!0,required:!0,htmlFor:"first"},i.default.createElement(b.default,{id:"first",type:"text",name:"first",defaultValue:""})),i.default.createElement(p.default,{label:"Middle",isInline:!0,required:!0,htmlFor:"middle"},i.default.createElement(b.default,{id:"middle",type:"text",name:"middle",defaultValue:""})),i.default.createElement(p.default,{label:"Last",isInline:!0,required:!0,htmlFor:"last"},i.default.createElement(b.default,{id:"last",type:"text",name:"last",defaultValue:""})))))}),e.push({label:"TPA & Insurance",customDisplay:i.default.createElement("div",{className:x("custom-display")},"TPA & Insurance"),key:"AddcloseInteractiveCustomTab",content:"TPA & Insurance",children:i.default.createElement(i.default.Fragment,null,i.default.createElement(u.default,{id:"default-radio",labelText:"Default Radio",name:"default",disabled:!0}),i.default.createElement(u.default,{id:"default1-radio",labelText:"Default Radio",name:"default"}))}),e.push({label:"Disabled Tab",key:"AddcloseInteractiveDisabledTab",icon:i.default.createElement(c.default,null),isDisabled:!0}),e.push({label:"List of Out-Patient Details Department Wise",key:"AddcloseInteractivelongLabel",content:"List of Out-Patient Details Department Wise"}),e.push({label:"Ambulance Service",key:"AddcloseInteractivelastTab",content:"Ambulance Service"});return i.default.createElement("div",{className:x("content-wrapper")},i.default.createElement(m.default,{id:"AddcloseInteractive",onChange:function(e,n){n!==T&&g(n)},activeKey:T,isClosable:!0,onSelectAddButton:function(){v+=1;var e=t;e.push({label:"Added New Tab_".concat(v),isIconOnly:!1,key:"AddcloseInteractiveTab_".concat(v),content:"Added New Tab_".concat(v),isActive:!0}),g("AddcloseInteractiveTab_".concat(v)),l(e)},ariaLabelAddTab:"Add Tab",onTabClose:function(e,n){var a=(0,o.default)(t),r=a.findIndex((function(e){return e.key===n}));-1!==r&&(a.splice(r,1),l(a))}},t.map((function(e){return i.default.createElement(m.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},i.default.createElement(y.default,{label:e.content},e.children))}))))}},90643:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(27424)),r=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=p(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),i=t(a(47166)),s=t(a(56468)),d=t(a(50826)),c=t(a(76414)),m=t(a(2331)),u=t(a(85492));function p(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(p=function(e){return e?a:n})(e)}var b=i.default.bind(u.default),f=-1;n.Z=function(){var e=[],n=(0,r.useState)(e),a=(0,o.default)(n,2),t=a[0],l=a[1],i=(0,r.useState)(),u=(0,o.default)(i,2),p=u[0],y=u[1];e.push({label:"Self Registration",key:"AddLabelTab",content:"Self Registration"}),e.push({label:"Find A Doctor",icon:r.default.createElement(d.default,null),isIconOnly:!0,key:"AddIconTab",content:"Find A Doctor"}),e.push({label:"View Specialities",customDisplay:r.default.createElement("div",{className:b("custom-display")},"View Specialities"),key:"AddCustomTab",content:"View Specialities"}),e.push({label:"Pharmacy",key:"AddDisabledTab",icon:r.default.createElement(s.default,null)}),e.push({label:"Billing, Insurance & Payment",key:"AddlongLabel",content:"Billing, Insurance & Payment"}),e.push({label:"Lab Medicine",key:"AddlastTab",content:"Lab Medicine"});return r.default.createElement("div",{className:b("content-wrapper")},r.default.createElement(c.default,{id:"AddTab",onChange:function(e,n){n!==p&&y(n)},isDraggable:!0,setFocusOnContent:!0,activeKey:p,onSelectAddButton:function(){f+=1;var e=t;e.push({label:"Added New Tab_".concat(f),isIconOnly:!1,key:"AddTab_".concat(f),content:"Added New Tab_".concat(f),isActive:!0}),y("AddTab_".concat(f)),l(e)},ariaLabelAddTab:"Add Tab"},t.map((function(e){return r.default.createElement(c.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},r.default.createElement(m.default,{label:e.content}))}))))}},37902:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(861)),r=t(a(27424)),i=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=b(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),s=t(a(47166)),d=t(a(56468)),c=t(a(50826)),m=t(a(76414)),u=t(a(2331)),p=t(a(85492));function b(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(b=function(e){return e?a:n})(e)}var f=s.default.bind(p.default);n.Z=function(){var e=[],n=(0,i.useState)(e),a=(0,r.default)(n,2),t=a[0],l=a[1];e.push({label:"Doctors",key:"CloseLabelTab",content:"Doctor details"}),e.push({label:"Pharmacy",icon:i.default.createElement(d.default,null),isIconOnly:!0,key:"CloseIconTab",content:"Pharmacy details"}),e.push({label:"Customized Tab",customDisplay:i.default.createElement("div",{className:f("custom-display")},"Customized Tab"),key:"CloseCustomTab",content:"Custom display"}),e.push({label:"Disabled Tab",key:"CloseDisabledTab",icon:i.default.createElement(c.default,null),isDisabled:!0}),e.push({label:"List of In-Patient Details Department Wise",key:"CloselongLabel",content:"List for In-Patient Details Department Wise"}),e.push({label:"Appointments",key:"CloselastTab",content:"Appointments"});return i.default.createElement("div",{className:f("content-wrapper")},i.default.createElement(m.default,{id:"Closabletab",setFocusOnContent:!0,isClosable:!0,ariaLabelAddTab:"Add Tab",onTabClose:function(e,n){var a=(0,o.default)(t),r=a.findIndex((function(e){return e.key===n}));-1!==r&&(a.splice(r,1),l(a))}},t.map((function(e){return i.default.createElement(m.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},i.default.createElement(u.default,{label:e.content}))}))))}},19762:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(56690)),o=t(a(89728)),r=t(a(66115)),i=t(a(61655)),s=t(a(94993)),d=t(a(73808)),c=t(a(67294)),m=t(a(76414)),u=t(a(62936));function p(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,t=(0,d.default)(e);if(n){var l=(0,d.default)(this).constructor;a=Reflect.construct(t,arguments,l)}else a=t.apply(this,arguments);return(0,s.default)(this,a)}}var b=function(e){(0,i.default)(a,e);var n=p(a);function a(e){var t;return(0,l.default)(this,a),(t=n.call(this,e)).state={activeKey:"Hematology"},t.handleSelection=t.handleSelection.bind((0,r.default)(t)),t.handleTabActivation=t.handleTabActivation.bind((0,r.default)(t)),t}return(0,o.default)(a,[{key:"handleSelection",value:function(e,n){n!==this.state.activeKey&&this.setState({activeKey:n})}},{key:"handleTabActivation",value:function(){this.setState({activeKey:"Radiology"})}},{key:"render",value:function(){var e=c.default.createElement(m.default.Pane,{label:"Radiology",key:"Radiology",id:"tab1"},c.default.createElement("p",{id:"tab1"},"Radiology represents a branch of medicine that deals with radiant energy in the diagnosis and treatment of diseases. This field can be divided into two broad areas - diagnostic radiology and interventional radiology. A physician who specializes in radiology is called radiologist.")),n=c.default.createElement(m.default.Pane,{label:"Hematology",key:"Hematology",id:"tab2"},c.default.createElement("p",{id:"tab2"},"Hematology is the study of blood and blood disorders. Hematologists and hematopathologists are highly trained healthcare providers who specialize in diseases of the blood and blood components. These include blood and bone marrow cells.")),a=c.default.createElement(m.default.Pane,{label:"Cardiology",key:"Cardiology",id:"tab3"},c.default.createElement("p",{id:"tab3"},"The term cardiology is derived from the Greek words “cardia,” which refers to the heart and “logy” meaning “study of.” Cardiology is a branch of medicine that concerns diseases and disorders of the heart. It may range from congenital defects through to acquired heart diseases such as coronary artery disease and congestive heart failure. Physicians who specialize in cardiology are called cardiologists and they are responsible for the medical management of various heart diseases. Cardiac surgeons are the specialist physicians who perform surgical procedures to correct heart disorders.")),t=c.default.createElement(m.default.Pane,{icon:c.default.createElement(u.default,null),isIconOnly:!0,label:"Orthopaedics",key:"Orthopaedics",id:"tab4"},c.default.createElement("p",{id:"tab4"},"Orthopaedic surgery refers to surgical intervention in the case of diseases or injuries concerning the musculoskeletal system. After proper diagnoses and consultation, orthopaedic surgeons treat several conditions that affect the bones, joints, ligaments, nerves and muscles.")),l=c.default.createElement(m.default.Pane,{icon:c.default.createElement(u.default,null),showIcon:!0,label:"Paediatrics",key:"Paediatrics",id:"tab5"},c.default.createElement("p",{id:"tab5"},"Pediatrics is the branch of medicine dealing with the health and medical care of infants, children, and adolescents from birth up to the age of 18. The word “paediatrics” means “healer of children”; they are derived from two Greek words: (pais = child) and (iatros = doctor or healer). Paediatrics is a relatively new medical specialty, developing only in the mid-19th century. Abraham Jacobi (1830–1919) is known as the father of paediatrics.")),o=c.default.createElement(m.default.Pane,{label:"Oncology",key:"Oncology",id:"tab6"},c.default.createElement("p",{id:"tab6"},"Oncology is the study of cancer. An oncologist is a doctor who treats cancer and provides medical care for a person diagnosed with cancer. An oncologist may also be called a cancer specialist. The field of oncology has 3 major areas based on treatments: medical oncology, radiation oncology, and surgical oncology."));return c.default.createElement("div",null,c.default.createElement("button",{id:"activate-tab",type:"button",onClick:this.handleTabActivation},"Activate Tab"),c.default.createElement("div",{id:"current-selection"},c.default.createElement("p",null,"Last Triggered Tab:",this.state.activeKey)),c.default.createElement(m.default,{setFocusOnContent:!0,isDraggable:!0,id:"controlledTabs",onChange:this.handleSelection,activeKey:this.state.activeKey},e,n,a,t,l,o))}}]),a}(c.default.Component);n.Z=b},29230:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(56468)),i=t(a(50826)),s=t(a(78878)),d=t(a(45697)),c=t(a(88245)),m=t(a(76414)),u=t(a(2331)),p=t(a(85492)),b=o.default.bind(p.default),f={id:d.default.string},y=function(e){var n=l.default.createElement(m.default.Pane,{label:"Search",icon:l.default.createElement(i.default,null),isIconOnly:!0,key:"Search"},l.default.createElement(u.default,{label:"Search"})),a=l.default.createElement(m.default.Pane,{label:"Briefcase",icon:l.default.createElement(r.default,null),isIconOnly:!0,key:"Briefcase"},l.default.createElement(u.default,{label:"Briefcase"})),t=l.default.createElement(m.default.Pane,{label:"Bookmark",icon:l.default.createElement(s.default,null),isIconOnly:!0,key:"Bookmark"},l.default.createElement(u.default,{label:"Bookmark"})),o=l.default.createElement(m.default.Pane,{label:"Calendar",icon:l.default.createElement(c.default,null),isIconOnly:!0,key:"Calendar"},l.default.createElement(u.default,{label:"Calendar"}));return l.default.createElement("div",{className:b("content-wrapper")},l.default.createElement(m.default,{id:e.id,setFocusOnContent:!0},n,a,t,o))};y.propTypes=f;n.default=y},86196:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(76414)),i=t(a(50826)),s=t(a(56468)),d=t(a(78878)),c=t(a(88245)),m=t(a(71739)),u=t(a(87491)),p=t(a(2331)),b=t(a(85492)),f=o.default.bind(b.default);n.Z=function(){var e=l.default.createElement(r.default.Pane,{label:"Search",icon:l.default.createElement(i.default,null),showIcon:!0,key:"MenuTabSearch"},l.default.createElement(p.default,{label:"Search",id:"MenuTabSearchContent"})),n=l.default.createElement(r.default.Pane,{label:"Briefcase",icon:l.default.createElement(s.default,null),showIcon:!0,key:"MenuTabBriefcase"},l.default.createElement(p.default,{label:"Briefcase",id:"MenuTabBriefcaseContent"})),a=l.default.createElement(r.default.Pane,{label:"Bookmark",icon:l.default.createElement(d.default,null),showIcon:!0,key:"MenuTabBookmark"},l.default.createElement(p.default,{label:"Bookmark",id:"MenuTabBookmarkContent"})),t=l.default.createElement(r.default.Pane,{label:"Calendar",icon:l.default.createElement(c.default,null),showIcon:!0,key:"MenuTabCalendar"},l.default.createElement(p.default,{label:"Calendar",id:"MenuTabCalendarContent"})),o=l.default.createElement(r.default.Pane,{label:"Envelope",icon:l.default.createElement(m.default,null),showIcon:!0,key:"MenuTabEnvelope"},l.default.createElement(p.default,{label:"Envelope",id:"MenuTabEnvelopeContent"})),b=l.default.createElement(r.default.Pane,{label:"Printer",icon:l.default.createElement(u.default,null),showIcon:!0,key:"MenuTabPrinter"},l.default.createElement(p.default,{label:"Printer",id:"MenuTabPrinterContent"}));return l.default.createElement("div",{className:f("content-wrapper")},l.default.createElement(r.default,{setFocusOnContent:!0,id:"icons-only-menu"},e,n,a,t,o,b))}},74584:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(10434)),o=t(a(13012)),r=t(a(67294)),i=t(a(45697)),s=t(a(84423)),d=t(a(55653)),c=t(a(29230)),m={renderIconTabs:i.default.bool},u=function(e){var n=(0,l.default)({},((0,o.default)(e),e));return n.renderIconTabs?r.default.createElement(c.default,(0,l.default)({},n,{id:"iconOnlyTabsId"})):r.default.createElement(d.default,(0,l.default)({},n,{id:"responsive"}))};u.propTypes=m;n.Z=(0,s.default)(u)},84423:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(10434)),o=t(a(56690)),r=t(a(89728)),i=t(a(66115)),s=t(a(61655)),d=t(a(94993)),c=t(a(73808)),m=t(a(67294)),u=t(a(47166)),p=t(a(91940));function b(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,t=(0,c.default)(e);if(n){var l=(0,c.default)(this).constructor;a=Reflect.construct(t,arguments,l)}else a=t.apply(this,arguments);return(0,d.default)(this,a)}}var f=u.default.bind(p.default);n.default=function(e){return function(n){(0,s.default)(t,n);var a=b(t);function t(e){var n;return(0,o.default)(this,t),(n=a.call(this,e)).handleOnSelect=n.handleOnSelect.bind((0,i.default)(n)),n.state={containerClassName:"parent-container-650",renderIconTabs:!1},n}return(0,r.default)(t,[{key:"handleOnSelect",value:function(e){this.setState({renderIconTabs:"default"!==e.target.value.split("-")[0],containerClassName:e.target.value})}},{key:"render",value:function(){return m.default.createElement("div",{className:f(this.state.containerClassName)},m.default.createElement(e,(0,l.default)({renderIconTabs:this.state.renderIconTabs},this.props)),m.default.createElement("div",{className:f("options-container")},m.default.createElement("p",null,m.default.createElement("label",{htmlFor:"responsiveTabsVariant"},"Select a responsiveTo variant:")),m.default.createElement("select",{className:f("options"),id:"responsiveTabsVariant",name:"responsiveTabsVariant",value:this.state.containerClassName,onChange:this.handleOnSelect},m.default.createElement("option",{value:"default-window"},"Default Tabs - Window"),m.default.createElement("option",{value:"default-parent-container-220"},"Default Tabs - Parent (Container Width: 220px)"),m.default.createElement("option",{value:"default-parent-container-650"},"Default Tabs - Parent (Container Width: 650px)"),m.default.createElement("option",{value:"icon-window"},"Icon Only Tabs - Window"),m.default.createElement("option",{value:"icon-none-container-220"},"Icon Only Tabs - None (Container Width: 220px)"),m.default.createElement("option",{value:"icon-none-container-650"},"Icon Only Tabs - None (Container Width: 650px)"),m.default.createElement("option",{value:"icon-parent-container-220"},"Icon Only Tabs - Parent (Container Width: 220px)"))))}}]),t}(m.default.Component)}},2331:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(45697)),i=t(a(85492)),s=o.default.bind(i.default),d={isLabelHidden:r.default.bool,label:r.default.string,children:r.default.node,id:r.default.string},c=function(e){var n=e.isLabelHidden,a=e.label,t=e.id,o=e.children;return l.default.createElement("div",{className:s("tab-content-template"),id:t},n?l.default.createElement("h3",null,a):null,o||l.default.createElement("div",null,"Content for"," ",l.default.createElement("i",null,a)))};c.propTypes=d;n.default=c},55653:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(45697)),i=t(a(56468)),s=t(a(76414)),d=t(a(2331)),c=t(a(85492)),m=o.default.bind(c.default),u={id:r.default.string},p=function(e){var n=e.id?e.id:"compact",a=l.default.createElement(s.default.Pane,{label:"Tab with label",key:"".concat(n,"LabelTab"),id:"".concat(n,"LabelTab")},l.default.createElement(d.default,{label:"Tab with label",id:"".concat(n,"LabelTabContent")})),t=l.default.createElement(s.default.Pane,{label:"Tab with icon",icon:l.default.createElement(i.default,null),key:"".concat(n,"IconTab"),id:"".concat(n,"IconTab")},l.default.createElement(d.default,{id:"".concat(n,"IconTabContent"),label:"Tab with icon"}));return l.default.createElement("div",{className:m("content-wrapper"),id:"".concat(n,"content")},l.default.createElement(s.default,{setFocusOnContent:!0,defaultActiveKey:"".concat(n,"LabelTab"),id:n},a,t))};p.propTypes=u;n.default=p},45856:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(45697)),i=t(a(56468)),s=t(a(50826)),d=t(a(76414)),c=t(a(2331)),m=t(a(85492)),u=o.default.bind(m.default),p={tabFill:r.default.bool},b=function(e){var n=l.default.createElement(d.default.Pane,{label:"Tab with label",key:"ExpandedLabelTab"},l.default.createElement(c.default,{label:"Tab with label",id:"ExpandedLabelTab"})),a=l.default.createElement(d.default.Pane,{label:"Tab with icon",icon:l.default.createElement(i.default,null),key:"ExpandedIconTab"},l.default.createElement(c.default,{label:"Tab with icon",id:"ExpandedIconTabContent"})),t=l.default.createElement(d.default.Pane,{customDisplay:l.default.createElement("div",{className:u("custom-display")},"Custom display"),label:"Custom display",key:"ExpandedCustomTab"},l.default.createElement(c.default,{id:"ExpandedCustomTabContent",label:"Custom display"})),o=l.default.createElement(d.default.Pane,{label:"Longer text tab name with label for application",key:"ExpandedlongLabel"},l.default.createElement(c.default,{id:"ExpandedlongLabelContent",label:"Longer text tab name with label for application"})),r=l.default.createElement(d.default.Pane,{label:"Last Tab",key:"ExpandedlastTab"},l.default.createElement(c.default,{id:"ExpandedlastTabContent",label:"Last Tab"})),m=l.default.createElement(d.default.Pane,{label:"Disabled Tab",icon:l.default.createElement(s.default,null),isDisabled:!0,key:"ExpandedDisabledTab"});return l.default.createElement("div",{className:u("content-wrapper")},l.default.createElement(d.default,{setFocusOnContent:!0,defaultActiveKey:"ExpandedLabelTab",tabFill:e.tabFill,id:"icon-in-menu"},n,a,t,m,o,r))};b.propTypes=p;n.Z=function(){return l.default.createElement(b,{tabFill:!0,id:"expanded"})}},76465:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(76414)),i=t(a(2331)),s=t(a(85492)),d=o.default.bind(s.default),c=function(){var e=l.default.createElement(r.default.Pane,{label:"Large content",key:"LargeContent"},l.default.createElement(i.default,{label:"Large Content"},l.default.createElement("p",null,"Users need to know what is going on, and get appropriate feedback during interaction. For example, users need confirmation messages when actions are completed, such as when forms are submitted. Also, error messages must provide clear directions rather than confuse users. People with some cognitive and learning disabilities, who may be easily confused by unexpected behavior and unclear error messages. People with partial sight and blindness, who rely on notifications, instructions, and errors messages to understand the context and interactions. Content is more usable for people who are new to the particular website or application."),l.default.createElement("p",null,"Content is more usable for people who are not confident using computers and the web. Content is less confusing and daunting to everyone, regardless of skills. Use clear and simple language to make error messages more understandable. For example, describe how to fix an error. When forms are submitted, provide a confirmation message. When a change is made on the screen, such as new content added, alert users to the change. Content must be easy to follow and understand for many users. For most content, this means simply avoiding overly complex sentences and jargon, and providing clear layout and design. For some complex content such as medical information, separate, easy-to-read information may be necessary. People with learning disabilities who cannot understand complex sentence structures and vocabulary."),l.default.createElement("p",null,"People with cognitive disabilities who have difficulty focusing on long passages of dense text. Content is more usable for people with lower language skills, such as people who are not fluent in the language of the website and people with low literacy. Content is easier to understand by users who are not familiar with the topic. Content is easier to skim, and get an overview of the information."),l.default.createElement("p",null,"Avoid overly complex words, jargon, and acronyms, or provide explanations when they need to be used. Provide structure using headings, lists, and spacing. Provide illustrations that clarify the content, when helpful. Provide clear layout and design with consistent orientation and navigation cues. Some users need to be able to change the way text is displayed so that they can read the text. This includes changing the size, spacing, font, color, and other text properties. When users change these properties, no information or functionality should be lost, and the text should re-flow so users don’t have to scroll horizontally to read sentences. Text customization is more than the zoom functionality, which only changes the text size. People with low vision who are not using screen magnification software. People with some forms of dyslexia and other cognitive and learning disabilities who need a particular presentation of text to read it. Content is more adaptable to smaller and larger screen sizes. Content is more adaptable to personal preferences and comfort."),l.default.createElement("p",null,"Content is more adaptable when translated, since words and sentences are different lengths in different languages. Content must be properly designed and coded so that it can adapt to different customization settings. This includes using relative rather than absolute units for the size of fonts, controls, and other objects. Applications should use the operating system and web browser text settings. Websites and applications could also provide information to help users change their settings. Web browsers and other web tools need to provide users with text customization functionality. The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens. People with physical disabilities who have reduced dexterity. Content is more usable on touch screens, especially on smaller mobile devices."),l.default.createElement("p",null,"Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using. Content is more usable in situations where the device cannot be held steady. Design large controls or activation areas around the controls. (Increasing the font size of the control sometimes isn’t enough.) Provide adequate separation between selectable controls. Provide labels for controls, which enlarges the activation area in many browsers because the label for checkboxes and option buttons is also clickable."))),n=l.default.createElement(r.default.Pane,{label:"Short Content",key:"ShortContent"},l.default.createElement(i.default,{label:"Short Content"}));return l.default.createElement("div",{className:d("content-container")},l.default.createElement(r.default,{setFocusOnContent:!0,fill:!0,id:"filledcontent"},e,n))};n.Z=function(){return l.default.createElement(c,{fill:!0})}},89527:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(30217)),i=t(a(41086)),s=t(a(76414)),d=t(a(2331)),c=t(a(85492)),m=o.default.bind(c.default);n.Z=function(){var e=l.default.createElement(s.default.Pane,{label:"Medical Department",key:"tLabelTab"},l.default.createElement(d.default,{label:"Medical Department"})),n=l.default.createElement(s.default.Pane,{label:"Pharmacy Deparment",isIconOnly:!0,icon:l.default.createElement(r.default,null),key:"tonlyIconTab"},l.default.createElement(d.default,{label:"Pharmacy Deparment"})),a=l.default.createElement(s.default.Pane,{label:"Patient Department",icon:l.default.createElement(i.default,null),key:"tIconTab"},l.default.createElement(d.default,{label:"Patient Department"})),t=l.default.createElement(s.default.Pane,{customDisplay:l.default.createElement("div",{className:m("custom-display")},"Surgical Department"),label:"Surgical Department",key:"tCustomTab"},l.default.createElement(d.default,{label:"Surgical Department"})),o=l.default.createElement(s.default.Pane,{label:"Department of Hospital Administration",key:"tlongLabel"},l.default.createElement(d.default,{label:"Department of Hospital Administration"})),c=l.default.createElement(s.default.Pane,{label:"Academic Department",key:"tlastTab"},l.default.createElement(d.default,{label:"Academic Department"}));return l.default.createElement("div",{className:m("content-container-vertical")},l.default.createElement(s.default,{isDraggable:!0,fill:!0,verticalOrientation:!0,setFocusOnContent:!0,id:"verticaltab"},n,e,a,t,o,c))}},17422:function(e,n,a){"use strict";a.r(n),n.default={badge:"Badges-module__badge___vex-+","badge-container":"Badges-module__badge-container___B13Mv","badge-name":"Badges-module__badge-name___jkN0m","badge-version":"Badges-module__badge-version___agZ+P"}},53560:function(e,n,a){"use strict";a.r(n),n.default={"clinical-lowlight-theme":"ExampleTemplate-module__clinical-lowlight-theme___rBbtD","orion-fusion-theme":"ExampleTemplate-module__orion-fusion-theme___GzA23",template:"ExampleTemplate-module__template___a4uPk",header:"ExampleTemplate-module__header___iFXV3",content:"ExampleTemplate-module__content___48m4Q",description:"ExampleTemplate-module__description___NwBJo",footer:"ExampleTemplate-module__footer___GpSoG","button-container":"ExampleTemplate-module__button-container___rAD11",css:"ExampleTemplate-module__css___+jtk1",code:"ExampleTemplate-module__code___7rC6C","css-toggle":"ExampleTemplate-module__css-toggle___chHK7","code-toggle":"ExampleTemplate-module__code-toggle___TGlE-","is-selected":"ExampleTemplate-module__is-selected___0BYwS",item:"ExampleTemplate-module__item___8FTQq",chevron:"ExampleTemplate-module__chevron___VbY7N",title:"ExampleTemplate-module__title___r+nbJ","dynamic-content":"ExampleTemplate-module__dynamic-content___k+1H7"}},91940:function(e,n,a){"use strict";a.r(n),n.default={"default-window":"ResponsiveTabsVariantWrapper-module__default-window___OILOY","icon-window":"ResponsiveTabsVariantWrapper-module__icon-window___rE8aT","default-parent-container-220":"ResponsiveTabsVariantWrapper-module__default-parent-container-220___rR3aL","icon-parent-container-220":"ResponsiveTabsVariantWrapper-module__icon-parent-container-220___puNHZ","default-parent-container-650":"ResponsiveTabsVariantWrapper-module__default-parent-container-650___nY0Av","icon-none-container-220":"ResponsiveTabsVariantWrapper-module__icon-none-container-220___zM+OX","icon-none-container-650":"ResponsiveTabsVariantWrapper-module__icon-none-container-650___TvPPB","options-container":"ResponsiveTabsVariantWrapper-module__options-container___CijBI",options:"ResponsiveTabsVariantWrapper-module__options___62gtP"}},85492:function(e,n,a){"use strict";a.r(n),n.default={"content-wrapper":"TabExample-module__content-wrapper___SHHo6","tab-content-template":"TabExample-module__tab-content-template___eY-9-","custom-display":"TabExample-module__custom-display___DNeb7","content-container":"TabExample-module__content-container___eAfPQ","content-container-vertical":"TabExample-module__content-container-vertical___nzztQ"}},78878:function(e,n,a){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t=o(a(67294)),l=o(a(99139));function o(e){return e&&e.__esModule?e:{default:e}}function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n {\n const tabKey = props.id ? props.id : 'compact';\n const labelTab = (\n \n \n \n );\n\n const iconTab = (\n } key={`${tabKey}IconTab`} id={`${tabKey}IconTab`}>\n \n \n );\n return (\n
\n \n {labelTab}\n {iconTab}\n \n
\n );\n};\n\nTabsTemplate.propTypes = propTypes;\nexport default TabsTemplate;\n\n")))}v.isMDXComponent=!0;var g=a(49271),C=["components"],E={};function w(e){var n=e.components,a=(0,l.Z)(e,C);return(0,r.mdx)("wrapper",(0,t.Z)({},E,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-scss"},":local {\n .content-wrapper {\n padding: 10px;\n }\n\n .tab-content-template {\n height: 100%;\n padding: 10px;\n }\n\n .custom-display {\n color: #f00;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .content-container {\n height: 400px;\n padding: 25px;\n }\n\n .content-container-vertical {\n height: 240px;\n }\n}\n\n")))}w.isMDXComponent=!0;var P=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Tabs Template",description:a,example:o.createElement(h.default,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(v,null),isExpanded:t})},k=a(45856),N=["components"],I={};function D(e){var n=e.components,a=(0,l.Z)(e,N);return(0,r.mdx)("wrapper",(0,t.Z)({},I,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport PropTypes from \'prop-types\';\nimport IconBriefcase from \'terra-icon/lib/icon/IconBriefcase\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport Tabs from \'terra-tabs\';\nimport TabContentTemplate from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst propTypes = {\n tabFill: PropTypes.bool,\n};\n\nconst TabsTemplate = (props) => {\n const labelTab = (\n \n \n \n );\n\n const iconTab = (\n } key="ExpandedIconTab">\n \n \n );\n\n const customTab = (\n \n Custom display\n \n )}\n label="Custom display"\n key="ExpandedCustomTab"\n >\n \n \n );\n\n const longLabel = (\n \n \n \n );\n\n const lastTab = (\n \n \n \n );\n\n const disabledTab = (\n } isDisabled key="ExpandedDisabledTab" />\n );\n\n return (\n
\n \n {labelTab}\n {iconTab}\n {customTab}\n {disabledTab}\n {longLabel}\n {lastTab}\n \n
\n );\n};\n\nTabsTemplate.propTypes = propTypes;\n\nconst TabExpanded = () => (\n \n);\nexport default TabExpanded;\n\n')))}D.isMDXComponent=!0;var _=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Tabs Template Expanded",description:a,example:o.createElement(k.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(D,null),isExpanded:t})},A=a(76465),O=["components"],S={};function R(e){var n=e.components,a=(0,l.Z)(e,O);return(0,r.mdx)("wrapper",(0,t.Z)({},S,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport Tabs from \'terra-tabs\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst TabsWithFilledContent = () => {\n const tab1 = (\n \n \n

\n Users need to know what is going on, and get appropriate feedback during interaction. For example, users need confirmation messages when actions are completed, such as when forms are submitted. Also, error messages must provide clear directions rather than confuse users.\n People with some cognitive and learning disabilities, who may be easily confused by unexpected behavior and unclear error messages.\n People with partial sight and blindness, who rely on notifications, instructions, and errors messages to understand the context and interactions.\n Content is more usable for people who are new to the particular website or application.\n

\n

\n Content is more usable for people who are not confident using computers and the web.\n Content is less confusing and daunting to everyone, regardless of skills.\n Use clear and simple language to make error messages more understandable. For example, describe how to fix an error. When forms are submitted, provide a confirmation message. When a change is made on the screen, such as new content added, alert users to the change.\n Content must be easy to follow and understand for many users. For most content, this means simply avoiding overly complex sentences and jargon, and providing clear layout and design. For some complex content such as medical information, separate, easy-to-read information may be necessary.\n People with learning disabilities who cannot understand complex sentence structures and vocabulary.\n

\n

\n People with cognitive disabilities who have difficulty focusing on long passages of dense text.\n Content is more usable for people with lower language skills, such as people who are not fluent in the language of the website and people with low literacy.\n Content is easier to understand by users who are not familiar with the topic.\n Content is easier to skim, and get an overview of the information.\n

\n

\n Avoid overly complex words, jargon, and acronyms, or provide explanations when they need to be used. Provide structure using headings, lists, and spacing. Provide illustrations that clarify the content, when helpful. Provide clear layout and design with consistent orientation and navigation cues.\n Some users need to be able to change the way text is displayed so that they can read the text. This includes changing the size, spacing, font, color, and other text properties. When users change these properties, no information or functionality should be lost, and the text should re-flow so users don’t have to scroll horizontally to read sentences. Text customization is more than the zoom functionality, which only changes the text size.\n People with low vision who are not using screen magnification software.\n People with some forms of dyslexia and other cognitive and learning disabilities who need a particular presentation of text to read it.\n Content is more adaptable to smaller and larger screen sizes.\n Content is more adaptable to personal preferences and comfort.\n

\n

\n Content is more adaptable when translated, since words and sentences are different lengths in different languages.\n Content must be properly designed and coded so that it can adapt to different customization settings. This includes using relative rather than absolute units for the size of fonts, controls, and other objects. Applications should use the operating system and web browser text settings. Websites and applications could also provide information to help users change their settings. Web browsers and other web tools need to provide users with text customization functionality.\n The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens.\n People with physical disabilities who have reduced dexterity.\n Content is more usable on touch screens, especially on smaller mobile devices.\n

\n

\n Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using.\n Content is more usable in situations where the device cannot be held steady.\n Design large controls or activation areas around the controls. (Increasing the font size of the control sometimes isn’t enough.) Provide adequate separation between selectable controls. Provide labels for controls, which enlarges the activation area in many browsers because the label for checkboxes and option buttons is also clickable.\n

\n \n \n );\n\n const tab2 = (\n \n \n \n );\n\n return (\n
\n \n {tab1}\n {tab2}\n \n
\n );\n};\nconst TabFill = () => (\n \n);\n\nexport default TabFill;\n\n')))}R.isMDXComponent=!0;var M=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Tabs With Filled Content",description:a,example:o.createElement(A.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(R,null),isExpanded:t})},j=a(29230),L=["components"],W={};function B(e){var n=e.components,a=(0,l.Z)(e,L);return(0,r.mdx)("wrapper",(0,t.Z)({},W,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport IconBriefcase from \'terra-icon/lib/icon/IconBriefcase\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport IconBookmark from \'terra-icon/lib/icon/IconBookmark\';\nimport PropTypes from \'prop-types\';\nimport IconCalendar from \'terra-icon/lib/icon/IconCalendar\';\nimport Tabs from \'terra-tabs\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\nconst propTypes = {\n id: PropTypes.string,\n};\nconst IconOnlyTabs = (props) => {\n const searchTab = (\n } isIconOnly key="Search">\n \n \n );\n\n const briefcaseTab = (\n } isIconOnly key="Briefcase">\n \n \n );\n\n const bookmarkTab = (\n } isIconOnly key="Bookmark">\n \n \n );\n\n const calendarTab = (\n } isIconOnly key="Calendar">\n \n \n );\n\n return (\n
\n \n {searchTab}\n {briefcaseTab}\n {bookmarkTab}\n {calendarTab}\n \n
\n );\n};\nIconOnlyTabs.propTypes = propTypes;\nexport default IconOnlyTabs;\n\n')))}B.isMDXComponent=!0;var V=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Icon Only Tabs",description:a,example:o.createElement(j.default,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(B,null),isExpanded:t})},K=a(74584),Z=["components"],F={};function q(e){var n=e.components,a=(0,l.Z)(e,Z);return(0,r.mdx)("wrapper",(0,t.Z)({},F,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React from 'react';\nimport PropTypes from 'prop-types';\nimport ResponsiveTabsVariantWrapper from './ResponsiveTabsVariantWrapper';\nimport TabsTemplate from './TabsTemplate';\nimport IconOnlyTabs from './IconOnlyTabs';\n\nconst propTypes = { renderIconTabs: PropTypes.bool };\n\nconst TabsColorVariants = ({\n ...props\n}) => {\n if (props.renderIconTabs) {\n return ();\n }\n\n return ();\n};\n\nTabsColorVariants.propTypes = propTypes;\nexport default ResponsiveTabsVariantWrapper(TabsColorVariants);\n\n")))}q.isMDXComponent=!0;var z=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Responsive Tabs Variant",description:a,example:o.createElement(K.Z,null),exampleSrc:o.createElement(q,null),isExpanded:t})},X=a(86196),H=["components"],$={};function U(e){var n=e.components,a=(0,l.Z)(e,H);return(0,r.mdx)("wrapper",(0,t.Z)({},$,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport Tabs from \'terra-tabs\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport IconBriefcase from \'terra-icon/lib/icon/IconBriefcase\';\nimport IconBookmark from \'terra-icon/lib/icon/IconBookmark\';\nimport IconCalendar from \'terra-icon/lib/icon/IconCalendar\';\nimport IconEnvelope from \'terra-icon/lib/icon/IconEnvelope\';\nimport IconPrinter from \'terra-icon/lib/icon/IconPrinter\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst IconsOnlyAndInMenuTabs = () => {\n const searchTab = (\n } showIcon key="MenuTabSearch">\n \n \n );\n\n const briefcaseTab = (\n // eslint-disable-next-line react/forbid-component-props\n } showIcon key="MenuTabBriefcase">\n \n \n );\n\n const bookmarkTab = (\n } showIcon key="MenuTabBookmark">\n \n \n );\n\n const calendarTab = (\n } showIcon key="MenuTabCalendar">\n \n \n );\n\n const envelopeTab = (\n } showIcon key="MenuTabEnvelope">\n \n \n );\n\n const printerTab = (\n } showIcon key="MenuTabPrinter">\n \n \n );\n\n return (\n
\n \n {searchTab}\n {briefcaseTab}\n {bookmarkTab}\n {calendarTab}\n {envelopeTab}\n {printerTab}\n \n
\n );\n};\n\nexport default IconsOnlyAndInMenuTabs;\n\n')))}U.isMDXComponent=!0;var G=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Icons In Menu Tabs",description:a,example:o.createElement(X.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(U,null),isExpanded:t})},Y=a(19762),J=["components"],Q={};function ee(e){var n=e.components,a=(0,l.Z)(e,J);return(0,r.mdx)("wrapper",(0,t.Z)({},Q,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport Tabs from \'terra-tabs\';\nimport IconInformation from \'terra-icon/lib/icon/IconInformation\';\n\nclass DraggableTabs extends React.Component {\n constructor(props) {\n super(props);\n this.state = { activeKey: \'Hematology\' };\n this.handleSelection = this.handleSelection.bind(this);\n this.handleTabActivation = this.handleTabActivation.bind(this);\n }\n\n handleSelection(event, selectedKey) {\n if (selectedKey !== this.state.activeKey) {\n this.setState({ activeKey: selectedKey });\n }\n }\n\n handleTabActivation() {\n this.setState({ activeKey: \'Radiology\' });\n }\n\n render() {\n const tab1 = (\n \n

\n Radiology represents a branch of medicine that deals with radiant energy in the diagnosis and treatment of diseases.\n This field can be divided into two broad areas - diagnostic radiology and interventional radiology.\n A physician who specializes in radiology is called radiologist.\n

\n \n );\n\n const tab2 = (\n \n

\n Hematology is the study of blood and blood disorders.\n Hematologists and hematopathologists are highly trained healthcare providers who specialize in diseases of the blood and blood components.\n These include blood and bone marrow cells.\n

\n \n );\n\n const tab3 = (\n \n

\n The term cardiology is derived from the Greek words “cardia,” which refers to the heart and “logy” meaning “study of.”\n Cardiology is a branch of medicine that concerns diseases and disorders of the heart.\n It may range from congenital defects through to acquired heart diseases such as coronary artery disease and congestive heart failure.\n Physicians who specialize in cardiology are called cardiologists and they are responsible for the medical management of various heart diseases.\n Cardiac surgeons are the specialist physicians who perform surgical procedures to correct heart disorders.\n

\n \n );\n const tab4 = (\n } isIconOnly label="Orthopaedics" key="Orthopaedics" id="tab4">\n

\n Orthopaedic surgery refers to surgical intervention in the case of diseases or injuries concerning the musculoskeletal system.\n After proper diagnoses and consultation, orthopaedic surgeons treat several conditions that affect the bones, joints, ligaments, nerves and muscles.\n

\n \n );\n\n const tab5 = (\n } showIcon label="Paediatrics" key="Paediatrics" id="tab5">\n

\n Pediatrics is the branch of medicine dealing with the health and medical care of infants, children, and adolescents from birth up to the age of 18.\n The word “paediatrics” means “healer of children”; they are derived from two Greek words: (pais = child) and (iatros = doctor or healer).\n Paediatrics is a relatively new medical specialty, developing only in the mid-19th century. Abraham Jacobi (1830–1919) is known as the father of paediatrics.\n

\n \n );\n\n const tab6 = (\n \n

\n Oncology is the study of cancer.\n An oncologist is a doctor who treats cancer and provides medical care for a person diagnosed with cancer.\n An oncologist may also be called a cancer specialist.\n The field of oncology has 3 major areas based on treatments: medical oncology, radiation oncology, and surgical oncology.\n

\n \n );\n\n return (\n
\n \n
\n

\n Last Triggered Tab:\n {this.state.activeKey}\n

\n
\n \n {tab1}\n {tab2}\n {tab3}\n {tab4}\n {tab5}\n {tab6}\n \n
\n );\n }\n}\nexport default DraggableTabs;\n\n')))}ee.isMDXComponent=!0;var ne=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Draggable Tabs",description:a,example:o.createElement(Y.Z,null),exampleSrc:o.createElement(ee,null),isExpanded:t})},ae=a(90643),te=["components"],le={};function oe(e){var n=e.components,a=(0,l.Z)(e,te);return(0,r.mdx)("wrapper",(0,t.Z)({},le,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React, { useState } from 'react';\nimport classNames from 'classnames/bind';\nimport IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';\nimport IconSearch from 'terra-icon/lib/icon/IconSearch';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nlet i = -1;\n\nconst AddTab = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n const [activeKey, setActiveKey] = useState();\n\n tabsExample.push(\n {\n label: 'Self Registration',\n key: 'AddLabelTab',\n content: 'Self Registration',\n },\n );\n\n tabsExample.push(\n {\n label: 'Find A Doctor',\n icon: ,\n isIconOnly: true,\n key: 'AddIconTab',\n content: 'Find A Doctor',\n },\n );\n\n tabsExample.push(\n {\n label: 'View Specialities',\n customDisplay:
View Specialities
,\n key: 'AddCustomTab',\n content: 'View Specialities',\n },\n );\n\n tabsExample.push(\n {\n label: 'Pharmacy',\n key: 'AddDisabledTab',\n icon: ,\n },\n );\n\n tabsExample.push(\n {\n label: 'Billing, Insurance & Payment',\n key: 'AddlongLabel',\n content: 'Billing, Insurance & Payment',\n },\n );\n\n tabsExample.push(\n {\n label: 'Lab Medicine',\n key: 'AddlastTab',\n content: 'Lab Medicine',\n },\n );\n\n const addMoreTabPanes = () => {\n i += 1;\n const tabsArray = tabs;\n tabsArray.push(\n {\n label: `Added New Tab_${i}`,\n isIconOnly: false,\n key: `AddTab_${i}`,\n content: `Added New Tab_${i}`,\n isActive: true,\n },\n );\n setActiveKey(`AddTab_${i}`);\n setTabs(tabsArray);\n };\n\n const handleSelection = (event, selectedKey) => {\n if (selectedKey !== activeKey) {\n setActiveKey(selectedKey);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n \n ))}\n \n
\n );\n};\n\nexport default AddTab;\n\n")))}oe.isMDXComponent=!0;var re=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Add Tab",description:a,example:o.createElement(ae.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(oe,null),isExpanded:t})},ie=a(37902),se=["components"],de={};function ce(e){var n=e.components,a=(0,l.Z)(e,se);return(0,r.mdx)("wrapper",(0,t.Z)({},de,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React, { useState } from 'react';\nimport classNames from 'classnames/bind';\nimport IconBriefcase from 'terra-icon/lib/icon/IconBriefcase';\nimport IconSearch from 'terra-icon/lib/icon/IconSearch';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nconst ClosableTab = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n\n tabsExample.push(\n {\n label: 'Doctors',\n key: 'CloseLabelTab',\n content: 'Doctor details',\n },\n );\n\n tabsExample.push(\n {\n label: 'Pharmacy',\n icon: ,\n isIconOnly: true,\n key: 'CloseIconTab',\n content: 'Pharmacy details',\n },\n );\n\n tabsExample.push(\n {\n label: 'Customized Tab',\n customDisplay:
Customized Tab
,\n key: 'CloseCustomTab',\n content: 'Custom display',\n },\n );\n\n tabsExample.push(\n {\n label: 'Disabled Tab',\n key: 'CloseDisabledTab',\n icon: ,\n isDisabled: true,\n },\n );\n\n tabsExample.push(\n {\n label: 'List of In-Patient Details Department Wise',\n key: 'CloselongLabel',\n content: 'List for In-Patient Details Department Wise',\n },\n );\n\n tabsExample.push(\n {\n label: 'Appointments',\n key: 'CloselastTab',\n content: 'Appointments',\n },\n );\n\n const handleTabClose = (tabdata, itemKey) => {\n const tabsArray = [...tabs];\n const indexToRemove = tabsArray.findIndex(tab => tab.key === itemKey);\n if (indexToRemove !== -1) {\n tabsArray.splice(indexToRemove, 1);\n setTabs(tabsArray);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n \n ))}\n \n
\n );\n};\n\nexport default ClosableTab;\n\n")))}ce.isMDXComponent=!0;var me=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Closable Tab",description:a,example:o.createElement(ie.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(ce,null),isExpanded:t})},ue=a(19747),pe=["components"],be={};function fe(e){var n=e.components,a=(0,l.Z)(e,pe);return(0,r.mdx)("wrapper",(0,t.Z)({},be,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import React, { useState } from 'react';\nimport classNames from 'classnames/bind';\nimport IconAddPerson from 'terra-icon/lib/icon/IconAddPerson';\nimport IconSearch from 'terra-icon/lib/icon/IconSearch';\nimport Tabs from 'terra-tabs';\nimport TabContentTemplate from './TabContentTemplate';\nimport styles from './common/TabExample.module.scss';\n\nconst cx = classNames.bind(styles);\n\nlet i = -1;\n\nconst AddCloseTab = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n const [activeKey, setActiveKey] = useState();\n\n tabsExample.push(\n {\n label: 'Patient Information',\n key: 'AddcloseLabelTab',\n content: 'Patient Information',\n },\n );\n\n tabsExample.push(\n {\n label: 'Add Patient',\n icon: ,\n isIconOnly: true,\n key: 'AddcloseIconTab',\n content: 'Add Patient',\n },\n );\n\n tabsExample.push(\n {\n label: 'TPA & Insurance',\n customDisplay:
TPA & Insurance
,\n key: 'AddcloseCustomTab',\n content: 'TPA & Insurance',\n },\n );\n\n tabsExample.push(\n {\n label: 'Disabled Tab',\n key: 'AddcloseDisabledTab',\n icon: ,\n isDisabled: true,\n },\n );\n\n tabsExample.push(\n {\n label: 'List of Out-Patient Details Department Wise',\n key: 'AddcloselongLabel',\n content: 'List of Out-Patient Details Department Wise',\n },\n );\n\n tabsExample.push(\n {\n label: 'Ambulance Service',\n key: 'AddcloselastTab',\n content: 'Ambulance Service',\n },\n );\n\n const handleTabClose = (tabdata, itemKey) => {\n const tabsArray = [...tabs];\n const indexToRemove = tabsArray.findIndex(tab => tab.key === itemKey);\n if (indexToRemove !== -1) {\n tabsArray.splice(indexToRemove, 1);\n setTabs(tabsArray);\n }\n };\n\n const addMoreTabPanes = () => {\n i += 1;\n const tabsArray = tabs;\n tabsArray.push(\n {\n label: `Added New Tab_${i}`,\n isIconOnly: false,\n key: `AddcloseTab_${i}`,\n content: `Added New Tab_${i}`,\n isActive: true,\n },\n );\n setActiveKey(`AddcloseTab_${i}`);\n setTabs(tabsArray);\n };\n\n const handleSelection = (event, selectedKey) => {\n if (selectedKey !== activeKey) {\n setActiveKey(selectedKey);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n \n ))}\n \n
\n );\n};\n\nexport default AddCloseTab;\n\n")))}fe.isMDXComponent=!0;var ye=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Add Close Tab",description:a,example:o.createElement(ue.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(fe,null),isExpanded:t})},he=a(10514),Te=["components"],xe={};function ve(e){var n=e.components,a=(0,l.Z)(e,Te);return(0,r.mdx)("wrapper",(0,t.Z)({},xe,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React, { useState } from \'react\';\nimport classNames from \'classnames/bind\';\nimport IconAddPerson from \'terra-icon/lib/icon/IconAddPerson\';\nimport IconSearch from \'terra-icon/lib/icon/IconSearch\';\nimport Tabs from \'terra-tabs\';\nimport Radio from \'terra-form-radio\';\nimport Field from \'terra-form-field\';\nimport Input from \'terra-form-input\';\nimport Fieldset from \'terra-form-fieldset\';\nimport TabContentTemplate from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nlet i = -1;\n\nconst AddCloseTabInteractive = () => {\n const tabsExample = [];\n const [tabs, setTabs] = useState(tabsExample);\n const [activeKey, setActiveKey] = useState();\n\n tabsExample.push(\n {\n label: \'Patient Information\',\n key: \'AddcloseInteractiveLabelTab\',\n content: \'Patient Information\',\n children:\n <>\n \n \n ,\n },\n );\n\n tabsExample.push(\n {\n label: \'Add Patient\',\n icon: ,\n isIconOnly: true,\n key: \'AddcloseInteractiveIconTab\',\n children:\n <>\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n ,\n },\n );\n\n tabsExample.push(\n {\n label: \'TPA & Insurance\',\n customDisplay:
TPA & Insurance
,\n key: \'AddcloseInteractiveCustomTab\',\n content: \'TPA & Insurance\',\n children:\n <>\n \n \n ,\n },\n );\n\n tabsExample.push(\n {\n label: \'Disabled Tab\',\n key: \'AddcloseInteractiveDisabledTab\',\n icon: ,\n isDisabled: true,\n },\n );\n\n tabsExample.push(\n {\n label: \'List of Out-Patient Details Department Wise\',\n key: \'AddcloseInteractivelongLabel\',\n content: \'List of Out-Patient Details Department Wise\',\n },\n );\n\n tabsExample.push(\n {\n label: \'Ambulance Service\',\n key: \'AddcloseInteractivelastTab\',\n content: \'Ambulance Service\',\n },\n );\n\n const handleTabClose = (tabdata, itemKey) => {\n const tabsArray = [...tabs];\n const indexToRemove = tabsArray.findIndex(tab => tab.key === itemKey);\n if (indexToRemove !== -1) {\n tabsArray.splice(indexToRemove, 1);\n setTabs(tabsArray);\n }\n };\n\n const addMoreTabPanes = () => {\n i += 1;\n const tabsArray = tabs;\n tabsArray.push(\n {\n label: `Added New Tab_${i}`,\n isIconOnly: false,\n key: `AddcloseInteractiveTab_${i}`,\n content: `Added New Tab_${i}`,\n isActive: true,\n },\n );\n setActiveKey(`AddcloseInteractiveTab_${i}`);\n setTabs(tabsArray);\n };\n\n const handleSelection = (event, selectedKey) => {\n if (selectedKey !== activeKey) {\n setActiveKey(selectedKey);\n }\n };\n\n return (\n
\n \n { tabs.map((tab) => (\n \n \n {tab.children}\n \n \n ))}\n \n
\n );\n};\n\nexport default AddCloseTabInteractive;\n\n')))}ve.isMDXComponent=!0;var ge=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Add Close Tab Interactive",description:a,example:o.createElement(he.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(ve,null),isExpanded:t})},Ce=a(89527),Ee=["components"],we={};function Pe(e){var n=e.components,a=(0,l.Z)(e,Ee);return(0,r.mdx)("wrapper",(0,t.Z)({},we,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},'import React from \'react\';\nimport classNames from \'classnames/bind\';\nimport IconAdd from \'terra-icon/lib/icon/IconAdd\';\nimport IconPerson from \'terra-icon/lib/icon/IconPerson\';\nimport Tabs from \'terra-tabs\';\nimport TabContent from \'./TabContentTemplate\';\nimport styles from \'./common/TabExample.module.scss\';\n\nconst cx = classNames.bind(styles);\n\nconst VerticalTabs = () => {\n const labelTab = (\n \n \n \n );\n\n const onlyiconTab = (\n } key="tonlyIconTab">\n \n \n );\n\n const iconTab = (\n } key="tIconTab">\n \n \n );\n\n const customTab = (\n \n Surgical Department\n \n )}\n label="Surgical Department"\n key="tCustomTab"\n >\n \n \n );\n\n const longLabel = (\n \n \n \n );\n\n const lastTab = (\n \n \n \n );\n\n return (\n
\n \n {onlyiconTab}\n {labelTab}\n {iconTab}\n {customTab}\n {longLabel}\n {lastTab}\n \n
\n );\n};\n\nexport default VerticalTabs;\n\n')))}Pe.isMDXComponent=!0;var ke=function(e){var n=e.title,a=e.description,t=e.isExpanded;return o.createElement(g.Z,{title:n||"Vertical Tabs",description:a,example:o.createElement(Ce.Z,null),exampleCssSrc:o.createElement(w,null),exampleSrc:o.createElement(Pe,null),isExpanded:t})},Ne=["components"],Ie={},De="wrapper";function _e(e){var n=e.components,a=(0,l.Z)(e,Ne);return(0,r.mdx)(De,(0,t.Z)({},Ie,a,{components:n,mdxType:"MDXLayout"}),(0,r.mdx)(i.C,{mdxType:"Badge"}),(0,r.mdx)("h1",{id:"terra-tabs"},"Terra Tabs"),(0,r.mdx)("p",null,"Tabs are containers used to organize content. They allow for quick switching between groups of contextually related content. Content is divided into different containers and each container is viewable one at a time. The user can switch between containers by selecting the corresponding tab control."),(0,r.mdx)("p",null,"Tabs are meant to organize content as to provide quick access to a group of contextually related content that does not need to be compared or accessed simultaneously. Tabs are not intended for navigation."),(0,r.mdx)("h2",{id:"getting-started"},"Getting Started"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},"Install with ",(0,r.mdx)("a",{parentName:"li",href:"https://www.npmjs.com/"},"npmjs"),":",(0,r.mdx)("ul",{parentName:"li"},(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"npm install terra-tabs"))))),(0,r.mdx)("h2",{id:"peer-dependencies"},"Peer Dependencies"),(0,r.mdx)("p",null,"This component requires the following peer dependencies be installed in your app for the component to properly function."),(0,r.mdx)("table",null,(0,r.mdx)("thead",{parentName:"table"},(0,r.mdx)("tr",{parentName:"thead"},(0,r.mdx)("th",{parentName:"tr",align:null},"Peer Dependency"),(0,r.mdx)("th",{parentName:"tr",align:null},"Version"))),(0,r.mdx)("tbody",{parentName:"table"},(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"react"),(0,r.mdx)("td",{parentName:"tr",align:null},"^16.8.5")),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"react-dom"),(0,r.mdx)("td",{parentName:"tr",align:null},"^16.8.5")),(0,r.mdx)("tr",{parentName:"tbody"},(0,r.mdx)("td",{parentName:"tr",align:null},"react-intl"),(0,r.mdx)("td",{parentName:"tr",align:null},"^2.8.0")))),(0,r.mdx)("h2",{id:"usage"},"Usage"),(0,r.mdx)("h3",{id:"note"},"Note"),(0,r.mdx)("p",null,"The tabs component will apply the prop ",(0,r.mdx)("inlineCode",{parentName:"p"},"isLabelHidden")," to all components passed as content for Tabs.Pane. This will indicate if any of the tabs are icon only or have been truncated. When this prop is true a header should be rendered in the content area to for accessibility purposes."),(0,r.mdx)("h3",{id:"controlled-vs-uncontrolled-tabs"},"Controlled vs. Uncontrolled Tabs"),(0,r.mdx)("p",null,"Terra-tabs allows you to use either a controlled or uncontrolled mode in order to have the amount control over the state that you need."),(0,r.mdx)("h3",{id:"uncontrolled-tabs"},"Uncontrolled Tabs"),(0,r.mdx)("p",null,"Uncontrolled tabs is the default mode of terra-tabs. In this mode the tabs will handle all state internally and the initial active tab can optionally be set using ",(0,r.mdx)("inlineCode",{parentName:"p"},"defaultActiveKey")," on the ",(0,r.mdx)("inlineCode",{parentName:"p"},"")," component."),(0,r.mdx)("h3",{id:"controlled-tabs"},"Controlled Tabs"),(0,r.mdx)("p",null,"In controlled mode terra-tabs does not handle any of the selection state internally, it is left up to the consumer. This mode is enabled by setting the ",(0,r.mdx)("inlineCode",{parentName:"p"},"activeKey")," prop on the ",(0,r.mdx)("inlineCode",{parentName:"p"},"")," component. A handler is needed for ",(0,r.mdx)("inlineCode",{parentName:"p"},"onChange")," to be notified of user selection and update the state. If both ",(0,r.mdx)("inlineCode",{parentName:"p"},"activeKey")," and ",(0,r.mdx)("inlineCode",{parentName:"p"},"defaultActiveKey")," are set, then ",(0,r.mdx)("inlineCode",{parentName:"p"},"defaultActiveKey")," will have no effect."),(0,r.mdx)("h3",{id:"keyboard-navigation-guide"},"Keyboard Navigation Guide"),(0,r.mdx)("h4",{id:"performing-drag-and-drop"},"Performing Drag and Drop"),(0,r.mdx)("p",null,"When a draggable tab has focus press the ",(0,r.mdx)("inlineCode",{parentName:"p"},"Spacebar")," key to start the drag. Once a drag is started, the following keyboard shortcuts can be used:"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Spacebar")," - Drop the tab"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Escape")," - Cancel the drag"),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Left arrow")," - move the tab to the left."),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("inlineCode",{parentName:"li"},"Right arrow")," - move the tab to the right.")),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-jsx"},"import Tabs from 'terra-tabs';\n")),(0,r.mdx)("h2",{id:"component-features"},"Component Features"),(0,r.mdx)("ul",null,(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support"},"Cross-Browser Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support"},"Responsive Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support"},"Mobile Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n"},"Internationalization Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n"},"Localization Support")),(0,r.mdx)("li",{parentName:"ul"},(0,r.mdx)("a",{parentName:"li",href:"https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl"},"LTR/RTL Support"))),(0,r.mdx)("h2",{id:"examples"},"Examples"),(0,r.mdx)(P,{title:"Compact",mdxType:"TabsTemplate"}),(0,r.mdx)(_,{title:"Expanded",mdxType:"TabsTemplateExpanded"}),(0,r.mdx)(V,{title:"Icon Only",mdxType:"IconOnlyTabs"}),(0,r.mdx)(G,{title:"Will Display Icons in Menu When Collapsed",mdxType:"IconsInMenuTabs"}),(0,r.mdx)(M,{title:"Fill Parent Container",mdxType:"TabsWithFilledContent"}),(0,r.mdx)(z,{title:"Toggle responsiveTo Variants",mdxType:"ResponsiveTabsVariant"}),(0,r.mdx)(ne,{title:"Draggable Tabs",mdxType:"DraggableTabs"}),(0,r.mdx)(re,{title:"Add New Tab",mdxType:"AddTab"}),(0,r.mdx)(me,{title:"Closable Tabs",mdxType:"ClosableTab"}),(0,r.mdx)(ye,{title:"Add and Close Tab",mdxType:"AddCloseTab"}),(0,r.mdx)(ge,{title:"Add and Close with Interactive Content",mdxType:"AddCloseTabInteractive"}),(0,r.mdx)(ke,{title:"Vertical Tabs",mdxType:"VerticalTabs"}),(0,r.mdx)("h2",{id:"tabs-props-table"},"Tabs Props Table"),(0,r.mdx)(u,{mdxType:"TabsPropsTable"}),(0,r.mdx)("h2",{id:"tabs-pane-props-table"},"Tabs Pane Props Table"),(0,r.mdx)(y,{mdxType:"PanePropsTable"}),(0,r.mdx)("h2",{id:"testing"},"Testing"),(0,r.mdx)("p",null,"Tabs uses ",(0,r.mdx)("inlineCode",{parentName:"p"},"uuid")," which changes the component's description id dynamically. To mock the return value with the Jest testing library, ",(0,r.mdx)("inlineCode",{parentName:"p"},"jest.spyOn")," can be used."),(0,r.mdx)("p",null,"If Enzyme ",(0,r.mdx)("inlineCode",{parentName:"p"},"shallow")," rendering is being used for the tests then the mock may not be required. However, if ",(0,r.mdx)("inlineCode",{parentName:"p"},"mount")," is used then ",(0,r.mdx)("inlineCode",{parentName:"p"},"uuid")," should be mocked as shown below:"),(0,r.mdx)("pre",null,(0,r.mdx)("code",{parentName:"pre",className:"language-js"},"import { v4 as uuidv4 } from 'uuid';\n\nlet mockSpyUuid;\n\n// using a variable may result in failures. For best results, mock return value.\nbeforeAll(() => {\n mockSpyUuid = jest.spyOn(uuidv4, 'v4').mockReturnValue('00000000-0000-0000-0000-000000000000');\n});\n\n// restore the mock\nafterAll(() => {\n mockSpyUuid.mockRestore();\n});\n\n")))}_e.isMDXComponent=!0},63718:function(e,n,a){"use strict";a.d(n,{C:function(){return o}});var t=a(67294),l=a(22863),o=function(e){var n=e.url;return t.createElement(l.Z,{src:"https://github.com/cerner/terra-framework/tree/main/packages/terra-tabs",name:"terra-tabs",version:"7.13.0",url:n})}},19747:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(861)),r=t(a(27424)),i=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=b(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),s=t(a(47166)),d=t(a(68766)),c=t(a(50826)),m=t(a(76414)),u=t(a(2331)),p=t(a(85492));function b(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(b=function(e){return e?a:n})(e)}var f=s.default.bind(p.default),y=-1;n.Z=function(){var e=[],n=(0,i.useState)(e),a=(0,r.default)(n,2),t=a[0],l=a[1],s=(0,i.useState)(),p=(0,r.default)(s,2),b=p[0],h=p[1];e.push({label:"Patient Information",key:"AddcloseLabelTab",content:"Patient Information"}),e.push({label:"Add Patient",icon:i.default.createElement(d.default,null),isIconOnly:!0,key:"AddcloseIconTab",content:"Add Patient"}),e.push({label:"TPA & Insurance",customDisplay:i.default.createElement("div",{className:f("custom-display")},"TPA & Insurance"),key:"AddcloseCustomTab",content:"TPA & Insurance"}),e.push({label:"Disabled Tab",key:"AddcloseDisabledTab",icon:i.default.createElement(c.default,null),isDisabled:!0}),e.push({label:"List of Out-Patient Details Department Wise",key:"AddcloselongLabel",content:"List of Out-Patient Details Department Wise"}),e.push({label:"Ambulance Service",key:"AddcloselastTab",content:"Ambulance Service"});return i.default.createElement("div",{className:f("content-wrapper")},i.default.createElement(m.default,{id:"Addclose",onChange:function(e,n){n!==b&&h(n)},activeKey:b,setFocusOnContent:!0,isClosable:!0,onSelectAddButton:function(){y+=1;var e=t;e.push({label:"Added New Tab_".concat(y),isIconOnly:!1,key:"AddcloseTab_".concat(y),content:"Added New Tab_".concat(y),isActive:!0}),h("AddcloseTab_".concat(y)),l(e)},ariaLabelAddTab:"Add Tab",onTabClose:function(e,n){var a=(0,o.default)(t),r=a.findIndex((function(e){return e.key===n}));-1!==r&&(a.splice(r,1),l(a))}},t.map((function(e){return i.default.createElement(m.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},i.default.createElement(u.default,{label:e.content}))}))))}},10514:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(861)),r=t(a(27424)),i=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=T(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),s=t(a(47166)),d=t(a(68766)),c=t(a(50826)),m=t(a(76414)),u=t(a(79029)),p=t(a(47717)),b=t(a(55142)),f=t(a(96388)),y=t(a(2331)),h=t(a(85492));function T(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(T=function(e){return e?a:n})(e)}var x=s.default.bind(h.default),v=-1;n.Z=function(){var e=[],n=(0,i.useState)(e),a=(0,r.default)(n,2),t=a[0],l=a[1],s=(0,i.useState)(),h=(0,r.default)(s,2),T=h[0],g=h[1];e.push({label:"Patient Information",key:"AddcloseInteractiveLabelTab",content:"Patient Information",children:i.default.createElement(i.default.Fragment,null,i.default.createElement(u.default,{id:"default-radio",labelText:"Default Radio",name:"default",disabled:!0}),i.default.createElement(u.default,{id:"default1-radio",labelText:"Default Radio",name:"default"}))}),e.push({label:"Add Patient",icon:i.default.createElement(d.default,null),isIconOnly:!0,key:"AddcloseInteractiveIconTab",children:i.default.createElement(i.default.Fragment,null,i.default.createElement("div",null,i.default.createElement(f.default,{type:"checkbox",legend:"Give your full name here",name:"children_present",value:"children_present",error:"All fields must be filled out",required:!0},i.default.createElement(p.default,{label:"First",isInline:!0,required:!0,htmlFor:"first"},i.default.createElement(b.default,{id:"first",type:"text",name:"first",defaultValue:""})),i.default.createElement(p.default,{label:"Middle",isInline:!0,required:!0,htmlFor:"middle"},i.default.createElement(b.default,{id:"middle",type:"text",name:"middle",defaultValue:""})),i.default.createElement(p.default,{label:"Last",isInline:!0,required:!0,htmlFor:"last"},i.default.createElement(b.default,{id:"last",type:"text",name:"last",defaultValue:""})))))}),e.push({label:"TPA & Insurance",customDisplay:i.default.createElement("div",{className:x("custom-display")},"TPA & Insurance"),key:"AddcloseInteractiveCustomTab",content:"TPA & Insurance",children:i.default.createElement(i.default.Fragment,null,i.default.createElement(u.default,{id:"default-radio",labelText:"Default Radio",name:"default",disabled:!0}),i.default.createElement(u.default,{id:"default1-radio",labelText:"Default Radio",name:"default"}))}),e.push({label:"Disabled Tab",key:"AddcloseInteractiveDisabledTab",icon:i.default.createElement(c.default,null),isDisabled:!0}),e.push({label:"List of Out-Patient Details Department Wise",key:"AddcloseInteractivelongLabel",content:"List of Out-Patient Details Department Wise"}),e.push({label:"Ambulance Service",key:"AddcloseInteractivelastTab",content:"Ambulance Service"});return i.default.createElement("div",{className:x("content-wrapper")},i.default.createElement(m.default,{id:"AddcloseInteractive",onChange:function(e,n){n!==T&&g(n)},activeKey:T,isClosable:!0,onSelectAddButton:function(){v+=1;var e=t;e.push({label:"Added New Tab_".concat(v),isIconOnly:!1,key:"AddcloseInteractiveTab_".concat(v),content:"Added New Tab_".concat(v),isActive:!0}),g("AddcloseInteractiveTab_".concat(v)),l(e)},ariaLabelAddTab:"Add Tab",onTabClose:function(e,n){var a=(0,o.default)(t),r=a.findIndex((function(e){return e.key===n}));-1!==r&&(a.splice(r,1),l(a))}},t.map((function(e){return i.default.createElement(m.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},i.default.createElement(y.default,{label:e.content},e.children))}))))}},90643:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(27424)),r=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=p(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),i=t(a(47166)),s=t(a(56468)),d=t(a(50826)),c=t(a(76414)),m=t(a(2331)),u=t(a(85492));function p(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(p=function(e){return e?a:n})(e)}var b=i.default.bind(u.default),f=-1;n.Z=function(){var e=[],n=(0,r.useState)(e),a=(0,o.default)(n,2),t=a[0],l=a[1],i=(0,r.useState)(),u=(0,o.default)(i,2),p=u[0],y=u[1];e.push({label:"Self Registration",key:"AddLabelTab",content:"Self Registration"}),e.push({label:"Find A Doctor",icon:r.default.createElement(d.default,null),isIconOnly:!0,key:"AddIconTab",content:"Find A Doctor"}),e.push({label:"View Specialities",customDisplay:r.default.createElement("div",{className:b("custom-display")},"View Specialities"),key:"AddCustomTab",content:"View Specialities"}),e.push({label:"Pharmacy",key:"AddDisabledTab",icon:r.default.createElement(s.default,null)}),e.push({label:"Billing, Insurance & Payment",key:"AddlongLabel",content:"Billing, Insurance & Payment"}),e.push({label:"Lab Medicine",key:"AddlastTab",content:"Lab Medicine"});return r.default.createElement("div",{className:b("content-wrapper")},r.default.createElement(c.default,{id:"AddTab",onChange:function(e,n){n!==p&&y(n)},isDraggable:!0,setFocusOnContent:!0,activeKey:p,onSelectAddButton:function(){f+=1;var e=t;e.push({label:"Added New Tab_".concat(f),isIconOnly:!1,key:"AddTab_".concat(f),content:"Added New Tab_".concat(f),isActive:!0}),y("AddTab_".concat(f)),l(e)},ariaLabelAddTab:"Add Tab"},t.map((function(e){return r.default.createElement(c.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},r.default.createElement(m.default,{label:e.content}))}))))}},37902:function(e,n,a){"use strict";var t=a(64836),l=a(18698);n.Z=void 0;var o=t(a(861)),r=t(a(27424)),i=function(e,n){if(!n&&e&&e.__esModule)return e;if(null===e||"object"!=l(e)&&"function"!=typeof e)return{default:e};var a=b(n);if(a&&a.has(e))return a.get(e);var t={__proto__:null},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var r in e)if("default"!==r&&Object.prototype.hasOwnProperty.call(e,r)){var i=o?Object.getOwnPropertyDescriptor(e,r):null;i&&(i.get||i.set)?Object.defineProperty(t,r,i):t[r]=e[r]}return t.default=e,a&&a.set(e,t),t}(a(67294)),s=t(a(47166)),d=t(a(56468)),c=t(a(50826)),m=t(a(76414)),u=t(a(2331)),p=t(a(85492));function b(e){if("function"!=typeof WeakMap)return null;var n=new WeakMap,a=new WeakMap;return(b=function(e){return e?a:n})(e)}var f=s.default.bind(p.default);n.Z=function(){var e=[],n=(0,i.useState)(e),a=(0,r.default)(n,2),t=a[0],l=a[1];e.push({label:"Doctors",key:"CloseLabelTab",content:"Doctor details"}),e.push({label:"Pharmacy",icon:i.default.createElement(d.default,null),isIconOnly:!0,key:"CloseIconTab",content:"Pharmacy details"}),e.push({label:"Customized Tab",customDisplay:i.default.createElement("div",{className:f("custom-display")},"Customized Tab"),key:"CloseCustomTab",content:"Custom display"}),e.push({label:"Disabled Tab",key:"CloseDisabledTab",icon:i.default.createElement(c.default,null),isDisabled:!0}),e.push({label:"List of In-Patient Details Department Wise",key:"CloselongLabel",content:"List for In-Patient Details Department Wise"}),e.push({label:"Appointments",key:"CloselastTab",content:"Appointments"});return i.default.createElement("div",{className:f("content-wrapper")},i.default.createElement(m.default,{id:"Closabletab",setFocusOnContent:!0,isClosable:!0,ariaLabelAddTab:"Add Tab",onTabClose:function(e,n){var a=(0,o.default)(t),r=a.findIndex((function(e){return e.key===n}));-1!==r&&(a.splice(r,1),l(a))}},t.map((function(e){return i.default.createElement(m.default.Pane,{label:e.label,isIconOnly:e.isIconOnly,customDisplay:e.customDisplay,isDisabled:e.isDisabled,icon:e.icon,key:e.key,id:e.key},i.default.createElement(u.default,{label:e.content}))}))))}},19762:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(56690)),o=t(a(89728)),r=t(a(66115)),i=t(a(61655)),s=t(a(94993)),d=t(a(73808)),c=t(a(67294)),m=t(a(76414)),u=t(a(62936));function p(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,t=(0,d.default)(e);if(n){var l=(0,d.default)(this).constructor;a=Reflect.construct(t,arguments,l)}else a=t.apply(this,arguments);return(0,s.default)(this,a)}}var b=function(e){(0,i.default)(a,e);var n=p(a);function a(e){var t;return(0,l.default)(this,a),(t=n.call(this,e)).state={activeKey:"Hematology"},t.handleSelection=t.handleSelection.bind((0,r.default)(t)),t.handleTabActivation=t.handleTabActivation.bind((0,r.default)(t)),t}return(0,o.default)(a,[{key:"handleSelection",value:function(e,n){n!==this.state.activeKey&&this.setState({activeKey:n})}},{key:"handleTabActivation",value:function(){this.setState({activeKey:"Radiology"})}},{key:"render",value:function(){var e=c.default.createElement(m.default.Pane,{label:"Radiology",key:"Radiology",id:"tab1"},c.default.createElement("p",{id:"tab1"},"Radiology represents a branch of medicine that deals with radiant energy in the diagnosis and treatment of diseases. This field can be divided into two broad areas - diagnostic radiology and interventional radiology. A physician who specializes in radiology is called radiologist.")),n=c.default.createElement(m.default.Pane,{label:"Hematology",key:"Hematology",id:"tab2"},c.default.createElement("p",{id:"tab2"},"Hematology is the study of blood and blood disorders. Hematologists and hematopathologists are highly trained healthcare providers who specialize in diseases of the blood and blood components. These include blood and bone marrow cells.")),a=c.default.createElement(m.default.Pane,{label:"Cardiology",key:"Cardiology",id:"tab3"},c.default.createElement("p",{id:"tab3"},"The term cardiology is derived from the Greek words “cardia,” which refers to the heart and “logy” meaning “study of.” Cardiology is a branch of medicine that concerns diseases and disorders of the heart. It may range from congenital defects through to acquired heart diseases such as coronary artery disease and congestive heart failure. Physicians who specialize in cardiology are called cardiologists and they are responsible for the medical management of various heart diseases. Cardiac surgeons are the specialist physicians who perform surgical procedures to correct heart disorders.")),t=c.default.createElement(m.default.Pane,{icon:c.default.createElement(u.default,null),isIconOnly:!0,label:"Orthopaedics",key:"Orthopaedics",id:"tab4"},c.default.createElement("p",{id:"tab4"},"Orthopaedic surgery refers to surgical intervention in the case of diseases or injuries concerning the musculoskeletal system. After proper diagnoses and consultation, orthopaedic surgeons treat several conditions that affect the bones, joints, ligaments, nerves and muscles.")),l=c.default.createElement(m.default.Pane,{icon:c.default.createElement(u.default,null),showIcon:!0,label:"Paediatrics",key:"Paediatrics",id:"tab5"},c.default.createElement("p",{id:"tab5"},"Pediatrics is the branch of medicine dealing with the health and medical care of infants, children, and adolescents from birth up to the age of 18. The word “paediatrics” means “healer of children”; they are derived from two Greek words: (pais = child) and (iatros = doctor or healer). Paediatrics is a relatively new medical specialty, developing only in the mid-19th century. Abraham Jacobi (1830–1919) is known as the father of paediatrics.")),o=c.default.createElement(m.default.Pane,{label:"Oncology",key:"Oncology",id:"tab6"},c.default.createElement("p",{id:"tab6"},"Oncology is the study of cancer. An oncologist is a doctor who treats cancer and provides medical care for a person diagnosed with cancer. An oncologist may also be called a cancer specialist. The field of oncology has 3 major areas based on treatments: medical oncology, radiation oncology, and surgical oncology."));return c.default.createElement("div",null,c.default.createElement("button",{id:"activate-tab",type:"button",onClick:this.handleTabActivation},"Activate Tab"),c.default.createElement("div",{id:"current-selection"},c.default.createElement("p",null,"Last Triggered Tab:",this.state.activeKey)),c.default.createElement(m.default,{setFocusOnContent:!0,isDraggable:!0,id:"controlledTabs",onChange:this.handleSelection,activeKey:this.state.activeKey},e,n,a,t,l,o))}}]),a}(c.default.Component);n.Z=b},29230:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(56468)),i=t(a(50826)),s=t(a(78878)),d=t(a(45697)),c=t(a(88245)),m=t(a(76414)),u=t(a(2331)),p=t(a(85492)),b=o.default.bind(p.default),f={id:d.default.string},y=function(e){var n=l.default.createElement(m.default.Pane,{label:"Search",icon:l.default.createElement(i.default,null),isIconOnly:!0,key:"Search"},l.default.createElement(u.default,{label:"Search"})),a=l.default.createElement(m.default.Pane,{label:"Briefcase",icon:l.default.createElement(r.default,null),isIconOnly:!0,key:"Briefcase"},l.default.createElement(u.default,{label:"Briefcase"})),t=l.default.createElement(m.default.Pane,{label:"Bookmark",icon:l.default.createElement(s.default,null),isIconOnly:!0,key:"Bookmark"},l.default.createElement(u.default,{label:"Bookmark"})),o=l.default.createElement(m.default.Pane,{label:"Calendar",icon:l.default.createElement(c.default,null),isIconOnly:!0,key:"Calendar"},l.default.createElement(u.default,{label:"Calendar"}));return l.default.createElement("div",{className:b("content-wrapper")},l.default.createElement(m.default,{id:e.id,setFocusOnContent:!0},n,a,t,o))};y.propTypes=f;n.default=y},86196:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(76414)),i=t(a(50826)),s=t(a(56468)),d=t(a(78878)),c=t(a(88245)),m=t(a(71739)),u=t(a(87491)),p=t(a(2331)),b=t(a(85492)),f=o.default.bind(b.default);n.Z=function(){var e=l.default.createElement(r.default.Pane,{label:"Search",icon:l.default.createElement(i.default,null),showIcon:!0,key:"MenuTabSearch"},l.default.createElement(p.default,{label:"Search",id:"MenuTabSearchContent"})),n=l.default.createElement(r.default.Pane,{label:"Briefcase",icon:l.default.createElement(s.default,null),showIcon:!0,key:"MenuTabBriefcase"},l.default.createElement(p.default,{label:"Briefcase",id:"MenuTabBriefcaseContent"})),a=l.default.createElement(r.default.Pane,{label:"Bookmark",icon:l.default.createElement(d.default,null),showIcon:!0,key:"MenuTabBookmark"},l.default.createElement(p.default,{label:"Bookmark",id:"MenuTabBookmarkContent"})),t=l.default.createElement(r.default.Pane,{label:"Calendar",icon:l.default.createElement(c.default,null),showIcon:!0,key:"MenuTabCalendar"},l.default.createElement(p.default,{label:"Calendar",id:"MenuTabCalendarContent"})),o=l.default.createElement(r.default.Pane,{label:"Envelope",icon:l.default.createElement(m.default,null),showIcon:!0,key:"MenuTabEnvelope"},l.default.createElement(p.default,{label:"Envelope",id:"MenuTabEnvelopeContent"})),b=l.default.createElement(r.default.Pane,{label:"Printer",icon:l.default.createElement(u.default,null),showIcon:!0,key:"MenuTabPrinter"},l.default.createElement(p.default,{label:"Printer",id:"MenuTabPrinterContent"}));return l.default.createElement("div",{className:f("content-wrapper")},l.default.createElement(r.default,{setFocusOnContent:!0,id:"icons-only-menu"},e,n,a,t,o,b))}},74584:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(10434)),o=t(a(13012)),r=t(a(67294)),i=t(a(45697)),s=t(a(84423)),d=t(a(55653)),c=t(a(29230)),m={renderIconTabs:i.default.bool},u=function(e){var n=(0,l.default)({},((0,o.default)(e),e));return n.renderIconTabs?r.default.createElement(c.default,(0,l.default)({},n,{id:"iconOnlyTabsId"})):r.default.createElement(d.default,(0,l.default)({},n,{id:"responsive"}))};u.propTypes=m;n.Z=(0,s.default)(u)},84423:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(10434)),o=t(a(56690)),r=t(a(89728)),i=t(a(66115)),s=t(a(61655)),d=t(a(94993)),c=t(a(73808)),m=t(a(67294)),u=t(a(47166)),p=t(a(91940));function b(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,t=(0,c.default)(e);if(n){var l=(0,c.default)(this).constructor;a=Reflect.construct(t,arguments,l)}else a=t.apply(this,arguments);return(0,d.default)(this,a)}}var f=u.default.bind(p.default);n.default=function(e){return function(n){(0,s.default)(t,n);var a=b(t);function t(e){var n;return(0,o.default)(this,t),(n=a.call(this,e)).handleOnSelect=n.handleOnSelect.bind((0,i.default)(n)),n.state={containerClassName:"parent-container-650",renderIconTabs:!1},n}return(0,r.default)(t,[{key:"handleOnSelect",value:function(e){this.setState({renderIconTabs:"default"!==e.target.value.split("-")[0],containerClassName:e.target.value})}},{key:"render",value:function(){return m.default.createElement("div",{className:f(this.state.containerClassName)},m.default.createElement(e,(0,l.default)({renderIconTabs:this.state.renderIconTabs},this.props)),m.default.createElement("div",{className:f("options-container")},m.default.createElement("p",null,m.default.createElement("label",{htmlFor:"responsiveTabsVariant"},"Select a responsiveTo variant:")),m.default.createElement("select",{className:f("options"),id:"responsiveTabsVariant",name:"responsiveTabsVariant",value:this.state.containerClassName,onChange:this.handleOnSelect},m.default.createElement("option",{value:"default-window"},"Default Tabs - Window"),m.default.createElement("option",{value:"default-parent-container-220"},"Default Tabs - Parent (Container Width: 220px)"),m.default.createElement("option",{value:"default-parent-container-650"},"Default Tabs - Parent (Container Width: 650px)"),m.default.createElement("option",{value:"icon-window"},"Icon Only Tabs - Window"),m.default.createElement("option",{value:"icon-none-container-220"},"Icon Only Tabs - None (Container Width: 220px)"),m.default.createElement("option",{value:"icon-none-container-650"},"Icon Only Tabs - None (Container Width: 650px)"),m.default.createElement("option",{value:"icon-parent-container-220"},"Icon Only Tabs - Parent (Container Width: 220px)"))))}}]),t}(m.default.Component)}},2331:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(45697)),i=t(a(85492)),s=o.default.bind(i.default),d={isLabelHidden:r.default.bool,label:r.default.string,children:r.default.node,id:r.default.string},c=function(e){var n=e.isLabelHidden,a=e.label,t=e.id,o=e.children;return l.default.createElement("div",{className:s("tab-content-template"),id:t},n?l.default.createElement("h3",null,a):null,o||l.default.createElement("div",null,"Content for"," ",l.default.createElement("i",null,a)))};c.propTypes=d;n.default=c},55653:function(e,n,a){"use strict";var t=a(64836);Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(45697)),i=t(a(56468)),s=t(a(76414)),d=t(a(2331)),c=t(a(85492)),m=o.default.bind(c.default),u={id:r.default.string},p=function(e){var n=e.id?e.id:"compact",a=l.default.createElement(s.default.Pane,{label:"Tab with label",key:"".concat(n,"LabelTab"),id:"".concat(n,"LabelTab")},l.default.createElement(d.default,{label:"Tab with label",id:"".concat(n,"LabelTabContent")})),t=l.default.createElement(s.default.Pane,{label:"Tab with icon",icon:l.default.createElement(i.default,null),key:"".concat(n,"IconTab"),id:"".concat(n,"IconTab")},l.default.createElement(d.default,{id:"".concat(n,"IconTabContent"),label:"Tab with icon"}));return l.default.createElement("div",{className:m("content-wrapper"),id:"".concat(n,"content")},l.default.createElement(s.default,{setFocusOnContent:!0,defaultActiveKey:"".concat(n,"LabelTab"),id:n},a,t))};p.propTypes=u;n.default=p},45856:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(45697)),i=t(a(56468)),s=t(a(50826)),d=t(a(76414)),c=t(a(2331)),m=t(a(85492)),u=o.default.bind(m.default),p={tabFill:r.default.bool},b=function(e){var n=l.default.createElement(d.default.Pane,{label:"Tab with label",key:"ExpandedLabelTab"},l.default.createElement(c.default,{label:"Tab with label",id:"ExpandedLabelTab"})),a=l.default.createElement(d.default.Pane,{label:"Tab with icon",icon:l.default.createElement(i.default,null),key:"ExpandedIconTab"},l.default.createElement(c.default,{label:"Tab with icon",id:"ExpandedIconTabContent"})),t=l.default.createElement(d.default.Pane,{customDisplay:l.default.createElement("div",{className:u("custom-display")},"Custom display"),label:"Custom display",key:"ExpandedCustomTab"},l.default.createElement(c.default,{id:"ExpandedCustomTabContent",label:"Custom display"})),o=l.default.createElement(d.default.Pane,{label:"Longer text tab name with label for application",key:"ExpandedlongLabel"},l.default.createElement(c.default,{id:"ExpandedlongLabelContent",label:"Longer text tab name with label for application"})),r=l.default.createElement(d.default.Pane,{label:"Last Tab",key:"ExpandedlastTab"},l.default.createElement(c.default,{id:"ExpandedlastTabContent",label:"Last Tab"})),m=l.default.createElement(d.default.Pane,{label:"Disabled Tab",icon:l.default.createElement(s.default,null),isDisabled:!0,key:"ExpandedDisabledTab"});return l.default.createElement("div",{className:u("content-wrapper")},l.default.createElement(d.default,{setFocusOnContent:!0,defaultActiveKey:"ExpandedLabelTab",tabFill:e.tabFill,id:"icon-in-menu"},n,a,t,m,o,r))};b.propTypes=p;n.Z=function(){return l.default.createElement(b,{tabFill:!0,id:"expanded"})}},76465:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(76414)),i=t(a(2331)),s=t(a(85492)),d=o.default.bind(s.default),c=function(){var e=l.default.createElement(r.default.Pane,{label:"Large content",key:"LargeContent"},l.default.createElement(i.default,{label:"Large Content"},l.default.createElement("p",null,"Users need to know what is going on, and get appropriate feedback during interaction. For example, users need confirmation messages when actions are completed, such as when forms are submitted. Also, error messages must provide clear directions rather than confuse users. People with some cognitive and learning disabilities, who may be easily confused by unexpected behavior and unclear error messages. People with partial sight and blindness, who rely on notifications, instructions, and errors messages to understand the context and interactions. Content is more usable for people who are new to the particular website or application."),l.default.createElement("p",null,"Content is more usable for people who are not confident using computers and the web. Content is less confusing and daunting to everyone, regardless of skills. Use clear and simple language to make error messages more understandable. For example, describe how to fix an error. When forms are submitted, provide a confirmation message. When a change is made on the screen, such as new content added, alert users to the change. Content must be easy to follow and understand for many users. For most content, this means simply avoiding overly complex sentences and jargon, and providing clear layout and design. For some complex content such as medical information, separate, easy-to-read information may be necessary. People with learning disabilities who cannot understand complex sentence structures and vocabulary."),l.default.createElement("p",null,"People with cognitive disabilities who have difficulty focusing on long passages of dense text. Content is more usable for people with lower language skills, such as people who are not fluent in the language of the website and people with low literacy. Content is easier to understand by users who are not familiar with the topic. Content is easier to skim, and get an overview of the information."),l.default.createElement("p",null,"Avoid overly complex words, jargon, and acronyms, or provide explanations when they need to be used. Provide structure using headings, lists, and spacing. Provide illustrations that clarify the content, when helpful. Provide clear layout and design with consistent orientation and navigation cues. Some users need to be able to change the way text is displayed so that they can read the text. This includes changing the size, spacing, font, color, and other text properties. When users change these properties, no information or functionality should be lost, and the text should re-flow so users don’t have to scroll horizontally to read sentences. Text customization is more than the zoom functionality, which only changes the text size. People with low vision who are not using screen magnification software. People with some forms of dyslexia and other cognitive and learning disabilities who need a particular presentation of text to read it. Content is more adaptable to smaller and larger screen sizes. Content is more adaptable to personal preferences and comfort."),l.default.createElement("p",null,"Content is more adaptable when translated, since words and sentences are different lengths in different languages. Content must be properly designed and coded so that it can adapt to different customization settings. This includes using relative rather than absolute units for the size of fonts, controls, and other objects. Applications should use the operating system and web browser text settings. Websites and applications could also provide information to help users change their settings. Web browsers and other web tools need to provide users with text customization functionality. The area for clicking and tapping controls must be large enough for people to activate them. This includes links, buttons, checkboxes, and other controls. Small controls, and controls that are placed too close to each other, are difficult for many people to use. This is particularly relevant on mobile devices with small screens. People with physical disabilities who have reduced dexterity. Content is more usable on touch screens, especially on smaller mobile devices."),l.default.createElement("p",null,"Content is more usable for people who are not experienced with the mouse or touch-pad on the computer they are using. Content is more usable in situations where the device cannot be held steady. Design large controls or activation areas around the controls. (Increasing the font size of the control sometimes isn’t enough.) Provide adequate separation between selectable controls. Provide labels for controls, which enlarges the activation area in many browsers because the label for checkboxes and option buttons is also clickable."))),n=l.default.createElement(r.default.Pane,{label:"Short Content",key:"ShortContent"},l.default.createElement(i.default,{label:"Short Content"}));return l.default.createElement("div",{className:d("content-container")},l.default.createElement(r.default,{setFocusOnContent:!0,fill:!0,id:"filledcontent"},e,n))};n.Z=function(){return l.default.createElement(c,{fill:!0})}},89527:function(e,n,a){"use strict";var t=a(64836);n.Z=void 0;var l=t(a(67294)),o=t(a(47166)),r=t(a(30217)),i=t(a(41086)),s=t(a(76414)),d=t(a(2331)),c=t(a(85492)),m=o.default.bind(c.default);n.Z=function(){var e=l.default.createElement(s.default.Pane,{label:"Medical Department",key:"tLabelTab"},l.default.createElement(d.default,{label:"Medical Department"})),n=l.default.createElement(s.default.Pane,{label:"Pharmacy Deparment",isIconOnly:!0,icon:l.default.createElement(r.default,null),key:"tonlyIconTab"},l.default.createElement(d.default,{label:"Pharmacy Deparment"})),a=l.default.createElement(s.default.Pane,{label:"Patient Department",icon:l.default.createElement(i.default,null),key:"tIconTab"},l.default.createElement(d.default,{label:"Patient Department"})),t=l.default.createElement(s.default.Pane,{customDisplay:l.default.createElement("div",{className:m("custom-display")},"Surgical Department"),label:"Surgical Department",key:"tCustomTab"},l.default.createElement(d.default,{label:"Surgical Department"})),o=l.default.createElement(s.default.Pane,{label:"Department of Hospital Administration",key:"tlongLabel"},l.default.createElement(d.default,{label:"Department of Hospital Administration"})),c=l.default.createElement(s.default.Pane,{label:"Academic Department",key:"tlastTab"},l.default.createElement(d.default,{label:"Academic Department"}));return l.default.createElement("div",{className:m("content-container-vertical")},l.default.createElement(s.default,{isDraggable:!0,fill:!0,verticalOrientation:!0,setFocusOnContent:!0,id:"verticaltab"},n,e,a,t,o,c))}},17422:function(e,n,a){"use strict";a.r(n),n.default={badge:"Badges-module__badge___vex-+","badge-container":"Badges-module__badge-container___B13Mv","badge-name":"Badges-module__badge-name___jkN0m","badge-version":"Badges-module__badge-version___agZ+P"}},53560:function(e,n,a){"use strict";a.r(n),n.default={"clinical-lowlight-theme":"ExampleTemplate-module__clinical-lowlight-theme___rBbtD","orion-fusion-theme":"ExampleTemplate-module__orion-fusion-theme___GzA23",template:"ExampleTemplate-module__template___a4uPk",header:"ExampleTemplate-module__header___iFXV3",content:"ExampleTemplate-module__content___48m4Q",description:"ExampleTemplate-module__description___NwBJo",footer:"ExampleTemplate-module__footer___GpSoG","button-container":"ExampleTemplate-module__button-container___rAD11",css:"ExampleTemplate-module__css___+jtk1",code:"ExampleTemplate-module__code___7rC6C","css-toggle":"ExampleTemplate-module__css-toggle___chHK7","code-toggle":"ExampleTemplate-module__code-toggle___TGlE-","is-selected":"ExampleTemplate-module__is-selected___0BYwS",item:"ExampleTemplate-module__item___8FTQq",chevron:"ExampleTemplate-module__chevron___VbY7N",title:"ExampleTemplate-module__title___r+nbJ","dynamic-content":"ExampleTemplate-module__dynamic-content___k+1H7"}},91940:function(e,n,a){"use strict";a.r(n),n.default={"default-window":"ResponsiveTabsVariantWrapper-module__default-window___OILOY","icon-window":"ResponsiveTabsVariantWrapper-module__icon-window___rE8aT","default-parent-container-220":"ResponsiveTabsVariantWrapper-module__default-parent-container-220___rR3aL","icon-parent-container-220":"ResponsiveTabsVariantWrapper-module__icon-parent-container-220___puNHZ","default-parent-container-650":"ResponsiveTabsVariantWrapper-module__default-parent-container-650___nY0Av","icon-none-container-220":"ResponsiveTabsVariantWrapper-module__icon-none-container-220___zM+OX","icon-none-container-650":"ResponsiveTabsVariantWrapper-module__icon-none-container-650___TvPPB","options-container":"ResponsiveTabsVariantWrapper-module__options-container___CijBI",options:"ResponsiveTabsVariantWrapper-module__options___62gtP"}},85492:function(e,n,a){"use strict";a.r(n),n.default={"content-wrapper":"TabExample-module__content-wrapper___SHHo6","tab-content-template":"TabExample-module__tab-content-template___eY-9-","custom-display":"TabExample-module__custom-display___DNeb7","content-container":"TabExample-module__content-container___eAfPQ","content-container-vertical":"TabExample-module__content-container-vertical___nzztQ"}},78878:function(e,n,a){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default=void 0;var t=o(a(67294)),l=o(a(99139));function o(e){return e&&e.__esModule?e:{default:e}}function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n