npm - @salesforce-ux/design-system - Versions diffs - 2.17.2 → 2.17.3 - Mend

@salesforce-ux/design-system 2.17.2 → 2.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (963) hide show

package/__internal/chunked/docs/ui/components/global-navigation/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/global-navigation/docs.mdx.js"]=function(e){function t(t){for(var n,s,r=t[0],o=t[1],c=t[2],m=0,b=[];m<r.length;m++)s=r[m],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&b.push(l[s][0]),l[s]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,c\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(i.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},l={41:0},i=[];function s(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,s),a.l=!0,a.exports}s.m=e,s.c=n,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(a,n,function(t){return e[t]}.bind(null,n));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return i.push([674,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},674:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return se})),a.d(t,"getContents",(function(){return re}));var n=a(0),l=a.n(n),i=a(4),s=a(2),r=a(25),o=(a(14),a(3)),c=a.n(o),d=a(5),m=a.n(d),b=a(10),u=a(9),E=a(7),v=a(137);function h(e){return(h="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 p(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 I(e,t){return(I=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function C(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=w(e);if(t){var l=w(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return g(this,a)}}function g(e,t){return!t\|\|"object"!==h(t)&&"function"!=typeof t?T(e):t}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function w(e){return(w=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}function f(){return(f=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var O=l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,{title:"Main action"},l.a.createElement(b.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small",sprite:"utility",symbol:"add"}),"Main action"),l.a.createElement("li",{className:"slds-dropdown__header slds-has-divider_top-space",role:"separator"},l.a.createElement("span",null,"Menu header")),l.a.createElement(u.g,null,"Menu Item One"),l.a.createElement(u.g,null,"Menu Item Two"),l.a.createElement(u.g,null,"Menu Item Three"))),y=function(e){var t=e.label,a=e.isActive,n=e.hasNavMenu,i=e.hasNavMenuOpen,s=e.hasMenuDropdown,r=m()("slds-context-bar__item",{"slds-is-active":a,"slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click":n,"slds-is-open":i});return l.a.createElement("li",{className:r},l.a.createElement("a",{href:"#",className:"slds-context-bar__label-action",title:t,onClick:function(e){return e.preventDefault()}},a&&l.a.createElement("span",{className:"slds-assistive-text"},"Current Page:"),l.a.createElement("span",{className:"slds-truncate",title:t},t)),n&&l.a.createElement(l.a.Fragment,null,l.a.createElement(P,{onClick:e.onClick}),s&&O))};y.defaultProps={label:"Menu Item",hasMenuDropdown:!0},y.propTypes={label:c.a.string.isRequired,isActive:c.a.bool,hasNavMenu:c.a.bool,hasNavMenuOpen:c.a.bool,hasMenuDropdown:c.a.bool};var P=function(e){return l.a.createElement("div",{className:"slds-context-bar__icon-action slds-p-left_none"},l.a.createElement(E.b,f({className:"slds-button_icon slds-context-bar__button",symbol:"chevrondown","aria-haspopup":"true",assistiveText:"Open menu item submenu",title:"Open menu item submenu"},e)))},_=function(e){var t=e.appName,a=e.homeItemIsActive,n=e.hasNavMenuOpen,i=e.children;return l.a.createElement("div",{className:"slds-context-bar"},l.a.createElement("div",{className:"slds-context-bar__primary"},l.a.createElement("div",{className:"slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover"},l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(v.a,{className:"slds-context-bar__button"})),l.a.createElement("span",{className:"slds-context-bar__label-action slds-context-bar__app-name"},l.a.createElement("span",{className:"slds-truncate",title:t\|\|"App Name"},t\|\|"App Name")))),l.a.createElement("nav",{className:"slds-context-bar__secondary",role:"navigation"},l.a.createElement("ul",{className:"slds-grid"},l.a.createElement(y,{label:"Home",isActive:a}),i\|\|l.a.createElement(l.a.Fragment,null,l.a.createElement(y,{label:"Menu Item",hasNavMenu:!0,hasNavMenuOpen:n,onClick:function(){return e.toggleNavMenu()}}),l.a.createElement(y,{label:"Menu Item"}),l.a.createElement(y,{label:"Menu Item"}),l.a.createElement(y,{label:"Menu Item"})))))};_.propTypes={appName:c.a.string,homeItemIsActive:c.a.bool,hasNavMenuOpen:c.a.bool,children:c.a.node};var N=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}}),t&&I(e,t)}(s,e);var t,a,n,i=C(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).toggleNavMenu=e.toggleNavMenu.bind(T(e)),e.state={hasNavMenuOpen:!1},e}return t=s,(a=[{key:"toggleNavMenu",value:function(){this.setState({hasNavMenuOpen:!this.state.hasNavMenuOpen})}},{key:"render",value:function(){return l.a.createElement(_,{homeItemIsActive:!0,toggleNavMenu:this.toggleNavMenu,hasNavMenuOpen:this.props.hasNavMenuOpen\|\|this.state.hasNavMenuOpen})}}])&&p(t.prototype,a),n&&p(t,n),s}(n.Component),A="Navigation Bar - ",x=[{id:"default",label:A+"Default",demoStyles:"height: 16rem;",storybookStyles:!1,element:l.a.createElement(N,null)}],j=[{id:"item-active",label:A+"Item Active",element:l.a.createElement(_,null,l.a.createElement(y,{label:"Menu Item",hasNavMenu:!0}),l.a.createElement(y,{label:"Menu Item"}),l.a.createElement(y,{label:"Menu Item",isActive:!0}),l.a.createElement(y,{label:"Menu Item"}))},{id:"item-menu-open",label:A+"Item Menu Open",demoStyles:"height: 16rem;",storybookStyles:!0,element:l.a.createElement(N,{hasNavMenuOpen:!0})}],U=a(44),S=a(49),L="context-tab-panel-1",H="context-tab-panel-2",F="context-tab-panel-3",k="context-tab-id-1",M="context-tab-id-2",W="context-tab-id-3",D="Navigation Tab Bar - ",V=function(e){return l.a.createElement("span",{className:"slds-text-body_small slds-text-color_weak slds-p-left_large"},l.a.createElement("span",{className:"slds-assistive-text"},":"),e.children)},R=function(e){return l.a.createElement("li",{className:m()("slds-context-bar__item slds-context-bar__item_tab",e.className,{"slds-is-active":e.itemActive,"slds-is-unsaved":e.itemUnsaved,"slds-is-pinned":e.pinned,"slds-has-focus":e.hasFocus,"slds-has-notification":e.itemUnread,"slds-has-sub-tabs":e.hasSubtabs,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-has-error":"error"===e.statusLevel}),role:"presentation"},l.a.createElement("a",{href:"#",className:"slds-context-bar__label-action",role:"tab",title:e.title,"aria-selected":e.itemActive?"true":"false",tabIndex:e.itemActive?"0":"-1","aria-controls":e.tabPanelId,id:e.id,onClick:function(e){return e.preventDefault()}},l.a.createElement(S.a,null,e.itemUnsaved&&l.a.createElement(S.c,{title:"Tab Not Saved"}),e.itemUnread&&l.a.createElement(S.b,null)),e.hasIcon&&l.a.createElement(S.d,{statusLevel:e.statusLevel,symbol:e.symbol}),l.a.createElement("span",{className:m()("slds-truncate",e.pinned?"slds-assistive-text":null),title:e.title},e.title)),l.a.createElement("div",{className:m()("slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none","true"===e.actionOverflow?"slds-is-open":null)},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-x-small",tabIndex:e.itemActive?"0":"-1",symbol:"chevrondown","aria-haspopup":"true",assistiveText:"Actions for "+e.title,title:"Actions for "+e.title,theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,useCurrentColor:"error"!==e.statusLevel&&"success"!==e.statusLevel}),l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"r")},"Refresh Tab"),l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"⇧ + n")},"Open in a new window"),l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"p")},"Pin Tab"),l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"w")},"Close Tab")))),e.pinned?null:l.a.createElement("div",{className:"slds-context-bar__icon-action slds-col_bump-left slds-p-left_none"},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-x-small",tabIndex:e.itemActive?"0":"-1",symbol:"close",assistiveText:"Close "+e.title,title:"Close "+e.title,theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,useCurrentColor:"error"!==e.statusLevel&&"success"!==e.statusLevel})))};R.propTypes={className:c.a.string,hasFocus:c.a.bool,hasSubtabs:c.a.bool,id:c.a.string.isRequired,itemActive:c.a.bool,itemUnread:c.a.bool,itemUnsaved:c.a.bool,pinned:c.a.bool,statusLevel:c.a.oneOf(["error","success","warning"]),tabPanelId:c.a.string.isRequired,title:c.a.string},R.defaultProps={hasIcon:!0,title:"Tab Name"};var B=function(e){return l.a.createElement("div",{id:e.id,className:m()(e.show?"slds-show":"slds-hide"),role:"tabpanel","aria-labelledby":e.tabId},e.children)},q=function(e){return l.a.createElement("div",{className:m()("slds-context-bar slds-context-bar_tabs",e.className)},l.a.createElement("div",{className:"slds-context-bar__primary"},l.a.createElement("div",{className:"slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover"},l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(v.a,{className:"slds-context-bar__button"})),l.a.createElement("span",{className:"slds-context-bar__label-action slds-context-bar__app-name"},l.a.createElement("span",{className:"slds-truncate",title:e.appName\|\|"App Name"},e.appName\|\|"App Name"))),l.a.createElement("div",{className:m()("slds-context-bar__item slds-context-bar__object-switcher slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click",e.objectSwitchClassName)},l.a.createElement("a",{href:"#",className:"slds-context-bar__label-action",onClick:function(e){return e.preventDefault()}},l.a.createElement("span",{className:"slds-truncate",title:"Object"},"Object")),l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-x-small",symbol:"chevrondown","aria-haspopup":"true",assistiveText:"Open object switcher menu",title:"Open object switcher menu"})),l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,null,l.a.createElement(b.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Accounts"),l.a.createElement(u.g,null,l.a.createElement(b.a,{className:"slds-icon slds-icon_small slds-icon-standard-case slds-m-right_small",sprite:"standard",symbol:"case"}),"Cases"),l.a.createElement(u.g,null,l.a.createElement(b.a,{className:"slds-icon slds-icon_small slds-icon-standard-work-order slds-m-right_small",sprite:"standard",symbol:"work_order"}),"Insights")))),l.a.createElement("div",{className:m()("slds-context-bar__item slds-dropdown-trigger slds-dropdown-trigger_click",e.addTabActive?"slds-is-open":null,e.addTabClassName)},l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-small",symbol:"add",assistiveText:"Open a New Tab",title:"Open a New Tab"})),e.addTabActive?l.a.createElement("section",{className:"slds-popover slds-nubbin_top",role:"dialog","aria-label":"Add tab by URL or ID",style:{position:"absolute",left:"1.125rem",top:"2.75rem",marginLeft:"-10rem"}},l.a.createElement("div",{className:"slds-popover__body"},l.a.createElement("div",{className:"slds-form-element"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Add Page by URL or ID"),l.a.createElement("div",{className:"slds-form-element__control slds-grid"},l.a.createElement("input",{id:"text-input-01",className:"slds-input",type:"text",placeholder:"Placeholder Text"}),l.a.createElement("button",{className:"slds-button slds-button_brand slds-shrink-none slds-m-left_small",type:"submit"},"Add Tab"))))):null)),l.a.createElement("div",{className:"slds-context-bar__secondary"},l.a.createElement("div",{className:"slds-context-bar__vertical-divider"}),l.a.createElement("ul",{className:"slds-grid",role:"tablist"},e.children)))},z=function(e){return l.a.createElement("li",{className:m()("slds-context-bar__item","slds-context-bar__dropdown-trigger","slds-dropdown-trigger","slds-dropdown-trigger_click",{"slds-is-open":e.isOpen,"slds-has-notification":e.itemUnread,"slds-is-unsaved":e.itemUnsaved,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-has-error":"error"===e.statusLevel})},l.a.createElement("button",{className:"slds-button slds-context-bar__label-action",title:"More Tab Items","aria-haspopup":"true"},l.a.createElement(S.a,null,e.itemUnsaved&&l.a.createElement(S.c,null),e.itemUnread&&l.a.createElement(S.b,null)),l.a.createElement("span",{className:"slds-truncate",title:"More Tabs"},"More ",l.a.createElement("span",{className:"slds-assistive-text"},"Tabs")),l.a.createElement(b.a,{className:"slds-button__icon slds-button__icon_small slds-button__icon_right",sprite:"utility",symbol:"chevrondown"})),l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,{className:m()({"slds-has-notification":e.itemUnread,"slds-is-unsaved":e.itemUnsaved}),statusLevel:e.statusLevel,title:"Chat - Customer"},l.a.createElement(S.a,null,e.itemUnsaved&&l.a.createElement(S.c,{title:"Tab(s) within menu not saved"}),e.itemUnread&&l.a.createElement(S.b,null)),e.itemHasIcon&&l.a.createElement(S.d,{statusLevel:e.statusLevel,symbol:"live_chat"}),l.a.createElement("span",null,"Chat - Customer")),l.a.createElement(u.g,{title:"Overflow Tab Item"},l.a.createElement(S.a,null),e.itemHasIcon&&l.a.createElement(S.d,null),l.a.createElement("span",null,"Overflow Tab Item")))))};z.propTypes={statusLevel:c.a.oneOf(["error","success","warning"])},z.defaultProps={itemHasIcon:!0};var J=[{id:"default",label:D+"Default",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))}],G=[{id:"tab-active",label:D+"Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"tab-active-focus",label:D+"Active Focus",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0,hasFocus:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"tab-item-action-menu-open",label:D+"Action Overflow",element:l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0,actionOverflow:"true"}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-tab",label:D+"Unsaved Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-tab",label:D+"Unread Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Chat - Customer",tabPanelId:F,id:W,symbol:"live_chat",itemUnread:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"unread-unsaved-tab",label:D+"Unread/Unsaved Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Chat - Customer",tabPanelId:F,id:W,symbol:"live_chat",itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success",label:D+"Success",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success-active",label:D+"Success Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-success-focus",label:D+"Success Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",hasFocus:!0,id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-success-unread",label:D+"Success Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemUnread:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success-unsaved",label:D+"Success Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success-unread-unsaved",label:D+"Success Unread and Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemUnread:!0,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning",label:D+"Warning",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-active",label:D+"Warning Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-focus",label:D+"Warning focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",hasFocus:!0,id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-unread",label:D+"Warning Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemUnread:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-unsaved",label:D+"Warning Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-unread-unsaved",label:D+"Warning Unread and Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemUnread:!0,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error",label:D+"Error",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error-active",label:D+"Error Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-error-focused",label:D+"Error focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",hasFocus:!0,id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-error-unread",label:D+"Error Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemUnread:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error-unsaved",label:D+"Error Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error-unread-unsaved",label:D+"Error Unread and Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemUnread:!0,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"pinned-tab",label:D+"Pinned Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,pinned:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-active",label:D+"Pinned Tab - Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0,pinned:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-active-focus",label:D+"Pinned Tab - Active Focus",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0,pinned:!0,hasFocus:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-pinned-tab",label:D+"Unsaved Pinned Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,pinned:!0,itemUnsaved:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-pinned-tab",label:D+"Unread Pinned Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Chat - Customer",symbol:"live_chat",tabPanelId:L,id:k,pinned:!0,itemUnread:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success",label:D+"Pinned Success Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-active",label:D+"Pinned Success Tab Active",element:l.a.createElement("div",{className:"demo-only"},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-focused",label:D+"Pinned Success Tab Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",hasFocus:!0,id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-unread",label:D+"Pinned Success Tab Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,itemUnread:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-unsaved",label:D+"Pinned Success Tab Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,itemUnsaved:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning",label:D+"Pinned Warning Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-active",label:D+"Pinned Warning Tab Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-focused",label:D+"Pinned Warning Tab Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",hasFocus:!0,id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-unread",label:D+"Pinned Warning Tab Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,itemUnread:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-unsaved",label:D+"Pinned Warning Tab Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,itemUnsaved:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error",label:D+"Pinned Error Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-active",label:D+"Pinned Error Tab Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-focused",label:D+"Pinned Error Tab Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-unread",label:D+"Pinned Error Tab Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemUnread:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-unsaved",label:D+"Pinned Error Tab Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemUnsaved:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"overflow-tabs",label:D+"Overflow Tabs",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,null)),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"overflow-tabs-open",label:D+"Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-overflow-tabs",label:D+"Unsaved Overflow Tabs",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-overflow-tabs-open",label:D+"Unsaved Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-overflow-tabs",label:D+"Unread Overflow Tabs",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{itemUnread:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-overflow-tabs-open",label:D+"Unread Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0,itemUnread:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-unsaved-overflow-tabs-open",label:D+"Unread Unsaved Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-unsaved-overflow-tabs-without-icon-open",label:D+"Unread Unsaved Overflow Tabs without Icon - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W,itemUnread:!0,itemUnsaved:!0,hasIcon:!1}),l.a.createElement(z,{isOpen:!0,itemUnread:!0,itemUnsaved:!0,itemHasIcon:!1})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"success-overflow",label:D+"Success Overflow Tabs",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"success",isOpen:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"success-overflow-unread-unsaved",label:D+"Success Overflow Tabs Unread and Unsaved",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"success",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"warning-overflow",label:D+"Warning Overflow Tabs",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"warning",isOpen:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"warning-overflow-unread-unsaved",label:D+"Warning Overflow Tabs Unread and Unsaved",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"warning",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"error-overflow",label:D+"Error Overflow Tabs",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"error",isOpen:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"error-overflow-unread-unsaved",label:D+"Error Overflow Tabs Unread and Unsaved",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"error",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"object-switcher-active",label:D+"Object Switcher - Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,{objectSwitchClassName:"slds-is-active"},l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"object-switcher-menu-open",label:D+"Object Switcher - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"11rem"}},l.a.createElement(q,{objectSwitchClassName:"slds-is-open"},l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"add-tab-dialog-open",label:D+"Add Tab Dialog - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,{addTabActive:!0},l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"sub-tabs-open",label:D+"Subtabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0,hasSubtabs:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},l.a.createElement(U.d,null,l.a.createElement(U.b,null,l.a.createElement(U.a,{active:!0,title:"00071938",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01"}),l.a.createElement(U.a,{title:"Chat - Customer",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",symbol:"live_chat"})),l.a.createElement(U.c,{id:"subtab-tabpanel-01",tabId:"subtab-tabitem-01",isVisible:!0},"Item One Content"),l.a.createElement(U.c,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))}],Y=a(1),K=i.c.a,Q=i.c.code,X=i.c.h2,Z=i.c.h3,$=i.c.h4,ee=i.c.h5,te=i.c.li,ae=i.c.ol,ne=i.c.p,le=i.c.strong,ie=i.c.ul,se=function(){return Object(n.createElement)(i.b,{},Object(n.createElement)("div",{className:"doc lead"},"Global Navigation is the list of navigation links your users find in the Header on every page in Salesforce. Your Global Navigation includes a Navigation Bar where your users find the App Launcher, App Name, and Pages that each App includes."),Object(n.createElement)(s.a,{exampleOnly:!0,demoStyles:Object(Y.e)(x,"default")},Object(Y.f)(x)),X({id:"About-Navigation-Bar"},"About Navigation Bar"),ne({},"The navigation bar is composed of a wrapper and 2 required regions:"),ie({},te({},le({},"Primary,")," which contains the App Launcher and App Name"),te({},le({},"Secondary,")," which contains the App Items, for navigating within the current app")),ne({},"The markup should follow the order listed above for proper keyboard interaction set by the 508 compliance standards. Each included region inside the wrapper of ",Q({},".slds-context-bar")," needs the appropriate ordering class name, e.g. ",Q({},".slds-context-bar__primary"),"."),Object(n.createElement)(s.a,{demoStyles:Object(Y.e)(x,"default")},Object(Y.f)(x)),Z({id:"Items-on-the-Navigation-Bar"},"Items on the Navigation Bar"),ne({},"Every item that sits on the horizontal axis of the navigation bar should receive the class ",Q({},".slds-context-bar__item"),"."),Object(n.createElement)(r.a,null,Object(n.createElement)(y,{label:"Menu Item"})),ne({},"This class is used to notify the navigation bar that it has a new item. The styles applied allow the children of the navigation bar to vertically aligned, without knowing the height of the navigation bar. The styles will also allow for the actionable items ",Q({},".slds-context-bar__label-action")," and ",Q({},".slds-context-bar__icon-action")," to stretch 100% of the height of the navigation bar, optimizing the hit area of those actions."),ne({},"Since the items are leveraging flexbox, the elements inside can easily be re-ordered easily by using an order class helper on the element, such as ",Q({},".slds-order--[#]"),"."),Z({id:"Building-the-Navigation-Bar-Item"},"Building the Navigation Bar Item"),ne({},"The navigation bar item is built to accommodate 2 specific layout needs."),ae({},te({},"Individual text hyperlink to invokes link destination"),te({},"Individual text hyperlink to invokes link destination + button icon to indicate menu dropdown is available")),ne({},"These layouts are built upon 2 reusable classes. The text hyperlink action area would get the class ",Q({},".slds-context-bar__label-action")," and the icon based action area would get the class ",Q({},".slds-context-bar__icon-action"),"."),ne({},"The ",Q({},".slds-context-bar__icon-action")," class handles the alignment and coloring of the icons based on interactions such as ",Q({},":hover"),", ",Q({},":focus")," and ",Q({},":active"),". This is a required if you have an actionable icon area adjacent to an actionable text area."),ne({},"The markup structure should have the button icon(s) preceding the text label. The icons can be visually reordered by using the ordering utility classes such as ",Q({},".slds-order--[#]"),"."),$({id:"Icons"},"Icons"),ne({},"The icons in the navigation bar either serve as a visual affordance that indicates an item has a menu with additional actions or the icon itself is actionable."),Object(n.createElement)(r.a,null,Object(n.createElement)(y,{label:"Menu Item",hasNavMenu:!0,hasMenuDropdown:!1})),ne({},"The class used to indicate a button icon will sit adjacent to another actionable item is ",Q({},".slds-context-bar__icon-action"),". If you two icons in an item, each icon should be contained in it’s own ",Q({},".slds-context-bar__icon-action")," element."),ne({},"The look and feel of the button icon is dependant on the modifiers used from ",K({href:"/components/buttons/#icon"},"Button Icon Variant Component")," page."),ne({},"The ",Q({},".slds-context-bar__icon-action")," styles apply a default left and right padding of 0.75rem. That padding can be removed or modified by using our spacing utilities. In example #1, the left padding has been removed by using the class ",Q({},".slds-p-left--none"),"."),ne({},"If a navigation bar item has an icon then we want to provide visual indication that its active when a user hovers into its region. To make this happen, apply the class ",Q({},".slds-hint-parent")," to the hover region, most cases would be ",Q({},".slds-context-bar__icon-action")," element."),$({id:"Menu-trigger-area"},"Menu trigger area"),ne({},"When a navigation bar items requires a menu with additional sub options or actions, the classes that need to be added to the target hit area are the following:"),Object(n.createElement)(r.a,null,Object(n.createElement)(y,{label:"Menu Item",hasNavMenu:!0})),ae({},te({},Q({},".slds-context-bar__dropdown-trigger")," — Add a hoverable zone below the action so that the dropdown doesn’t disappear when the mouse is between the action and the dropdown — this is specific to the navigation bar"),te({},Q({},".slds-dropdown-trigger")," — Globally used utility that notifies the element there is a dropdown menu"),te({},Q({},".slds-dropdown-trigger_click")," — Specifies that an item requires a click to open interaction.")),ne({},"If the navigation item has one hyperlink with a menu containing additional sub actions, then the hover area that invokes the dropdown menu is both the ",Q({},".slds-context-bar__label-action")," and ",Q({},".slds-context-bar__icon-action"),". If the navigation item is demonstrated as a tab format, one hyperlink plus two additional actions, then the hover area that invokes the dropdown menu is only on the ",Q({},".slds-context-bar__icon-action"),"."),Z({id:"Specifics-of-the-Navigation-Bar"},"Specifics of the Navigation Bar"),$({id:"App-Launcher"},"App Launcher"),ne({},"The app launcher is the one element on the navigation bar that requires a mouse click or keyboard enter to invoke the app launcher dropdown. Please use JavaScript to accommodate this requirement."),$({id:"App-Name"},"App Name"),ne({},"The application name needs to receive the ",Q({},".slds-context-bar__app-name")," class. This class will handle such things as its unique font sizing and truncation widths."),$({id:"Dividers"},"Dividers"),ne({},"Due to the platform-esc nature of the navigation bar, there is an available element utility to apply a divider between sections where needed. The ",Q({},".slds-context-bar__vertical-divider")," class should be applied to an empty ",Q({},"<div>")," and placed within the markup of your navigation bar for a visual divider."),ne({},"Alternatively, two classes are available to add border using css. Adding the class ",Q({},".slds-context-bar__item--divider-left")," will add a left border to a navigation bar item while ",Q({},".slds-context-bar__item--divider-right")," will add a right border."),Z({id:"States"},"States"),$({id:"Active-item"},"Active item"),Object(n.createElement)(s.a,null,Object(Y.f)(j,"item-active")),$({id:"Menu-Open"},"Menu Open"),Object(n.createElement)(s.a,{demoStyles:Object(Y.e)(j,"item-menu-open")},Object(Y.f)(j,"item-menu-open")),X({id:"About-Navigation-Tab-Bar"},"About Navigation Tab Bar"),Object(n.createElement)(s.a,null,Object(Y.f)(J)),Z({id:"Accessibility"},"Accessibility"),ne({},le({},"Communicating Status to Screen Readers:")),ne({},"When communicating tab status updates to the user, unread, warning, error and success notifications should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),ne({},"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:"),ne({},Q({},'<div className="slds-assistive-text" aria-live="polite">...</div>')),ne({},"Upon clearing the status on a given tab, you should clear the message from the live region."),ne({},le({},"Unread status:")),ne({},"In order to inform screen readers of new activity in a tab, 2 things should occur."),ae({},te({},ne({},"The ",Q({},"title")," attribute and ",Q({},"aria-label")," on the element that displays the red dot should read ",le({},'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".')),te({},ne({},"The hidden live region as described above, should have its content updated to ",le({},'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),ne({},Q({},'<span aria-label="New Activity" className="slds-indicator_unread" title="New Activity"></span>')),ne({},Q({},'<div className="slds-assistive-text" aria-live="polite">New activity in Tab: Chat - Customer</div>')),ne({},le({},"Warning, Error and Success Tabs:")),ne({},"When you wish to draw attention to a particular tab because something has occurred in that tab that corresponds to an alert level, you can use the ",Q({},"slds-has-warning"),", ",Q({},"slds-has-error")," or ",Q({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),ne({},"The icon is updated to match the corresponding alert level, to give an extra way to communicate the level of the status without relying on the use of color alone."),ne({},"In this example we show that something inside the tab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),ne({},"Update the hidden live region with a message that informs the user of the status level, the message and the offending subtab ",le({},"[level]: [message] in tab: [tab_name]"),"."),ne({},Q({},'<div className="slds-assistive-text" aria-live="polite">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</div>')),Z({id:"States-2"},"States"),$({id:"Active"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-active")),ee({id:"Focus"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-active-focus")),$({id:"Unsaved"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-tab")),$({id:"Unread"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-tab")),$({id:"Overflow"},"Overflow"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-item-action-menu-open")),$({id:"UnreadUnsaved"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-unsaved-tab")),Z({id:"Tab-Feedback-States"},"Tab Feedback States"),$({id:"Success"},"Success"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success")),ee({id:"Active-2"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-active")),ee({id:"Focus-2"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-focus")),ee({id:"Unsaved-2"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-unsaved")),ee({id:"Unread-2"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-unread")),ee({id:"UnreadUnsaved-2"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-unread-unsaved")),$({id:"Warning"},"Warning"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning")),ee({id:"Active-3"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-active")),ee({id:"Focus-3"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-focus")),ee({id:"Unsaved-3"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-unsaved")),ee({id:"Unread-3"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-unread")),ee({id:"UnreadUnsaved-3"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-unread-unsaved")),$({id:"Error"},"Error"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error")),ee({id:"Active-4"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-active")),ee({id:"Focus-4"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-focused")),ee({id:"Unsaved-4"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-unsaved")),ee({id:"Unread-4"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-unread")),ee({id:"UnreadUnsaved-4"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-unread-unsaved")),Z({id:"Pinned"},"Pinned"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"pinned-tab")),$({id:"Pinned-States"},"Pinned States"),ee({id:"Active-5"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"pinned-tab-active")),ee({id:"Focus-5"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"pinned-tab-active-focus")),ee({id:"Unsaved-5"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-pinned-tab")),ee({id:"Unread-5"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-pinned-tab")),Z({id:"Overflowed-Tabs"},"Overflowed Tabs"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"overflow-tabs")),$({id:"Opened"},"Opened"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"overflow-tabs-open")),$({id:"Unsaved-6"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-overflow-tabs")),ee({id:"Opened-2"},"Opened"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-overflow-tabs-open")),$({id:"Unread-6"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-overflow-tabs")),ee({id:"Opened-3"},"Opened"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-overflow-tabs-open")),$({id:"UnreadUnsaved-5"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-unsaved-overflow-tabs-open")),ee({id:"No-Icon"},"No Icon"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-unsaved-overflow-tabs-without-icon-open")),Z({id:"Feedback-states-for-overflow-menu"},"Feedback states for overflow menu"),$({id:"Success-2"},"Success"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"success-overflow")),ee({id:"UnsavedUnread"},"Unsaved/Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"success-overflow-unread-unsaved")),$({id:"Warning-2"},"Warning"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"warning-overflow")),ee({id:"UnsavedUnread-2"},"Unsaved/Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"warning-overflow-unread-unsaved")),$({id:"Error-2"},"Error"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"error-overflow")),ee({id:"UnsavedUnread-3"},"Unsaved/Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"error-overflow-unread-unsaved")),Z({id:"Object-Switcher"},"Object Switcher"),$({id:"Active-6"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"object-switcher-active")),$({id:"Menu-open"},"Menu open"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"object-switcher-menu-open")),Z({id:"Add-a-tab-dialog"},"Add a tab dialog"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"add-tab-dialog-open")),Z({id:"Active-tab-with-Subtabs"},"Active tab with Subtabs"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"sub-tabs-open")))},re=function(){return Object(i.a)(se())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/global-navigation/docs.mdx.js"]=function(e){function t(t){for(var n,s,r=t[0],o=t[1],c=t[2],m=0,b=[];m<r.length;m++)s=r[m],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&b.push(l[s][0]),l[s]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,c\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(i.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},l={41:0},i=[];function s(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,s),a.l=!0,a.exports}s.m=e,s.c=n,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(a,n,function(t){return e[t]}.bind(null,n));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return i.push([675,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},675:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return se})),a.d(t,"getContents",(function(){return re}));var n=a(0),l=a.n(n),i=a(4),s=a(2),r=a(26),o=(a(14),a(3)),c=a.n(o),d=a(5),m=a.n(d),b=a(10),u=a(9),E=a(7),v=a(138);function h(e){return(h="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 p(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 I(e,t){return(I=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function C(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=w(e);if(t){var l=w(this).constructor;a=Reflect.construct(n,arguments,l)}else a=n.apply(this,arguments);return g(this,a)}}function g(e,t){return!t\|\|"object"!==h(t)&&"function"!=typeof t?T(e):t}function T(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function w(e){return(w=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}function f(){return(f=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var O=l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,{title:"Main action"},l.a.createElement(b.a,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-right_x-small",sprite:"utility",symbol:"add"}),"Main action"),l.a.createElement("li",{className:"slds-dropdown__header slds-has-divider_top-space",role:"separator"},l.a.createElement("span",null,"Menu header")),l.a.createElement(u.g,null,"Menu Item One"),l.a.createElement(u.g,null,"Menu Item Two"),l.a.createElement(u.g,null,"Menu Item Three"))),y=function(e){var t=e.label,a=e.isActive,n=e.hasNavMenu,i=e.hasNavMenuOpen,s=e.hasMenuDropdown,r=m()("slds-context-bar__item",{"slds-is-active":a,"slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click":n,"slds-is-open":i});return l.a.createElement("li",{className:r},l.a.createElement("a",{href:"#",className:"slds-context-bar__label-action",title:t,onClick:function(e){return e.preventDefault()}},a&&l.a.createElement("span",{className:"slds-assistive-text"},"Current Page:"),l.a.createElement("span",{className:"slds-truncate",title:t},t)),n&&l.a.createElement(l.a.Fragment,null,l.a.createElement(P,{onClick:e.onClick}),s&&O))};y.defaultProps={label:"Menu Item",hasMenuDropdown:!0},y.propTypes={label:c.a.string.isRequired,isActive:c.a.bool,hasNavMenu:c.a.bool,hasNavMenuOpen:c.a.bool,hasMenuDropdown:c.a.bool};var P=function(e){return l.a.createElement("div",{className:"slds-context-bar__icon-action slds-p-left_none"},l.a.createElement(E.b,f({className:"slds-button_icon slds-context-bar__button",symbol:"chevrondown","aria-haspopup":"true",assistiveText:"Open menu item submenu",title:"Open menu item submenu"},e)))},_=function(e){var t=e.appName,a=e.homeItemIsActive,n=e.hasNavMenuOpen,i=e.children;return l.a.createElement("div",{className:"slds-context-bar"},l.a.createElement("div",{className:"slds-context-bar__primary"},l.a.createElement("div",{className:"slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover"},l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(v.a,{className:"slds-context-bar__button"})),l.a.createElement("span",{className:"slds-context-bar__label-action slds-context-bar__app-name"},l.a.createElement("span",{className:"slds-truncate",title:t\|\|"App Name"},t\|\|"App Name")))),l.a.createElement("nav",{className:"slds-context-bar__secondary",role:"navigation"},l.a.createElement("ul",{className:"slds-grid"},l.a.createElement(y,{label:"Home",isActive:a}),i\|\|l.a.createElement(l.a.Fragment,null,l.a.createElement(y,{label:"Menu Item",hasNavMenu:!0,hasNavMenuOpen:n,onClick:function(){return e.toggleNavMenu()}}),l.a.createElement(y,{label:"Menu Item"}),l.a.createElement(y,{label:"Menu Item"}),l.a.createElement(y,{label:"Menu Item"})))))};_.propTypes={appName:c.a.string,homeItemIsActive:c.a.bool,hasNavMenuOpen:c.a.bool,children:c.a.node};var N=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}}),t&&I(e,t)}(s,e);var t,a,n,i=C(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).toggleNavMenu=e.toggleNavMenu.bind(T(e)),e.state={hasNavMenuOpen:!1},e}return t=s,(a=[{key:"toggleNavMenu",value:function(){this.setState({hasNavMenuOpen:!this.state.hasNavMenuOpen})}},{key:"render",value:function(){return l.a.createElement(_,{homeItemIsActive:!0,toggleNavMenu:this.toggleNavMenu,hasNavMenuOpen:this.props.hasNavMenuOpen\|\|this.state.hasNavMenuOpen})}}])&&p(t.prototype,a),n&&p(t,n),s}(n.Component),A="Navigation Bar - ",x=[{id:"default",label:A+"Default",demoStyles:"height: 16rem;",storybookStyles:!1,element:l.a.createElement(N,null)}],j=[{id:"item-active",label:A+"Item Active",element:l.a.createElement(_,null,l.a.createElement(y,{label:"Menu Item",hasNavMenu:!0}),l.a.createElement(y,{label:"Menu Item"}),l.a.createElement(y,{label:"Menu Item",isActive:!0}),l.a.createElement(y,{label:"Menu Item"}))},{id:"item-menu-open",label:A+"Item Menu Open",demoStyles:"height: 16rem;",storybookStyles:!0,element:l.a.createElement(N,{hasNavMenuOpen:!0})}],U=a(45),S=a(50),L="context-tab-panel-1",H="context-tab-panel-2",F="context-tab-panel-3",k="context-tab-id-1",M="context-tab-id-2",W="context-tab-id-3",D="Navigation Tab Bar - ",V=function(e){return l.a.createElement("span",{className:"slds-text-body_small slds-text-color_weak slds-p-left_large"},l.a.createElement("span",{className:"slds-assistive-text"},":"),e.children)},R=function(e){return l.a.createElement("li",{className:m()("slds-context-bar__item slds-context-bar__item_tab",e.className,{"slds-is-active":e.itemActive,"slds-is-unsaved":e.itemUnsaved,"slds-is-pinned":e.pinned,"slds-has-focus":e.hasFocus,"slds-has-notification":e.itemUnread,"slds-has-sub-tabs":e.hasSubtabs,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-has-error":"error"===e.statusLevel}),role:"presentation"},l.a.createElement("a",{href:"#",className:"slds-context-bar__label-action",role:"tab",title:e.title,"aria-selected":e.itemActive?"true":"false",tabIndex:e.itemActive?"0":"-1","aria-controls":e.tabPanelId,id:e.id,onClick:function(e){return e.preventDefault()}},l.a.createElement(S.a,null,e.itemUnsaved&&l.a.createElement(S.c,{title:"Tab Not Saved"}),e.itemUnread&&l.a.createElement(S.b,null)),e.hasIcon&&l.a.createElement(S.d,{statusLevel:e.statusLevel,symbol:e.symbol}),l.a.createElement("span",{className:m()("slds-truncate",e.pinned?"slds-assistive-text":null),title:e.title},e.title)),l.a.createElement("div",{className:m()("slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none","true"===e.actionOverflow?"slds-is-open":null)},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-x-small",tabIndex:e.itemActive?"0":"-1",symbol:"chevrondown","aria-haspopup":"true",assistiveText:"Actions for "+e.title,title:"Actions for "+e.title,theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,useCurrentColor:"error"!==e.statusLevel&&"success"!==e.statusLevel}),l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"r")},"Refresh Tab"),l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"⇧ + n")},"Open in a new window"),l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"p")},"Pin Tab"),l.a.createElement(u.g,{iconRight:l.a.createElement(V,null,"w")},"Close Tab")))),e.pinned?null:l.a.createElement("div",{className:"slds-context-bar__icon-action slds-col_bump-left slds-p-left_none"},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-x-small",tabIndex:e.itemActive?"0":"-1",symbol:"close",assistiveText:"Close "+e.title,title:"Close "+e.title,theme:"error"===e.statusLevel\|\|"success"===e.statusLevel?"inverse":null,useCurrentColor:"error"!==e.statusLevel&&"success"!==e.statusLevel})))};R.propTypes={className:c.a.string,hasFocus:c.a.bool,hasSubtabs:c.a.bool,id:c.a.string.isRequired,itemActive:c.a.bool,itemUnread:c.a.bool,itemUnsaved:c.a.bool,pinned:c.a.bool,statusLevel:c.a.oneOf(["error","success","warning"]),tabPanelId:c.a.string.isRequired,title:c.a.string},R.defaultProps={hasIcon:!0,title:"Tab Name"};var B=function(e){return l.a.createElement("div",{id:e.id,className:m()(e.show?"slds-show":"slds-hide"),role:"tabpanel","aria-labelledby":e.tabId},e.children)},q=function(e){return l.a.createElement("div",{className:m()("slds-context-bar slds-context-bar_tabs",e.className)},l.a.createElement("div",{className:"slds-context-bar__primary"},l.a.createElement("div",{className:"slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover"},l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(v.a,{className:"slds-context-bar__button"})),l.a.createElement("span",{className:"slds-context-bar__label-action slds-context-bar__app-name"},l.a.createElement("span",{className:"slds-truncate",title:e.appName\|\|"App Name"},e.appName\|\|"App Name"))),l.a.createElement("div",{className:m()("slds-context-bar__item slds-context-bar__object-switcher slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click",e.objectSwitchClassName)},l.a.createElement("a",{href:"#",className:"slds-context-bar__label-action",onClick:function(e){return e.preventDefault()}},l.a.createElement("span",{className:"slds-truncate",title:"Object"},"Object")),l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-x-small",symbol:"chevrondown","aria-haspopup":"true",assistiveText:"Open object switcher menu",title:"Open object switcher menu"})),l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,null,l.a.createElement(b.a,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Accounts"),l.a.createElement(u.g,null,l.a.createElement(b.a,{className:"slds-icon slds-icon_small slds-icon-standard-case slds-m-right_small",sprite:"standard",symbol:"case"}),"Cases"),l.a.createElement(u.g,null,l.a.createElement(b.a,{className:"slds-icon slds-icon_small slds-icon-standard-work-order slds-m-right_small",sprite:"standard",symbol:"work_order"}),"Insights")))),l.a.createElement("div",{className:m()("slds-context-bar__item slds-dropdown-trigger slds-dropdown-trigger_click",e.addTabActive?"slds-is-open":null,e.addTabClassName)},l.a.createElement("div",{className:"slds-context-bar__icon-action"},l.a.createElement(E.b,{className:"slds-button_icon-container slds-button_icon-small",symbol:"add",assistiveText:"Open a New Tab",title:"Open a New Tab"})),e.addTabActive?l.a.createElement("section",{className:"slds-popover slds-nubbin_top",role:"dialog","aria-label":"Add tab by URL or ID",style:{position:"absolute",left:"1.125rem",top:"2.75rem",marginLeft:"-10rem"}},l.a.createElement("div",{className:"slds-popover__body"},l.a.createElement("div",{className:"slds-form-element"},l.a.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Add Page by URL or ID"),l.a.createElement("div",{className:"slds-form-element__control slds-grid"},l.a.createElement("input",{id:"text-input-01",className:"slds-input",type:"text",placeholder:"Placeholder Text"}),l.a.createElement("button",{className:"slds-button slds-button_brand slds-shrink-none slds-m-left_small",type:"submit"},"Add Tab"))))):null)),l.a.createElement("div",{className:"slds-context-bar__secondary"},l.a.createElement("div",{className:"slds-context-bar__vertical-divider"}),l.a.createElement("ul",{className:"slds-grid",role:"tablist"},e.children)))},z=function(e){return l.a.createElement("li",{className:m()("slds-context-bar__item","slds-context-bar__dropdown-trigger","slds-dropdown-trigger","slds-dropdown-trigger_click",{"slds-is-open":e.isOpen,"slds-has-notification":e.itemUnread,"slds-is-unsaved":e.itemUnsaved,"slds-has-success":"success"===e.statusLevel,"slds-has-warning":"warning"===e.statusLevel,"slds-has-error":"error"===e.statusLevel})},l.a.createElement("button",{className:"slds-button slds-context-bar__label-action",title:"More Tab Items","aria-haspopup":"true"},l.a.createElement(S.a,null,e.itemUnsaved&&l.a.createElement(S.c,null),e.itemUnread&&l.a.createElement(S.b,null)),l.a.createElement("span",{className:"slds-truncate",title:"More Tabs"},"More ",l.a.createElement("span",{className:"slds-assistive-text"},"Tabs")),l.a.createElement(b.a,{className:"slds-button__icon slds-button__icon_small slds-button__icon_right",sprite:"utility",symbol:"chevrondown"})),l.a.createElement(u.f,{className:"slds-dropdown_right"},l.a.createElement(u.h,null,l.a.createElement(u.g,{className:m()({"slds-has-notification":e.itemUnread,"slds-is-unsaved":e.itemUnsaved}),statusLevel:e.statusLevel,title:"Chat - Customer"},l.a.createElement(S.a,null,e.itemUnsaved&&l.a.createElement(S.c,{title:"Tab(s) within menu not saved"}),e.itemUnread&&l.a.createElement(S.b,null)),e.itemHasIcon&&l.a.createElement(S.d,{statusLevel:e.statusLevel,symbol:"live_chat"}),l.a.createElement("span",null,"Chat - Customer")),l.a.createElement(u.g,{title:"Overflow Tab Item"},l.a.createElement(S.a,null),e.itemHasIcon&&l.a.createElement(S.d,null),l.a.createElement("span",null,"Overflow Tab Item")))))};z.propTypes={statusLevel:c.a.oneOf(["error","success","warning"])},z.defaultProps={itemHasIcon:!0};var J=[{id:"default",label:D+"Default",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))}],G=[{id:"tab-active",label:D+"Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"tab-active-focus",label:D+"Active Focus",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0,hasFocus:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"tab-item-action-menu-open",label:D+"Action Overflow",element:l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0,actionOverflow:"true"}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-tab",label:D+"Unsaved Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-tab",label:D+"Unread Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Chat - Customer",tabPanelId:F,id:W,symbol:"live_chat",itemUnread:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"unread-unsaved-tab",label:D+"Unread/Unsaved Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Chat - Customer",tabPanelId:F,id:W,symbol:"live_chat",itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success",label:D+"Success",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success-active",label:D+"Success Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-success-focus",label:D+"Success Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",hasFocus:!0,id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-success-unread",label:D+"Success Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemUnread:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success-unsaved",label:D+"Success Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-success-unread-unsaved",label:D+"Success Unread and Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"success",id:W,itemUnread:!0,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"Chat - Customer"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning",label:D+"Warning",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-active",label:D+"Warning Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-focus",label:D+"Warning focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",hasFocus:!0,id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-unread",label:D+"Warning Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemUnread:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-unsaved",label:D+"Warning Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-warning-unread-unsaved",label:D+"Warning Unread and Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"warning",id:W,itemUnread:!0,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA in 0.30"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error",label:D+"Error",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error-active",label:D+"Error Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-error-focused",label:D+"Error focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",hasFocus:!0,id:W,itemActive:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,show:!0,tabId:W},"Chat - Customer Content"))},{id:"tab-error-unread",label:D+"Error Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemUnread:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error-unsaved",label:D+"Error Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"tab-error-unread-unsaved",label:D+"Error Unread and Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{statusLevel:"error",id:W,itemUnread:!0,itemUnsaved:!0,symbol:"live_chat",tabPanelId:F,title:"SLA Violation"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Chat - Customer Content"))},{id:"pinned-tab",label:D+"Pinned Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,pinned:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-active",label:D+"Pinned Tab - Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0,pinned:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-active-focus",label:D+"Pinned Tab - Active Focus",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0,pinned:!0,hasFocus:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-pinned-tab",label:D+"Unsaved Pinned Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,pinned:!0,itemUnsaved:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-pinned-tab",label:D+"Unread Pinned Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Chat - Customer",symbol:"live_chat",tabPanelId:L,id:k,pinned:!0,itemUnread:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{show:!0,id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success",label:D+"Pinned Success Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-active",label:D+"Pinned Success Tab Active",element:l.a.createElement("div",{className:"demo-only"},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-focused",label:D+"Pinned Success Tab Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",hasFocus:!0,id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-unread",label:D+"Pinned Success Tab Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,itemUnread:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-success-unsaved",label:D+"Pinned Success Tab Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"success",id:k,itemUnsaved:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning",label:D+"Pinned Warning Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-active",label:D+"Pinned Warning Tab Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-focused",label:D+"Pinned Warning Tab Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",hasFocus:!0,id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-unread",label:D+"Pinned Warning Tab Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,itemUnread:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-warning-unsaved",label:D+"Pinned Warning Tab Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"warning",id:k,itemUnsaved:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error",label:D+"Pinned Error Tab",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-active",label:D+"Pinned Error Tab Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-focused",label:D+"Pinned Error Tab Focused",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemActive:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-unread",label:D+"Pinned Error Tab Unread",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemUnread:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"pinned-tab-error-unsaved",label:D+"Pinned Error Tab Unsaved",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{statusLevel:"error",id:k,itemUnsaved:!0,pinned:!0,symbol:"live_chat",tabPanelId:L,title:"Chat - Customer"}),l.a.createElement(R,{id:M,itemActive:!0,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"})),l.a.createElement(B,{id:L,tabId:k},"Chat - Customer Content"),l.a.createElement(B,{id:H,show:!0,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"overflow-tabs",label:D+"Overflow Tabs",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,null)),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"overflow-tabs-open",label:D+"Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-overflow-tabs",label:D+"Unsaved Overflow Tabs",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unsaved-overflow-tabs-open",label:D+"Unsaved Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-overflow-tabs",label:D+"Unread Overflow Tabs",element:l.a.createElement(l.a.Fragment,null,l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{itemUnread:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-overflow-tabs-open",label:D+"Unread Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0,itemUnread:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-unsaved-overflow-tabs-open",label:D+"Unread Unsaved Overflow Tabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W}),l.a.createElement(z,{isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"unread-unsaved-overflow-tabs-without-icon-open",label:D+"Unread Unsaved Overflow Tabs without Icon - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"New activity in Tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W,itemUnread:!0,itemUnsaved:!0,hasIcon:!1}),l.a.createElement(z,{isOpen:!0,itemUnread:!0,itemUnsaved:!0,itemHasIcon:!1})),l.a.createElement(B,{show:!0,id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"success-overflow",label:D+"Success Overflow Tabs",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"success",isOpen:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"success-overflow-unread-unsaved",label:D+"Success Overflow Tabs Unread and Unsaved",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Success: SLA agreement warning cleared in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"success",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"warning-overflow",label:D+"Warning Overflow Tabs",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"warning",isOpen:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"warning-overflow-unread-unsaved",label:D+"Warning Overflow Tabs Unread and Unsaved",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Warning: SLA agreement in 30 seconds in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"warning",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"error-overflow",label:D+"Error Overflow Tabs",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"error",isOpen:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"error-overflow-unread-unsaved",label:D+"Error Overflow Tabs Unread and Unsaved",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement("span",{"aria-live":"polite",className:"slds-assistive-text"},"Violation: SLA agreement in tab: Chat - Customer"),l.a.createElement(q,null,l.a.createElement(R,{id:k,itemActive:!0,symbol:"home",tabPanelId:L,title:"Home"}),l.a.createElement(R,{id:M,tabPanelId:H,title:"Tab Item 1"}),l.a.createElement(R,{id:W,tabPanelId:F,title:"Tab Item 2"}),l.a.createElement(z,{statusLevel:"error",isOpen:!0,itemUnread:!0,itemUnsaved:!0})),l.a.createElement(B,{id:L,show:!0,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"object-switcher-active",label:D+"Object Switcher - Active",element:l.a.createElement(l.a.Fragment,null,l.a.createElement(q,{objectSwitchClassName:"slds-is-active"},l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"object-switcher-menu-open",label:D+"Object Switcher - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"11rem"}},l.a.createElement(q,{objectSwitchClassName:"slds-is-open"},l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"add-tab-dialog-open",label:D+"Add Tab Dialog - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,{addTabActive:!0},l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{id:L,tabId:k},"Tab Home Content"),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))},{id:"sub-tabs-open",label:D+"Subtabs - Open",element:l.a.createElement("div",{className:"demo-only",style:{height:"8rem"}},l.a.createElement(q,null,l.a.createElement(R,{title:"Home",symbol:"home",tabPanelId:L,id:k,itemActive:!0,hasSubtabs:!0}),l.a.createElement(R,{title:"Tab Item 1",tabPanelId:H,id:M}),l.a.createElement(R,{title:"Tab Item 2",tabPanelId:F,id:W})),l.a.createElement(B,{show:!0,id:L,tabId:k},l.a.createElement(U.d,null,l.a.createElement(U.b,null,l.a.createElement(U.a,{active:!0,title:"00071938",tabItemId:"subtab-tabitem-01",tabPanelId:"subtab-tabpanel-01"}),l.a.createElement(U.a,{title:"Chat - Customer",tabItemId:"subtab-tabitem-02",tabPanelId:"subtab-tabpanel-02",symbol:"live_chat"})),l.a.createElement(U.c,{id:"subtab-tabpanel-01",tabId:"subtab-tabitem-01",isVisible:!0},"Item One Content"),l.a.createElement(U.c,{id:"subtab-tabpanel-02",tabId:"subtab-tabitem-02"},"Item Two Content"))),l.a.createElement(B,{id:H,tabId:M},"Tab One Content"),l.a.createElement(B,{id:F,tabId:W},"Tab Two Content"))}],Y=a(1),K=i.c.a,Q=i.c.code,X=i.c.h2,Z=i.c.h3,$=i.c.h4,ee=i.c.h5,te=i.c.li,ae=i.c.ol,ne=i.c.p,le=i.c.strong,ie=i.c.ul,se=function(){return Object(n.createElement)(i.b,{},Object(n.createElement)("div",{className:"doc lead"},"Global Navigation is the list of navigation links your users find in the Header on every page in Salesforce. Your Global Navigation includes a Navigation Bar where your users find the App Launcher, App Name, and Pages that each App includes."),Object(n.createElement)(s.a,{exampleOnly:!0,demoStyles:Object(Y.e)(x,"default")},Object(Y.f)(x)),X({id:"About-Navigation-Bar"},"About Navigation Bar"),ne({},"The navigation bar is composed of a wrapper and 2 required regions:"),ie({},te({},le({},"Primary,")," which contains the App Launcher and App Name"),te({},le({},"Secondary,")," which contains the App Items, for navigating within the current app")),ne({},"The markup should follow the order listed above for proper keyboard interaction set by the 508 compliance standards. Each included region inside the wrapper of ",Q({},".slds-context-bar")," needs the appropriate ordering class name, e.g. ",Q({},".slds-context-bar__primary"),"."),Object(n.createElement)(s.a,{demoStyles:Object(Y.e)(x,"default")},Object(Y.f)(x)),Z({id:"Items-on-the-Navigation-Bar"},"Items on the Navigation Bar"),ne({},"Every item that sits on the horizontal axis of the navigation bar should receive the class ",Q({},".slds-context-bar__item"),"."),Object(n.createElement)(r.a,null,Object(n.createElement)(y,{label:"Menu Item"})),ne({},"This class is used to notify the navigation bar that it has a new item. The styles applied allow the children of the navigation bar to vertically aligned, without knowing the height of the navigation bar. The styles will also allow for the actionable items ",Q({},".slds-context-bar__label-action")," and ",Q({},".slds-context-bar__icon-action")," to stretch 100% of the height of the navigation bar, optimizing the hit area of those actions."),ne({},"Since the items are leveraging flexbox, the elements inside can easily be re-ordered easily by using an order class helper on the element, such as ",Q({},".slds-order--[#]"),"."),Z({id:"Building-the-Navigation-Bar-Item"},"Building the Navigation Bar Item"),ne({},"The navigation bar item is built to accommodate 2 specific layout needs."),ae({},te({},"Individual text hyperlink to invokes link destination"),te({},"Individual text hyperlink to invokes link destination + button icon to indicate menu dropdown is available")),ne({},"These layouts are built upon 2 reusable classes. The text hyperlink action area would get the class ",Q({},".slds-context-bar__label-action")," and the icon based action area would get the class ",Q({},".slds-context-bar__icon-action"),"."),ne({},"The ",Q({},".slds-context-bar__icon-action")," class handles the alignment and coloring of the icons based on interactions such as ",Q({},":hover"),", ",Q({},":focus")," and ",Q({},":active"),". This is a required if you have an actionable icon area adjacent to an actionable text area."),ne({},"The markup structure should have the button icon(s) preceding the text label. The icons can be visually reordered by using the ordering utility classes such as ",Q({},".slds-order--[#]"),"."),$({id:"Icons"},"Icons"),ne({},"The icons in the navigation bar either serve as a visual affordance that indicates an item has a menu with additional actions or the icon itself is actionable."),Object(n.createElement)(r.a,null,Object(n.createElement)(y,{label:"Menu Item",hasNavMenu:!0,hasMenuDropdown:!1})),ne({},"The class used to indicate a button icon will sit adjacent to another actionable item is ",Q({},".slds-context-bar__icon-action"),". If you two icons in an item, each icon should be contained in it’s own ",Q({},".slds-context-bar__icon-action")," element."),ne({},"The look and feel of the button icon is dependant on the modifiers used from ",K({href:"/components/buttons/#icon"},"Button Icon Variant Component")," page."),ne({},"The ",Q({},".slds-context-bar__icon-action")," styles apply a default left and right padding of 0.75rem. That padding can be removed or modified by using our spacing utilities. In example #1, the left padding has been removed by using the class ",Q({},".slds-p-left--none"),"."),ne({},"If a navigation bar item has an icon then we want to provide visual indication that its active when a user hovers into its region. To make this happen, apply the class ",Q({},".slds-hint-parent")," to the hover region, most cases would be ",Q({},".slds-context-bar__icon-action")," element."),$({id:"Menu-trigger-area"},"Menu trigger area"),ne({},"When a navigation bar items requires a menu with additional sub options or actions, the classes that need to be added to the target hit area are the following:"),Object(n.createElement)(r.a,null,Object(n.createElement)(y,{label:"Menu Item",hasNavMenu:!0})),ae({},te({},Q({},".slds-context-bar__dropdown-trigger")," — Add a hoverable zone below the action so that the dropdown doesn’t disappear when the mouse is between the action and the dropdown — this is specific to the navigation bar"),te({},Q({},".slds-dropdown-trigger")," — Globally used utility that notifies the element there is a dropdown menu"),te({},Q({},".slds-dropdown-trigger_click")," — Specifies that an item requires a click to open interaction.")),ne({},"If the navigation item has one hyperlink with a menu containing additional sub actions, then the hover area that invokes the dropdown menu is both the ",Q({},".slds-context-bar__label-action")," and ",Q({},".slds-context-bar__icon-action"),". If the navigation item is demonstrated as a tab format, one hyperlink plus two additional actions, then the hover area that invokes the dropdown menu is only on the ",Q({},".slds-context-bar__icon-action"),"."),Z({id:"Specifics-of-the-Navigation-Bar"},"Specifics of the Navigation Bar"),$({id:"App-Launcher"},"App Launcher"),ne({},"The app launcher is the one element on the navigation bar that requires a mouse click or keyboard enter to invoke the app launcher dropdown. Please use JavaScript to accommodate this requirement."),$({id:"App-Name"},"App Name"),ne({},"The application name needs to receive the ",Q({},".slds-context-bar__app-name")," class. This class will handle such things as its unique font sizing and truncation widths."),$({id:"Dividers"},"Dividers"),ne({},"Due to the platform-esc nature of the navigation bar, there is an available element utility to apply a divider between sections where needed. The ",Q({},".slds-context-bar__vertical-divider")," class should be applied to an empty ",Q({},"<div>")," and placed within the markup of your navigation bar for a visual divider."),ne({},"Alternatively, two classes are available to add border using css. Adding the class ",Q({},".slds-context-bar__item--divider-left")," will add a left border to a navigation bar item while ",Q({},".slds-context-bar__item--divider-right")," will add a right border."),Z({id:"States"},"States"),$({id:"Active-item"},"Active item"),Object(n.createElement)(s.a,null,Object(Y.f)(j,"item-active")),$({id:"Menu-Open"},"Menu Open"),Object(n.createElement)(s.a,{demoStyles:Object(Y.e)(j,"item-menu-open")},Object(Y.f)(j,"item-menu-open")),X({id:"About-Navigation-Tab-Bar"},"About Navigation Tab Bar"),Object(n.createElement)(s.a,null,Object(Y.f)(J)),Z({id:"Accessibility"},"Accessibility"),ne({},le({},"Communicating Status to Screen Readers:")),ne({},"When communicating tab status updates to the user, unread, warning, error and success notifications should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change."),ne({},"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:"),ne({},Q({},'<div className="slds-assistive-text" aria-live="polite">...</div>')),ne({},"Upon clearing the status on a given tab, you should clear the message from the live region."),ne({},le({},"Unread status:")),ne({},"In order to inform screen readers of new activity in a tab, 2 things should occur."),ae({},te({},ne({},"The ",Q({},"title")," attribute and ",Q({},"aria-label")," on the element that displays the red dot should read ",le({},'"New Activity"'),'. This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".')),te({},ne({},"The hidden live region as described above, should have its content updated to ",le({},'"New Activity in Tab: [Tab Name Here]"')," to alert the user of new activity in that particular subtab."))),ne({},Q({},'<span aria-label="New Activity" className="slds-indicator_unread" title="New Activity"></span>')),ne({},Q({},'<div className="slds-assistive-text" aria-live="polite">New activity in Tab: Chat - Customer</div>')),ne({},le({},"Warning, Error and Success Tabs:")),ne({},"When you wish to draw attention to a particular tab because something has occurred in that tab that corresponds to an alert level, you can use the ",Q({},"slds-has-warning"),", ",Q({},"slds-has-error")," or ",Q({},"slds-has-success")," class to change the background color and introduce a short pulsing animation to draw attention from the user."),ne({},"The icon is updated to match the corresponding alert level, to give an extra way to communicate the level of the status without relying on the use of color alone."),ne({},"In this example we show that something inside the tab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action."),ne({},"Update the hidden live region with a message that informs the user of the status level, the message and the offending subtab ",le({},"[level]: [message] in tab: [tab_name]"),"."),ne({},Q({},'<div className="slds-assistive-text" aria-live="polite">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</div>')),Z({id:"States-2"},"States"),$({id:"Active"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-active")),ee({id:"Focus"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-active-focus")),$({id:"Unsaved"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-tab")),$({id:"Unread"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-tab")),$({id:"Overflow"},"Overflow"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-item-action-menu-open")),$({id:"UnreadUnsaved"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-unsaved-tab")),Z({id:"Tab-Feedback-States"},"Tab Feedback States"),$({id:"Success"},"Success"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success")),ee({id:"Active-2"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-active")),ee({id:"Focus-2"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-focus")),ee({id:"Unsaved-2"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-unsaved")),ee({id:"Unread-2"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-unread")),ee({id:"UnreadUnsaved-2"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-success-unread-unsaved")),$({id:"Warning"},"Warning"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning")),ee({id:"Active-3"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-active")),ee({id:"Focus-3"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-focus")),ee({id:"Unsaved-3"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-unsaved")),ee({id:"Unread-3"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-unread")),ee({id:"UnreadUnsaved-3"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-warning-unread-unsaved")),$({id:"Error"},"Error"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error")),ee({id:"Active-4"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-active")),ee({id:"Focus-4"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-focused")),ee({id:"Unsaved-4"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-unsaved")),ee({id:"Unread-4"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-unread")),ee({id:"UnreadUnsaved-4"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"tab-error-unread-unsaved")),Z({id:"Pinned"},"Pinned"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"pinned-tab")),$({id:"Pinned-States"},"Pinned States"),ee({id:"Active-5"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"pinned-tab-active")),ee({id:"Focus-5"},"Focus"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"pinned-tab-active-focus")),ee({id:"Unsaved-5"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-pinned-tab")),ee({id:"Unread-5"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-pinned-tab")),Z({id:"Overflowed-Tabs"},"Overflowed Tabs"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"overflow-tabs")),$({id:"Opened"},"Opened"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"overflow-tabs-open")),$({id:"Unsaved-6"},"Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-overflow-tabs")),ee({id:"Opened-2"},"Opened"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unsaved-overflow-tabs-open")),$({id:"Unread-6"},"Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-overflow-tabs")),ee({id:"Opened-3"},"Opened"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-overflow-tabs-open")),$({id:"UnreadUnsaved-5"},"Unread/Unsaved"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-unsaved-overflow-tabs-open")),ee({id:"No-Icon"},"No Icon"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"unread-unsaved-overflow-tabs-without-icon-open")),Z({id:"Feedback-states-for-overflow-menu"},"Feedback states for overflow menu"),$({id:"Success-2"},"Success"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"success-overflow")),ee({id:"UnsavedUnread"},"Unsaved/Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"success-overflow-unread-unsaved")),$({id:"Warning-2"},"Warning"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"warning-overflow")),ee({id:"UnsavedUnread-2"},"Unsaved/Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"warning-overflow-unread-unsaved")),$({id:"Error-2"},"Error"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"error-overflow")),ee({id:"UnsavedUnread-3"},"Unsaved/Unread"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"error-overflow-unread-unsaved")),Z({id:"Object-Switcher"},"Object Switcher"),$({id:"Active-6"},"Active"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"object-switcher-active")),$({id:"Menu-open"},"Menu open"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"object-switcher-menu-open")),Z({id:"Add-a-tab-dialog"},"Add a tab dialog"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"add-tab-dialog-open")),Z({id:"Active-tab-with-Subtabs"},"Active tab with Subtabs"),Object(n.createElement)(s.a,null,Object(Y.f)(G,"sub-tabs-open")))},re=function(){return Object(i.a)(se())}}});

package/__internal/chunked/docs/ui/components/icons/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/icons/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],r=t[1],l=t[2],h=0,u=[];h<c.length;h++)s=c[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(d&&d(t);u.length;)u.shift()();return a.push.apply(a,l\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,c=1;c<n.length;c++){var r=n[c];0!==i[r]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},i={42:0},a=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var l=0;l<c.length;l++)t(c[l]);var d=r;return a.push([726,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},726:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return _})),n.d(t,"getContents",(function(){return T}));var o=n(0),i=n.n(o),a=n(4),s=n(2),c=n(25),r=(n(14),n(37)),l=n(11),d=n(138),h=n(10),u=n(5),f=n.n(u),p=function(e){var t=e.symbol\|\|"custom5";return i.a.createElement("span",{className:f()("slds-icon_container slds-icon-custom-"+t),title:e.title\|\|"Description of icon when needed"},i.a.createElement(h.a,{className:f()("slds-icon",e.className),sprite:"custom",symbol:t}),i.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText\|\|"Description of icon when needed"))},m=n(136),b=n(32),g=n(1),y=a.c.a,v=a.c.code,O=a.c.em,j=a.c.h2,S=a.c.h3,x=a.c.li,E=a.c.p,w=a.c.ul,_=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Icons provide visual context and enhance usability. Read more in the"," ",Object(o.createElement)("a",{href:"/guidelines/iconography",title:"Iconography Guidelines"},"Iconography design guideline")," ","and for a full list of icons available, visit the"," ",Object(o.createElement)("a",{href:"/icons",title:"Icons"},"Icons page"),"."),Object(o.createElement)(s.a,{exampleOnly:!0},Object(g.f)(l.b,"default")),j({id:"About-Icons"},"About Icons"),E({},"Five separate SVG sprites are used to create icons — ",y({href:"/icons/#action"},"action"),", ",y({href:"/icons/#custom"},"custom"),", ",y({href:"/icons/#doctype"},"doctype"),", ",y({href:"/icons/#standard"},"standard ")," and ",y({href:"/icons/#utility"},"utility"),". Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the ",y({href:"/icons/"},"icon page"),".)"),j({id:"Accessibility"},"Accessibility"),E({},"Icons require a containing element for two reasons:"),w({},x({},"If assistive text is required, the containing element should contain both the icon and a ",v({},"<span>")," with hidden assistive text describing the icon using the ",v({},"slds-assistive-text")," class."),x({},"If the icon is used without a visible, descriptive label, a ",v({},"title")," attribute is needed on the containing element. The ",v({},"title")," should describe the icon.")),E({},"If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required."),E({},"The containing element must have the ",v({},"slds-icon_container")," class."),j({id:"Default"},"Default"),Object(o.createElement)(s.a,null,Object(g.f)(l.b,"default")),S({id:"Structure-and-Implementation"},"Structure and Implementation"),E({},"An icon must have a containing element with the class ",v({},"slds-icon_container")," for ",y({href:"#Accessibility"},"accessibility support"),". Inside the container, a ",v({},"<svg>")," with the class ",v({},"slds-icon")," contains the reference to your icon and a ",v({},"<span>")," with the class ",v({},"slds-assistive-text")," contains your hidden assistive text that describes the icon. Be sure to read the ",y({href:"#Accessibility"},"accessibility section")," to know when to use assistive text, the ",v({},"title")," attribute, or when neither is needed."),E({},"When placing the icon code into your page, customize the path in the ",v({},"use")," attribute of the ",v({},"svg")," to the proper path and icon name for your specific icon. For example, the ",O({},"case")," icon in the ",O({},"standard")," sprite would have a path like this:"),Object(o.createElement)(c.a,{toggleCode:!1},Object(o.createElement)("svg",{"aria-hidden":"true",className:"slds-icon",title:"when needed"},Object(o.createElement)("use",{xlinkHref:"/assets/icons/standard-sprite/svg/symbols.svg#case"}))),E({},"If an icon has more than one word in the name, it should be included in the ",v({},"use")," attribute with the underscore separator as shown on the icon page. For example: log_a_call."),E({},"You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see ",Object(o.createElement)("a",{href:"/platforms/visualforce"},"the Visualforce tutorial"),". If you’re using ",Object(o.createElement)("a",{href:"/platforms/lightning"}," Lightning components, see this documentation"),"."),w({},x({},"You can access the SVG sprites by downloading the entire ",y({href:"/resources/downloads"},"CSS Framework or just the icons"),". To include a sprite in your application, the recommended method is to place it into the page as the first element inside the ",v({},"body")," element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprite icon, add the tiny ",y({href:"https://github.com/jonathantneal/svg4everybody"},"SVG for Everybody")," script for Internet Explorer."),x({},"When placed into the ",v({},"body"),", the SVG sprite takes up space in the page. Use either ",v({},"display:none")," or ",v({},"position:absolute")," and set both the width and height to zero.")),j({id:"Types"},"Types"),E({},"All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility."),S({id:"Action"},"Action"),E({},"To view all available action icons, see ",y({href:"/icons/#action"},"action icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(d.a,null)),S({id:"Custom"},"Custom"),E({},"Custom icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available custom icons, see ",y({href:"/icons/#custom"},"custom icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(p,null)),S({id:"Doctype"},"Doctype"),E({},"To view all available doctype icons, see ",y({href:"/icons/#doctype"},"doctype icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(m.a,null)),S({id:"Standard"},"Standard"),E({},"Standard icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available standard icons, see ",y({href:"/icons/#standard"},"standard icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(b.a,null)),j({id:"Color"},"Color"),S({id:"Default-2"},"Default"),E({},"To change the fill of an icon to the default text color, add the ",v({},"slds-icon-text-default")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.b,"default")),S({id:"Current-Color"},"Current Color"),E({},"To change the fill of an icon to match the current color of its parent, add the ",v({},"slds-current-color")," class to the icon's container. This class utilizes the CSS ",v({},"currentColor")," value."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"currentColor")),S({id:"Success"},"Success"),E({},"To change the fill of an icon to the success text color, add the ",v({},"slds-icon-text-success")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"text-warning")),S({id:"Warning"},"Warning"),E({},"To change the fill of an icon to the warning text color, add the ",v({},"slds-icon-text-warning")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"text-warning")),S({id:"Error"},"Error"),E({},"To change the fill of an icon to the error text color, add the ",v({},"slds-icon-text-error")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"text-error")),S({id:"Light"},"Light"),E({},"To change the fill of an icon to the light text color, add the ",v({},"slds-icon-text-light")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"light")),j({id:"Size"},"Size"),E({},"Size modifiers can be added to the ",v({},"slds-icon")," element on all types of icons."),S({id:"XX-Small"},"XX-Small"),E({},"To change the size of an icon to xx-small, add the ",v({},"slds-icon_xx-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-xxsmall")),S({id:"X-Small"},"X-Small"),E({},"To change the size of an icon to x-small, add the ",v({},"slds-icon_x-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-xsmall")),S({id:"Small"},"Small"),E({},"To change the size of an icon to small, add the ",v({},"slds-icon_small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-small")),S({id:"Large"},"Large"),E({},"To change the size of an icon to large, add the ",v({},"slds-icon_large")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-large")),j({id:"Right-to-Left-Support"},"Right-to-Left Support"),E({},"To horizontally flip an icon to support bidirectionality (reading from right to left), use the ",v({},"slds-icon_flip")," class with the ",v({},"slds-icon_container")," class, and setting the ",v({},"dir")," attribute on any parent container, most often the parent component or on ",v({},"html")," itself."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"rtl-flipped")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(r.a,{name:"icons",type:"component"}))},T=function(){return Object(a.a)(_())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/icons/docs.mdx.js"]=function(e){function t(t){for(var o,s,c=t[0],r=t[1],l=t[2],h=0,u=[];h<c.length;h++)s=c[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(d&&d(t);u.length;)u.shift()();return a.push.apply(a,l\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],o=!0,c=1;c<n.length;c++){var r=n[c];0!==i[r]&&(o=!1)}o&&(a.splice(t--,1),e=s(s.s=n[0]))}return e}var o={},i={42:0},a=[];function s(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,s),n.l=!0,n.exports}s.m=e,s.c=o,s.d=function(e,t,n){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var l=0;l<c.length;l++)t(c[l]);var d=r;return a.push([727,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},727:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return _})),n.d(t,"getContents",(function(){return T}));var o=n(0),i=n.n(o),a=n(4),s=n(2),c=n(26),r=(n(14),n(38)),l=n(11),d=n(139),h=n(10),u=n(5),f=n.n(u),p=function(e){var t=e.symbol\|\|"custom5";return i.a.createElement("span",{className:f()("slds-icon_container slds-icon-custom-"+t),title:e.title\|\|"Description of icon when needed"},i.a.createElement(h.a,{className:f()("slds-icon",e.className),sprite:"custom",symbol:t}),i.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText\|\|"Description of icon when needed"))},m=n(137),b=n(33),g=n(1),y=a.c.a,v=a.c.code,O=a.c.em,j=a.c.h2,S=a.c.h3,x=a.c.li,E=a.c.p,w=a.c.ul,_=function(){return Object(o.createElement)(a.b,{},Object(o.createElement)("div",{className:"doc lead"},"Icons provide visual context and enhance usability. Read more in the"," ",Object(o.createElement)("a",{href:"/guidelines/iconography",title:"Iconography Guidelines"},"Iconography design guideline")," ","and for a full list of icons available, visit the"," ",Object(o.createElement)("a",{href:"/icons",title:"Icons"},"Icons page"),"."),Object(o.createElement)(s.a,{exampleOnly:!0},Object(g.f)(l.b,"default")),j({id:"About-Icons"},"About Icons"),E({},"Five separate SVG sprites are used to create icons — ",y({href:"/icons/#action"},"action"),", ",y({href:"/icons/#custom"},"custom"),", ",y({href:"/icons/#doctype"},"doctype"),", ",y({href:"/icons/#standard"},"standard ")," and ",y({href:"/icons/#utility"},"utility"),". Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the ",y({href:"/icons/"},"icon page"),".)"),j({id:"Accessibility"},"Accessibility"),E({},"Icons require a containing element for two reasons:"),w({},x({},"If assistive text is required, the containing element should contain both the icon and a ",v({},"<span>")," with hidden assistive text describing the icon using the ",v({},"slds-assistive-text")," class."),x({},"If the icon is used without a visible, descriptive label, a ",v({},"title")," attribute is needed on the containing element. The ",v({},"title")," should describe the icon.")),E({},"If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required."),E({},"The containing element must have the ",v({},"slds-icon_container")," class."),j({id:"Default"},"Default"),Object(o.createElement)(s.a,null,Object(g.f)(l.b,"default")),S({id:"Structure-and-Implementation"},"Structure and Implementation"),E({},"An icon must have a containing element with the class ",v({},"slds-icon_container")," for ",y({href:"#Accessibility"},"accessibility support"),". Inside the container, a ",v({},"<svg>")," with the class ",v({},"slds-icon")," contains the reference to your icon and a ",v({},"<span>")," with the class ",v({},"slds-assistive-text")," contains your hidden assistive text that describes the icon. Be sure to read the ",y({href:"#Accessibility"},"accessibility section")," to know when to use assistive text, the ",v({},"title")," attribute, or when neither is needed."),E({},"When placing the icon code into your page, customize the path in the ",v({},"use")," attribute of the ",v({},"svg")," to the proper path and icon name for your specific icon. For example, the ",O({},"case")," icon in the ",O({},"standard")," sprite would have a path like this:"),Object(o.createElement)(c.a,{toggleCode:!1},Object(o.createElement)("svg",{"aria-hidden":"true",className:"slds-icon",title:"when needed"},Object(o.createElement)("use",{xlinkHref:"/assets/icons/standard-sprite/svg/symbols.svg#case"}))),E({},"If an icon has more than one word in the name, it should be included in the ",v({},"use")," attribute with the underscore separator as shown on the icon page. For example: log_a_call."),E({},"You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see ",Object(o.createElement)("a",{href:"/platforms/visualforce"},"the Visualforce tutorial"),". If you’re using ",Object(o.createElement)("a",{href:"/platforms/lightning"}," Lightning components, see this documentation"),"."),w({},x({},"You can access the SVG sprites by downloading the entire ",y({href:"/resources/downloads"},"CSS Framework or just the icons"),". To include a sprite in your application, the recommended method is to place it into the page as the first element inside the ",v({},"body")," element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprite icon, add the tiny ",y({href:"https://github.com/jonathantneal/svg4everybody"},"SVG for Everybody")," script for Internet Explorer."),x({},"When placed into the ",v({},"body"),", the SVG sprite takes up space in the page. Use either ",v({},"display:none")," or ",v({},"position:absolute")," and set both the width and height to zero.")),j({id:"Types"},"Types"),E({},"All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility."),S({id:"Action"},"Action"),E({},"To view all available action icons, see ",y({href:"/icons/#action"},"action icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(d.a,null)),S({id:"Custom"},"Custom"),E({},"Custom icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available custom icons, see ",y({href:"/icons/#custom"},"custom icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(p,null)),S({id:"Doctype"},"Doctype"),E({},"To view all available doctype icons, see ",y({href:"/icons/#doctype"},"doctype icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(m.a,null)),S({id:"Standard"},"Standard"),E({},"Standard icons have a rounded square shape and use a class on the container for the background color."),E({},"To view all available standard icons, see ",y({href:"/icons/#standard"},"standard icons"),"."),Object(o.createElement)(s.a,null,Object(o.createElement)(b.a,null)),j({id:"Color"},"Color"),S({id:"Default-2"},"Default"),E({},"To change the fill of an icon to the default text color, add the ",v({},"slds-icon-text-default")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.b,"default")),S({id:"Current-Color"},"Current Color"),E({},"To change the fill of an icon to match the current color of its parent, add the ",v({},"slds-current-color")," class to the icon's container. This class utilizes the CSS ",v({},"currentColor")," value."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"currentColor")),S({id:"Success"},"Success"),E({},"To change the fill of an icon to the success text color, add the ",v({},"slds-icon-text-success")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"text-warning")),S({id:"Warning"},"Warning"),E({},"To change the fill of an icon to the warning text color, add the ",v({},"slds-icon-text-warning")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"text-warning")),S({id:"Error"},"Error"),E({},"To change the fill of an icon to the error text color, add the ",v({},"slds-icon-text-error")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"text-error")),S({id:"Light"},"Light"),E({},"To change the fill of an icon to the light text color, add the ",v({},"slds-icon-text-light")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"light")),j({id:"Size"},"Size"),E({},"Size modifiers can be added to the ",v({},"slds-icon")," element on all types of icons."),S({id:"XX-Small"},"XX-Small"),E({},"To change the size of an icon to xx-small, add the ",v({},"slds-icon_xx-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-xxsmall")),S({id:"X-Small"},"X-Small"),E({},"To change the size of an icon to x-small, add the ",v({},"slds-icon_x-small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-xsmall")),S({id:"Small"},"Small"),E({},"To change the size of an icon to small, add the ",v({},"slds-icon_small")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-small")),S({id:"Large"},"Large"),E({},"To change the size of an icon to large, add the ",v({},"slds-icon_large")," class to the icon."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"size-large")),j({id:"Right-to-Left-Support"},"Right-to-Left Support"),E({},"To horizontally flip an icon to support bidirectionality (reading from right to left), use the ",v({},"slds-icon_flip")," class with the ",v({},"slds-icon_container")," class, and setting the ",v({},"dir")," attribute on any parent container, most often the parent component or on ",v({},"html")," itself."),Object(o.createElement)(s.a,null,Object(g.f)(l.c,"rtl-flipped")),j({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(r.a,{name:"icons",type:"component"}))},T=function(){return Object(a.a)(_())}}});

package/__internal/chunked/docs/ui/components/illustration/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/illustration/docs.mdx.js"]=function(e){function t(t){for(var a,o,r=t[0],i=t[1],s=t[2],u=0,d=[];u<r.length;u++)o=r[u],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(m&&m(t);d.length;)d.shift()();return c.push.apply(c,s\|\|[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],a=!0,r=1;r<n.length;r++){var i=n[r];0!==l[i]&&(a=!1)}a&&(c.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={43:0},c=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var m=i;return c.push([583,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},583:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return L}));var a=n(0),l=n(4),c=n(2),o=n(25),r=(n(15),n(14)),i=n(62),s=n(142),m=n(123),u=n(84),d=n(80),b=n(31),O=l.c.code,h=l.c.h2,j=l.c.h3,E=l.c.li,p=l.c.p,g=l.c.strong,f=l.c.ul,y=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way."),Object(a.createElement)(c.a,{exampleOnly:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"About-Illustration"},"About Illustration"),p({},"Illustrations should be used within other components, such as cards, to express the state of the component. An illustration image must be accompanied with heading text inline."),j({id:"Accessibility"},"Accessibility"),p({},"Each SVG tag requires an ",O({},'aria-hidden="true"')," attribute."),Object(a.createElement)(o.a,{toggleCode:!1},Object(a.createElement)("svg",{viewBox:"0 0 483 218","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg"},"...")),h({id:"Base"},"Base"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Using-Empty-States"},"Using Empty States"),p({},"Empty states are used when an element doesn’t have content to display to the user. An empty state is an opportunity to engage and delight users. The empty state should tell users what it’s for and why they’re seeing it. Effective empty states also tell users what they can do next. Illustrations should show data or system state (empty for instance), but not user input validation messaging."),p({},"Empty states have many causes, such as:"),f({},E({},"There’s ",g({},"no data")," the user can see."),E({},"A feature hasn’t been ",g({},"configured yet"),"."),E({},"There’s been an ",g({},"error"),"."),E({},"Empty area of the screen intentionally ",g({},"left blank"),".")),p({},"Use empty states to:"),f({},E({},"Prevent the application from feeling lifeless and empty."),E({},"Help users onboard an application and/or motivate them to interact with the application."),E({},"Warn the user when data is unavailable (because of a system error or otherwise).")),h({id:"With-Message-Body"},"With Message Body"),p({},"Illustrations can include message body text below the heading to further communicate the state of the component. However, illustrations cannot have a message body without heading text."),Object(a.createElement)(r.a,{type:"note",header:"Design Note"},Object(a.createElement)("p",null,"To ensure the readability of your text, we recommend limiting each line to 66 characters.")),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),h({id:"Large-Illustrations"},"Large Illustrations"),p({},"The base illustration component is typically used within smaller components and has a ",O({},"max-width")," of ",O({},"300px")," and a ",O({},"max-height")," of ",O({},"200px"),". However, there are some cases where it can be used in a larger context."),p({},"For these situations, utilize the modifier ",O({},".slds-illustration_large"),". This will increase the ",O({},"max-width")," of the image to ",O({},"600px")," and the ",O({},"max-height")," to ",O({},"400px"),"."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,{large:!0},Object(a.createElement)(i.a,null),Object(a.createElement)("h3",{className:"slds-illustration__header slds-text-heading_medium"},"Lorem ipsum dolor"),Object(a.createElement)("p",{className:"slds-text-body_regular"},"Lorem ipsum dolor sit amet, consectetur"))),h({id:"Informational"},"Informational"),p({},"Common Scenarios:"),f({},E({},"Setup needed"),E({},"Maintenance")),j({id:"Going-Camping"},"Going Camping"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Maintenance"},"Maintenance"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"No-Data"},"No Data"),p({},"Common Scenarios:"),f({},E({},"No data/information"),E({},"No history/feeds")),j({id:"Desert"},"Desert"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Open-Road"},"Open Road"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Error"},"Error"),p({},"Common Scenarios:"),f({},E({},"No access to a page"),E({},"No connection"),E({},"Page not available in Lightning"),E({},"Page not available"),E({},"Walkthrough not available")),j({id:"No-Access"},"No Access"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Connection"},"No Connection"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Not-Available-In-Lightning"},"Not Available In Lightning"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Page-Not-Available"},"Page Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Walkthrough-Not-Available"},"Walkthrough Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Custom"},"Custom"),j({id:"Fishing-Deals"},"Fishing Deals"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Lake-Mountain"},"Lake Mountain"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Events"},"No Events"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Task"},"No Task"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Setup"},"Setup"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Miscellaneous"},"Miscellaneous"),j({id:"Gone-Fishing"},"Gone Fishing"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Access-2"},"No Access 2"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Content"},"No Content"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Preview"},"No Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Preview"},"Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Research"},"Research"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.f,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"With-Call-to-Action"},"With Call to Action"),p({},"A call to action may be used to help users move from an empty state to a situation where the page, component, or element is now useful to them."),p({},"In most cases, one call to action will be enough. When using one call to action, place the call to action below the message text."),j({id:"One-Call-to-Action-Link"},"One Call to Action - Link"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button"},"One Call to Action - Button"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button-Brand"},"One Call to Action - Button Brand"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button slds-button_brand"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"Two-Calls-to-Action"},"Two Calls to Action"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur",secondaryCTA:"Learn More"})))),h({id:"Text-Only"},"Text Only"),p({},"In certain use cases, it may be appropriate to just use text to communicate states."),j({id:"Heading-and-Message"},"Heading and Message"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),j({id:"Heading-Only"},"Heading Only"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Message-Only"},"Message Only"),p({},"When an image is not present, a message only variant may be used."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{message:"Lorem ipsum dolor sit amet, consectetur"}))))},L=function(){return Object(l.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/illustration/docs.mdx.js"]=function(e){function t(t){for(var a,o,r=t[0],i=t[1],s=t[2],u=0,d=[];u<r.length;u++)o=r[u],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&d.push(l[o][0]),l[o]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a]);for(m&&m(t);d.length;)d.shift()();return c.push.apply(c,s\|\|[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],a=!0,r=1;r<n.length;r++){var i=n[r];0!==l[i]&&(a=!1)}a&&(c.splice(t--,1),e=o(o.s=n[0]))}return e}var a={},l={43:0},c=[];function o(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=a,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)o.d(n,a,function(t){return e[t]}.bind(null,a));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var m=i;return c.push([584,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},584:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return y})),n.d(t,"getContents",(function(){return L}));var a=n(0),l=n(4),c=n(2),o=n(26),r=(n(15),n(14)),i=n(63),s=n(143),m=n(124),u=n(85),d=n(81),b=n(32),O=l.c.code,h=l.c.h2,j=l.c.h3,E=l.c.li,p=l.c.p,g=l.c.strong,f=l.c.ul,y=function(){return Object(a.createElement)(l.b,{},Object(a.createElement)("div",{className:"doc lead"},"An illustration is an image and inline text that work in tandem to communicate a state in a more friendly way."),Object(a.createElement)(c.a,{exampleOnly:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"About-Illustration"},"About Illustration"),p({},"Illustrations should be used within other components, such as cards, to express the state of the component. An illustration image must be accompanied with heading text inline."),j({id:"Accessibility"},"Accessibility"),p({},"Each SVG tag requires an ",O({},'aria-hidden="true"')," attribute."),Object(a.createElement)(o.a,{toggleCode:!1},Object(a.createElement)("svg",{viewBox:"0 0 483 218","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg"},"...")),h({id:"Base"},"Base"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Using-Empty-States"},"Using Empty States"),p({},"Empty states are used when an element doesn’t have content to display to the user. An empty state is an opportunity to engage and delight users. The empty state should tell users what it’s for and why they’re seeing it. Effective empty states also tell users what they can do next. Illustrations should show data or system state (empty for instance), but not user input validation messaging."),p({},"Empty states have many causes, such as:"),f({},E({},"There’s ",g({},"no data")," the user can see."),E({},"A feature hasn’t been ",g({},"configured yet"),"."),E({},"There’s been an ",g({},"error"),"."),E({},"Empty area of the screen intentionally ",g({},"left blank"),".")),p({},"Use empty states to:"),f({},E({},"Prevent the application from feeling lifeless and empty."),E({},"Help users onboard an application and/or motivate them to interact with the application."),E({},"Warn the user when data is unavailable (because of a system error or otherwise).")),h({id:"With-Message-Body"},"With Message Body"),p({},"Illustrations can include message body text below the heading to further communicate the state of the component. However, illustrations cannot have a message body without heading text."),Object(a.createElement)(r.a,{type:"note",header:"Design Note"},Object(a.createElement)("p",null,"To ensure the readability of your text, we recommend limiting each line to 66 characters.")),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),h({id:"Large-Illustrations"},"Large Illustrations"),p({},"The base illustration component is typically used within smaller components and has a ",O({},"max-width")," of ",O({},"300px")," and a ",O({},"max-height")," of ",O({},"200px"),". However, there are some cases where it can be used in a larger context."),p({},"For these situations, utilize the modifier ",O({},".slds-illustration_large"),". This will increase the ",O({},"max-width")," of the image to ",O({},"600px")," and the ",O({},"max-height")," to ",O({},"400px"),"."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,{large:!0},Object(a.createElement)(i.a,null),Object(a.createElement)("h3",{className:"slds-illustration__header slds-text-heading_medium"},"Lorem ipsum dolor"),Object(a.createElement)("p",{className:"slds-text-body_regular"},"Lorem ipsum dolor sit amet, consectetur"))),h({id:"Informational"},"Informational"),p({},"Common Scenarios:"),f({},E({},"Setup needed"),E({},"Maintenance")),j({id:"Going-Camping"},"Going Camping"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Maintenance"},"Maintenance"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(s.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"No-Data"},"No Data"),p({},"Common Scenarios:"),f({},E({},"No data/information"),E({},"No history/feeds")),j({id:"Desert"},"Desert"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Open-Road"},"Open Road"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(m.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Error"},"Error"),p({},"Common Scenarios:"),f({},E({},"No access to a page"),E({},"No connection"),E({},"Page not available in Lightning"),E({},"Page not available"),E({},"Walkthrough not available")),j({id:"No-Access"},"No Access"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Connection"},"No Connection"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Not-Available-In-Lightning"},"Not Available In Lightning"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Page-Not-Available"},"Page Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Walkthrough-Not-Available"},"Walkthrough Not Available"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(u.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Custom"},"Custom"),j({id:"Fishing-Deals"},"Fishing Deals"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Lake-Mountain"},"Lake Mountain"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Events"},"No Events"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Task"},"No Task"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Setup"},"Setup"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(i.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"Miscellaneous"},"Miscellaneous"),j({id:"Gone-Fishing"},"Gone Fishing"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.a,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Access-2"},"No Access 2"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.b,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Content"},"No Content"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.c,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"No-Preview"},"No Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Preview"},"Preview"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.e,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Research"},"Research"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(d.f,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),h({id:"With-Call-to-Action"},"With Call to Action"),p({},"A call to action may be used to help users move from an empty state to a situation where the page, component, or element is now useful to them."),p({},"In most cases, one call to action will be enough. When using one call to action, place the call to action below the message text."),j({id:"One-Call-to-Action-Link"},"One Call to Action - Link"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button"},"One Call to Action - Button"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"One-Call-to-Action-Button-Brand"},"One Call to Action - Button Brand"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{button:"slds-button slds-button_brand"},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"})))),j({id:"Two-Calls-to-Action"},"Two Calls to Action"),Object(a.createElement)(c.a,{demoStyles:"width: 400px;"},Object(a.createElement)(b.b,{link:!0},Object(a.createElement)(b.a,null,Object(a.createElement)(i.d,null),Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur",secondaryCTA:"Learn More"})))),h({id:"Text-Only"},"Text Only"),p({},"In certain use cases, it may be appropriate to just use text to communicate states."),j({id:"Heading-and-Message"},"Heading and Message"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor",message:"Lorem ipsum dolor sit amet, consectetur"}))),j({id:"Heading-Only"},"Heading Only"),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{heading:"Lorem ipsum dolor"}))),j({id:"Message-Only"},"Message Only"),p({},"When an image is not present, a message only variant may be used."),Object(a.createElement)(c.a,null,Object(a.createElement)(b.a,null,Object(a.createElement)(b.c,{message:"Lorem ipsum dolor sit amet, consectetur"}))))},L=function(){return Object(l.a)(y())}}});