@salesforce-ux/design-system/__internal/chunked/docs/ui/components/tabs/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/tabs/docs.mdx.js"]=function(e){function t(t){for(var n,r,i=t[0],o=t[1],c=t[2],m=0,b=[];m<i.length;m++)r=i[m],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&b.push(l[r][0]),l[r]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return s.push.apply(s,c||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,i=1;i<a.length;i++){var o=a[i];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=r(r.s=a[0]))}return e}var n={},l={73:0},s=[];function r(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=n,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=o;return s.push([746,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},746:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return me})),a.d(t,"getContents",(function(){return be}));var n=a(0),l=a.n(n),s=a(4),r=a(2),i=a(27),o=a(15),c=a(14),d=a(40),m=a(3),b=a.n(m),h=a(5),u=a.n(h),f=a(9),p=a(64),E=a(12);function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function w(e,t){return(w=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function O(e){var t=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,n=j(e);if(t){var l=j(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return g(this,a)}}function g(e,t){if(t&&("object"===v(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return T(e)}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var I=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__group"},e.children)};I.propTypes={children:b.a.node};var S=function(e){return l.a.createElement("div",{className:"slds-tabs-mobile__container"},e.children)};S.propTypes={children:b.a.node};var x=function(e){return l.a.createElement("ul",{className:u()("slds-tabs-mobile",{"slds-hidden":e.isHidden})},e.children)};x.propTypes={children:b.a.node,isHidden:b.a.bool};var _=function(e){return l.a.createElement("li",{className:u()("slds-tabs-mobile__item")},e.children)};_.propTypes={children:b.a.node};var N=function(e){return l.a.createElement(E.a,{isFullWidth:!0,onClick:e.onClick},l.a.createElement("span",{className:"slds-truncate",title:e.summary},e.summary),l.a.createElement(f.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default",sprite:"utility",symbol:"chevronright"}))};N.propTypes={onClick:b.a.func,summary:b.a.string};var C=function(e){return l.a.createElement(p.c,{title:e.title,isAnimated:!0,docked:"left",invoke:"drill-in",isInvokedByTab:!0,isVisible:e.isVisible||!1,handleVisibility:e.hidePanel,hasCenterTitle:!0},e.children||"A panel body accepts any layout or component")};C.propTypes={hidePanel:b.a.func,isVisible:b.a.bool,title:b.a.string,children:b.a.node};var k=function(e){return l.a.createElement(S,null,l.a.createElement(x,{isHidden:!0},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three"}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:!0},l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item One"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Two"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Three"}))),l.a.createElement("div",null," Any content can be here "),l.a.createElement(x,null,l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Four"})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Nested Item Five"})))),l.a.createElement(C,{title:"Item 2 Panel"}),l.a.createElement(C,{title:"Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 1 Panel"}),l.a.createElement(C,{title:"Nested Item 2 Panel"}),l.a.createElement(C,{title:"Nested Item 3 Panel"}),l.a.createElement(C,{title:"Nested Item 4 Panel"}),l.a.createElement(C,{title:"Nested Item 5 Panel"}))},P=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&w(e,t)}(r,e);var t,a,n,s=O(r);function r(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r),(t=s.call(this,e)).hidePanel=t.hidePanel.bind(T(t)),t.state={visiblePanelIdx:-1},t}return t=r,(a=[{key:"componentDidMount",value:function(){void 0!==this.props.visiblePanelIdx&&-1===this.state.visiblePanelIdx&&this.setState({visiblePanelIdx:this.props.visiblePanelIdx})}},{key:"showPanel",value:function(e){this.props.isStatic||this.setState({visiblePanelIdx:e})}},{key:"hidePanel",value:function(){this.props.isStatic||this.setState({visiblePanelIdx:-1})}},{key:"render",value:function(){var e=this.state.visiblePanelIdx;return l.a.createElement(S,null,l.a.createElement(x,{isHidden:-1!==e},l.a.createElement(_,null,l.a.createElement(N,{summary:"Item One",onClick:this.showPanel.bind(this,0)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Two",onClick:this.showPanel.bind(this,1)})),l.a.createElement(_,null,l.a.createElement(N,{summary:"Item Three",onClick:this.showPanel.bind(this,2)}))),l.a.createElement(C,{title:"Item 1 Panel",isVisible:0===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 2 Panel",isVisible:1===e,hidePanel:this.hidePanel}),l.a.createElement(C,{title:"Item 3 Panel",isVisible:2===e,hidePanel:this.hidePanel}))}}])&&y(t.prototype,a),n&&y(t,n),Object.defineProperty(t,"prototype",{writable:!1}),r}(n.Component);P.propTypes={visiblePanelIdx:b.a.number,isStatic:b.a.bool};var A=P,U=a(31),W=a(35),H=a(11),M=a(171),B=a(10),L=a(118),V=a(13),F=function(e){return l.a.createElement(U.a,{selectedIndex:e.selectedIndex},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};F.propTypes={selectedIndex:b.a.number,itemOneContent:b.a.node},F.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var D=function(){return l.a.createElement(F,{itemOneContent:l.a.createElement(L.a,null)})},R=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Item Five",id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(M.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(q,null)))))},z=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Opportunities",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Cases",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Products",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Price Books",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(U.a.Item,{title:"Contacts",leftIcon:l.a.createElement(W.a,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(U.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(M.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(J,null)))))},q=function(){return l.a.createElement(B.f,{className:"slds-dropdown_right"},l.a.createElement(B.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(B.g,{title:"Accounts"},"Accounts"),l.a.createElement(B.g,{title:"Approvals"},"Approvals"),l.a.createElement(B.g,{title:"Lead"},"Leads")))},J=function(){return l.a.createElement(B.f,{className:"slds-dropdown_right"},l.a.createElement(B.h,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(B.g,{title:"Accounts"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Accounts"))),l.a.createElement(B.g,{title:"Approvals"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Approvals"))),l.a.createElement(B.g,{title:"Lead"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(W.a,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Leads")))))},G=function(){return l.a.createElement(U.a,{isCard:!0,selectedIndex:0},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement(V.d,null,l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(V.d,null,l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(V.d,{hasCardBoundary:!0},l.a.createElement(V.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(V.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to illustrate how",l.a.createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l.a.createElement(V.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},K=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,null,l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l.a.createElement(H.a,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l.a.createElement("h2",null,"Item Two Content - Has Error")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(U.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content"))))},Y=function(e){return l.a.createElement(U.a,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};Y.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},Y.defaultProps={showHeader:!1,withHeader:!1};var $=function(e){return l.a.createElement(U.a,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};$.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},$.defaultProps={showHeader:!1,withHeader:!1};var Q=function(e){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(U.a,{withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(U.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(U.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(U.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content"))))};Q.propTypes={showHeader:b.a.bool,withHeader:b.a.bool},Q.defaultProps={showHeader:!0,withHeader:!0};U.a,U.a.Item,U.a.Item,U.a.Item;var X=a(48),Z=a(119),ee=a(1),te=s.c.a,ae=s.c.code,ne=s.c.h2,le=s.c.h3,se=s.c.h4,re=s.c.h5,ie=s.c.li,oe=s.c.p,ce=s.c.strong,de=s.c.ul,me=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"Tabs keeps related content in a single container that is shown and hidden through navigation."),Object(n.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 200px;"},Object(n.createElement)(F,null)),ne({id:"About-Tabs"},"About Tabs"),oe({},"The default tab set style encapsulates everything that is underneath it without enclosing it visually. Because tab sets can be nested, pay close attention to the markup. They are constructed to prevent styles from leaking from parent tab sets into child tab sets."),le({id:"Implementation"},"Implementation"),se({id:"Markup"},"Markup"),oe({},"The following markup is crucial for Accessibility"),de({},ie({},"Selected tab’s anchor has ",ae({},'aria-selected="true"'),", all other tabs’ anchors have ",ae({},'aria-selected="false"')),ie({},"Selected tab’s anchor has ",ae({},'tabindex="0"'),", all other tabs have ",ae({},'tabindex="-1"')),ie({},"Each tab’s anchor has an ",ae({},"aria-controls")," attribute whose value is the id of the associated ",ae({},'<div role="tabpanel">')),ie({},"Each tab panel has an ",ae({},"aria-labelledby")," attribute whose value is the id of its associated ",ae({},'<a role="tab">'))),se({id:"Keyboard-Interactions"},"Keyboard Interactions"),de({},ie({},"Arrow keys, when focus is on a selected tab, cycle selection to the next or previous tab"),ie({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),ie({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),ie({},"Shift+Tab keys, when focus is on first element in a tab panel, moves focus back to the selected tab")),se({id:"JavaScript-Needs"},"JavaScript Needs"),oe({},"The active tab has two markup requirements:"),de({},ie({},"The ",ae({},".slds-active")," class should be placed on the ",ae({},"li")," with ",ae({},".slds-tabs_{variant}__item"),"."),ie({},"The corresponding ",ae({},".slds-tabs_{variant}__content")," container receives ",ae({},".slds-show"),"."),ie({},"In order to achieve the focus state styling, apply ",ae({},".slds-has-focus")," to the parent ",ae({},"li"),".")),oe({},"Inactive ",ae({},".slds-tabs_{variant}__content")," containers receive ",ae({},".slds-hide"),"."),oe({},"When the user clicks a different tab, move the ",ae({},".slds-active")," class and toggle the ",ae({},".slds-hide"),"/",ae({},".slds-show")," classes."),le({id:"Accessibility"},"Accessibility"),oe({},"Tabbed UIs have three parts with specific ",ce({},"ARIA")," role requirements:"),de({},ie({},"The tab list, which should have ",ae({},'role="tablist"')),ie({},"The tabs in that list, which should each be an ",ae({},'<a role="tab">')," anchor wrapped in a ",ae({},'<li role="presentation">')," list item"),ie({},"The tab panels, which display each tab’s content and should each have ",ae({},'role="tabpanel"'))),ne({id:"Base"},"Base"),Object(n.createElement)(o.a,{title:"Tabs Base"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(F,null))),ne({id:"Size-Modifiers"},"Size Modifiers"),oe({},"Tabs come with three size modifiers: default, medium, and large. Each size step will gradually increase the typography. Add the modifier class ",ae({},"slds-tabs_medium")," or ",ae({},"slds-tabs_large")," to the ",ae({},"slds-tabs_default")," element."),le({id:"Medium"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium sizing modifier"},Object(n.createElement)(r.a,null,Object(n.createElement)(Y,null))),le({id:"Large"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large sizing modifier"},Object(n.createElement)(r.a,null,Object(n.createElement)($,null))),ne({id:"With-Header"},"With Header"),Object(n.createElement)(o.a,{title:"Tabs with Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(Q,null))),Object(n.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The header can be visually hidden but still accessible to screen readers by applying ",Object(n.createElement)("code",null,"slds-assistive-text")," to the ",Object(n.createElement)("code",null,"slds-tabs_default__header")," element.")),le({id:"Medium-2"},"Medium"),Object(n.createElement)(o.a,{title:"Tabs with Medium Size Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(Y,{withHeader:!0,showHeader:!0}))),le({id:"Large-2"},"Large"),Object(n.createElement)(o.a,{title:"Tabs with Large Size Header"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)($,{withHeader:!0,showHeader:!0}))),ne({id:"With-Overflow"},"With Overflow"),oe({},"The overflow tab style is provided as a tab item type that acts as a menu component and appears as a tab item. It could contain those tab items that don't all fit in a horizontal orientation."),Object(n.createElement)(o.a,{title:"Tabs Overflowing"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(R,null))),Object(n.createElement)(c.a,{type:"note",header:"Implementation Guidelines"},Object(n.createElement)("p",null,"The ",Object(n.createElement)("code",null,"slds-dropdown__list")," element requires a",Object(n.createElement)("code",null,"slds-dropdown_length-with-icon-10")," class, where 10 is the maximum number of items that will be visible before having to scroll.")),ne({id:"With-Icon"},"With Icon"),oe({},"Icons can be used with tabs to help users differentiate among them."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(z,null))),ne({id:"With-Error"},"With Error"),oe({},"An icon can be used to communicate when a tab contains a validation error that needs attention."),Object(n.createElement)(o.a,{title:"Tabs With Icons"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(K,null))),ne({id:"With-Nested-Scoped-Tabs"},"With Nested Scoped Tabs"),oe({},"If nesting tabs within tabs, the second set should be rendered as ",te({href:"/components/scoped-tabs"},"Scoped Tabs")," to help differentiate between tab sets."),Object(n.createElement)(o.a,{title:"Tabs with Nested Scoped Tabs"},Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(n.createElement)(D,null))),ne({id:"Subtabs"},"Subtabs"),oe({},"Subtabs are used to provide an additional level of navigation below the ",te({href:"/components/global-navigation"},"Global Navigation")," Tab Bar. Use these tabs when users need to work across multiple sub-pages within a single navigation item."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.e)),le({id:"Expected-Behavior"},"Expected Behavior"),de({},ie({},"The first tab within the Subtab Bar is always the default content for the parent navigation item. To differentiate this tab from other sub-navigation tabs, this tab cannot be closed."),ie({},"When opening a navigation item for the first time, the default sub-navigation tab can be assumed; don’t show the Subtab Bar.",de({},ie({},"When opening the first additional sub-navigation tab, a new tab bar is inserted containing both the default tab and the new sub-navigation tab."))),ie({},"All subtabs are closed when the parent navigation item is closed."),ie({},"Subtabs can optionally include a tab menu for additional controls.")),le({id:"With-Focus"},"With Focus"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-has-focus")),le({id:"With-Borders"},"With Borders"),oe({},"To add borders on either side of the subtab, add the classes ",ae({},"slds-border_right")," and ",ae({},"slds-border_left"),", as needed, to the ",ae({},"<li>")," with class ",ae({},"slds-sub-tabs__item"),"."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-borders")),le({id:"With-Tab-Actions"},"With Tab Actions"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-menu")),le({id:"Status-Options"},"Status Options"),se({id:"Unsaved-Tab"},"Unsaved Tab"),oe({},"Unsaved tabs receive a blue asterisk on the tab."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"subtabs-unsaved")),Object(n.createElement)(c.a,{header:"Additional Tag for Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of the unsaved state, an ",Object(n.createElement)("code",null,"<abbr>")," tag is used to render the asterisk. The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," should read ",Object(n.createElement)("b",null,'"Tab Not Saved"'),".")),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("abbr",{className:"slds-indicator_unsaved",title:"Tab Not Saved","aria-label":"Tab Not Saved"},"*")),se({id:"Communicating-Status-to-Screen-Readers"},"Communicating Status to Screen Readers"),oe({},"The following examples of subtab status updates should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),oe({},"You should use a single hidden ARIA live region for the entire subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred in. The markup would look something like:"),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"...")),oe({},"Upon clearing the status on a given tab, you should clear the message from the live region."),se({id:"Unread-Tab"},"Unread Tab"),oe({},"Unread tabs receive a red dot on the tab."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"unread")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"In order to inform screen readers of new activity in a tab, 2 things should occur."),Object(n.createElement)("ol",{className:"slds-list_ordered"},Object(n.createElement)("li",null,"The ",Object(n.createElement)("code",null,"title")," attribute and ",Object(n.createElement)("code",null,"aria-label")," on the element that displays the red dot should read ",Object(n.createElement)("b",null,'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".'),Object(n.createElement)("li",null,"The hidden live region as described above, should have its content updated to ",Object(n.createElement)("b",null,'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("span",{"aria-label":"New Activity",className:"slds-indicator_unread",title:"New Activity",role:"img"})),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"New activity in Tab: Chat - Customer")),se({id:"Unread-and-Unsaved-Tab"},"Unread and Unsaved Tab"),oe({},"Unread and unsaved tabs receive a blue asterisk with a red dot underneath. Be sure to check out the individual sections above for the Accessibility requirements."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"unsaved")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Don't forget to update the hidden live region with which subtab has new activity")),se({id:"Warning-Tab"},"Warning Tab"),oe({},"When you wish to draw attention to a particular subtab because a warning about that tab has occurred, you can use the ",ae({},"slds-has-warning")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the warning icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),oe({},"In this example we show that something inside the subtab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the warning and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer")),re({id:"Unsaved-Warning-Tab"},"Unsaved Warning Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning-unsaved")),re({id:"Unread-Warning-Tab"},"Unread Warning Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"warning-unread")),se({id:"Error-Tab"},"Error Tab"),oe({},"When you wish to draw attention to a particular subtab because an error or violation has occurred in that tab, you can use the ",ae({},"slds-has-error")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the error icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),oe({},"In this example we show that something inside the subtab has broken an SLA agreement, and we wish to draw the users attention to it to take action."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user of the status level, the error or violation and the offending subtab"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Violation: SLA agreement in tab: Chat - Customer")),re({id:"Unsaved-Error-Tab"},"Unsaved Error Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error-unsaved")),re({id:"Unread-Error-Tab"},"Unread Error Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"error-unread")),se({id:"Success-Tab"},"Success Tab"),oe({},"When you wish to draw attention to a particular subtab because a warning or violation has been cleared in the subtab, you can use the ",ae({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),oe({},"The icon is updated to be the success icon, to give an extra way to communicate the level of the status without relying on the use of color alone."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success")),Object(n.createElement)(c.a,{header:"Accessibility",type:"a11y"},Object(n.createElement)("p",null,"Update the hidden live region with a message that informs the user that the status level has been successfully cleared and the subtab it was cleared from"," ",Object(n.createElement)("b",null,"[level]: [message] in tab: [tab_name]"))),Object(n.createElement)(i.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-assistive-text","aria-live":"polite"},"Success: SLA agreement warning cleared in tab: Chat - Customer")),re({id:"Unsaved-Success-Tab"},"Unsaved Success Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success-unsaved")),re({id:"Unread-Success-Tab"},"Unread Success Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"success-unread")),le({id:"With-Overflow-Tab"},"With Overflow Tab"),oe({},"Overflowing subtabs are contained in a More dropdown."),Object(n.createElement)(r.a,{demoStyles:"height: 100px;"},Object(ee.f)(X.f,"overflow-tabs")),se({id:"Overflow-Tab-Open"},"Overflow Tab Open"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-open")),se({id:"Unread-Overflow-Tab"},"Unread Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unread-overflow-tabs-open")),se({id:"Unsaved-Overflow-Tab"},"Unsaved Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unsaved-overflow-tabs-open")),se({id:"Unread-and-Unsaved-Overflow-Tab"},"Unread and Unsaved Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"unsaved-unread-overflow-tabs-open")),se({id:"Success-Overflow-Tab"},"Success Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-success")),se({id:"Unread-and-Unsaved-Success-Overflow-Tab"},"Unread and Unsaved Success Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-success-unread-unsaved")),se({id:"Warning-Overflow-Tab"},"Warning Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-warning")),se({id:"Unread-and-Unsaved-Warning-Overflow-Tab"},"Unread and Unsaved Warning Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-warning-unread-unsaved")),se({id:"Error-Overflow-Tab"},"Error Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-error")),se({id:"Unread-and-Unsaved-Error-Overflow-Tab"},"Unread and Unsaved Error Overflow Tab"),Object(n.createElement)(r.a,{demoStyles:"height: 200px;"},Object(ee.f)(X.f,"overflow-tabs-error-unread-unsaved")),ne({id:"Vertical"},"Vertical"),oe({},"To use vertical tabs, check out the ",te({href:"../vertical-tabs"},"Vertical Tabs")," component."),Object(n.createElement)(o.a,{title:"Tabs as Vertical"},Z.a),ne({id:"As-a-Card"},"As a Card"),oe({},"To style tabs as a card, add the class ",ae({},"slds-tabs_card")," to the ",ae({},"<div>")," with the class ",ae({},"slds-tabs_default"),". See the following example for guidance on styling cards inside the tab panel content."),Object(n.createElement)(o.a,{title:"Tabs as a Card"},Object(n.createElement)(r.a,{demoStyles:"height: 600px;"},Object(n.createElement)(G,null))),ne({id:"On-Mobile"},"On Mobile"),oe({},"For mobile, tabs become stacked and act as buttons that drill in to see the tab's content."),oe({},"Mobile tabs consist of two parts, the tabs, which are represented via buttons, and their associated panels. When clicking on one of the buttons, the associated panel will slide in from right-to-left."),Object(n.createElement)(c.a,{header:"Focus Management",type:"a11y"},Object(n.createElement)("p",null,"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed.")),Object(n.createElement)(o.a,{title:"Tabs Mobile Base"},Object(n.createElement)(r.a,null,Object(n.createElement)(A,null))),le({id:"Accessibility-2"},"Accessibility"),oe({},ce({},"Visibility")),de({},ie({},"The panels should have ",ae({},"aria-hidden=true")," when they are not visible to ensure keyboard and screen reader users cannot access the content."),ie({},"The tabs should have ",ae({},"aria-hidden=true")," when a panel is open to ensure keyboard and screen reader users cannot access the buttons.")),oe({},ce({},"Focus Management")),oe({},"When a user selects a tab button, focus should be placed on the back button of the panel that slides into view. When the user clicks the back button, focus should be placed on the button that was just pressed."),oe({},ce({},"Assistive Text")),oe({},"The title and assistive text for the panel's back button text should read \"Collapse $&123;heading text&125;” so it stays contextual to the tab that was clicked on."),le({id:"Panel-Open"},"Panel Open"),oe({},'When clicking a tab button, the entire view changes and is replaced with the "content" of that tab inside of a panel. This includes a back button on the top left of the screen to go back to the view with the tabs.'),Object(n.createElement)(o.a,{title:"Tabs Mobile Drilled-in"},Object(n.createElement)(r.a,null,Object(n.createElement)(A,{visiblePanelIdx:0,isStatic:!0}))),le({id:"Adjacent-Tab-Sets"},"Adjacent Tab Sets"),oe({},"When there are two or more immediately adjacent tab sets on mobile, use the ",ae({},"slds-tabs_mobile__group")," class to adjust the styling to make them appear as if they're part of one master list. Semantically, they are still two separate lists."),Object(n.createElement)(o.a,{title:"Tabs Mobile Adjacent Stacked"},Object(n.createElement)(r.a,null,Object(n.createElement)(I,null,Object(n.createElement)(A,{isStatic:!0}),Object(n.createElement)(A,{isStatic:!0,startingIdx:3})))),le({id:"Nested-Tab-Sets"},"Nested Tab Sets"),Object(n.createElement)(o.a,{title:"Tabs Mobile Nested"},Object(n.createElement)(r.a,{demoStyles:"height: 300px;"},Object(n.createElement)(k,null))),ne({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"tabs",type:"component"}))},be=function(){return Object(s.a)(me())}}});