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

@salesforce-ux/design-system 2.17.2 → 2.17.3

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

Files changed (963) hide show

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/breadcrumbs/docs.mdx.js"]=function(e){function t(t){for(var n,l,c=t[0],i=t[1],s=t[2],d=0,m=[];d<c.length;d++)l=c[d],Object.prototype.hasOwnProperty.call(a,l)&&a[l]&&m.push(a[l][0]),a[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,s\|\|[]),r()}function r(){for(var e,t=0;t<o.length;t++){for(var r=o[t],n=!0,c=1;c<r.length;c++){var i=r[c];0!==a[i]&&(n=!1)}n&&(o.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},a={9:0},o=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var u=i;return o.push([~~711~~,0]),r()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~711~~:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return w})),r.d(t,"getContents",(function(){return _}));var n=r(0),a=r.n(n),o=r(4),l=r(2),c=r(1),i=(r(14),r(37)),s=r(~~121~~),u=r(7),d=r(9),m=s.a.Crumb,b=a.a.createElement(u.b,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"threedots",assistiveText:"Show More","aria-haspopup":"true",title:"Show More"}),p=function(e){return a.a.createElement(d.l,{isOpen:!0,triggerIcon:b},a.a.createElement(d.f,{className:"slds-dropdown_left slds-dropdown_actions"},a.a.createElement(d.h,null,a.a.createElement(d.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(d.g,null,"Menu Item Two"),a.a.createElement(d.g,null,"Menu Item Three"))))},f=function(e){var t=e.kineticsEnabled;return a.a.createElement(s.a,{kxScopeBreadcrumbsItem:t,kxTypeUnderline:t},a.a.createElement(m,null,"Parent Entity"),a.a.createElement(m,null,"Parent Record Name"))},h=function(e){var t=e.kineticsEnabled;return a.a.createElement(s.a,{kxScopeBreadcrumbsItem:t,kxTypeUnderline:t,listClassNames:"slds-grid_vertical-align-center"},a.a.createElement(m,{hasMenu:!0},a.a.createElement(p,null)),a.a.createElement(m,null,"Parent Entity"),a.a.createElement(m,null,"Parent Record Name"))},v=a.a.createElement(f,null),y=[{id:"breadcrumbs-overflow",label:"With Overflow Menu",demoStyles:"height: 200px;",storybookStyles:!0,element:a.a.createElement(h,null)}],g=o.c.code,O=o.c.h2,E=o.c.h3,S=o.c.p,w=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Use breadcrumbs to note the path of a record and help the user to navigate back to the parent."),Object(n.createElement)(l.a,{exampleOnly:!0},Object(c.f)(v)),O({id:"About-Breadcrumbs"},"About Breadcrumbs"),S({},"Breadcrumbs are typically constructed with an ",g({},"ol")," because their order matters. You mark up breadcrumbs with classes from the horizontal list utility. When you add the ",g({},"slds-breadcrumb")," class, the separators are automatically generated."),E({id:"Accessibility"},"Accessibility"),S({},"Place the breadcrumb in a ",g({},"nav")," element with ",g({},'role="navigation"'),". The ",g({},"nav")," element is also marked-up with ",g({},'aria-label="Breadcrumbs"')," to describe the type of navigation."),O({id:"Base"},"Base"),Object(n.createElement)(l.a,null,Object(c.f)(v)),O({id:"Variations"},"Variations"),E({id:"With-Overflow"},"With Overflow"),S({},"The overflow menu breadcrumbs variant is a composition of the overflow menu with actions example of the menus component and breadcrumbs component. To implement this, include the overflow menu as the first ",g({},"<li>")," in the breadcrumb component. In order to vertically align all of the breadcrumb items to the center, add the ",g({},"slds-grid_vertical-align-center")," class to the ",g({},"<ol>"),"."),Object(n.createElement)(l.a,{demoStyles:"height: 150px;"},Object(c.f)(y,"breadcrumbs-overflow")),O({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(i.a,{name:"breadcrumbs",type:"component"}))},_=function(){return Object(o.a)(w())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/breadcrumbs/docs.mdx.js"]=function(e){function t(t){for(var n,l,c=t[0],i=t[1],s=t[2],d=0,m=[];d<c.length;d++)l=c[d],Object.prototype.hasOwnProperty.call(a,l)&&a[l]&&m.push(a[l][0]),a[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,s\|\|[]),r()}function r(){for(var e,t=0;t<o.length;t++){for(var r=o[t],n=!0,c=1;c<r.length;c++){var i=r[c];0!==a[i]&&(n=!1)}n&&(o.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},a={9:0},o=[];function l(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=e,l.c=n,l.d=function(e,t,r){l.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:r})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(l.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(r,n,function(t){return e[t]}.bind(null,n));return r},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var u=i;return o.push([712,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},712:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return w})),r.d(t,"getContents",(function(){return _}));var n=r(0),a=r.n(n),o=r(4),l=r(2),c=r(1),i=(r(14),r(38)),s=r(122),u=r(7),d=r(9),m=s.a.Crumb,b=a.a.createElement(u.b,{className:"slds-button_icon-border-filled slds-button_icon-x-small",symbol:"threedots",assistiveText:"Show More","aria-haspopup":"true",title:"Show More"}),p=function(e){return a.a.createElement(d.l,{isOpen:!0,triggerIcon:b},a.a.createElement(d.f,{className:"slds-dropdown_left slds-dropdown_actions"},a.a.createElement(d.h,null,a.a.createElement(d.g,{tabIndex:"0"},"Menu Item One"),a.a.createElement(d.g,null,"Menu Item Two"),a.a.createElement(d.g,null,"Menu Item Three"))))},f=function(e){var t=e.kineticsEnabled;return a.a.createElement(s.a,{kxScopeBreadcrumbsItem:t,kxTypeUnderline:t},a.a.createElement(m,null,"Parent Entity"),a.a.createElement(m,null,"Parent Record Name"))},h=function(e){var t=e.kineticsEnabled;return a.a.createElement(s.a,{kxScopeBreadcrumbsItem:t,kxTypeUnderline:t,listClassNames:"slds-grid_vertical-align-center"},a.a.createElement(m,{hasMenu:!0},a.a.createElement(p,null)),a.a.createElement(m,null,"Parent Entity"),a.a.createElement(m,null,"Parent Record Name"))},v=a.a.createElement(f,null),y=[{id:"breadcrumbs-overflow",label:"With Overflow Menu",demoStyles:"height: 200px;",storybookStyles:!0,element:a.a.createElement(h,null)}],g=o.c.code,O=o.c.h2,E=o.c.h3,S=o.c.p,w=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Use breadcrumbs to note the path of a record and help the user to navigate back to the parent."),Object(n.createElement)(l.a,{exampleOnly:!0},Object(c.f)(v)),O({id:"About-Breadcrumbs"},"About Breadcrumbs"),S({},"Breadcrumbs are typically constructed with an ",g({},"ol")," because their order matters. You mark up breadcrumbs with classes from the horizontal list utility. When you add the ",g({},"slds-breadcrumb")," class, the separators are automatically generated."),E({id:"Accessibility"},"Accessibility"),S({},"Place the breadcrumb in a ",g({},"nav")," element with ",g({},'role="navigation"'),". The ",g({},"nav")," element is also marked-up with ",g({},'aria-label="Breadcrumbs"')," to describe the type of navigation."),O({id:"Base"},"Base"),Object(n.createElement)(l.a,null,Object(c.f)(v)),O({id:"Variations"},"Variations"),E({id:"With-Overflow"},"With Overflow"),S({},"The overflow menu breadcrumbs variant is a composition of the overflow menu with actions example of the menus component and breadcrumbs component. To implement this, include the overflow menu as the first ",g({},"<li>")," in the breadcrumb component. In order to vertically align all of the breadcrumb items to the center, add the ",g({},"slds-grid_vertical-align-center")," class to the ",g({},"<ol>"),"."),Object(n.createElement)(l.a,{demoStyles:"height: 150px;"},Object(c.f)(y,"breadcrumbs-overflow")),O({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(i.a,{name:"breadcrumbs",type:"component"}))},_=function(){return Object(o.a)(w())}}});

package/__internal/chunked/docs/ui/components/builder-header/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=function(e){function t(t){for(var n,s,l=t[0],i=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(r,s)&&r[s]&&m.push(r[s][0]),r[s]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,c\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,l=1;l<a.length;l++){var i=a[l];0!==r[i]&&(n=!1)}n&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},r={10:0},o=[];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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return o.push([664,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},664:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return fe})),a.d(t,"getContents",(function(){return ye}));var n=a(0),r=a.n(n),o=a(4),s=a(2),l=a(14),i=a(1),c=a(3),u=a.n(c),d=a(26),m=a.n(d),p=a(10),b=a(7),h=a(19),f=a.n(h),y=a(59),v=a(72),E=a(89);function g(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function w(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var n,r,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(n=a.next()).done)&&(o.push(n.value),!t\|\|o.length!==t);s=!0);}catch(e){l=!0,r=e}finally{try{s\|\|null==a.return\|\|a.return()}finally{if(l)throw r}}return o}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return O(e,t)}(e,t)\|\|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 O(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var S=function(){return r.a.createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",r.a.createElement(E.a,{title:"Learn More"},"Learn more."))},j=function(e){var t=e.activeError,a=e.assistiveText,o=e.children,s=e.isWarning,l=e.isError,i=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,b=Object(n.useRef)(),h=Object(n.useRef)(),E=_(Object(n.useState)(),2),O=E[0],j=E[1],T=_(Object(n.useState)(!1),2),x=T[0],N=T[1],D=_(Object(n.useState)(!1),2),k=D[0],C=D[1],W=function(){b.current.focus(),N(!0)},P=function(){b.current.focus(),N(!1),C(!1),i(c)};Object(n.useEffect)((function(){function e(e){var t=A.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}));var A=new Map([[27,function(){x&&P()}],[9,function(e){if(x){C(!0);var t=h.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),a=t[0],n=t[t.length-1];if(!e.shiftKey&&document.activeElement!==a)return a.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==n&&(n.focus(),e.preventDefault())}}]]);Object(n.useEffect)((function(){var e=b.current,t=function(){j({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}}),[]),Object(n.useEffect)((function(){t&&W()}),[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?g(Object(a),!0).forEach((function(t){w(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):g(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({position:"absolute"},O),I=m()("example-unique-id-");return r.a.createElement(r.a.Fragment,null,n.Children.only(o)&&r.a.cloneElement(o,{size:u,feedback:p,symbol:p,assistiveText:a,title:d,onClick:function(){x?P():W()},onBlur:function(){k\|\|(N(!1),i(c))},innerRef:b}),x&&f.a.createPortal(r.a.createElement(y.a,{isWarning:s,isError:l,headingId:I,style:B,onClose:P,header:r.a.createElement(v.b,{headingId:I,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:h,nubbinPosition:"top right"},r.a.createElement(S,null)),document.body))},T=Object(i.c)(!1,(function(e,t,a){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")})),x=Object(i.c)(!0,(function(e,t,a){var n=["Button","ButtonIcon"];r.a.Children.forEach(e[t],(function(e){if(!n.includes(e.type.name))throw new Error("".concat(a," child should be one of the type: ").concat(n.join(", ")))}))}));j.propTypes={activeError:T,assistiveText:u.a.string,children:x,isWarning:u.a.bool,isError:u.a.bool,parentCallback:u.a.func,parentCallbackData:u.a.node,size:u.a.string,type:u.a.string};var N=j,D=a(11),k=a(54),C=a(9);function W(e){return(W="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function P(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function A(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function B(e,t,a){return t&&A(e.prototype,t),a&&A(e,a),e}function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&M(e,t)}function M(e,t){return(M=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function R(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=V(e);if(t){var r=V(this).constructor;a=Reflect.construct(n,arguments,r)}else a=n.apply(this,arguments);return L(this,a)}}function L(e,t){return!t\|\|"object"!==W(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function V(e){return(V=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}function H(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var n,r,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(n=a.next()).done)&&(o.push(n.value),!t\|\|o.length!==t);s=!0);}catch(e){l=!0,r=e}finally{try{s\|\|null==a.return\|\|a.return()}finally{if(l)throw r}}return o}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return z(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return z(e,t)}(e,t)\|\|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 z(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var U=function(){return r.a.createElement("div",{className:"slds-builder-header__item"},r.a.createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},r.a.createElement("div",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),r.a.createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return r.a.createElement(C.f,{className:"slds-dropdown_right slds-dropdown_actions"},r.a.createElement(C.h,{ariaLabel:"Show More"},r.a.createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),r.a.createElement(C.g,null,"Menu Item One"),r.a.createElement(C.g,null,"Menu Item Two"),r.a.createElement(C.g,null,"Menu Item Three")))},q=function(e){return r.a.createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},r.a.createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&r.a.createElement(F,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},F=function(e){var t=e.openDropDown,a=e.symbol;return r.a.createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},r.a.createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},r.a.createElement("span",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:a,assistiveText:!1,title:!1})),r.a.createElement("span",{className:"slds-media__body"},r.a.createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),r.a.createElement(D.a,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&r.a.createElement(J,null))};F.propTypes={openDropDown:u.a.bool,symbol:u.a.string},F.defaultProps={openDropDown:!1};var K=function(e){var t=e.label;return r.a.createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},r.a.createElement("h1",{className:"slds-builder-header__item-label"},r.a.createElement("span",{className:"slds-truncate",title:t},t)))};K.propTypes={label:u.a.string},K.defaultProps={label:"Page Type"};var $=function(e){var t=e.hasBackTooltip,a=H(Object(n.useState)(t),2),o=a[0],s=a[1],l=H(Object(n.useState)(!1),2),i=l[0],c=l[1],u=H(Object(n.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return r.a.createElement("div",{className:"slds-builder-header__item"},r.a.createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d\|\|s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i\|\|s(null)},"aria-describedby":o&&b,title:"Back"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),o&&r.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};$.propTypes={hasBackTooltip:u.a.bool};var Y=function(e){return r.a.createElement("div",{className:"slds-builder-header__utilities-item"},r.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},r.a.createElement("div",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),r.a.createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return r.a.createElement("div",{className:"slds-builder-header__utilities-item"},r.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},r.a.createElement("span",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),r.a.createElement("span",{className:"slds-media__body"},r.a.createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u.a.string};var Q=function(e){return r.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),r.a.createElement("div",{className:"slds-button-group"},r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},X=function(e){return r.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},r.a.createElement("div",{className:"slds-button-group"},r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},Z=function(e){var t=e.hasStatusTooltip,a=H(Object(n.useState)(t),2),o=a[0],s=a[1],l=H(Object(n.useState)(!1),2),i=l[0],c=l[1],u=H(Object(n.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return r.a.createElement(r.a.Fragment,null,o&&r.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),r.a.createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":o&&b,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d\|\|s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i\|\|s(null)}},"Inactive - Modified 1 day ago"))};Z.propTypes={hasStatusTooltip:u.a.bool};var ee=function(e){var t=e.hasStatus,a=e.hasStatusTooltip,o=e.hasWarning,s=e.hasError,l=[];o&&l.push("warning"),s&&l.push("error");var i=H(Object(n.useState)(!1),2),c=i[0],u=i[1],d=function(){s&&u(!0)},m=function(e){u(e)};return r.a.createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&r.a.createElement(Z,{hasStatusTooltip:a}),Array.isArray(l)&&l.length>0&&l.map((function(e,t){var a="warning"===e,n="error"===e;return r.a.createElement(N,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:a,isError:n,activeError:c&&n,parentCallback:m,parentCallbackData:!1},r.a.createElement(b.b,null))})),r.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},r.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),r.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),r.a.createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};ee.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var te=function(e){I(a,e);var t=R(a);function a(){return P(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,a=e.hasStatusTooltip,n=e.hasWarning,o=e.hasError;return r.a.createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},r.a.createElement(Q,null),r.a.createElement(X,null),r.a.createElement(ee,{hasStatus:t,hasStatusTooltip:a,hasWarning:n,hasError:o}))}}]),a}(n.Component);te.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var ae=function(e){I(a,e);var t=R(a);function a(){return P(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,a=e.docName,n=e.showDropDown,o=e.openDropDown,s=e.hasBackTooltip,l=e.hasStatus,i=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return r.a.createElement("div",{className:"slds-builder-header_container"},r.a.createElement("header",{className:"slds-builder-header"},r.a.createElement($,{hasBackTooltip:s}),r.a.createElement(U,null),r.a.createElement(q,{showDropDown:n,openDropDown:o}),r.a.createElement(K,{label:a}),r.a.createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},r.a.createElement(G,{symbol:"settings"}),r.a.createElement(Y,null))),t&&r.a.createElement(te,{hasStatus:l,hasStatusTooltip:i,hasWarning:c,hasError:u}))}}]),a}(n.Component);ae.propTypes={showToolbar:u.a.bool,docName:u.a.string,showDropDown:u.a.bool,openDropDown:u.a.bool,hasBackTooltip:u.a.bool,hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool},ae.defaultProps={showDropDown:!0};var ne=ae,re="height: 220px; position: relative;",oe=r.a.createElement(ne,{showDropDown:!0}),se=[{id:"menu-open",label:"Menu open",isOpen:!0,element:r.a.createElement(ne,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:r.a.createElement(ne,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:r.a.createElement(ne,{hasBackTooltip:!0})}],le=r.a.createElement(ne,{showToolbar:!0}),ie=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:r.a.createElement(ne,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:r.a.createElement(ne,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:r.a.createElement(ne,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:r.a.createElement(ne,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:r.a.createElement(ne,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:r.a.createElement(ne,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],ce=o.c.a,ue=o.c.h2,de=o.c.h3,me=o.c.h4,pe=o.c.li,be=o.c.p,he=o.c.ul,fe=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),Object(n.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:re},Object(i.f)(le)),ue({id:"About-Builder-Header"},"About Builder Header"),be({},"To learn more about the Builder pattern in general, check out our ",ce({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",ce({href:"/guidelines/builder/header/"},"Builder Header"),"."),ue({id:"Base"},"Base"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(oe)),ue({id:"With-open-dropdown-menu"},"With open dropdown menu"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(se,"menu-open")),ue({id:"With-tooltip"},"With tooltip"),be({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),Object(n.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The back action's ",Object(n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(n.createElement)("code",null,"ID"),".")),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(se,"has-tooltip")),ue({id:"Variations"},"Variations"),de({id:"With-a-Truncated-Name"},"With a Truncated Name"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(se,"with-truncation")),de({id:"With-a-Toolbar"},"With a Toolbar"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(le)),de({id:"With-Status-text"},"With Status text"),be({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),be({},"A status text can include:"),he({},pe({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),pe({},"Action, plus Last Modified Time, represented with ",ce({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),be({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),Object(n.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The status text's ",Object(n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(n.createElement)("code",null,"ID"),".")),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text")),de({id:"With-Alert"},"With Alert"),be({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),Object(n.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",Object(n.createElement)("strong",null,"close button")," or"," ",Object(n.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),me({id:"Warning"},"Warning"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text-with-warning")),me({id:"Error"},"Error"),be({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text-with-error")),me({id:"Warning-and-Error"},"Warning and Error"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text-with-warning-and-error")))},ye=function(){return Object(o.a)(fe())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/builder-header/docs.mdx.js"]=function(e){function t(t){for(var n,s,l=t[0],i=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(r,s)&&r[s]&&m.push(r[s][0]),r[s]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(u&&u(t);m.length;)m.shift()();return o.push.apply(o,c\|\|[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],n=!0,l=1;l<a.length;l++){var i=a[l];0!==r[i]&&(n=!1)}n&&(o.splice(t--,1),e=s(s.s=a[0]))}return e}var n={},r={10:0},o=[];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 l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=i;return o.push([665,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},665:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return fe})),a.d(t,"getContents",(function(){return ye}));var n=a(0),r=a.n(n),o=a(4),s=a(2),l=a(14),i=a(1),c=a(3),u=a.n(c),d=a(27),m=a.n(d),p=a(10),b=a(7),h=a(20),f=a.n(h),y=a(60),v=a(73),E=a(90);function g(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function w(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function _(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var n,r,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(n=a.next()).done)&&(o.push(n.value),!t\|\|o.length!==t);s=!0);}catch(e){l=!0,r=e}finally{try{s\|\|null==a.return\|\|a.return()}finally{if(l)throw r}}return o}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return O(e,t)}(e,t)\|\|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 O(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var S=function(){return r.a.createElement("p",null,"The flow has 1 error that must be fixed before you can save."," ",r.a.createElement(E.a,{title:"Learn More"},"Learn more."))},j=function(e){var t=e.activeError,a=e.assistiveText,o=e.children,s=e.isWarning,l=e.isError,i=e.parentCallback,c=e.parentCallbackData,u=e.size,d=e.title,p=e.type,b=Object(n.useRef)(),h=Object(n.useRef)(),E=_(Object(n.useState)(),2),O=E[0],j=E[1],T=_(Object(n.useState)(!1),2),x=T[0],N=T[1],D=_(Object(n.useState)(!1),2),k=D[0],C=D[1],W=function(){b.current.focus(),N(!0)},P=function(){b.current.focus(),N(!1),C(!1),i(c)};Object(n.useEffect)((function(){function e(e){var t=A.get(e.keyCode);return t&&t(e)}return document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}));var A=new Map([[27,function(){x&&P()}],[9,function(e){if(x){C(!0);var t=h.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),a=t[0],n=t[t.length-1];if(!e.shiftKey&&document.activeElement!==a)return a.focus(),e.preventDefault();e.shiftKey&&document.activeElement!==n&&(n.focus(),e.preventDefault())}}]]);Object(n.useEffect)((function(){var e=b.current,t=function(){j({right:"".concat(document.body.clientWidth-e.getBoundingClientRect().x-1.5*e.offsetWidth+6,"px"),top:"".concat(e.getBoundingClientRect().y+e.offsetHeight+window.scrollY+15,"px")})};return t(),window.addEventListener("resize",t),function(){return document.removeEventListener("resize",t)}}),[]),Object(n.useEffect)((function(){t&&W()}),[t]);var B=function(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?g(Object(a),!0).forEach((function(t){w(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):g(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}({position:"absolute"},O),I=m()("example-unique-id-");return r.a.createElement(r.a.Fragment,null,n.Children.only(o)&&r.a.cloneElement(o,{size:u,feedback:p,symbol:p,assistiveText:a,title:d,onClick:function(){x?P():W()},onBlur:function(){k\|\|(N(!1),i(c))},innerRef:b}),x&&f.a.createPortal(r.a.createElement(y.a,{isWarning:s,isError:l,headingId:I,style:B,onClose:P,header:r.a.createElement(v.b,{headingId:I,title:"Review ".concat(p),symbol:p}),closeButton:!0,iconDefault:"warning"===p,inverse:"error"===p,innerRef:h,nubbinPosition:"top right"},r.a.createElement(S,null)),document.body))},T=Object(i.c)(!1,(function(e,t,a){if(!e.isError&&e[t])return new Error("activeError must be used with an error popover")})),x=Object(i.c)(!0,(function(e,t,a){var n=["Button","ButtonIcon"];r.a.Children.forEach(e[t],(function(e){if(!n.includes(e.type.name))throw new Error("".concat(a," child should be one of the type: ").concat(n.join(", ")))}))}));j.propTypes={activeError:T,assistiveText:u.a.string,children:x,isWarning:u.a.bool,isError:u.a.bool,parentCallback:u.a.func,parentCallbackData:u.a.node,size:u.a.string,type:u.a.string};var N=j,D=a(11),k=a(55),C=a(9);function W(e){return(W="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function P(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function A(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function B(e,t,a){return t&&A(e.prototype,t),a&&A(e,a),e}function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&M(e,t)}function M(e,t){return(M=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function R(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var a,n=V(e);if(t){var r=V(this).constructor;a=Reflect.construct(n,arguments,r)}else a=n.apply(this,arguments);return L(this,a)}}function L(e,t){return!t\|\|"object"!==W(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function V(e){return(V=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}function H(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==a)return;var n,r,o=[],s=!0,l=!1;try{for(a=a.call(e);!(s=(n=a.next()).done)&&(o.push(n.value),!t\|\|o.length!==t);s=!0);}catch(e){l=!0,r=e}finally{try{s\|\|null==a.return\|\|a.return()}finally{if(l)throw r}}return o}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return z(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a\|\|"Set"===a)return Array.from(e);if("Arguments"===a\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(a))return z(e,t)}(e,t)\|\|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 z(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a<t;a++)n[a]=e[a];return n}var U=function(){return r.a.createElement("div",{className:"slds-builder-header__item"},r.a.createElement("div",{className:"slds-builder-header__item-label slds-media slds-media_center"},r.a.createElement("div",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"builder",assistiveText:!1,title:!1})),r.a.createElement("div",{className:"slds-media__body"},"App Name")))},J=function(){return r.a.createElement(C.f,{className:"slds-dropdown_right slds-dropdown_actions"},r.a.createElement(C.h,{ariaLabel:"Show More"},r.a.createElement("li",{className:"slds-dropdown__header slds-truncate",role:"presentation",tabIndex:"0"},"Menu Header"),r.a.createElement(C.g,null,"Menu Item One"),r.a.createElement(C.g,null,"Menu Item Two"),r.a.createElement(C.g,null,"Menu Item Three")))},q=function(e){return r.a.createElement("nav",{className:"slds-builder-header__item slds-builder-header__nav"},r.a.createElement("ul",{className:"slds-builder-header__nav-list"},e.showDropDown&&r.a.createElement(F,{symbol:"page",showDropDown:e.showDropDown,openDropDown:e.openDropDown})))},F=function(e){var t=e.openDropDown,a=e.symbol;return r.a.createElement("li",{className:"slds-builder-header__nav-item slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open"},r.a.createElement("button",{className:"slds-button slds-builder-header__item-action slds-media slds-media_center","aria-haspopup":"true","aria-expanded":t,title:"Click to open menu"},r.a.createElement("span",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:a,assistiveText:!1,title:!1})),r.a.createElement("span",{className:"slds-media__body"},r.a.createElement("span",{className:"slds-truncate",title:"Dropdown"},"Dropdown"),r.a.createElement(D.a,{containerClassName:"slds-current-color slds-m-left_small",className:"slds-icon_x-small",symbol:"chevrondown",assistiveText:!1,title:!1}))),t&&r.a.createElement(J,null))};F.propTypes={openDropDown:u.a.bool,symbol:u.a.string},F.defaultProps={openDropDown:!1};var K=function(e){var t=e.label;return r.a.createElement("div",{className:"slds-builder-header__item slds-has-flexi-truncate"},r.a.createElement("h1",{className:"slds-builder-header__item-label"},r.a.createElement("span",{className:"slds-truncate",title:t},t)))};K.propTypes={label:u.a.string},K.defaultProps={label:"Page Type"};var $=function(e){var t=e.hasBackTooltip,a=H(Object(n.useState)(t),2),o=a[0],s=a[1],l=H(Object(n.useState)(!1),2),i=l[0],c=l[1],u=H(Object(n.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return r.a.createElement("div",{className:"slds-builder-header__item"},r.a.createElement("a",{href:"#",className:"slds-builder-header__item-action",onClick:function(e){return e.preventDefault()},onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d\|\|s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i\|\|s(null)},"aria-describedby":o&&b,title:"Back"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"back",assistiveText:"Back",title:!1})),o&&r.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Back"))};$.propTypes={hasBackTooltip:u.a.bool};var Y=function(e){return r.a.createElement("div",{className:"slds-builder-header__utilities-item"},r.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},r.a.createElement("div",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:"help",assistiveText:!1,title:!1})),r.a.createElement("div",{className:"slds-media__body"},"Help")))},G=function(e){var t=e.symbol;return r.a.createElement("div",{className:"slds-builder-header__utilities-item"},r.a.createElement("a",{href:"#",className:"slds-builder-header__item-action slds-media slds-media_center",onClick:function(e){return e.preventDefault()}},r.a.createElement("span",{className:"slds-media__figure"},r.a.createElement(D.a,{containerClassName:"slds-current-color",className:"slds-icon_x-small",symbol:t,assistiveText:!1,title:!1})),r.a.createElement("span",{className:"slds-media__body"},r.a.createElement("span",{className:"slds-truncate",title:"Link"},"Settings"))))};G.propTypes={symbol:u.a.string};var Q=function(e){return r.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Canvas Actions"},r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"settings",assistiveText:"Canvas Settings",title:"Canvas Settings"}),r.a.createElement("div",{className:"slds-button-group"},r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"undo",assistiveText:"Undo",title:"Undo",tabIndex:"0"}),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"redo",assistiveText:"Redo",title:"Redo",tabIndex:"-1"})))},X=function(e){return r.a.createElement("div",{className:"slds-builder-toolbar__item-group","aria-label":"Edit actions"},r.a.createElement("div",{className:"slds-button-group"},r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"cut",assistiveText:"Cut",title:"Cut",tabIndex:"-1"}),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"copy",assistiveText:"Copy",title:"Copy",tabIndex:"-1"}),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"paste",assistiveText:"Paste",title:"Paste",tabIndex:"-1"})),r.a.createElement(b.b,{className:"slds-button_icon-border",symbol:"toggle_panel_left",assistiveText:"Toggle Panel",title:"Toggle Panel"}))},Z=function(e){var t=e.hasStatusTooltip,a=H(Object(n.useState)(t),2),o=a[0],s=a[1],l=H(Object(n.useState)(!1),2),i=l[0],c=l[1],u=H(Object(n.useState)(!1),2),d=u[0],p=u[1],b=m()("example-unique-id-");return r.a.createElement(r.a.Fragment,null,o&&r.a.createElement(k.a,{nubbinPosition:"top left",id:b,style:{position:"absolute",top:"100%",marginTop:"15px"}},"Version saved by Johnny Appleseed Today 9:00 AM"),r.a.createElement("button",{className:"slds-button slds-p-horizontal_small","aria-describedby":o&&b,"aria-live":"polite",onFocus:function(){c(!0),s(!0)},onBlur:function(){c(!1),d\|\|s(null)},onMouseEnter:function(){p(!0),s(!0)},onMouseLeave:function(){p(!1),i\|\|s(null)}},"Inactive - Modified 1 day ago"))};Z.propTypes={hasStatusTooltip:u.a.bool};var ee=function(e){var t=e.hasStatus,a=e.hasStatusTooltip,o=e.hasWarning,s=e.hasError,l=[];o&&l.push("warning"),s&&l.push("error");var i=H(Object(n.useState)(!1),2),c=i[0],u=i[1],d=function(){s&&u(!0)},m=function(e){u(e)};return r.a.createElement("div",{className:"slds-builder-toolbar__actions","aria-label":"Document actions"},t&&r.a.createElement(Z,{hasStatusTooltip:a}),Array.isArray(l)&&l.length>0&&l.map((function(e,t){var a="warning"===e,n="error"===e;return r.a.createElement(N,{size:"medium",type:e,assistiveText:e,title:e,key:e+t,isWarning:a,isError:n,activeError:c&&n,parentCallback:m,parentCallbackData:!1},r.a.createElement(b.b,null))})),r.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},r.a.createElement(p.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"right"})," ","Run"),r.a.createElement("button",{className:"slds-button slds-button_neutral",disabled:c,onClick:d},"Save As"),r.a.createElement("button",{className:"slds-button slds-button_brand",disabled:c,onClick:d},"Save"))};ee.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var te=function(e){I(a,e);var t=R(a);function a(){return P(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.hasStatus,a=e.hasStatusTooltip,n=e.hasWarning,o=e.hasError;return r.a.createElement("div",{className:"slds-builder-toolbar",role:"toolbar"},r.a.createElement(Q,null),r.a.createElement(X,null),r.a.createElement(ee,{hasStatus:t,hasStatusTooltip:a,hasWarning:n,hasError:o}))}}]),a}(n.Component);te.propTypes={hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool};var ae=function(e){I(a,e);var t=R(a);function a(){return P(this,a),t.apply(this,arguments)}return B(a,[{key:"render",value:function(){var e=this.props,t=e.showToolbar,a=e.docName,n=e.showDropDown,o=e.openDropDown,s=e.hasBackTooltip,l=e.hasStatus,i=e.hasStatusTooltip,c=e.hasWarning,u=e.hasError;return r.a.createElement("div",{className:"slds-builder-header_container"},r.a.createElement("header",{className:"slds-builder-header"},r.a.createElement($,{hasBackTooltip:s}),r.a.createElement(U,null),r.a.createElement(q,{showDropDown:n,openDropDown:o}),r.a.createElement(K,{label:a}),r.a.createElement("div",{className:"slds-builder-header__item slds-builder-header__utilities"},r.a.createElement(G,{symbol:"settings"}),r.a.createElement(Y,null))),t&&r.a.createElement(te,{hasStatus:l,hasStatusTooltip:i,hasWarning:c,hasError:u}))}}]),a}(n.Component);ae.propTypes={showToolbar:u.a.bool,docName:u.a.string,showDropDown:u.a.bool,openDropDown:u.a.bool,hasBackTooltip:u.a.bool,hasStatus:u.a.bool,hasStatusTooltip:u.a.bool,hasWarning:u.a.bool,hasError:u.a.bool},ae.defaultProps={showDropDown:!0};var ne=ae,re="height: 220px; position: relative;",oe=r.a.createElement(ne,{showDropDown:!0}),se=[{id:"menu-open",label:"Menu open",isOpen:!0,element:r.a.createElement(ne,{showDropDown:!0,openDropDown:!0})},{id:"with-truncation",label:"With Truncation",element:r.a.createElement(ne,{docName:"Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely"})},{id:"has-tooltip",label:'Has "Back" Tooltip',element:r.a.createElement(ne,{hasBackTooltip:!0})}],le=r.a.createElement(ne,{showToolbar:!0}),ie=[{id:"menu-open-with-toolbar",label:"Menu open with toolbar",isOpen:!0,element:r.a.createElement(ne,{openDropDown:!0,showToolbar:!0})},{id:"has-status-text",label:"Has Status Text",element:r.a.createElement(ne,{hasStatus:!0,showToolbar:!0})},{id:"has-status-text-with-tooltip",label:"Has Status Text with Tooltip",element:r.a.createElement(ne,{hasStatus:!0,hasStatusTooltip:!0,showToolbar:!0})},{id:"has-status-text-with-warning",label:"Has Status Text with Warning",element:r.a.createElement(ne,{hasStatus:!0,hasWarning:!0,showToolbar:!0})},{id:"has-status-text-with-error",label:"Has Status Text with error",element:r.a.createElement(ne,{hasStatus:!0,hasError:!0,showToolbar:!0})},{id:"has-status-text-with-warning-and-error",label:"Has Status Text with warning and error",element:r.a.createElement(ne,{hasStatus:!0,hasWarning:!0,hasError:!0,showToolbar:!0})}],ce=o.c.a,ue=o.c.h2,de=o.c.h3,me=o.c.h4,pe=o.c.li,be=o.c.p,he=o.c.ul,fe=function(){return Object(n.createElement)(o.b,{},Object(n.createElement)("div",{className:"doc lead"},"Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name."),Object(n.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:re},Object(i.f)(le)),ue({id:"About-Builder-Header"},"About Builder Header"),be({},"To learn more about the Builder pattern in general, check out our ",ce({href:"/guidelines/builder/overview/"},"guidelines"),", which includes a section about how to use the ",ce({href:"/guidelines/builder/header/"},"Builder Header"),"."),ue({id:"Base"},"Base"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(oe)),ue({id:"With-open-dropdown-menu"},"With open dropdown menu"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(se,"menu-open")),ue({id:"With-tooltip"},"With tooltip"),be({},'Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."'),Object(n.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The back action's ",Object(n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(n.createElement)("code",null,"ID"),".")),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(se,"has-tooltip")),ue({id:"Variations"},"Variations"),de({id:"With-a-Truncated-Name"},"With a Truncated Name"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(se,"with-truncation")),de({id:"With-a-Toolbar"},"With a Toolbar"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(le)),de({id:"With-Status-text"},"With Status text"),be({},"Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors."),be({},"A status text can include:"),he({},pe({},'A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")'),pe({},"Action, plus Last Modified Time, represented with ",ce({href:"https://developer.salesforce.com/docs/component-library/bundle/lightning:relativeDateTime/example"},"relativeDateTime"),'. (e.g. "Saved 1 day ago")')),be({},"When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM)."),Object(n.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"The status text's ",Object(n.createElement)("code",null,"aria-describedby")," attribute must share the same value as the tooltip's ",Object(n.createElement)("code",null,"ID"),".")),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text")),de({id:"With-Alert"},"With Alert"),be({},"If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover."),Object(n.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the ",Object(n.createElement)("strong",null,"close button")," or"," ",Object(n.createElement)("strong",null,"escape")," key. After the popover is closed, focus is returned to the original triggering element.")),me({id:"Warning"},"Warning"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text-with-warning")),me({id:"Error"},"Error"),be({},"When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled."),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text-with-error")),me({id:"Warning-and-Error"},"Warning and Error"),Object(n.createElement)(s.a,{isViewport:!0,demoStyles:re},Object(i.f)(ie,"has-status-text-with-warning-and-error")))},ye=function(){return Object(o.a)(fe())}}});

package/__internal/chunked/docs/ui/components/button-groups/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-groups/docs.mdx.js"]=function(e){function t(t){for(var r,o,c=t[0],s=t[1],u=t[2],d=0,b=[];d<c.length;d++)o=c[d],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&b.push(l[o][0]),l[o]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(i&&i(t);b.length;)b.shift()();return a.push.apply(a,u\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],r=!0,c=1;c<n.length;c++){var s=n[c];0!==l[s]&&(r=!1)}r&&(a.splice(t--,1),e=o(o.s=n[0]))}return e}var r={},l={11:0},a=[];function o(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=r,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var u=0;u<c.length;u++)t(c[u]);var i=s;return a.push([~~709~~,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},~~709~~:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return S})),n.d(t,"getContents",(function(){return _}));var r=n(0),l=n.n(r),a=n(4),o=n(2),c=(n(25),n(14),n(1)),s=n(55),u=n(39),i=n(3),d=n.n(i),b=n(12),p=n(7),f=function(e){return l.a.createElement("ul",{className:"slds-button-group-row"},e.children)};f.propTypes={children:d.a.node};var m=function(e){return l.a.createElement("li",{className:"slds-button-group-item"},e.children)};m.propTypes={children:d.a.node};var h=l.a.createElement(f,null,l.a.createElement(m,null,l.a.createElement(b.a,{isNeutral:!0},"Refresh")),l.a.createElement(m,null,l.a.createElement(b.a,{isNeutral:!0},"Edit")),l.a.createElement(m,null,l.a.createElement(b.a,{isBrand:!0},"Save"))),O=[{id:"buttons-icons",label:"Row of button icons",element:l.a.createElement(f,null,l.a.createElement(m,null,l.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_clicked"},l.a.createElement(p.b,{hasDropdown:!0,theme:"neutral",assistiveText:"More options",title:"More Options"}))),l.a.createElement(m,null,l.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_clicked"},l.a.createElement(p.b,{hasDropdown:!0,theme:"neutral",symbol:"table",assistiveText:"More options",title:"More Options"}))),l.a.createElement(m,null,l.a.createElement(p.b,{symbol:"edit",theme:"neutral"})),l.a.createElement(m,null,l.a.createElement(p.b,{symbol:"refresh",theme:"neutral"})),l.a.createElement(m,null,l.a.createElement(s.a,null,l.a.createElement(p.b,{symbol:"chart",theme:"neutral"}),l.a.createElement(p.b,{symbol:"filter",theme:"neutral"}))))}],v=a.c.a,j=a.c.code,E=a.c.h2,g=a.c.h3,w=a.c.h4,y=a.c.p,S=function(){return Object(r.createElement)(a.b,{},Object(r.createElement)("div",{className:"doc lead"},"Button groups are used to bunch together buttons with similar actions"),Object(r.createElement)(o.a,{exampleOnly:!0},Object(c.f)(s.d,"with-overflow-open")),E({id:"About-Button-Groups"},"About Button Groups"),y({},"Buttons in a group are surrounded by a parent with the ",j({},".slds-button-group")," class, unless they are in a list (in which case they use ",j({},".slds-button-group-list"),". If the last button is an icon, like the down triangle, use the ",j({},".slds-button_icon-border-filled")," class when accompanying a ",j({},".slds-button_neutral")," group."),y({},"If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the ",j({},".slds-button_last")," class to the wrapper element to create proper spacing and borders."),g({id:"Accessibility"},"Accessibility"),y({},"Unless you are using the list version, include the Aria role ",j({},'role="group"')," so that assistive technologies are alerted to the grouping."),E({id:"Base"},"Base"),Object(r.createElement)(o.a,null,Object(c.f)(s.b)),g({id:"States"},"States"),w({id:"Disabled"},"Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"disabled")),w({id:"With-Overflow-Menu"},"With Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"with-overflow")),w({id:"With-Overflow-Menu---Open"},"With Overflow Menu – Open"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"with-overflow-open")),w({id:"With-Overflow-Menu---Disabled"},"With Overflow Menu – Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"with-overflow-disabled")),g({id:"Examples"},"Examples"),w({id:"Inverse"},"Inverse"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse")),w({id:"Inverse-Disabled"},"Inverse - Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse-disabled")),w({id:"Inverse-With-Overflow-Menu"},"Inverse - With Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse-overflow")),w({id:"Inverse-With-Disabled-Overflow-Menu"},"Inverse - With Disabled Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse-overflow-disabled")),g({id:"Button-Icon-Group"},"Button Icon Group"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"button-group-icon")),w({id:"Disabled-2"},"Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"button-group-icon-disabled")),w({id:"Selected"},"Selected"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"button-group-icon-selected")),g({id:"Brand-Button"},"Brand Button"),w({id:"With-Overflow-Menu-2"},"With Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"brand-with-overflow")),g({id:"With-Style-Encapsulation"},"With Style Encapsulation"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-group")),w({id:"FirstLast"},"First/Last"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-group-2-button")),w({id:"Button-Icon-Group-2"},"Button Icon Group"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-icon-group")),w({id:"Button-Icon-Group---FirstLast"},"Button Icon Group – First/Last"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-icon-group-2-button")),E({id:"List"},"List"),Object(r.createElement)(o.a,null,Object(c.f)(u.c)),g({id:"Examples-2"},"Examples"),y({},"See the ",v({href:"#Examples"},"Base examples")," for various use cases such as ",v({href:"#Inverse"},"inverse"),"."),E({id:"Row"},"Row"),Object(r.createElement)(o.a,null,Object(c.f)(h)),g({id:"Of-Button-Icons"},"Of Button Icons"),Object(r.createElement)(o.a,null,Object(c.f)(O,"buttons-icons")))},_=function(){return Object(a.a)(S())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-groups/docs.mdx.js"]=function(e){function t(t){for(var r,o,c=t[0],s=t[1],u=t[2],d=0,b=[];d<c.length;d++)o=c[d],Object.prototype.hasOwnProperty.call(l,o)&&l[o]&&b.push(l[o][0]),l[o]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(i&&i(t);b.length;)b.shift()();return a.push.apply(a,u\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],r=!0,c=1;c<n.length;c++){var s=n[c];0!==l[s]&&(r=!1)}r&&(a.splice(t--,1),e=o(o.s=n[0]))}return e}var r={},l={11:0},a=[];function o(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=r,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=c.push.bind(c);c.push=t,c=c.slice();for(var u=0;u<c.length;u++)t(c[u]);var i=s;return a.push([710,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},710:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return S})),n.d(t,"getContents",(function(){return _}));var r=n(0),l=n.n(r),a=n(4),o=n(2),c=(n(26),n(14),n(1)),s=n(56),u=n(40),i=n(3),d=n.n(i),b=n(12),p=n(7),f=function(e){return l.a.createElement("ul",{className:"slds-button-group-row"},e.children)};f.propTypes={children:d.a.node};var m=function(e){return l.a.createElement("li",{className:"slds-button-group-item"},e.children)};m.propTypes={children:d.a.node};var h=l.a.createElement(f,null,l.a.createElement(m,null,l.a.createElement(b.a,{isNeutral:!0},"Refresh")),l.a.createElement(m,null,l.a.createElement(b.a,{isNeutral:!0},"Edit")),l.a.createElement(m,null,l.a.createElement(b.a,{isBrand:!0},"Save"))),O=[{id:"buttons-icons",label:"Row of button icons",element:l.a.createElement(f,null,l.a.createElement(m,null,l.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_clicked"},l.a.createElement(p.b,{hasDropdown:!0,theme:"neutral",assistiveText:"More options",title:"More Options"}))),l.a.createElement(m,null,l.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_clicked"},l.a.createElement(p.b,{hasDropdown:!0,theme:"neutral",symbol:"table",assistiveText:"More options",title:"More Options"}))),l.a.createElement(m,null,l.a.createElement(p.b,{symbol:"edit",theme:"neutral"})),l.a.createElement(m,null,l.a.createElement(p.b,{symbol:"refresh",theme:"neutral"})),l.a.createElement(m,null,l.a.createElement(s.a,null,l.a.createElement(p.b,{symbol:"chart",theme:"neutral"}),l.a.createElement(p.b,{symbol:"filter",theme:"neutral"}))))}],v=a.c.a,j=a.c.code,E=a.c.h2,g=a.c.h3,w=a.c.h4,y=a.c.p,S=function(){return Object(r.createElement)(a.b,{},Object(r.createElement)("div",{className:"doc lead"},"Button groups are used to bunch together buttons with similar actions"),Object(r.createElement)(o.a,{exampleOnly:!0},Object(c.f)(s.d,"with-overflow-open")),E({id:"About-Button-Groups"},"About Button Groups"),y({},"Buttons in a group are surrounded by a parent with the ",j({},".slds-button-group")," class, unless they are in a list (in which case they use ",j({},".slds-button-group-list"),". If the last button is an icon, like the down triangle, use the ",j({},".slds-button_icon-border-filled")," class when accompanying a ",j({},".slds-button_neutral")," group."),y({},"If the last button in a group needs to be wrapped in another element (for example, a drop-down trigger), add the ",j({},".slds-button_last")," class to the wrapper element to create proper spacing and borders."),g({id:"Accessibility"},"Accessibility"),y({},"Unless you are using the list version, include the Aria role ",j({},'role="group"')," so that assistive technologies are alerted to the grouping."),E({id:"Base"},"Base"),Object(r.createElement)(o.a,null,Object(c.f)(s.b)),g({id:"States"},"States"),w({id:"Disabled"},"Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"disabled")),w({id:"With-Overflow-Menu"},"With Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"with-overflow")),w({id:"With-Overflow-Menu---Open"},"With Overflow Menu – Open"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"with-overflow-open")),w({id:"With-Overflow-Menu---Disabled"},"With Overflow Menu – Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.d,"with-overflow-disabled")),g({id:"Examples"},"Examples"),w({id:"Inverse"},"Inverse"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse")),w({id:"Inverse-Disabled"},"Inverse - Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse-disabled")),w({id:"Inverse-With-Overflow-Menu"},"Inverse - With Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse-overflow")),w({id:"Inverse-With-Disabled-Overflow-Menu"},"Inverse - With Disabled Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"inverse-overflow-disabled")),g({id:"Button-Icon-Group"},"Button Icon Group"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"button-group-icon")),w({id:"Disabled-2"},"Disabled"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"button-group-icon-disabled")),w({id:"Selected"},"Selected"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"button-group-icon-selected")),g({id:"Brand-Button"},"Brand Button"),w({id:"With-Overflow-Menu-2"},"With Overflow Menu"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"brand-with-overflow")),g({id:"With-Style-Encapsulation"},"With Style Encapsulation"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-group")),w({id:"FirstLast"},"First/Last"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-group-2-button")),w({id:"Button-Icon-Group-2"},"Button Icon Group"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-icon-group")),w({id:"Button-Icon-Group---FirstLast"},"Button Icon Group – First/Last"),Object(r.createElement)(o.a,null,Object(c.f)(s.c,"style-encapsulated-button-icon-group-2-button")),E({id:"List"},"List"),Object(r.createElement)(o.a,null,Object(c.f)(u.c)),g({id:"Examples-2"},"Examples"),y({},"See the ",v({href:"#Examples"},"Base examples")," for various use cases such as ",v({href:"#Inverse"},"inverse"),"."),E({id:"Row"},"Row"),Object(r.createElement)(o.a,null,Object(c.f)(h)),g({id:"Of-Button-Icons"},"Of Button Icons"),Object(r.createElement)(o.a,null,Object(c.f)(O,"buttons-icons")))},_=function(){return Object(a.a)(S())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-icons/docs.mdx.js"]=function(e){function t(t){for(var l,o,r=t[0],i=t[1],c=t[2],b=0,m=[];b<r.length;b++)o=r[b],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(d&&d(t);m.length;)m.shift()();return s.push.apply(s,c\|\|[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],l=!0,r=1;r<n.length;r++){var i=n[r];0!==a[i]&&(l=!1)}l&&(s.splice(t--,1),e=o(o.s=n[0]))}return e}var l={},a={12:0},s=[];function o(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=l,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(n,l,function(t){return e[t]}.bind(null,l));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=i;return s.push([655,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},655:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return V})),n.d(t,"getContents",(function(){return Y}));var l=n(0),a=n.n(l),s=n(4),o=n(2),r=n(25),i=n(14),c=n(15),d=n(27),b=n(41),m=n(7),u=n(12),h=n(10),O=[{id:"default",label:"Base – default",element:a.a.createElement(m.b,{assistiveText:"Settings",title:"Settings"})}],p=[{id:"error",label:"Base - Error",element:a.a.createElement(m.b,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"warning",label:"Base - Warning",element:a.a.createElement(m.b,{feedback:"warning",symbol:"warning",title:"Warning",assistiveText:"Warning"})},{id:"bare-disabled",label:"Base - Disabled",element:a.a.createElement(m.b,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],j=[{id:"hint-hover",label:"Base - Hint on hover",element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))},{id:"button-icon-lbc-mismatch",label:"Button Icon - LBC Mismatch",element:a.a.createElement(u.a,{className:"slds-button_icon slds-button_icon-border"},a.a.createElement(h.a,{sprite:"utility",symbol:"clock",className:"slds-button__icon slds-icon-text-error"}))}],E="background-color: #f4f6f9; padding: 0.5rem;",f=[{id:"default",label:"Bordered Filled – default",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"})}],v=[{id:"disabled",label:"Bordered Filled - Disabled",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],g=[{id:"with-dropdown",label:"Bordered Filled - With dropdown",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Filled - Hint on hover",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}],y="background-color: #16325C; padding: 0.5rem;",S=[{id:"default",label:"Bordered Inverse – default",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],_=[{id:"disabled",label:"Bordered Inverse – Disabled",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],x=[{id:"with-dropdown",label:"Bordered Inverse – With dropdown",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Inverse – Hint on hover",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}],w=[{id:"default",label:"Bordered Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"})}],T=[{id:"disabled",label:"Bordered Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],M=[{id:"hint-hover",label:"Bordered Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}],k=[{id:"default",label:"Brand – default",element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"})}],B=[{id:"disabled",label:"Brand – Disabled",element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}],C=[{id:"default",label:"Inverse – default",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"})}],N=[{id:"disabled",label:"Inverse - Disabled",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],I=[{id:"with-dropdown",label:"Inverse - With dropdown",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Inverse - Hint on hover",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}],D=n(122),z=[{id:"default",label:"Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"})}],W=[{id:"disabled",label:"Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],F=[{id:"with-dropdown",label:"Transparent - With dropdown",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}],H=n(1),A=n(35),L=s.c.a,P=s.c.code,J=s.c.h2,q=s.c.h3,R=s.c.h4,U=s.c.p,V=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(a.a.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"}))),J({id:"About-Button-Icons"},"About Button Icons"),U({},"Button icons are button elements that represent their behavior with an ",L({href:"/components/icons"},"icon")," instead of text. The button itself should have the classes ",P({},"slds-button")," and ",P({},"slds-button_icon"),", while the svg icon has ",P({},"slds-button__icon")," on it."),U({},"Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail."),q({id:"Accessibility"},"Accessibility"),U({},"If an icon button doesn’t include a label, use a ",P({},"title")," attribute to show on hover for sighted users, and a span with class ",P({},"slds-assistive-text")," to describe the button's action for screen readers."),U({},"When using assistive text, the icon element itself should have ",P({},"aria-hidden")," set to ",P({},"true"),"."),q({id:"Mobile"},"Mobile"),Object(l.createElement)(A.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for button icons"},Object(l.createElement)(a.a.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More Options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More Options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More Options",title:"More Options"}))),J({id:"Base"},"Base"),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(O)),J({id:"Variations"},"Variations"),q({id:"Brand"},"Brand"),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(k)),q({id:"Inverse"},"Inverse"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(C)},Object(H.f)(C)),q({id:"Icon-Containers"},"Icon Containers"),U({},"Icon containers remove button styling from the button, leaving a bare icon."),U({},"For a bare icon with transparent container, add ",P({},"slds-button_icon-container")," to the ",P({},"<button>"),". To add a border, use the ",P({},"slds-button_icon-border")," class instead."),U({},"For a neutral themed button icon, with border and a filled background, use the ",P({},"slds-button_icon-border-filled")," class to the ",P({},"slds-button")," class."),U({},"Use the inverse button on dark backgrounds by adding the ",P({},"slds-button_inverse")," class to the ",P({},"slds-button")," class."),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bare - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(z)},Object(H.f)(z))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered - filled container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(f)},Object(H.f)(f))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(w)},Object(H.f)(w))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(S)},Object(H.f)(S)))),q({id:"Stateful"},"Stateful"),U({},"The stateful button requires the ",P({},"slds-button_icon-border")," class in addition to the ",P({},"slds-button")," class.\nThe stateful inverse button works just like the stateful button. It requires the ",P({},"slds-button_icon-border-inverse")," class in addition to the ",P({},"slds-button")," class."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(D.b)),Object(l.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"For accessibility, implement the ",Object(l.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept."),Object(l.createElement)("ul",{className:"slds-list_dotted"},Object(l.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),Object(l.createElement)("li",null,"Button text doesn't change per state"),Object(l.createElement)("li",null,Object(l.createElement)("code",null,"aria-pressed")," is set to ",Object(l.createElement)("code",null,"true")," or ",Object(l.createElement)("code",null,"false"),", depending on its state"))),R({id:"Selected"},"Selected"),U({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",P({},"slds-is-selected")," class to the button when activated."),Object(l.createElement)(o.a,null,Object(H.f)(D.c,"button-icon-stateful-selected")),R({id:"Disabled"},"Disabled"),U({},"You can disable a stateful button icon by applying the ",P({},"disabled")," attribute to the ",P({},".slds-button_icon"),". This will apply our disabled UI to the button icon, and freeze the button icon either in its selected or unselected state."),Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(H.f)(D.c,"button-icon-stateful-disabled"),Object(H.f)(D.c,"button-icon-stateful-selected-disabled"))),J({id:"Sizes"},"Sizes"),q({id:"Bare-Icon"},"Bare Icon"),U({},"The bare variant can be displayed in three other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),"—by adding a sizing class on the ",P({},"<svg>")," icon itself."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",null,Object(l.createElement)("svg",{className:"... slds-button__icon_{size}"},"..."),"...")),Object(l.createElement)(c.a,{title:"Sizes"},Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),q({id:"Icon-Container"},"Icon Container"),U({},"Contained variants can be displayed in three smaller sizes—",P({},"small"),", ",P({},"x-small"),", ",P({},"xx-small"),"—by adding a sizing class on the ",P({},"<button>"),"."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"... slds-button_icon-{size}"},"...")),Object(l.createElement)(c.a,{title:"Sizes"},Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),J({id:"States"},"States"),q({id:"Disabled-2"},"Disabled"),U({},"Use a disabled attribute when a button can’t be clicked."),U({},"To create a disabled button, append the ",P({},"disabled")," attribute to the ",P({},"<button>"),"."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Base"),Object(l.createElement)(o.a,null,Object(H.f)(p,"bare-disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Brand"),Object(l.createElement)(o.a,null,Object(H.f)(B,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(W,"disabled")},Object(H.f)(W,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(N,"disabled")},Object(H.f)(N,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(v,"disabled")},Object(H.f)(v,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered transparent"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(T,"disabled")},Object(H.f)(T,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(_,"disabled")},Object(H.f)(_,"disabled")))),q({id:"Error"},"Error"),U({},"Error button icons are typically used in conjunction with an ",L({href:"../popovers/#Error"},"error popover"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"error")),q({id:"Warning"},"Warning"),U({},"Warning button icons are typically used in conjunction with a ",L({href:"../popovers/#Warning"},"warning popover"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"warning")),J({id:"Examples"},"Examples"),q({id:"Hint-on-hover"},"Hint on hover"),U({},"A parent class, ",P({},"slds-hint-parent"),", must be put on any wrapper, and ",P({},"slds-button__icon_hint")," must be added to the button's ",P({},"<svg>")," so that the child reacts when the parent is hovered."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)(m.a,null,Object(l.createElement)("button",{className:"slds-button slds-button_icon"},Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Base"),Object(l.createElement)(o.a,null,Object(H.f)(j,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(F,"hint-hover")},Object(H.f)(F,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(g,"hint-hover")},Object(H.f)(g,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered transparent"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(M,"hint-hover")},Object(H.f)(M,"hint-hover")))),R({id:"Inverse-2"},"Inverse"),U({},"In the case of inverse, use the ",P({},"slds-button__icon_inverse-hint")," class on the button's ",P({},"<svg>")," instead."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)(m.a,null,Object(l.createElement)("button",{className:"slds-button slds-button_icon"},Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(I,"hint-hover")},Object(H.f)(I,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(x,"hint-hover")},Object(H.f)(x,"hint-hover")))),q({id:"With-a-Dropdown"},"With a Dropdown"),U({},"If the button opens a menu, add ",P({},"slds-button_icon-more")," class to the ",P({},"<button>")," and a ",P({},"down")," icon within the button to indicate the behavior."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},Object(l.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(F,"with-dropdown")},Object(H.f)(F,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(I,"with-dropdown")},Object(H.f)(I,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(g,"with-dropdown")},Object(H.f)(g,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(x,"with-dropdown")},Object(H.f)(x,"with-dropdown")))))},Y=function(){return Object(s.a)(V())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/button-icons/docs.mdx.js"]=function(e){function t(t){for(var l,o,r=t[0],i=t[1],c=t[2],b=0,m=[];b<r.length;b++)o=r[b],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&m.push(a[o][0]),a[o]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(d&&d(t);m.length;)m.shift()();return s.push.apply(s,c\|\|[]),n()}function n(){for(var e,t=0;t<s.length;t++){for(var n=s[t],l=!0,r=1;r<n.length;r++){var i=n[r];0!==a[i]&&(l=!1)}l&&(s.splice(t--,1),e=o(o.s=n[0]))}return e}var l={},a={12:0},s=[];function o(t){if(l[t])return l[t].exports;var n=l[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=l,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(n,l,function(t){return e[t]}.bind(null,l));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=i;return s.push([656,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},656:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return V})),n.d(t,"getContents",(function(){return Y}));var l=n(0),a=n.n(l),s=n(4),o=n(2),r=n(26),i=n(14),c=n(15),d=n(28),b=n(42),m=n(7),u=n(12),h=n(10),O=[{id:"default",label:"Base – default",element:a.a.createElement(m.b,{assistiveText:"Settings",title:"Settings"})}],p=[{id:"error",label:"Base - Error",element:a.a.createElement(m.b,{feedback:"error",symbol:"error",title:"Error",assistiveText:"Error"})},{id:"warning",label:"Base - Warning",element:a.a.createElement(m.b,{feedback:"warning",symbol:"warning",title:"Warning",assistiveText:"Warning"})},{id:"bare-disabled",label:"Base - Disabled",element:a.a.createElement(m.b,{assistiveText:"Settings",disabled:!0,title:"Settings"})}],j=[{id:"hint-hover",label:"Base - Hint on hover",element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"Settings",iconClassName:"slds-button__icon_hint",title:"Settings"}))},{id:"button-icon-lbc-mismatch",label:"Button Icon - LBC Mismatch",element:a.a.createElement(u.a,{className:"slds-button_icon slds-button_icon-border"},a.a.createElement(h.a,{sprite:"utility",symbol:"clock",className:"slds-button__icon slds-icon-text-error"}))}],E="background-color: #f4f6f9; padding: 0.5rem;",f=[{id:"default",label:"Bordered Filled – default",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",symbol:"search",theme:"neutral",title:"Search"})}],v=[{id:"disabled",label:"Bordered Filled - Disabled",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",disabled:!0,symbol:"search",theme:"neutral",title:"Search"})}],g=[{id:"with-dropdown",label:"Bordered Filled - With dropdown",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Filled - Hint on hover",demoStyles:E,storybookStyles:!0,element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_hint",theme:"neutral",title:"More Options"}))}],y="background-color: #16325C; padding: 0.5rem;",S=[{id:"default",label:"Bordered Inverse – default",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],_=[{id:"disabled",label:"Bordered Inverse – Disabled",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",disabled:!0,size:"medium",symbol:"search",theme:"inverse",title:"Search"})}],x=[{id:"with-dropdown",label:"Bordered Inverse – With dropdown",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",hasDropdown:!0,theme:"neutral",title:"More Options"})},{id:"hint-hover",label:"Bordered Inverse – Hint on hover",demoStyles:y,storybookStyles:!0,element:a.a.createElement(m.a,null,a.a.createElement(m.b,{assistiveText:"More options",iconClassName:"slds-button__icon_inverse-hint",size:"medium",theme:"inverse",title:"More Options"}))}],w=[{id:"default",label:"Bordered Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search"})}],T=[{id:"disabled",label:"Bordered Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"transparent",symbol:"search",disabled:!0})}],M=[{id:"hint-hover",label:"Bordered Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{theme:"transparent",iconClassName:"slds-button__icon_hint",assistiveText:"More options",title:"More Options"}))}],k=[{id:"default",label:"Brand – default",element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search"})}],B=[{id:"disabled",label:"Brand – Disabled",element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"brand",symbol:"search",disabled:!0})}],C=[{id:"default",label:"Inverse – default",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search"})}],N=[{id:"disabled",label:"Inverse - Disabled",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",theme:"inverse",symbol:"search",disabled:!0})}],I=[{id:"with-dropdown",label:"Inverse - With dropdown",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{hasDropdown:!0,theme:"transparent",className:"slds-button_icon-inverse",assistiveText:"More options",title:"More Options"})},{id:"hint-hover",label:"Inverse - Hint on hover",demoStyles:"background-color: #16325C; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{theme:"inverse",iconClassName:"slds-button__icon_inverse-hint",assistiveText:"More options",title:"More Options"}))}],D=n(123),z=[{id:"default",label:"Transparent - default",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search"})}],W=[{id:"disabled",label:"Transparent - Disabled",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"Search",title:"Search",size:"medium",symbol:"search",disabled:!0})}],F=[{id:"with-dropdown",label:"Transparent - With dropdown",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement(m.b,{assistiveText:"More options",title:"More Options",hasDropdown:!0,theme:"transparent"})},{id:"hint-hover",label:"Transparent - Hint on hover",demoStyles:"background-color: #f4f6f9; padding: 0.5rem;",storybookStyles:!0,element:a.a.createElement("div",{className:"slds-hint-parent"},a.a.createElement(m.b,{assistiveText:"More options",title:"More Options",size:"medium",iconClassName:"slds-button__icon_hint"}))}],H=n(1),A=n(36),L=s.c.a,P=s.c.code,J=s.c.h2,q=s.c.h3,R=s.c.h4,U=s.c.p,V=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"lead doc"},"Button icons provide the user with visual iconography that is typically used to invoke an event or action."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(a.a.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"}))),J({id:"About-Button-Icons"},"About Button Icons"),U({},"Button icons are button elements that represent their behavior with an ",L({href:"/components/icons"},"icon")," instead of text. The button itself should have the classes ",P({},"slds-button")," and ",P({},"slds-button_icon"),", while the svg icon has ",P({},"slds-button__icon")," on it."),U({},"Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail."),q({id:"Accessibility"},"Accessibility"),U({},"If an icon button doesn’t include a label, use a ",P({},"title")," attribute to show on hover for sighted users, and a span with class ",P({},"slds-assistive-text")," to describe the button's action for screen readers."),U({},"When using assistive text, the icon element itself should have ",P({},"aria-hidden")," set to ",P({},"true"),"."),q({id:"Mobile"},"Mobile"),Object(l.createElement)(A.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for button icons"},Object(l.createElement)(a.a.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More Options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More Options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More Options",title:"More Options"}))),J({id:"Base"},"Base"),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(O)),J({id:"Variations"},"Variations"),q({id:"Brand"},"Brand"),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(k)),q({id:"Inverse"},"Inverse"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(C)},Object(H.f)(C)),q({id:"Icon-Containers"},"Icon Containers"),U({},"Icon containers remove button styling from the button, leaving a bare icon."),U({},"For a bare icon with transparent container, add ",P({},"slds-button_icon-container")," to the ",P({},"<button>"),". To add a border, use the ",P({},"slds-button_icon-border")," class instead."),U({},"For a neutral themed button icon, with border and a filled background, use the ",P({},"slds-button_icon-border-filled")," class to the ",P({},"slds-button")," class."),U({},"Use the inverse button on dark backgrounds by adding the ",P({},"slds-button_inverse")," class to the ",P({},"slds-button")," class."),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bare - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(z)},Object(H.f)(z))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered - filled container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(f)},Object(H.f)(f))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(w)},Object(H.f)(w))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse - transparent container"),Object(l.createElement)(o.a,{toggleCode:!1,demoStyles:Object(H.e)(S)},Object(H.f)(S)))),q({id:"Stateful"},"Stateful"),U({},"The stateful button requires the ",P({},"slds-button_icon-border")," class in addition to the ",P({},"slds-button")," class.\nThe stateful inverse button works just like the stateful button. It requires the ",P({},"slds-button_icon-border-inverse")," class in addition to the ",P({},"slds-button")," class."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(D.b)),Object(l.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(l.createElement)("p",null,"For accessibility, implement the ",Object(l.createElement)("a",{href:"http://w3c.github.io/aria-practices/#button"},"ARIA Toggle Button")," concept."),Object(l.createElement)("ul",{className:"slds-list_dotted"},Object(l.createElement)("li",null,"Similar to a mute button, the button represents a pressed or unpressed state."),Object(l.createElement)("li",null,"Button text doesn't change per state"),Object(l.createElement)("li",null,Object(l.createElement)("code",null,"aria-pressed")," is set to ",Object(l.createElement)("code",null,"true")," or ",Object(l.createElement)("code",null,"false"),", depending on its state"))),R({id:"Selected"},"Selected"),U({},"Stateful icons can be toggled on and off and will retain their state. JavaScript is used to add the ",P({},"slds-is-selected")," class to the button when activated."),Object(l.createElement)(o.a,null,Object(H.f)(D.c,"button-icon-stateful-selected")),R({id:"Disabled"},"Disabled"),U({},"You can disable a stateful button icon by applying the ",P({},"disabled")," attribute to the ",P({},".slds-button_icon"),". This will apply our disabled UI to the button icon, and freeze the button icon either in its selected or unselected state."),Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(H.f)(D.c,"button-icon-stateful-disabled"),Object(H.f)(D.c,"button-icon-stateful-selected-disabled"))),J({id:"Sizes"},"Sizes"),q({id:"Bare-Icon"},"Bare Icon"),U({},"The bare variant can be displayed in three other sizes—",P({},"large"),", ",P({},"small"),", ",P({},"x-small"),"—by adding a sizing class on the ",P({},"<svg>")," icon itself."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",null,Object(l.createElement)("svg",{className:"... slds-button__icon_{size}"},"..."),"...")),Object(l.createElement)(c.a,{title:"Sizes"},Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_large",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_x-small",assistiveText:"More options",title:"More Options"})))),q({id:"Icon-Container"},"Icon Container"),U({},"Contained variants can be displayed in three smaller sizes—",P({},"small"),", ",P({},"x-small"),", ",P({},"xx-small"),"—by adding a sizing class on the ",P({},"<button>"),"."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"... slds-button_icon-{size}"},"...")),Object(l.createElement)(c.a,{title:"Sizes"},Object(l.createElement)(o.a,null,Object(l.createElement)(l.Fragment,null,Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-x-small",assistiveText:"More options",title:"More Options"}),Object(l.createElement)(m.b,{className:"slds-button_icon-border slds-button_icon-xx-small",assistiveText:"More options",title:"More Options"})))),J({id:"States"},"States"),q({id:"Disabled-2"},"Disabled"),U({},"Use a disabled attribute when a button can’t be clicked."),U({},"To create a disabled button, append the ",P({},"disabled")," attribute to the ",P({},"<button>"),"."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"slds-button slds-button_icon ...",disabled:!0},"...")),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Base"),Object(l.createElement)(o.a,null,Object(H.f)(p,"bare-disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Brand"),Object(l.createElement)(o.a,null,Object(H.f)(B,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(W,"disabled")},Object(H.f)(W,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(N,"disabled")},Object(H.f)(N,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(v,"disabled")},Object(H.f)(v,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered transparent"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(T,"disabled")},Object(H.f)(T,"disabled"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(_,"disabled")},Object(H.f)(_,"disabled")))),q({id:"Error"},"Error"),U({},"Error button icons are typically used in conjunction with an ",L({href:"../popovers/#Error"},"error popover"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"error")),q({id:"Warning"},"Warning"),U({},"Warning button icons are typically used in conjunction with a ",L({href:"../popovers/#Warning"},"warning popover"),"."),Object(l.createElement)(o.a,{toggleCode:!1},Object(H.f)(p,"warning")),J({id:"Examples"},"Examples"),q({id:"Hint-on-hover"},"Hint on hover"),U({},"A parent class, ",P({},"slds-hint-parent"),", must be put on any wrapper, and ",P({},"slds-button__icon_hint")," must be added to the button's ",P({},"<svg>")," so that the child reacts when the parent is hovered."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)(m.a,null,Object(l.createElement)("button",{className:"slds-button slds-button_icon"},Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_hint"},"..."),"..."))),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Base"),Object(l.createElement)(o.a,null,Object(H.f)(j,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(F,"hint-hover")},Object(H.f)(F,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(g,"hint-hover")},Object(H.f)(g,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered transparent"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(M,"hint-hover")},Object(H.f)(M,"hint-hover")))),R({id:"Inverse-2"},"Inverse"),U({},"In the case of inverse, use the ",P({},"slds-button__icon_inverse-hint")," class on the button's ",P({},"<svg>")," instead."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)(m.a,null,Object(l.createElement)("button",{className:"slds-button slds-button_icon"},Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_inverse-hint"},"..."),"..."))),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(I,"hint-hover")},Object(H.f)(I,"hint-hover"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(x,"hint-hover")},Object(H.f)(x,"hint-hover")))),q({id:"With-a-Dropdown"},"With a Dropdown"),U({},"If the button opens a menu, add ",P({},"slds-button_icon-more")," class to the ",P({},"<button>")," and a ",P({},"down")," icon within the button to indicate the behavior."),Object(l.createElement)(r.a,{toggleCode:!1},Object(l.createElement)("button",{className:"slds-button slds-button_icon slds-button_icon-container-more"},"...",Object(l.createElement)("svg",{className:"slds-button__icon slds-button__icon_x-small"},Object(l.createElement)("use",{xlinkHref:"/assets/icons/utility-sprite/svg/symbols.svg#down"})),"...")),Object(l.createElement)(b.a,null,Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Transparent container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(F,"with-dropdown")},Object(H.f)(F,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(I,"with-dropdown")},Object(H.f)(I,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered filled container"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(g,"with-dropdown")},Object(H.f)(g,"with-dropdown"))),Object(l.createElement)(d.a,null,Object(l.createElement)("strong",null,"Bordered inverse"),Object(l.createElement)(o.a,{demoStyles:Object(H.e)(x,"with-dropdown")},Object(H.f)(x,"with-dropdown")))))},Y=function(){return Object(s.a)(V())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/buttons/docs.mdx.js"]=function(e){function t(t){for(var s,o,c=t[0],r=t[1],i=t[2],d=0,b=[];d<c.length;d++)o=c[d],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&b.push(a[o][0]),a[o]=0;for(s in r)Object.prototype.hasOwnProperty.call(r,s)&&(e[s]=r[s]);for(u&&u(t);b.length;)b.shift()();return l.push.apply(l,i\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],s=!0,c=1;c<n.length;c++){var r=n[c];0!==a[r]&&(s=!1)}s&&(l.splice(t--,1),e=o(o.s=n[0]))}return e}var s={},a={13:0},l=[];function o(t){if(s[t])return s[t].exports;var n=s[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=s,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)o.d(n,s,function(t){return e[t]}.bind(null,s));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var u=r;return l.push([685,0]),n()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},685:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return L})),n.d(t,"getContents",(function(){return P}));var s=n(0),a=n.n(s),l=n(4),o=n(2),c=(n(25),n(14)),r=n(37),i=n(12),u=n(10),d=a.a.createElement(i.a,{isNeutral:!0},a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral"),b=(i.a,u.a,[{id:"with-icon-right",label:"With right icon",element:a.a.createElement(i.a,{isNeutral:!0},"Button Neutral",a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_right",sprite:"utility",symbol:"download"}))}]),h=n(111),f=n(3),m=n.n(f),p=n(5),g=n.n(p);function y(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==n)return;var s,a,l=[],o=!0,c=!1;try{for(n=n.call(e);!(o=(s=n.next()).done)&&(l.push(s.value),!t\|\|l.length!==t);o=!0);}catch(e){c=!0,a=e}finally{try{o\|\|null==n.return\|\|n.return()}finally{if(c)throw a}}return l}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n\|\|"Set"===n)return Array.from(e);if("Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n))return O(e,t)}(e,t)\|\|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 O(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,s=new Array(t);n<t;n++)s[n]=e[n];return s}var v=function(e){return a.a.createElement("span",{className:"slds-text-not-pressed"},a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),e.children)};v.propTypes={children:m.a.string.isRequired};var j=function(e){return a.a.createElement("span",{className:"slds-text-pressed"},a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),e.children)};j.propTypes={children:m.a.string.isRequired};var w=function(e){var t=e.isDisabled,n=e.isPressed,l=y(Object(s.useState)(n),2),o=l[0],c=l[1];return a.a.createElement(i.a,{isNeutral:!0,className:g()("slds-button_dual-stateful",{"slds-is-pressed":o}),disabled:t,"aria-live":"assertive","aria-pressed":Boolean(o).toString(),onClick:function(){return c(!o)}},a.a.createElement(v,null,"Follow"),a.a.createElement(j,null,"Following"))};w.propTypes={isDisabled:m.a.bool,isPressed:m.a.bool};var E=a.a.createElement(w,null,a.a.createElement(v,null,"Follow"),a.a.createElement(j,null,"Following")),_=[{id:"pressed",label:"pressed",element:a.a.createElement(w,{isPressed:!0},a.a.createElement(v,null,"Follow"),a.a.createElement(j,null,"Following"))}],k=n(1),S=n(35),T=l.c.a,x=l.c.code,B=l.c.em,D=l.c.h2,A=l.c.h3,N=l.c.li,I=l.c.p,C=l.c.strong,F=l.c.ul,L=function(){return Object(s.createElement)(l.b,{},Object(s.createElement)("div",{className:"doc lead"},"Buttons are clickable items used to perform an action."),Object(s.createElement)(o.a,null,Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.b),Object(k.f)(i.c,"neutral"),Object(k.f)(i.c,"brand"),Object(k.f)(i.c,"outline-brand"),Object(k.f)(i.c,"destructive"),Object(k.f)(i.c,"text-destructive"),Object(k.f)(i.c,"success"))),D({id:"About-Buttons"},"About Buttons"),I({},"Buttons should be used in situations where users might need to:"),F({},N({},"submit a form"),N({},"begin a new task"),N({},"trigger a new UI element to appear on the page"),N({},"specify a new or next step in a process")),A({id:"Button-vs.-Link"},"Button vs. Link"),I({},"The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:"),F({},N({},"Use a ",C({},"link")," when you’re ",C({},"navigating to another place"),', such as: a "view all" page, "Jane Chen" profile, a page "skip link" etc.'),N({},"Use ",C({},"buttons")," when you are ",C({},"performing an action"),', such as: "submit," "merge," "create new," "upload," etc.'),N({},"An action is almost ",C({},"always")," on the same page")),A({id:"Accessibility"},"Accessibility"),I({},'If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab", that is a link ',x({},"<a>"),". Everything else is a ",x({},"<button>"),"."),I({},"The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job."),I({},"If you absolutely cannot use a ",x({},"<button />")," element for an action and instead need to use an ",x({},"<a />"),", you are required to do 2 things:"),F({},N({},"Add ",x({},'role="button"')," attribute to the ",x({},"<a />")," to make the element announce itself as a ",x({},"button")," element."),N({},"Add a JavaScript event handler for when the user presses the space key. This is because a ",x({},"button")," element will respond by default to both the enter and space keys being pressed, but an ",x({},"<a />")," element will not.")),I({},"Finally, color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message."),Object(s.createElement)(o.a,null,Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.c,"base-link"),Object(k.f)(i.c,"neutral-link"),Object(k.f)(i.c,"brand-link"),Object(k.f)(i.c,"outline-brand-link"),Object(k.f)(i.c,"destructive-link"),Object(k.f)(i.c,"text-destructive-link"),Object(k.f)(i.c,"success-link"))),A({id:"Links-that-look-like-Buttons"},"Links that look like Buttons"),I({},'Use these with caution - dictation software users may not be able to properly identify these actions, as they can say "show buttons" and these won\'t highlight since they are semantically links, even though they may look like buttons.'),A({id:"Mobile"},"Mobile"),Object(s.createElement)(S.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(s.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for buttons"},Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.c,"base-link"),Object(k.f)(i.c,"neutral-link"),Object(k.f)(i.c,"brand-link"),Object(k.f)(i.c,"outline-brand-link"),Object(k.f)(i.c,"destructive-link"),Object(k.f)(i.c,"text-destructive-link"),Object(k.f)(i.c,"success-link"))),D({id:"Base"},"Base"),I({},"The base ",x({},"slds-button")," looks like a plain text link. It removes all the styling of the native button."),I({},"The base and neutral buttons are used most frequently and can be used multiple times per feature. Use these buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.b)),D({id:"Variations"},"Variations"),A({id:"Neutral"},"Neutral"),I({},"Add the ",x({},"slds-button_neutral")," class to create a neutral button."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"neutral")),A({id:"Brand"},"Brand"),I({},"To create the brand button, add the ",x({},"slds-button_brand")," class to the ",x({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),I({},"The Brand button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action."),I({},"Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"brand")),A({id:"Outline-Brand"},"Outline Brand"),I({},"To create the outline brand button, add the ",x({},"slds-button_outline-brand")," class to the ",x({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"outline-brand")),A({id:"Inverse"},"Inverse"),I({},"Use the inverse button on dark backgrounds. Add the ",x({},"slds-button_inverse")," class to the ",x({},"slds-button")," class."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"inverse")),A({id:"Destructive"},"Destructive"),I({},"To create the destructive button, add the ",x({},"slds-button_destructive")," class to the ",x({},"slds-button")," class."),I({},"This button is used to indicate a destructive action to the user, like permanently erasing data."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"destructive")),A({id:"Text-Destructive"},"Text Destructive"),I({},"To create the text destructive button, add the ",x({},"slds-button_text-destructive")," class to the ",x({},"slds-button")," class."),I({},"This button is used to indicate a destructive action to the user, like permanently erasing data. Use this version when the ",T({href:"#Destructive"},"Destructive")," button would be too distracting to the experience."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"text-destructive")),A({id:"Success"},"Success"),I({},"To create the success button, add the ",x({},"slds-button_success")," class to the ",x({},"slds-button")," class."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"success")),D({id:"Disabled"},"Disabled"),I({},"Use a disabled attribute when a button can’t be clicked. To create a disabled button, append the ",x({},"disabled")," attribute to the button."),Object(s.createElement)(o.a,null,Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.d,"disabled"),Object(k.f)(i.d,"neutral-disabled"),Object(k.f)(i.d,"brand-disabled"),Object(k.f)(i.d,"outline-brand-disabled"),Object(k.f)(i.d,"destructive-disabled"),Object(k.f)(i.d,"text-destructive-disabled"),Object(k.f)(i.d,"success-disabled"))),D({id:"With-Icons"},"With Icons"),I({},"The SVG, element, or icon inside the button receives the ",x({},"slds-button__icon")," class. You can position the icon on the left or the right using ",x({},"slds-button__icon_left")," or ",x({},"slds-button__icon_right"),", which applies the correct amount of space between the icon and the text."),A({id:"Left-Icon"},"Left Icon"),Object(s.createElement)(o.a,null,Object(k.f)(d)),Object(s.createElement)(S.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"button icons"}),Object(s.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for buttons with left icon"},Object(k.f)(d)),A({id:"Right-Icon"},"Right Icon"),Object(s.createElement)(o.a,null,Object(k.f)(b,"with-icon-right")),D({id:"Stateful"},"Stateful"),I({},"Stateful buttons have three states: not selected (default), selected and focused, and selected with hover state."),I({},"The stateful button requires the ",x({},"slds-button_stateful")," class and the ",x({},"slds-button_neutral")," class in addition to the ",x({},"slds-button")," class. Stateful buttons are only used with the neutral variation."),I({},"The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the ",x({},"slds-button__icon_left")," class setting the icon on the left."),Object(s.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(s.createElement)("p",null,"The stateful button should have ",Object(s.createElement)("code",null,'aria-pressed="true"')," or ",Object(s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',Object(s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",Object(s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",Object(s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",Object(s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),Object(s.createElement)(c.a,{type:"note",header:"JavaScript Requirement"},Object(s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the class from"," ",Object(s.createElement)("code",null,"slds-not-selected")," to ",Object(s.createElement)("code",null,"slds-is-selected-clicked"),". As soon as focus leaves the button, use JavaScript to toggle the class from"," ",Object(s.createElement)("code",null,"slds-is-selected-clicked")," to ",Object(s.createElement)("code",null,"slds-is-selected"),".")),A({id:"Not-Selected"},"Not Selected"),I({},"Stateful button uses the class ",x({},"slds-not-selected")," in its initial state."),Object(s.createElement)(o.a,null,Object(k.f)(h.b)),A({id:"Selected-and-Focused"},"Selected and Focused"),I({},"When selected and still focused, stateful button uses the class ",x({},"slds-is-selected-clicked"),"."),Object(s.createElement)(o.a,null,Object(k.f)(h.c,"selected-clicked")),A({id:"Selected-with-Hover-State"},"Selected with Hover State"),I({},"Once selected and blurred (user moved focus away from the button), stateful button uses the class ",x({},"slds-is-selected"),"."),Object(s.createElement)(o.a,null,Object(k.f)(h.c,"selected")),D({id:"Dual-Stateful-Button"},"Dual Stateful Button"),I({},"Dual Stateful buttons have two states, similar to a ",T({href:"/accessibility/patterns/togglebutton/#site-main-content"},"Toggle Button"),": not pressed (default), and pressed."),I({},"The Dual Stateful button requires the ",x({},"slds-button_dual-stateful")," class, along with a combination of the ",x({},"slds-button")," and ",x({},"slds-button_neutral")," classes. While Dual Stateful buttons are only used with the neutral Button variation, the pressed state changes the button ",B({},"style")," to that of the Brand variation."),I({},"The button contains two spans. Each span contains display text and a corresponding SVG icon with the class ",x({},"slds-button__icon-left")," and has classes that hide or show the contents. By default, the first span with the class ",x({},"slds-text-is-not-pressed")," is displayed; when the class ",x({},"slds-is-pressed")," is applied to the parent button, the span with the class ",x({},"slds-text-is-pressed")," is displayed."),Object(s.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(s.createElement)("p",null,"The stateful button should have ",Object(s.createElement)("code",null,'aria-pressed="true"')," or ",Object(s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',Object(s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",Object(s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",Object(s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",Object(s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),Object(s.createElement)(c.a,{type:"note",header:"JavaScript Requirement"},Object(s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the"," ",Object(s.createElement)("code",null,"slds-is-pressed")," class on or off, depending on the previous state. Remember, only the pressed state requires this class.")),A({id:"Not-Pressed"},"Not Pressed"),Object(s.createElement)(o.a,null,Object(k.f)(E)),A({id:"Pressed"},"Pressed"),I({},"To display the pressed state, use the class ",x({},"slds-is-pressed")," on the ",x({},"<button>")," element."),Object(s.createElement)(o.a,null,Object(k.f)(_,"pressed")),D({id:"Sizing"},"Sizing"),A({id:"Stretch"},"Stretch"),I({},"To allow the button's width to take up the entire width available, apply the ",x({},"slds-button_stretch")," class to the button."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"stretch")),A({id:"Full-Width"},"Full Width"),I({},"Creates a full width button with styling resets"),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"full-width")),D({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(s.createElement)(r.a,{name:"buttons",type:"component"}))},P=function(){return Object(l.a)(L())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/buttons/docs.mdx.js"]=function(e){function t(t){for(var s,o,c=t[0],r=t[1],i=t[2],d=0,b=[];d<c.length;d++)o=c[d],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&b.push(a[o][0]),a[o]=0;for(s in r)Object.prototype.hasOwnProperty.call(r,s)&&(e[s]=r[s]);for(u&&u(t);b.length;)b.shift()();return l.push.apply(l,i\|\|[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],s=!0,c=1;c<n.length;c++){var r=n[c];0!==a[r]&&(s=!1)}s&&(l.splice(t--,1),e=o(o.s=n[0]))}return e}var s={},a={13:0},l=[];function o(t){if(s[t])return s[t].exports;var n=s[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=e,o.c=s,o.d=function(e,t,n){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)o.d(n,s,function(t){return e[t]}.bind(null,s));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=c.push.bind(c);c.push=t,c=c.slice();for(var i=0;i<c.length;i++)t(c[i]);var u=r;return l.push([686,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},686:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return L})),n.d(t,"getContents",(function(){return P}));var s=n(0),a=n.n(s),l=n(4),o=n(2),c=(n(26),n(14)),r=n(38),i=n(12),u=n(10),d=a.a.createElement(i.a,{isNeutral:!0},a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_left",sprite:"utility",symbol:"download"}),"Button Neutral"),b=(i.a,u.a,[{id:"with-icon-right",label:"With right icon",element:a.a.createElement(i.a,{isNeutral:!0},"Button Neutral",a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_right",sprite:"utility",symbol:"download"}))}]),h=n(112),f=n(3),m=n.n(f),p=n(5),g=n.n(p);function y(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]\|\|e["@@iterator"];if(null==n)return;var s,a,l=[],o=!0,c=!1;try{for(n=n.call(e);!(o=(s=n.next()).done)&&(l.push(s.value),!t\|\|l.length!==t);o=!0);}catch(e){c=!0,a=e}finally{try{o\|\|null==n.return\|\|n.return()}finally{if(c)throw a}}return l}(e,t)\|\|function(e,t){if(!e)return;if("string"==typeof e)return O(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n\|\|"Set"===n)return Array.from(e);if("Arguments"===n\|\|/^(?:Ui\|I)nt(?:8\|16\|32)(?:Clamped)?Array$/.test(n))return O(e,t)}(e,t)\|\|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 O(e,t){(null==t\|\|t>e.length)&&(t=e.length);for(var n=0,s=new Array(t);n<t;n++)s[n]=e[n];return s}var v=function(e){return a.a.createElement("span",{className:"slds-text-not-pressed"},a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"add"}),e.children)};v.propTypes={children:m.a.string.isRequired};var j=function(e){return a.a.createElement("span",{className:"slds-text-pressed"},a.a.createElement(u.a,{className:"slds-button__icon slds-button__icon_small slds-button__icon_left",sprite:"utility",symbol:"check"}),e.children)};j.propTypes={children:m.a.string.isRequired};var w=function(e){var t=e.isDisabled,n=e.isPressed,l=y(Object(s.useState)(n),2),o=l[0],c=l[1];return a.a.createElement(i.a,{isNeutral:!0,className:g()("slds-button_dual-stateful",{"slds-is-pressed":o}),disabled:t,"aria-live":"assertive","aria-pressed":Boolean(o).toString(),onClick:function(){return c(!o)}},a.a.createElement(v,null,"Follow"),a.a.createElement(j,null,"Following"))};w.propTypes={isDisabled:m.a.bool,isPressed:m.a.bool};var E=a.a.createElement(w,null,a.a.createElement(v,null,"Follow"),a.a.createElement(j,null,"Following")),_=[{id:"pressed",label:"pressed",element:a.a.createElement(w,{isPressed:!0},a.a.createElement(v,null,"Follow"),a.a.createElement(j,null,"Following"))}],k=n(1),S=n(36),T=l.c.a,x=l.c.code,B=l.c.em,D=l.c.h2,A=l.c.h3,N=l.c.li,I=l.c.p,C=l.c.strong,F=l.c.ul,L=function(){return Object(s.createElement)(l.b,{},Object(s.createElement)("div",{className:"doc lead"},"Buttons are clickable items used to perform an action."),Object(s.createElement)(o.a,null,Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.b),Object(k.f)(i.c,"neutral"),Object(k.f)(i.c,"brand"),Object(k.f)(i.c,"outline-brand"),Object(k.f)(i.c,"destructive"),Object(k.f)(i.c,"text-destructive"),Object(k.f)(i.c,"success"))),D({id:"About-Buttons"},"About Buttons"),I({},"Buttons should be used in situations where users might need to:"),F({},N({},"submit a form"),N({},"begin a new task"),N({},"trigger a new UI element to appear on the page"),N({},"specify a new or next step in a process")),A({id:"Button-vs.-Link"},"Button vs. Link"),I({},"The HTML elements for buttons and links describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:"),F({},N({},"Use a ",C({},"link")," when you’re ",C({},"navigating to another place"),', such as: a "view all" page, "Jane Chen" profile, a page "skip link" etc.'),N({},"Use ",C({},"buttons")," when you are ",C({},"performing an action"),', such as: "submit," "merge," "create new," "upload," etc.'),N({},"An action is almost ",C({},"always")," on the same page")),A({id:"Accessibility"},"Accessibility"),I({},'If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab", that is a link ',x({},"<a>"),". Everything else is a ",x({},"<button>"),"."),I({},"The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job."),I({},"If you absolutely cannot use a ",x({},"<button />")," element for an action and instead need to use an ",x({},"<a />"),", you are required to do 2 things:"),F({},N({},"Add ",x({},'role="button"')," attribute to the ",x({},"<a />")," to make the element announce itself as a ",x({},"button")," element."),N({},"Add a JavaScript event handler for when the user presses the space key. This is because a ",x({},"button")," element will respond by default to both the enter and space keys being pressed, but an ",x({},"<a />")," element will not.")),I({},"Finally, color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message."),Object(s.createElement)(o.a,null,Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.c,"base-link"),Object(k.f)(i.c,"neutral-link"),Object(k.f)(i.c,"brand-link"),Object(k.f)(i.c,"outline-brand-link"),Object(k.f)(i.c,"destructive-link"),Object(k.f)(i.c,"text-destructive-link"),Object(k.f)(i.c,"success-link"))),A({id:"Links-that-look-like-Buttons"},"Links that look like Buttons"),I({},'Use these with caution - dictation software users may not be able to properly identify these actions, as they can say "show buttons" and these won\'t highlight since they are semantically links, even though they may look like buttons.'),A({id:"Mobile"},"Mobile"),Object(s.createElement)(S.a,{patternSpecificText:"buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(s.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for buttons"},Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.c,"base-link"),Object(k.f)(i.c,"neutral-link"),Object(k.f)(i.c,"brand-link"),Object(k.f)(i.c,"outline-brand-link"),Object(k.f)(i.c,"destructive-link"),Object(k.f)(i.c,"text-destructive-link"),Object(k.f)(i.c,"success-link"))),D({id:"Base"},"Base"),I({},"The base ",x({},"slds-button")," looks like a plain text link. It removes all the styling of the native button."),I({},"The base and neutral buttons are used most frequently and can be used multiple times per feature. Use these buttons when the actions are of secondary importance to the content surrounding it, such as in the actions ribbon in a page header."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.b)),D({id:"Variations"},"Variations"),A({id:"Neutral"},"Neutral"),I({},"Add the ",x({},"slds-button_neutral")," class to create a neutral button."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"neutral")),A({id:"Brand"},"Brand"),I({},"To create the brand button, add the ",x({},"slds-button_brand")," class to the ",x({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),I({},"The Brand button generally should only be used once per component screen at any one time. It is used for when there is an action that is clearly more important than the other actions and you need to draw attention to it. An example is when you have a “Save” and “Cancel” button. The “Save” is the primary action."),I({},"Not all features need to have primary actions, sometimes the actions are secondary to the content and are all of equal importance."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"brand")),A({id:"Outline-Brand"},"Outline Brand"),I({},"To create the outline brand button, add the ",x({},"slds-button_outline-brand")," class to the ",x({},"slds-button")," class. The brand color tokens can be overridden for theme specific usage."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"outline-brand")),A({id:"Inverse"},"Inverse"),I({},"Use the inverse button on dark backgrounds. Add the ",x({},"slds-button_inverse")," class to the ",x({},"slds-button")," class."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"inverse")),A({id:"Destructive"},"Destructive"),I({},"To create the destructive button, add the ",x({},"slds-button_destructive")," class to the ",x({},"slds-button")," class."),I({},"This button is used to indicate a destructive action to the user, like permanently erasing data."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"destructive")),A({id:"Text-Destructive"},"Text Destructive"),I({},"To create the text destructive button, add the ",x({},"slds-button_text-destructive")," class to the ",x({},"slds-button")," class."),I({},"This button is used to indicate a destructive action to the user, like permanently erasing data. Use this version when the ",T({href:"#Destructive"},"Destructive")," button would be too distracting to the experience."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"text-destructive")),A({id:"Success"},"Success"),I({},"To create the success button, add the ",x({},"slds-button_success")," class to the ",x({},"slds-button")," class."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"success")),D({id:"Disabled"},"Disabled"),I({},"Use a disabled attribute when a button can’t be clicked. To create a disabled button, append the ",x({},"disabled")," attribute to the button."),Object(s.createElement)(o.a,null,Object(s.createElement)(a.a.Fragment,null,Object(k.f)(i.d,"disabled"),Object(k.f)(i.d,"neutral-disabled"),Object(k.f)(i.d,"brand-disabled"),Object(k.f)(i.d,"outline-brand-disabled"),Object(k.f)(i.d,"destructive-disabled"),Object(k.f)(i.d,"text-destructive-disabled"),Object(k.f)(i.d,"success-disabled"))),D({id:"With-Icons"},"With Icons"),I({},"The SVG, element, or icon inside the button receives the ",x({},"slds-button__icon")," class. You can position the icon on the left or the right using ",x({},"slds-button__icon_left")," or ",x({},"slds-button__icon_right"),", which applies the correct amount of space between the icon and the text."),A({id:"Left-Icon"},"Left Icon"),Object(s.createElement)(o.a,null,Object(k.f)(d)),Object(s.createElement)(S.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"button icons"}),Object(s.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for buttons with left icon"},Object(k.f)(d)),A({id:"Right-Icon"},"Right Icon"),Object(s.createElement)(o.a,null,Object(k.f)(b,"with-icon-right")),D({id:"Stateful"},"Stateful"),I({},"Stateful buttons have three states: not selected (default), selected and focused, and selected with hover state."),I({},"The stateful button requires the ",x({},"slds-button_stateful")," class and the ",x({},"slds-button_neutral")," class in addition to the ",x({},"slds-button")," class. Stateful buttons are only used with the neutral variation."),I({},"The button contains three spans with classes that hide or show the content of the spans based on the class on the button. Each span contains text and a corresponding icon. The SVG will have the ",x({},"slds-button__icon_left")," class setting the icon on the left."),Object(s.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(s.createElement)("p",null,"The stateful button should have ",Object(s.createElement)("code",null,'aria-pressed="true"')," or ",Object(s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',Object(s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",Object(s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",Object(s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",Object(s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),Object(s.createElement)(c.a,{type:"note",header:"JavaScript Requirement"},Object(s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the class from"," ",Object(s.createElement)("code",null,"slds-not-selected")," to ",Object(s.createElement)("code",null,"slds-is-selected-clicked"),". As soon as focus leaves the button, use JavaScript to toggle the class from"," ",Object(s.createElement)("code",null,"slds-is-selected-clicked")," to ",Object(s.createElement)("code",null,"slds-is-selected"),".")),A({id:"Not-Selected"},"Not Selected"),I({},"Stateful button uses the class ",x({},"slds-not-selected")," in its initial state."),Object(s.createElement)(o.a,null,Object(k.f)(h.b)),A({id:"Selected-and-Focused"},"Selected and Focused"),I({},"When selected and still focused, stateful button uses the class ",x({},"slds-is-selected-clicked"),"."),Object(s.createElement)(o.a,null,Object(k.f)(h.c,"selected-clicked")),A({id:"Selected-with-Hover-State"},"Selected with Hover State"),I({},"Once selected and blurred (user moved focus away from the button), stateful button uses the class ",x({},"slds-is-selected"),"."),Object(s.createElement)(o.a,null,Object(k.f)(h.c,"selected")),D({id:"Dual-Stateful-Button"},"Dual Stateful Button"),I({},"Dual Stateful buttons have two states, similar to a ",T({href:"/accessibility/patterns/togglebutton/#site-main-content"},"Toggle Button"),": not pressed (default), and pressed."),I({},"The Dual Stateful button requires the ",x({},"slds-button_dual-stateful")," class, along with a combination of the ",x({},"slds-button")," and ",x({},"slds-button_neutral")," classes. While Dual Stateful buttons are only used with the neutral Button variation, the pressed state changes the button ",B({},"style")," to that of the Brand variation."),I({},"The button contains two spans. Each span contains display text and a corresponding SVG icon with the class ",x({},"slds-button__icon-left")," and has classes that hide or show the contents. By default, the first span with the class ",x({},"slds-text-is-not-pressed")," is displayed; when the class ",x({},"slds-is-pressed")," is applied to the parent button, the span with the class ",x({},"slds-text-is-pressed")," is displayed."),Object(s.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(s.createElement)("p",null,"The stateful button should have ",Object(s.createElement)("code",null,'aria-pressed="true"')," or ",Object(s.createElement)("code",null,'"false"'),' and the accessible label should be static and describe the pressed state, so for example a "follow" button would always say "follow" and the sense that you are "following" is actually derived from ',Object(s.createElement)("code",null,"aria-pressed")," being true. Also, be sure to include the attribute ",Object(s.createElement)("code",null,'aria-live="assertive"')," on the button. The ",Object(s.createElement)("code",null,'aria-live="assertive"')," attribute means the value of the ",Object(s.createElement)("code",null,"<span>")," inside the button will be spoken whenever it changes.")),Object(s.createElement)(c.a,{type:"note",header:"JavaScript Requirement"},Object(s.createElement)("p",null,"When the user clicks the button, use JavaScript to toggle the"," ",Object(s.createElement)("code",null,"slds-is-pressed")," class on or off, depending on the previous state. Remember, only the pressed state requires this class.")),A({id:"Not-Pressed"},"Not Pressed"),Object(s.createElement)(o.a,null,Object(k.f)(E)),A({id:"Pressed"},"Pressed"),I({},"To display the pressed state, use the class ",x({},"slds-is-pressed")," on the ",x({},"<button>")," element."),Object(s.createElement)(o.a,null,Object(k.f)(_,"pressed")),D({id:"Sizing"},"Sizing"),A({id:"Stretch"},"Stretch"),I({},"To allow the button's width to take up the entire width available, apply the ",x({},"slds-button_stretch")," class to the button."),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"stretch")),A({id:"Full-Width"},"Full Width"),I({},"Creates a full width button with styling resets"),Object(s.createElement)(o.a,{toggleCode:!1},Object(k.f)(i.c,"full-width")),D({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(s.createElement)(r.a,{name:"buttons",type:"component"}))},P=function(){return Object(l.a)(L())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/cards/docs.mdx.js"]=function(e){function t(t){for(var n,c,r=t[0],i=t[1],d=t[2],m=0,u=[];m<r.length;m++)c=r[m],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&u.push(l[c][0]),l[c]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(o&&o(t);u.length;)u.shift()();return s.push.apply(s,d\|\|[]),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 i=a[r];0!==l[i]&&(n=!1)}n&&(s.splice(t--,1),e=c(c.s=a[0]))}return e}var n={},l={14:0},s=[];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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var o=i;return s.push([665,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},665:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return U})),a.d(t,"getContents",(function(){return X}));var n=a(0),l=a.n(n),s=a(4),c=a(2),r=(a(25),a(15)),i=a(14),d=a(13),o=a(141),m=a(78),u=a(32),h=a(6),b=a(50),E=a(62),f=a(31),p=l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),y=l.a.createElement(h.s,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},l.a.createElement(h.q,null,l.a.createElement(h.r,null,l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Name"})),l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Company"})),l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Title"})),l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Email"})))),l.a.createElement(h.o,null,l.a.createElement(h.p,null,l.a.createElement(h.m,null,l.a.createElement(h.j,{cellLink:!0,cellText:"Amy Choi"})),l.a.createElement(h.t,{type:"advanced"},l.a.createElement(h.j,{cellText:"Company One"})),l.a.createElement(h.t,{type:"advanced"},l.a.createElement(h.j,{cellText:"Director of Operations"})),l.a.createElement(h.t,{type:"advanced"},l.a.createElement(h.j,{cellText:"adam@company.com"}))))),g=l.a.createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:l.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),l.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:l.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),l.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:l.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),w=function(e){return l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts (1)",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,null,y),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))},_=function(e){return l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts (3)",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},g),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))},v=function(e){return l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Outer Card Header",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))))},O=l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts"))),j=[{id:"empty",label:"Empty",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header",href:!0,symbol:"contact",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,null),l.a.createElement(d.b,null))},{id:"empty-illustration",label:"Empty with illustration",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Tasks",href:!0,symbol:"task"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(f.a,null,l.a.createElement(E.d,null),l.a.createElement(f.c,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Tasks",href:!0,symbol:"task"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(b.a,{className:"slds-spinner_small"})))}],N=[{id:"related-list-table",label:"With data-table",element:l.a.createElement(w,null)},{id:"related-list-tiles",label:"With tiles",element:l.a.createElement(_,null)},{id:"nested-cards",label:"Nested cards",element:l.a.createElement(v,null)},{id:"with-no-header",label:"With no header",element:l.a.createElement(d.d,null,l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header",href:!0,className:"slds-assistive-text"}),l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account"}),l.a.createElement(d.a,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body"),l.a.createElement(d.b,null))},{id:"has-footer",label:"Has footer",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Outer Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"This is a nested card with no styling (default)"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Outer Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --slds-c-card-color-background: #f3f3f3;\n --slds-c-card-radius-border: 8px;\n --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n --slds-c-card-spacing-block-start: 1.5rem;\n --slds-c-card-spacing-block-end: 0.5rem;\n --slds-c-card-spacing-inline: 1rem;\n --slds-c-card-title-font-size: 1.5rem;\n --slds-c-card-header-spacing-block-start: 0;\n --slds-c-card-header-spacing-inline-start: 1.5rem;\n --slds-c-card-header-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-inline-start: 1.5rem;\n --slds-c-card-body-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-block-end: 1rem;\n --slds-c-card-footer-spacing-block-start: 0.5rem;\n --slds-c-card-footer-spacing-block-end: 0;\n --slds-c-card-footer-spacing-inline-start: 1.5rem;\n --slds-c-card-footer-spacing-inline-end: 1.5rem;\n --slds-c-card-footer-font-size: 0.75rem;\n --slds-c-card-footer-text-align: right;\n ",storybookStyles:!0,element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,null,"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))}],x=a(10),C=a(7),A=a(55),T=a(5),k=a.n(T),S=function(e){return l.a.createElement("div",{className:"slds-einstein-header__actions"},l.a.createElement(A.a,null,l.a.createElement(C.b,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),l.a.createElement(C.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},W=function(e){return l.a.createElement("div",{className:k()("slds-grid slds-einstein-header",e.className)},e.closeButton?l.a.createElement(C.b,{className:k()("slds-button_icon-small slds-float_right slds-popover__close",e.inverse?"slds-button_icon-inverse":"slds-button_icon"),symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}):null,l.a.createElement("header",{className:k()("slds-media slds-media_center slds-has-flexi-truncate")},l.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},l.a.createElement(x.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle\|\|"Einstein"},e.hasLink?l.a.createElement("a",{href:"#",className:"slds-card__header-link",title:e.headerTitle\|\|"Einstein",onClick:function(e){return e.preventDefault()}},l.a.createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")):l.a.createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")))),l.a.createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&l.a.createElement(S,null))},P=function(e){return l.a.createElement(d.d,null,l.a.createElement(W,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body"),l.a.createElement(d.b,null,"View All"," ",l.a.createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},V=l.a.createElement(P,null),B=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:l.a.createElement(P,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:l.a.createElement(P,{hasIcon:!0,hasActions:!0})}],I=a(30),L=l.a.createElement("div",{className:"slds-card-wrapper"},l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),D=(I.a,I.a.Item,d.d,d.c,d.a,d.b,d.d,d.c,d.a,d.b,I.a.Item,I.a.Item,I.a,I.a.Item,d.d,d.c,d.a,d.b,d.d,d.c,d.a,d.b,I.a.Item,I.a.Item,a(1)),z=a(35),H=a(37),M=s.c.a,R=s.c.code,F=s.c.em,J=s.c.h2,q=s.c.h3,Y=s.c.h4,G=s.c.h5,K=s.c.p,Q=s.c.strong,U=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),Object(n.createElement)(c.a,{exampleOnly:!0},Object(D.f)(O)),J({id:"About-Cards"},"About Cards"),K({},"To initialize a card, apply the ",R({},"slds-card")," class to an ",R({},"<article>")," element."),q({id:"Accessibility"},"Accessibility"),K({},"Cards should use an underlying ",R({},"<article>")," element to maintain usability for some screen reader users."),K({},"If the card header icon is redundant with the card header text, the assistive text is not needed."),q({id:"Mobile"},"Mobile"),Object(n.createElement)(z.a,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),Object(n.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for cards"},Object(D.f)(O)),J({id:"Base-Card-Structure"},"Base Card Structure"),K({},"A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information."),Object(n.createElement)(c.a,null,Object(D.f)(O)),q({id:"Header"},"Header"),K({},"The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header."),Object(n.createElement)(r.a,{title:"Cards Header"},Object(n.createElement)(c.a,null,Object(n.createElement)(d.d,null,Object(n.createElement)(d.c,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account"})))),Y({id:"With-no-header"},"With no header"),K({},"The card header can be removed from the HTML to prevent the card header from displaying."),Object(n.createElement)(c.a,null,Object(D.f)(N,"with-no-header")),K({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",R({},"slds-assistive-text")," to the ",R({},"slds-card__header")," element."),Object(n.createElement)(c.a,null,Object(D.f)(N,"visibly-hidden-card-header")),Y({id:"Actions-row"},"Actions row"),K({},"The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead."),G({id:"Single-action"},"Single action"),Object(n.createElement)(r.a,{title:"Cards Single Action"},Object(n.createElement)(c.a,null,Object(n.createElement)(d.d,null,Object(n.createElement)(d.c,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:Object(n.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),G({id:"Multiple-actions"},"Multiple actions"),Object(n.createElement)(r.a,{title:"Cards Multiple Actions"},Object(n.createElement)(c.a,{demoStyles:"height: 10rem;"},Object(n.createElement)(d.d,null,Object(n.createElement)(d.c,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:Object(n.createElement)(o.a,{position:"right"})})))),q({id:"Body"},"Body"),K({},"The card body accommodates any layout or design, as long as its a grouping of related information."),Object(n.createElement)(i.a,{type:"note",header:"Styling Note"},Object(n.createElement)("p",null,"By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the ",Object(n.createElement)("code",null,"slds-card__body_inner")," class on the ",Object(n.createElement)("code",null,"slds-card__body")," element.")),Y({id:"Default-without-padding"},"Default without padding"),K({},"For an example of when to use the default behavior, see the ",M({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),Object(n.createElement)(c.a,null,Object(D.f)(N,"body-has-no-padding")),Y({id:"With-padding"},"With padding"),K({},"For an example of when to use the ",R({},"slds-card__body_inner")," class, see the ",M({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),Object(n.createElement)(c.a,null,Object(D.f)(N,"body-has-padding")),q({id:"Footer"},"Footer"),K({},"The card footer is optional and should ",F({},Q({},"only")),' have a "View All" link that takes a user to the object list view.'),Object(n.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing.")),Object(n.createElement)(i.a,{type:"note",header:"Implementation Note"},Object(n.createElement)("p",null,"The examples in this documentation use the ",Object(n.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",Object(n.createElement)("code",null,"<a>")," to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.")),Y({id:"With-no-footer"},"With no footer"),Object(n.createElement)(c.a,null,Object(D.f)(N,"has-no-footer")),Y({id:"With-a-footer"},"With a footer"),Object(n.createElement)(c.a,null,Object(D.f)(N,"has-footer")),J({id:"Examples"},"Examples"),q({id:"Empty"},"Empty"),K({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),Y({id:"Collapsed"},"Collapsed"),Object(n.createElement)(c.a,null,Object(D.f)(j,"empty")),Y({id:"With-Illustration"},"With Illustration"),K({},"Alternatively, a card can be represented with no data by using an ",M({href:"/components/illustration"},"illustration")," in the card body."),Object(n.createElement)(c.a,null,Object(D.f)(j,"empty-illustration")),q({id:"Loading"},"Loading"),K({},"When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component."),Object(n.createElement)(c.a,null,Object(D.f)(j,"loading")),q({id:"With-a-Data-Table"},"With a Data Table"),K({},"Placing a data table inside of an ",R({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),Object(n.createElement)(c.a,null,Object(D.f)(N,"related-list-table")),q({id:"With-Tiles"},"With Tiles"),K({},"Placing contact tiles inside of an ",R({},"slds-card__body")," is an example of using ",R({},"slds-card__body_inner")," to apply additional padding to the card body content."),Object(n.createElement)(c.a,null,Object(D.f)(N,"related-list-tiles")),Object(n.createElement)(z.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),Object(n.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for cards with tiles"},Object(D.f)(N,"related-list-tiles")),J({id:"Layout"},"Layout"),q({id:"Nested-Cards"},"Nested Cards"),K({},"When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying ",R({},"slds-card_boundary")," to the ",R({},"slds-card")," element."),Y({id:"No-styling"},"No styling"),Object(n.createElement)(c.a,null,Object(D.f)(N,"nested-no-boundary")),Y({id:"With-card-styling"},"With card styling"),K({},"Adding ",R({},"slds-card_boundary")," to the ",R({},"slds-card")," element will give you back the card styling."),Object(n.createElement)(c.a,null,Object(D.f)(N,"nested-with-boundary")),q({id:"Wrapped-Cards"},"Wrapped Cards"),K({},"To combine several cards into a single card look, wrap the cards using ",R({},"slds-card-wrapper"),". Similar to the nested cards, adding ",R({},"slds-card_boundary")," to the ",R({},"slds-card")," element will give you back the card styling."),Object(n.createElement)(c.a,null,Object(D.f)(L)),J({id:"Einstein-Theming"},"Einstein Theming"),K({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),Object(n.createElement)(c.a,null,Object(D.f)(V)),q({id:"With-an-Icon"},"With an Icon"),Object(n.createElement)(c.a,null,Object(D.f)(B,"einstein-with-icon")),q({id:"With-Actions"},"With Actions"),Object(n.createElement)(c.a,null,Object(D.f)(B,"einstein-with-icon-and-actions")),Object(n.createElement)(z.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),Object(n.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for Einstein themed cards"},Object(D.f)(B,"einstein-with-icon-and-actions")),J({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(H.a,{name:"cards",type:"component"}))},X=function(){return Object(s.a)(U())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/cards/docs.mdx.js"]=function(e){function t(t){for(var n,c,r=t[0],i=t[1],d=t[2],m=0,u=[];m<r.length;m++)c=r[m],Object.prototype.hasOwnProperty.call(l,c)&&l[c]&&u.push(l[c][0]),l[c]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(o&&o(t);u.length;)u.shift()();return s.push.apply(s,d\|\|[]),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 i=a[r];0!==l[i]&&(n=!1)}n&&(s.splice(t--,1),e=c(c.s=a[0]))}return e}var n={},l={14:0},s=[];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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=r.push.bind(r);r.push=t,r=r.slice();for(var d=0;d<r.length;d++)t(r[d]);var o=i;return s.push([666,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},666:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return U})),a.d(t,"getContents",(function(){return X}));var n=a(0),l=a.n(n),s=a(4),c=a(2),r=(a(26),a(15)),i=a(14),d=a(13),o=a(142),m=a(79),u=a(33),h=a(6),b=a(51),E=a(63),f=a(32),p=l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New"),y=l.a.createElement(h.s,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},l.a.createElement(h.q,null,l.a.createElement(h.r,null,l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Name"})),l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Company"})),l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Title"})),l.a.createElement(h.c,null,l.a.createElement(h.b,{columnName:"Email"})))),l.a.createElement(h.o,null,l.a.createElement(h.p,null,l.a.createElement(h.m,null,l.a.createElement(h.j,{cellLink:!0,cellText:"Amy Choi"})),l.a.createElement(h.t,{type:"advanced"},l.a.createElement(h.j,{cellText:"Company One"})),l.a.createElement(h.t,{type:"advanced"},l.a.createElement(h.j,{cellText:"Director of Operations"})),l.a.createElement(h.t,{type:"advanced"},l.a.createElement(h.j,{cellText:"adam@company.com"}))))),g=l.a.createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:l.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),l.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:l.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),l.a.createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},l.a.createElement(m.a,{actions:!0,className:"slds-card__tile",media:l.a.createElement(u.a,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),w=function(e){return l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts (1)",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,null,y),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))},_=function(e){return l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts (3)",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},g),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))},v=function(e){return l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Outer Card Header",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:p}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))))},O=l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts"))),j=[{id:"empty",label:"Empty",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header",href:!0,symbol:"contact",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,null),l.a.createElement(d.b,null))},{id:"empty-illustration",label:"Empty with illustration",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Tasks",href:!0,symbol:"task"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(f.a,null,l.a.createElement(E.d,null),l.a.createElement(f.c,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Tasks",href:!0,symbol:"task"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(b.a,{className:"slds-spinner_small"})))}],N=[{id:"related-list-table",label:"With data-table",element:l.a.createElement(w,null)},{id:"related-list-tiles",label:"With tiles",element:l.a.createElement(_,null)},{id:"nested-cards",label:"Nested cards",element:l.a.createElement(v,null)},{id:"with-no-header",label:"With no header",element:l.a.createElement(d.d,null,l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header",href:!0,className:"slds-assistive-text"}),l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account"}),l.a.createElement(d.a,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body"),l.a.createElement(d.b,null))},{id:"has-footer",label:"Has footer",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Outer Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"This is a nested card with no styling (default)"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Outer Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Card Header",href:!0,symbol:"account"}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,{hasPadding:!0},"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --slds-c-card-color-background: #f3f3f3;\n --slds-c-card-radius-border: 8px;\n --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n --slds-c-card-spacing-block-start: 1.5rem;\n --slds-c-card-spacing-block-end: 0.5rem;\n --slds-c-card-spacing-inline: 1rem;\n --slds-c-card-title-font-size: 1.5rem;\n --slds-c-card-header-spacing-block-start: 0;\n --slds-c-card-header-spacing-inline-start: 1.5rem;\n --slds-c-card-header-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-inline-start: 1.5rem;\n --slds-c-card-body-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-block-end: 1rem;\n --slds-c-card-footer-spacing-block-start: 0.5rem;\n --slds-c-card-footer-spacing-block-end: 0;\n --slds-c-card-footer-spacing-inline-start: 1.5rem;\n --slds-c-card-footer-spacing-inline-end: 1.5rem;\n --slds-c-card-footer-font-size: 0.75rem;\n --slds-c-card-footer-text-align: right;\n ",storybookStyles:!0,element:l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Accounts",href:!0,symbol:"account",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,null,"Anything can go into the card body"),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Accounts")))}],x=a(10),C=a(7),A=a(56),T=a(5),k=a.n(T),S=function(e){return l.a.createElement("div",{className:"slds-einstein-header__actions"},l.a.createElement(A.a,null,l.a.createElement(C.b,{className:"slds-button_icon-border-filled",symbol:"email",assistiveText:"Email",title:"Email","aria-pressed":"false"}),l.a.createElement(C.b,{className:"slds-button_icon-border-filled",symbol:"edit",assistiveText:"Edit",title:"Edit","aria-pressed":"false"})))},W=function(e){return l.a.createElement("div",{className:k()("slds-grid slds-einstein-header",e.className)},e.closeButton?l.a.createElement(C.b,{className:k()("slds-button_icon-small slds-float_right slds-popover__close",e.inverse?"slds-button_icon-inverse":"slds-button_icon"),symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}):null,l.a.createElement("header",{className:k()("slds-media slds-media_center slds-has-flexi-truncate")},l.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3"},e.symbol?l.a.createElement("div",{className:"slds-media__figure"},l.a.createElement("span",{className:"slds-icon_container slds-icon-utility-"+e.symbol},l.a.createElement(x.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:e.symbol}))):null,l.a.createElement("div",{className:"slds-media__body"},l.a.createElement("h2",{className:"slds-truncate",id:e.headingId,title:e.headerTitle\|\|"Einstein"},e.hasLink?l.a.createElement("a",{href:"#",className:"slds-card__header-link",title:e.headerTitle\|\|"Einstein",onClick:function(e){return e.preventDefault()}},l.a.createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")):l.a.createElement("span",{className:"slds-text-heading_small"},e.headerTitle\|\|"Einstein")))),l.a.createElement("div",{className:"slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"})),e.actions&&l.a.createElement(S,null))},P=function(e){return l.a.createElement(d.d,null,l.a.createElement(W,{className:"slds-card__header",headerTitle:"Einstein (10+)",hasLink:!0,actions:e.hasActions,symbol:e.hasIcon&&"salesforce1"}),l.a.createElement(d.a,{hasPadding:!0},"Card Body"),l.a.createElement(d.b,null,"View All"," ",l.a.createElement("span",{className:"slds-assistive-text"},"Einstein Recommendations")))},V=l.a.createElement(P,null),B=[{id:"einstein-with-icon",label:"Einstein card - with icon",element:l.a.createElement(P,{hasIcon:!0})},{id:"einstein-with-icon-and-actions",label:"Einstein card - with icon and actions",element:l.a.createElement(P,{hasIcon:!0,hasActions:!0})}],I=a(31),L=l.a.createElement("div",{className:"slds-card-wrapper"},l.a.createElement(d.d,null,l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts"))),l.a.createElement(d.d,{hasCardBoundary:!0},l.a.createElement(d.c,{title:"Contacts",href:!0,symbol:"contact",action:l.a.createElement("button",{className:"slds-button slds-button_neutral"},"New")}),l.a.createElement(d.a,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),l.a.createElement(d.b,null,"View All ",l.a.createElement("span",{className:"slds-assistive-text"},"Contacts")))),D=(I.a,I.a.Item,d.d,d.c,d.a,d.b,d.d,d.c,d.a,d.b,I.a.Item,I.a.Item,I.a,I.a.Item,d.d,d.c,d.a,d.b,d.d,d.c,d.a,d.b,I.a.Item,I.a.Item,a(1)),z=a(36),H=a(38),M=s.c.a,R=s.c.code,F=s.c.em,J=s.c.h2,q=s.c.h3,Y=s.c.h4,G=s.c.h5,K=s.c.p,Q=s.c.strong,U=function(){return Object(n.createElement)(s.b,{},Object(n.createElement)("div",{className:"lead doc"},"Cards are used to apply a container around a related grouping of information."),Object(n.createElement)(c.a,{exampleOnly:!0},Object(D.f)(O)),J({id:"About-Cards"},"About Cards"),K({},"To initialize a card, apply the ",R({},"slds-card")," class to an ",R({},"<article>")," element."),q({id:"Accessibility"},"Accessibility"),K({},"Cards should use an underlying ",R({},"<article>")," element to maintain usability for some screen reader users."),K({},"If the card header icon is redundant with the card header text, the assistive text is not needed."),q({id:"Mobile"},"Mobile"),Object(n.createElement)(z.a,{patternSpecificText:"cards will have bolded header title text, no top border, and no rounded corners"}),Object(n.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for cards"},Object(D.f)(O)),J({id:"Base-Card-Structure"},"Base Card Structure"),K({},"A card is made up of 3 sections, a header, a body, and a footer. The header and footer have limitations, but the body section can accommodate any layout of related information."),Object(n.createElement)(c.a,null,Object(D.f)(O)),q({id:"Header"},"Header"),K({},"The card header can have an icon, a title and actions. The icon and title are located on the left, while the actions row is located on the right side of the card header."),Object(n.createElement)(r.a,{title:"Cards Header"},Object(n.createElement)(c.a,null,Object(n.createElement)(d.d,null,Object(n.createElement)(d.c,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account"})))),Y({id:"With-no-header"},"With no header"),K({},"The card header can be removed from the HTML to prevent the card header from displaying."),Object(n.createElement)(c.a,null,Object(D.f)(N,"with-no-header")),K({},"Alternatively, the card header can be visually hidden but still accessible to screen readers by applying ",R({},"slds-assistive-text")," to the ",R({},"slds-card__header")," element."),Object(n.createElement)(c.a,null,Object(D.f)(N,"visibly-hidden-card-header")),Y({id:"Actions-row"},"Actions row"),K({},"The actions row of a card header typically accommodates a single action for the object a user is working with, such as creating, editing, or deleting. If there are more than one action, an action overflow menu would be used instead."),G({id:"Single-action"},"Single action"),Object(n.createElement)(r.a,{title:"Cards Single Action"},Object(n.createElement)(c.a,null,Object(n.createElement)(d.d,null,Object(n.createElement)(d.c,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:Object(n.createElement)("button",{className:"slds-button slds-button_neutral"},"New")})))),G({id:"Multiple-actions"},"Multiple actions"),Object(n.createElement)(r.a,{title:"Cards Multiple Actions"},Object(n.createElement)(c.a,{demoStyles:"height: 10rem;"},Object(n.createElement)(d.d,null,Object(n.createElement)(d.c,{title:"Accounts",href:"#",onClick:function(e){return e.preventDefault()},symbol:"account",action:Object(n.createElement)(o.a,{position:"right"})})))),q({id:"Body"},"Body"),K({},"The card body accommodates any layout or design, as long as its a grouping of related information."),Object(n.createElement)(i.a,{type:"note",header:"Styling Note"},Object(n.createElement)("p",null,"By default, the body of a card does not have padding. Components inside the card will be flush to the left and right edges of the card. If you need to add padding, use the ",Object(n.createElement)("code",null,"slds-card__body_inner")," class on the ",Object(n.createElement)("code",null,"slds-card__body")," element.")),Y({id:"Default-without-padding"},"Default without padding"),K({},"For an example of when to use the default behavior, see the ",M({href:"/components/cards/#With-a-Data-Table"},"Data Table example"),"."),Object(n.createElement)(c.a,null,Object(D.f)(N,"body-has-no-padding")),Y({id:"With-padding"},"With padding"),K({},"For an example of when to use the ",R({},"slds-card__body_inner")," class, see the ",M({href:"/components/cards/#With-Tiles"},"Tiles example"),"."),Object(n.createElement)(c.a,null,Object(D.f)(N,"body-has-padding")),q({id:"Footer"},"Footer"),K({},"The card footer is optional and should ",F({},Q({},"only")),' have a "View All" link that takes a user to the object list view.'),Object(n.createElement)(i.a,{type:"a11y",header:"Accessibility Note"},Object(n.createElement)("p",null,"When present, the footer includes hidden assistive text to give screen reader users context about which entity they will be viewing.")),Object(n.createElement)(i.a,{type:"note",header:"Implementation Note"},Object(n.createElement)("p",null,"The examples in this documentation use the ",Object(n.createElement)("code",null,"slds-card__footer-action")," class on the footer link ",Object(n.createElement)("code",null,"<a>")," to force the footer's click target to span the entire width of the card. Simply remove this class if not needed.")),Y({id:"With-no-footer"},"With no footer"),Object(n.createElement)(c.a,null,Object(D.f)(N,"has-no-footer")),Y({id:"With-a-footer"},"With a footer"),Object(n.createElement)(c.a,null,Object(D.f)(N,"has-footer")),J({id:"Examples"},"Examples"),q({id:"Empty"},"Empty"),K({},"When a card doesn't have any data, it is represented with the body and footer collapsed by default."),Y({id:"Collapsed"},"Collapsed"),Object(n.createElement)(c.a,null,Object(D.f)(j,"empty")),Y({id:"With-Illustration"},"With Illustration"),K({},"Alternatively, a card can be represented with no data by using an ",M({href:"/components/illustration"},"illustration")," in the card body."),Object(n.createElement)(c.a,null,Object(D.f)(j,"empty-illustration")),q({id:"Loading"},"Loading"),K({},"When a card instantiates and is loading, we want to provide feedback to the user by display a spinner. Once the data has loaded, the spinner can be removed from the card component."),Object(n.createElement)(c.a,null,Object(D.f)(j,"loading")),q({id:"With-a-Data-Table"},"With a Data Table"),K({},"Placing a data table inside of an ",R({},"slds-card__body")," is an example of when to utilize the default behavior of a card body, since no padding is applied."),Object(n.createElement)(c.a,null,Object(D.f)(N,"related-list-table")),q({id:"With-Tiles"},"With Tiles"),K({},"Placing contact tiles inside of an ",R({},"slds-card__body")," is an example of using ",R({},"slds-card__body_inner")," to apply additional padding to the card body content."),Object(n.createElement)(c.a,null,Object(D.f)(N,"related-list-tiles")),Object(n.createElement)(z.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with tiles"}),Object(n.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for cards with tiles"},Object(D.f)(N,"related-list-tiles")),J({id:"Layout"},"Layout"),q({id:"Nested-Cards"},"Nested Cards"),K({},"When a card is located inside of another card body, we remove the drop shadow and border of the nested cards. You can opt into adding the border back by applying ",R({},"slds-card_boundary")," to the ",R({},"slds-card")," element."),Y({id:"No-styling"},"No styling"),Object(n.createElement)(c.a,null,Object(D.f)(N,"nested-no-boundary")),Y({id:"With-card-styling"},"With card styling"),K({},"Adding ",R({},"slds-card_boundary")," to the ",R({},"slds-card")," element will give you back the card styling."),Object(n.createElement)(c.a,null,Object(D.f)(N,"nested-with-boundary")),q({id:"Wrapped-Cards"},"Wrapped Cards"),K({},"To combine several cards into a single card look, wrap the cards using ",R({},"slds-card-wrapper"),". Similar to the nested cards, adding ",R({},"slds-card_boundary")," to the ",R({},"slds-card")," element will give you back the card styling."),Object(n.createElement)(c.a,null,Object(D.f)(L)),J({id:"Einstein-Theming"},"Einstein Theming"),K({},"For cards that contain Einstein related information, you can include an Einstein themed card header."),Object(n.createElement)(c.a,null,Object(D.f)(V)),q({id:"With-an-Icon"},"With an Icon"),Object(n.createElement)(c.a,null,Object(D.f)(B,"einstein-with-icon")),q({id:"With-Actions"},"With Actions"),Object(n.createElement)(c.a,null,Object(D.f)(B,"einstein-with-icon-and-actions")),Object(n.createElement)(z.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"cards with Einstein theming and actions"}),Object(n.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for Einstein themed cards"},Object(D.f)(B,"einstein-with-icon-and-actions")),J({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(n.createElement)(H.a,{name:"cards",type:"component"}))},X=function(){return Object(s.a)(U())}}});