@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 13.2 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/showcase/./ui/components/tabs/base/example.jsx.js"]=function(e){function t(t){for(var n,s,o=t[0],i=t[1],m=t[2],d=0,u=[];d<o.length;d++)s=o[d],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&u.push(l[s][0]),l[s]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(c&&c(t);u.length;)u.shift()();return r.push.apply(r,m||[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],n=!0,o=1;o<a.length;o++){var i=a[o];0!==l[i]&&(n=!1)}n&&(r.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},l={144:0,6:0,13:0,14:0,22:0,24:0,26:0,36:0,37:0,56:0,72:0,73:0,79:0,93:0,94:0,96:0,97:0,98:0,103:0,104:0,112:0,117:0,119:0,123:0,125:0,128:0,132:0,134:0,136:0,137:0,138:0,141:0,143:0,146:0,147:0,148:0,151:0,155:0,158:0},r=[];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 o=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],i=o.push.bind(o);o.push=t,o=o.slice();for(var m=0;m<o.length;m++)t(o[m]);var c=i;return r.push([600,0]),a()}({0:function(e,t){e.exports=React},14:function(e,t){e.exports=ReactDOM},600:function(e,t,a){"use strict";a.r(t),a.d(t,"TabsDefault",(function(){return b})),a.d(t,"TabsWithNestedScopedTabs",(function(){return E})),a.d(t,"TabsOverflow",(function(){return f})),a.d(t,"TabsOverflowIcons",(function(){return I})),a.d(t,"TabsWithCards",(function(){return T})),a.d(t,"TabsWithError",(function(){return v})),a.d(t,"TabsMedium",(function(){return y})),a.d(t,"TabsLarge",(function(){return _})),a.d(t,"TabsWithHeading",(function(){return C})),a.d(t,"states",(function(){return O})),a.d(t,"examples",(function(){return N}));var n=a(0),l=a.n(n),r=a(1),s=a.n(r),o=a(24),i=a(26),m=a(9),c=a(154),d=a(15),u=a(347),h=a(12),b=function(e){return l.a.createElement(o.a,{selectedIndex:e.selectedIndex},l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};b.propTypes={selectedIndex:s.a.number,itemOneContent:s.a.node},b.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var E=function(){return l.a.createElement(b,{itemOneContent:l.a.createElement(u.TabsScoped,null)})},f=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(o.a,null,l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(o.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(o.a.Item,{title:"Item Five",id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(o.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(c.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(p,null)))))},I=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(o.a,null,l.a.createElement(o.a.Item,{title:"Opportunities",leftIcon:l.a.createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(o.a.Item,{title:"Cases",leftIcon:l.a.createElement(i.StandardIcon,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(o.a.Item,{title:"Products",leftIcon:l.a.createElement(i.StandardIcon,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(o.a.Item,{title:"Price Books",leftIcon:l.a.createElement(i.StandardIcon,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content")),l.a.createElement(o.a.Item,{title:"Contacts",leftIcon:l.a.createElement(i.StandardIcon,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},l.a.createElement("h2",null,"Item Five Content")),l.a.createElement(o.a.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},l.a.createElement(c.a,{label:"More",type:"tabs",flavor:"default",isOpen:!0},l.a.createElement(w,null)))))},p=function(){return l.a.createElement(d.Menu,{className:"slds-dropdown_right"},l.a.createElement(d.MenuList,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(d.MenuItem,{title:"Accounts"},"Accounts"),l.a.createElement(d.MenuItem,{title:"Approvals"},"Approvals"),l.a.createElement(d.MenuItem,{title:"Lead"},"Leads")))},w=function(){return l.a.createElement(d.Menu,{className:"slds-dropdown_right"},l.a.createElement(d.MenuList,{className:"slds-dropdown_length-with-icon-10"},l.a.createElement(d.MenuItem,{title:"Accounts"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Accounts"))),l.a.createElement(d.MenuItem,{title:"Approvals"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Approvals"))),l.a.createElement(d.MenuItem,{title:"Lead"},l.a.createElement("span",{className:"slds-media slds-media_center"},l.a.createElement("span",{className:"slds-media__figure"},l.a.createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),l.a.createElement("span",{className:"slds-media__body"},"Leads")))))},T=function(){return l.a.createElement(o.a,{isCard:!0,selectedIndex:0},l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement(h.d,null,l.a.createElement(h.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(h.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(h.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(h.d,null,l.a.createElement(h.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(h.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to show how styling is removed when cards are nested inside."),l.a.createElement(h.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(h.d,{hasCardBoundary:!0},l.a.createElement(h.c,{symbol:"contact",title:"Card Header",href:"#",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),l.a.createElement(h.a,{hasPadding:!0},"This is a card inside an ",l.a.createElement("code",{className:"doc"},".slds-tabs_card")," ","to illustrate how",l.a.createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),l.a.createElement(h.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},v=function(){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(o.a,null,l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2",rightIcon:l.a.createElement(m.UtilityIcon,{className:"slds-icon_x-small slds-icon-text-error",symbol:"error",title:"This item has an error",assistiveText:"This item has an error"})},l.a.createElement("h2",null,"Item Two Content - Has Error")),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content")),l.a.createElement(o.a.Item,{title:"Item Four",id:"tab-default-4"},l.a.createElement("h2",null,"Item Four Content"))))},y=function(e){return l.a.createElement(o.a,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};y.propTypes={showHeader:s.a.bool,withHeader:s.a.bool},y.defaultProps={showHeader:!1,withHeader:!1};var _=function(e){return l.a.createElement(o.a,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};_.propTypes={showHeader:s.a.bool,withHeader:s.a.bool},_.defaultProps={showHeader:!1,withHeader:!1};var C=function(e){return l.a.createElement("div",{className:"demo-only",style:{height:"12rem"}},l.a.createElement(o.a,{withHeader:e.withHeader,showHeader:e.showHeader},l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},l.a.createElement("h2",null,"Item One Content")),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},l.a.createElement("h2",null,"Item Two Content")),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},l.a.createElement("h2",null,"Item Three Content"))))};C.propTypes={showHeader:s.a.bool,withHeader:s.a.bool},C.defaultProps={showHeader:!0,withHeader:!0},t.default=l.a.createElement(b,null);var O=[{id:"selected",label:"Item Two Selected",element:l.a.createElement(b,{selectedIndex:1})}],N=[{id:"size-medium",label:"Size - Medium",element:l.a.createElement(y,null)},{id:"size-medium-with-header",label:"Size - Medium - With Header",element:l.a.createElement(y,{withHeader:!0,showHeader:!0})},{id:"size-large",label:"Size - Large",element:l.a.createElement(_,null)},{id:"size-large-with-header",label:"Size - Large - With Header",element:l.a.createElement(_,{withHeader:!0,showHeader:!0})},{id:"overflow",label:"Overflowing Items",element:l.a.createElement(f,null)},{id:"overflow",label:"Overflowing Items with Icons",element:l.a.createElement(I,null)},{id:"error",label:"Tabs With Error inside of content",element:l.a.createElement(v,null)},{id:"nested",label:"With Nested Scoped Tabs",element:l.a.createElement(E,null)},{id:"with-header",label:"With Header",element:l.a.createElement(C,null)},{id:"with-invisible-header",label:"With Invisible Header",element:l.a.createElement(C,{showHeader:!1})},{id:"card-look",label:"Tab Card-look",element:l.a.createElement(T,null)},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --sds-c-tabs-list-sizing-border: 5px;\n --sds-c-tabs-list-color-border: red;\n --sds-c-tabs-item-color-border-hover: pink;\n --sds-c-tabs-item-color-border-active: purple;\n --sds-c-tabs-item-text-color: red;\n --sds-c-tabs-item-text-color-active: purple;\n ",storybookStyles:!0,element:l.a.createElement(o.a,null,l.a.createElement(o.a.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),l.a.createElement(o.a.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),l.a.createElement(o.a.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))}]}});