npm - @salesforce-ux/design-system - Versions diffs - 2.27.1 → 2.27.2 - Mend

@salesforce-ux/design-system 2.27.1 → 2.27.2

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 (859) hide show

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/accordion/docs.mdx.js"]=function(e){function r(r){for(var t,a,i=r[0],s=r[1],d=r[2],m=0,u=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(c,a)&&c[a]&&u.push(c[a][0]),c[a]=0;for(t in s)Object.prototype.hasOwnProperty.call(s,t)&&(e[t]=s[t]);for(l&&l(r);u.length;)u.shift()();return o.push.apply(o,d\|\|[]),n()}function n(){for(var e,r=0;r<o.length;r++){for(var n=o[r],t=!0,i=1;i<n.length;i++){var s=n[i];0!==c[s]&&(t=!1)}t&&(o.splice(r--,1),e=a(a.s=n[0]))}return e}var t={},c={1:0},o=[];function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=t,a.d=function(e,r,n){a.o(e,r)\|\|Object.defineProperty(e,r,{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,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"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&r&&"string"!=typeof e)for(var t in e)a.d(n,t,function(r){return e[r]}.bind(null,t));return n},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=r,i=i.slice();for(var d=0;d<i.length;d++)r(i[d]);var l=s;return o.push([743,0]),n()}({0:function(e,r){e.exports=React},20:function(e,r){e.exports=ReactDOM},22:function(e,r){e.exports=JSBeautify},743:function(e,r,n){"use strict";n.r(r),n.d(r,"getElement",(function(){return T})),n.d(r,"getContents",(function(){return B}));var t=n(0),c=n.n(t),o=n(4),a=n(2),i=(n(14),n(1)),s=n(40),d=n(25),l=n.n(d),m=n(3),u=n.n(m),f=n(5),y=n.n(f),p=n(12),h=n(9),A=n(88);function b(e,r){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==n)return;var t,c,o=[],a=!0,i=!1;try{for(n=n.call(e);!(a=(t=n.next()).done)&&(o.push(t.value),!r\|\|o.length!==r);a=!0);}catch(e){i=!0,c=e}finally{try{a\|\|null==n.return\|\|n.return()}finally{if(i)throw c}}return o}(e,r)\|\|function(e,r){if(!e)return;if("string"==typeof e)return I(e,r);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 I(e,r)}(e,r)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function I(e,r){(null==r\|\|r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}var g=function(e){return c.a.createElement("ul",{className:"slds-accordion"},e.children)};g.propTypes={children:u.a.node};var E=function(e){var r=e.isOpen,n=b(Object(t.useState)(r),2),o=n[0],a=n[1],i=!o;return c.a.createElement("li",{className:"slds-accordion__list-item"},c.a.createElement("section",{className:y()("slds-accordion__section",o&&"slds-is-open")},c.a.createElement("div",{className:"slds-accordion__summary"},c.a.createElement(A.a,{level:"2",className:"slds-accordion__summary-heading"},c.a.createElement(p.a,{"aria-controls":e.referenceId,"aria-expanded":o,title:e.summary,isReset:!0,className:"slds-accordion__summary-action",onClick:function(e){e.stopPropagation(),a(!o)}},c.a.createElement(h.a,{className:"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"switch"}),c.a.createElement("span",{className:"slds-accordion__summary-content"},e.summary))),e.actionMenu&&c.a.cloneElement(e.actionMenu)),c.a.createElement("div",{hidden:i,className:"slds-accordion__content",id:e.referenceId},e.children)))};E.propTypes={isOpen:u.a.bool,referenceId:u.a.string,summary:u.a.string,actionMenu:u.a.node,children:u.a.node},E.defaultProps={isOpen:!1};var v=g,O=n(152),_=n(13),w=function(){return c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))},S=c.a.createElement(w,null),j=(l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),[{id:"long-heading-truncated",label:"Long Section Heading with Truncation for larger screens",demoStyles:"max-width: 500px;",storybookStyles:!0,element:c.a.createElement(_.d,null,c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C")))},{id:"nested-accordions",label:"Nested Accordions",element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},c.a.createElement(v,null,c.a.createElement(E,{summary:"Nested accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Nested accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"))),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))},{id:"styled",label:"Wrapped in Card",element:c.a.createElement("div",{className:"slds-card"},c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C")))},{id:"has-action-overflow",label:"Has Action Overflow Menu",element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",actionMenu:c.a.createElement(O.a,{position:"right",dropdownIsOpen:!1}),isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",actionMenu:c.a.createElement(O.a,{position:"right",dropdownIsOpen:!1}),referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",actionMenu:c.a.createElement(O.a,{position:"right",dropdownIsOpen:!1}),referenceId:l()("referenceId-")},"Accordion details - C"))},{id:"section-background-color",label:"Accordion Section - Background Color",demoStyles:"--slds-c-accordion-summary-color-background: lightblue",storybookStyles:!0,element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))},{id:"section-background-color",label:"Accordion Section - Text Color",demoStyles:"--slds-c-accordion-heading-text-color: green; --slds-c-accordion-heading-text-color-hover: red",storybookStyles:!0,element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))}]),x=o.c.a,k=o.c.code,C=o.c.h2,M=o.c.h3,N=o.c.p,T=function(){return Object(t.createElement)(o.b,{},Object(t.createElement)("div",{className:"doc lead"},"An accordion allows a user to toggle the display of a section of content."),Object(t.createElement)(a.a,{exampleOnly:!0},Object(i.f)(j,"styled")),C({id:"About-Accordions"},"About Accordions"),N({},"Accordions are composed of a list of longer blocks of text, with a header button to toggle the visibility of each block."),C({id:"Accessibility"},"Accessibility"),N({},"Availability of accordion content to assistive technology requires the use of ",k({},"aria-controls")," and toggling ",k({},"aria-expanded")," as regions are expanded and collapsed."),N({},"Accordion keyboard interaction should follow the recommendations of the ",x({href:"https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction"},"WAI-ARIA Authoring Practices for accordions"),"."),N({},"There are additional accessibility considerations within the ",x({href:"/components/buttons"},"Buttons")," and ",x({href:"/components/menus"},"Menus"),"."),C({id:"Default"},"Default"),Object(t.createElement)(a.a,null,Object(i.f)(S)),M({id:"Structure-and-Implementation"},"Structure and Implementation"),N({},"An accordion is implemented as an unordered list with a class of ",k({},"slds-accordion"),". Inside the list, each chunk of content is inside both a list item with class of ",k({},"slds-accordion__list-item")," and a section with a class of ",k({},"slds-accordion__section"),"."),N({},"The content itself is contained within a div with the class ",k({},"slds-accordion__content"),", an ID that corresponds to the ",k({},"aria-control")," on the button and the hidden attribute."),N({},"Content visibility is toggled via a ",x({href:"/components/buttons"},"Button")," in the H3 heading. To make accordion content visible, the section is given the class ",k({},"slds-is-open"),", the button is changed from ",k({},'aria-expanded="false"')," to ",k({},'aria-expanded="true"'),", and the hidden attribute is removed from the content div."),C({id:"Examples"},"Examples"),M({id:"With-Action-Overflow-Menu"},"With Action Overflow Menu"),Object(t.createElement)(a.a,null,Object(i.f)(j,"has-action-overflow")),M({id:"In-a-Card"},"In a Card"),Object(t.createElement)(a.a,null,Object(i.f)(j,"styled")),M({id:"Nested"},"Nested"),Object(t.createElement)(a.a,null,Object(i.f)(j,"nested-accordions")),M({id:"Heading-with-Truncation"},"Heading with Truncation"),Object(t.createElement)(a.a,null,Object(i.f)(j,"long-heading-truncated")),C({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(t.createElement)(s.a,{name:"accordion",type:"component"}))},B=function(){return Object(o.a)(T())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/accordion/docs.mdx.js"]=function(e){function r(r){for(var t,a,i=r[0],s=r[1],d=r[2],m=0,u=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(c,a)&&c[a]&&u.push(c[a][0]),c[a]=0;for(t in s)Object.prototype.hasOwnProperty.call(s,t)&&(e[t]=s[t]);for(l&&l(r);u.length;)u.shift()();return o.push.apply(o,d\|\|[]),n()}function n(){for(var e,r=0;r<o.length;r++){for(var n=o[r],t=!0,i=1;i<n.length;i++){var s=n[i];0!==c[s]&&(t=!1)}t&&(o.splice(r--,1),e=a(a.s=n[0]))}return e}var t={},c={1:0},o=[];function a(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=t,a.d=function(e,r,n){a.o(e,r)\|\|Object.defineProperty(e,r,{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,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"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&r&&"string"!=typeof e)for(var t in e)a.d(n,t,function(r){return e[r]}.bind(null,t));return n},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=i.push.bind(i);i.push=r,i=i.slice();for(var d=0;d<i.length;d++)r(i[d]);var l=s;return o.push([744,0]),n()}({0:function(e,r){e.exports=React},20:function(e,r){e.exports=ReactDOM},22:function(e,r){e.exports=JSBeautify},744:function(e,r,n){"use strict";n.r(r),n.d(r,"getElement",(function(){return T})),n.d(r,"getContents",(function(){return B}));var t=n(0),c=n.n(t),o=n(4),a=n(2),i=(n(13),n(1)),s=n(40),d=n(25),l=n.n(d),m=n(3),u=n.n(m),f=n(5),y=n.n(f),p=n(12),h=n(9),A=n(89);function b(e,r){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,r){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==n)return;var t,c,o=[],a=!0,i=!1;try{for(n=n.call(e);!(a=(t=n.next()).done)&&(o.push(t.value),!r\|\|o.length!==r);a=!0);}catch(e){i=!0,c=e}finally{try{a\|\|null==n.return\|\|n.return()}finally{if(i)throw c}}return o}(e,r)\|\|function(e,r){if(!e)return;if("string"==typeof e)return I(e,r);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 I(e,r)}(e,r)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function I(e,r){(null==r\|\|r>e.length)&&(r=e.length);for(var n=0,t=new Array(r);n<r;n++)t[n]=e[n];return t}var g=function(e){return c.a.createElement("ul",{className:"slds-accordion"},e.children)};g.propTypes={children:u.a.node};var E=function(e){var r=e.isOpen,n=b(Object(t.useState)(r),2),o=n[0],a=n[1],i=!o;return c.a.createElement("li",{className:"slds-accordion__list-item"},c.a.createElement("section",{className:y()("slds-accordion__section",o&&"slds-is-open")},c.a.createElement("div",{className:"slds-accordion__summary"},c.a.createElement(A.a,{level:"2",className:"slds-accordion__summary-heading"},c.a.createElement(p.a,{"aria-controls":e.referenceId,"aria-expanded":o,title:e.summary,isReset:!0,className:"slds-accordion__summary-action",onClick:function(e){e.stopPropagation(),a(!o)}},c.a.createElement(h.a,{className:"slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"switch"}),c.a.createElement("span",{className:"slds-accordion__summary-content"},e.summary))),e.actionMenu&&c.a.cloneElement(e.actionMenu)),c.a.createElement("div",{hidden:i,className:"slds-accordion__content",id:e.referenceId},e.children)))};E.propTypes={isOpen:u.a.bool,referenceId:u.a.string,summary:u.a.string,actionMenu:u.a.node,children:u.a.node},E.defaultProps={isOpen:!1};var v=g,O=n(153),_=n(14),w=function(){return c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))},S=c.a.createElement(w,null),j=(l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),l()("referenceId-"),[{id:"long-heading-truncated",label:"Long Section Heading with Truncation for larger screens",demoStyles:"max-width: 500px;",storybookStyles:!0,element:c.a.createElement(_.d,null,c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C")))},{id:"nested-accordions",label:"Nested Accordions",element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},c.a.createElement(v,null,c.a.createElement(E,{summary:"Nested accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Nested accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"))),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))},{id:"styled",label:"Wrapped in Card",element:c.a.createElement("div",{className:"slds-card"},c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C")))},{id:"has-action-overflow",label:"Has Action Overflow Menu",element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",actionMenu:c.a.createElement(O.a,{position:"right",dropdownIsOpen:!1}),isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",actionMenu:c.a.createElement(O.a,{position:"right",dropdownIsOpen:!1}),referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",actionMenu:c.a.createElement(O.a,{position:"right",dropdownIsOpen:!1}),referenceId:l()("referenceId-")},"Accordion details - C"))},{id:"section-background-color",label:"Accordion Section - Background Color",demoStyles:"--slds-c-accordion-summary-color-background: lightblue",storybookStyles:!0,element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))},{id:"section-background-color",label:"Accordion Section - Text Color",demoStyles:"--slds-c-accordion-heading-text-color: green; --slds-c-accordion-heading-text-color-hover: red",storybookStyles:!0,element:c.a.createElement(v,null,c.a.createElement(E,{summary:"Accordion summary",isOpen:!0,referenceId:l()("referenceId-")},"Accordion details - A"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - B"),c.a.createElement(E,{summary:"Accordion summary",referenceId:l()("referenceId-")},"Accordion details - C"))}]),x=o.c.a,k=o.c.code,C=o.c.h2,M=o.c.h3,N=o.c.p,T=function(){return Object(t.createElement)(o.b,{},Object(t.createElement)("div",{className:"doc lead"},"An accordion allows a user to toggle the display of a section of content."),Object(t.createElement)(a.a,{exampleOnly:!0},Object(i.f)(j,"styled")),C({id:"About-Accordions"},"About Accordions"),N({},"Accordions are composed of a list of longer blocks of text, with a header button to toggle the visibility of each block."),C({id:"Accessibility"},"Accessibility"),N({},"Availability of accordion content to assistive technology requires the use of ",k({},"aria-controls")," and toggling ",k({},"aria-expanded")," as regions are expanded and collapsed."),N({},"Accordion keyboard interaction should follow the recommendations of the ",x({href:"https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction"},"WAI-ARIA Authoring Practices for accordions"),"."),N({},"There are additional accessibility considerations within the ",x({href:"/components/buttons"},"Buttons")," and ",x({href:"/components/menus"},"Menus"),"."),C({id:"Default"},"Default"),Object(t.createElement)(a.a,null,Object(i.f)(S)),M({id:"Structure-and-Implementation"},"Structure and Implementation"),N({},"An accordion is implemented as an unordered list with a class of ",k({},"slds-accordion"),". Inside the list, each chunk of content is inside both a list item with class of ",k({},"slds-accordion__list-item")," and a section with a class of ",k({},"slds-accordion__section"),"."),N({},"The content itself is contained within a div with the class ",k({},"slds-accordion__content"),", an ID that corresponds to the ",k({},"aria-control")," on the button and the hidden attribute."),N({},"Content visibility is toggled via a ",x({href:"/components/buttons"},"Button")," in the H3 heading. To make accordion content visible, the section is given the class ",k({},"slds-is-open"),", the button is changed from ",k({},'aria-expanded="false"')," to ",k({},'aria-expanded="true"'),", and the hidden attribute is removed from the content div."),C({id:"Examples"},"Examples"),M({id:"With-Action-Overflow-Menu"},"With Action Overflow Menu"),Object(t.createElement)(a.a,null,Object(i.f)(j,"has-action-overflow")),M({id:"In-a-Card"},"In a Card"),Object(t.createElement)(a.a,null,Object(i.f)(j,"styled")),M({id:"Nested"},"Nested"),Object(t.createElement)(a.a,null,Object(i.f)(j,"nested-accordions")),M({id:"Heading-with-Truncation"},"Heading with Truncation"),Object(t.createElement)(a.a,null,Object(i.f)(j,"long-heading-truncated")),C({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(t.createElement)(s.a,{name:"accordion",type:"component"}))},B=function(){return Object(o.a)(T())}}});

package/__internal/chunked/docs/ui/components/activity-timeline/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/activity-timeline/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],o=t[1],c=t[2],m=0,u=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&u.push(l[i][0]),l[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);u.length;)u.shift()();return s.push.apply(s,c\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={2: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\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return s.push([801,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},801:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return H})),a.d(t,"getContents",(function(){return q}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=(a(27),a(14)),o=a(1),c=a(7),d=a(32),m=a(9),u=a(11),p=a(12),h=a(5),b=a.n(h),f=a(25),E=a.n(f),x=[l.a.createElement(u.a,{key:"groups",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"groups",title:"Group email",assistiveText:"Group email"}),l.a.createElement(u.a,{key:"attach",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"attach",title:"Has attachments",assistiveText:"Has attachments"})],_=[l.a.createElement(u.a,{key:"rotate",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"rotate",title:"Recurring Task",assistiveText:"Recurring Task"})],y=[l.a.createElement(u.a,{key:"world",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"world",title:"Public sharing",assistiveText:"Public sharing"})],g=function(e){return l.a.createElement("div",{className:b()("slds-icon_container","log_a_call"===e.symbol?"slds-icon-standard-log-a-call":"slds-icon-standard-"+e.symbol,e.className),title:"log_a_call"===e.symbol?"call":e.symbol},l.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:e.symbol}))},v=function(e){return l.a.createElement("div",{className:b()("slds-timeline__actions",{"slds-timeline__actions_inline":e.inline})},l.a.createElement("p",{className:"slds-timeline__date"},e.date\|\|"Feb 24"),l.a.createElement(c.b,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"down",assistiveText:e.assistiveText\|\|"More Options","aria-haspopup":"true",title:e.title\|\|"More Options"}))},N=function(e){return l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement(c.b,{iconClassName:"slds-timeline__details-action-icon",symbol:"switch",title:"Toggle details for ".concat(e.title),assistiveText:"Toggle details for ".concat(e.title),"aria-controls":e.id,"aria-expanded":e.isExpanded}),l.a.createElement(g,{symbol:e.type,className:"slds-timeline__icon"}))},w=function(e){return l.a.createElement("div",{className:"slds-media__body"},e.children)},O=function(e){return l.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-timeline__trigger"},l.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space"},"task"===e.type&&l.a.createElement(d.a,{hideLabel:!0,label:"Mark ".concat(e.title," complete")}),l.a.createElement("h3",{className:"slds-truncate",title:e.title},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},l.a.createElement("strong",null,e.title))),e.iconSet&&l.a.createElement("div",{className:"slds-no-flex"},e.iconSet)),l.a.createElement(v,{inline:!0,date:e.date,title:"More Options for this item",assistiveText:"More Options for this item"}))},j=function(e){return l.a.createElement("p",{className:"slds-m-horizontal_xx-small"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.subtext.you)," ",e.subtext.action," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.subtext.to)," ",e.subtext.extra)},S=function(e){return l.a.createElement("div",{className:"slds-grid slds-text-color_error slds-m-top_x-small slds-m-horizontal_xx-small",id:e.id},l.a.createElement(u.a,{key:"attach",className:"slds-icon-text-error slds-icon_x-small slds-m-right_xx-small",symbol:"error",title:"Error Occurred",assistiveText:"Error Occurred"}),l.a.createElement("p",null,"There was an error loading the details"))},T=function(e){return l.a.createElement("div",{className:b()("slds-timeline__item_expandable","".concat("log_a_call"===e.type?"slds-timeline__item_call":"slds-timeline__item_"+e.type),{"slds-is-open":e.isExpanded},e.className)},l.a.createElement("span",{className:"slds-assistive-text"},e.type),l.a.createElement("div",{className:b()("slds-media")},l.a.createElement(N,e),l.a.createElement(w,null,l.a.createElement(O,e),l.a.createElement(j,e),e.hasError?l.a.createElement(S,e):l.a.createElement(A,{id:e.id,isExpanded:e.isExpanded,fields:e.fields,bodyLabel:e.bodyLabel,footerButtons:e.footerButtons},e.children))))},k=function(e){return l.a.createElement("li",{className:"slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small"},l.a.createElement("span",{className:"slds-text-title slds-p-bottom_x-small"},e.label),l.a.createElement("span",{className:"slds-text-body_medium slds-truncate",title:e.content},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.content)))},M=function(e){return l.a.createElement("ul",{className:"slds-list_horizontal slds-wrap"},e.fields.map((function(e,t){return l.a.createElement(k,{key:t,label:e.label,content:e.content})})))},A=function(e){return l.a.createElement("article",{className:b()("slds-box","slds-timeline__item_details","slds-theme_shade","slds-m-top_x-small","slds-m-horizontal_xx-small",{"slds-p-around_medium":e.isExpanded},e.className),id:e.id,hidden:!e.isExpanded},e.fields&&l.a.createElement(M,e),e.children&&l.a.createElement("div",null,l.a.createElement("span",{className:"slds-text-title"},e.bodyLabel),l.a.createElement("p",{className:"slds-p-top_x-small"},e.children)),e.footerButtons&&l.a.createElement(p.a,{isNeutral:!0,className:"slds-m-top_small"},l.a.createElement(m.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"world"}),"Public Sharing"))},L=function(e){return l.a.createElement("div",{className:"demo-only",style:{width:"400px"}},e.children)},B=function(e){var t=function(t){if(e.itemsExpanded)return e.itemsExpanded.includes(t)};return l.a.createElement("ul",{className:"slds-timeline"},l.a.createElement("li",null,l.a.createElement(T,{id:E()("task-item-".concat(e.id,"-")),type:"task",title:"Review proposals for EBC deck with larger team and have marketing review this",date:"9:00am \| 3/20/17",subtext:{you:"You",action:"created a task with",to:"Charlie Gomez"},iconSet:_,fields:[{label:"Name",content:"Charlie Gomez"},{label:"Related To",content:"Tesla Cloudhub + Anypoint Connectors"}],bodyLabel:"Description",isExpanded:t(1),isNarrow:e.isNarrow,hasError:e.hasError},"Need to finalize proposals and brand details before the meeting")),l.a.createElement("li",null,l.a.createElement(T,{id:E()("call-item-".concat(e.id,"-")),type:"log_a_call",title:"Mobile conversation on Monday",date:"10:00am \| 3/23/17",subtext:{you:"You",action:"logged a call with",to:"Adam Chan"},fields:[{label:"Name",content:"Adam Chan"},{label:"Related To",content:"Tesla Cloudhub + Anypoint Connectors"}],bodyLabel:"Description",isExpanded:t(2),isNarrow:e.isNarrow},"Adam seemed interested in closing this deal quickly! Let’s move.")),l.a.createElement("li",null,l.a.createElement(T,{id:E()("email-item-".concat(e.id,"-")),type:"email",title:"Re: Mobile conversation on Monday with the new global team",date:"10:00am \| 3/24/17",subtext:{you:"You",action:"emailed",to:"Lea Chan"},iconSet:x,fields:[{label:"From Address",content:"Jackie Dewar"},{label:"To Address",content:"Lea Chan"}],bodyLabel:"Text Body",isExpanded:t(3),isNarrow:e.isNarrow,footerButtons:e.footerButtons},"Hi everyone, Thanks for meeting with the team today and going through the proposals we saw. This goes on and wraps if needed.")),l.a.createElement("li",null,l.a.createElement(T,{id:E()("event-item-".concat(e.id,"-")),type:"event",title:"EBC Follow up call",date:"10:30am \| 3/24/17",subtext:{you:"You",action:"created an event with",to:"Aida Lee",extra:"and 5 others"},iconSet:y,fields:[{label:"Location",content:"Westen St. Francis, San Francisco, CA, 94622"},{label:"Attendees",content:"Jason Dewar (Organizer) + 5 others"},{label:"When",content:"March 26, 10:00 AM - 11:00 AM"}],bodyLabel:"Description",isExpanded:t(4),isNarrow:e.isNarrow,footerButtons:e.footerButtons},"Let's discuss the 2017 product roadmap and address any questions")))},C=l.a.createElement(B,{id:"base",isExpanded:"false"}),D=[{id:"narrow",label:"Narrow",element:l.a.createElement(L,null,l.a.createElement(B,{id:"narrow",itemsExpanded:[1,2,3,4],isNarrow:!0,footerButtons:!0}))}],I=[{id:"expanded",label:"Expanded",element:l.a.createElement(B,{id:"expanded",itemsExpanded:[1,2,3,4],footerButtons:!0})},{id:"expanded-single",label:"Expanded - Single Item",element:l.a.createElement(B,{id:"expanded",itemsExpanded:[1],footerButtons:!0})},{id:"error",label:"Error",element:l.a.createElement(B,{id:"error",itemsExpanded:[1,2,3,4],hasError:!0,footerButtons:!0})},{id:"error-single",label:"Error - Single Item",element:l.a.createElement(B,{id:"error",itemsExpanded:[1],hasError:!0,footerButtons:!0})}],P=s.c.code,R=s.c.h2,z=s.c.h3,F=s.c.h4,G=s.c.li,J=s.c.p,W=s.c.strong,Y=s.c.ul,H=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"The activity timeline displays each of the user’s upcoming, current, and past activities."),Object(n.createElement)(i.a,{exampleOnly:!0},Object(o.f)(C)),R({id:"About-Activity-Timeline"},"About Activity Timeline"),J({},"Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar."),z({id:"Accessibility"},"Accessibility"),J({},"Text describing the type of timeline item is placed in a ",P({},"span"),". It is the first element in the timeline item and should be hidden with the ",P({},"slds-assistive-text")," class. The ",P({},"SVG")," image does not need the ",P({},"slds-assistive-text")," class."),F({id:"Markup"},"Markup"),J({},W({},"Button:")),Y({},G({},P({},"aria-controls")," is used to create an association between the button and the details section. If the details section has an ",P({},'id="email-content"'),", then the button should have ",P({},'aria-controls="email-content"'),"."),G({},"The title of the timeline item can also be used as a button to open the details section. If the details section has an ",P({},'id="email-content"'),", then the div with ",P({},"slds-timeline__trigger")," should have ",P({},'aria-controls="email-content"')," and the click handler."),G({},P({},"aria-expanded")," indicates if the details section is open or closed and is read aloud by assistive technology when the button is focused.")),J({},W({},"Section:")),Y({},G({},P({},"hidden")," indicates if the details section is open or closed, and if set to ",P({},"true"),", assistive technology hides the details section.")),F({id:"Keyboard-Interactions"},"Keyboard Interactions"),Y({},G({},"The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.")),R({id:"Base"},"Base"),Object(n.createElement)(i.a,null,Object(o.f)(C)),R({id:"States"},"States"),z({id:"Expanding-sections"},"Expanding sections"),Object(n.createElement)(r.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"When the user interacts with the button to open the details section, ",Object(n.createElement)("code",null,"aria-expanded")," on the button should be ",Object(n.createElement)("code",null,"true")," and ",Object(n.createElement)("code",null,"hidden")," on the details section should be ",Object(n.createElement)("code",null,"false"),"."),Object(n.createElement)("p",null,"When the user interacts with the button to close the details section, ",Object(n.createElement)("code",null,"aria-expanded")," on the button should be ",Object(n.createElement)("code",null,"false")," and ",Object(n.createElement)("code",null,"hidden")," on the details section should be ",Object(n.createElement)("code",null,"true"),".")),F({id:"Single-Item-Expanded"},"Single Item Expanded"),Object(n.createElement)(i.a,null,Object(o.f)(I,"expanded-single")),F({id:"Multiple-Items-Expanded"},"Multiple Items Expanded"),Object(n.createElement)(i.a,null,Object(o.f)(I,"expanded")),z({id:"Error"},"Error"),Object(n.createElement)(i.a,null,Object(o.f)(I,"error-single")),R({id:"Narrow-Region-Example"},"Narrow Region Example"),Object(n.createElement)(i.a,null,Object(o.f)(D,"narrow")))},q=function(){return Object(s.a)(H())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/activity-timeline/docs.mdx.js"]=function(e){function t(t){for(var n,i,r=t[0],o=t[1],c=t[2],m=0,u=[];m<r.length;m++)i=r[m],Object.prototype.hasOwnProperty.call(l,i)&&l[i]&&u.push(l[i][0]),l[i]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(d&&d(t);u.length;)u.shift()();return s.push.apply(s,c\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],n=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(n=!1)}n&&(s.splice(t--,1),e=i(i.s=a[0]))}return e}var n={},l={2: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\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return s.push([802,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},802:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return H})),a.d(t,"getContents",(function(){return q}));var n=a(0),l=a.n(n),s=a(4),i=a(2),r=(a(27),a(13)),o=a(1),c=a(7),d=a(32),m=a(9),u=a(11),p=a(12),h=a(5),b=a.n(h),f=a(25),E=a.n(f),x=[l.a.createElement(u.a,{key:"groups",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"groups",title:"Group email",assistiveText:"Group email"}),l.a.createElement(u.a,{key:"attach",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"attach",title:"Has attachments",assistiveText:"Has attachments"})],_=[l.a.createElement(u.a,{key:"rotate",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"rotate",title:"Recurring Task",assistiveText:"Recurring Task"})],y=[l.a.createElement(u.a,{key:"world",className:"slds-icon_xx-small slds-icon-text-default slds-m-left_x-small",symbol:"world",title:"Public sharing",assistiveText:"Public sharing"})],g=function(e){return l.a.createElement("div",{className:b()("slds-icon_container","log_a_call"===e.symbol?"slds-icon-standard-log-a-call":"slds-icon-standard-"+e.symbol,e.className),title:"log_a_call"===e.symbol?"call":e.symbol},l.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:e.symbol}))},v=function(e){return l.a.createElement("div",{className:b()("slds-timeline__actions",{"slds-timeline__actions_inline":e.inline})},l.a.createElement("p",{className:"slds-timeline__date"},e.date\|\|"Feb 24"),l.a.createElement(c.b,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"down",assistiveText:e.assistiveText\|\|"More Options","aria-haspopup":"true",title:e.title\|\|"More Options"}))},N=function(e){return l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement(c.b,{iconClassName:"slds-timeline__details-action-icon",symbol:"switch",title:"Toggle details for ".concat(e.title),assistiveText:"Toggle details for ".concat(e.title),"aria-controls":e.id,"aria-expanded":e.isExpanded}),l.a.createElement(g,{symbol:e.type,className:"slds-timeline__icon"}))},w=function(e){return l.a.createElement("div",{className:"slds-media__body"},e.children)},O=function(e){return l.a.createElement("div",{className:"slds-grid slds-grid_align-spread slds-timeline__trigger"},l.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space"},"task"===e.type&&l.a.createElement(d.a,{hideLabel:!0,label:"Mark ".concat(e.title," complete")}),l.a.createElement("h3",{className:"slds-truncate",title:e.title},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},l.a.createElement("strong",null,e.title))),e.iconSet&&l.a.createElement("div",{className:"slds-no-flex"},e.iconSet)),l.a.createElement(v,{inline:!0,date:e.date,title:"More Options for this item",assistiveText:"More Options for this item"}))},j=function(e){return l.a.createElement("p",{className:"slds-m-horizontal_xx-small"},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.subtext.you)," ",e.subtext.action," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.subtext.to)," ",e.subtext.extra)},S=function(e){return l.a.createElement("div",{className:"slds-grid slds-text-color_error slds-m-top_x-small slds-m-horizontal_xx-small",id:e.id},l.a.createElement(u.a,{key:"attach",className:"slds-icon-text-error slds-icon_x-small slds-m-right_xx-small",symbol:"error",title:"Error Occurred",assistiveText:"Error Occurred"}),l.a.createElement("p",null,"There was an error loading the details"))},T=function(e){return l.a.createElement("div",{className:b()("slds-timeline__item_expandable","".concat("log_a_call"===e.type?"slds-timeline__item_call":"slds-timeline__item_"+e.type),{"slds-is-open":e.isExpanded},e.className)},l.a.createElement("span",{className:"slds-assistive-text"},e.type),l.a.createElement("div",{className:b()("slds-media")},l.a.createElement(N,e),l.a.createElement(w,null,l.a.createElement(O,e),l.a.createElement(j,e),e.hasError?l.a.createElement(S,e):l.a.createElement(A,{id:e.id,isExpanded:e.isExpanded,fields:e.fields,bodyLabel:e.bodyLabel,footerButtons:e.footerButtons},e.children))))},k=function(e){return l.a.createElement("li",{className:"slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small"},l.a.createElement("span",{className:"slds-text-title slds-p-bottom_x-small"},e.label),l.a.createElement("span",{className:"slds-text-body_medium slds-truncate",title:e.content},l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.content)))},M=function(e){return l.a.createElement("ul",{className:"slds-list_horizontal slds-wrap"},e.fields.map((function(e,t){return l.a.createElement(k,{key:t,label:e.label,content:e.content})})))},A=function(e){return l.a.createElement("article",{className:b()("slds-box","slds-timeline__item_details","slds-theme_shade","slds-m-top_x-small","slds-m-horizontal_xx-small",{"slds-p-around_medium":e.isExpanded},e.className),id:e.id,hidden:!e.isExpanded},e.fields&&l.a.createElement(M,e),e.children&&l.a.createElement("div",null,l.a.createElement("span",{className:"slds-text-title"},e.bodyLabel),l.a.createElement("p",{className:"slds-p-top_x-small"},e.children)),e.footerButtons&&l.a.createElement(p.a,{isNeutral:!0,className:"slds-m-top_small"},l.a.createElement(m.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"world"}),"Public Sharing"))},L=function(e){return l.a.createElement("div",{className:"demo-only",style:{width:"400px"}},e.children)},B=function(e){var t=function(t){if(e.itemsExpanded)return e.itemsExpanded.includes(t)};return l.a.createElement("ul",{className:"slds-timeline"},l.a.createElement("li",null,l.a.createElement(T,{id:E()("task-item-".concat(e.id,"-")),type:"task",title:"Review proposals for EBC deck with larger team and have marketing review this",date:"9:00am \| 3/20/17",subtext:{you:"You",action:"created a task with",to:"Charlie Gomez"},iconSet:_,fields:[{label:"Name",content:"Charlie Gomez"},{label:"Related To",content:"Tesla Cloudhub + Anypoint Connectors"}],bodyLabel:"Description",isExpanded:t(1),isNarrow:e.isNarrow,hasError:e.hasError},"Need to finalize proposals and brand details before the meeting")),l.a.createElement("li",null,l.a.createElement(T,{id:E()("call-item-".concat(e.id,"-")),type:"log_a_call",title:"Mobile conversation on Monday",date:"10:00am \| 3/23/17",subtext:{you:"You",action:"logged a call with",to:"Adam Chan"},fields:[{label:"Name",content:"Adam Chan"},{label:"Related To",content:"Tesla Cloudhub + Anypoint Connectors"}],bodyLabel:"Description",isExpanded:t(2),isNarrow:e.isNarrow},"Adam seemed interested in closing this deal quickly! Let’s move.")),l.a.createElement("li",null,l.a.createElement(T,{id:E()("email-item-".concat(e.id,"-")),type:"email",title:"Re: Mobile conversation on Monday with the new global team",date:"10:00am \| 3/24/17",subtext:{you:"You",action:"emailed",to:"Lea Chan"},iconSet:x,fields:[{label:"From Address",content:"Jackie Dewar"},{label:"To Address",content:"Lea Chan"}],bodyLabel:"Text Body",isExpanded:t(3),isNarrow:e.isNarrow,footerButtons:e.footerButtons},"Hi everyone, Thanks for meeting with the team today and going through the proposals we saw. This goes on and wraps if needed.")),l.a.createElement("li",null,l.a.createElement(T,{id:E()("event-item-".concat(e.id,"-")),type:"event",title:"EBC Follow up call",date:"10:30am \| 3/24/17",subtext:{you:"You",action:"created an event with",to:"Aida Lee",extra:"and 5 others"},iconSet:y,fields:[{label:"Location",content:"Westen St. Francis, San Francisco, CA, 94622"},{label:"Attendees",content:"Jason Dewar (Organizer) + 5 others"},{label:"When",content:"March 26, 10:00 AM - 11:00 AM"}],bodyLabel:"Description",isExpanded:t(4),isNarrow:e.isNarrow,footerButtons:e.footerButtons},"Let's discuss the 2017 product roadmap and address any questions")))},C=l.a.createElement(B,{id:"base",isExpanded:"false"}),D=[{id:"narrow",label:"Narrow",element:l.a.createElement(L,null,l.a.createElement(B,{id:"narrow",itemsExpanded:[1,2,3,4],isNarrow:!0,footerButtons:!0}))}],I=[{id:"expanded",label:"Expanded",element:l.a.createElement(B,{id:"expanded",itemsExpanded:[1,2,3,4],footerButtons:!0})},{id:"expanded-single",label:"Expanded - Single Item",element:l.a.createElement(B,{id:"expanded",itemsExpanded:[1],footerButtons:!0})},{id:"error",label:"Error",element:l.a.createElement(B,{id:"error",itemsExpanded:[1,2,3,4],hasError:!0,footerButtons:!0})},{id:"error-single",label:"Error - Single Item",element:l.a.createElement(B,{id:"error",itemsExpanded:[1],hasError:!0,footerButtons:!0})}],P=s.c.code,R=s.c.h2,z=s.c.h3,F=s.c.h4,G=s.c.li,J=s.c.p,W=s.c.strong,Y=s.c.ul,H=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"doc lead"},"The activity timeline displays each of the user’s upcoming, current, and past activities."),Object(n.createElement)(i.a,{exampleOnly:!0},Object(o.f)(C)),R({id:"About-Activity-Timeline"},"About Activity Timeline"),J({},"Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar."),z({id:"Accessibility"},"Accessibility"),J({},"Text describing the type of timeline item is placed in a ",P({},"span"),". It is the first element in the timeline item and should be hidden with the ",P({},"slds-assistive-text")," class. The ",P({},"SVG")," image does not need the ",P({},"slds-assistive-text")," class."),F({id:"Markup"},"Markup"),J({},W({},"Button:")),Y({},G({},P({},"aria-controls")," is used to create an association between the button and the details section. If the details section has an ",P({},'id="email-content"'),", then the button should have ",P({},'aria-controls="email-content"'),"."),G({},"The title of the timeline item can also be used as a button to open the details section. If the details section has an ",P({},'id="email-content"'),", then the div with ",P({},"slds-timeline__trigger")," should have ",P({},'aria-controls="email-content"')," and the click handler."),G({},P({},"aria-expanded")," indicates if the details section is open or closed and is read aloud by assistive technology when the button is focused.")),J({},W({},"Section:")),Y({},G({},P({},"hidden")," indicates if the details section is open or closed, and if set to ",P({},"true"),", assistive technology hides the details section.")),F({id:"Keyboard-Interactions"},"Keyboard Interactions"),Y({},G({},"The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.")),R({id:"Base"},"Base"),Object(n.createElement)(i.a,null,Object(o.f)(C)),R({id:"States"},"States"),z({id:"Expanding-sections"},"Expanding sections"),Object(n.createElement)(r.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"When the user interacts with the button to open the details section, ",Object(n.createElement)("code",null,"aria-expanded")," on the button should be ",Object(n.createElement)("code",null,"true")," and ",Object(n.createElement)("code",null,"hidden")," on the details section should be ",Object(n.createElement)("code",null,"false"),"."),Object(n.createElement)("p",null,"When the user interacts with the button to close the details section, ",Object(n.createElement)("code",null,"aria-expanded")," on the button should be ",Object(n.createElement)("code",null,"false")," and ",Object(n.createElement)("code",null,"hidden")," on the details section should be ",Object(n.createElement)("code",null,"true"),".")),F({id:"Single-Item-Expanded"},"Single Item Expanded"),Object(n.createElement)(i.a,null,Object(o.f)(I,"expanded-single")),F({id:"Multiple-Items-Expanded"},"Multiple Items Expanded"),Object(n.createElement)(i.a,null,Object(o.f)(I,"expanded")),z({id:"Error"},"Error"),Object(n.createElement)(i.a,null,Object(o.f)(I,"error-single")),R({id:"Narrow-Region-Example"},"Narrow Region Example"),Object(n.createElement)(i.a,null,Object(o.f)(D,"narrow")))},q=function(){return Object(s.a)(H())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/alert/docs.mdx.js"]=function(e){function t(t){for(var n,s,o=t[0],i=t[1],c=t[2],d=0,f=[];d<o.length;d++)s=o[d],Object.prototype.hasOwnProperty.call(r,s)&&r[s]&&f.push(r[s][0]),r[s]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(m&&m(t);f.length;)f.shift()();return l.push.apply(l,c\|\|[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],n=!0,o=1;o<a.length;o++){var i=a[o];0!==r[i]&&(n=!1)}n&&(l.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},r={3:0},l=[];function s(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=n,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(a,n,function(t){return e[t]}.bind(null,n));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var m=i;return l.push([~~749~~,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},~~749~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return N})),a.d(t,"getContents",(function(){return T}));var n=a(0),r=a.n(n),l=a(4),s=a(2),o=a(27),i=(a(15),a(7)),c=a(11),m=(a(14),a(1)),d=a(40),f=a(3),u=a.n(f),h=a(5),p=a.n(h),b=function(e){var t=e.type,a=e.children,n=e.isLegacy,l=p()("warning"===t&&"slds-alert_warning","error"===t&&"slds-alert_error","offline"===t&&"slds-alert_offline"),s=p()(n&&"slds-theme_alert-texture","info"===t&&n&&"slds-theme_info","warning"===t&&n&&"slds-theme_warning","error"===t&&n&&"slds-theme_error","offline"===t&&n&&"slds-theme_offline");return r.a.createElement("div",{className:p()("slds-notify slds-notify_alert",l,s),role:"alert"},r.a.createElement("span",{className:"slds-assistive-text"},t),a,r.a.createElement("div",{className:"slds-notify__close"},r.a.createElement(i.b,{className:p()("warning"!==t&&"slds-button_icon-inverse"),symbol:"close",assistiveText:"Close",title:"Close",size:"small"})))};b.propTypes={type:u.a.oneOf(["info","warning","error","offline"]),children:u.a.node,isLegacy:u.a.bool},b.defaultProps={type:"info"};var y=b,g=a(~~102~~),v=a(88),E=[{id:"default",label:"Default",element:r.a.createElement(y,null,r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"user"}),r.a.createElement(v.a,{level:"2"},"Logged in as John Smith (johnsmith@acme.com)."," ",r.a.createElement(g.a,null,"Log out")))}],_=[{id:"theme-info",label:"Default (Theme Class - Deprecated)",element:r.a.createElement(y,{isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"user"}),r.a.createElement(v.a,{level:"2"},"Logged in as John Smith (johnsmith@acme.com)."," ",r.a.createElement(g.a,null,"Log out")))},{id:"warning",label:"Warning",element:r.a.createElement(y,{type:"warning"},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"warning"}),r.a.createElement(v.a,{level:"2"},"Your browser is outdated. Your Salesforce experience may be degraded."," ",r.a.createElement(g.a,null,"More Information")))},{id:"theme-warning",label:"Warning (Theme Class - Deprecated)",element:r.a.createElement(y,{type:"warning",isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"warning"}),r.a.createElement(v.a,{level:"2"},"Your browser is outdated. Your Salesforce experience may be degraded."," ",r.a.createElement(g.a,null,"More Information")))},{id:"error",label:"Error",element:r.a.createElement(y,{type:"error"},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"error"}),r.a.createElement(v.a,{level:"2"},"Your browser is currently not supported. Your Salesforce may be degraded. ",r.a.createElement(g.a,null,"More Information")))},{id:"theme-error",label:"Error (Theme Class - Deprecated)",element:r.a.createElement(y,{type:"error",isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"error"}),r.a.createElement(v.a,{level:"2"},"Your browser is currently not supported. Your Salesforce may be degraded. ",r.a.createElement(g.a,null,"More Information")))},{id:"offline",label:"Offline",element:r.a.createElement(y,{type:"offline"},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"offline"}),r.a.createElement(v.a,{level:"2"},"You are in offline mode. ",r.a.createElement(g.a,null,"More Information")))},{id:"theme-offline",label:"Offline (Theme Class - Deprecated)",element:r.a.createElement(y,{type:"offline",isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"offline"}),r.a.createElement(v.a,{level:"2"},"You are in offline mode. ",r.a.createElement(g.a,null,"More Information")))}],x=l.c.code,O=l.c.h2,w=l.c.h3,j=l.c.h4,S=l.c.p,N=function(){return Object(n.createElement)(l.b,{},Object(n.createElement)("div",{className:"doc lead"},"Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(m.f)(E)),O({id:"About-Alert"},"About Alert"),w({id:"Accessibility"},"Accessibility"),j({id:"Role"},"Role"),S({},"Alert notifications should contain ",x({},'role="alert"')," on the container to signal to assistive technology that they require the user’s immediate attention."),Object(n.createElement)(o.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-notify slds-notify_alert",role:"alert"},"...")),j({id:"Assistive-Text"},"Assistive Text"),S({},"Use a span with the class ",x({},"slds-assistive-text")," to let the user know what type of notification it is."),Object(n.createElement)(o.a,{toggleCode:!1},Object(n.createElement)("span",{className:"slds-assistive-text"},"Info")),O({id:"Base"},"Base"),S({},"Use the info alert when notifying the user of neutral information about the system."),Object(n.createElement)(s.a,null,Object(m.f)(E)),O({id:"Variations"},"Variations"),w({id:"Warning"},"Warning"),S({},"Use the warning variant to warn the user about important system information that deserves caution."),Object(n.createElement)(s.a,null,Object(m.f)(_,"warning")),w({id:"Error"},"Error"),S({},"Use the error variant when you need to alert the user about an error in the system that needs immediate attention."),Object(n.createElement)(s.a,null,Object(m.f)(_,"error")),w({id:"Offline"},"Offline"),S({},"Use the offline alert to let the user know that they are not connected to the internet."),Object(n.createElement)(s.a,null,Object(m.f)(_,"offline")),O({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"alert",type:"component"}))},T=function(){return Object(l.a)(N())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/alert/docs.mdx.js"]=function(e){function t(t){for(var n,s,o=t[0],i=t[1],c=t[2],d=0,f=[];d<o.length;d++)s=o[d],Object.prototype.hasOwnProperty.call(r,s)&&r[s]&&f.push(r[s][0]),r[s]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(m&&m(t);f.length;)f.shift()();return l.push.apply(l,c\|\|[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],n=!0,o=1;o<a.length;o++){var i=a[o];0!==r[i]&&(n=!1)}n&&(l.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},r={3:0},l=[];function s(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=n,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)s.d(a,n,function(t){return e[t]}.bind(null,n));return a},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var m=i;return l.push([750,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},750:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return N})),a.d(t,"getContents",(function(){return T}));var n=a(0),r=a.n(n),l=a(4),s=a(2),o=a(27),i=(a(15),a(7)),c=a(11),m=(a(13),a(1)),d=a(40),f=a(3),u=a.n(f),h=a(5),p=a.n(h),b=function(e){var t=e.type,a=e.children,n=e.isLegacy,l=p()("warning"===t&&"slds-alert_warning","error"===t&&"slds-alert_error","offline"===t&&"slds-alert_offline"),s=p()(n&&"slds-theme_alert-texture","info"===t&&n&&"slds-theme_info","warning"===t&&n&&"slds-theme_warning","error"===t&&n&&"slds-theme_error","offline"===t&&n&&"slds-theme_offline");return r.a.createElement("div",{className:p()("slds-notify slds-notify_alert",l,s),role:"alert"},r.a.createElement("span",{className:"slds-assistive-text"},t),a,r.a.createElement("div",{className:"slds-notify__close"},r.a.createElement(i.b,{className:p()("warning"!==t&&"slds-button_icon-inverse"),symbol:"close",assistiveText:"Close",title:"Close",size:"small"})))};b.propTypes={type:u.a.oneOf(["info","warning","error","offline"]),children:u.a.node,isLegacy:u.a.bool},b.defaultProps={type:"info"};var y=b,g=a(103),v=a(89),E=[{id:"default",label:"Default",element:r.a.createElement(y,null,r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"user"}),r.a.createElement(v.a,{level:"2"},"Logged in as John Smith (johnsmith@acme.com)."," ",r.a.createElement(g.a,null,"Log out")))}],_=[{id:"theme-info",label:"Default (Theme Class - Deprecated)",element:r.a.createElement(y,{isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"user"}),r.a.createElement(v.a,{level:"2"},"Logged in as John Smith (johnsmith@acme.com)."," ",r.a.createElement(g.a,null,"Log out")))},{id:"warning",label:"Warning",element:r.a.createElement(y,{type:"warning"},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"warning"}),r.a.createElement(v.a,{level:"2"},"Your browser is outdated. Your Salesforce experience may be degraded."," ",r.a.createElement(g.a,null,"More Information")))},{id:"theme-warning",label:"Warning (Theme Class - Deprecated)",element:r.a.createElement(y,{type:"warning",isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"warning"}),r.a.createElement(v.a,{level:"2"},"Your browser is outdated. Your Salesforce experience may be degraded."," ",r.a.createElement(g.a,null,"More Information")))},{id:"error",label:"Error",element:r.a.createElement(y,{type:"error"},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"error"}),r.a.createElement(v.a,{level:"2"},"Your browser is currently not supported. Your Salesforce may be degraded. ",r.a.createElement(g.a,null,"More Information")))},{id:"theme-error",label:"Error (Theme Class - Deprecated)",element:r.a.createElement(y,{type:"error",isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"error"}),r.a.createElement(v.a,{level:"2"},"Your browser is currently not supported. Your Salesforce may be degraded. ",r.a.createElement(g.a,null,"More Information")))},{id:"offline",label:"Offline",element:r.a.createElement(y,{type:"offline"},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"offline"}),r.a.createElement(v.a,{level:"2"},"You are in offline mode. ",r.a.createElement(g.a,null,"More Information")))},{id:"theme-offline",label:"Offline (Theme Class - Deprecated)",element:r.a.createElement(y,{type:"offline",isLegacy:!0},r.a.createElement(c.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_x-small",assistiveText:!1,symbol:"offline"}),r.a.createElement(v.a,{level:"2"},"You are in offline mode. ",r.a.createElement(g.a,null,"More Information")))}],x=l.c.code,O=l.c.h2,w=l.c.h3,j=l.c.h4,S=l.c.p,N=function(){return Object(n.createElement)(l.b,{},Object(n.createElement)("div",{className:"doc lead"},"Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action."),Object(n.createElement)(s.a,{exampleOnly:!0},Object(m.f)(E)),O({id:"About-Alert"},"About Alert"),w({id:"Accessibility"},"Accessibility"),j({id:"Role"},"Role"),S({},"Alert notifications should contain ",x({},'role="alert"')," on the container to signal to assistive technology that they require the user’s immediate attention."),Object(n.createElement)(o.a,{toggleCode:!1},Object(n.createElement)("div",{className:"slds-notify slds-notify_alert",role:"alert"},"...")),j({id:"Assistive-Text"},"Assistive Text"),S({},"Use a span with the class ",x({},"slds-assistive-text")," to let the user know what type of notification it is."),Object(n.createElement)(o.a,{toggleCode:!1},Object(n.createElement)("span",{className:"slds-assistive-text"},"Info")),O({id:"Base"},"Base"),S({},"Use the info alert when notifying the user of neutral information about the system."),Object(n.createElement)(s.a,null,Object(m.f)(E)),O({id:"Variations"},"Variations"),w({id:"Warning"},"Warning"),S({},"Use the warning variant to warn the user about important system information that deserves caution."),Object(n.createElement)(s.a,null,Object(m.f)(_,"warning")),w({id:"Error"},"Error"),S({},"Use the error variant when you need to alert the user about an error in the system that needs immediate attention."),Object(n.createElement)(s.a,null,Object(m.f)(_,"error")),w({id:"Offline"},"Offline"),S({},"Use the offline alert to let the user know that they are not connected to the internet."),Object(n.createElement)(s.a,null,Object(m.f)(_,"offline")),O({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(d.a,{name:"alert",type:"component"}))},T=function(){return Object(l.a)(N())}}});

package/__internal/chunked/docs/ui/components/app-launcher/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/app-launcher/docs.mdx.js"]=function(e){function t(t){for(var l,i,o=t[0],r=t[1],c=t[2],p=0,m=[];p<o.length;p++)i=o[p],Object.prototype.hasOwnProperty.call(s,i)&&s[i]&&m.push(s[i][0]),s[i]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(d&&d(t);m.length;)m.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],l=!0,o=1;o<a.length;o++){var r=a[o];0!==s[r]&&(l=!1)}l&&(n.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},s={4:0},n=[];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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var d=r;return n.push([760,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},760:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return I})),a.d(t,"getContents",(function(){return z}));var l=a(0),s=a.n(l),n=a(4),i=a(2),o=(a(27),a(15),a(14)),r=a(9),c=a(21),d=a(83),p=a(49),m=a(135),u=a(50),h=a(5),b=a.n(h),f=function(e){return s.a.createElement(c.b,{className:"slds-modal_large slds-app-launcher","aria-labelledby":"header43"},s.a.createElement(c.e,{className:"slds-grid slds-grid_align-spread slds-grid_vertical-align-center"},s.a.createElement("h2",{id:"header43",className:"slds-text-heading_medium"},"App launcher"),s.a.createElement("div",{className:"slds-app-launcher__header-search"},s.a.createElement("div",{className:"slds-form-element"},s.a.createElement("label",{htmlFor:"app-launcher-search",className:"slds-form-element__label slds-assistive-text"},"Find an app"),s.a.createElement("div",{className:"slds-form-element__control slds-input-has-icon slds-input-has-icon_left"},s.a.createElement(r.a,{className:"slds-input__icon",sprite:"utility",symbol:"search"}),s.a.createElement("input",{type:"search",className:"slds-input",id:"app-launcher-search",placeholder:"Find an app",defaultValue:e.searchTerm})))),s.a.createElement("button",{className:"slds-button slds-button_neutral"},"App Exchange")),s.a.createElement(c.c,{className:"slds-app-launcher__content slds-p-around_medium"},s.a.createElement(d.a,{className:"slds-is-open"},s.a.createElement(d.c,null,s.a.createElement(d.d,{isOpen:!0,referenceId:"appsContent"},"All Apps")),s.a.createElement(d.b,{isOpen:!0,referenceId:"appsContent"},s.a.createElement("div",{className:"slds-assistive-text",id:"drag-live-region","aria-live":"assertive"},e.dragDropLiveRegion),s.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded slds-wrap"},e.appTiles.map((function(e,t){return s.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3",key:t},s.a.createElement(g,{figureClass:e.figureClass,grabbed:e.grabbed,objectInitials:e.initials,label:e.label,description:e.description,hasTooltip:e.hasTooltip,tooltipText:e.tooltipText,index:t}))}))))),s.a.createElement("hr",null),s.a.createElement(d.a,{className:"slds-is-open"},s.a.createElement(d.c,null,s.a.createElement(d.d,{isOpen:!0,referenceId:"itemsContent"},"All Items")),s.a.createElement(d.b,{isOpen:!0,referenceId:"itemsContent"},s.a.createElement("ul",{className:"slds-grid slds-wrap"},e.itemTiles.map((function(e,t){return s.a.createElement("li",{className:"slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5",key:t},s.a.createElement("a",{href:"#",className:"slds-truncate",title:e.label,onClick:function(e){return e.preventDefault()}},e.label))})))))))},g=function(e){return s.a.createElement("div",{draggable:!0,className:b()("slds-app-launcher__tile slds-text-link_reset slds-is-draggable",e.className,{"slds-is-grabbed":e.grabbed})},s.a.createElement("div",{className:"slds-app-launcher__tile-figure"},s.a.createElement(p.a,{className:"slds-avatar_large"},s.a.createElement("abbr",{className:b()("slds-avatar__initials",e.figureClass),title:e.label},e.objectInitials)),s.a.createElement("div",{className:"slds-m-top_xxx-small"},s.a.createElement(m.a,{"aria-pressed":e.grabbed?"true":"false",assistiveText:"Reorder",selected:e.grabbed,symbol:"rows",title:"Reorder"}))),s.a.createElement("div",{className:"slds-app-launcher__tile-body"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.label),s.a.createElement("p",null,e.description," ",e.hasTooltip&&s.a.createElement("button",{"aria-describedby":"help-".concat(e.index),className:"slds-button slds-button_reset slds-text-link"},"More")),s.a.createElement(u.a,{className:b()("slds-nubbin_top-right",{"slds-hide":!e.tooltipText}),id:"help-".concat(e.index),style:{position:"absolute",top:"80px",right:"30px"}},e.tooltipText)))},y=[{label:"Accounts",symbol:"account"},{label:"Announcements",symbol:"announcement"},{label:"Approvals",symbol:"approval"},{label:"Campaigns",symbol:"campaign"},{label:"Cases",symbol:"case"},{label:"Coaching",symbol:"coaching"},{label:"Contacts",symbol:"contact"}],v=[{label:s.a.createElement("span",null,s.a.createElement("mark",null,"Sales")," Invoices"),symbol:"account"},{label:s.a.createElement("span",null,s.a.createElement("mark",null,"Sales")," Objects"),symbol:"announcement"}],E=[{description:"The primary internal Salesforce org. Used to run our online sales business...",hasTooltip:!0,figureClass:"slds-icon-custom-27",grabbed:!1,initials:"SC",label:"Sales Cloud"},{description:"Salesforce Marketing Cloud lets businesses of any size...",hasTooltip:!0,figureClass:"slds-icon-custom-59",grabbed:!1,initials:"MC",label:"Marketing Cloud"},{description:"Community for managing employee benefits and time off.",hasTooltip:!1,figureClass:"slds-icon-custom-10",grabbed:!1,initials:"HR",label:"HR Concierge"},{description:"Manage your finances across multiple financial platforms...",hasTooltip:!0,figureClass:"slds-icon-custom-6",grabbed:!1,initials:"MM",label:"My Money"},{description:"The key to call center and contact center management is more...",hasTooltip:!0,figureClass:"slds-icon-custom-91",grabbed:!1,initials:"CC",label:"Call Center"},{description:"Areas of Focus are used to track customer support for your...",hasTooltip:!0,figureClass:"slds-icon-custom-50",grabbed:!1,initials:"CS",label:"Customer Support Community"}],S=[{description:"The primary internal Salesforce org. Used to run our...",hasTooltip:!0,figureClass:"slds-icon-custom-27",grabbed:!1,initials:"SC",label:s.a.createElement("span",null,s.a.createElement("mark",null,"Sales")," Cloud")}],T=function(e,t,a){var l=e.slice(0);return l.splice(a,0,l.splice(t,1)[0]),l},_=E.slice(0);_[0]=Object.assign({},_[0],{grabbed:!0});var O=T(E,0,2);O[2]=Object.assign({},O[2],{grabbed:!0});var C=T(E,0,3),x=s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:E,dragDropLiveRegion:"",itemTiles:y})),j=x,w=[{id:"default",label:"Default",demoStyles:"height: 800px;",storybookStyles:!0,element:x},{id:"grabbed",label:"Tile grabbed",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:_,dragDropLiveRegion:"Sales Cloud: current position 1 of 6. Use the up and down arrows to move this app",grabbed:!0,itemTiles:y}))},{id:"moved",label:"Tile moved in list",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:O,dragDropLiveRegion:"Sales Cloud: new position 3 of 6.",itemTiles:y}))},{id:"dropped",label:"Tile dropped",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:C,dragDropLiveRegion:"Sales Cloud: final position 4 of 6.",itemTiles:y}))},{id:"search",label:"Search",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:S,dragDropLiveRegion:"",itemTiles:v,searchTerm:"sales"}))},{id:"tooltip",label:"Tooltip",demoStyles:"width: 360px; height: 13rem; position: relative; padding: 0;",storybookStyles:!0,element:s.a.createElement(g,{figureClass:"slds-icon-custom-27",objectInitials:"SC",label:"Sales Cloud",description:"The primary internal Salesforce org. Used to run our online sales business...",hasTooltip:!0,tooltipText:"The primary internal Salesforce org. Used to run our online sales business and manage accounts.",index:"x"})}],k=a(1),N=n.c.a,A=n.c.code,D=n.c.em,L=n.c.h2,M=n.c.h3,R=n.c.p,I=function(){return Object(l.createElement)(n.b,{},Object(l.createElement)("div",{className:"doc lead"},"The App Launcher allows the user to quickly access all the apps and functionality within their organization."),Object(l.createElement)(i.a,{isViewport:!0,exampleOnly:!0,demoStyles:"height: 600px;"},Object(k.f)(j)),L({id:"About-App-Launcher"},"About App Launcher"),R({},"The App Launcher is a ",N({href:"/components/modals"},"modal dialog")," which contains 2 sections of information. The top section is a list of all the applications installed in the organization, and the second section is the list of items in that organization."),R({},"The 2 sections are implemented as ",N({href:"/components/expandable-section/"},"Expandable Sections")," and can be expanded or collapsed. Applications and Items are also searchable within the modal via the search input in the modal header."),L({id:"Base"},"Base"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"default")},Object(k.f)(w,"default")),L({id:"Description-overflow"},"Description overflow"),R({},'When the tile description is too long to fit on 2 lines, a "more" ',A({},"button")," is shown after an ellipsis. Text truncation isn't handled via CSS in the case of an App Launcher Tile due to the responsive nature of the tile size."),Object(l.createElement)(o.a,{type:"note",header:"Truncate via JavaScript"},Object(l.createElement)("p",null,"Multi-line truncation can only be done via JavaScript. You should calculate how many characters will fit over a maximum of 2 lines, depending on the tile width and trim the string accordingly.")),R({},"On hover or focus, the more ",A({},"button")," will display the full description using a ",N({href:"/components/tooltips"},"Tooltip")),Object(l.createElement)(i.a,{demoStyles:Object(k.e)(w,"tooltip")},Object(k.f)(w,"tooltip")),L({id:"Reordering-tiles-via-drag-and-drop"},"Reordering tiles via drag and drop"),R({},"App tiles can be re-ordered via mouse drag and drop or with the keyboard via the use of the grab handle button under the avatar. The grab handle button is implemented as a ",N({href:"/components/button-icons/#Stateful"},"Stateful Icon Button")),Object(l.createElement)(o.a,{type:"a11y",header:"Communicating to assistive technology"},Object(l.createElement)("p",null,"When implementing drag and drop it is important to be able to communicate what is happening visually on the screen to assistive technology users. We do this via an Assertive Live Region, which is placed before the list of tiles, and has ",Object(l.createElement)("code",null,'aria-live="assertive"'))),M({id:"Tile-grabbed"},"Tile grabbed"),R({},"When a tile is grabbed add the class name of ",A({},"slds-is-grabbed")," to the tile class list. When initiating the grab via the stateful button, be sure to set ",A({},'aria-pressed="true"')," on the button. Also be sure to update the contents of the live region to communicate what was grabbed, its current position and how to move the item. Something like: ",D({},'"Sales Cloud: current position 1 of 6. Use the up and down arrows to move this app"')),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"grabbed")},Object(k.f)(w,"grabbed")),M({id:"Tile-moved-in-list"},"Tile moved in list"),R({},"When the tile is moved in the list using a keyboard, update the live region for every move to indicate its new position to the user. Something like: ",D({},'"Sales Cloud: new position 3 of 6."')),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"moved")},Object(k.f)(w,"moved")),M({id:"Tile-dropped"},"Tile dropped"),R({},"Finally, when a tile is dropped into its final position, reset ",A({},"aria-pressed")," to be ",A({},"false")," on the stateful button, and update the live region to inform the user of the items final position. e.g. ",D({},'"Sales Cloud: final position 4 of 6."')),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"dropped")},Object(k.f)(w,"dropped")),L({id:"Searching"},"Searching"),R({},"When using the search input at the top of the modal, the list of applications and items filters as the user types. The remaining items on display have the matching search term highlighted with the use of the ",A({},"<mark />")," element wrapping the matching term. This creates the visual highlight around the term."),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"search")},Object(k.f)(w,"search")))},z=function(){return Object(n.a)(I())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/app-launcher/docs.mdx.js"]=function(e){function t(t){for(var l,i,o=t[0],r=t[1],c=t[2],p=0,m=[];p<o.length;p++)i=o[p],Object.prototype.hasOwnProperty.call(s,i)&&s[i]&&m.push(s[i][0]),s[i]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(d&&d(t);m.length;)m.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],l=!0,o=1;o<a.length;o++){var r=a[o];0!==s[r]&&(l=!1)}l&&(n.splice(t--,1),e=i(i.s=a[0]))}return e}var l={},s={4:0},n=[];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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var d=r;return n.push([761,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},761:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return I})),a.d(t,"getContents",(function(){return z}));var l=a(0),s=a.n(l),n=a(4),i=a(2),o=(a(27),a(15),a(13)),r=a(9),c=a(21),d=a(84),p=a(49),m=a(136),u=a(50),h=a(5),b=a.n(h),f=function(e){return s.a.createElement(c.b,{className:"slds-modal_large slds-app-launcher","aria-labelledby":"header43"},s.a.createElement(c.e,{className:"slds-grid slds-grid_align-spread slds-grid_vertical-align-center"},s.a.createElement("h2",{id:"header43",className:"slds-text-heading_medium"},"App launcher"),s.a.createElement("div",{className:"slds-app-launcher__header-search"},s.a.createElement("div",{className:"slds-form-element"},s.a.createElement("label",{htmlFor:"app-launcher-search",className:"slds-form-element__label slds-assistive-text"},"Find an app"),s.a.createElement("div",{className:"slds-form-element__control slds-input-has-icon slds-input-has-icon_left"},s.a.createElement(r.a,{className:"slds-input__icon",sprite:"utility",symbol:"search"}),s.a.createElement("input",{type:"search",className:"slds-input",id:"app-launcher-search",placeholder:"Find an app",defaultValue:e.searchTerm})))),s.a.createElement("button",{className:"slds-button slds-button_neutral"},"App Exchange")),s.a.createElement(c.c,{className:"slds-app-launcher__content slds-p-around_medium"},s.a.createElement(d.a,{className:"slds-is-open"},s.a.createElement(d.c,null,s.a.createElement(d.d,{isOpen:!0,referenceId:"appsContent"},"All Apps")),s.a.createElement(d.b,{isOpen:!0,referenceId:"appsContent"},s.a.createElement("div",{className:"slds-assistive-text",id:"drag-live-region","aria-live":"assertive"},e.dragDropLiveRegion),s.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded slds-wrap"},e.appTiles.map((function(e,t){return s.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3",key:t},s.a.createElement(g,{figureClass:e.figureClass,grabbed:e.grabbed,objectInitials:e.initials,label:e.label,description:e.description,hasTooltip:e.hasTooltip,tooltipText:e.tooltipText,index:t}))}))))),s.a.createElement("hr",null),s.a.createElement(d.a,{className:"slds-is-open"},s.a.createElement(d.c,null,s.a.createElement(d.d,{isOpen:!0,referenceId:"itemsContent"},"All Items")),s.a.createElement(d.b,{isOpen:!0,referenceId:"itemsContent"},s.a.createElement("ul",{className:"slds-grid slds-wrap"},e.itemTiles.map((function(e,t){return s.a.createElement("li",{className:"slds-col_padded slds-p-vertical_xx-small slds-size_1-of-5",key:t},s.a.createElement("a",{href:"#",className:"slds-truncate",title:e.label,onClick:function(e){return e.preventDefault()}},e.label))})))))))},g=function(e){return s.a.createElement("div",{draggable:!0,className:b()("slds-app-launcher__tile slds-text-link_reset slds-is-draggable",e.className,{"slds-is-grabbed":e.grabbed})},s.a.createElement("div",{className:"slds-app-launcher__tile-figure"},s.a.createElement(p.a,{className:"slds-avatar_large"},s.a.createElement("abbr",{className:b()("slds-avatar__initials",e.figureClass),title:e.label},e.objectInitials)),s.a.createElement("div",{className:"slds-m-top_xxx-small"},s.a.createElement(m.a,{"aria-pressed":e.grabbed?"true":"false",assistiveText:"Reorder",selected:e.grabbed,symbol:"rows",title:"Reorder"}))),s.a.createElement("div",{className:"slds-app-launcher__tile-body"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.label),s.a.createElement("p",null,e.description," ",e.hasTooltip&&s.a.createElement("button",{"aria-describedby":"help-".concat(e.index),className:"slds-button slds-button_reset slds-text-link"},"More")),s.a.createElement(u.a,{className:b()("slds-nubbin_top-right",{"slds-hide":!e.tooltipText}),id:"help-".concat(e.index),style:{position:"absolute",top:"80px",right:"30px"}},e.tooltipText)))},y=[{label:"Accounts",symbol:"account"},{label:"Announcements",symbol:"announcement"},{label:"Approvals",symbol:"approval"},{label:"Campaigns",symbol:"campaign"},{label:"Cases",symbol:"case"},{label:"Coaching",symbol:"coaching"},{label:"Contacts",symbol:"contact"}],v=[{label:s.a.createElement("span",null,s.a.createElement("mark",null,"Sales")," Invoices"),symbol:"account"},{label:s.a.createElement("span",null,s.a.createElement("mark",null,"Sales")," Objects"),symbol:"announcement"}],E=[{description:"The primary internal Salesforce org. Used to run our online sales business...",hasTooltip:!0,figureClass:"slds-icon-custom-27",grabbed:!1,initials:"SC",label:"Sales Cloud"},{description:"Salesforce Marketing Cloud lets businesses of any size...",hasTooltip:!0,figureClass:"slds-icon-custom-59",grabbed:!1,initials:"MC",label:"Marketing Cloud"},{description:"Community for managing employee benefits and time off.",hasTooltip:!1,figureClass:"slds-icon-custom-10",grabbed:!1,initials:"HR",label:"HR Concierge"},{description:"Manage your finances across multiple financial platforms...",hasTooltip:!0,figureClass:"slds-icon-custom-6",grabbed:!1,initials:"MM",label:"My Money"},{description:"The key to call center and contact center management is more...",hasTooltip:!0,figureClass:"slds-icon-custom-91",grabbed:!1,initials:"CC",label:"Call Center"},{description:"Areas of Focus are used to track customer support for your...",hasTooltip:!0,figureClass:"slds-icon-custom-50",grabbed:!1,initials:"CS",label:"Customer Support Community"}],S=[{description:"The primary internal Salesforce org. Used to run our...",hasTooltip:!0,figureClass:"slds-icon-custom-27",grabbed:!1,initials:"SC",label:s.a.createElement("span",null,s.a.createElement("mark",null,"Sales")," Cloud")}],T=function(e,t,a){var l=e.slice(0);return l.splice(a,0,l.splice(t,1)[0]),l},_=E.slice(0);_[0]=Object.assign({},_[0],{grabbed:!0});var O=T(E,0,2);O[2]=Object.assign({},O[2],{grabbed:!0});var C=T(E,0,3),x=s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:E,dragDropLiveRegion:"",itemTiles:y})),j=x,w=[{id:"default",label:"Default",demoStyles:"height: 800px;",storybookStyles:!0,element:x},{id:"grabbed",label:"Tile grabbed",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:_,dragDropLiveRegion:"Sales Cloud: current position 1 of 6. Use the up and down arrows to move this app",grabbed:!0,itemTiles:y}))},{id:"moved",label:"Tile moved in list",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:O,dragDropLiveRegion:"Sales Cloud: new position 3 of 6.",itemTiles:y}))},{id:"dropped",label:"Tile dropped",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:C,dragDropLiveRegion:"Sales Cloud: final position 4 of 6.",itemTiles:y}))},{id:"search",label:"Search",demoStyles:"height: 800px;",storybookStyles:!0,element:s.a.createElement(c.a,null,s.a.createElement(f,{appTiles:S,dragDropLiveRegion:"",itemTiles:v,searchTerm:"sales"}))},{id:"tooltip",label:"Tooltip",demoStyles:"width: 360px; height: 13rem; position: relative; padding: 0;",storybookStyles:!0,element:s.a.createElement(g,{figureClass:"slds-icon-custom-27",objectInitials:"SC",label:"Sales Cloud",description:"The primary internal Salesforce org. Used to run our online sales business...",hasTooltip:!0,tooltipText:"The primary internal Salesforce org. Used to run our online sales business and manage accounts.",index:"x"})}],k=a(1),N=n.c.a,A=n.c.code,D=n.c.em,L=n.c.h2,M=n.c.h3,R=n.c.p,I=function(){return Object(l.createElement)(n.b,{},Object(l.createElement)("div",{className:"doc lead"},"The App Launcher allows the user to quickly access all the apps and functionality within their organization."),Object(l.createElement)(i.a,{isViewport:!0,exampleOnly:!0,demoStyles:"height: 600px;"},Object(k.f)(j)),L({id:"About-App-Launcher"},"About App Launcher"),R({},"The App Launcher is a ",N({href:"/components/modals"},"modal dialog")," which contains 2 sections of information. The top section is a list of all the applications installed in the organization, and the second section is the list of items in that organization."),R({},"The 2 sections are implemented as ",N({href:"/components/expandable-section/"},"Expandable Sections")," and can be expanded or collapsed. Applications and Items are also searchable within the modal via the search input in the modal header."),L({id:"Base"},"Base"),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"default")},Object(k.f)(w,"default")),L({id:"Description-overflow"},"Description overflow"),R({},'When the tile description is too long to fit on 2 lines, a "more" ',A({},"button")," is shown after an ellipsis. Text truncation isn't handled via CSS in the case of an App Launcher Tile due to the responsive nature of the tile size."),Object(l.createElement)(o.a,{type:"note",header:"Truncate via JavaScript"},Object(l.createElement)("p",null,"Multi-line truncation can only be done via JavaScript. You should calculate how many characters will fit over a maximum of 2 lines, depending on the tile width and trim the string accordingly.")),R({},"On hover or focus, the more ",A({},"button")," will display the full description using a ",N({href:"/components/tooltips"},"Tooltip")),Object(l.createElement)(i.a,{demoStyles:Object(k.e)(w,"tooltip")},Object(k.f)(w,"tooltip")),L({id:"Reordering-tiles-via-drag-and-drop"},"Reordering tiles via drag and drop"),R({},"App tiles can be re-ordered via mouse drag and drop or with the keyboard via the use of the grab handle button under the avatar. The grab handle button is implemented as a ",N({href:"/components/button-icons/#Stateful"},"Stateful Icon Button")),Object(l.createElement)(o.a,{type:"a11y",header:"Communicating to assistive technology"},Object(l.createElement)("p",null,"When implementing drag and drop it is important to be able to communicate what is happening visually on the screen to assistive technology users. We do this via an Assertive Live Region, which is placed before the list of tiles, and has ",Object(l.createElement)("code",null,'aria-live="assertive"'))),M({id:"Tile-grabbed"},"Tile grabbed"),R({},"When a tile is grabbed add the class name of ",A({},"slds-is-grabbed")," to the tile class list. When initiating the grab via the stateful button, be sure to set ",A({},'aria-pressed="true"')," on the button. Also be sure to update the contents of the live region to communicate what was grabbed, its current position and how to move the item. Something like: ",D({},'"Sales Cloud: current position 1 of 6. Use the up and down arrows to move this app"')),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"grabbed")},Object(k.f)(w,"grabbed")),M({id:"Tile-moved-in-list"},"Tile moved in list"),R({},"When the tile is moved in the list using a keyboard, update the live region for every move to indicate its new position to the user. Something like: ",D({},'"Sales Cloud: new position 3 of 6."')),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"moved")},Object(k.f)(w,"moved")),M({id:"Tile-dropped"},"Tile dropped"),R({},"Finally, when a tile is dropped into its final position, reset ",A({},"aria-pressed")," to be ",A({},"false")," on the stateful button, and update the live region to inform the user of the items final position. e.g. ",D({},'"Sales Cloud: final position 4 of 6."')),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"dropped")},Object(k.f)(w,"dropped")),L({id:"Searching"},"Searching"),R({},"When using the search input at the top of the modal, the list of applications and items filters as the user types. The remaining items on display have the matching search term highlighted with the use of the ",A({},"<mark />")," element wrapping the matching term. This creates the visual highlight around the term."),Object(l.createElement)(i.a,{isViewport:!0,demoStyles:Object(k.e)(w,"search")},Object(k.f)(w,"search")))},z=function(){return Object(n.a)(I())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/avatar/docs.mdx.js"]=function(e){function t(t){for(var n,c,i=t[0],o=t[1],s=t[2],d=0,b=[];d<i.length;d++)c=i[d],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&b.push(l[c][0]),l[c]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(u&&u(t);b.length;)b.shift()();return r.push.apply(r,s\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],n=!0,i=1;i<a.length;i++){var o=a[i];0!==l[o]&&(n=!1)}n&&(r.splice(t--,1),e=c(c.s=a[0]))}return e}var n={},l={6:0},r=[];function c(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,c),a.l=!0,a.exports}c.m=e,c.c=n,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 n in e)c.d(a,n,function(t){return e[t]}.bind(null,n));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\|\|[],o=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var u=o;return r.push([~~786~~,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},~~786~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return v})),a.d(t,"getContents",(function(){return g}));var n=a(0),l=a.n(n),r=a(4),c=a(2),i=a(1),o=a(40),s=a(49),u=a(53),d=[{id:"default",label:"Default",element:l.a.createElement(s.a,null,l.a.createElement(u.c,{iconClassName:"slds-icon-standard-account",title:"company name",initials:"Ac"}))}],b=[{id:"linked-avatar-initials",label:"Wrapped in a link",element:l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},l.a.createElement(s.a,null,l.a.createElement(u.c,{iconClassName:"slds-icon-standard-account",title:"company name",initials:"Ac"})))}],f=r.c.code,m=r.c.h2,p=r.c.h3,O=r.c.h4,j=r.c.p,v=function(){return Object(n.createElement)(r.b,{},Object(n.createElement)("div",{className:"doc lead"},"An avatar component represents an object or entity"),Object(n.createElement)(c.a,{exampleOnly:!0},Object(i.f)(s.b)),m({id:"About-Avatar"},"About Avatar"),j({},"An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires ",f({},".slds-avatar")," as the base class."),p({id:"Examples"},"Examples"),O({id:"Profile-Icon"},"Profile Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"profile-icon")),O({id:"Group-Icon"},"Group Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"group-icon")),O({id:"Fallback-User-Icon"},"Fallback User Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-user-icon")),O({id:"Fallback-Entity-Icon"},"Fallback Entity Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-entity-icon")),O({id:"Fallback-User-Initials"},"Fallback User Initials"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-user-initials")),O({id:"Fallback-Entity-Initials"},"Fallback Entity Initials"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-entity-initials")),O({id:"Fallback-User-Inverse"},"Fallback User Inverse"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-user-initials-inverse")),O({id:"Linked-Avatar"},"Linked Avatar"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"linked-avatar")),m({id:"Initials"},"Initials"),j({},"If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback."),Object(n.createElement)(c.a,null,Object(i.f)(d)),p({id:"Examples-2"},"Examples"),O({id:"Linked-Avatar-2"},"Linked Avatar"),Object(n.createElement)(c.a,null,Object(i.f)(b,"linked-avatar-initials")),m({id:"Layout"},"Layout"),p({id:"Circle"},"Circle"),j({},"Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the ",f({},".slds-avatar_circle")," class. Four additional classes are available for sizing."),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"circle")),m({id:"Sizes"},"Sizes"),p({id:"X-Small"},"X-Small"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"x-small-image")),p({id:"Small"},"Small"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"small-image")),p({id:"Medium"},"Medium"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"medium-image")),p({id:"Large"},"Large"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"large-image")),m({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(o.a,{name:"avatar",type:"component"}))},g=function(){return Object(r.a)(v())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/avatar/docs.mdx.js"]=function(e){function t(t){for(var n,c,i=t[0],o=t[1],s=t[2],d=0,b=[];d<i.length;d++)c=i[d],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&b.push(l[c][0]),l[c]=0;for(n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);for(u&&u(t);b.length;)b.shift()();return r.push.apply(r,s\|\|[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],n=!0,i=1;i<a.length;i++){var o=a[i];0!==l[o]&&(n=!1)}n&&(r.splice(t--,1),e=c(c.s=a[0]))}return e}var n={},l={6:0},r=[];function c(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,c),a.l=!0,a.exports}c.m=e,c.c=n,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 n in e)c.d(a,n,function(t){return e[t]}.bind(null,n));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\|\|[],o=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var u=o;return r.push([787,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},787:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return v})),a.d(t,"getContents",(function(){return g}));var n=a(0),l=a.n(n),r=a(4),c=a(2),i=a(1),o=a(40),s=a(49),u=a(53),d=[{id:"default",label:"Default",element:l.a.createElement(s.a,null,l.a.createElement(u.c,{iconClassName:"slds-icon-standard-account",title:"company name",initials:"Ac"}))}],b=[{id:"linked-avatar-initials",label:"Wrapped in a link",element:l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},l.a.createElement(s.a,null,l.a.createElement(u.c,{iconClassName:"slds-icon-standard-account",title:"company name",initials:"Ac"})))}],f=r.c.code,m=r.c.h2,p=r.c.h3,O=r.c.h4,j=r.c.p,v=function(){return Object(n.createElement)(r.b,{},Object(n.createElement)("div",{className:"doc lead"},"An avatar component represents an object or entity"),Object(n.createElement)(c.a,{exampleOnly:!0},Object(i.f)(s.b)),m({id:"About-Avatar"},"About Avatar"),j({},"An avatar can be circular or a rounded rectangle, depending on usage. The default is a rounded rectangle and requires ",f({},".slds-avatar")," as the base class."),p({id:"Examples"},"Examples"),O({id:"Profile-Icon"},"Profile Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"profile-icon")),O({id:"Group-Icon"},"Group Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"group-icon")),O({id:"Fallback-User-Icon"},"Fallback User Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-user-icon")),O({id:"Fallback-Entity-Icon"},"Fallback Entity Icon"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-entity-icon")),O({id:"Fallback-User-Initials"},"Fallback User Initials"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-user-initials")),O({id:"Fallback-Entity-Initials"},"Fallback Entity Initials"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-entity-initials")),O({id:"Fallback-User-Inverse"},"Fallback User Inverse"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"fallback-user-initials-inverse")),O({id:"Linked-Avatar"},"Linked Avatar"),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"linked-avatar")),m({id:"Initials"},"Initials"),j({},"If an image is unavailable, up to two letters can be used instead. If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter. If either an image or initials are unavailable, use the object icon as a fallback."),Object(n.createElement)(c.a,null,Object(i.f)(d)),p({id:"Examples-2"},"Examples"),O({id:"Linked-Avatar-2"},"Linked Avatar"),Object(n.createElement)(c.a,null,Object(i.f)(b,"linked-avatar-initials")),m({id:"Layout"},"Layout"),p({id:"Circle"},"Circle"),j({},"Use a circle for all people-oriented objects that could potentially render as avatars. For a fully round avatar, add the ",f({},".slds-avatar_circle")," class. Four additional classes are available for sizing."),Object(n.createElement)(c.a,null,Object(i.f)(s.c,"circle")),m({id:"Sizes"},"Sizes"),p({id:"X-Small"},"X-Small"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"x-small-image")),p({id:"Small"},"Small"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"small-image")),p({id:"Medium"},"Medium"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"medium-image")),p({id:"Large"},"Large"),Object(n.createElement)(c.a,{toggleCode:!1},Object(i.f)(s.c,"large-image")),m({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(o.a,{name:"avatar",type:"component"}))},g=function(){return Object(r.a)(v())}}});

package/__internal/chunked/docs/ui/components/avatar-group/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/avatar-group/docs.mdx.js"]=function(e){function t(t){for(var l,r,s=t[0],c=t[1],o=t[2],u=0,d=[];u<s.length;u++)r=s[u],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&d.push(n[r][0]),n[r]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(m&&m(t);d.length;)d.shift()();return i.push.apply(i,o\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var c=a[s];0!==n[c]&&(l=!1)}l&&(i.splice(t--,1),e=r(r.s=a[0]))}return e}var l={},n={5:0},i=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=l,r.d=function(e,t,a){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(a,l,function(t){return e[t]}.bind(null,l));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=s.push.bind(s);s.push=t,s=s.slice();for(var o=0;o<s.length;o++)t(s[o]);var m=c;return i.push([741,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},741:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return P})),a.d(t,"getContents",(function(){return z}));var l=a(0),n=a.n(l),i=a(4),r=a(3),s=a.n(r),c=a(5),o=a.n(c),m=a(53);var u=function(e){var t=e.isPrimary,a=e.isInverse,i=e.type,r=function(e,t){switch(e){case"icon":return n.a.createElement(g,null);case"user-initials":return n.a.createElement(E,{isInverse:a});case"image":default:return n.a.createElement(b,{imgType:t?"1":"2"})}};return n.a.createElement(l.Fragment,null,n.a.createElement(p,{isPrimary:!0,isInverse:a},r(i,t)),n.a.createElement(p,{isInverse:a},r(i,!1)))};u.defaultProps={type:"image"},u.propTypes={type:s.a.oneOf(["image","icon","user-initials"]),isPrimary:s.a.bool,isInverse:s.a.bool};var d=function(e){return n.a.createElement("span",{className:o()("slds-avatar-group",(t={},a="slds-avatar-group_".concat(e.size),l=e.size,a in t?Object.defineProperty(t,a,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[a]=l,t))},e.children);var t,a,l};d.defaultProps={children:n.a.createElement(u,null)},d.propTypes={children:s.a.node.isRequired,size:s.a.oneOf(["x-small","small","medium","large"])};var p=function(e){var t=e.children,a=e.isPrimary,l=e.isInverse;return n.a.createElement(m.a,{isGrouped:!0,isPrimary:a,isInverse:l},t)};p.propTypes={children:s.a.node.isRequired,isPrimary:s.a.bool,isInverse:s.a.bool};var b=function(e){var t=e.imgType,a="Person ".concat(t," name");return n.a.createElement("img",{alt:a,src:"/assets/images/avatar".concat(t,".jpg"),title:a})};b.defaultProps={imgType:"1"},b.propTypes={imgType:s.a.oneOf(["1","2"]).isRequired};var g=function(e){return n.a.createElement(m.b,{symbol:"user",isGrouped:!0})},E=function(e){return n.a.createElement(m.c,{isGrouped:!0,isInverse:e.isInverse,title:"Person name",initials:"WW"})};E.propTypes={isInverse:s.a.bool};a(49);var h=a(14),f=(a(15),a(2)),O=(a(27),a(35),[{id:"default",label:"Default",element:n.a.createElement(d,null,n.a.createElement(u,{type:"image"}))}]),j=[{id:"with-icons",label:"With icons",element:n.a.createElement(d,null,n.a.createElement(u,{type:"icon"}))},{id:"with-user-initials",label:"With initials",element:n.a.createElement(d,null,n.a.createElement(u,{type:"user-initials"}))},{id:"with-user-initials-inversed",label:"With initials inversed",demoStyles:"padding: 0.5rem; background: #16325c",storybookStyles:!0,element:n.a.createElement(d,null,n.a.createElement(u,{type:"user-initials",isInverse:!0}))},{id:"with-image-and-icon",label:"With image and icon",element:n.a.createElement(d,null,n.a.createElement(p,{isPrimary:!0},n.a.createElement(b,null)),n.a.createElement(p,null,n.a.createElement(g,null)))},{id:"with-icon-and-user-initials",label:"With icon and user initials",element:n.a.createElement(d,null,n.a.createElement(p,{isPrimary:!0},n.a.createElement(g,null)),n.a.createElement(p,null,n.a.createElement(E,null)))},{id:"with-user-initials-and-image",label:"With user initials and image",element:n.a.createElement(d,null,n.a.createElement(p,{isPrimary:!0},n.a.createElement(E,null)),n.a.createElement(p,null,n.a.createElement(b,null)))},{id:"x-small-image",label:"X-Small",element:n.a.createElement(d,{size:"x-small"},n.a.createElement(u,{type:"image"}))},{id:"small-image",label:"Small",element:n.a.createElement(d,{size:"small"},n.a.createElement(u,{type:"image"}))},{id:"medium-image",label:"Medium",element:n.a.createElement(d,{size:"medium"},n.a.createElement(u,{type:"image"}))},{id:"large-image",label:"Large",element:n.a.createElement(d,{size:"large"},n.a.createElement(u,{type:"image"}))},{id:"x-small-icon",label:"X-Small With icon",element:n.a.createElement(d,{size:"x-small"},n.a.createElement(u,{type:"icon"}))},{id:"small-icon",label:"Small With icon",element:n.a.createElement(d,{size:"small"},n.a.createElement(u,{type:"icon"}))},{id:"medium-icon",label:"Medium With icon",element:n.a.createElement(d,{size:"medium"},n.a.createElement(u,{type:"icon"}))},{id:"large-icon",label:"Large With icon",element:n.a.createElement(d,{size:"large"},n.a.createElement(u,{type:"icon"}))},{id:"x-small-user-initials",label:"X-Small With initials",element:n.a.createElement(d,{size:"x-small"},n.a.createElement(u,{type:"user-initials"}))},{id:"small-user-initials",label:"Small With initials",element:n.a.createElement(d,{size:"small"},n.a.createElement(u,{type:"user-initials"}))},{id:"medium-user-initials",label:"Medium With initials",element:n.a.createElement(d,{size:"medium"},n.a.createElement(u,{type:"user-initials"}))},{id:"large-user-initials",label:"Large With initials",element:n.a.createElement(d,{size:"large"},n.a.createElement(u,{type:"user-initials"}))}],v=a(28),y=a(45),S=a(1),I=i.c.code,_=i.c.h2,W=i.c.h3,w=i.c.h4,x=i.c.p,P=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"An avatar group is an element that communicates to the user that there is more than 1 person associated to an item."),Object(l.createElement)(f.a,{exampleOnly:!0},Object(S.f)(O)),_({id:"About-Avatar-Group"},"About Avatar Group"),x({},"The Avatar Group contains two Avatar components with modifying classes. Both Avatars in the group get ",I({},"slds-avatar-grouped")," applied to them. Then, ",I({},"slds-avatar-grouped__primary")," is applied to the first Avatar and ",I({},"slds-avatar-grouped__secondary")," on the second. Avatars of the image variety are preferred within an Avatar Group."),Object(l.createElement)(h.a,{type:"note",header:"Design Guidelines"},Object(l.createElement)("p",null,"Avatar Groups should only be used to represent people and NOT groups of salesforce objects.")),_({id:"Base"},"Base"),Object(l.createElement)(f.a,null,Object(S.f)(O)),W({id:"With-Icon"},"With Icon"),x({},"Icon Avatars can be put into a group. In this case, on the ",I({},"slds-icon_container")," apply the ",I({},"slds-avatar-grouped__icon")," class."),Object(l.createElement)(f.a,null,Object(S.f)(j,"with-icons")),W({id:"With-User-Initials"},"With User Initials"),x({},"User Initials Avatars can be put into a group. In this case, on the ",I({},"<abbr>")," apply the ",I({},"slds-avatar-grouped__initials")," class."),Object(l.createElement)(f.a,null,Object(S.f)(j,"with-user-initials")),w({id:"Inversed"},"Inversed"),x({},"Inversed User Initials Avatars can also be used in a group when on a dark background. To achieve the lighter background for the Avatar, additionally apply the ",I({},"slds-avatar-grouped_inverse")," class along with the ",I({},"slds-avatar-grouped")," class."),Object(l.createElement)(f.a,{demoStyles:Object(S.e)(j,"with-user-initials-inversed")},Object(S.f)(j,"with-user-initials-inversed")),W({id:"With-Mixed-Avatar-types"},"With Mixed Avatar types"),x({},"Avatars of type image, icon, or initials can be used in combination with each other in a group."),Object(l.createElement)(f.a,null,Object(l.createElement)(l.Fragment,null,Object(S.f)(j,"with-image-and-icon"),Object(S.f)(j,"with-icon-and-user-initials"),Object(S.f)(j,"with-user-initials-and-image"))),_({id:"Sizes"},"Sizes"),x({},"Avatar Groups come in 4 different sizes: ",I({},"x-small"),", ",I({},"small"),", ",I({},"medium"),", and ",I({},"large")," by applying a ",I({},"slds-avatar-group_{size}")," modifier class on ",I({},"slds-avatar-group"),". If the size modifier class is not used, ",I({},"medium")," is also the default size."),W({id:"With-Images"},"With Images"),Object(l.createElement)(y.a,null,Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"X-Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"x-small-image"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"small-image"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Medium"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"medium-image"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Large"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"large-image")))),W({id:"With-Icons"},"With Icons"),Object(l.createElement)(y.a,null,Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"X-Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"x-small-icon"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"small-icon"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Medium"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"medium-icon"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Large"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"large-icon")))),W({id:"With-User-Initials-2"},"With User Initials"),Object(l.createElement)(y.a,null,Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"X-Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"x-small-user-initials"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"small-user-initials"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Medium"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"medium-user-initials"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Large"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"large-user-initials")))))},z=function(){return Object(i.a)(P())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/avatar-group/docs.mdx.js"]=function(e){function t(t){for(var l,r,s=t[0],c=t[1],o=t[2],u=0,d=[];u<s.length;u++)r=s[u],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&d.push(n[r][0]),n[r]=0;for(l in c)Object.prototype.hasOwnProperty.call(c,l)&&(e[l]=c[l]);for(m&&m(t);d.length;)d.shift()();return i.push.apply(i,o\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var c=a[s];0!==n[c]&&(l=!1)}l&&(i.splice(t--,1),e=r(r.s=a[0]))}return e}var l={},n={5:0},i=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=l,r.d=function(e,t,a){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)r.d(a,l,function(t){return e[t]}.bind(null,l));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],c=s.push.bind(s);s.push=t,s=s.slice();for(var o=0;o<s.length;o++)t(s[o]);var m=c;return i.push([742,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},742:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return P})),a.d(t,"getContents",(function(){return z}));var l=a(0),n=a.n(l),i=a(4),r=a(3),s=a.n(r),c=a(5),o=a.n(c),m=a(53);var u=function(e){var t=e.isPrimary,a=e.isInverse,i=e.type,r=function(e,t){switch(e){case"icon":return n.a.createElement(g,null);case"user-initials":return n.a.createElement(E,{isInverse:a});case"image":default:return n.a.createElement(b,{imgType:t?"1":"2"})}};return n.a.createElement(l.Fragment,null,n.a.createElement(p,{isPrimary:!0,isInverse:a},r(i,t)),n.a.createElement(p,{isInverse:a},r(i,!1)))};u.defaultProps={type:"image"},u.propTypes={type:s.a.oneOf(["image","icon","user-initials"]),isPrimary:s.a.bool,isInverse:s.a.bool};var d=function(e){return n.a.createElement("span",{className:o()("slds-avatar-group",(t={},a="slds-avatar-group_".concat(e.size),l=e.size,a in t?Object.defineProperty(t,a,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[a]=l,t))},e.children);var t,a,l};d.defaultProps={children:n.a.createElement(u,null)},d.propTypes={children:s.a.node.isRequired,size:s.a.oneOf(["x-small","small","medium","large"])};var p=function(e){var t=e.children,a=e.isPrimary,l=e.isInverse;return n.a.createElement(m.a,{isGrouped:!0,isPrimary:a,isInverse:l},t)};p.propTypes={children:s.a.node.isRequired,isPrimary:s.a.bool,isInverse:s.a.bool};var b=function(e){var t=e.imgType,a="Person ".concat(t," name");return n.a.createElement("img",{alt:a,src:"/assets/images/avatar".concat(t,".jpg"),title:a})};b.defaultProps={imgType:"1"},b.propTypes={imgType:s.a.oneOf(["1","2"]).isRequired};var g=function(e){return n.a.createElement(m.b,{symbol:"user",isGrouped:!0})},E=function(e){return n.a.createElement(m.c,{isGrouped:!0,isInverse:e.isInverse,title:"Person name",initials:"WW"})};E.propTypes={isInverse:s.a.bool};a(49);var h=a(13),f=(a(15),a(2)),O=(a(27),a(35),[{id:"default",label:"Default",element:n.a.createElement(d,null,n.a.createElement(u,{type:"image"}))}]),j=[{id:"with-icons",label:"With icons",element:n.a.createElement(d,null,n.a.createElement(u,{type:"icon"}))},{id:"with-user-initials",label:"With initials",element:n.a.createElement(d,null,n.a.createElement(u,{type:"user-initials"}))},{id:"with-user-initials-inversed",label:"With initials inversed",demoStyles:"padding: 0.5rem; background: #16325c",storybookStyles:!0,element:n.a.createElement(d,null,n.a.createElement(u,{type:"user-initials",isInverse:!0}))},{id:"with-image-and-icon",label:"With image and icon",element:n.a.createElement(d,null,n.a.createElement(p,{isPrimary:!0},n.a.createElement(b,null)),n.a.createElement(p,null,n.a.createElement(g,null)))},{id:"with-icon-and-user-initials",label:"With icon and user initials",element:n.a.createElement(d,null,n.a.createElement(p,{isPrimary:!0},n.a.createElement(g,null)),n.a.createElement(p,null,n.a.createElement(E,null)))},{id:"with-user-initials-and-image",label:"With user initials and image",element:n.a.createElement(d,null,n.a.createElement(p,{isPrimary:!0},n.a.createElement(E,null)),n.a.createElement(p,null,n.a.createElement(b,null)))},{id:"x-small-image",label:"X-Small",element:n.a.createElement(d,{size:"x-small"},n.a.createElement(u,{type:"image"}))},{id:"small-image",label:"Small",element:n.a.createElement(d,{size:"small"},n.a.createElement(u,{type:"image"}))},{id:"medium-image",label:"Medium",element:n.a.createElement(d,{size:"medium"},n.a.createElement(u,{type:"image"}))},{id:"large-image",label:"Large",element:n.a.createElement(d,{size:"large"},n.a.createElement(u,{type:"image"}))},{id:"x-small-icon",label:"X-Small With icon",element:n.a.createElement(d,{size:"x-small"},n.a.createElement(u,{type:"icon"}))},{id:"small-icon",label:"Small With icon",element:n.a.createElement(d,{size:"small"},n.a.createElement(u,{type:"icon"}))},{id:"medium-icon",label:"Medium With icon",element:n.a.createElement(d,{size:"medium"},n.a.createElement(u,{type:"icon"}))},{id:"large-icon",label:"Large With icon",element:n.a.createElement(d,{size:"large"},n.a.createElement(u,{type:"icon"}))},{id:"x-small-user-initials",label:"X-Small With initials",element:n.a.createElement(d,{size:"x-small"},n.a.createElement(u,{type:"user-initials"}))},{id:"small-user-initials",label:"Small With initials",element:n.a.createElement(d,{size:"small"},n.a.createElement(u,{type:"user-initials"}))},{id:"medium-user-initials",label:"Medium With initials",element:n.a.createElement(d,{size:"medium"},n.a.createElement(u,{type:"user-initials"}))},{id:"large-user-initials",label:"Large With initials",element:n.a.createElement(d,{size:"large"},n.a.createElement(u,{type:"user-initials"}))}],v=a(28),y=a(46),S=a(1),I=i.c.code,_=i.c.h2,W=i.c.h3,w=i.c.h4,x=i.c.p,P=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"An avatar group is an element that communicates to the user that there is more than 1 person associated to an item."),Object(l.createElement)(f.a,{exampleOnly:!0},Object(S.f)(O)),_({id:"About-Avatar-Group"},"About Avatar Group"),x({},"The Avatar Group contains two Avatar components with modifying classes. Both Avatars in the group get ",I({},"slds-avatar-grouped")," applied to them. Then, ",I({},"slds-avatar-grouped__primary")," is applied to the first Avatar and ",I({},"slds-avatar-grouped__secondary")," on the second. Avatars of the image variety are preferred within an Avatar Group."),Object(l.createElement)(h.a,{type:"note",header:"Design Guidelines"},Object(l.createElement)("p",null,"Avatar Groups should only be used to represent people and NOT groups of salesforce objects.")),_({id:"Base"},"Base"),Object(l.createElement)(f.a,null,Object(S.f)(O)),W({id:"With-Icon"},"With Icon"),x({},"Icon Avatars can be put into a group. In this case, on the ",I({},"slds-icon_container")," apply the ",I({},"slds-avatar-grouped__icon")," class."),Object(l.createElement)(f.a,null,Object(S.f)(j,"with-icons")),W({id:"With-User-Initials"},"With User Initials"),x({},"User Initials Avatars can be put into a group. In this case, on the ",I({},"<abbr>")," apply the ",I({},"slds-avatar-grouped__initials")," class."),Object(l.createElement)(f.a,null,Object(S.f)(j,"with-user-initials")),w({id:"Inversed"},"Inversed"),x({},"Inversed User Initials Avatars can also be used in a group when on a dark background. To achieve the lighter background for the Avatar, additionally apply the ",I({},"slds-avatar-grouped_inverse")," class along with the ",I({},"slds-avatar-grouped")," class."),Object(l.createElement)(f.a,{demoStyles:Object(S.e)(j,"with-user-initials-inversed")},Object(S.f)(j,"with-user-initials-inversed")),W({id:"With-Mixed-Avatar-types"},"With Mixed Avatar types"),x({},"Avatars of type image, icon, or initials can be used in combination with each other in a group."),Object(l.createElement)(f.a,null,Object(l.createElement)(l.Fragment,null,Object(S.f)(j,"with-image-and-icon"),Object(S.f)(j,"with-icon-and-user-initials"),Object(S.f)(j,"with-user-initials-and-image"))),_({id:"Sizes"},"Sizes"),x({},"Avatar Groups come in 4 different sizes: ",I({},"x-small"),", ",I({},"small"),", ",I({},"medium"),", and ",I({},"large")," by applying a ",I({},"slds-avatar-group_{size}")," modifier class on ",I({},"slds-avatar-group"),". If the size modifier class is not used, ",I({},"medium")," is also the default size."),W({id:"With-Images"},"With Images"),Object(l.createElement)(y.a,null,Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"X-Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"x-small-image"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"small-image"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Medium"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"medium-image"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Large"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"large-image")))),W({id:"With-Icons"},"With Icons"),Object(l.createElement)(y.a,null,Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"X-Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"x-small-icon"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"small-icon"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Medium"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"medium-icon"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Large"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"large-icon")))),W({id:"With-User-Initials-2"},"With User Initials"),Object(l.createElement)(y.a,null,Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"X-Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"x-small-user-initials"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Small"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"small-user-initials"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Medium"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"medium-user-initials"))),Object(l.createElement)(v.a,null,Object(l.createElement)("strong",null,"Large"),Object(l.createElement)(f.a,{toggleCode:!1},Object(S.f)(j,"large-user-initials")))))},z=function(){return Object(i.a)(P())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/badges/docs.mdx.js"]=function(e){function t(t){for(var a,c,r=t[0],s=t[1],o=t[2],u=0,b=[];u<r.length;u++)c=r[u],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&b.push(l[c][0]),l[c]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,o\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],a=!0,r=1;r<n.length;r++){var s=n[r];0!==l[s]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var a={},l={7:0},i=[];function c(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,c),n.l=!0,n.exports}c.m=e,c.c=a,c.d=function(e,t,n){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(n,a,function(t){return e[t]}.bind(null,a));return n},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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=r.push.bind(r);r.push=t,r=r.slice();for(var o=0;o<r.length;o++)t(r[o]);var d=s;return i.push([~~771~~,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},~~771~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return S})),n.d(t,"getContents",(function(){return x}));var a=n(0),l=n.n(a),i=n(4),c=n(15),r=n(2),s=n(28),o=n(45),d=(n(11),n(40)),u=n(47),b=l.a.createElement(u.a,null,"Badge Label"),h=[{id:"inverse",label:"Inverse",element:l.a.createElement(u.c,null,"Inverse badge")},{id:"with-left-icon",label:"With left icon",element:l.a.createElement(u.a,null,l.a.createElement(u.b,{symbol:"moneybag"}),"423 Credits Available")},{id:"with-right-icon",label:"With right icon",element:l.a.createElement(u.a,null,"423 Credits Available",l.a.createElement(u.b,{symbol:"moneybag",align:"right"}))},{id:"light-with-left-icon",label:"Light with left icon",element:l.a.createElement(u.d,null,l.a.createElement(u.b,{symbol:"moneybag"}),"423 Credits Available")},{id:"light-with-right-icon",label:"Light with right icon",element:l.a.createElement(u.d,null,"423 Credits Available",l.a.createElement(u.b,{symbol:"moneybag",align:"right"}))},{id:"inverse-with-left-icon",label:"Inverse with left icon",element:l.a.createElement(u.c,null,l.a.createElement(u.b,{symbol:"moneybag",isInverse:!0}),"423 Credits Available")},{id:"inverse-with-right-icon",label:"Inverse with right icon",element:l.a.createElement(u.c,null,"423 Credits Available",l.a.createElement(u.b,{symbol:"moneybag",align:"right",isInverse:!0}))},{id:"badge-with-child",label:"With Child Element",element:l.a.createElement(u.a,null,"Component In: ",l.a.createElement("em",null,"Lightning"))}],g=(u.a,u.a,u.a,n(1)),m=i.c.a,f=i.c.code,p=i.c.h2,O=i.c.h3,y=i.c.p,E=i.c.table,j=i.c.tbody,v=i.c.td,w=i.c.th,_=i.c.thead,B=i.c.tr,S=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"Badges are labels which hold small amounts of information."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(g.f)(b)),p({id:"About-Badges"},"About Badges"),y({},"Badges are composed of text inside a ",f({},"span")," element and may include inline/inline-block elements and/or icons."),O({id:"Colors"},"Colors"),y({},"There are six different color badges you can use."),E({},_({},B({},w({},"Badge"),w({},"class"),w({},"description"))),j({},B({},v({},Object(a.createElement)(u.a,{key:"1"},"Default Badge")),v({},f({},".slds-badge")),v({},"This is the default badge. You probably want to use this one unless you fall into a specific use-case.")),B({},v({},Object(a.createElement)(u.c,{key:"2"},"Darker Badge")),v({},f({},".slds-badge_inverse")),v({},"This badge is used when you need higher contrast than our default badge.")),B({},v({},Object(a.createElement)(u.d,{key:"3"},"Lightest Badge")),v({},f({},".slds-badge_lightest")),v({},"This badge is used when you need higher contrast, such as on colored backgrounds.")),B({},v({},Object(a.createElement)(u.a,{key:"4",isSuccess:!0},"Success Badge")),v({},f({},".slds-badge .slds-theme_success")),v({},"This is a badge used to communicate success.")),B({},v({},Object(a.createElement)(u.a,{key:"5",isWarning:!0},"Warning Badge")),v({},f({},".slds-badge .slds-theme_warning")),v({},"This is a badge used to communicate a warning.")),B({},v({},Object(a.createElement)(u.a,{key:"6",isError:!0},"Error Badge")),v({},f({},".slds-badge .slds-theme_error")),v({},"This is a badge used to communicate an error.")))),p({id:"Base"},"Base"),Object(a.createElement)(r.a,{toggleCode:!1},Object(g.f)(b)),p({id:"Badges-with-Icons"},"Badges with Icons"),y({},"You can include an icon in your badge. For maximum visual clarity, ",m({href:"/icons/#utility"},"Utility icons")," are the suggested icon type inside badges. You may also choose to put an icon in a badge without text, but in that case, be sure to include assistive text."),y({},"The icon can be aligned to the left or right side of the text. To use an icon, wrap the icon with ",f({},'<span class="slds-badge__icon">'),". Add the classes ",f({},"slds-badge__icon_left")," or ",f({},"slds-badge__icon_right")," to the wrapper for spacing the icon in relation to the text label."),Object(a.createElement)(o.a,null,Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Base: Icon on the left"),Object(a.createElement)(r.a,null,Object(g.f)(h,"with-left-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Base: Icon on the right"),Object(a.createElement)(r.a,null,Object(g.f)(h,"with-right-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)(r.a,null,Object(g.f)(h,"light-with-left-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)(r.a,null,Object(g.f)(h,"light-with-right-icon")))),y({},"When using inverse themed badges, add the ",f({},"slds-badge__icon_inverse")," class to ",f({},"slds-badge__icon")," to inverse the icon."),Object(a.createElement)(o.a,null,Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Icon on the left"),Object(a.createElement)(r.a,null,Object(g.f)(h,"inverse-with-left-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Icon on the right"),Object(a.createElement)(r.a,null,Object(g.f)(h,"inverse-with-right-icon")))),p({id:"Badges-with-Nested-Elements"},"Badges with Nested Elements"),y({},"Along with icons, you can have nested textual elements, such as ",f({},"strong"),", ",f({},"em"),", and ",f({},"span")," elements, within a badge. Only ",f({},"inline")," and ",f({},"inline-block")," elements are supported at this time."),Object(a.createElement)(c.a,{title:"Badge with nested element"},Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)(u.a,null,"Component In: ",Object(a.createElement)("em",null,"Lightning")))),p({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(d.a,{name:"badges",type:"component"}))},x=function(){return Object(i.a)(S())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/badges/docs.mdx.js"]=function(e){function t(t){for(var a,c,r=t[0],s=t[1],o=t[2],u=0,b=[];u<r.length;u++)c=r[u],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&b.push(l[c][0]),l[c]=0;for(a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,o\|\|[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],a=!0,r=1;r<n.length;r++){var s=n[r];0!==l[s]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=n[0]))}return e}var a={},l={7:0},i=[];function c(t){if(a[t])return a[t].exports;var n=a[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,c),n.l=!0,n.exports}c.m=e,c.c=a,c.d=function(e,t,n){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},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 n=Object.create(null);if(c.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(n,a,function(t){return e[t]}.bind(null,a));return n},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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=r.push.bind(r);r.push=t,r=r.slice();for(var o=0;o<r.length;o++)t(r[o]);var d=s;return i.push([772,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},772:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return S})),n.d(t,"getContents",(function(){return x}));var a=n(0),l=n.n(a),i=n(4),c=n(15),r=n(2),s=n(28),o=n(46),d=(n(11),n(40)),u=n(47),b=l.a.createElement(u.a,null,"Badge Label"),h=[{id:"inverse",label:"Inverse",element:l.a.createElement(u.c,null,"Inverse badge")},{id:"with-left-icon",label:"With left icon",element:l.a.createElement(u.a,null,l.a.createElement(u.b,{symbol:"moneybag"}),"423 Credits Available")},{id:"with-right-icon",label:"With right icon",element:l.a.createElement(u.a,null,"423 Credits Available",l.a.createElement(u.b,{symbol:"moneybag",align:"right"}))},{id:"light-with-left-icon",label:"Light with left icon",element:l.a.createElement(u.d,null,l.a.createElement(u.b,{symbol:"moneybag"}),"423 Credits Available")},{id:"light-with-right-icon",label:"Light with right icon",element:l.a.createElement(u.d,null,"423 Credits Available",l.a.createElement(u.b,{symbol:"moneybag",align:"right"}))},{id:"inverse-with-left-icon",label:"Inverse with left icon",element:l.a.createElement(u.c,null,l.a.createElement(u.b,{symbol:"moneybag",isInverse:!0}),"423 Credits Available")},{id:"inverse-with-right-icon",label:"Inverse with right icon",element:l.a.createElement(u.c,null,"423 Credits Available",l.a.createElement(u.b,{symbol:"moneybag",align:"right",isInverse:!0}))},{id:"badge-with-child",label:"With Child Element",element:l.a.createElement(u.a,null,"Component In: ",l.a.createElement("em",null,"Lightning"))}],g=(u.a,u.a,u.a,n(1)),m=i.c.a,f=i.c.code,p=i.c.h2,O=i.c.h3,y=i.c.p,E=i.c.table,j=i.c.tbody,v=i.c.td,w=i.c.th,_=i.c.thead,B=i.c.tr,S=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"Badges are labels which hold small amounts of information."),Object(a.createElement)(r.a,{exampleOnly:!0},Object(g.f)(b)),p({id:"About-Badges"},"About Badges"),y({},"Badges are composed of text inside a ",f({},"span")," element and may include inline/inline-block elements and/or icons."),O({id:"Colors"},"Colors"),y({},"There are six different color badges you can use."),E({},_({},B({},w({},"Badge"),w({},"class"),w({},"description"))),j({},B({},v({},Object(a.createElement)(u.a,{key:"1"},"Default Badge")),v({},f({},".slds-badge")),v({},"This is the default badge. You probably want to use this one unless you fall into a specific use-case.")),B({},v({},Object(a.createElement)(u.c,{key:"2"},"Darker Badge")),v({},f({},".slds-badge_inverse")),v({},"This badge is used when you need higher contrast than our default badge.")),B({},v({},Object(a.createElement)(u.d,{key:"3"},"Lightest Badge")),v({},f({},".slds-badge_lightest")),v({},"This badge is used when you need higher contrast, such as on colored backgrounds.")),B({},v({},Object(a.createElement)(u.a,{key:"4",isSuccess:!0},"Success Badge")),v({},f({},".slds-badge .slds-theme_success")),v({},"This is a badge used to communicate success.")),B({},v({},Object(a.createElement)(u.a,{key:"5",isWarning:!0},"Warning Badge")),v({},f({},".slds-badge .slds-theme_warning")),v({},"This is a badge used to communicate a warning.")),B({},v({},Object(a.createElement)(u.a,{key:"6",isError:!0},"Error Badge")),v({},f({},".slds-badge .slds-theme_error")),v({},"This is a badge used to communicate an error.")))),p({id:"Base"},"Base"),Object(a.createElement)(r.a,{toggleCode:!1},Object(g.f)(b)),p({id:"Badges-with-Icons"},"Badges with Icons"),y({},"You can include an icon in your badge. For maximum visual clarity, ",m({href:"/icons/#utility"},"Utility icons")," are the suggested icon type inside badges. You may also choose to put an icon in a badge without text, but in that case, be sure to include assistive text."),y({},"The icon can be aligned to the left or right side of the text. To use an icon, wrap the icon with ",f({},'<span class="slds-badge__icon">'),". Add the classes ",f({},"slds-badge__icon_left")," or ",f({},"slds-badge__icon_right")," to the wrapper for spacing the icon in relation to the text label."),Object(a.createElement)(o.a,null,Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Base: Icon on the left"),Object(a.createElement)(r.a,null,Object(g.f)(h,"with-left-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Base: Icon on the right"),Object(a.createElement)(r.a,null,Object(g.f)(h,"with-right-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)(r.a,null,Object(g.f)(h,"light-with-left-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)(r.a,null,Object(g.f)(h,"light-with-right-icon")))),y({},"When using inverse themed badges, add the ",f({},"slds-badge__icon_inverse")," class to ",f({},"slds-badge__icon")," to inverse the icon."),Object(a.createElement)(o.a,null,Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Icon on the left"),Object(a.createElement)(r.a,null,Object(g.f)(h,"inverse-with-left-icon"))),Object(a.createElement)(s.a,null,Object(a.createElement)("strong",null,"Icon on the right"),Object(a.createElement)(r.a,null,Object(g.f)(h,"inverse-with-right-icon")))),p({id:"Badges-with-Nested-Elements"},"Badges with Nested Elements"),y({},"Along with icons, you can have nested textual elements, such as ",f({},"strong"),", ",f({},"em"),", and ",f({},"span")," elements, within a badge. Only ",f({},"inline")," and ",f({},"inline-block")," elements are supported at this time."),Object(a.createElement)(c.a,{title:"Badge with nested element"},Object(a.createElement)(r.a,{toggleCode:!1},Object(a.createElement)(u.a,null,"Component In: ",Object(a.createElement)("em",null,"Lightning")))),p({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(d.a,{name:"badges",type:"component"}))},x=function(){return Object(i.a)(S())}}});