@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 13.6 kB
JavaScript
var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},8123:function(e,t,n){n.d(t,{TabsScoped:function(){return s}});var l=n(1594),a=n.n(l),r=n(2537),s=(n(807),n(4760),function(e){return a().createElement(r.A,{flavor:"scoped",selectedIndex:e.selectedIndex||0},a().createElement(r.A.Item,{title:"Item One",id:"tab-scoped-1"},"Item One Content"),a().createElement(r.A.Item,{title:"Item Two",id:"tab-scoped-2"},"Item Two Content"),a().createElement(r.A.Item,{title:"Item Three",id:"tab-scoped-3"},"Item Three Content"))})},9520:function(e,t,n){n.r(t),n.d(t,{TabsDefault:function(){return h},TabsLarge:function(){return y},TabsMedium:function(){return A},TabsOverflow:function(){return f},TabsOverflowIcons:function(){return I},TabsWithCards:function(){return T},TabsWithError:function(){return v},TabsWithHeading:function(){return C},TabsWithNestedScopedTabs:function(){return E},examples:function(){return O},states:function(){return _}});var l=n(1594),a=n.n(l),r=n(4187),s=n.n(r),o=n(2537),i=n(8522),m=n(538),c=n(807),d=n(4760),u=n(8123),b=n(3011),h=function(e){return a().createElement(o.A,{selectedIndex:e.selectedIndex},a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},e.itemOneContent),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};h.propTypes={selectedIndex:s().number,itemOneContent:s().node},h.defaultProps={selectedIndex:0,itemOneContent:"Item One Content"};var E=function(){return a().createElement(h,{itemOneContent:a().createElement(u.TabsScoped,null)})},f=function(){return a().createElement("div",{className:"demo-only",style:{height:"12rem"}},a().createElement(o.A,null,a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},a().createElement("h2",null,"Item One Content")),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},a().createElement("h2",null,"Item Two Content")),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},a().createElement("h2",null,"Item Three Content")),a().createElement(o.A.Item,{title:"Item Four",id:"tab-default-4"},a().createElement("h2",null,"Item Four Content")),a().createElement(o.A.Item,{title:"Item Five",id:"tab-default-5"},a().createElement("h2",null,"Item Five Content")),a().createElement(o.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},a().createElement(c.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},a().createElement(w,null)))))},I=function(){return a().createElement("div",{className:"demo-only",style:{height:"12rem"}},a().createElement(o.A,null,a().createElement(o.A.Item,{title:"Opportunities",leftIcon:a().createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"opportunity",title:"Opportunities",assistiveText:!1}),id:"tab-default-1"},a().createElement("h2",null,"Item One Content")),a().createElement(o.A.Item,{title:"Cases",leftIcon:a().createElement(i.StandardIcon,{className:"slds-icon_small",title:"Cases",symbol:"case",assistiveText:!1}),id:"tab-default-2"},a().createElement("h2",null,"Item Two Content")),a().createElement(o.A.Item,{title:"Products",leftIcon:a().createElement(i.StandardIcon,{className:"slds-icon_small",title:"Products",symbol:"product",assistiveText:!1}),id:"tab-default-3"},a().createElement("h2",null,"Item Three Content")),a().createElement(o.A.Item,{title:"Price Books",leftIcon:a().createElement(i.StandardIcon,{className:"slds-icon_small",title:"Price Books",symbol:"pricebook",assistiveText:!1}),id:"tab-default-4"},a().createElement("h2",null,"Item Four Content")),a().createElement(o.A.Item,{title:"Contacts",leftIcon:a().createElement(i.StandardIcon,{className:"slds-icon_small",title:"Contacts",symbol:"contact",assistiveText:!1}),id:"tab-default-5"},a().createElement("h2",null,"Item Five Content")),a().createElement(o.A.ItemOverflow,{title:"More Tabs",id:"tab-default-8"},a().createElement(c.y,{label:"More",type:"tabs",flavor:"default",isOpen:!0},a().createElement(p,null)))))},w=function(){return a().createElement(d.Menu,{className:"slds-dropdown_right"},a().createElement(d.MenuList,{className:"slds-dropdown_length-with-icon-10"},a().createElement(d.MenuItem,{title:"Accounts"},"Accounts"),a().createElement(d.MenuItem,{title:"Approvals"},"Approvals"),a().createElement(d.MenuItem,{title:"Lead"},"Leads")))},p=function(){return a().createElement(d.Menu,{className:"slds-dropdown_right"},a().createElement(d.MenuList,{className:"slds-dropdown_length-with-icon-10"},a().createElement(d.MenuItem,{title:"Accounts"},a().createElement("span",{className:"slds-media slds-media_center"},a().createElement("span",{className:"slds-media__figure"},a().createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"account",assistiveText:!1})),a().createElement("span",{className:"slds-media__body"},"Accounts"))),a().createElement(d.MenuItem,{title:"Approvals"},a().createElement("span",{className:"slds-media slds-media_center"},a().createElement("span",{className:"slds-media__figure"},a().createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"approval",assistiveText:!1})),a().createElement("span",{className:"slds-media__body"},"Approvals"))),a().createElement(d.MenuItem,{title:"Lead"},a().createElement("span",{className:"slds-media slds-media_center"},a().createElement("span",{className:"slds-media__figure"},a().createElement(i.StandardIcon,{className:"slds-icon_small",symbol:"lead",assistiveText:!1})),a().createElement("span",{className:"slds-media__body"},"Leads")))))},T=function(){return a().createElement(o.A,{isCard:!0,selectedIndex:0},a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},a().createElement(b.Ay,null,a().createElement(b.aR,{symbol:"contact",title:"Card Header",href:"#",action:a().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),a().createElement(b.bw,{hasPadding:!0},"This is a card inside an ",a().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),a().createElement(b.wL,null,"View All ",a().createElement("span",{className:"slds-assistive-text"},"Contacts"))),a().createElement(b.Ay,null,a().createElement(b.aR,{symbol:"contact",title:"Card Header",href:"#",action:a().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),a().createElement(b.bw,{hasPadding:!0},"This is a card inside an ",a().createElement("code",{className:"doc"},".slds-tabs_card")," to show how styling is removed when cards are nested inside."),a().createElement(b.wL,null,"View All ",a().createElement("span",{className:"slds-assistive-text"},"Contacts"))),a().createElement(b.Ay,{hasCardBoundary:!0},a().createElement(b.aR,{symbol:"contact",title:"Card Header",href:"#",action:a().createElement("button",{className:"slds-button slds-button_neutral"},"New"),onClick:function(e){return e.preventDefault()}}),a().createElement(b.bw,{hasPadding:!0},"This is a card inside an ",a().createElement("code",{className:"doc"},".slds-tabs_card")," to illustrate how",a().createElement("code",{className:"doc"},".slds-card_boundary")," adds a rounded border when desired."),a().createElement(b.wL,null,"View All ",a().createElement("span",{className:"slds-assistive-text"},"Contacts")))),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))},v=function(){return a().createElement("div",{className:"demo-only",style:{height:"12rem"}},a().createElement(o.A,null,a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},a().createElement("h2",null,"Item One Content")),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2",rightIcon: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"})},a().createElement("h2",null,"Item Two Content - Has Error")),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},a().createElement("h2",null,"Item Three Content")),a().createElement(o.A.Item,{title:"Item Four",id:"tab-default-4"},a().createElement("h2",null,"Item Four Content"))))},A=function(e){return a().createElement(o.A,{size:"medium",withHeader:e.withHeader,showHeader:e.showHeader},a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};A.propTypes={showHeader:s().bool,withHeader:s().bool},A.defaultProps={showHeader:!1,withHeader:!1};var y=function(e){return a().createElement(o.A,{size:"large",withHeader:e.withHeader,showHeader:e.showHeader},a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))};y.propTypes={showHeader:s().bool,withHeader:s().bool},y.defaultProps={showHeader:!1,withHeader:!1};var C=function(e){return a().createElement("div",{className:"demo-only",style:{height:"12rem"}},a().createElement(o.A,{withHeader:e.withHeader,showHeader:e.showHeader},a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},a().createElement("h2",null,"Item One Content")),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},a().createElement("h2",null,"Item Two Content")),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},a().createElement("h2",null,"Item Three Content"))))};C.propTypes={showHeader:s().bool,withHeader:s().bool},C.defaultProps={showHeader:!0,withHeader:!0},t.default=a().createElement(h,null);var _=[{id:"selected",label:"Item Two Selected",element:a().createElement(h,{selectedIndex:1})}],O=[{id:"size-medium",label:"Size - Medium",element:a().createElement(A,null)},{id:"size-medium-with-header",label:"Size - Medium - With Header",element:a().createElement(A,{withHeader:!0,showHeader:!0})},{id:"size-large",label:"Size - Large",element:a().createElement(y,null)},{id:"size-large-with-header",label:"Size - Large - With Header",element:a().createElement(y,{withHeader:!0,showHeader:!0})},{id:"overflow",label:"Overflowing Items",element:a().createElement(f,null)},{id:"overflow-icons",label:"Overflowing Items with Icons",element:a().createElement(I,null)},{id:"error",label:"Tabs With Error inside of content",element:a().createElement(v,null)},{id:"nested",label:"With Nested Scoped Tabs",element:a().createElement(E,null)},{id:"with-header",label:"With Header",element:a().createElement(C,null)},{id:"with-invisible-header",label:"With Invisible Header",element:a().createElement(C,{showHeader:!1})},{id:"card-look",label:"Tab Card-look",element: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:a().createElement(o.A,null,a().createElement(o.A.Item,{title:"Item One",id:"tab-default-1"},"Item One Content"),a().createElement(o.A.Item,{title:"Item Two",id:"tab-default-2"},"Item Two Content"),a().createElement(o.A.Item,{title:"Item Three",id:"tab-default-3"},"Item Three Content"))}]}},n={};function l(e){var a=n[e];if(void 0!==a)return a.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,l),r.exports}l.m=t,l.amdO={},e=[],l.O=function(t,n,a,r){if(!n){var s=1/0;for(c=0;c<e.length;c++){n=e[c][0],a=e[c][1],r=e[c][2];for(var o=!0,i=0;i<n.length;i++)(!1&r||s>=r)&&Object.keys(l.O).every(function(e){return l.O[e](n[i])})?n.splice(i--,1):(o=!1,r<s&&(s=r));if(o){e.splice(c--,1);var m=a();void 0!==m&&(t=m)}}return t}r=r||0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[n,a,r]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=7148,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3135:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7148:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};l.O.j=function(t){return 0===e[t]};var t=function(t,n){var a,r,s=n[0],o=n[1],i=n[2],m=0;if(s.some(function(t){return 0!==e[t]})){for(a in o)l.o(o,a)&&(l.m[a]=o[a]);if(i)var c=i(l)}for(t&&t(n);m<s.length;m++)r=s[m],l.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return l.O(c)},n=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),l.nc=void 0;var a=l.O(void 0,[6790],function(){return l(9520)});a=l.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/tabs/base/example.jsx.js"]=a}();