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/trees/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/trees/docs.mdx.js"]=function(e){function t(t){for(var l,i,c=t[0],o=t[1],m=t[2],d=0,u=[];d<c.length;d++)i=c[d],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(l in o)Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l]);for(s&&s(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],l=!0,c=1;c<a.length;c++){var o=a[c];0!==n[o]&&(l=!1)}l&&(r.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},n={80:0},r=[];function i(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=l,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(a,l,function(t){return e[t]}.bind(null,l));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=c.push.bind(c);c.push=t,c=c.slice();for(var m=0;m<c.length;m++)t(c[m]);var s=o;return r.push([668,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},668:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return Y})),a.d(t,"getContents",(function(){return z}));var l=a(0),n=a.n(l),r=a(4),i=a(2),c=(a(25),a(14),a(37)),o=a(3),m=a.n(o),s=a(5),d=a.n(s),u=a(7),h=a(1);function b(e){return(b="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){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function E(e,t){for(var a=0;a<t.length;a++){var l=t[a];l.enumerable=l.enumerable\|\|!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}function L(e,t){return(L=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function g(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,l=v(e);if(t){var n=v(this).constructor;a=Reflect.construct(l,arguments,n)}else a=l.apply(this,arguments);return f(this,a)}}function f(e,t){return!t\|\|"object"!==b(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var T=function(e){var t=function(t){return e.termToMark?n.a.createElement("span",{dangerouslySetInnerHTML:{__html:(a=t,l=e.termToMark,a.replace(new RegExp(l,"gi"),(function(e){return"<mark>".concat(e,"</mark>")})))}}):n.a.createElement(n.a.Fragment,null,t);var a,l};return n.a.createElement("div",{className:d()("slds-tree__item",e.className)},n.a.createElement(u.b,{"aria-hidden":"true",assistiveText:"Expand ".concat(e.itemLabel),className:d()("slds-m-right_x-small",(!e.isBranch\|\|e.isDisabled)&&"slds-hidden"),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:"Expand ".concat(e.itemLabel)}),n.a.createElement("span",{className:"slds-has-flexi-truncate"},n.a.createElement("span",{className:"slds-tree__item-label slds-truncate",title:e.itemLabel},t(e.itemLabel)),e.metaTextLabel&&n.a.createElement("span",{className:"slds-tree__item-meta slds-truncate",title:e.metaTextLabel},n.a.createElement("span",{className:"slds-assistive-text"},":"),t(e.metaTextLabel))),e.children)};T.displayName="TreeItem",T.propTypes={children:m.a.node,isBranch:m.a.bool,isDisabled:m.a.bool,itemLabel:m.a.string,metaTextLabel:m.a.string,termToMark:m.a.string},T.defaultProps={itemLabel:"Tree Item"};var y=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&&L(e,t)}(i,e);var t,a,l,r=g(i);function i(){return p(this,i),r.apply(this,arguments)}return t=i,(a=[{key:"getBranchAriaLabel",value:function(e,t){return t?e+": "+t:e}},{key:"render",value:function(){var e=this.props,t=e.ariaLevel,a=e.tabIndex,l=e.isBranch,r=e.isExpanded,i=e.isSelected,c=e.isDisabled,o=e.itemLabel,m=e.metaTextLabel;return n.a.createElement("li",{"aria-expanded":l?r\|\|!1:null,"aria-label":l?this.getBranchAriaLabel(o,m):null,"aria-level":t,"aria-selected":i,"aria-disabled":c,role:"treeitem",tabIndex:a},this.props.children)}}])&&E(t.prototype,a),l&&E(t,l),i}(l.Component);y.displayName="TreeListItem",y.propTypes={ariaLevel:m.a.number.isRequired,children:m.a.node.isRequired,isBranch:Object(h.b)("itemLabel",m.a.bool),isExpanded:Object(h.b)("isBranch",m.a.bool),isSelected:m.a.bool,itemLabel:m.a.string,metaTextLabel:Object(h.b)("itemLabel",m.a.string),tabIndex:m.a.number};var x=function(e){return n.a.createElement("h4",{className:"slds-tree__group-header",id:e.id},e.children)};x.displayName="TreeHeader",x.propTypes={children:m.a.node,id:m.a.string.isRequired};var B=function(e){return n.a.createElement("ul",{"aria-labelledby":e.headerId,className:"slds-tree",id:e.id,role:"tree"},e.children)};B.displayName="TreeList",B.propTypes={children:m.a.node,headerId:m.a.string,id:m.a.string};var w=function(e){return n.a.createElement("ul",{role:"group"},e.children)};w.displayName="TreeGroup",w.propTypes={children:m.a.node};var I=function(e){return n.a.createElement("div",{className:"slds-tree_container"},e.children)};I.displayName="TreeContainer",I.propTypes={children:m.a.node};var O=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};O.displayName="DefaultTree";var _=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};_.displayName="ExpandedTree";var S=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,isSelected:!0,tabIndex:0},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};S.displayName="SelectedTree";var k=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:2,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:3},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:3},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:3,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:3,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,{itemLabel:"Another Tree Item with Really Really Long Text That Should Truncate"})),n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:4,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:5},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:5},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:5},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:3},n.a.createElement(T,null)))))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};k.displayName="DeeplyNestedTree";var N=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};N.displayName="MetaTextTree";var j=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,{className:"slds-is-hovered"})),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};j.displayName="TreeWithItemHovered";var R=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,isDisabled:!0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,tabIndex:0,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};R.displayName="TreeWithItemDisabled";var M=a(8),D=a(16),F=a(11),H=n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(O,null))),A=[{id:"expanded",label:"Expanded",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(_,null)))},{id:"selected",label:"Item Selected",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(S,null)))},{id:"deep-nesting",label:"Deeply nested branches",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(k,null)))},{id:"metatext",label:"Metatext",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(N,null)))},{id:"item-hovered",label:"Item Hovered",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(j,null)))},{id:"item-disabled",label:"Item Disabled",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(R,null)))}],C=[{id:"filterable-tree",label:"Fliterable Tree",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-m-bottom_small"},n.a.createElement(M.b,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},n.a.createElement(F.a,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),n.a.createElement(D.a,{"aria-controls":"tree-id",id:"filter-id",placeholder:"Quick Find",type:"search"}))),n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Components"),n.a.createElement(B,{headerId:"treeheading",id:"tree-id"},n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"lightning",tabIndex:0},n.a.createElement(T,{isBranch:!0,itemLabel:"lightning"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-button"},n.a.createElement(T,{itemLabel:"lightning-button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},n.a.createElement(T,{itemLabel:"lightning-checkbox-button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-radio-button"},n.a.createElement(T,{itemLabel:"lightning-radio-button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},n.a.createElement(T,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"ui"},n.a.createElement(T,{isBranch:!0,itemLabel:"ui"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:button"},n.a.createElement(T,{itemLabel:"ui:button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:checkboxButton"},n.a.createElement(T,{itemLabel:"ui:checkboxButton"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:radioButton"},n.a.createElement(T,{itemLabel:"ui:radioButton"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"},n.a.createElement(T,{isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))))))},{id:"filterabled-tree",label:"Flitered Tree",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-m-bottom_small"},n.a.createElement(M.b,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},n.a.createElement(F.a,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),n.a.createElement(D.a,{"aria-controls":"tree-id",defaultValue:"butto",id:"filter-id",placeholder:"Quick Find",type:"search"}))),n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Components"),n.a.createElement(B,{headerId:"treeheading",id:"tree-id"},n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"lightning",tabIndex:0},n.a.createElement(T,{isBranch:!0,itemLabel:"lightning"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-button"},n.a.createElement(T,{itemLabel:"lightning-button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},n.a.createElement(T,{itemLabel:"lightning-checkbox-button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-radio-button"},n.a.createElement(T,{itemLabel:"lightning-radio-button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"},n.a.createElement(T,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button",termToMark:"butto"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"ui"},n.a.createElement(T,{isBranch:!0,itemLabel:"ui"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:button"},n.a.createElement(T,{itemLabel:"ui:button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:checkboxButton"},n.a.createElement(T,{itemLabel:"ui:checkboxButton",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:radioButton"},n.a.createElement(T,{itemLabel:"ui:radioButton",termToMark:"butto"})))))))}],P=r.c.code,G=r.c.h2,W=r.c.h3,q=r.c.h4,J=r.c.li,U=r.c.p,K=r.c.strong,Q=r.c.ul,Y=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),Object(l.createElement)(i.a,{exampleOnly:!0},Object(h.f)(A,"selected")),G({id:"About-Trees"},"About Trees"),U({},"A tree is composed of two core elements ",P({},".slds-tree")," and ",P({},".slds-tree__item"),". The tree wrapper, the outermost parent ",P({},"ul"),", will receive the class ",P({},".slds-tree"),". This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter."),U({},"A tree will need helper classes added and removed to help structure the layout. Each child node list item needs an ",P({},"aria-level")," attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within."),U({},"Whenever the tree has a nested group, the nested ",P({},"ul")," element should receive the ARIA role ",P({},"group"),". The parent ",P({},'li[role="treeitem"]')," requires the ",P({},"aria-expanded")," attribute to be applied. Toggling ",P({},"aria-expanded")," to ",P({},"true")," or ",P({},"false")," will show or hide the child ",P({},"group"),". The parent ",P({},'li[role="treeitem"]')," also requires ",P({},"aria-label")," to be applied and set to the tree items text value, this ensures child groups are announced to screen readers as you interact with that branch."),U({},"Whenever a ",P({},'role="treeitem"')," node is selected, ",P({},'aria-selected="true"')," needs to be applied to display the selected styles."),U({},"In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute ",P({},"aria-expanded")," to the ",P({},"treeitem"),". ",P({},'aria-hidden="true"')," and ",P({},'tabindex="-1"')," must be placed on the toggle button."),U({},"Tree items can only contain text values, no actionable elements, apart from our toggle button, can be placed inside a Tree item."),U({},"Trees can only contain a single focusable tree item and ",P({},'tabindex="0"')," must be placed on the ",P({},'li[role="treeitem]')," that takes current focus. Every other actionable and non-actionable element must be made unfocused by adding ",P({},'tabindex="-1"')," or removing ",P({},"tabindex"),", respectively."),U({},"When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with ",P({},"slds-show")," and ",P({},"slds-hide")," if you intend to keep all of the content in the DOM."),U({},"You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional ",P({},"span")," within the treeitem with the class ",P({},"slds-tree__item-meta"),". We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. If adding metatext to a tree item with child nodes (i.e. a branch), be sure to update the ",P({},"aria-label")," to include the metatext. For example: ",P({},'aria-label="Tree Branch Label: Tree Branch Metatext"')),W({id:"Accessibility"},"Accessibility"),q({id:"Markup"},"Markup"),Q({},J({},P({},'role="tree"')," is placed on the ",P({},"ul")),J({},P({},'role="tree"')," element also has ",P({},"aria-labelledby")," applied which points to the trees heading element"),J({},P({},'role="treeitem"')," is placed on the tree ",P({},"li")," elements"),J({},P({},"aria-level")," is applied to ",P({},"treeitem")," elements to indicate their nesting depth"),J({},P({},"aria-expanded")," is applied to ",P({},"treeitem")," elements that have child tree nodes. It is set to ",P({},"true")," or ",P({},"false")),J({},P({},"aria-label")," is applied to ",P({},"treeitem")," elements that have child tree nodes. Be sure to add any metatext to the label, if applicable"),J({},P({},'aria-selected="true"')," is applied to ",P({},"treeitem")," elements that are selected"),J({},P({},'aria-disabled="true"')," is applied to ",P({},"treeitem")," elements that are disabled. They do not receive a ",P({},"tabindex"),"."),J({},P({},'tabindex="0"')," is applied to the ",P({},"treeitem")," that is in focus"),J({},P({},'role="group"')," is applied to child tree node containers, ",P({},"ul"))),q({id:"Interactions"},"Interactions"),Q({},J({},"Only a single action per tree item"),J({},"Only 1 focused item per Tree"),J({},"Actionable elements in a tree item are mouse only and should not be focusable, they should be presentational and should be hidden from screen readers and keyboard users"),J({},"Focus is placed on the entire ",P({},'li[role="treeitem"]'),". If that item has child items, focus must include those as well.")),q({id:"Keyboard-Navigation"},"Keyboard Navigation"),Q({},J({},"Clicking on a tree item creates a selection"),J({},P({},"Up")," and ",P({},"Down")," arrow keys move ",P({},":focus")," ",K({},"and")," ",P({},"aria-selected"),". Previous selections are cleared"),J({},P({},"Right")," arrow key to expand collapsed node."),J({},P({},"Left")," arrow key to collapse expanded node."),J({},P({},"Left")," arrow key on an end child node, collapses the group and moves ",P({},":focus")," and ",P({},"aria-selected")," to the parent ",P({},"treeitem")),J({},P({},"Enter")," performs the default action on an end tree item (if there is one)."),J({},P({},"Ctrl")," + ",P({},"Up")," and ",P({},"Ctrl")," + ",P({},"Down")," moves focus. Current selection is maintained"),J({},P({},"Ctrl")," + ",P({},"Space")," will add or remove the currently focused tree item to the selection")),W({id:"Filtering"},"Filtering"),U({},"When filtering a tree you should couple the tree with a search input. The search input will control the contents of the tree and as such should the attribute ",P({},"aria-controls")," added to it. The value of the ",P({},"aria-controls")," attribute should be the ID of the tree it controls. The search input should also be of type ",P({},"search"),"."),U({},"Upon typing in the input the tree should start filtering immediately, expanding all nodes that have matching tree items to display, and highlighting the search term in each of the matching items. The highlight is provided by wrapping the term in ",P({},"<mark />")," elements."),G({id:"Base"},"Base"),Object(l.createElement)(i.a,null,Object(h.f)(H)),W({id:"States"},"States"),q({id:"Expanded-Item"},"Expanded Item"),Object(l.createElement)(i.a,null,Object(h.f)(A,"expanded")),q({id:"Item-Selected"},"Item Selected"),Object(l.createElement)(i.a,null,Object(h.f)(A,"selected")),q({id:"Deeply-Nested-Branches"},"Deeply Nested Branches"),Object(l.createElement)(i.a,null,Object(h.f)(A,"deep-nesting")),q({id:"Item-with-Metatext"},"Item with Metatext"),Object(l.createElement)(i.a,null,Object(h.f)(A,"metatext")),q({id:"Item-Hovered"},"Item Hovered"),Object(l.createElement)(i.a,null,Object(h.f)(A,"item-hovered")),q({id:"Items-Disabled"},"Items Disabled"),Object(l.createElement)(i.a,null,Object(h.f)(A,"item-disabled")),G({id:"Examples"},"Examples"),W({id:"Filterable-Tree"},"Filterable Tree"),Object(l.createElement)(i.a,null,Object(h.f)(C,"filterable-tree")),W({id:"Filtered-Tree"},"Filtered Tree"),Object(l.createElement)(i.a,null,Object(h.f)(C,"filterabled-tree")),G({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(l.createElement)(c.a,{name:"trees",type:"component"}))},z=function(){return Object(r.a)(Y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/trees/docs.mdx.js"]=function(e){function t(t){for(var l,i,c=t[0],o=t[1],m=t[2],d=0,u=[];d<c.length;d++)i=c[d],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(l in o)Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l]);for(s&&s(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],l=!0,c=1;c<a.length;c++){var o=a[c];0!==n[o]&&(l=!1)}l&&(r.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},n={80:0},r=[];function i(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=l,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)i.d(a,l,function(t){return e[t]}.bind(null,l));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=c.push.bind(c);c.push=t,c=c.slice();for(var m=0;m<c.length;m++)t(c[m]);var s=o;return r.push([669,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},669:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return Y})),a.d(t,"getContents",(function(){return z}));var l=a(0),n=a.n(l),r=a(4),i=a(2),c=(a(26),a(14),a(38)),o=a(3),m=a.n(o),s=a(5),d=a.n(s),u=a(7),h=a(1);function b(e){return(b="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){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function E(e,t){for(var a=0;a<t.length;a++){var l=t[a];l.enumerable=l.enumerable\|\|!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,l.key,l)}}function L(e,t){return(L=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function g(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,l=v(e);if(t){var n=v(this).constructor;a=Reflect.construct(l,arguments,n)}else a=l.apply(this,arguments);return f(this,a)}}function f(e,t){return!t\|\|"object"!==b(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var T=function(e){var t=function(t){return e.termToMark?n.a.createElement("span",{dangerouslySetInnerHTML:{__html:(a=t,l=e.termToMark,a.replace(new RegExp(l,"gi"),(function(e){return"<mark>".concat(e,"</mark>")})))}}):n.a.createElement(n.a.Fragment,null,t);var a,l};return n.a.createElement("div",{className:d()("slds-tree__item",e.className)},n.a.createElement(u.b,{"aria-hidden":"true",assistiveText:"Expand ".concat(e.itemLabel),className:d()("slds-m-right_x-small",(!e.isBranch\|\|e.isDisabled)&&"slds-hidden"),iconClassName:"slds-button__icon_small",symbol:"chevronright",tabIndex:"-1",title:"Expand ".concat(e.itemLabel)}),n.a.createElement("span",{className:"slds-has-flexi-truncate"},n.a.createElement("span",{className:"slds-tree__item-label slds-truncate",title:e.itemLabel},t(e.itemLabel)),e.metaTextLabel&&n.a.createElement("span",{className:"slds-tree__item-meta slds-truncate",title:e.metaTextLabel},n.a.createElement("span",{className:"slds-assistive-text"},":"),t(e.metaTextLabel))),e.children)};T.displayName="TreeItem",T.propTypes={children:m.a.node,isBranch:m.a.bool,isDisabled:m.a.bool,itemLabel:m.a.string,metaTextLabel:m.a.string,termToMark:m.a.string},T.defaultProps={itemLabel:"Tree Item"};var y=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&&L(e,t)}(i,e);var t,a,l,r=g(i);function i(){return p(this,i),r.apply(this,arguments)}return t=i,(a=[{key:"getBranchAriaLabel",value:function(e,t){return t?e+": "+t:e}},{key:"render",value:function(){var e=this.props,t=e.ariaLevel,a=e.tabIndex,l=e.isBranch,r=e.isExpanded,i=e.isSelected,c=e.isDisabled,o=e.itemLabel,m=e.metaTextLabel;return n.a.createElement("li",{"aria-expanded":l?r\|\|!1:null,"aria-label":l?this.getBranchAriaLabel(o,m):null,"aria-level":t,"aria-selected":i,"aria-disabled":c,role:"treeitem",tabIndex:a},this.props.children)}}])&&E(t.prototype,a),l&&E(t,l),i}(l.Component);y.displayName="TreeListItem",y.propTypes={ariaLevel:m.a.number.isRequired,children:m.a.node.isRequired,isBranch:Object(h.b)("itemLabel",m.a.bool),isExpanded:Object(h.b)("isBranch",m.a.bool),isSelected:m.a.bool,itemLabel:m.a.string,metaTextLabel:Object(h.b)("itemLabel",m.a.string),tabIndex:m.a.number};var x=function(e){return n.a.createElement("h4",{className:"slds-tree__group-header",id:e.id},e.children)};x.displayName="TreeHeader",x.propTypes={children:m.a.node,id:m.a.string.isRequired};var B=function(e){return n.a.createElement("ul",{"aria-labelledby":e.headerId,className:"slds-tree",id:e.id,role:"tree"},e.children)};B.displayName="TreeList",B.propTypes={children:m.a.node,headerId:m.a.string,id:m.a.string};var w=function(e){return n.a.createElement("ul",{role:"group"},e.children)};w.displayName="TreeGroup",w.propTypes={children:m.a.node};var I=function(e){return n.a.createElement("div",{className:"slds-tree_container"},e.children)};I.displayName="TreeContainer",I.propTypes={children:m.a.node};var O=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};O.displayName="DefaultTree";var _=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};_.displayName="ExpandedTree";var S=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,isSelected:!0,tabIndex:0},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};S.displayName="SelectedTree";var k=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:2,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:3},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:3},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:3,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:3,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,{itemLabel:"Another Tree Item with Really Really Long Text That Should Truncate"})),n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:4,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:5},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:5},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:5},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:4},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:3},n.a.createElement(T,null)))))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};k.displayName="DeeplyNestedTree";var N=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item",metaTextLabel:"Tree Item Metatext with a Really Really Long Name That Should Truncate"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};N.displayName="MetaTextTree";var j=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,tabIndex:0},n.a.createElement(T,{className:"slds-is-hovered"})),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};j.displayName="TreeWithItemHovered";var R=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement(y,{ariaLevel:1,isDisabled:!0},n.a.createElement(T,null)),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,isDisabled:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,tabIndex:0,isBranch:!0,itemLabel:"Tree Branch"},n.a.createElement(T,{isBranch:!0,itemLabel:"Tree Branch",metaTextLabel:"Tree Branch Metatext"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))),n.a.createElement(y,{ariaLevel:1,itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"},n.a.createElement(T,{itemLabel:"Tree Item with a Really Really Long Name That Should Truncate"})))};R.displayName="TreeWithItemDisabled";var M=a(8),D=a(17),F=a(11),H=n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(O,null))),A=[{id:"expanded",label:"Expanded",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(_,null)))},{id:"selected",label:"Item Selected",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(S,null)))},{id:"deep-nesting",label:"Deeply nested branches",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(k,null)))},{id:"metatext",label:"Metatext",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(N,null)))},{id:"item-hovered",label:"Item Hovered",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(j,null)))},{id:"item-disabled",label:"Item Disabled",element:n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Tree Group Header"),n.a.createElement(B,{headerId:"treeheading"},n.a.createElement(R,null)))}],C=[{id:"filterable-tree",label:"Fliterable Tree",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-m-bottom_small"},n.a.createElement(M.b,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},n.a.createElement(F.a,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),n.a.createElement(D.a,{"aria-controls":"tree-id",id:"filter-id",placeholder:"Quick Find",type:"search"}))),n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Components"),n.a.createElement(B,{headerId:"treeheading",id:"tree-id"},n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"lightning",tabIndex:0},n.a.createElement(T,{isBranch:!0,itemLabel:"lightning"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-button"},n.a.createElement(T,{itemLabel:"lightning-button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},n.a.createElement(T,{itemLabel:"lightning-checkbox-button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-radio-button"},n.a.createElement(T,{itemLabel:"lightning-radio-button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"vaiant a checkbox button"},n.a.createElement(T,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"ui"},n.a.createElement(T,{isBranch:!0,itemLabel:"ui"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:button"},n.a.createElement(T,{itemLabel:"ui:button"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:checkboxButton"},n.a.createElement(T,{itemLabel:"ui:checkboxButton"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:radioButton"},n.a.createElement(T,{itemLabel:"ui:radioButton"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"},n.a.createElement(T,{isBranch:!0,itemLabel:"lightningcommunities",metaTextLabel:"Community components"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2},n.a.createElement(T,null)))))))},{id:"filterabled-tree",label:"Flitered Tree",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-m-bottom_small"},n.a.createElement(M.b,{hasHiddenLabel:!0,hasLeftIcon:!0,inputId:"filter-id",labelContent:"Filter navigation items"},n.a.createElement(F.a,{className:"slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default",sprite:"utility",symbol:"search"}),n.a.createElement(D.a,{"aria-controls":"tree-id",defaultValue:"butto",id:"filter-id",placeholder:"Quick Find",type:"search"}))),n.a.createElement(I,null,n.a.createElement(x,{id:"treeheading"},"Components"),n.a.createElement(B,{headerId:"treeheading",id:"tree-id"},n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"lightning",tabIndex:0},n.a.createElement(T,{isBranch:!0,itemLabel:"lightning"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-button"},n.a.createElement(T,{itemLabel:"lightning-button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-checkbox-button"},n.a.createElement(T,{itemLabel:"lightning-checkbox-button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-radio-button"},n.a.createElement(T,{itemLabel:"lightning-radio-button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button"},n.a.createElement(T,{itemLabel:"lightning-toggle",metaTextLabel:"variant a checkbox button",termToMark:"butto"})))),n.a.createElement(y,{ariaLevel:1,isBranch:!0,isExpanded:!0,itemLabel:"ui"},n.a.createElement(T,{isBranch:!0,itemLabel:"ui"}),n.a.createElement(w,null,n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:button"},n.a.createElement(T,{itemLabel:"ui:button",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:checkboxButton"},n.a.createElement(T,{itemLabel:"ui:checkboxButton",termToMark:"butto"})),n.a.createElement(y,{ariaLevel:2,itemLabel:"ui:radioButton"},n.a.createElement(T,{itemLabel:"ui:radioButton",termToMark:"butto"})))))))}],P=r.c.code,G=r.c.h2,W=r.c.h3,q=r.c.h4,J=r.c.li,U=r.c.p,K=r.c.strong,Q=r.c.ul,Y=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed."),Object(l.createElement)(i.a,{exampleOnly:!0},Object(h.f)(A,"selected")),G({id:"About-Trees"},"About Trees"),U({},"A tree is composed of two core elements ",P({},".slds-tree")," and ",P({},".slds-tree__item"),". The tree wrapper, the outermost parent ",P({},"ul"),", will receive the class ",P({},".slds-tree"),". This class will be used for scoping a tree, which allows for particular styling based on states in which the tree may enter."),U({},"A tree will need helper classes added and removed to help structure the layout. Each child node list item needs an ",P({},"aria-level")," attribute with its value being the number of levels deep it is nested to indicate the distinct grouping is nested within."),U({},"Whenever the tree has a nested group, the nested ",P({},"ul")," element should receive the ARIA role ",P({},"group"),". The parent ",P({},'li[role="treeitem"]')," requires the ",P({},"aria-expanded")," attribute to be applied. Toggling ",P({},"aria-expanded")," to ",P({},"true")," or ",P({},"false")," will show or hide the child ",P({},"group"),". The parent ",P({},'li[role="treeitem"]')," also requires ",P({},"aria-label")," to be applied and set to the tree items text value, this ensures child groups are announced to screen readers as you interact with that branch."),U({},"Whenever a ",P({},'role="treeitem"')," node is selected, ",P({},'aria-selected="true"')," needs to be applied to display the selected styles."),U({},"In our example, we are using a chevron icon on tree branches to help indicate to the user what action clicking the tree branch will perform, whether opening or closing it. The effect of rotating the icon 90° to indicate open/closed status is achieved by applying the ARIA attribute ",P({},"aria-expanded")," to the ",P({},"treeitem"),". ",P({},'aria-hidden="true"')," and ",P({},'tabindex="-1"')," must be placed on the toggle button."),U({},"Tree items can only contain text values, no actionable elements, apart from our toggle button, can be placed inside a Tree item."),U({},"Trees can only contain a single focusable tree item and ",P({},'tabindex="0"')," must be placed on the ",P({},'li[role="treeitem]')," that takes current focus. Every other actionable and non-actionable element must be made unfocused by adding ",P({},'tabindex="-1"')," or removing ",P({},"tabindex"),", respectively."),U({},"When implementing collapsed rows, we suggest showing the content DOM nodes within each collapsed row only once the row is expanded for performance reasons. You can additionally toggle the hidden row with ",P({},"slds-show")," and ",P({},"slds-hide")," if you intend to keep all of the content in the DOM."),U({},"You can add metatext (see: metatext state) to any tree item, which adds a smaller, second line of text below tree node labels to provide supplemental information (to provide users with added context, aid with identification/disambiguation). To add metatext, include an additional ",P({},"span")," within the treeitem with the class ",P({},"slds-tree__item-meta"),". We've added an additional parent span around the label/title and metatext to ensure the spacing works properly when metatext is included. If adding metatext to a tree item with child nodes (i.e. a branch), be sure to update the ",P({},"aria-label")," to include the metatext. For example: ",P({},'aria-label="Tree Branch Label: Tree Branch Metatext"')),W({id:"Accessibility"},"Accessibility"),q({id:"Markup"},"Markup"),Q({},J({},P({},'role="tree"')," is placed on the ",P({},"ul")),J({},P({},'role="tree"')," element also has ",P({},"aria-labelledby")," applied which points to the trees heading element"),J({},P({},'role="treeitem"')," is placed on the tree ",P({},"li")," elements"),J({},P({},"aria-level")," is applied to ",P({},"treeitem")," elements to indicate their nesting depth"),J({},P({},"aria-expanded")," is applied to ",P({},"treeitem")," elements that have child tree nodes. It is set to ",P({},"true")," or ",P({},"false")),J({},P({},"aria-label")," is applied to ",P({},"treeitem")," elements that have child tree nodes. Be sure to add any metatext to the label, if applicable"),J({},P({},'aria-selected="true"')," is applied to ",P({},"treeitem")," elements that are selected"),J({},P({},'aria-disabled="true"')," is applied to ",P({},"treeitem")," elements that are disabled. They do not receive a ",P({},"tabindex"),"."),J({},P({},'tabindex="0"')," is applied to the ",P({},"treeitem")," that is in focus"),J({},P({},'role="group"')," is applied to child tree node containers, ",P({},"ul"))),q({id:"Interactions"},"Interactions"),Q({},J({},"Only a single action per tree item"),J({},"Only 1 focused item per Tree"),J({},"Actionable elements in a tree item are mouse only and should not be focusable, they should be presentational and should be hidden from screen readers and keyboard users"),J({},"Focus is placed on the entire ",P({},'li[role="treeitem"]'),". If that item has child items, focus must include those as well.")),q({id:"Keyboard-Navigation"},"Keyboard Navigation"),Q({},J({},"Clicking on a tree item creates a selection"),J({},P({},"Up")," and ",P({},"Down")," arrow keys move ",P({},":focus")," ",K({},"and")," ",P({},"aria-selected"),". Previous selections are cleared"),J({},P({},"Right")," arrow key to expand collapsed node."),J({},P({},"Left")," arrow key to collapse expanded node."),J({},P({},"Left")," arrow key on an end child node, collapses the group and moves ",P({},":focus")," and ",P({},"aria-selected")," to the parent ",P({},"treeitem")),J({},P({},"Enter")," performs the default action on an end tree item (if there is one)."),J({},P({},"Ctrl")," + ",P({},"Up")," and ",P({},"Ctrl")," + ",P({},"Down")," moves focus. Current selection is maintained"),J({},P({},"Ctrl")," + ",P({},"Space")," will add or remove the currently focused tree item to the selection")),W({id:"Filtering"},"Filtering"),U({},"When filtering a tree you should couple the tree with a search input. The search input will control the contents of the tree and as such should the attribute ",P({},"aria-controls")," added to it. The value of the ",P({},"aria-controls")," attribute should be the ID of the tree it controls. The search input should also be of type ",P({},"search"),"."),U({},"Upon typing in the input the tree should start filtering immediately, expanding all nodes that have matching tree items to display, and highlighting the search term in each of the matching items. The highlight is provided by wrapping the term in ",P({},"<mark />")," elements."),G({id:"Base"},"Base"),Object(l.createElement)(i.a,null,Object(h.f)(H)),W({id:"States"},"States"),q({id:"Expanded-Item"},"Expanded Item"),Object(l.createElement)(i.a,null,Object(h.f)(A,"expanded")),q({id:"Item-Selected"},"Item Selected"),Object(l.createElement)(i.a,null,Object(h.f)(A,"selected")),q({id:"Deeply-Nested-Branches"},"Deeply Nested Branches"),Object(l.createElement)(i.a,null,Object(h.f)(A,"deep-nesting")),q({id:"Item-with-Metatext"},"Item with Metatext"),Object(l.createElement)(i.a,null,Object(h.f)(A,"metatext")),q({id:"Item-Hovered"},"Item Hovered"),Object(l.createElement)(i.a,null,Object(h.f)(A,"item-hovered")),q({id:"Items-Disabled"},"Items Disabled"),Object(l.createElement)(i.a,null,Object(h.f)(A,"item-disabled")),G({id:"Examples"},"Examples"),W({id:"Filterable-Tree"},"Filterable Tree"),Object(l.createElement)(i.a,null,Object(h.f)(C,"filterable-tree")),W({id:"Filtered-Tree"},"Filtered Tree"),Object(l.createElement)(i.a,null,Object(h.f)(C,"filterabled-tree")),G({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(l.createElement)(c.a,{name:"trees",type:"component"}))},z=function(){return Object(r.a)(Y())}}});

package/__internal/chunked/docs/ui/components/trial-bar/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/trial-bar/docs.mdx.js"]=function(e){function t(t){for(var l,r,c=t[0],o=t[1],i=t[2],u=0,m=[];u<c.length;u++)r=c[u],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&m.push(n[r][0]),n[r]=0;for(l in o)Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,i\|\|[]),s()}function s(){for(var e,t=0;t<a.length;t++){for(var s=a[t],l=!0,c=1;c<s.length;c++){var o=s[c];0!==n[o]&&(l=!1)}l&&(a.splice(t--,1),e=r(r.s=s[0]))}return e}var l={},n={81:0},a=[];function r(t){if(l[t])return l[t].exports;var s=l[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=l,r.d=function(e,t,s){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(s,l,function(t){return e[t]}.bind(null,l));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=o;return a.push([~~682~~,0]),s()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~682~~:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return g})),s.d(t,"getContents",(function(){return y}));var l=s(0),n=s.n(l),a=s(4),r=s(2),c=s(1),o=s(10),i=s(9),d=s(5),u=s.n(d),m=function(e){return n.a.createElement("div",{className:"slds-trial-header slds-grid"},n.a.createElement("div",{className:"slds-grid"},n.a.createElement("button",{className:"slds-button slds-m-right_small"},"Take the salesforce tour"),n.a.createElement("div",{className:u()("slds-grid slds-dropdown-trigger slds-dropdown-trigger_click",e.tourMenuOpen?"slds-is-open":null)},n.a.createElement("button",{className:"slds-button","aria-haspopup":"true"},n.a.createElement(o.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"}),"Choose your tour"),n.a.createElement(i.f,{className:"slds-dropdown_inverse slds-dropdown_left"},n.a.createElement(i.h,null,n.a.createElement(i.g,{tabIndex:"0",className:"slds-is-selected",title:"Completed: Conquer Your Cases"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),n.a.createElement("span",{className:"slds-assistive-text"},"Completed:")," Conquer Your Cases"),n.a.createElement(i.g,{title:"Automate For Speed"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),"Automate For Speed"),n.a.createElement(i.g,{title:"Share Your Knowledge"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),"Share Your Knowledge"),n.a.createElement(i.g,{title:"Finish it up in a Flash"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),"Finish it up in a Flash"),n.a.createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),n.a.createElement(i.g,{title:"Import Contacts and Accounts"},n.a.createElement(o.a,{className:"slds-icon slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"upload"}),"Import Contacts and Accounts"))))),n.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-col_bump-left"},n.a.createElement("span",{className:"slds-box slds-box_xx-small slds-theme_default"},"30"),n.a.createElement("span",{className:"slds-m-horizontal_x-small"},"Days left in trial"),n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-button slds-button_success"},"Subscribe Now")))},p=n.a.createElement(m,null),f=[{id:"menu-open",label:"Tour Menu Open",element:n.a.createElement("div",{className:"demo-only",style:{height:"240px"}},n.a.createElement(m,{tourMenuOpen:!0}))}],b=a.c.h2,h=a.c.h3,_=a.c.h4,g=function(){return Object(l.createElement)(a.b,{},Object(l.createElement)("div",{className:"doc lead"},"Trial bar components are used to provide an interactive and educational prospect experience for setup."),b({id:"Header"},"Header"),Object(l.createElement)(r.a,null,Object(c.f)(p)),h({id:"States"},"States"),_({id:"Menu-Open"},"Menu - Open"),Object(l.createElement)(r.a,null,Object(c.f)(f,"menu-open")))},y=function(){return Object(a.a)(g())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/trial-bar/docs.mdx.js"]=function(e){function t(t){for(var l,r,c=t[0],o=t[1],i=t[2],u=0,m=[];u<c.length;u++)r=c[u],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&m.push(n[r][0]),n[r]=0;for(l in o)Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l]);for(d&&d(t);m.length;)m.shift()();return a.push.apply(a,i\|\|[]),s()}function s(){for(var e,t=0;t<a.length;t++){for(var s=a[t],l=!0,c=1;c<s.length;c++){var o=s[c];0!==n[o]&&(l=!1)}l&&(a.splice(t--,1),e=r(r.s=s[0]))}return e}var l={},n={81:0},a=[];function r(t){if(l[t])return l[t].exports;var s=l[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=l,r.d=function(e,t,s){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:s})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(s,l,function(t){return e[t]}.bind(null,l));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var d=o;return a.push([683,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},683:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return g})),s.d(t,"getContents",(function(){return y}));var l=s(0),n=s.n(l),a=s(4),r=s(2),c=s(1),o=s(10),i=s(9),d=s(5),u=s.n(d),m=function(e){return n.a.createElement("div",{className:"slds-trial-header slds-grid"},n.a.createElement("div",{className:"slds-grid"},n.a.createElement("button",{className:"slds-button slds-m-right_small"},"Take the salesforce tour"),n.a.createElement("div",{className:u()("slds-grid slds-dropdown-trigger slds-dropdown-trigger_click",e.tourMenuOpen?"slds-is-open":null)},n.a.createElement("button",{className:"slds-button","aria-haspopup":"true"},n.a.createElement(o.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"}),"Choose your tour"),n.a.createElement(i.f,{className:"slds-dropdown_inverse slds-dropdown_left"},n.a.createElement(i.h,null,n.a.createElement(i.g,{tabIndex:"0",className:"slds-is-selected",title:"Completed: Conquer Your Cases"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),n.a.createElement("span",{className:"slds-assistive-text"},"Completed:")," Conquer Your Cases"),n.a.createElement(i.g,{title:"Automate For Speed"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),"Automate For Speed"),n.a.createElement(i.g,{title:"Share Your Knowledge"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),"Share Your Knowledge"),n.a.createElement(i.g,{title:"Finish it up in a Flash"},n.a.createElement(o.a,{className:"slds-icon slds-icon_selected slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"check"}),"Finish it up in a Flash"),n.a.createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),n.a.createElement(i.g,{title:"Import Contacts and Accounts"},n.a.createElement(o.a,{className:"slds-icon slds-icon_x-small slds-m-right_x-small",sprite:"utility",symbol:"upload"}),"Import Contacts and Accounts"))))),n.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-col_bump-left"},n.a.createElement("span",{className:"slds-box slds-box_xx-small slds-theme_default"},"30"),n.a.createElement("span",{className:"slds-m-horizontal_x-small"},"Days left in trial"),n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-button slds-button_success"},"Subscribe Now")))},p=n.a.createElement(m,null),f=[{id:"menu-open",label:"Tour Menu Open",element:n.a.createElement("div",{className:"demo-only",style:{height:"240px"}},n.a.createElement(m,{tourMenuOpen:!0}))}],b=a.c.h2,h=a.c.h3,_=a.c.h4,g=function(){return Object(l.createElement)(a.b,{},Object(l.createElement)("div",{className:"doc lead"},"Trial bar components are used to provide an interactive and educational prospect experience for setup."),b({id:"Header"},"Header"),Object(l.createElement)(r.a,null,Object(c.f)(p)),h({id:"States"},"States"),_({id:"Menu-Open"},"Menu - Open"),Object(l.createElement)(r.a,null,Object(c.f)(f,"menu-open")))},y=function(){return Object(a.a)(g())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/vertical-navigation/docs.mdx.js"]=function(e){function t(t){for(var l,c,i=t[0],s=t[1],d=t[2],m=0,u=[];m<i.length;m++)c=i[m],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&u.push(n[c][0]),n[c]=0;for(l in s)Object.prototype.hasOwnProperty.call(s,l)&&(e[l]=s[l]);for(o&&o(t);u.length;)u.shift()();return r.push.apply(r,d\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,i=1;i<a.length;i++){var s=a[i];0!==n[s]&&(l=!1)}l&&(r.splice(t--,1),e=c(c.s=a[0]))}return e}var l={},n={82:0},r=[];function c(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,c),a.l=!0,a.exports}c.m=e,c.c=l,c.d=function(e,t,a){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(c.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)c.d(a,l,function(t){return e[t]}.bind(null,l));return a},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var o=s;return r.push([678,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},678:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return q})),a.d(t,"getContents",(function(){return F}));var l=a(0),n=a.n(l),r=a(4),c=a(2),i=a(14),s=a(1),d=a(3),o=a(11),m=a(8),u=a(16),p=a(10),h=a(5),E=a.n(h),v=a(12),b="entity-header",f="folder-header",y=function(e){return n.a.createElement("nav",{className:E()("slds-nav-vertical",{"slds-nav-vertical_compact":e.isCompact,"slds-nav-vertical_shade":e.isShaded}),"aria-label":"Sub page"},e.children)};y.propTypes={className:d.PropTypes.string,children:d.PropTypes.node,isCompact:d.PropTypes.bool,isShaded:d.PropTypes.bool};var R=function(e){return n.a.createElement("li",{className:E()("slds-nav-vertical__item",{"slds-is-active":e.active},e.className)},n.a.createElement("a",{href:"#",className:"slds-nav-vertical__action","aria-current":e.active,onClick:function(e){return e.preventDefault()}},e.children))};R.propTypes={active:d.PropTypes.oneOf([!0,void 0,"page","step","location","date","time"]),className:d.PropTypes.string,children:d.PropTypes.node},R.defaultProps={active:void 0};var _=function(e){var t=e.children,a=e.className,l=e.collapsed,r=e.expanded,c=e.headerId,i=e.isNavVerticalRadioSet,s=e.listId,d=e.title,o=l\|\|r,m=null;return m=i?n.a.createElement("div",null,t):n.a.createElement("ul",{"aria-describedby":c},t),n.a.createElement("div",{className:E()(o?"slds-nav-vertical__overflow":"slds-nav-vertical__section",a)},!o&&!i&&d&&n.a.createElement("h2",{id:c,className:"slds-nav-vertical__title"},d),o&&n.a.createElement(v.a,{className:"slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow","aria-controls":s,"aria-expanded":r?"true":"false"},n.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"chevronright"}),n.a.createElement("span",{className:"slds-nav-vertical__action-text"},l?"Show More":"Show Less",n.a.createElement("span",{className:"slds-assistive-text"},d))),o?n.a.createElement("div",{id:s,className:E()({"slds-hide":l,"slds-show":r})},m):m)};_.defaultProps={headerId:"header-id-1"},_.propTypes={children:d.PropTypes.node,className:d.PropTypes.string,collapsed:Object(s.b)("listId",d.PropTypes.bool),expanded:Object(s.b)("listId",d.PropTypes.bool),headerId:d.PropTypes.string.isRequired,isNavVerticalRadioSet:d.PropTypes.bool,listId:d.PropTypes.string,title:d.PropTypes.string};var g=n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports")))),w=[{id:"collapsed",label:"Collapsed",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me")),n.a.createElement(_,{title:"Folders",collapsed:!0,listId:"search-results",headerId:f},n.a.createElement(R,null,"Overflow Item One"),n.a.createElement(R,null,"Overflow Item Two"),n.a.createElement(R,null,"Overflow Item Three"))))},{id:"expanded",label:"Expanded",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me")),n.a.createElement(_,{title:"Folders",expanded:!0,listId:"search-results",headerId:f},n.a.createElement(R,null,"Overflow Item One"),n.a.createElement(R,null,"Overflow Item Two"),n.a.createElement(R,null,"Overflow Item Three"))))}],O=[{id:"compact",label:"Compact",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,{isCompact:!0},n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"items-with-icons",label:"Items with icon",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,n.a.createElement(o.a,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Created by Me"),n.a.createElement(R,null,n.a.createElement(o.a,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"items-with-notifications",label:"Items with notification",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent",n.a.createElement("span",{className:"slds-badge slds-col_bump-left"},n.a.createElement("span",{className:"slds-assistive-text"},":"),"3",n.a.createElement("span",{className:"slds-assistive-text"},"New Items"))),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"shade",label:"Shaded Background",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px",backgroundColor:"#FAFAFB"}},n.a.createElement(y,{isShaded:!0},n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"quickfind",label:"Quickfind",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(m.b,{formElementClassName:"slds-p-horizontal_large",labelContent:"Filter navigation items",inputId:"input-id-01",hasLeftIcon:!0,hasHiddenLabel:!0},n.a.createElement(o.a,{className:"slds-input__icon slds-input__icon_right slds-icon-text-default",symbol:"search",title:!1,assistiveText:!1}),n.a.createElement(u.a,{type:"search",id:"input-id-01",placeholder:"Quick Find"})),n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"))))}],I=function(e){return n.a.createElement("fieldset",{className:E()("slds-nav-vertical",{"slds-nav-vertical_shade":e.shaded},{"slds-nav-vertical_compact":e.compact})},n.a.createElement("legend",{className:"slds-nav-vertical__title"},"Reports"),e.children)},N=function(e){return n.a.createElement("span",{className:E()("slds-nav-vertical__item",e.className)},n.a.createElement("input",{defaultChecked:e.checked,type:"radio",id:e.id,value:e.id,name:e.name\|\|"unique-id-example"}),n.a.createElement("label",{className:"slds-nav-vertical__action",htmlFor:e.id},n.a.createElement("span",{className:"slds-nav-vertical_radio-faux"},e.children)))},x=function(e){return n.a.createElement(_,{headerId:"entity-header",title:"Reports",isNavVerticalRadioSet:!0},n.a.createElement(I,null,n.a.createElement(N,{checked:!0,id:"unique-id-01-recent"},"Recent"),n.a.createElement(N,{id:"unique-id-01-created-by-me"},"Created by Me"),n.a.createElement(N,{id:"unique-id-01-private-reports"},"Private Reports"),n.a.createElement(N,{id:"unique-id-01-public-reports"},"Public Reports"),n.a.createElement(N,{id:"unique-id-01-all-reports"},"All Reports")))},j=n.a.createElement(x,null),P=[{id:"compact",label:"Compact",element:n.a.createElement(_,{headerId:"entity-header",title:"Reports",isNavVerticalRadioSet:!0},n.a.createElement(I,{compact:!0},n.a.createElement(N,{checked:!0,id:"unique-id-02-recent",name:"unique-id-compact"},"Recent"),n.a.createElement(N,{id:"unique-id-02-created-by-me",name:"unique-id-compact"},"Created by Me"),n.a.createElement(N,{id:"unique-id-02-private-reports",name:"unique-id-compact"},"Private Reports"),n.a.createElement(N,{id:"unique-id-02-public-reports",name:"unique-id-compact"},"Public Reports"),n.a.createElement(N,{id:"unique-id-02-all-reports",name:"unique-id-compact"},"All Reports")))},{id:"shade",label:"Shaded Background",element:n.a.createElement("div",{className:"demo-only",style:{backgroundColor:"#FAFAFB"}},n.a.createElement(_,{headerId:"entity-header",title:"Reports",isNavVerticalRadioSet:!0},n.a.createElement(I,{shaded:!0},n.a.createElement(N,{checked:!0,id:"unique-id-03-recent",name:"unique-id-shade"},"Recent"),n.a.createElement(N,{id:"unique-id-03-created-by-me",name:"unique-id-shade"},"Created by Me"),n.a.createElement(N,{id:"unique-id-03-private-reports",name:"unique-id-shade"},"Private Reports"),n.a.createElement(N,{id:"unique-id-03-public-reports",name:"unique-id-shade"},"Public Reports"),n.a.createElement(N,{id:"unique-id-03-all-reports",name:"unique-id-shade"},"All Reports"))))}],S=r.c.a,C=r.c.h2,M=r.c.h3,T=r.c.h4,k=r.c.p,q=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"Navigation represents a list of links that either take the user to another page or parts of the page the user is in."),C({id:"List"},"List"),Object(l.createElement)(c.a,null,Object(s.f)(g)),Object(l.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"The ",Object(l.createElement)("code",null,"aria-current")," attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the ",Object(l.createElement)("code",null,"slds-nav-vertical__action")," link element. In our example above, we're using the generic ",Object(l.createElement)("code",null,"true")," value, but the attribute will accept a variety of options depending on your use case."),Object(l.createElement)("p",null,"For more information on ",Object(l.createElement)("code",null,"aria-current"),", please visit the ",Object(l.createElement)("a",{href:"https://www.w3.org/TR/wai-aria-1.1/#aria-current"},"W3C specification page"),".")),M({id:"States"},"States"),T({id:"Collapsed"},"Collapsed"),Object(l.createElement)(c.a,null,Object(s.f)(w,"collapsed")),T({id:"Expanded"},"Expanded"),Object(l.createElement)(c.a,null,Object(s.f)(w,"expanded")),M({id:"Examples"},"Examples"),T({id:"Compact"},"Compact"),Object(l.createElement)(c.a,null,Object(s.f)(O,"compact")),T({id:"Items-with-Icons"},"Items with Icons"),Object(l.createElement)(c.a,null,Object(s.f)(O,"items-with-icons")),T({id:"Items-with-Notifications"},"Items with Notifications"),Object(l.createElement)(c.a,null,Object(s.f)(O,"items-with-notifications")),T({id:"Shaded-Background"},"Shaded Background"),Object(l.createElement)(c.a,null,Object(s.f)(O,"shade")),T({id:"Quickfind"},"Quickfind"),Object(l.createElement)(c.a,null,Object(s.f)(O,"quickfind")),C({id:"Radio-Group"},"Radio Group"),k({},"The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the ",S({href:"/components/vertical-tabs"},"Vertical Tabs")," component."),Object(l.createElement)(c.a,null,Object(s.f)(j)),M({id:"Examples-2"},"Examples"),T({id:"Compact-2"},"Compact"),Object(l.createElement)(c.a,null,Object(s.f)(P,"compact")),T({id:"Shaded-Background-2"},"Shaded Background"),Object(l.createElement)(c.a,null,Object(s.f)(P,"shade")))},F=function(){return Object(r.a)(q())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/vertical-navigation/docs.mdx.js"]=function(e){function t(t){for(var l,c,i=t[0],s=t[1],d=t[2],m=0,u=[];m<i.length;m++)c=i[m],Object.prototype.hasOwnProperty.call(n,c)&&n[c]&&u.push(n[c][0]),n[c]=0;for(l in s)Object.prototype.hasOwnProperty.call(s,l)&&(e[l]=s[l]);for(o&&o(t);u.length;)u.shift()();return r.push.apply(r,d\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],l=!0,i=1;i<a.length;i++){var s=a[i];0!==n[s]&&(l=!1)}l&&(r.splice(t--,1),e=c(c.s=a[0]))}return e}var l={},n={82:0},r=[];function c(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,c),a.l=!0,a.exports}c.m=e,c.c=l,c.d=function(e,t,a){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(c.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)c.d(a,l,function(t){return e[t]}.bind(null,l));return a},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var o=s;return r.push([679,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},679:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return q})),a.d(t,"getContents",(function(){return F}));var l=a(0),n=a.n(l),r=a(4),c=a(2),i=a(14),s=a(1),d=a(3),o=a(11),m=a(8),u=a(17),p=a(10),h=a(5),E=a.n(h),v=a(12),b="entity-header",f="folder-header",y=function(e){return n.a.createElement("nav",{className:E()("slds-nav-vertical",{"slds-nav-vertical_compact":e.isCompact,"slds-nav-vertical_shade":e.isShaded}),"aria-label":"Sub page"},e.children)};y.propTypes={className:d.PropTypes.string,children:d.PropTypes.node,isCompact:d.PropTypes.bool,isShaded:d.PropTypes.bool};var R=function(e){return n.a.createElement("li",{className:E()("slds-nav-vertical__item",{"slds-is-active":e.active},e.className)},n.a.createElement("a",{href:"#",className:"slds-nav-vertical__action","aria-current":e.active,onClick:function(e){return e.preventDefault()}},e.children))};R.propTypes={active:d.PropTypes.oneOf([!0,void 0,"page","step","location","date","time"]),className:d.PropTypes.string,children:d.PropTypes.node},R.defaultProps={active:void 0};var _=function(e){var t=e.children,a=e.className,l=e.collapsed,r=e.expanded,c=e.headerId,i=e.isNavVerticalRadioSet,s=e.listId,d=e.title,o=l\|\|r,m=null;return m=i?n.a.createElement("div",null,t):n.a.createElement("ul",{"aria-describedby":c},t),n.a.createElement("div",{className:E()(o?"slds-nav-vertical__overflow":"slds-nav-vertical__section",a)},!o&&!i&&d&&n.a.createElement("h2",{id:c,className:"slds-nav-vertical__title"},d),o&&n.a.createElement(v.a,{className:"slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow","aria-controls":s,"aria-expanded":r?"true":"false"},n.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"chevronright"}),n.a.createElement("span",{className:"slds-nav-vertical__action-text"},l?"Show More":"Show Less",n.a.createElement("span",{className:"slds-assistive-text"},d))),o?n.a.createElement("div",{id:s,className:E()({"slds-hide":l,"slds-show":r})},m):m)};_.defaultProps={headerId:"header-id-1"},_.propTypes={children:d.PropTypes.node,className:d.PropTypes.string,collapsed:Object(s.b)("listId",d.PropTypes.bool),expanded:Object(s.b)("listId",d.PropTypes.bool),headerId:d.PropTypes.string.isRequired,isNavVerticalRadioSet:d.PropTypes.bool,listId:d.PropTypes.string,title:d.PropTypes.string};var g=n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports")))),w=[{id:"collapsed",label:"Collapsed",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me")),n.a.createElement(_,{title:"Folders",collapsed:!0,listId:"search-results",headerId:f},n.a.createElement(R,null,"Overflow Item One"),n.a.createElement(R,null,"Overflow Item Two"),n.a.createElement(R,null,"Overflow Item Three"))))},{id:"expanded",label:"Expanded",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me")),n.a.createElement(_,{title:"Folders",expanded:!0,listId:"search-results",headerId:f},n.a.createElement(R,null,"Overflow Item One"),n.a.createElement(R,null,"Overflow Item Two"),n.a.createElement(R,null,"Overflow Item Three"))))}],O=[{id:"compact",label:"Compact",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,{isCompact:!0},n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"items-with-icons",label:"Items with icon",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,n.a.createElement(o.a,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Created by Me"),n.a.createElement(R,null,n.a.createElement(o.a,{symbol:"open_folder",containerClassName:"slds-line-height_reset",className:"slds-icon-text-default slds-icon_x-small slds-m-right_x-small",assistiveText:"Folder",title:"Folder"}),"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"items-with-notifications",label:"Items with notification",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent",n.a.createElement("span",{className:"slds-badge slds-col_bump-left"},n.a.createElement("span",{className:"slds-assistive-text"},":"),"3",n.a.createElement("span",{className:"slds-assistive-text"},"New Items"))),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"shade",label:"Shaded Background",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px",backgroundColor:"#FAFAFB"}},n.a.createElement(y,{isShaded:!0},n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"),n.a.createElement(R,null,"All Reports"))))},{id:"quickfind",label:"Quickfind",element:n.a.createElement("div",{className:"demo-only",style:{width:"320px"}},n.a.createElement(y,null,n.a.createElement(m.b,{formElementClassName:"slds-p-horizontal_large",labelContent:"Filter navigation items",inputId:"input-id-01",hasLeftIcon:!0,hasHiddenLabel:!0},n.a.createElement(o.a,{className:"slds-input__icon slds-input__icon_right slds-icon-text-default",symbol:"search",title:!1,assistiveText:!1}),n.a.createElement(u.a,{type:"search",id:"input-id-01",placeholder:"Quick Find"})),n.a.createElement(_,{headerId:b,title:"Reports"},n.a.createElement(R,{active:!0},"Recent"),n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Private Reports"),n.a.createElement(R,null,"Public Reports"),n.a.createElement(R,null,"All Reports")),n.a.createElement(_,{headerId:f,title:"Folders"},n.a.createElement(R,null,"Created by Me"),n.a.createElement(R,null,"Shared with Me"))))}],I=function(e){return n.a.createElement("fieldset",{className:E()("slds-nav-vertical",{"slds-nav-vertical_shade":e.shaded},{"slds-nav-vertical_compact":e.compact})},n.a.createElement("legend",{className:"slds-nav-vertical__title"},"Reports"),e.children)},N=function(e){return n.a.createElement("span",{className:E()("slds-nav-vertical__item",e.className)},n.a.createElement("input",{defaultChecked:e.checked,type:"radio",id:e.id,value:e.id,name:e.name\|\|"unique-id-example"}),n.a.createElement("label",{className:"slds-nav-vertical__action",htmlFor:e.id},n.a.createElement("span",{className:"slds-nav-vertical_radio-faux"},e.children)))},x=function(e){return n.a.createElement(_,{headerId:"entity-header",title:"Reports",isNavVerticalRadioSet:!0},n.a.createElement(I,null,n.a.createElement(N,{checked:!0,id:"unique-id-01-recent"},"Recent"),n.a.createElement(N,{id:"unique-id-01-created-by-me"},"Created by Me"),n.a.createElement(N,{id:"unique-id-01-private-reports"},"Private Reports"),n.a.createElement(N,{id:"unique-id-01-public-reports"},"Public Reports"),n.a.createElement(N,{id:"unique-id-01-all-reports"},"All Reports")))},j=n.a.createElement(x,null),P=[{id:"compact",label:"Compact",element:n.a.createElement(_,{headerId:"entity-header",title:"Reports",isNavVerticalRadioSet:!0},n.a.createElement(I,{compact:!0},n.a.createElement(N,{checked:!0,id:"unique-id-02-recent",name:"unique-id-compact"},"Recent"),n.a.createElement(N,{id:"unique-id-02-created-by-me",name:"unique-id-compact"},"Created by Me"),n.a.createElement(N,{id:"unique-id-02-private-reports",name:"unique-id-compact"},"Private Reports"),n.a.createElement(N,{id:"unique-id-02-public-reports",name:"unique-id-compact"},"Public Reports"),n.a.createElement(N,{id:"unique-id-02-all-reports",name:"unique-id-compact"},"All Reports")))},{id:"shade",label:"Shaded Background",element:n.a.createElement("div",{className:"demo-only",style:{backgroundColor:"#FAFAFB"}},n.a.createElement(_,{headerId:"entity-header",title:"Reports",isNavVerticalRadioSet:!0},n.a.createElement(I,{shaded:!0},n.a.createElement(N,{checked:!0,id:"unique-id-03-recent",name:"unique-id-shade"},"Recent"),n.a.createElement(N,{id:"unique-id-03-created-by-me",name:"unique-id-shade"},"Created by Me"),n.a.createElement(N,{id:"unique-id-03-private-reports",name:"unique-id-shade"},"Private Reports"),n.a.createElement(N,{id:"unique-id-03-public-reports",name:"unique-id-shade"},"Public Reports"),n.a.createElement(N,{id:"unique-id-03-all-reports",name:"unique-id-shade"},"All Reports"))))}],S=r.c.a,C=r.c.h2,M=r.c.h3,T=r.c.h4,k=r.c.p,q=function(){return Object(l.createElement)(r.b,{},Object(l.createElement)("div",{className:"doc lead"},"Navigation represents a list of links that either take the user to another page or parts of the page the user is in."),C({id:"List"},"List"),Object(l.createElement)(c.a,null,Object(s.f)(g)),Object(l.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"The ",Object(l.createElement)("code",null,"aria-current")," attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the ",Object(l.createElement)("code",null,"slds-nav-vertical__action")," link element. In our example above, we're using the generic ",Object(l.createElement)("code",null,"true")," value, but the attribute will accept a variety of options depending on your use case."),Object(l.createElement)("p",null,"For more information on ",Object(l.createElement)("code",null,"aria-current"),", please visit the ",Object(l.createElement)("a",{href:"https://www.w3.org/TR/wai-aria-1.1/#aria-current"},"W3C specification page"),".")),M({id:"States"},"States"),T({id:"Collapsed"},"Collapsed"),Object(l.createElement)(c.a,null,Object(s.f)(w,"collapsed")),T({id:"Expanded"},"Expanded"),Object(l.createElement)(c.a,null,Object(s.f)(w,"expanded")),M({id:"Examples"},"Examples"),T({id:"Compact"},"Compact"),Object(l.createElement)(c.a,null,Object(s.f)(O,"compact")),T({id:"Items-with-Icons"},"Items with Icons"),Object(l.createElement)(c.a,null,Object(s.f)(O,"items-with-icons")),T({id:"Items-with-Notifications"},"Items with Notifications"),Object(l.createElement)(c.a,null,Object(s.f)(O,"items-with-notifications")),T({id:"Shaded-Background"},"Shaded Background"),Object(l.createElement)(c.a,null,Object(s.f)(O,"shade")),T({id:"Quickfind"},"Quickfind"),Object(l.createElement)(c.a,null,Object(s.f)(O,"quickfind")),C({id:"Radio-Group"},"Radio Group"),k({},"The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the ",S({href:"/components/vertical-tabs"},"Vertical Tabs")," component."),Object(l.createElement)(c.a,null,Object(s.f)(j)),M({id:"Examples-2"},"Examples"),T({id:"Compact-2"},"Compact"),Object(l.createElement)(c.a,null,Object(s.f)(P,"compact")),T({id:"Shaded-Background-2"},"Shaded Background"),Object(l.createElement)(c.a,null,Object(s.f)(P,"shade")))},F=function(){return Object(r.a)(q())}}});

package/__internal/chunked/docs/ui/components/vertical-tabs/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/vertical-tabs/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],c=t[1],l=t[2],b=0,d=[];b<r.length;b++)i=r[b],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&d.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(h&&h(t);d.length;)d.shift()();return s.push.apply(s,l\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var c=a[r];0!==o[c]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},o={83:0},s=[];function i(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,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=r.push.bind(r);r.push=t,r=r.slice();for(var l=0;l<r.length;l++)t(r[l]);var h=c;return s.push([~~587~~,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~587~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return m})),a.d(t,"getContents",(function(){return v}));var n=a(0),o=a(4),s=a(2),i=(a(27),a(41),a(14),a(~~101~~)),r=a(1),c=o.c.code,l=o.c.h2,h=o.c.h3,b=o.c.h4,d=o.c.li,u=o.c.p,f=o.c.strong,p=o.c.ul,m=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A component that shows groups of content, separated into tabs, and controlled by the tabs"),Object(n.createElement)(s.a,{exampleOnly:!0},Object(r.f)(i.b,"with-icons")),l({id:"About-Vertical-Tabs"},"About Vertical Tabs"),u({},"The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content. Only one tab's contents are visible at any given time."),u({},"This component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space."),h({id:"Implementation"},"Implementation"),u({},"The Tab Component has the following markup requirements:"),p({},d({},"The ",c({},".slds-is-active")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that is active (its content is being shown)."),d({},"The ",c({},".slds-has-focus")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that has focus."),d({},"The ",c({},".slds-show")," modifier class is required on the ",c({},".slds-vertical-tabs__content")," element that is being shown (their tab label is selected)."),d({},"The ",c({},".slds-hide")," modifier class is required on all ",c({},".slds-vertical-tabs__content")," elements that are not being shown (their tab label is not selected)."),d({},"If an icon or badge is to be used in combination with a tab nav item label, you can wrap an icon on the left of the label in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__left-icon"),". If you require an icon or badge to the right of the label, you can wrap the element in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__right-icon"),".")),h({id:"Accessibility"},"Accessibility"),u({},"Vertical Tabbed UIs have three parts with specific ",f({},"ARIA")," roles, markup and interactions:"),b({id:"ARIA-Roles"},"ARIA Roles"),p({},d({},"The tab list, which should have ",c({},'role="tablist"')),d({},"The tabs in that list, which should each be an ",c({},'<a role="tab">')," anchor wrapped in a ",c({},'<li role="presentation">')," li"),d({},"The tab panels, which display each tab's content and should each have ",c({},'role="tabpanel"'))),b({id:"Markup"},"Markup"),p({},d({},"Selected tab’s anchor has ",c({},'aria-selected="true"'),", all other tabs’ anchors have ",c({},'aria-selected="false"')),d({},"Selected tab’s anchor has ",c({},'tabindex="0"'),", all other tabs have ",c({},'tabindex="-1"')),d({},"Each tab’s anchor has an ",c({},"aria-controls")," attribute whose value is the id of the associated ",c({},'<div role="tabpanel">')),d({},"Each tab panel has an ",c({},"aria-labelledby")," attribute whose value is the id of its associated ",c({},'<a role="tab">'))),b({id:"Keyboard-Interactions"},"Keyboard Interactions"),p({},d({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),d({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),d({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),d({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus to the selected tab")),l({id:"Base"},"Base"),Object(n.createElement)(s.a,null,Object(r.f)(i.a)),l({id:"Examples"},"Examples"),h({id:"With-Icons"},"With Icons"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-icons")),h({id:"With-Badges"},"With Badges"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-badges")),l({id:"Modifiers"},"Modifiers"),h({id:"Interactions"},"Interactions"),b({id:"Item-Focus"},"Item Focus"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.b,"item-focus")),b({id:"Item-Active"},"Item Active"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.a)))},v=function(){return Object(o.a)(m())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/vertical-tabs/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],c=t[1],l=t[2],b=0,d=[];b<r.length;b++)i=r[b],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&d.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(h&&h(t);d.length;)d.shift()();return s.push.apply(s,l\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var c=a[r];0!==o[c]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},o={83:0},s=[];function i(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,i),a.l=!0,a.exports}i.m=e,i.c=n,i.d=function(e,t,a){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(a,n,function(t){return e[t]}.bind(null,n));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=r.push.bind(r);r.push=t,r=r.slice();for(var l=0;l<r.length;l++)t(r[l]);var h=c;return s.push([588,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},588:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return m})),a.d(t,"getContents",(function(){return v}));var n=a(0),o=a(4),s=a(2),i=(a(28),a(42),a(14),a(102)),r=a(1),c=o.c.code,l=o.c.h2,h=o.c.h3,b=o.c.h4,d=o.c.li,u=o.c.p,f=o.c.strong,p=o.c.ul,m=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"A component that shows groups of content, separated into tabs, and controlled by the tabs"),Object(n.createElement)(s.a,{exampleOnly:!0},Object(r.f)(i.b,"with-icons")),l({id:"About-Vertical-Tabs"},"About Vertical Tabs"),u({},"The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content. Only one tab's contents are visible at any given time."),u({},"This component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space."),h({id:"Implementation"},"Implementation"),u({},"The Tab Component has the following markup requirements:"),p({},d({},"The ",c({},".slds-is-active")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that is active (its content is being shown)."),d({},"The ",c({},".slds-has-focus")," modifier class is required on the ",c({},".slds-vertical-tabs__nav-item")," element that has focus."),d({},"The ",c({},".slds-show")," modifier class is required on the ",c({},".slds-vertical-tabs__content")," element that is being shown (their tab label is selected)."),d({},"The ",c({},".slds-hide")," modifier class is required on all ",c({},".slds-vertical-tabs__content")," elements that are not being shown (their tab label is not selected)."),d({},"If an icon or badge is to be used in combination with a tab nav item label, you can wrap an icon on the left of the label in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__left-icon"),". If you require an icon or badge to the right of the label, you can wrap the element in a ",c({},"span")," with the class ",c({},"slds-vertical-tabs__right-icon"),".")),h({id:"Accessibility"},"Accessibility"),u({},"Vertical Tabbed UIs have three parts with specific ",f({},"ARIA")," roles, markup and interactions:"),b({id:"ARIA-Roles"},"ARIA Roles"),p({},d({},"The tab list, which should have ",c({},'role="tablist"')),d({},"The tabs in that list, which should each be an ",c({},'<a role="tab">')," anchor wrapped in a ",c({},'<li role="presentation">')," li"),d({},"The tab panels, which display each tab's content and should each have ",c({},'role="tabpanel"'))),b({id:"Markup"},"Markup"),p({},d({},"Selected tab’s anchor has ",c({},'aria-selected="true"'),", all other tabs’ anchors have ",c({},'aria-selected="false"')),d({},"Selected tab’s anchor has ",c({},'tabindex="0"'),", all other tabs have ",c({},'tabindex="-1"')),d({},"Each tab’s anchor has an ",c({},"aria-controls")," attribute whose value is the id of the associated ",c({},'<div role="tabpanel">')),d({},"Each tab panel has an ",c({},"aria-labelledby")," attribute whose value is the id of its associated ",c({},'<a role="tab">'))),b({id:"Keyboard-Interactions"},"Keyboard Interactions"),p({},d({},"Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab"),d({},"Tab key, when focus is before the tab list, moves focus to the selected tab"),d({},"Tab key, when focus is on selected tab, moves focus into the selected tab’s associated tab panel or to the next focusable element on the page if that panel has no focusable elements"),d({},"Shift+Tab keys, when focus is on first element in a tab panel, move focus to the selected tab")),l({id:"Base"},"Base"),Object(n.createElement)(s.a,null,Object(r.f)(i.a)),l({id:"Examples"},"Examples"),h({id:"With-Icons"},"With Icons"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-icons")),h({id:"With-Badges"},"With Badges"),Object(n.createElement)(s.a,null,Object(r.f)(i.b,"with-badges")),l({id:"Modifiers"},"Modifiers"),h({id:"Interactions"},"Interactions"),b({id:"Item-Focus"},"Item Focus"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.b,"item-focus")),b({id:"Item-Active"},"Item Active"),Object(n.createElement)(s.a,{toggleCode:!1},Object(r.f)(i.a)))},v=function(){return Object(o.a)(m())}}});

package/__internal/chunked/docs/ui/components/visual-picker/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/visual-picker/docs.mdx.js"]=function(e){function a(a){for(var l,c,r=a[0],m=a[1],i=a[2],d=0,u=[];d<r.length;d++)c=r[d],Object.prototype.hasOwnProperty.call(s,c)&&s[c]&&u.push(s[c][0]),s[c]=0;for(l in m)Object.prototype.hasOwnProperty.call(m,l)&&(e[l]=m[l]);for(o&&o(a);u.length;)u.shift()();return n.push.apply(n,i\|\|[]),t()}function t(){for(var e,a=0;a<n.length;a++){for(var t=n[a],l=!0,r=1;r<t.length;r++){var m=t[r];0!==s[m]&&(l=!1)}l&&(n.splice(a--,1),e=c(c.s=t[0]))}return e}var l={},s={84:0},n=[];function c(a){if(l[a])return l[a].exports;var t=l[a]={i:a,l:!1,exports:{}};return e[a].call(t.exports,t,t.exports,c),t.l=!0,t.exports}c.m=e,c.c=l,c.d=function(e,a,t){c.o(e,a)\|\|Object.defineProperty(e,a,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var l in e)c.d(t,l,function(a){return e[a]}.bind(null,l));return t},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],m=r.push.bind(r);r.push=a,r=r.slice();for(var i=0;i<r.length;i++)a(r[i]);var o=m;return n.push([663,0]),t()}({0:function(e,a){e.exports=React},19:function(e,a){e.exports=ReactDOM},20:function(e,a){e.exports=JSBeautify},663:function(e,a,t){"use strict";t.r(a),t.d(a,"getElement",(function(){return L})),t.d(a,"getContents",(function(){return A}));var l=t(0),s=t.n(l),n=t(4),c=t(2),r=t(1),m=t(10),i=t(5),o=t.n(i),d=t(33),u=t(8),b=t(11),p=function(e){return s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},e.label)},E=function(e){var a=e.name,t=(e.id,e.hasIcon),l=e.type,n=e.sprite,c=e.symbol,i=e.label,d=e.size,u=e.children,b=e.checked,p=e.disabled,E=e.className,h=r.d.uniqueId("visual-picker-");return s.a.createElement("div",{className:o()("slds-visual-picker",{"slds-visual-picker_large":"large"===d,"slds-visual-picker_medium":"medium"===d,"slds-visual-picker_small":"small"===d},E)},s.a.createElement("input",{type:l,id:h,value:h,name:a,defaultChecked:b,disabled:p}),s.a.createElement("label",{htmlFor:h},t?s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center")},s.a.createElement("span",{className:"slds-is-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:"slds-icon slds-icon_large slds-icon-action-check",sprite:"action",symbol:"check"}))),s.a.createElement("span",{className:"slds-is-not-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:o()("slds-icon slds-icon-"+n+"-"+c+" slds-icon_large",{"slds-icon-text-default":"utility"===n}),sprite:n\|\|"action",symbol:c})))):s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center")},u),i?s.a.createElement("span",{className:"slds-visual-picker__body"},i):null,t?null:s.a.createElement("span",{className:"slds-icon_container slds-visual-picker__text-check"},s.a.createElement(m.a,{className:"slds-icon slds-icon-text-check slds-icon_x-small",sprite:"utility",symbol:"check"}))))},h=function(e){var a=e.children,t=e.type,l=e.sprite,n=e.hasIcon,c=r.d.uniqueId("example-unique-name-"),m=s.a.Children.map(a,(function(e){return s.a.isValidElement(e)?s.a.cloneElement(e,{name:c,type:t,sprite:n&&l,hasIcon:n}):e}));return s.a.createElement(s.a.Fragment,null,m)};h.defaultProps={type:"radio",sprite:"utility",hasIcon:!0};var _=s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"})))),x=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{disabled:!0,symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],f=[{id:"base_small",label:"Small base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"small"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"small"}))))},{id:"base",label:"Medium (default) base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))},{id:"base_large",label:"Large base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"large"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"large"}))))},{id:"checkbox-group_small",label:"Small base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"small"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"small"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"small"}))))},{id:"checkbox-group",label:"Medium base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"medium"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"medium"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"medium"}))))},{id:"checkbox-group_large",label:"Large base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"large"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"large"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"large"}))))}],g=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Professional"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete service CRM for teams of any size")],k=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Enterprise"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Everything you need to take support to the next level")],y=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Unlimited"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete support with enterprise-grade customization")],v=s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month ")))))),N=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",disabled:!0,label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))))))}],S=function(e){var a=e.symbol\|\|"knowledge_base",t=e.icon\|\|s.a.createElement(b.a,{className:"slds-icon-text-default",symbol:a,title:!1,assistiveText:!1});return s.a.createElement("a",{href:"#",className:o()("slds-box slds-box_link slds-box_x-small slds-media",e.className),onClick:function(e){return e.preventDefault()}},s.a.createElement("div",{className:"slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small"},t),s.a.createElement("div",{className:"slds-media__body slds-border_left slds-p-around_small"},e.children))},O=s.a.createElement("div",{className:"demo-only",style:{width:"24rem"}},s.a.createElement(S,{symbol:"knowledge_base"},s.a.createElement("h2",{className:"slds-truncate slds-text-heading_small",title:"Share the knowledge"},"Share the knowledge"),s.a.createElement("p",{className:"slds-m-top_small"},"Harness your team's collective know-how with our powerful knowledge base"))),j=s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about.")))))),w=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical",disabled:!0},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],C=n.c.h2,z=n.c.h3,D=n.c.h4,I=n.c.p,L=function(){return Object(l.createElement)(n.b,{},Object(l.createElement)("div",{className:"doc lead"},"A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced."),Object(l.createElement)(c.a,{exampleOnly:!0},Object(r.f)(f,"checkbox-group")),C({id:"Coverable-Content"},"Coverable Content"),z({id:"Base"},"Base"),I({},"Coverable content comes in three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below."),D({id:"Small"},"Small"),Object(l.createElement)(c.a,null,Object(r.f)(f,"base_small")),D({id:"Medium"},"Medium"),Object(l.createElement)(c.a,null,Object(r.f)(_)),D({id:"Large"},"Large"),Object(l.createElement)(c.a,null,Object(r.f)(f,"base_large")),z({id:"States"},"States"),D({id:"Disabled"},"Disabled"),Object(l.createElement)(c.a,null,Object(r.f)(x,"disabled")),z({id:"Checkbox-Examples"},"Checkbox Examples"),I({},"To allow users to select more than one option, use checkboxes instead of radio buttons."),D({id:"Small-Checkboxes"},"Small Checkboxes"),Object(l.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_small")),D({id:"Medium-Checkboxes"},"Medium Checkboxes"),Object(l.createElement)(c.a,null,Object(r.f)(f,"checkbox-group")),D({id:"Large-Checkboxes"},"Large Checkboxes"),Object(l.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_large")),C({id:"Non-Coverable-Content"},"Non Coverable Content"),z({id:"Base-2"},"Base"),Object(l.createElement)(c.a,null,Object(r.f)(v)),z({id:"States-2"},"States"),D({id:"Disabled-2"},"Disabled"),Object(l.createElement)(c.a,null,Object(r.f)(N,"disabled")),C({id:"Link"},"Link"),Object(l.createElement)(c.a,null,Object(r.f)(O)),C({id:"Vertical"},"Vertical"),z({id:"Base-3"},"Base"),Object(l.createElement)(c.a,null,Object(r.f)(j)),z({id:"States-3"},"States"),D({id:"Disabled-3"},"Disabled"),Object(l.createElement)(c.a,null,Object(r.f)(w,"disabled")))},A=function(){return Object(n.a)(L())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/visual-picker/docs.mdx.js"]=function(e){function a(a){for(var l,c,r=a[0],m=a[1],i=a[2],d=0,u=[];d<r.length;d++)c=r[d],Object.prototype.hasOwnProperty.call(s,c)&&s[c]&&u.push(s[c][0]),s[c]=0;for(l in m)Object.prototype.hasOwnProperty.call(m,l)&&(e[l]=m[l]);for(o&&o(a);u.length;)u.shift()();return n.push.apply(n,i\|\|[]),t()}function t(){for(var e,a=0;a<n.length;a++){for(var t=n[a],l=!0,r=1;r<t.length;r++){var m=t[r];0!==s[m]&&(l=!1)}l&&(n.splice(a--,1),e=c(c.s=t[0]))}return e}var l={},s={84:0},n=[];function c(a){if(l[a])return l[a].exports;var t=l[a]={i:a,l:!1,exports:{}};return e[a].call(t.exports,t,t.exports,c),t.l=!0,t.exports}c.m=e,c.c=l,c.d=function(e,a,t){c.o(e,a)\|\|Object.defineProperty(e,a,{enumerable:!0,get:t})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,a){if(1&a&&(e=c(e)),8&a)return e;if(4&a&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(c.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&a&&"string"!=typeof e)for(var l in e)c.d(t,l,function(a){return e[a]}.bind(null,l));return t},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,a){return Object.prototype.hasOwnProperty.call(e,a)},c.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],m=r.push.bind(r);r.push=a,r=r.slice();for(var i=0;i<r.length;i++)a(r[i]);var o=m;return n.push([664,0]),t()}({0:function(e,a){e.exports=React},20:function(e,a){e.exports=ReactDOM},21:function(e,a){e.exports=JSBeautify},664:function(e,a,t){"use strict";t.r(a),t.d(a,"getElement",(function(){return L})),t.d(a,"getContents",(function(){return A}));var l=t(0),s=t.n(l),n=t(4),c=t(2),r=t(1),m=t(10),i=t(5),o=t.n(i),d=t(34),u=t(8),b=t(11),p=function(e){return s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},e.label)},E=function(e){var a=e.name,t=(e.id,e.hasIcon),l=e.type,n=e.sprite,c=e.symbol,i=e.label,d=e.size,u=e.children,b=e.checked,p=e.disabled,E=e.className,h=r.d.uniqueId("visual-picker-");return s.a.createElement("div",{className:o()("slds-visual-picker",{"slds-visual-picker_large":"large"===d,"slds-visual-picker_medium":"medium"===d,"slds-visual-picker_small":"small"===d},E)},s.a.createElement("input",{type:l,id:h,value:h,name:a,defaultChecked:b,disabled:p}),s.a.createElement("label",{htmlFor:h},t?s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center")},s.a.createElement("span",{className:"slds-is-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:"slds-icon slds-icon_large slds-icon-action-check",sprite:"action",symbol:"check"}))),s.a.createElement("span",{className:"slds-is-not-selected"},s.a.createElement("span",{className:"slds-icon_container"},s.a.createElement(m.a,{className:o()("slds-icon slds-icon-"+n+"-"+c+" slds-icon_large",{"slds-icon-text-default":"utility"===n}),sprite:n\|\|"action",symbol:c})))):s.a.createElement("span",{className:o()("slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center")},u),i?s.a.createElement("span",{className:"slds-visual-picker__body"},i):null,t?null:s.a.createElement("span",{className:"slds-icon_container slds-visual-picker__text-check"},s.a.createElement(m.a,{className:"slds-icon slds-icon-text-check slds-icon_x-small",sprite:"utility",symbol:"check"}))))},h=function(e){var a=e.children,t=e.type,l=e.sprite,n=e.hasIcon,c=r.d.uniqueId("example-unique-name-"),m=s.a.Children.map(a,(function(e){return s.a.isValidElement(e)?s.a.cloneElement(e,{name:c,type:t,sprite:n&&l,hasIcon:n}):e}));return s.a.createElement(s.a.Fragment,null,m)};h.defaultProps={type:"radio",sprite:"utility",hasIcon:!0};var _=s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"})))),x=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{disabled:!0,symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))}],f=[{id:"base_small",label:"Small base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"small"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"small"}))))},{id:"base",label:"Medium (default) base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"medium"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"medium"}))))},{id:"base_large",label:"Large base",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an app"),s.a.createElement(u.c,null,s.a.createElement(h,null,s.a.createElement(E,{symbol:"connected_apps",label:s.a.createElement(p,{label:"Connected App"}),size:"large"}),s.a.createElement(E,{symbol:"custom_apps",label:s.a.createElement(p,{label:"Custom App"}),size:"large"}))))},{id:"checkbox-group_small",label:"Small base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"small"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"small"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"small"}))))},{id:"checkbox-group",label:"Medium base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"medium"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"medium"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"medium"}))))},{id:"checkbox-group_large",label:"Large base with checkboxes",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Add the following object(s)"),s.a.createElement(u.c,null,s.a.createElement(h,{sprite:"standard",type:"checkbox"},s.a.createElement(E,{symbol:"account",label:s.a.createElement(p,{label:"Account"}),size:"large"}),s.a.createElement(E,{symbol:"lead",label:s.a.createElement(p,{label:"Lead"}),size:"large"}),s.a.createElement(E,{symbol:"orders",label:s.a.createElement(p,{label:"Orders"}),size:"large"}))))}],g=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Professional"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete service CRM for teams of any size")],k=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Enterprise"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Everything you need to take support to the next level")],y=[s.a.createElement("span",{className:"slds-text-heading_small",key:r.d.uniqueId()},"Lightning Unlimited"),s.a.createElement("span",{className:"slds-text-title",key:r.d.uniqueId()},"Complete support with enterprise-grade customization")],v=s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month ")))))),N=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select a plan"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{size:"medium",label:g},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$30"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",label:k},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$150"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))),s.a.createElement(E,{size:"medium",disabled:!0,label:y},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_large"},"$300"),s.a.createElement("span",{className:"slds-text-title"},"USD/user/month "))))))}],S=function(e){var a=e.symbol\|\|"knowledge_base",t=e.icon\|\|s.a.createElement(b.a,{className:"slds-icon-text-default",symbol:a,title:!1,assistiveText:!1});return s.a.createElement("a",{href:"#",className:o()("slds-box slds-box_link slds-box_x-small slds-media",e.className),onClick:function(e){return e.preventDefault()}},s.a.createElement("div",{className:"slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small"},t),s.a.createElement("div",{className:"slds-media__body slds-border_left slds-p-around_small"},e.children))},O=s.a.createElement("div",{className:"demo-only",style:{width:"24rem"}},s.a.createElement(S,{symbol:"knowledge_base"},s.a.createElement("h2",{className:"slds-truncate slds-text-heading_small",title:"Share the knowledge"},"Share the knowledge"),s.a.createElement("p",{className:"slds-m-top_small"},"Harness your team's collective know-how with our powerful knowledge base"))),j=s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about.")))))),w=[{id:"disabled",label:"Disabled option",element:s.a.createElement(d.a,null,s.a.createElement(d.b,null,"Select an option"),s.a.createElement(u.c,null,s.a.createElement(h,{hasIcon:!1},s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical"},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))),s.a.createElement(E,{className:"slds-visual-picker_vertical",disabled:!0},s.a.createElement("span",null,s.a.createElement("span",{className:"slds-text-heading_medium slds-m-bottom_x-small"},"Item Text"),s.a.createElement("span",{className:"slds-text-title"},"Some optional item description to help the user better understand what this option is about."))))))}],C=n.c.h2,z=n.c.h3,D=n.c.h4,I=n.c.p,L=function(){return Object(l.createElement)(n.b,{},Object(l.createElement)("div",{className:"doc lead"},"A visual picker can be either radio buttons, checkboxes, or links that are visually enhanced."),Object(l.createElement)(c.a,{exampleOnly:!0},Object(r.f)(f,"checkbox-group")),C({id:"Coverable-Content"},"Coverable Content"),z({id:"Base"},"Base"),I({},"Coverable content comes in three sizes - small, medium (default) or large. The default uses radio buttons, allowing the user to pick only one. To allow multiple selections, follow the checkbox examples below."),D({id:"Small"},"Small"),Object(l.createElement)(c.a,null,Object(r.f)(f,"base_small")),D({id:"Medium"},"Medium"),Object(l.createElement)(c.a,null,Object(r.f)(_)),D({id:"Large"},"Large"),Object(l.createElement)(c.a,null,Object(r.f)(f,"base_large")),z({id:"States"},"States"),D({id:"Disabled"},"Disabled"),Object(l.createElement)(c.a,null,Object(r.f)(x,"disabled")),z({id:"Checkbox-Examples"},"Checkbox Examples"),I({},"To allow users to select more than one option, use checkboxes instead of radio buttons."),D({id:"Small-Checkboxes"},"Small Checkboxes"),Object(l.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_small")),D({id:"Medium-Checkboxes"},"Medium Checkboxes"),Object(l.createElement)(c.a,null,Object(r.f)(f,"checkbox-group")),D({id:"Large-Checkboxes"},"Large Checkboxes"),Object(l.createElement)(c.a,null,Object(r.f)(f,"checkbox-group_large")),C({id:"Non-Coverable-Content"},"Non Coverable Content"),z({id:"Base-2"},"Base"),Object(l.createElement)(c.a,null,Object(r.f)(v)),z({id:"States-2"},"States"),D({id:"Disabled-2"},"Disabled"),Object(l.createElement)(c.a,null,Object(r.f)(N,"disabled")),C({id:"Link"},"Link"),Object(l.createElement)(c.a,null,Object(r.f)(O)),C({id:"Vertical"},"Vertical"),z({id:"Base-3"},"Base"),Object(l.createElement)(c.a,null,Object(r.f)(j)),z({id:"States-3"},"States"),D({id:"Disabled-3"},"Disabled"),Object(l.createElement)(c.a,null,Object(r.f)(w,"disabled")))},A=function(){return Object(n.a)(L())}}});

package/__internal/chunked/docs/ui/components/welcome-mat/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/welcome-mat/docs.mdx.js"]=function(e){function t(t){for(var o,a,i=t[0],s=t[1],c=t[2],m=0,p=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(r,a)&&r[a]&&p.push(r[a][0]),r[a]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(u&&u(t);p.length;)p.shift()();return l.push.apply(l,c\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],o=!0,i=1;i<n.length;i++){var s=n[i];0!==r[s]&&(o=!1)}o&&(l.splice(t--,1),e=a(a.s=n[0]))}return e}var o={},r={85:0},l=[];function a(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,a),n.l=!0,n.exports}a.m=e,a.c=o,a.d=function(e,t,n){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)a.d(n,o,function(t){return e[t]}.bind(null,o));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var u=s;return l.push([651,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},651:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return xe})),n.d(t,"getContents",(function(){return Ie}));var o=n(0),r=n.n(o),l=n(4),a=n(3),i=n.n(a),s=n(12),c=n(29),u=n(8),m=function(e){return r.a.createElement("div",{className:"demo-only",style:{height:"800px"}},e.children)};m.propTypes={children:i.a.node.isRequired};var p=function(){return r.a.createElement(o.Fragment,null,r.a.createElement(s.a,{isBrand:!0},"Learn More"),r.a.createElement("div",{className:"slds-m-top_large"},r.a.createElement(u.b,null,r.a.createElement(c.a,{label:"Don't show this again"}))))},d=function(e){return r.a.createElement("h2",{className:"slds-welcome-mat__info-title",id:e.labelId},e.children)};d.propTypes={labelId:i.a.string.isRequired,children:i.a.string.isRequired};var f=function(e){return r.a.createElement("div",{className:"slds-welcome-mat__info-description slds-text-longform"},e.children)};f.propTypes={children:i.a.node.isRequired};var h=function(e){return r.a.createElement("div",{className:"slds-welcome-mat__info-actions"},r.a.createElement(p,null))};h.propTypes={children:i.a.node};var b=function(e){var t=e.labelId,n=e.headline,l=e.description,a=e.actions;return r.a.createElement(o.Fragment,null,r.a.createElement(d,{labelId:t},n),r.a.createElement(f,null,l),r.a.createElement(h,null,a))};b.propTypes={labelId:i.a.string.isRequired,headline:i.a.string.isRequired,description:i.a.object,actions:i.a.object},b.defaultProps={headline:"The Lightning Experience is here!",description:r.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var y=n(5),v=n.n(y),g=n(1),w=n(21),_=n(11),E=n(138);function O(e){return(O="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 S(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function j(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function T(e,t){return(T=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function x(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 n,o=R(e);if(t){var r=R(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return I(this,n)}}function I(e,t){return!t\|\|"object"!==O(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var k=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&&T(e,t)}(i,e);var t,n,l,a=x(i);function i(){return S(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.tile,n=e.isInfoOnly,l=t.completed,a=v()("slds-welcome-mat__tile",{"slds-welcome-mat__tile_complete":l,"slds-welcome-mat__tile_info-only":n}),i=function(){return r.a.createElement(o.Fragment,null,r.a.createElement("div",{className:v()("slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center")},r.a.createElement("div",{className:"slds-welcome-mat__tile-figure"},r.a.createElement("div",{className:"slds-welcome-mat__tile-icon-container"},r.a.createElement(_.a,{className:"slds-icon-text-default",symbol:t.symbol,title:!1,assistiveText:!1}),!n&&r.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check",symbol:"check"})))),r.a.createElement("div",{className:"slds-media__body"},r.a.createElement("div",{className:"slds-welcome-mat__tile-body"},r.a.createElement("h3",{className:"slds-welcome-mat__tile-title"},t.title),r.a.createElement("p",{className:"slds-welcome-mat__tile-description"},t.description))))};return r.a.createElement("li",{className:a},n?r.a.createElement("div",{className:"slds-media"},i()):r.a.createElement("a",{href:"#",className:"slds-box slds-box_link slds-media",onClick:function(e){return e.preventDefault()}},i()))}}])&&j(t.prototype,n),l&&j(t,l),i}(r.a.Component);k.propTypes={tile:i.a.object.isRequired},k.defaultProps={tile:{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",completed:!1}};var P=k,C=n(56);function N(e){return(N="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 L(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function q(e,t){return(q=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function M(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 n,o=A(e);if(t){var r=A(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return B(this,n)}}function B(e,t){return!t\|\|"object"!==N(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function A(e){return(A=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var D=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&&q(e,t)}(a,e);var t,n,o,l=M(a);function a(){return L(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,o=e.labelId,l=e.description,a=t/n100;return r.a.createElement(r.a.Fragment,null,r.a.createElement(d,{labelId:o},"The Lightning Experience is here!"),r.a.createElement(f,null,l),r.a.createElement("div",{className:"slds-welcome-mat__info-progress"},r.a.createElement("p",null,r.a.createElement("strong",null,t,"/",n," units completed"))),r.a.createElement(C.a,{value:a,className:"slds-progress-bar_circular"}))}}])&&W(t.prototype,n),o&&W(t,o),a}(r.a.Component);D.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired,description:i.a.element.isRequired},D.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1",description:r.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var z=D;function V(e){return(V="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function U(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function J(e,t){return(J=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function H(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 n,o=Y(e);if(t){var r=Y(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return K(this,n)}}function K(e,t){return!t\|\|"object"!==V(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function Y(e){return(Y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var $=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&&J(e,t)}(a,e);var t,n,o,l=H(a);function a(){return F(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"renderTiles",value:function(e){var t=this.props,n=t.tiles,o=t.isInfoOnly;return n.filter((function(t){return(t.completed\|\|!1)===e})).map((function(e,t){return r.a.createElement(P,{key:"".concat(g.d.uniqueId("welcome-mat-"),"-").concat(t),tile:e,isInfoOnly:o})}))}},{key:"completeTileCount",value:function(){var e=this.props.tiles;return e?e.filter((function(e){return!0===e.completed})).length:0}},{key:"totalTileCount",value:function(){var e=this.props.tiles;return e?e.length:0}},{key:"render",value:function(){var e=this.props,t=e.content,n=e.isInfoOnly,o=e.tiles,l=g.d.uniqueId("welcome-mat-"),a="".concat(l,"-label"),i="".concat(l,"-content"),s=v()("slds-welcome-mat",{"slds-welcome-mat_info-only":n,"slds-welcome-mat_splash":!o}),c=v()("slds-welcome-mat__info",{"slds-size_1-of-2":!!o,"slds-size_1-of-1":!o}),u=v()("slds-welcome-mat__tiles slds-size_1-of-2",{"slds-welcome-mat__tiles_info-only":n});return r.a.createElement(w.b,{className:"slds-modal_small","aria-labelledby":a},r.a.createElement(w.e,{className:"slds-modal__header_empty"}),r.a.createElement(w.c,{id:i},r.a.createElement("div",{className:s},r.a.createElement("div",{className:"slds-welcome-mat__content slds-grid"},r.a.createElement("div",{className:c},r.a.createElement("div",{className:"slds-welcome-mat__info-content"},t({complete:this.completeTileCount(),total:this.totalTileCount(),labelId:a}))),o&&o.length>0?r.a.createElement("ul",{className:u},this.renderTiles(!0),this.renderTiles(!1)):null))))}}])&&U(t.prototype,n),o&&U(t,o),a}(o.Component);$.propTypes={tiles:i.a.arrayOf(i.a.shape({symbol:i.a.string.isRequired,title:i.a.string.isRequired,description:i.a.string.isRequired,completed:i.a.bool})),content:i.a.func.isRequired,isInfoOnly:i.a.bool},$.defaultProps={tiles:[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(z,{complete:t,total:n,labelId:o})}};var G=$;function Q(e){return function(e){if(Array.isArray(e))return X(e)}(e)\|\|function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]\|\|null!=e["@@iterator"])return Array.from(e)}(e)\|\|function(e,t){if(!e)return;if("string"==typeof e)return X(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n\|\|"Set"===n)return Array.from(e);if("Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n))return X(e,t)}(e)\|\|function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function X(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var Z=[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],ee=[Object.assign({},Z[0],{completed:!0}),Object.assign({},Z[1],{completed:!0})].concat(Q(Z.slice(2))),te=Q(ee).concat(Z.slice(2)),ne=r.a.createElement(w.a,null,r.a.createElement(G,null)),oe=[{id:"default",label:"Default (Base)",demoStyles:"height: 800px;",element:ne},{id:"with-completed-tiles",label:"With Completed Tiles",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:ee}))},{id:"with-overflowing-tiles",label:"With Overflowing Tiles",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:te}))},{id:"with-overflowing-tiles-and-long-description",label:"With Overflowing Tiles and Long Description",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:te,content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(z,{complete:t,total:n,labelId:o,description:r.a.createElement(r.a.Fragment,null,r.a.createElement("p",null,"Integer nibh libero, pulvinar sed libero et, rhoncus convallis purus. Sed faucibus nibh vel arcu vestibulum, nec commodo sapien tincidunt. In dignissim faucibus ipsum, nec placerat dui pulvinar a mi nec lectus feugiat vel arcu rhoncus convallis, nibh libero."),r.a.createElement("p",null,"Sed vestibulum dui ac diam suscipit vehicula. Nam vestibulum mi nec lectus feugiat euismod. Phasellus in suscipit est."),r.a.createElement("p",null,"Morbi facilisis aliquet dapibus. Morbi ac leo viverra, cursus nibh eget, ultrices mauris. Integer pharetra, lorem ac hendrerit vulputate, sem elit luctus metus, sit amet vehicula justo ex at sem."))})}}))}];function re(e){return(re="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 le(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function ae(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function ie(e,t){return(ie=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function se(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 n,o=ue(e);if(t){var r=ue(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return ce(this,n)}}function ce(e,t){return!t\|\|"object"!==re(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function ue(e){return(ue=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var me=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&&ie(e,t)}(a,e);var t,n,o,l=se(a);function a(){return le(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,o=e.labelId,l=t/n100,a=100===l,i=a?r.a.createElement("p",null,"Cha-ching! You earned the badge."):r.a.createElement("p",null,t,"/",n," units completed");return r.a.createElement(r.a.Fragment,null,r.a.createElement("h2",{id:o,className:"slds-welcome-mat__info-title"},"The Lightning Experience is here!"),r.a.createElement("p",{className:"slds-welcome-mat__info-description slds-text-longform"},"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes."),r.a.createElement("div",{className:v()("slds-welcome-mat__info-progress",{"slds-welcome-mat__info-progress_complete":a})},r.a.createElement("div",{className:"slds-welcome-mat__info-badge-container"},r.a.createElement("img",{className:"slds-welcome-mat__info-badge",src:"/assets/images/welcome-mat/trailhead_badge@2x.png",width:"50",height:"50",alt:""}),r.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check slds-icon_xx-small",symbol:"check"})),r.a.createElement("p",null,r.a.createElement("strong",null,"Lightning Explorer")),i),a?r.a.createElement(s.a,{isBrand:!0},"View on your Trailblazer Profile"):r.a.createElement(C.a,{value:l,className:"slds-progress-bar_circular"}))}}])&&ae(t.prototype,n),o&&ae(t,o),a}(r.a.Component);me.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired},me.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1"};var pe=me,de=[];G.defaultProps.tiles.forEach((function(e){de.push(Object.assign({},e,{completed:!0}))}));var fe=r.a.createElement(w.a,null,r.a.createElement(G,{content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(pe,{complete:t,total:n,labelId:o})}})),he=[{id:"default",label:"Default (Trailhead)",demoStyles:"height: 800px;",element:fe},{id:"trailhead-complete",label:"Trailhead Complete",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:de,content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(pe,{complete:t,total:n,labelId:o})}}))}],be=r.a.createElement(w.a,null,r.a.createElement(G,{content:function(e){var t=e.labelId;return r.a.createElement(b,{labelId:t})},tiles:null})),ye=[{id:"default",label:"Default (Splash)",demoStyles:"height: 800px;",element:be}],ve=r.a.createElement(w.a,null,r.a.createElement(G,{content:function(e){var t=e.labelId;return r.a.createElement(b,{labelId:t})},isInfoOnly:!0})),ge=[{id:"default",label:"Default (Info Only)",demoStyles:"height: 800px;",element:ve}],we=(n(15),n(2)),_e=l.c.code,Ee=l.c.h2,Oe=l.c.h3,Se=l.c.li,je=l.c.p,Te=l.c.ul,xe=function(){return Object(o.createElement)(l.b,{},Object(o.createElement)("div",{className:"doc lead"},"A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic."),Object(o.createElement)(we.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(g.e)(oe,"with-completed-tiles")},Object(g.f)(oe,"with-completed-tiles")),Ee({id:"About-Welcome-Mat"},"About Welcome Mat"),Te({},Se({},"Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs."),Se({},"The Welcome Mat consists of two sections, the informational left pane and the actionable right pane."),Se({},"The left pane should be used to educate users as to the theme of the content displayed in the right pane."),Se({},"Icon choices, colors, and tile content can be customized to fit your experience.")),Ee({id:"Base"},"Base"),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(oe,"default")},Object(g.f)(oe,"default")),Ee({id:"Examples"},"Examples"),Oe({id:"With-Completed-Steps"},"With Completed Steps"),je({},"As users complete items in the list, the list updates to show as completed."),je({},"As tiles are completed, they move to the bottom of the list, and get a modifier class of ",_e({},"slds-welcome-mat__tile_complete"),"."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(oe,"with-completed-tiles")},Object(g.f)(oe,"with-completed-tiles")),Oe({id:"Trailhead-Connected"},"Trailhead Connected"),je({},"The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat."),je({},"Only Trailhead connected mats may have the Trailhead font for the header."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(oe,"default")},Object(g.f)(he,"default")),Oe({id:"Trailhead-Connected-Complete"},"Trailhead Connected - Complete"),je({},"When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page."),je({},"When a class of ",_e({},"slds-welcome-mat__info-progress_complete")," is added to the ",_e({},".slds-welcome-mat__info-progress")," element, the complete check mark will appear with the Trailhead badge."),je({},"Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(he,"trailhead-complete")},Object(g.f)(he,"trailhead-complete")),Oe({id:"Info-only"},"Info-only"),je({},'In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the ',_e({},"<a>")," tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows."),je({},"The tile container background changes from gray to white, which is done by applying the modifier class of ",_e({},"slds-welcome-mat__tiles_info-only")," to the ",_e({},"slds-welcome-mat__tiles")," element. Since the tiles aren't actionable, also apply the modifier class of ",_e({},"slds-welcome-mat__tile-info-only")," to each ",_e({},"slds-welcome-mat__tile")," element."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(ge,"default")},Object(g.f)(ge,"default")),Oe({id:"Splash"},"Splash"),je({},"The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(ye,"default")},Object(g.f)(ye,"default")))},Ie=function(){return Object(l.a)(xe())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/welcome-mat/docs.mdx.js"]=function(e){function t(t){for(var o,a,i=t[0],s=t[1],c=t[2],m=0,p=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(r,a)&&r[a]&&p.push(r[a][0]),r[a]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);for(u&&u(t);p.length;)p.shift()();return l.push.apply(l,c\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],o=!0,i=1;i<n.length;i++){var s=n[i];0!==r[s]&&(o=!1)}o&&(l.splice(t--,1),e=a(a.s=n[0]))}return e}var o={},r={85:0},l=[];function a(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,a),n.l=!0,n.exports}a.m=e,a.c=o,a.d=function(e,t,n){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)a.d(n,o,function(t){return e[t]}.bind(null,o));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var u=s;return l.push([652,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},652:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return xe})),n.d(t,"getContents",(function(){return Ie}));var o=n(0),r=n.n(o),l=n(4),a=n(3),i=n.n(a),s=n(12),c=n(30),u=n(8),m=function(e){return r.a.createElement("div",{className:"demo-only",style:{height:"800px"}},e.children)};m.propTypes={children:i.a.node.isRequired};var p=function(){return r.a.createElement(o.Fragment,null,r.a.createElement(s.a,{isBrand:!0},"Learn More"),r.a.createElement("div",{className:"slds-m-top_large"},r.a.createElement(u.b,null,r.a.createElement(c.a,{label:"Don't show this again"}))))},d=function(e){return r.a.createElement("h2",{className:"slds-welcome-mat__info-title",id:e.labelId},e.children)};d.propTypes={labelId:i.a.string.isRequired,children:i.a.string.isRequired};var f=function(e){return r.a.createElement("div",{className:"slds-welcome-mat__info-description slds-text-longform"},e.children)};f.propTypes={children:i.a.node.isRequired};var h=function(e){return r.a.createElement("div",{className:"slds-welcome-mat__info-actions"},r.a.createElement(p,null))};h.propTypes={children:i.a.node};var b=function(e){var t=e.labelId,n=e.headline,l=e.description,a=e.actions;return r.a.createElement(o.Fragment,null,r.a.createElement(d,{labelId:t},n),r.a.createElement(f,null,l),r.a.createElement(h,null,a))};b.propTypes={labelId:i.a.string.isRequired,headline:i.a.string.isRequired,description:i.a.object,actions:i.a.object},b.defaultProps={headline:"The Lightning Experience is here!",description:r.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var y=n(5),v=n.n(y),g=n(1),w=n(22),_=n(11),E=n(139);function O(e){return(O="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 S(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function j(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function T(e,t){return(T=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function x(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 n,o=R(e);if(t){var r=R(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return I(this,n)}}function I(e,t){return!t\|\|"object"!==O(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var k=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&&T(e,t)}(i,e);var t,n,l,a=x(i);function i(){return S(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.tile,n=e.isInfoOnly,l=t.completed,a=v()("slds-welcome-mat__tile",{"slds-welcome-mat__tile_complete":l,"slds-welcome-mat__tile_info-only":n}),i=function(){return r.a.createElement(o.Fragment,null,r.a.createElement("div",{className:v()("slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center")},r.a.createElement("div",{className:"slds-welcome-mat__tile-figure"},r.a.createElement("div",{className:"slds-welcome-mat__tile-icon-container"},r.a.createElement(_.a,{className:"slds-icon-text-default",symbol:t.symbol,title:!1,assistiveText:!1}),!n&&r.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check",symbol:"check"})))),r.a.createElement("div",{className:"slds-media__body"},r.a.createElement("div",{className:"slds-welcome-mat__tile-body"},r.a.createElement("h3",{className:"slds-welcome-mat__tile-title"},t.title),r.a.createElement("p",{className:"slds-welcome-mat__tile-description"},t.description))))};return r.a.createElement("li",{className:a},n?r.a.createElement("div",{className:"slds-media"},i()):r.a.createElement("a",{href:"#",className:"slds-box slds-box_link slds-media",onClick:function(e){return e.preventDefault()}},i()))}}])&&j(t.prototype,n),l&&j(t,l),i}(r.a.Component);k.propTypes={tile:i.a.object.isRequired},k.defaultProps={tile:{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",completed:!1}};var P=k,C=n(57);function N(e){return(N="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 L(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function q(e,t){return(q=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function M(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 n,o=A(e);if(t){var r=A(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return B(this,n)}}function B(e,t){return!t\|\|"object"!==N(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function A(e){return(A=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var D=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&&q(e,t)}(a,e);var t,n,o,l=M(a);function a(){return L(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,o=e.labelId,l=e.description,a=t/n100;return r.a.createElement(r.a.Fragment,null,r.a.createElement(d,{labelId:o},"The Lightning Experience is here!"),r.a.createElement(f,null,l),r.a.createElement("div",{className:"slds-welcome-mat__info-progress"},r.a.createElement("p",null,r.a.createElement("strong",null,t,"/",n," units completed"))),r.a.createElement(C.a,{value:a,className:"slds-progress-bar_circular"}))}}])&&W(t.prototype,n),o&&W(t,o),a}(r.a.Component);D.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired,description:i.a.element.isRequired},D.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1",description:r.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var z=D;function V(e){return(V="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function U(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function J(e,t){return(J=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function H(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 n,o=Y(e);if(t){var r=Y(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return K(this,n)}}function K(e,t){return!t\|\|"object"!==V(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function Y(e){return(Y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var $=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&&J(e,t)}(a,e);var t,n,o,l=H(a);function a(){return F(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"renderTiles",value:function(e){var t=this.props,n=t.tiles,o=t.isInfoOnly;return n.filter((function(t){return(t.completed\|\|!1)===e})).map((function(e,t){return r.a.createElement(P,{key:"".concat(g.d.uniqueId("welcome-mat-"),"-").concat(t),tile:e,isInfoOnly:o})}))}},{key:"completeTileCount",value:function(){var e=this.props.tiles;return e?e.filter((function(e){return!0===e.completed})).length:0}},{key:"totalTileCount",value:function(){var e=this.props.tiles;return e?e.length:0}},{key:"render",value:function(){var e=this.props,t=e.content,n=e.isInfoOnly,o=e.tiles,l=g.d.uniqueId("welcome-mat-"),a="".concat(l,"-label"),i="".concat(l,"-content"),s=v()("slds-welcome-mat",{"slds-welcome-mat_info-only":n,"slds-welcome-mat_splash":!o}),c=v()("slds-welcome-mat__info",{"slds-size_1-of-2":!!o,"slds-size_1-of-1":!o}),u=v()("slds-welcome-mat__tiles slds-size_1-of-2",{"slds-welcome-mat__tiles_info-only":n});return r.a.createElement(w.b,{className:"slds-modal_small","aria-labelledby":a},r.a.createElement(w.e,{className:"slds-modal__header_empty"}),r.a.createElement(w.c,{id:i},r.a.createElement("div",{className:s},r.a.createElement("div",{className:"slds-welcome-mat__content slds-grid"},r.a.createElement("div",{className:c},r.a.createElement("div",{className:"slds-welcome-mat__info-content"},t({complete:this.completeTileCount(),total:this.totalTileCount(),labelId:a}))),o&&o.length>0?r.a.createElement("ul",{className:u},this.renderTiles(!0),this.renderTiles(!1)):null))))}}])&&U(t.prototype,n),o&&U(t,o),a}(o.Component);$.propTypes={tiles:i.a.arrayOf(i.a.shape({symbol:i.a.string.isRequired,title:i.a.string.isRequired,description:i.a.string.isRequired,completed:i.a.bool})),content:i.a.func.isRequired,isInfoOnly:i.a.bool},$.defaultProps={tiles:[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(z,{complete:t,total:n,labelId:o})}};var G=$;function Q(e){return function(e){if(Array.isArray(e))return X(e)}(e)\|\|function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]\|\|null!=e["@@iterator"])return Array.from(e)}(e)\|\|function(e,t){if(!e)return;if("string"==typeof e)return X(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n\|\|"Set"===n)return Array.from(e);if("Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n))return X(e,t)}(e)\|\|function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function X(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var Z=[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],ee=[Object.assign({},Z[0],{completed:!0}),Object.assign({},Z[1],{completed:!0})].concat(Q(Z.slice(2))),te=Q(ee).concat(Z.slice(2)),ne=r.a.createElement(w.a,null,r.a.createElement(G,null)),oe=[{id:"default",label:"Default (Base)",demoStyles:"height: 800px;",element:ne},{id:"with-completed-tiles",label:"With Completed Tiles",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:ee}))},{id:"with-overflowing-tiles",label:"With Overflowing Tiles",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:te}))},{id:"with-overflowing-tiles-and-long-description",label:"With Overflowing Tiles and Long Description",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:te,content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(z,{complete:t,total:n,labelId:o,description:r.a.createElement(r.a.Fragment,null,r.a.createElement("p",null,"Integer nibh libero, pulvinar sed libero et, rhoncus convallis purus. Sed faucibus nibh vel arcu vestibulum, nec commodo sapien tincidunt. In dignissim faucibus ipsum, nec placerat dui pulvinar a mi nec lectus feugiat vel arcu rhoncus convallis, nibh libero."),r.a.createElement("p",null,"Sed vestibulum dui ac diam suscipit vehicula. Nam vestibulum mi nec lectus feugiat euismod. Phasellus in suscipit est."),r.a.createElement("p",null,"Morbi facilisis aliquet dapibus. Morbi ac leo viverra, cursus nibh eget, ultrices mauris. Integer pharetra, lorem ac hendrerit vulputate, sem elit luctus metus, sit amet vehicula justo ex at sem."))})}}))}];function re(e){return(re="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 le(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function ae(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable\|\|!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function ie(e,t){return(ie=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function se(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 n,o=ue(e);if(t){var r=ue(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return ce(this,n)}}function ce(e,t){return!t\|\|"object"!==re(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function ue(e){return(ue=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var me=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&&ie(e,t)}(a,e);var t,n,o,l=se(a);function a(){return le(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,o=e.labelId,l=t/n100,a=100===l,i=a?r.a.createElement("p",null,"Cha-ching! You earned the badge."):r.a.createElement("p",null,t,"/",n," units completed");return r.a.createElement(r.a.Fragment,null,r.a.createElement("h2",{id:o,className:"slds-welcome-mat__info-title"},"The Lightning Experience is here!"),r.a.createElement("p",{className:"slds-welcome-mat__info-description slds-text-longform"},"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes."),r.a.createElement("div",{className:v()("slds-welcome-mat__info-progress",{"slds-welcome-mat__info-progress_complete":a})},r.a.createElement("div",{className:"slds-welcome-mat__info-badge-container"},r.a.createElement("img",{className:"slds-welcome-mat__info-badge",src:"/assets/images/welcome-mat/trailhead_badge@2x.png",width:"50",height:"50",alt:""}),r.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check slds-icon_xx-small",symbol:"check"})),r.a.createElement("p",null,r.a.createElement("strong",null,"Lightning Explorer")),i),a?r.a.createElement(s.a,{isBrand:!0},"View on your Trailblazer Profile"):r.a.createElement(C.a,{value:l,className:"slds-progress-bar_circular"}))}}])&&ae(t.prototype,n),o&&ae(t,o),a}(r.a.Component);me.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired},me.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1"};var pe=me,de=[];G.defaultProps.tiles.forEach((function(e){de.push(Object.assign({},e,{completed:!0}))}));var fe=r.a.createElement(w.a,null,r.a.createElement(G,{content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(pe,{complete:t,total:n,labelId:o})}})),he=[{id:"default",label:"Default (Trailhead)",demoStyles:"height: 800px;",element:fe},{id:"trailhead-complete",label:"Trailhead Complete",demoStyles:"height: 800px;",element:r.a.createElement(w.a,null,r.a.createElement(G,{tiles:de,content:function(e){var t=e.complete,n=e.total,o=e.labelId;return r.a.createElement(pe,{complete:t,total:n,labelId:o})}}))}],be=r.a.createElement(w.a,null,r.a.createElement(G,{content:function(e){var t=e.labelId;return r.a.createElement(b,{labelId:t})},tiles:null})),ye=[{id:"default",label:"Default (Splash)",demoStyles:"height: 800px;",element:be}],ve=r.a.createElement(w.a,null,r.a.createElement(G,{content:function(e){var t=e.labelId;return r.a.createElement(b,{labelId:t})},isInfoOnly:!0})),ge=[{id:"default",label:"Default (Info Only)",demoStyles:"height: 800px;",element:ve}],we=(n(15),n(2)),_e=l.c.code,Ee=l.c.h2,Oe=l.c.h3,Se=l.c.li,je=l.c.p,Te=l.c.ul,xe=function(){return Object(o.createElement)(l.b,{},Object(o.createElement)("div",{className:"doc lead"},"A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic."),Object(o.createElement)(we.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(g.e)(oe,"with-completed-tiles")},Object(g.f)(oe,"with-completed-tiles")),Ee({id:"About-Welcome-Mat"},"About Welcome Mat"),Te({},Se({},"Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs."),Se({},"The Welcome Mat consists of two sections, the informational left pane and the actionable right pane."),Se({},"The left pane should be used to educate users as to the theme of the content displayed in the right pane."),Se({},"Icon choices, colors, and tile content can be customized to fit your experience.")),Ee({id:"Base"},"Base"),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(oe,"default")},Object(g.f)(oe,"default")),Ee({id:"Examples"},"Examples"),Oe({id:"With-Completed-Steps"},"With Completed Steps"),je({},"As users complete items in the list, the list updates to show as completed."),je({},"As tiles are completed, they move to the bottom of the list, and get a modifier class of ",_e({},"slds-welcome-mat__tile_complete"),"."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(oe,"with-completed-tiles")},Object(g.f)(oe,"with-completed-tiles")),Oe({id:"Trailhead-Connected"},"Trailhead Connected"),je({},"The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat."),je({},"Only Trailhead connected mats may have the Trailhead font for the header."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(oe,"default")},Object(g.f)(he,"default")),Oe({id:"Trailhead-Connected-Complete"},"Trailhead Connected - Complete"),je({},"When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page."),je({},"When a class of ",_e({},"slds-welcome-mat__info-progress_complete")," is added to the ",_e({},".slds-welcome-mat__info-progress")," element, the complete check mark will appear with the Trailhead badge."),je({},"Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(he,"trailhead-complete")},Object(g.f)(he,"trailhead-complete")),Oe({id:"Info-only"},"Info-only"),je({},'In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the ',_e({},"<a>")," tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows."),je({},"The tile container background changes from gray to white, which is done by applying the modifier class of ",_e({},"slds-welcome-mat__tiles_info-only")," to the ",_e({},"slds-welcome-mat__tiles")," element. Since the tiles aren't actionable, also apply the modifier class of ",_e({},"slds-welcome-mat__tile-info-only")," to each ",_e({},"slds-welcome-mat__tile")," element."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(ge,"default")},Object(g.f)(ge,"default")),Oe({id:"Splash"},"Splash"),je({},"The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility."),Object(o.createElement)(we.a,{isViewport:!0,demoStyles:Object(g.e)(ye,"default")},Object(g.f)(ye,"default")))},Ie=function(){return Object(l.a)(xe())}}});

package/__internal/chunked/docs/ui/utilities/alignment/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/alignment/docs.mdx.js"]=function(e){function t(t){for(var r,i,u=t[0],c=t[1],a=t[2],f=0,p=[];f<u.length;f++)i=u[f],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(s&&s(t);p.length;)p.shift()();return l.push.apply(l,a\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(l.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},o={86:0},l=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=u.push.bind(u);u.push=t,u=u.slice();for(var a=0;a<u.length;a++)t(u[a]);var s=c;return l.push([~~739~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~739~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return p}));var r=n(0),o=n.n(r),l=n(4),i=n(2),u=n(1),c=[{id:"absolute-center",label:"Absolute center",element:o.a.createElement("div",{className:"slds-align_absolute-center",style:{height:"5rem"}},"This content will be positioned in the absolute center of its container")}],a=l.c.h2,s=l.c.h3,f=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"Alignment utilities will assist with general alignment problems"),a({id:"Examples"},"Examples"),s({id:"Absolute-Center"},"Absolute Center"),Object(r.createElement)(i.a,null,Object(u.f)(c,"absolute-center")))},p=function(){return Object(l.a)(f())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/alignment/docs.mdx.js"]=function(e){function t(t){for(var r,i,u=t[0],c=t[1],a=t[2],f=0,p=[];f<u.length;f++)i=u[f],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(s&&s(t);p.length;)p.shift()();return l.push.apply(l,a\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,u=1;u<n.length;u++){var c=n[u];0!==o[c]&&(r=!1)}r&&(l.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},o={86:0},l=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var u=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=u.push.bind(u);u.push=t,u=u.slice();for(var a=0;a<u.length;a++)t(u[a]);var s=c;return l.push([740,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},740:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return f})),n.d(t,"getContents",(function(){return p}));var r=n(0),o=n.n(r),l=n(4),i=n(2),u=n(1),c=[{id:"absolute-center",label:"Absolute center",element:o.a.createElement("div",{className:"slds-align_absolute-center",style:{height:"5rem"}},"This content will be positioned in the absolute center of its container")}],a=l.c.h2,s=l.c.h3,f=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"Alignment utilities will assist with general alignment problems"),a({id:"Examples"},"Examples"),s({id:"Absolute-Center"},"Absolute Center"),Object(r.createElement)(i.a,null,Object(u.f)(c,"absolute-center")))},p=function(){return Object(l.a)(f())}}});

package/__internal/chunked/docs/ui/utilities/borders/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/borders/docs.mdx.js"]=function(e){function t(t){for(var n,a,c=t[0],i=t[1],s=t[2],d=0,f=[];d<c.length;d++)a=c[d],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&f.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);f.length;)f.shift()();return l.push.apply(l,s\|\|[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,c=1;c<r.length;c++){var i=r[c];0!==o[i]&&(n=!1)}n&&(l.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={87:0},l=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var u=i;return l.push([~~689~~,0]),r()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~689~~:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return d})),r.d(t,"getContents",(function(){return f}));var n=r(0),o=r.n(n),l=r(4),a=r(2),c=r(1),i=[{id:"top",label:"Top",element:o.a.createElement("div",{className:"slds-border_top"},"This should have a top border.")},{id:"right",label:"Right",element:o.a.createElement("div",{className:"slds-border_right"},"This should have a right border.")},{id:"bottom",label:"Bottom",element:o.a.createElement("div",{className:"slds-border_bottom"},"This should have a bottom border.")},{id:"left",label:"Left",element:o.a.createElement("div",{className:"slds-border_left"},"This should have a left border.")}],s=l.c.h2,u=l.c.h3,d=function(){return Object(n.createElement)(l.b,{},Object(n.createElement)("div",{className:"doc lead"},"Use border utility classes to add borders to elements"),s({id:"Examples"},"Examples"),u({id:"Top"},"Top"),Object(n.createElement)(a.a,null,Object(c.f)(i,"top")),u({id:"Right"},"Right"),Object(n.createElement)(a.a,null,Object(c.f)(i,"right")),u({id:"Bottom"},"Bottom"),Object(n.createElement)(a.a,null,Object(c.f)(i,"bottom")),u({id:"Left"},"Left"),Object(n.createElement)(a.a,null,Object(c.f)(i,"left")))},f=function(){return Object(l.a)(d())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/utilities/borders/docs.mdx.js"]=function(e){function t(t){for(var n,a,c=t[0],i=t[1],s=t[2],d=0,f=[];d<c.length;d++)a=c[d],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&f.push(o[a][0]),o[a]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);f.length;)f.shift()();return l.push.apply(l,s\|\|[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,c=1;c<r.length;c++){var i=r[c];0!==o[i]&&(n=!1)}n&&(l.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={87:0},l=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var u=i;return l.push([690,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},690:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return d})),r.d(t,"getContents",(function(){return f}));var n=r(0),o=r.n(n),l=r(4),a=r(2),c=r(1),i=[{id:"top",label:"Top",element:o.a.createElement("div",{className:"slds-border_top"},"This should have a top border.")},{id:"right",label:"Right",element:o.a.createElement("div",{className:"slds-border_right"},"This should have a right border.")},{id:"bottom",label:"Bottom",element:o.a.createElement("div",{className:"slds-border_bottom"},"This should have a bottom border.")},{id:"left",label:"Left",element:o.a.createElement("div",{className:"slds-border_left"},"This should have a left border.")}],s=l.c.h2,u=l.c.h3,d=function(){return Object(n.createElement)(l.b,{},Object(n.createElement)("div",{className:"doc lead"},"Use border utility classes to add borders to elements"),s({id:"Examples"},"Examples"),u({id:"Top"},"Top"),Object(n.createElement)(a.a,null,Object(c.f)(i,"top")),u({id:"Right"},"Right"),Object(n.createElement)(a.a,null,Object(c.f)(i,"right")),u({id:"Bottom"},"Bottom"),Object(n.createElement)(a.a,null,Object(c.f)(i,"bottom")),u({id:"Left"},"Left"),Object(n.createElement)(a.a,null,Object(c.f)(i,"left")))},f=function(){return Object(l.a)(d())}}});