npm - @salesforce-ux/design-system - Versions diffs - 2.25.0 → 2.25.2 - Mend

@salesforce-ux/design-system 2.25.0 → 2.25.2

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

Files changed (726) hide show

package/__internal/chunked/docs/ui/components/docked-form-footer/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-form-footer/docs.mdx.js"]=function(e){function t(t){for(var r,a,l=t[0],i=t[1],c=t[2],d=0,b=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&b.push(n[a][0]),n[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);b.length;)b.shift()();return s.push.apply(s,c\|\|[]),o()}function o(){for(var e,t=0;t<s.length;t++){for(var o=s[t],r=!0,l=1;l<o.length;l++){var i=o[l];0!==n[i]&&(r=!1)}r&&(s.splice(t--,1),e=a(a.s=o[0]))}return e}var r={},n={28:0},s=[];function a(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,a),o.l=!0,o.exports}a.m=e,a.c=r,a.d=function(e,t,o){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(a.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(o,r,function(t){return e[t]}.bind(null,r));return o},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var 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 s.push([752,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},752:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return v})),o.d(t,"getContents",(function(){return y}));var r=o(0),n=o.n(r),s=o(4),a=o(2),l=(o(27),o(14),o(1)),i=o(7),c=o(63),u=o(77),d=l.d.uniqueId("dialog-heading-id-"),b=[{id:"default",label:"Default",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))}],f=[{id:"docked-form-footer-with-error",label:"With error(s)",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))},{id:"docked-form-footer-with-popover",label:"With error popover",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"),n.a.createElement(c.a,{className:"slds-popover_error slds-nubbin_bottom-left",headingId:d,header:n.a.createElement(u.b,{headingId:d,title:"Resolve error",symbol:"error"}),closeButton:!0,inverse:!0,style:{position:"absolute",bottom:"56px",left:"50%",marginLeft:"62px",transform:"translateX(-50%)"}},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More"))))}],p=s.c.h2,m=s.c.h3,h=s.c.p,v=function(){return Object(r.createElement)(s.b,{},Object(r.createElement)("div",{className:"lead doc"},"Docked form footer is used to dock form actions to the bottom of the viewport"),Object(r.createElement)(a.a,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),p({id:"About-Docked-Form-footer"},"About Docked Form footer"),h({},"The popover should be positioned with JavaScript."),h({},"When errors are found within a form, the user will be notified with a popover with the page-level errors listed out."),m({id:"Accessibility"},"Accessibility"),h({},'Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".'),p({id:"Base"},"Base"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),m({id:"With-Error(s)"},"With Error(s)"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(f,"docked-form-footer-with-error")),m({id:"With-Error-Popover"},"With Error Popover"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(f,"docked-form-footer-with-popover")))},y=function(){return Object(s.a)(v())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/docked-form-footer/docs.mdx.js"]=function(e){function t(t){for(var r,a,l=t[0],i=t[1],c=t[2],d=0,b=[];d<l.length;d++)a=l[d],Object.prototype.hasOwnProperty.call(n,a)&&n[a]&&b.push(n[a][0]),n[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);b.length;)b.shift()();return s.push.apply(s,c\|\|[]),o()}function o(){for(var e,t=0;t<s.length;t++){for(var o=s[t],r=!0,l=1;l<o.length;l++){var i=o[l];0!==n[i]&&(r=!1)}r&&(s.splice(t--,1),e=a(a.s=o[0]))}return e}var r={},n={28:0},s=[];function a(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,a),o.l=!0,o.exports}a.m=e,a.c=r,a.d=function(e,t,o){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(a.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(o,r,function(t){return e[t]}.bind(null,r));return o},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var 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 s.push([752,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},752:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return v})),o.d(t,"getContents",(function(){return y}));var r=o(0),n=o.n(r),s=o(4),a=o(2),l=(o(27),o(14),o(1)),i=o(7),c=o(61),u=o(72),d=l.d.uniqueId("dialog-heading-id-"),b=[{id:"default",label:"Default",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))}],f=[{id:"docked-form-footer-with-error",label:"With error(s)",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"))},{id:"docked-form-footer-with-popover",label:"With error popover",element:n.a.createElement("div",{className:"slds-docked-form-footer"},n.a.createElement(i.b,{assistiveText:"Resolve error",className:"slds-button_icon slds-button_icon-error",iconClassName:"slds-button__icon_large",symbol:"error",title:"Resolve error"}),n.a.createElement("button",{type:"button",className:"slds-button slds-button_neutral"},"Cancel"),n.a.createElement("button",{type:"button",className:"slds-button slds-button_brand"},"Save"),n.a.createElement(c.a,{className:"slds-popover_error slds-nubbin_bottom-left",headingId:d,header:n.a.createElement(u.b,{headingId:d,title:"Resolve error",symbol:"error"}),closeButton:!0,inverse:!0,style:{position:"absolute",bottom:"56px",left:"50%",marginLeft:"62px",transform:"translateX(-50%)"}},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More"))))}],p=s.c.h2,m=s.c.h3,h=s.c.p,v=function(){return Object(r.createElement)(s.b,{},Object(r.createElement)("div",{className:"lead doc"},"Docked form footer is used to dock form actions to the bottom of the viewport"),Object(r.createElement)(a.a,{exampleOnly:!0,isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),p({id:"About-Docked-Form-footer"},"About Docked Form footer"),h({},"The popover should be positioned with JavaScript."),h({},"When errors are found within a form, the user will be notified with a popover with the page-level errors listed out."),m({id:"Accessibility"},"Accessibility"),h({},'Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".'),p({id:"Base"},"Base"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(b)),m({id:"With-Error(s)"},"With Error(s)"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(f,"docked-form-footer-with-error")),m({id:"With-Error-Popover"},"With Error Popover"),Object(r.createElement)(a.a,{isViewport:!0,demoStyles:"height: 180px;"},Object(l.f)(f,"docked-form-footer-with-popover")))},y=function(){return Object(s.a)(v())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/modals/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],r=t[1],c=t[2],h=0,u=[];h<l.length;h++)s=l[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,l=1;l<a.length;l++){var r=a[l];0!==i[r]&&(o=!1)}o&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var o={},i={49:0},n=[];function s(t){if(o[t])return o[t].exports;var a=o[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=o,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 o in e)s.d(a,o,function(t){return e[t]}.bind(null,o));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\|\|[],r=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var d=r;return n.push([713,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},713:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return w})),a.d(t,"getContents",(function(){return O}));var o=a(0),i=a(4),n=a(21),s=a(2),l=a(27),r=a(39),c=a(1),d=a(38),h=i.c.a,u=i.c.code,m=i.c.h2,f=i.c.h3,p=i.c.h4,b=i.c.li,g=i.c.p,y=i.c.ul,w=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards."),Object(o.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(c.e)(n.g)},Object(c.f)(n.g)),m({id:"About-Modals"},"About Modals"),g({},"Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide."),g({},"Modals always have an equal amount of space at the top and bottom to account for the height of the close button."),g({},"Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)"),g({},"Modals can have a tagline in the header, simply by adding a paragraph after the heading."),g({},"By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (",u({},".slds-p-around_medium"),")."),g({},"Modal headers can also have taglines, if you need to provide additional context. This tagline can also contain links, or the whole thing could be a link in and of itself."),g({},"Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width."),g({},"These are modals that require a linearly directional paradigm of navigation (“Next” and “Back”, etc.) — the actionable buttons in the modal footer live on the left and right, rather than all on the right. These can either be within a large or default modal, depending on the use case."),g({},"If you're using a Modal for a system alert that the user must acknowledge, consider using a ",h({href:"/components/prompt"},"Prompt"),"."),f({id:"Accessibility"},"Accessibility"),g({},"Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal’s content. Focus shouldn’t return to the underlying page until the user presses the Esc key, presses an explicit “Cancel” or “Close” button in the modal, or performs another action that closes the modal."),p({id:"Expected-markup"},"Expected markup"),y({},b({},"Modal has ",u({},'role="dialog"')),b({},"When the modal is open, everything behind it has HTML attribute ",u({},'aria-hidden="true"'),", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle ",u({},'aria-hidden="true"'),"/",u({},'aria-hidden="false"')," on the main page's wrapper depending on whether or not the modal is open."),b({},"Modal contains an HTML heading. This is an ",u({},"h1")," tag by default but should update according to the surrounding DOM structure. While a semantic heading tag is preferable, if necessary applying ",u({},"role=”heading”")," and ",u({},"aria-level")," to a more generic element is acceptable. Modal heading element has ",u({},'tabindex="-1"')," and this makes it programmatically focusable using Javascript."),b({},"Modal has an ",u({},"aria-labelledby")," attribute whose value is the id of the modal’s heading"),b({},"Modal has an optional ",u({},"aria-describedby")," attribute whose value is the id of the modal's content. This should not be used for all modals, but in instances where the modal is being used as an analog to a javascript ",u({},"confirm()")," or ",u({},"alert()")," dialog to deliver a short prompt that can be responded to with a confirm/cancel button set (eg: ",h({href:"/components/prompt/"},"Prompt"),")."),b({},"Buttons which close the modal should have the same accessible text per ",h({href:"https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html"},"WCAG guidelines"),".")),p({id:"Expected-keyboard-interactions"},"Expected keyboard interactions"),y({},b({},"Esc key closes the modal and moves focus to whatever triggered the modal to open"),b({},"Tab key at bottom of modal cycles focus back to first focusable element at top of modal"),b({},"Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal"),b({},"Enter key submits modal’s form data, if applicable")),p({id:"Focus-guidelines"},"Focus guidelines"),y({},b({},"Focus for modals must follow the guidelines described in the ",h({href:"/accessibility/guidelines/global-focus/#dialogs"},"Accessibility Guidelines for Dialogs"),". Pay special attention to where focus is set when the modal opens."),b({},"If no interactive element exists to set focus when the modal opens, add the appropriate ",u({},"tabindex"),' attribute to the header to allow for programmatic focus (see "Footless" example, below).')),f({id:"Mobile"},"Mobile"),Object(o.createElement)(d.a,{patternSpecificText:"modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for modals"},Object(c.f)(n.g)),m({id:"Base"},"Base"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.g)},Object(c.f)(n.g)),m({id:"Layout"},"Layout"),f({id:"Taglines"},"Taglines"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"taglines")},Object(c.f)(n.h,"taglines")),f({id:"Headless"},"Headless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"headless")},Object(c.f)(n.h,"headless")),f({id:"Footless"},"Footless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"footless")},Object(c.f)(n.h,"footless")),f({id:"Directional"},"Directional"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"directional")},Object(c.f)(n.h,"directional")),m({id:"Sizes"},"Sizes"),f({id:"Small"},"Small"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"small")},Object(c.f)(n.h,"small")),f({id:"Medium"},"Medium"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"medium")},Object(c.f)(n.h,"medium")),f({id:"Large"},"Large"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"large")},Object(c.f)(n.h,"large")),f({id:"Full"},"Full"),g({},"Use the ",u({},"slds-modal_full")," class to give a full screen appearance in small form factors that fall within the ",u({},"$mq-small")," token value. Form factors outside of ",u({},"$mq-small")," will take on the appearance of the large modal."),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for full example"},Object(c.f)(n.h,"full")),Object(o.createElement)(l.a,{toggleCode:!1},Object(o.createElement)(n.f,{size:"full"})),m({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(r.a,{name:"modals",type:"component"}))},O=function(){return Object(i.a)(w())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/modals/docs.mdx.js"]=function(e){function t(t){for(var o,s,l=t[0],r=t[1],c=t[2],h=0,u=[];h<l.length;h++)s=l[h],Object.prototype.hasOwnProperty.call(i,s)&&i[s]&&u.push(i[s][0]),i[s]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,l=1;l<a.length;l++){var r=a[l];0!==i[r]&&(o=!1)}o&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var o={},i={49:0},n=[];function s(t){if(o[t])return o[t].exports;var a=o[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=o,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 o in e)s.d(a,o,function(t){return e[t]}.bind(null,o));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\|\|[],r=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var d=r;return n.push([713,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},713:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return w})),a.d(t,"getContents",(function(){return O}));var o=a(0),i=a(4),n=a(21),s=a(2),l=a(27),r=a(39),c=a(1),d=a(38),h=i.c.a,u=i.c.code,m=i.c.h2,f=i.c.h3,p=i.c.h4,b=i.c.li,g=i.c.p,y=i.c.ul,w=function(){return Object(o.createElement)(i.b,{},Object(o.createElement)("div",{className:"doc lead"},"Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards."),Object(o.createElement)(s.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(c.e)(n.g)},Object(c.f)(n.g)),m({id:"About-Modals"},"About Modals"),g({},"Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide."),g({},"Modals always have an equal amount of space at the top and bottom to account for the height of the close button."),g({},"Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)"),g({},"Modals can have a tagline in the header, simply by adding a paragraph after the heading."),g({},"By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (",u({},".slds-p-around_medium"),")."),g({},"Modal headers can also have taglines, if you need to provide additional context. This tagline can also contain links, or the whole thing could be a link in and of itself."),g({},"Large modals call for large amounts of content. The height follows the same behavior and styles of other modals. The width changes to 90% of the viewport, and uses a wider minimum width and no maximum width."),g({},"These are modals that require a linearly directional paradigm of navigation (“Next” and “Back”, etc.) — the actionable buttons in the modal footer live on the left and right, rather than all on the right. These can either be within a large or default modal, depending on the use case."),g({},"If you're using a Modal for a system alert that the user must acknowledge, consider using a ",h({href:"/components/prompt"},"Prompt"),"."),g({},"To display the modal close button correctly, don’t use the ",u({},"slds-button_icon-inverse")," class for your close button markup."),f({id:"Accessibility"},"Accessibility"),g({},"Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal’s content. Focus shouldn’t return to the underlying page until the user presses the Esc key, presses an explicit “Cancel” or “Close” button in the modal, or performs another action that closes the modal."),p({id:"Expected-markup"},"Expected markup"),y({},b({},"Modal has ",u({},'role="dialog"')),b({},"When the modal is open, everything behind it has HTML attribute ",u({},'aria-hidden="true"'),", so assistive technology won't read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle ",u({},'aria-hidden="true"'),"/",u({},'aria-hidden="false"')," on the main page's wrapper depending on whether or not the modal is open."),b({},"Modal contains an HTML heading. This is an ",u({},"h1")," tag by default but should update according to the surrounding DOM structure. While a semantic heading tag is preferable, if necessary applying ",u({},"role=”heading”")," and ",u({},"aria-level")," to a more generic element is acceptable. Modal heading element has ",u({},'tabindex="-1"')," and this makes it programmatically focusable using Javascript."),b({},"Modal has an ",u({},"aria-labelledby")," attribute whose value is the id of the modal’s heading"),b({},"Modal has an optional ",u({},"aria-describedby")," attribute whose value is the id of the modal's content. This should not be used for all modals, but in instances where the modal is being used as an analog to a javascript ",u({},"confirm()")," or ",u({},"alert()")," dialog to deliver a short prompt that can be responded to with a confirm/cancel button set (eg: ",h({href:"/components/prompt/"},"Prompt"),")."),b({},"Buttons which close the modal should have the same accessible text per ",h({href:"https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html"},"WCAG guidelines"),".")),p({id:"Expected-keyboard-interactions"},"Expected keyboard interactions"),y({},b({},"Esc key closes the modal and moves focus to whatever triggered the modal to open"),b({},"Tab key at bottom of modal cycles focus back to first focusable element at top of modal"),b({},"Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal"),b({},"Enter key submits modal’s form data, if applicable")),p({id:"Focus-guidelines"},"Focus guidelines"),y({},b({},"Focus for modals must follow the guidelines described in the ",h({href:"/accessibility/guidelines/global-focus/#dialogs"},"Accessibility Guidelines for Dialogs"),". Pay special attention to where focus is set when the modal opens."),b({},"If no interactive element exists to set focus when the modal opens, add the appropriate ",u({},"tabindex"),' attribute to the header to allow for programmatic focus (see "Footless" example, below).')),f({id:"Mobile"},"Mobile"),Object(o.createElement)(d.a,{patternSpecificText:"modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for modals"},Object(c.f)(n.g)),m({id:"Base"},"Base"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.g)},Object(c.f)(n.g)),m({id:"Layout"},"Layout"),f({id:"Taglines"},"Taglines"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"taglines")},Object(c.f)(n.h,"taglines")),f({id:"Headless"},"Headless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"headless")},Object(c.f)(n.h,"headless")),f({id:"Footless"},"Footless"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"footless")},Object(c.f)(n.h,"footless")),f({id:"Directional"},"Directional"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"directional")},Object(c.f)(n.h,"directional")),m({id:"Sizes"},"Sizes"),f({id:"Small"},"Small"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"small")},Object(c.f)(n.h,"small")),f({id:"Medium"},"Medium"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"medium")},Object(c.f)(n.h,"medium")),f({id:"Large"},"Large"),Object(o.createElement)(s.a,{isViewport:!0,demoStyles:Object(c.e)(n.h,"large")},Object(c.f)(n.h,"large")),f({id:"Full"},"Full"),g({},"Use the ",u({},"slds-modal_full")," class to give a full screen appearance in small form factors that fall within the ",u({},"$mq-small")," token value. Form factors outside of ",u({},"$mq-small")," will take on the appearance of the large modal."),Object(o.createElement)(s.a,{frameOnly:!0,frameStyles:{height:"640px"},frameTitle:"Example mobile styles for full example"},Object(c.f)(n.h,"full")),Object(o.createElement)(l.a,{toggleCode:!1},Object(o.createElement)(n.f,{size:"full"})),m({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(o.createElement)(r.a,{name:"modals",type:"component"}))},O=function(){return Object(i.a)(w())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/popovers/docs.mdx.js"]=function(e){function t(t){for(var a,s,i=t[0],r=t[1],c=t[2],m=0,u=[];m<i.length;m++)s=i[m],Object.prototype.hasOwnProperty.call(o,s)&&o[s]&&u.push(o[s][0]),o[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(d&&d(t);u.length;)u.shift()();return n.push.apply(n,c\|\|[]),l()}function l(){for(var e,t=0;t<n.length;t++){for(var l=n[t],a=!0,i=1;i<l.length;i++){var r=l[i];0!==o[r]&&(a=!1)}a&&(n.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},o={56:0},n=[];function s(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=r;return n.push([717,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},717:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return X})),l.d(t,"getContents",(function(){return Z}));var a=l(0),o=l.n(a),n=l(4),s=l(2),i=(l(27),l(14)),r=l(28),c=l(45),d=l(40),m=l(10),u=function(e){return e.symbol?o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"utility",symbol:"favorite"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))):o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")},b=(d.a,d.a,d.a,d.a,d.a,d.a,d.a,d.a,l(7)),p=function(e){return o.a.createElement("section",{"aria-label":"Dialog title","aria-describedby":"popover-body-id",className:"slds-popover slds-nubbin_".concat(e.nubbinPosition),role:"dialog"},o.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),o.a.createElement("div",{id:"popover-body-id",className:"slds-popover__body"},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!")))},h=[{context:"Nubbins",id:"left",label:"Nubbin Left",element:o.a.createElement(p,{nubbinPosition:"left"})},{context:"Nubbins",id:"left-top",label:"Nubbin Left (top)",element:o.a.createElement(p,{nubbinPosition:"left-top"})},{context:"Nubbins",id:"left-top-corner",label:"Nubbin Left (top corner)",element:o.a.createElement(p,{nubbinPosition:"left-top-corner"})},{context:"Nubbins",id:"left-bottom",label:"Nubbin Left (bottom)",element:o.a.createElement(p,{nubbinPosition:"left-bottom"})},{context:"Nubbins",id:"left-bottom-corner",label:"Nubbin Left (bottom corner)",element:o.a.createElement(p,{nubbinPosition:"left-bottom-corner"})},{context:"Nubbins",id:"top",label:"Nubbin Top",element:o.a.createElement(p,{nubbinPosition:"top"})},{context:"Nubbins",id:"top-left",label:"Nubbin Top (left)",element:o.a.createElement(p,{nubbinPosition:"top-left"})},{context:"Nubbins",id:"top-left-corner",label:"Nubbin Top (left corner)",element:o.a.createElement(p,{nubbinPosition:"top-left-corner"})},{context:"Nubbins",id:"top-right",label:"Nubbin Top (right)",element:o.a.createElement(p,{nubbinPosition:"top-right"})},{context:"Nubbins",id:"top-right-corner",label:"Nubbin Top (right corner)",element:o.a.createElement(p,{nubbinPosition:"top-right-corner"})},{context:"Nubbins",id:"right",label:"Nubbin Right",element:o.a.createElement(p,{nubbinPosition:"right"})},{context:"Nubbins",id:"right-top",label:"Nubbin Right (top)",element:o.a.createElement(p,{nubbinPosition:"right-top"})},{context:"Nubbins",id:"right-top-corner",label:"Nubbin Right (top corner)",element:o.a.createElement(p,{nubbinPosition:"right-top-corner"})},{context:"Nubbins",id:"right-bottom",label:"Nubbin Right (bottom)",element:o.a.createElement(p,{nubbinPosition:"right-bottom"})},{context:"Nubbins",id:"right-bottom-corner",label:"Nubbin Right (bottom corner)",element:o.a.createElement(p,{nubbinPosition:"right-bottom-corner"})},{context:"Nubbins",id:"bottom",label:"Nubbin Bottom",element:o.a.createElement(p,{nubbinPosition:"bottom"})},{context:"Nubbins",id:"bottom-left",label:"Nubbin Bottom (left)",element:o.a.createElement(p,{nubbinPosition:"bottom-left"})},{context:"Nubbins",id:"bottom-left-corner",label:"Nubbin Bottom (left corner)",element:o.a.createElement(p,{nubbinPosition:"bottom-left-corner"})},{context:"Nubbins",id:"bottom-right",label:"Nubbin Bottom (right)",element:o.a.createElement(p,{nubbinPosition:"bottom-right"})},{context:"Nubbins",id:"bottom-right-corner",label:"Nubbin Bottom (right corner)",element:o.a.createElement(p,{nubbinPosition:"bottom-right-corner"})}],f=l(77),E=l(63),g=l(1),_=g.d.uniqueId("dialog-heading-id-"),v=[{context:"Warning",id:"warning-default",label:"Warning – default",element:o.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_bottom-left",headingId:_,bodyClassName:"slds-popover_warning__body",header:o.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],N=[{context:"Warning",id:"with-top-nubbin",label:"Warning With Top Nubbin",element:o.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_top",bodyClassName:"slds-popover_warning__body",headingId:_,header:o.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer",label:"Warning With Footer",element:o.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:o.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:o.a.createElement(f.a,null),closeButton:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],x=g.d.uniqueId("dialog-heading-id-"),y=function(e){return o.a.createElement("header",{className:"slds-popover__header slds-p-vertical_medium"},o.a.createElement("h2",{id:x,className:"slds-text-heading_medium"},e.title))},O=function(e){return o.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.steps?o.a.createElement("span",{className:"slds-text-title"},"Step 2 of 4"):null,e.skipButton?o.a.createElement("button",{className:"slds-button slds-button_inverse slds-col_bump-left"},"Skip"):null,e.setupButton?o.a.createElement("button",{className:"slds-button slds-button_success slds-col_bump-left"},"Setup Email"):null,e.nextButton?o.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Next"):null,e.learnMoreButton?o.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-left"},"Learn More"):null)},j=[{context:"Walkthrough",deprecated:!0,id:"walkthrough-default",label:"Deprecated – Walkthrough default",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:o.a.createElement(y,{title:"Walkthrough title"}),footer:o.a.createElement(O,{steps:!0,nextButton:!0}),closeButton:!0,inverse:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))}],w=[{context:"Walkthrough",deprecated:!0,id:"micro-setup",label:"Deprecated – Micro Setup",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:o.a.createElement(y,{title:"Walkthrough title"}),footer:o.a.createElement(O,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-alternate",label:"Deprecated – Micro Setup - Alternate",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:o.a.createElement(y,{title:"Walkthrough title"}),footer:o.a.createElement(O,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-in-page",label:"Deprecated – Micro Setup - In Page",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_bottom",headingId:x,header:o.a.createElement(y,{title:"Walkthrough title"}),footer:o.a.createElement(O,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-inline-form",label:"Deprecated – Micro Setup - Inline Form",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:o.a.createElement(y,{title:"Walkthrough title"}),footer:o.a.createElement(O,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),o.a.createElement("div",{className:"slds-form-element slds-p-top_small"},o.a.createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),o.a.createElement("div",{className:"slds-form-element__control"},o.a.createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",deprecated:!0,id:"action-popover",label:"Deprecated – Action Popover",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),o.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-heading",label:"Deprecated – Action Popover - With Heading",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),o.a.createElement("p",null,"Text that describes the action"),o.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-with-link",label:"Deprecated – Action Popover - With Link",element:o.a.createElement(E.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),o.a.createElement("p",null,"Text that describes the action"),o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),o.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))}],k=g.d.uniqueId("dialog-heading-id-"),P=[{context:"Feature",deprecated:!0,id:"feature-default",label:"Deprecated – Feature default",element:o.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))}],S=[{context:"Feature",deprecated:!0,id:"icon-text",label:"Deprecated – With icon and text",element:o.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-link",label:"Deprecated – With icon, header, text, and link",element:o.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:k,closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{id:k,className:"slds-text-heading_small"},"Feature title"),o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",deprecated:!0,id:"icon-header-text",label:"Deprecated – With icon, header, and text",element:o.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:k,closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{id:k,className:"slds-text-heading_small"},"Feature title"),o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-footer",label:"Deprecated – With icon, header, text, and footer",element:o.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:k,footer:o.a.createElement(O,{learnMoreButton:!0}),closeButton:!0,inverse:!0},o.a.createElement("div",{className:"slds-media"},o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),o.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{id:k,className:"slds-text-heading_small"},"Feature title"),o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))}],W=l(81),B=o.a.createElement("span",{className:"slds-icon_container slds-icon-standard-opportunity"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"opportunity"}),o.a.createElement("span",{className:"slds-assistive-text"},"Opportunities")),D=o.a.createElement("span",{className:"slds-icon_container slds-icon-standard-case"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"case"}),o.a.createElement("span",{className:"slds-assistive-text"},"Cases")),L=function(){return o.a.createElement("dd",{className:"slds-m-top_x-small slds-text-align_right"},o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"View all Opportunities"},"View All"))},T=[{id:"panels-default",label:"Panels – default",element:o.a.createElement("section",{"aria-labelledby":"panel-heading-id",className:"slds-popover slds-popover_panel slds-nubbin_left-top",role:"dialog"},o.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),o.a.createElement("div",{className:"slds-popover__header"},o.a.createElement("header",{className:"slds-media slds-media_center slds-m-bottom_small"},o.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account slds-media__figure"},o.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"account"})),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{className:"slds-text-heading_medium slds-hyphenate",id:"panel-heading-id"},o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla Motors")))),o.a.createElement("footer",{className:"slds-grid slds-wrap slds-grid_pull-padded"},o.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},o.a.createElement("dl",null,o.a.createElement("dt",null,o.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Billing Address"},"Billing Address")),o.a.createElement("dd",null,o.a.createElement("p",{className:"slds-truncate",title:"3500 Deer Creek Rd."},"3500 Deer Creek Rd."),o.a.createElement("p",{className:"slds-truncate",title:"Palo Alto, CA 94304"},"Palo Alto, CA 94304")))),o.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},o.a.createElement("dl",null,o.a.createElement("dt",null,o.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Phone"},"Phone")),o.a.createElement("dd",null,o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"212-345-3485")))),o.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},o.a.createElement("dl",null,o.a.createElement("dt",null,o.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Website"},"Website")),o.a.createElement("dd",null,o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"teslamotors.com")))),o.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},o.a.createElement("dl",null,o.a.createElement("dt",null,o.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Account Owner"},"Account Owner")),o.a.createElement("dd",null,o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeff Maguire")))))),o.a.createElement("div",{className:"slds-popover__body"},o.a.createElement("dl",{className:"slds-popover__body-list"},o.a.createElement("dt",{className:"slds-m-bottom_small"},o.a.createElement(W.a,{figureLeft:B,flavor:"center"},o.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Opportunities (2+)"))),o.a.createElement("dd",{className:"slds-m-top_x-small"},o.a.createElement("p",{className:"slds-truncate",title:"Tesla - Mule ESB"},o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Mule ESB")),o.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},o.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),o.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$500,000"},"$500,000"),o.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),o.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Dec 15, 2015"},"Dec 15, 2015"))),o.a.createElement("dd",{className:"slds-m-top_x-small"},o.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),o.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},o.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),o.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),o.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),o.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),o.a.createElement(L,null)),o.a.createElement("dl",{className:"slds-popover__body-list"},o.a.createElement("dt",{className:"slds-m-bottom_small"},o.a.createElement(W.a,{figureLeft:D,flavor:"center"},o.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Cases (1)"))),o.a.createElement("dd",{className:"slds-m-top_x-small"},o.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},o.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),o.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},o.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),o.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),o.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),o.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),o.a.createElement(L,null))))}],C=l(5),A=l.n(C),F="height: 13rem;",M=g.d.uniqueId("dialog-heading-id-"),I=function(e){return o.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.dismissButtonLabel&&o.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-right"},e.dismissButtonLabel),e.actionLinkText&&o.a.createElement("span",{className:"slds-popover_prompt__action-link"},o.a.createElement("a",{href:"#",className:"slds-button"},e.actionLinkText)),e.brandButtonLabel&&o.a.createElement("button",{className:"slds-button slds-button_brand"},e.brandButtonLabel))},q=function(e){var t={"slds-popover_prompt_top":"top"===e.position,"slds-popover_prompt_top-right":"top-right"===e.position,"slds-popover_prompt_top-left":"top-left"===e.position,"slds-popover_prompt_bottom":"bottom"===e.position,"slds-popover_prompt_bottom-left":"bottom-left"===e.position,"slds-popover_prompt_bottom-right":"bottom-right"===e.position};return o.a.createElement(d.a,{className:A()("slds-popover_prompt",t,e.className),bodyClassName:e.bodyClassName,headingId:M,footer:e.showFooter&&o.a.createElement(I,{dismissButtonLabel:"Dismiss",actionLinkText:"Learn More",brandButtonLabel:"Save"}),closeButton:!0},o.a.createElement("div",{className:"slds-media"},e.symbol&&o.a.createElement("div",{className:"slds-media__figure"},o.a.createElement("span",{className:"slds-icon_container",title:e.assistiveText},o.a.createElement(m.a,{className:A()("slds-icon slds-icon_small slds-icon-text-default",e.iconClassName),sprite:"utility",symbol:e.symbol}),o.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("h2",{id:M,className:"slds-popover_prompt__heading"},"Prompt title"),o.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},R=[{context:"Prompt",id:"prompt-default",label:"Prompt – default",element:o.a.createElement(q,{symbol:"prompt"})}],z=[{context:"Prompt",id:"top-left",label:"Positioned: top left",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-left"})},{context:"Prompt",id:"top-center",label:"Positioned: top center",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top"})},{context:"Prompt",id:"top-right",label:"Positioned: top right",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-right"})},{context:"Prompt",id:"bottom-right",label:"Positioned: bottom right",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-right"})},{context:"Prompt",id:"bottom-center",label:"Positioned: bottom center",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom"})},{context:"Prompt",id:"bottom-left",label:"Positioned: bottom left",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-left"})},{context:"Prompt",id:"brand-with-footer",label:"Prompt: branded with footer",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",position:"top",showFooter:!0,className:"slds-popover_brand",iconClassName:"slds-popover__icon"})},{context:"Prompt",id:"brand-without-footer",label:"Prompt: branded without footer",demoStyles:F,storybookStyles:!0,element:o.a.createElement(q,{symbol:"prompt",position:"top",className:"slds-popover_brand slds-popover_brand-bottom",iconClassName:"slds-popover__icon"})}],H=l(39),J=n.c.code,V=n.c.h2,$=n.c.h3,U=n.c.h4,Y=n.c.li,G=n.c.p,K=n.c.strong,Q=n.c.ul,X=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element."),Object(a.createElement)(s.a,{exampleOnly:!0},Object(g.f)(h,"bottom")),V({id:"About-Popovers"},"About Popovers"),G({},"A popover is used to display contextual information to the user."),G({},"A popover can accept the following nubbin position classes, ",J({},".slds-nubbin_left"),", ",J({},".slds-nubbin_left-top"),", ",J({},".slds-nubbin_left-bottom"),", ",J({},".slds-nubbin_top-left"),", ",J({},".slds-nubbin_top-right"),", ",J({},".slds-nubbin_right-top"),", ",J({},".slds-nubbin_right-bottom"),", ",J({},".slds-nubbin_bottom-left"),", ",J({},".slds-nubbin_bottom-right"),"."),$({id:"Accessibility"},"Accessibility"),U({id:"Notable-features"},"Notable features"),Q({},Y({},"Popovers ",K({},"must")," come with a triggering button"),Y({},"They ",K({},"must")," have at least one focusable element inside"),Y({},"They ",K({},"should")," be implemented as a keyboard focus trap"),Y({},"When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there"),Y({},"Pressing the Escape the key as well as clicking the close button should close the Popover"),Y({},"User focus should be placed back on the triggering button when the popover is closed")),G({},"Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present ",K({},"in addition")," and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You ",K({},"should not")," move a user's focus without their expressed intent."),U({id:"Notable-attributes"},"Notable attributes"),Q({},Y({},"The Popover element should have ",J({},'role="dialog"')," applied"),Y({},"The ",J({},"dialog")," should be labelled, this can be achieved in two ways:",Q({},Y({},"Apply the ",J({},"aria-labelledby")," attribute to the ",J({},"dialog")," element and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the ",J({},"dialog"),")"),Y({},"If no Heading element is present, use the ",J({},"aria-label")," attribute and set the value to be a meaningful title of the ",J({},"dialog")))),Y({},"The ",J({},"dialog")," should be described where possible. This can be achieved by applying the ",J({},"aria-describedby")," attribute to the ",J({},"dialog")," element and set the value to be the id of the Popover body"),Y({},"The triggering element ",K({},"must")," have ",J({},'aria-haspopup="true"')," when the popover is opened and ",J({},'aria-haspopup="false"')," when the popover is closed")),V({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(g.f)(d.b)),$({id:"With-Header"},"With Header"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"header")),$({id:"With-Footer"},"With Footer"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"footer")),$({id:"With-Badge"},"With Badge"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"badge")),$({id:"Scrolling-region-with-max-height"},"Scrolling region with max-height"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"scrolling")),V({id:"Widths"},"Widths"),$({id:"Small"},"Small"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-small")),$({id:"Medium"},"Medium"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-medium")),$({id:"Large"},"Large"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-large")),$({id:"Full-Width"},"Full Width"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-full-width")),V({id:"Nubbins"},"Nubbins"),$({id:"Left"},"Left"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Left"),Object(a.createElement)(s.a,null,Object(g.f)(h,"left"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Left Top"),Object(a.createElement)(s.a,null,Object(g.f)(h,"left-top"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Left Bottom"),Object(a.createElement)(s.a,null,Object(g.f)(h,"left-bottom")))),$({id:"Right"},"Right"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Right"),Object(a.createElement)(s.a,null,Object(g.f)(h,"right"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Right Top"),Object(a.createElement)(s.a,null,Object(g.f)(h,"right-top"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Right Bottom"),Object(a.createElement)(s.a,null,Object(g.f)(h,"right-bottom")))),$({id:"Top"},"Top"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Top"),Object(a.createElement)(s.a,null,Object(g.f)(h,"top"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Top Left"),Object(a.createElement)(s.a,null,Object(g.f)(h,"top-left"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Top Right"),Object(a.createElement)(s.a,null,Object(g.f)(h,"top-right")))),$({id:"Bottom"},"Bottom"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Bottom"),Object(a.createElement)(s.a,null,Object(g.f)(h,"bottom"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Bottom Left"),Object(a.createElement)(s.a,null,Object(g.f)(h,"bottom-left"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Bottom Right"),Object(a.createElement)(s.a,null,Object(g.f)(h,"bottom-right")))),V({id:"Feedback-States"},"Feedback States"),$({id:"Error"},"Error"),Object(a.createElement)(s.a,null,Object(g.f)(f.c)),U({id:"With-Footer-2"},"With Footer"),Object(a.createElement)(s.a,null,Object(g.f)(f.d,"with-footer")),U({id:"With-Bullet-List"},"With Bullet List"),Object(a.createElement)(s.a,null,Object(g.f)(f.d,"with-bullet-list")),$({id:"Warning"},"Warning"),Object(a.createElement)(s.a,null,Object(g.f)(v)),U({id:"With-Footer-3"},"With Footer"),Object(a.createElement)(s.a,null,Object(g.f)(N,"with-footer")),V({id:"Examples"},"Examples"),$({id:"Walkthrough"},"Walkthrough"),Object(a.createElement)(s.a,null,Object(g.f)(j)),U({id:"Micro-Setup"},"Micro Setup"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup")),U({id:"Micro-Setup-Alternate"},"Micro Setup - Alternate"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup-alternate")),U({id:"Micro-Setup-In-Page"},"Micro Setup - In Page"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup-in-page")),U({id:"Micro-Setup-Inline-Form"},"Micro Setup - Inline Form"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup-inline-form")),U({id:"Action"},"Action"),Object(a.createElement)(s.a,null,Object(g.f)(w,"action-popover")),U({id:"Action-With-Heading"},"Action - With Heading"),Object(a.createElement)(s.a,null,Object(g.f)(w,"action-popover-heading")),U({id:"Action-With-Link"},"Action - With Link"),Object(a.createElement)(s.a,null,Object(g.f)(w,"action-popover-with-link")),$({id:"Feature"},"Feature"),Object(a.createElement)(s.a,null,Object(g.f)(P)),U({id:"With-icon-and-text"},"With icon and text"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-text")),U({id:"With-icon-header-and-text"},"With icon, header, and text"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-header-text")),U({id:"With-icon-header-text-and-link"},"With icon, header, text and link"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-header-text-link")),U({id:"With-icon-header-text-and-footer"},"With icon, header, text and footer"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-header-text-footer")),$({id:"Record-Preview-Panel"},"Record Preview Panel"),Object(a.createElement)(s.a,null,Object(g.f)(T)),$({id:"Prompt"},"Prompt"),Object(a.createElement)(s.a,null,Object(g.f)(R)),U({id:"Positioned-top-left"},"Positioned top left"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-left")),U({id:"Positioned-top-center"},"Positioned top center"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-center")),U({id:"Positioned-top-right"},"Positioned top right"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-right")),U({id:"Positioned-bottom-right"},"Positioned bottom right"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-right")),U({id:"Positioned-bottom-center"},"Positioned bottom center"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-center")),U({id:"Positioned-bottom-left"},"Positioned bottom left"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-left")),U({id:"With-brand-color-and-footer"},"With brand color and footer"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-with-footer")),U({id:"With-brand-color-no-footer"},"With brand color - no footer"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-without-footer")),V({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(i.a,{header:"A Note About z-index"},Object(a.createElement)("p",null,"By default, Popovers use the ",Object(a.createElement)("code",null,"$z-index-dialog")," (",Object(a.createElement)("a",{href:"/design-tokens/#category-z-index"},"value of 6000"),") token. This allows the Popover to appear above the element that triggered it, and in the vast majority of cases should work well out of the box. However, depending on where the Popover code lives when it's triggered, layout issues could arise."),Object(a.createElement)("p",null,"For this particular use case, the ",Object(a.createElement)("code",null,"--slds-c-popover-position-zindex")," ",Object(a.createElement)("a",{href:"/platforms/lightning/styling-hooks/"},"Styling Hook")," allows developers to change the z-index value. ",Object(a.createElement)("strong",null,"Please note"),": when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.")),Object(a.createElement)(H.a,{name:"popovers",type:"component"}))},Z=function(){return Object(n.a)(X())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/popovers/docs.mdx.js"]=function(e){function t(t){for(var a,s,i=t[0],r=t[1],c=t[2],m=0,u=[];m<i.length;m++)s=i[m],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&u.push(n[s][0]),n[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(d&&d(t);u.length;)u.shift()();return o.push.apply(o,c\|\|[]),l()}function l(){for(var e,t=0;t<o.length;t++){for(var l=o[t],a=!0,i=1;i<l.length;i++){var r=l[i];0!==n[r]&&(a=!1)}a&&(o.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={56:0},o=[];function s(t){if(a[t])return a[t].exports;var l=a[t]={i:t,l:!1,exports:{}};return e[t].call(l.exports,l,l.exports,s),l.l=!0,l.exports}s.m=e,s.c=a,s.d=function(e,t,l){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(s.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(l,a,function(t){return e[t]}.bind(null,a));return l},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 i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var d=r;return o.push([717,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},717:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return X})),l.d(t,"getContents",(function(){return Z}));var a=l(0),n=l.n(a),o=l(4),s=l(2),i=(l(27),l(14)),r=l(28),c=l(45),d=l(40),m=l(10),u=function(e){return e.symbol?n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"utility",symbol:"favorite"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))):n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")},b=(d.a,d.a,d.a,d.a,d.a,d.a,d.a,d.a,l(7)),p=function(e){return n.a.createElement("section",{"aria-label":"Dialog title","aria-describedby":"popover-body-id",className:"slds-popover slds-nubbin_".concat(e.nubbinPosition),role:"dialog"},n.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),n.a.createElement("div",{id:"popover-body-id",className:"slds-popover__body"},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!")))},h=[{context:"Nubbins",id:"left",label:"Nubbin Left",element:n.a.createElement(p,{nubbinPosition:"left"})},{context:"Nubbins",id:"left-top",label:"Nubbin Left (top)",element:n.a.createElement(p,{nubbinPosition:"left-top"})},{context:"Nubbins",id:"left-top-corner",label:"Nubbin Left (top corner)",element:n.a.createElement(p,{nubbinPosition:"left-top-corner"})},{context:"Nubbins",id:"left-bottom",label:"Nubbin Left (bottom)",element:n.a.createElement(p,{nubbinPosition:"left-bottom"})},{context:"Nubbins",id:"left-bottom-corner",label:"Nubbin Left (bottom corner)",element:n.a.createElement(p,{nubbinPosition:"left-bottom-corner"})},{context:"Nubbins",id:"top",label:"Nubbin Top",element:n.a.createElement(p,{nubbinPosition:"top"})},{context:"Nubbins",id:"top-left",label:"Nubbin Top (left)",element:n.a.createElement(p,{nubbinPosition:"top-left"})},{context:"Nubbins",id:"top-left-corner",label:"Nubbin Top (left corner)",element:n.a.createElement(p,{nubbinPosition:"top-left-corner"})},{context:"Nubbins",id:"top-right",label:"Nubbin Top (right)",element:n.a.createElement(p,{nubbinPosition:"top-right"})},{context:"Nubbins",id:"top-right-corner",label:"Nubbin Top (right corner)",element:n.a.createElement(p,{nubbinPosition:"top-right-corner"})},{context:"Nubbins",id:"right",label:"Nubbin Right",element:n.a.createElement(p,{nubbinPosition:"right"})},{context:"Nubbins",id:"right-top",label:"Nubbin Right (top)",element:n.a.createElement(p,{nubbinPosition:"right-top"})},{context:"Nubbins",id:"right-top-corner",label:"Nubbin Right (top corner)",element:n.a.createElement(p,{nubbinPosition:"right-top-corner"})},{context:"Nubbins",id:"right-bottom",label:"Nubbin Right (bottom)",element:n.a.createElement(p,{nubbinPosition:"right-bottom"})},{context:"Nubbins",id:"right-bottom-corner",label:"Nubbin Right (bottom corner)",element:n.a.createElement(p,{nubbinPosition:"right-bottom-corner"})},{context:"Nubbins",id:"bottom",label:"Nubbin Bottom",element:n.a.createElement(p,{nubbinPosition:"bottom"})},{context:"Nubbins",id:"bottom-left",label:"Nubbin Bottom (left)",element:n.a.createElement(p,{nubbinPosition:"bottom-left"})},{context:"Nubbins",id:"bottom-left-corner",label:"Nubbin Bottom (left corner)",element:n.a.createElement(p,{nubbinPosition:"bottom-left-corner"})},{context:"Nubbins",id:"bottom-right",label:"Nubbin Bottom (right)",element:n.a.createElement(p,{nubbinPosition:"bottom-right"})},{context:"Nubbins",id:"bottom-right-corner",label:"Nubbin Bottom (right corner)",element:n.a.createElement(p,{nubbinPosition:"bottom-right-corner"})}],f=l(72),E=l(61),g=l(1),_=g.d.uniqueId("dialog-heading-id-"),v=[{context:"Warning",id:"warning-default",label:"Warning – default",element:n.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_bottom-left",headingId:_,bodyClassName:"slds-popover_warning__body",header:n.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],N=[{context:"Warning",id:"with-top-nubbin",label:"Warning With Top Nubbin",element:n.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_top",bodyClassName:"slds-popover_warning__body",headingId:_,header:n.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer",label:"Warning With Footer",element:n.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:n.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:n.a.createElement(f.a,{isNeutral:!0}),closeButton:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))},{context:"Warning",id:"with-footer-brand-button",label:"Warning With Footer containing Brand button",element:n.a.createElement(E.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:n.a.createElement(f.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:n.a.createElement(f.a,{isBrand:!0}),closeButton:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"Learn More"},"Learn More")))}],x=g.d.uniqueId("dialog-heading-id-"),y=function(e){return n.a.createElement("header",{className:"slds-popover__header slds-p-vertical_medium"},n.a.createElement("h2",{id:x,className:"slds-text-heading_medium"},e.title))},O=function(e){return n.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.steps?n.a.createElement("span",{className:"slds-text-title"},"Step 2 of 4"):null,e.skipButton?n.a.createElement("button",{className:"slds-button slds-button_inverse slds-col_bump-left"},"Skip"):null,e.setupButton?n.a.createElement("button",{className:"slds-button slds-button_success slds-col_bump-left"},"Setup Email"):null,e.nextButton?n.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Next"):null,e.learnMoreButton?n.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-left"},"Learn More"):null)},j=[{context:"Walkthrough",deprecated:!0,id:"walkthrough-default",label:"Deprecated – Walkthrough default",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:n.a.createElement(y,{title:"Walkthrough title"}),footer:n.a.createElement(O,{steps:!0,nextButton:!0}),closeButton:!0,inverse:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))}],w=[{context:"Walkthrough",deprecated:!0,id:"micro-setup",label:"Deprecated – Micro Setup",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:n.a.createElement(y,{title:"Walkthrough title"}),footer:n.a.createElement(O,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-alternate",label:"Deprecated – Micro Setup - Alternate",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:n.a.createElement(y,{title:"Walkthrough title"}),footer:n.a.createElement(O,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-in-page",label:"Deprecated – Micro Setup - In Page",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_bottom",headingId:x,header:n.a.createElement(y,{title:"Walkthrough title"}),footer:n.a.createElement(O,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))},{context:"Walkthrough",deprecated:!0,id:"micro-setup-inline-form",label:"Deprecated – Micro Setup - Inline Form",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:n.a.createElement(y,{title:"Walkthrough title"}),footer:n.a.createElement(O,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),n.a.createElement("div",{className:"slds-form-element slds-p-top_small"},n.a.createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),n.a.createElement("div",{className:"slds-form-element__control"},n.a.createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",deprecated:!0,id:"action-popover",label:"Deprecated – Action Popover",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),n.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-heading",label:"Deprecated – Action Popover - With Heading",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),n.a.createElement("p",null,"Text that describes the action"),n.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"action-popover-with-link",label:"Deprecated – Action Popover - With Link",element:n.a.createElement(E.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),n.a.createElement("p",null,"Text that describes the action"),n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),n.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))}],k=g.d.uniqueId("dialog-heading-id-"),P=[{context:"Feature",deprecated:!0,id:"feature-default",label:"Deprecated – Feature default",element:n.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))}],S=[{context:"Feature",deprecated:!0,id:"icon-text",label:"Deprecated – With icon and text",element:n.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-link",label:"Deprecated – With icon, header, text, and link",element:n.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:k,closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:k,className:"slds-text-heading_small"},"Feature title"),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",deprecated:!0,id:"icon-header-text",label:"Deprecated – With icon, header, and text",element:n.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:k,closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:k,className:"slds-text-heading_small"},"Feature title"),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},{context:"Feature",deprecated:!0,id:"icon-header-text-footer",label:"Deprecated – With icon, header, text, and footer",element:n.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:k,footer:n.a.createElement(O,{learnMoreButton:!0}),closeButton:!0,inverse:!0},n.a.createElement("div",{className:"slds-media"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),n.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:k,className:"slds-text-heading_small"},"Feature title"),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))}],W=l(81),B=n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-opportunity"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"opportunity"}),n.a.createElement("span",{className:"slds-assistive-text"},"Opportunities")),L=n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-case"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"case"}),n.a.createElement("span",{className:"slds-assistive-text"},"Cases")),D=function(){return n.a.createElement("dd",{className:"slds-m-top_x-small slds-text-align_right"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"View all Opportunities"},"View All"))},T=[{id:"panels-default",label:"Panels – default",element:n.a.createElement("section",{"aria-labelledby":"panel-heading-id",className:"slds-popover slds-popover_panel slds-nubbin_left-top",role:"dialog"},n.a.createElement(b.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),n.a.createElement("div",{className:"slds-popover__header"},n.a.createElement("header",{className:"slds-media slds-media_center slds-m-bottom_small"},n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account slds-media__figure"},n.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"account"})),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{className:"slds-text-heading_medium slds-hyphenate",id:"panel-heading-id"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla Motors")))),n.a.createElement("footer",{className:"slds-grid slds-wrap slds-grid_pull-padded"},n.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n.a.createElement("dl",null,n.a.createElement("dt",null,n.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Billing Address"},"Billing Address")),n.a.createElement("dd",null,n.a.createElement("p",{className:"slds-truncate",title:"3500 Deer Creek Rd."},"3500 Deer Creek Rd."),n.a.createElement("p",{className:"slds-truncate",title:"Palo Alto, CA 94304"},"Palo Alto, CA 94304")))),n.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n.a.createElement("dl",null,n.a.createElement("dt",null,n.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Phone"},"Phone")),n.a.createElement("dd",null,n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"212-345-3485")))),n.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n.a.createElement("dl",null,n.a.createElement("dt",null,n.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Website"},"Website")),n.a.createElement("dd",null,n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"teslamotors.com")))),n.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},n.a.createElement("dl",null,n.a.createElement("dt",null,n.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Account Owner"},"Account Owner")),n.a.createElement("dd",null,n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeff Maguire")))))),n.a.createElement("div",{className:"slds-popover__body"},n.a.createElement("dl",{className:"slds-popover__body-list"},n.a.createElement("dt",{className:"slds-m-bottom_small"},n.a.createElement(W.a,{figureLeft:B,flavor:"center"},n.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Opportunities (2+)"))),n.a.createElement("dd",{className:"slds-m-top_x-small"},n.a.createElement("p",{className:"slds-truncate",title:"Tesla - Mule ESB"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Mule ESB")),n.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),n.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$500,000"},"$500,000"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),n.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Dec 15, 2015"},"Dec 15, 2015"))),n.a.createElement("dd",{className:"slds-m-top_x-small"},n.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),n.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),n.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),n.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),n.a.createElement(D,null)),n.a.createElement("dl",{className:"slds-popover__body-list"},n.a.createElement("dt",{className:"slds-m-bottom_small"},n.a.createElement(W.a,{figureLeft:L,flavor:"center"},n.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Cases (1)"))),n.a.createElement("dd",{className:"slds-m-top_x-small"},n.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),n.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),n.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),n.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),n.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),n.a.createElement(D,null))))}],C=l(5),A=l.n(C),F="height: 13rem;",M=g.d.uniqueId("dialog-heading-id-"),I=function(e){return n.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.dismissButtonLabel&&n.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-right"},e.dismissButtonLabel),e.actionLinkText&&n.a.createElement("span",{className:"slds-popover_prompt__action-link"},n.a.createElement("a",{href:"#",className:"slds-button"},e.actionLinkText)),e.brandButtonLabel&&n.a.createElement("button",{className:"slds-button slds-button_brand"},e.brandButtonLabel))},q=function(e){var t={"slds-popover_prompt_top":"top"===e.position,"slds-popover_prompt_top-right":"top-right"===e.position,"slds-popover_prompt_top-left":"top-left"===e.position,"slds-popover_prompt_bottom":"bottom"===e.position,"slds-popover_prompt_bottom-left":"bottom-left"===e.position,"slds-popover_prompt_bottom-right":"bottom-right"===e.position};return n.a.createElement(d.a,{className:A()("slds-popover_prompt",t,e.className),bodyClassName:e.bodyClassName,headingId:M,footer:e.showFooter&&n.a.createElement(I,{dismissButtonLabel:"Dismiss",actionLinkText:"Learn More",brandButtonLabel:"Save"}),closeButton:!0},n.a.createElement("div",{className:"slds-media"},e.symbol&&n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement("span",{className:"slds-icon_container",title:e.assistiveText},n.a.createElement(m.a,{className:A()("slds-icon slds-icon_small slds-icon-text-default",e.iconClassName),sprite:"utility",symbol:e.symbol}),n.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("h2",{id:M,className:"slds-popover_prompt__heading"},"Prompt title"),n.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))},R=[{context:"Prompt",id:"prompt-default",label:"Prompt – default",element:n.a.createElement(q,{symbol:"prompt"})}],z=[{context:"Prompt",id:"top-left",label:"Positioned: top left",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-left"})},{context:"Prompt",id:"top-center",label:"Positioned: top center",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top"})},{context:"Prompt",id:"top-right",label:"Positioned: top right",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-right"})},{context:"Prompt",id:"bottom-right",label:"Positioned: bottom right",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-right"})},{context:"Prompt",id:"bottom-center",label:"Positioned: bottom center",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom"})},{context:"Prompt",id:"bottom-left",label:"Positioned: bottom left",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-left"})},{context:"Prompt",id:"brand-with-footer",label:"Prompt: branded with footer",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",position:"top",showFooter:!0,className:"slds-popover_brand",iconClassName:"slds-popover__icon"})},{context:"Prompt",id:"brand-without-footer",label:"Prompt: branded without footer",demoStyles:F,storybookStyles:!0,element:n.a.createElement(q,{symbol:"prompt",position:"top",className:"slds-popover_brand slds-popover_brand-bottom",iconClassName:"slds-popover__icon"})}],J=l(39),H=o.c.code,V=o.c.h2,$=o.c.h3,U=o.c.h4,Y=o.c.li,G=o.c.p,K=o.c.strong,Q=o.c.ul,X=function(){return Object(a.createElement)(o.b,{},Object(a.createElement)("div",{className:"doc lead"},"A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element."),Object(a.createElement)(s.a,{exampleOnly:!0},Object(g.f)(h,"bottom")),V({id:"About-Popovers"},"About Popovers"),G({},"A popover is used to display contextual information to the user."),G({},"A popover can accept the following nubbin position classes, ",H({},".slds-nubbin_left"),", ",H({},".slds-nubbin_left-top"),", ",H({},".slds-nubbin_left-bottom"),", ",H({},".slds-nubbin_top-left"),", ",H({},".slds-nubbin_top-right"),", ",H({},".slds-nubbin_right-top"),", ",H({},".slds-nubbin_right-bottom"),", ",H({},".slds-nubbin_bottom-left"),", ",H({},".slds-nubbin_bottom-right"),"."),$({id:"Accessibility"},"Accessibility"),U({id:"Notable-features"},"Notable features"),Q({},Y({},"Popovers ",K({},"must")," come with a triggering button"),Y({},"They ",K({},"must")," have at least one focusable element inside"),Y({},"They ",K({},"should")," be implemented as a keyboard focus trap"),Y({},"When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there"),Y({},"Pressing the Escape the key as well as clicking the close button should close the Popover"),Y({},"User focus should be placed back on the triggering button when the popover is closed")),G({},"Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present ",K({},"in addition")," and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You ",K({},"should not")," move a user's focus without their expressed intent."),U({id:"Notable-attributes"},"Notable attributes"),Q({},Y({},"The Popover element should have ",H({},'role="dialog"')," applied"),Y({},"The ",H({},"dialog")," should be labelled, this can be achieved in two ways:",Q({},Y({},"Apply the ",H({},"aria-labelledby")," attribute to the ",H({},"dialog")," element and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the ",H({},"dialog"),")"),Y({},"If no Heading element is present, use the ",H({},"aria-label")," attribute and set the value to be a meaningful title of the ",H({},"dialog")))),Y({},"The ",H({},"dialog")," should be described where possible. This can be achieved by applying the ",H({},"aria-describedby")," attribute to the ",H({},"dialog")," element and set the value to be the id of the Popover body"),Y({},"The triggering element ",K({},"must")," have ",H({},'aria-haspopup="true"')," when the popover is opened and ",H({},'aria-haspopup="false"')," when the popover is closed")),V({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(g.f)(d.b)),$({id:"With-Header"},"With Header"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"header")),$({id:"With-Footer"},"With Footer"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"footer")),$({id:"With-Badge"},"With Badge"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"badge")),$({id:"Scrolling-region-with-max-height"},"Scrolling region with max-height"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"scrolling")),V({id:"Widths"},"Widths"),$({id:"Small"},"Small"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-small")),$({id:"Medium"},"Medium"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-medium")),$({id:"Large"},"Large"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-large")),$({id:"Full-Width"},"Full Width"),Object(a.createElement)(s.a,null,Object(g.f)(d.c,"width-full-width")),V({id:"Nubbins"},"Nubbins"),$({id:"Left"},"Left"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Left"),Object(a.createElement)(s.a,null,Object(g.f)(h,"left"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Left Top"),Object(a.createElement)(s.a,null,Object(g.f)(h,"left-top"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Left Bottom"),Object(a.createElement)(s.a,null,Object(g.f)(h,"left-bottom")))),$({id:"Right"},"Right"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Right"),Object(a.createElement)(s.a,null,Object(g.f)(h,"right"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Right Top"),Object(a.createElement)(s.a,null,Object(g.f)(h,"right-top"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Right Bottom"),Object(a.createElement)(s.a,null,Object(g.f)(h,"right-bottom")))),$({id:"Top"},"Top"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Top"),Object(a.createElement)(s.a,null,Object(g.f)(h,"top"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Top Left"),Object(a.createElement)(s.a,null,Object(g.f)(h,"top-left"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Top Right"),Object(a.createElement)(s.a,null,Object(g.f)(h,"top-right")))),$({id:"Bottom"},"Bottom"),Object(a.createElement)(c.a,null,Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Bottom"),Object(a.createElement)(s.a,null,Object(g.f)(h,"bottom"))),Object(a.createElement)(r.a,null,Object(a.createElement)("strong",null,"Bottom Left"),Object(a.createElement)(s.a,null,Object(g.f)(h,"bottom-left"))),Object(a.createElement)(r.a,{columnCount:"1"},Object(a.createElement)("strong",null,"Bottom Right"),Object(a.createElement)(s.a,null,Object(g.f)(h,"bottom-right")))),V({id:"Feedback-States"},"Feedback States"),$({id:"Error"},"Error"),Object(a.createElement)(s.a,null,Object(g.f)(f.c)),U({id:"With-Footer-2"},"With Footer"),Object(a.createElement)(s.a,null,Object(g.f)(f.d,"with-footer")),U({id:"With-Bullet-List"},"With Bullet List"),Object(a.createElement)(s.a,null,Object(g.f)(f.d,"with-bullet-list")),$({id:"Warning"},"Warning"),Object(a.createElement)(s.a,null,Object(g.f)(v)),U({id:"With-Footer-3"},"With Footer"),Object(a.createElement)(s.a,null,Object(g.f)(N,"with-footer")),V({id:"Examples"},"Examples"),$({id:"Walkthrough"},"Walkthrough"),Object(a.createElement)(s.a,null,Object(g.f)(j)),U({id:"Micro-Setup"},"Micro Setup"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup")),U({id:"Micro-Setup-Alternate"},"Micro Setup - Alternate"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup-alternate")),U({id:"Micro-Setup-In-Page"},"Micro Setup - In Page"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup-in-page")),U({id:"Micro-Setup-Inline-Form"},"Micro Setup - Inline Form"),Object(a.createElement)(s.a,null,Object(g.f)(w,"micro-setup-inline-form")),U({id:"Action"},"Action"),Object(a.createElement)(s.a,null,Object(g.f)(w,"action-popover")),U({id:"Action-With-Heading"},"Action - With Heading"),Object(a.createElement)(s.a,null,Object(g.f)(w,"action-popover-heading")),U({id:"Action-With-Link"},"Action - With Link"),Object(a.createElement)(s.a,null,Object(g.f)(w,"action-popover-with-link")),$({id:"Feature"},"Feature"),Object(a.createElement)(s.a,null,Object(g.f)(P)),U({id:"With-icon-and-text"},"With icon and text"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-text")),U({id:"With-icon-header-and-text"},"With icon, header, and text"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-header-text")),U({id:"With-icon-header-text-and-link"},"With icon, header, text and link"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-header-text-link")),U({id:"With-icon-header-text-and-footer"},"With icon, header, text and footer"),Object(a.createElement)(s.a,null,Object(g.f)(S,"icon-header-text-footer")),$({id:"Record-Preview-Panel"},"Record Preview Panel"),Object(a.createElement)(s.a,null,Object(g.f)(T)),$({id:"Prompt"},"Prompt"),Object(a.createElement)(s.a,null,Object(g.f)(R)),U({id:"Positioned-top-left"},"Positioned top left"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-left")),U({id:"Positioned-top-center"},"Positioned top center"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-center")),U({id:"Positioned-top-right"},"Positioned top right"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-right")),U({id:"Positioned-bottom-right"},"Positioned bottom right"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-right")),U({id:"Positioned-bottom-center"},"Positioned bottom center"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-center")),U({id:"Positioned-bottom-left"},"Positioned bottom left"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-left")),U({id:"With-brand-color-and-footer"},"With brand color and footer"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-with-footer")),U({id:"With-brand-color-no-footer"},"With brand color - no footer"),Object(a.createElement)(s.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-without-footer")),V({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(i.a,{header:"A Note About z-index"},Object(a.createElement)("p",null,"By default, Popovers use the ",Object(a.createElement)("code",null,"$z-index-dialog")," (",Object(a.createElement)("a",{href:"/design-tokens/#category-z-index"},"value of 6000"),") token. This allows the Popover to appear above the element that triggered it, and in the vast majority of cases should work well out of the box. However, depending on where the Popover code lives when it's triggered, layout issues could arise."),Object(a.createElement)("p",null,"For this particular use case, the ",Object(a.createElement)("code",null,"--slds-c-popover-position-zindex")," ",Object(a.createElement)("a",{href:"/platforms/lightning/styling-hooks/"},"Styling Hook")," allows developers to change the z-index value. ",Object(a.createElement)("strong",null,"Please note"),": when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.")),Object(a.createElement)(J.a,{name:"popovers",type:"component"}))},Z=function(){return Object(o.a)(X())}}});

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-bar/docs.mdx.js"]=function(e){function t(t){for(var r,a,o=t[0],i=t[1],s=t[2],m=0,p=[];m<o.length;m++)a=o[m],Object.prototype.hasOwnProperty.call(l,a)&&l[a]&&p.push(l[a][0]),l[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);p.length;)p.shift()();return n.push.apply(n,s\|\|[]),c()}function c(){for(var e,t=0;t<n.length;t++){for(var c=n[t],r=!0,o=1;o<c.length;o++){var i=c[o];0!==l[i]&&(r=!1)}r&&(n.splice(t--,1),e=a(a.s=c[0]))}return e}var r={},l={57:0},n=[];function a(t){if(r[t])return r[t].exports;var c=r[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,a),c.l=!0,c.exports}a.m=e,a.c=r,a.d=function(e,t,c){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:c})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(a.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(c,r,function(t){return e[t]}.bind(null,r));return c},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=o.push.bind(o);o.push=t,o=o.slice();for(var s=0;s<o.length;s++)t(o[s]);var u=i;return n.push([772,0]),c()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},772:function(e,t,c){"use strict";c.r(t),c.d(t,"getElement",(function(){return O})),c.d(t,"getContents",(function(){return j}));var r=c(0),l=c.n(r),n=c(4),a=c(2),o=c(28),i=c(45),s=(c(14),c(1)),u=c(72),m=c(60),p=l.a.createElement(m.a,{value:"25",isVertical:!0}),b=[{id:"zero",label:"0% complete",element:l.a.createElement(m.a,{value:"0",isVertical:!0})},{id:"25",label:"25% complete",element:l.a.createElement(m.a,{value:"25",isVertical:!0})},{id:"50",label:"50% complete",element:l.a.createElement(m.a,{value:"50",isVertical:!0})},{id:"75",label:"75% complete",element:l.a.createElement(m.a,{value:"75",isVertical:!0})},{id:"100",label:"100% complete",element:l.a.createElement(m.a,{value:"100",isVertical:!0})}],d=n.c.h2,f=n.c.h3,O=function(){return Object(r.createElement)(n.b,{},Object(r.createElement)("div",{className:"doc lead"},"A progress bar component communicates to the user the progress of a particular process."),Object(r.createElement)(a.a,{exampleOnly:!0},Object(s.f)(u.c,"progress-bar-descriptive")),d({id:"About-Progress-Bar"},"About Progress Bar"),d({id:"Base"},"Base"),Object(r.createElement)(a.a,null,Object(s.f)(u.b)),f({id:"States"},"States"),f({id:"0percent-complete"},"0% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"zero")),f({id:"25percent-complete"},"25% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"25")),f({id:"50percent-complete"},"50% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"50")),f({id:"75percent-complete"},"75% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"75")),f({id:"100percent-complete"},"100% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"100")),f({id:"Success-Color"},"Success Color"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"success")),d({id:"Examples"},"Examples"),f({id:"Descriptive-Progress-Bar"},"Descriptive Progress Bar"),Object(r.createElement)(a.a,null,Object(s.f)(u.c,"progress-bar-descriptive")),d({id:"Vertical"},"Vertical"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(p)),d({id:"States-2"},"States"),f({id:"0percent-complete-2"},"0% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"zero")),f({id:"25percent-complete-2"},"25% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"25")),f({id:"50percent-complete-2"},"50% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"50")),f({id:"75percent-complete-2"},"75% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"75")),f({id:"100percent-complete-2"},"100% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"100")),d({id:"Modifiers"},"Modifiers"),f({id:"Radius"},"Radius"),Object(r.createElement)(a.a,null,Object(s.f)(u.c,"circular")),f({id:"Thickness"},"Thickness"),Object(r.createElement)(i.a,null,Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"X-Small"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-x-small"))),Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"Small"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-small"))),Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"Medium"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-medium"))),Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"Large"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-large")))))},j=function(){return Object(n.a)(O())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-bar/docs.mdx.js"]=function(e){function t(t){for(var r,a,o=t[0],i=t[1],s=t[2],m=0,p=[];m<o.length;m++)a=o[m],Object.prototype.hasOwnProperty.call(l,a)&&l[a]&&p.push(l[a][0]),l[a]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);for(u&&u(t);p.length;)p.shift()();return n.push.apply(n,s\|\|[]),c()}function c(){for(var e,t=0;t<n.length;t++){for(var c=n[t],r=!0,o=1;o<c.length;o++){var i=c[o];0!==l[i]&&(r=!1)}r&&(n.splice(t--,1),e=a(a.s=c[0]))}return e}var r={},l={57:0},n=[];function a(t){if(r[t])return r[t].exports;var c=r[t]={i:t,l:!1,exports:{}};return e[t].call(c.exports,c,c.exports,a),c.l=!0,c.exports}a.m=e,a.c=r,a.d=function(e,t,c){a.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:c})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(a.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(c,r,function(t){return e[t]}.bind(null,r));return c},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=o.push.bind(o);o.push=t,o=o.slice();for(var s=0;s<o.length;s++)t(o[s]);var u=i;return n.push([772,0]),c()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},772:function(e,t,c){"use strict";c.r(t),c.d(t,"getElement",(function(){return O})),c.d(t,"getContents",(function(){return j}));var r=c(0),l=c.n(r),n=c(4),a=c(2),o=c(28),i=c(45),s=(c(14),c(1)),u=c(73),m=c(60),p=l.a.createElement(m.a,{value:"25",isVertical:!0}),b=[{id:"zero",label:"0% complete",element:l.a.createElement(m.a,{value:"0",isVertical:!0})},{id:"25",label:"25% complete",element:l.a.createElement(m.a,{value:"25",isVertical:!0})},{id:"50",label:"50% complete",element:l.a.createElement(m.a,{value:"50",isVertical:!0})},{id:"75",label:"75% complete",element:l.a.createElement(m.a,{value:"75",isVertical:!0})},{id:"100",label:"100% complete",element:l.a.createElement(m.a,{value:"100",isVertical:!0})}],d=n.c.h2,f=n.c.h3,O=function(){return Object(r.createElement)(n.b,{},Object(r.createElement)("div",{className:"doc lead"},"A progress bar component communicates to the user the progress of a particular process."),Object(r.createElement)(a.a,{exampleOnly:!0},Object(s.f)(u.c,"progress-bar-descriptive")),d({id:"About-Progress-Bar"},"About Progress Bar"),d({id:"Base"},"Base"),Object(r.createElement)(a.a,null,Object(s.f)(u.b)),f({id:"States"},"States"),f({id:"0percent-complete"},"0% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"zero")),f({id:"25percent-complete"},"25% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"25")),f({id:"50percent-complete"},"50% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"50")),f({id:"75percent-complete"},"75% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"75")),f({id:"100percent-complete"},"100% complete"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"100")),f({id:"Success-Color"},"Success Color"),Object(r.createElement)(a.a,null,Object(s.f)(u.d,"success")),d({id:"Examples"},"Examples"),f({id:"Descriptive-Progress-Bar"},"Descriptive Progress Bar"),Object(r.createElement)(a.a,null,Object(s.f)(u.c,"progress-bar-descriptive")),d({id:"Vertical"},"Vertical"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(p)),d({id:"States-2"},"States"),f({id:"0percent-complete-2"},"0% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"zero")),f({id:"25percent-complete-2"},"25% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"25")),f({id:"50percent-complete-2"},"50% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"50")),f({id:"75percent-complete-2"},"75% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"75")),f({id:"100percent-complete-2"},"100% complete"),Object(r.createElement)(a.a,{demoStyles:"height: 200px;"},Object(s.f)(b,"100")),d({id:"Modifiers"},"Modifiers"),f({id:"Radius"},"Radius"),Object(r.createElement)(a.a,null,Object(s.f)(u.c,"circular")),f({id:"Thickness"},"Thickness"),Object(r.createElement)(i.a,null,Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"X-Small"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-x-small"))),Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"Small"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-small"))),Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"Medium"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-medium"))),Object(r.createElement)(o.a,null,Object(r.createElement)("strong",null,"Large"),Object(r.createElement)(a.a,{toggleCode:!1},Object(s.f)(u.c,"thickness-large")))))},j=function(){return Object(n.a)(O())}}});

package/__internal/chunked/docs/ui/components/progress-ring/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-ring/docs.mdx.js"]=function(e){function t(t){for(var n,l,o=t[0],s=t[1],c=t[2],g=0,d=[];g<o.length;g++)l=o[g],Object.prototype.hasOwnProperty.call(i,l)&&i[l]&&d.push(i[l][0]),i[l]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(p&&p(t);d.length;)d.shift()();return a.push.apply(a,c\|\|[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],n=!0,o=1;o<r.length;o++){var s=r[o];0!==i[s]&&(n=!1)}n&&(a.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},i={59:0},a=[];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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var p=s;return a.push([776,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},776:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return E})),r.d(t,"getContents",(function(){return O}));var n=r(0),i=r.n(n),a=r(4),l=r(2),o=(r(27),r(14)),s=r(1),c=r(76),p=r(11),g=i.a.createElement(c.a,{percent:100}),d=[{id:"progress-ring-partially-drained",label:"Partially Drained",element:i.a.createElement(c.a,{percent:88})},{id:"progress-ring-partially-filled",label:"Partially Filled",element:i.a.createElement(c.a,{percent:40,isFilling:!0})},{id:"progress-ring-warning",label:"Partially Drained With Warning Icon",element:i.a.createElement(c.a,{percent:20,isWarning:!0},i.a.createElement(p.a,{symbol:"warning",title:"Warning",assistiveText:"Warning"}))},{id:"progress-ring-partially-filled-warning",label:"Partially Filled with Warning Icon",element:i.a.createElement(c.a,{percent:75,isFilling:!0,isWarning:!0},i.a.createElement(p.a,{symbol:"warning",title:"Warning",assistiveText:"Warning"}))},{id:"progress-ring-expired",label:"With Expired Icon",element:i.a.createElement(c.a,{percent:0,isExpired:!0},i.a.createElement(p.a,{symbol:"error",title:"Expired",assistiveText:"Expired"}))},{id:"progress-ring-complete",label:"Complete",element:i.a.createElement(c.a,{percent:100,isComplete:!0},i.a.createElement(p.a,{symbol:"check",title:"Complete",assistiveText:"Complete"}))},{id:"progress-ring-large",label:"Large Size",element:i.a.createElement(c.a,{percent:100,className:"slds-progress-ring_large"})},{id:"progress-ring-active-step",label:"Active Step",element:i.a.createElement(c.a,{percent:100,isActiveStep:!0})},{id:"progress-ring-theme-warning",label:"Theme: Warning",element:i.a.createElement(c.a,{percent:100,isWarning:!0})},{id:"progress-ring-theme-expired",label:"Theme: Expired",element:i.a.createElement(c.a,{percent:100,isExpired:!0})},{id:"progress-ring-theme-complete",label:"Theme: Complete",element:i.a.createElement(c.a,{percent:100,isComplete:!0})}],u=a.c.code,h=a.c.h2,m=a.c.h3,f=a.c.h4,b=a.c.li,y=a.c.p,v=a.c.ul,E=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"lead doc"},"Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure."),Object(n.createElement)(l.a,{exampleOnly:!0},Object(s.f)(d,"progress-ring-partially-filled")),h({id:"About-Progress-Ring"},"About Progress Ring"),y({},"The Progress Ring component renders a svg-based progress ring."),y({},"Content (typically iconography) can be rendered inside the progress ring. For the current supported size of this progress ring, xxs sized icons should be used."),Object(n.createElement)(o.a,{type:"note",header:"Styling Note"},Object(n.createElement)("p",null,"If you plan to override the size properties of Progress Ring, use discrete values rather than percentages (ie. 4rem, not 40%). The inner structure of Progress Ring requires the container dimensions to remain square with an 1:1 aspect ratio, which isn't achievable with percentage values in most contexts.")),m({id:"Implementation-Guidelines"},"Implementation Guidelines"),f({id:"Defining-Completeness"},"Defining Completeness"),y({},"The 'completeness' of the Progress Ring is indicated by the circular shape (pie slice), which is a svg shape of an arc."),y({},"The path declaration looks complex, but is actually pretty straightforward, with just a few parts that need customization."),y({},"The breakdown of the progress ring's ",u({},"d")," attribute can be broken down like so:"),y({},u({},'d="M 1 0 A 1 1 0 {isLong} 1 {arcX} {arcY} L 0 0"')),v({},b({},"isLong: a binary flag if the arc should 'take the long path' (used for > 50% fill)"),b({},"arcX: the arc's x position, formulated by Math.cos(2 * Math.PI * fillPercent)"),b({},"arcY: the arc's y position, formulated by Math.sin(2 * Math.PI * fillPercent)")),y({},"These calculations work in accordance with the defined svg viewBox, which goes from -1 to 1, on both x and y axis."),f({id:"Content"},"Content"),y({},"The Progress Ring is currently designed to display any icon from our icon set."),m({id:"Accessibility"},"Accessibility"),y({},u({},".slds-progress-ring__progress")," is the visual indicator of progress and needs proper aria roles and settings:"),v({},b({},u({},"role")," : ",u({},"progressbar")),b({},u({},"aria-valuemin")," : ",u({},"0")," // the smallest valid value"),b({},u({},"aria-valuemax")," : ",u({},"100")," // the largest valid value"),b({},u({},"aria-valuenow")," : ",u({},"{fill}")," // the current fill value")),y({},"Proper accessibility guidelines should be followed on any icons used within this Progress Ring component."),h({id:"Base"},"Base"),Object(n.createElement)(l.a,null,Object(s.f)(g)),h({id:"Examples"},"Examples"),m({id:"Partially-Drained"},"Partially Drained"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-partially-drained")),m({id:"Partially-Drained-with-Warning-Icon"},"Partially Drained with Warning Icon"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-warning")),m({id:"Partially-Filled"},"Partially Filled"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-partially-filled")),m({id:"Partially-Filled-with-Warning-Icon"},"Partially Filled with Warning Icon"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-partially-filled-warning")),m({id:"With-Expired-Icon"},"With Expired Icon"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-expired")),m({id:"Complete"},"Complete"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-complete")),m({id:"Large-Size"},"Large Size"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-large")),m({id:"Active-Step"},"Active Step"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-active-step")),y({},"Set the color of the ring to the active step color."),m({id:"Theme-Warning"},"Theme - Warning"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-theme-warning")),y({},"Set the color of the ring to the warning color."),m({id:"Theme-Expired"},"Theme - Expired"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-theme-expired")),y({},"Set the color of the ring to the expired color."),m({id:"Theme-Complete"},"Theme - Complete"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-theme-complete")),y({},"Set the color of the ring to the complete color and solid fill."))},O=function(){return Object(a.a)(E())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-ring/docs.mdx.js"]=function(e){function t(t){for(var n,l,o=t[0],s=t[1],c=t[2],g=0,d=[];g<o.length;g++)l=o[g],Object.prototype.hasOwnProperty.call(i,l)&&i[l]&&d.push(i[l][0]),i[l]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);for(p&&p(t);d.length;)d.shift()();return a.push.apply(a,c\|\|[]),r()}function r(){for(var e,t=0;t<a.length;t++){for(var r=a[t],n=!0,o=1;o<r.length;o++){var s=r[o];0!==i[s]&&(n=!1)}n&&(a.splice(t--,1),e=l(l.s=r[0]))}return e}var n={},i={59:0},a=[];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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],s=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var p=s;return a.push([776,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},776:function(e,t,r){"use strict";r.r(t),r.d(t,"getElement",(function(){return E})),r.d(t,"getContents",(function(){return O}));var n=r(0),i=r.n(n),a=r(4),l=r(2),o=(r(27),r(14)),s=r(1),c=r(77),p=r(11),g=i.a.createElement(c.a,{percent:100}),d=[{id:"progress-ring-partially-drained",label:"Partially Drained",element:i.a.createElement(c.a,{percent:88})},{id:"progress-ring-partially-filled",label:"Partially Filled",element:i.a.createElement(c.a,{percent:40,isFilling:!0})},{id:"progress-ring-warning",label:"Partially Drained With Warning Icon",element:i.a.createElement(c.a,{percent:20,isWarning:!0},i.a.createElement(p.a,{symbol:"warning",title:"Warning",assistiveText:"Warning"}))},{id:"progress-ring-partially-filled-warning",label:"Partially Filled with Warning Icon",element:i.a.createElement(c.a,{percent:75,isFilling:!0,isWarning:!0},i.a.createElement(p.a,{symbol:"warning",title:"Warning",assistiveText:"Warning"}))},{id:"progress-ring-expired",label:"With Expired Icon",element:i.a.createElement(c.a,{percent:0,isExpired:!0},i.a.createElement(p.a,{symbol:"error",title:"Expired",assistiveText:"Expired"}))},{id:"progress-ring-complete",label:"Complete",element:i.a.createElement(c.a,{percent:100,isComplete:!0},i.a.createElement(p.a,{symbol:"check",title:"Complete",assistiveText:"Complete"}))},{id:"progress-ring-large",label:"Large Size",element:i.a.createElement(c.a,{percent:100,className:"slds-progress-ring_large"})},{id:"progress-ring-active-step",label:"Active Step",element:i.a.createElement(c.a,{percent:100,isActiveStep:!0})},{id:"progress-ring-theme-warning",label:"Theme: Warning",element:i.a.createElement(c.a,{percent:100,isWarning:!0})},{id:"progress-ring-theme-expired",label:"Theme: Expired",element:i.a.createElement(c.a,{percent:100,isExpired:!0})},{id:"progress-ring-theme-complete",label:"Theme: Complete",element:i.a.createElement(c.a,{percent:100,isComplete:!0})}],u=a.c.code,h=a.c.h2,m=a.c.h3,f=a.c.h4,b=a.c.li,y=a.c.p,v=a.c.ul,E=function(){return Object(n.createElement)(a.b,{},Object(n.createElement)("div",{className:"lead doc"},"Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure."),Object(n.createElement)(l.a,{exampleOnly:!0},Object(s.f)(d,"progress-ring-partially-filled")),h({id:"About-Progress-Ring"},"About Progress Ring"),y({},"The Progress Ring component renders a svg-based progress ring."),y({},"Content (typically iconography) can be rendered inside the progress ring. For the current supported size of this progress ring, xxs sized icons should be used."),Object(n.createElement)(o.a,{type:"note",header:"Styling Note"},Object(n.createElement)("p",null,"If you plan to override the size properties of Progress Ring, use discrete values rather than percentages (ie. 4rem, not 40%). The inner structure of Progress Ring requires the container dimensions to remain square with an 1:1 aspect ratio, which isn't achievable with percentage values in most contexts.")),m({id:"Implementation-Guidelines"},"Implementation Guidelines"),f({id:"Defining-Completeness"},"Defining Completeness"),y({},"The 'completeness' of the Progress Ring is indicated by the circular shape (pie slice), which is a svg shape of an arc."),y({},"The path declaration looks complex, but is actually pretty straightforward, with just a few parts that need customization."),y({},"The breakdown of the progress ring's ",u({},"d")," attribute can be broken down like so:"),y({},u({},'d="M 1 0 A 1 1 0 {isLong} 1 {arcX} {arcY} L 0 0"')),v({},b({},"isLong: a binary flag if the arc should 'take the long path' (used for > 50% fill)"),b({},"arcX: the arc's x position, formulated by Math.cos(2 * Math.PI * fillPercent)"),b({},"arcY: the arc's y position, formulated by Math.sin(2 * Math.PI * fillPercent)")),y({},"These calculations work in accordance with the defined svg viewBox, which goes from -1 to 1, on both x and y axis."),f({id:"Content"},"Content"),y({},"The Progress Ring is currently designed to display any icon from our icon set."),m({id:"Accessibility"},"Accessibility"),y({},u({},".slds-progress-ring__progress")," is the visual indicator of progress and needs proper aria roles and settings:"),v({},b({},u({},"role")," : ",u({},"progressbar")),b({},u({},"aria-valuemin")," : ",u({},"0")," // the smallest valid value"),b({},u({},"aria-valuemax")," : ",u({},"100")," // the largest valid value"),b({},u({},"aria-valuenow")," : ",u({},"{fill}")," // the current fill value")),y({},"Proper accessibility guidelines should be followed on any icons used within this Progress Ring component."),h({id:"Base"},"Base"),Object(n.createElement)(l.a,null,Object(s.f)(g)),h({id:"Examples"},"Examples"),m({id:"Partially-Drained"},"Partially Drained"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-partially-drained")),m({id:"Partially-Drained-with-Warning-Icon"},"Partially Drained with Warning Icon"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-warning")),m({id:"Partially-Filled"},"Partially Filled"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-partially-filled")),m({id:"Partially-Filled-with-Warning-Icon"},"Partially Filled with Warning Icon"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-partially-filled-warning")),m({id:"With-Expired-Icon"},"With Expired Icon"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-expired")),m({id:"Complete"},"Complete"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-complete")),m({id:"Large-Size"},"Large Size"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-large")),m({id:"Active-Step"},"Active Step"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-active-step")),y({},"Set the color of the ring to the active step color."),m({id:"Theme-Warning"},"Theme - Warning"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-theme-warning")),y({},"Set the color of the ring to the warning color."),m({id:"Theme-Expired"},"Theme - Expired"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-theme-expired")),y({},"Set the color of the ring to the expired color."),m({id:"Theme-Complete"},"Theme - Complete"),Object(n.createElement)(l.a,null,Object(s.f)(d,"progress-ring-theme-complete")),y({},"Set the color of the ring to the complete color and solid fill."))},O=function(){return Object(a.a)(E())}}});

package/__internal/chunked/docs/ui/components/setup-assistant/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/setup-assistant/docs.mdx.js"]=function(e){function t(t){for(var r,i,o=t[0],l=t[1],c=t[2],p=0,d=[];p<o.length;p++)i=o[p],Object.prototype.hasOwnProperty.call(s,i)&&s[i]&&d.push(s[i][0]),s[i]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(u&&u(t);d.length;)d.shift()();return a.push.apply(a,c\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],r=!0,o=1;o<n.length;o++){var l=n[o];0!==s[l]&&(r=!1)}r&&(a.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},s={68:0},a=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var u=l;return a.push([730,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},730:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return X})),n.d(t,"getContents",(function(){return Z}));var r=n(0),s=n.n(r),a=n(4),i=n(2),o=(n(27),n(15)),l=n(14),c=n(87),u=n(5),p=n.n(u),d=n(3),m=n.n(d),f=n(11),b=n(12),h=n(100),y=n(76);function g(e){return(g="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 v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function E(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function O(e,t){return(O=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function _(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=S(e);if(t){var s=S(this).constructor;n=Reflect.construct(r,arguments,s)}else n=r.apply(this,arguments);return j(this,n)}}function j(e,t){if(t&&("object"===g(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function S(e){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var w=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&O(e,t)}(i,e);var t,n,r,a=_(i);function i(){return v(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.title,n=e.description,r=e.action,a=e.duration,i=e.stepProgress,o=e.isActiveStep,l=e.referenceId,c=e.isOpen,u=r&&("button"===r.type?s.a.createElement(b.a,{isOutlineBrand:!0},r.title):"toggle"===r.type?s.a.createElement(h.a,{title:r.title,isBare:!0,checked:r.checked,labelTextOn:"On",labelTextOff:"Off"}):s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},r.title)),d=i&&(i.isComplete?s.a.createElement(y.a,{className:"slds-progress-ring_large",percent:100,isComplete:!0},s.a.createElement(f.a,{symbol:"check",title:"Complete",assistiveText:"Complete"})):s.a.createElement(y.a,{className:"slds-progress-ring_large",percent:o?i.percentage:0,isActiveStep:o,isFilling:!0},i.number)),m=s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-setup-assistant__step-summary-content slds-media__body"},s.a.createElement("h3",{className:"slds-setup-assistant__step-summary-title slds-text-heading_small"},l?s.a.createElement(b.a,{className:"slds-button_reset","aria-controls":l,"aria-expanded":c?"true":"false"},t):t),s.a.createElement("p",null,n)),s.a.createElement("div",{className:"slds-media__figure slds-media__figure_reverse"},u,a&&s.a.createElement("p",{className:p()("slds-text-align_right","slds-text-color_weak",{"slds-p-top_medium":r})},a)));return s.a.createElement("div",{className:"slds-setup-assistant__step-summary"},i?s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},d),s.a.createElement("div",{className:"slds-media__body slds-m-top_x-small"},m)):m)}}])&&E(t.prototype,n),r&&E(t,r),Object.defineProperty(t,"prototype",{writable:!1}),i}(s.a.Component);w.propTypes={title:m.a.string.isRequired,description:m.a.string.isRequired,action:m.a.object,duration:m.a.string,stepProgress:m.a.object,isActiveStep:m.a.bool},w.defaultProps={title:"Configure user settings for this org",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."};var P=w,k=n(58),x=n(101);function A(e){return(A="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 T(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function N(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function C(e,t){return(C=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function B(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=R(e);if(t){var s=R(this).constructor;n=Reflect.construct(r,arguments,s)}else n=r.apply(this,arguments);return L(this,n)}}function L(e,t){if(t&&("object"===A(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var I=[{complete:!0,title:"Turn on Lightning for all users.",action:{type:"toggle",title:"Turn on Lightning for all users",checked:!0}},{active:!0,title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",action:{type:"link",title:"View in Trailhead"}},{title:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"}}],q=function(e){return e.map((function(e,t){return s.a.createElement(k.b,{key:"progress-step-".concat(t),done:e.complete,hasSuccessMarker:e.complete,active:e.active,assistiveText:e.title},s.a.createElement("div",{className:"slds-size_3-of-4"},e.title),s.a.createElement("div",{className:"slds-grid slds-grid_align-end slds-size_1-of-4"},(n=e.action)&&"button"===n.type?s.a.createElement(b.a,{isOutlineBrand:!0},n.title):"toggle"===n.type?s.a.createElement(h.a,{title:n.title,isBare:!0,checked:n.checked,labelTextOn:"On",labelTextOff:"Off"}):s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},n.title)));var n}))},D=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&C(e,t)}(i,e);var t,n,r,a=B(i);function i(){return T(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=p()("slds-setup-assistant__step-detail",this.props.className);return s.a.createElement("div",{className:e},s.a.createElement(k.a,{value:"50",hasBorders:!0,hasSuccessBar:!0},q(I)),s.a.createElement(x.a,{theme:"light"},s.a.createElement("p",null,"It looks as if duplicates exist for this lead."," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates"))))}}])&&N(t.prototype,n),r&&N(t,r),Object.defineProperty(t,"prototype",{writable:!1}),i}(s.a.Component);D.propTypes={className:m.a.string};var H=D,U=n(72),V=[{title:"Add Users to Your Org",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"},duration:"4 mins",stepProgress:{isComplete:!0,number:"1"}},{title:"Create Profiles for Your Users",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Profiles"},stepProgress:{isComplete:!1,number:"2",percentage:33},isActiveStep:!0,isOpen:!0},{title:"Learn How to Use Profiles to Control Visibility",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"View on Trailhead"},duration:"15 mins",stepProgress:{isComplete:!0,number:"3",percentage:"0"}},{title:"Turn On Tracking for Profiles",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"toggle",title:"Turn on tracking for profiles"},stepProgress:{isComplete:!1,number:"4",percentage:"0"}},{title:"Setup Einstein Visibility for Admins",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"Watch Video"},stepProgress:{isComplete:!1,number:"5",percentage:"0"}}],M=function(e){return s.a.createElement("li",{className:"slds-setup-assistant__item"},s.a.createElement("article",{className:"slds-setup-assistant__step"},e.children))},z=function(e){return s.a.createElement("ol",{className:"slds-setup-assistant"},e.children)},F=function(e){var t=e.isBase,n=e.stepsHaveProgress,r=e.stepsAreExpandable;return s.a.createElement(z,null,t&&function(e,t){return e.map((function(e,n){return s.a.createElement(M,{key:"base-step-".concat(e.title,"-").concat(t,"-").concat(n)},s.a.createElement(P,{title:e.title,stepProgress:t&&e.stepProgress,action:e.action,duration:e.duration}))}))}(V,n),r&&V.map((function(e,t){return s.a.createElement(M,{key:"expand-step-".concat(e.title,"-").concat(t)},s.a.createElement(c.a,{className:p()({"slds-is-open":e.isOpen})},s.a.createElement(c.b,{className:"slds-m-top_x-small",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen,summaryTitle:e.title}),s.a.createElement("div",{className:"slds-container_fluid"},s.a.createElement(c.d,null,s.a.createElement(P,{title:e.title,isActiveStep:e.isActiveStep,stepProgress:e.stepProgress,duration:e.duration\|\|"10 mins",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen})),s.a.createElement(c.c,{referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen},s.a.createElement(H,null)))))})))},J=function(e){return s.a.createElement("section",{className:"slds-card"},s.a.createElement("header",{className:"slds-theme_shade slds-p-around_medium slds-m-bottom_small"},s.a.createElement(U.a,{barClassName:"slds-progress-bar_circular",label:"Complete all the steps below to finish setting up Einstein Visibility",value:"50"})),s.a.createElement(s.a.Fragment,null,e.children))},W=a.c.a,Y=a.c.h2,G=a.c.li,K=a.c.p,Q=a.c.ul,X=function(){return Object(r.createElement)(a.b,{},Object(r.createElement)("div",{className:"doc lead"},"Setup Assistant provides Administrators with a centralized list of tasks for onboarding organizations, clouds, or features within the Salesforce Platform. It provides a prescriptive and detailed guide for learning, configuring, and importing data which can take hours to days."),Object(r.createElement)(i.a,{exampleOnly:!0},Object(r.createElement)(F,{isBase:!0,stepsHaveProgress:!0})),Y({id:"About-Setup-Assistant"},"About Setup Assistant"),K({},"Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos."),Q({},G({},"The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant)."),G({},"Use links to navigate to Trailheads, articles, Help & Training documentation, and videos."),G({},"Use the Outline Brand Button to open LSF or configuration pages."),G({},"Estimated time is optional.")),Y({id:"Base"},"Base"),K({},"Basic list of learning and task links that do not require progress tracking and do not have sequential steps."),Object(r.createElement)(o.a,{title:"Setup Assistant Base"},Object(r.createElement)(i.a,null,Object(r.createElement)(F,{isBase:!0}))),Y({id:"With-Step-Progress"},"With Step Progress"),K({},"List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the ",W({href:"../progress-ring"},"Progress Ring")," component."),Object(r.createElement)(o.a,{title:"Setup Assistant Base steps with Progress"},Object(r.createElement)(i.a,null,Object(r.createElement)(F,{isBase:!0,stepsHaveProgress:!0}))),Y({id:"Hub-with-Expandable-Steps"},"Hub with Expandable Steps"),K({},"Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional."),K({},"Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"Since both the chevron toggle and the step's title act as a trigger to open and close the step's detail, ensure both the icon button and the title include"," ",Object(r.createElement)("code",null,"aria-controls=[uniqueId]")," where the ",Object(r.createElement)("code",null,"uniqueId")," matches the "," ",Object(r.createElement)("code",null,"id")," on the"," ",Object(r.createElement)("code",null,"<div>")," with ",Object(r.createElement)("code",null,'class="slds-summary-detail__content"'),".")),Object(r.createElement)(o.a,{title:"Setup Assistant Hub Expandable"},Object(r.createElement)(i.a,null,Object(r.createElement)(F,{stepsAreExpandable:!0}))),Y({id:"In-a-Card"},"In a Card"),K({},"If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the ",W({href:"../progress-bar"},"Descriptive Progress Bar")),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"In order to prevent duplicating information for screen reader users, the percentage info on the top of the progress bar is hidden using the"," ",Object(r.createElement)("code",null,"slds-assistive-text")," class.")),Object(r.createElement)(o.a,{title:"Setup Assistant Hub Expandable"},Object(r.createElement)(i.a,null,Object(r.createElement)(J,null,Object(r.createElement)(F,{stepsAreExpandable:!0})))))},Z=function(){return Object(a.a)(X())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/setup-assistant/docs.mdx.js"]=function(e){function t(t){for(var r,i,o=t[0],l=t[1],c=t[2],p=0,d=[];p<o.length;p++)i=o[p],Object.prototype.hasOwnProperty.call(s,i)&&s[i]&&d.push(s[i][0]),s[i]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(u&&u(t);d.length;)d.shift()();return a.push.apply(a,c\|\|[]),n()}function n(){for(var e,t=0;t<a.length;t++){for(var n=a[t],r=!0,o=1;o<n.length;o++){var l=n[o];0!==s[l]&&(r=!1)}r&&(a.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},s={68:0},a=[];function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var u=l;return a.push([730,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},730:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return X})),n.d(t,"getContents",(function(){return Z}));var r=n(0),s=n.n(r),a=n(4),i=n(2),o=(n(27),n(15)),l=n(14),c=n(87),u=n(5),p=n.n(u),d=n(3),m=n.n(d),f=n(11),b=n(12),h=n(100),y=n(77);function g(e){return(g="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 v(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function E(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function O(e,t){return(O=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function _(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=S(e);if(t){var s=S(this).constructor;n=Reflect.construct(r,arguments,s)}else n=r.apply(this,arguments);return j(this,n)}}function j(e,t){if(t&&("object"===g(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function S(e){return(S=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var w=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&O(e,t)}(i,e);var t,n,r,a=_(i);function i(){return v(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.title,n=e.description,r=e.action,a=e.duration,i=e.stepProgress,o=e.isActiveStep,l=e.referenceId,c=e.isOpen,u=r&&("button"===r.type?s.a.createElement(b.a,{isOutlineBrand:!0},r.title):"toggle"===r.type?s.a.createElement(h.a,{title:r.title,isBare:!0,checked:r.checked,labelTextOn:"On",labelTextOff:"Off"}):s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},r.title)),d=i&&(i.isComplete?s.a.createElement(y.a,{className:"slds-progress-ring_large",percent:100,isComplete:!0},s.a.createElement(f.a,{symbol:"check",title:"Complete",assistiveText:"Complete"})):s.a.createElement(y.a,{className:"slds-progress-ring_large",percent:o?i.percentage:0,isActiveStep:o,isFilling:!0},i.number)),m=s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-setup-assistant__step-summary-content slds-media__body"},s.a.createElement("h3",{className:"slds-setup-assistant__step-summary-title slds-text-heading_small"},l?s.a.createElement(b.a,{className:"slds-button_reset","aria-controls":l,"aria-expanded":c?"true":"false"},t):t),s.a.createElement("p",null,n)),s.a.createElement("div",{className:"slds-media__figure slds-media__figure_reverse"},u,a&&s.a.createElement("p",{className:p()("slds-text-align_right","slds-text-color_weak",{"slds-p-top_medium":r})},a)));return s.a.createElement("div",{className:"slds-setup-assistant__step-summary"},i?s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},d),s.a.createElement("div",{className:"slds-media__body slds-m-top_x-small"},m)):m)}}])&&E(t.prototype,n),r&&E(t,r),Object.defineProperty(t,"prototype",{writable:!1}),i}(s.a.Component);w.propTypes={title:m.a.string.isRequired,description:m.a.string.isRequired,action:m.a.object,duration:m.a.string,stepProgress:m.a.object,isActiveStep:m.a.bool},w.defaultProps={title:"Configure user settings for this org",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."};var P=w,k=n(58),x=n(101);function A(e){return(A="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 T(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function N(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function C(e,t){return(C=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function B(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=R(e);if(t){var s=R(this).constructor;n=Reflect.construct(r,arguments,s)}else n=r.apply(this,arguments);return L(this,n)}}function L(e,t){if(t&&("object"===A(t)\|\|"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var I=[{complete:!0,title:"Turn on Lightning for all users.",action:{type:"toggle",title:"Turn on Lightning for all users",checked:!0}},{active:!0,title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",action:{type:"link",title:"View in Trailhead"}},{title:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"}}],q=function(e){return e.map((function(e,t){return s.a.createElement(k.b,{key:"progress-step-".concat(t),done:e.complete,hasSuccessMarker:e.complete,active:e.active,assistiveText:e.title},s.a.createElement("div",{className:"slds-size_3-of-4"},e.title),s.a.createElement("div",{className:"slds-grid slds-grid_align-end slds-size_1-of-4"},(n=e.action)&&"button"===n.type?s.a.createElement(b.a,{isOutlineBrand:!0},n.title):"toggle"===n.type?s.a.createElement(h.a,{title:n.title,isBare:!0,checked:n.checked,labelTextOn:"On",labelTextOff:"Off"}):s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},n.title)));var n}))},D=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&C(e,t)}(i,e);var t,n,r,a=B(i);function i(){return T(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=p()("slds-setup-assistant__step-detail",this.props.className);return s.a.createElement("div",{className:e},s.a.createElement(k.a,{value:"50",hasBorders:!0,hasSuccessBar:!0},q(I)),s.a.createElement(x.a,{theme:"light"},s.a.createElement("p",null,"It looks as if duplicates exist for this lead."," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates"))))}}])&&N(t.prototype,n),r&&N(t,r),Object.defineProperty(t,"prototype",{writable:!1}),i}(s.a.Component);D.propTypes={className:m.a.string};var H=D,U=n(73),V=[{title:"Add Users to Your Org",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"},duration:"4 mins",stepProgress:{isComplete:!0,number:"1"}},{title:"Create Profiles for Your Users",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Profiles"},stepProgress:{isComplete:!1,number:"2",percentage:33},isActiveStep:!0,isOpen:!0},{title:"Learn How to Use Profiles to Control Visibility",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"View on Trailhead"},duration:"15 mins",stepProgress:{isComplete:!0,number:"3",percentage:"0"}},{title:"Turn On Tracking for Profiles",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"toggle",title:"Turn on tracking for profiles"},stepProgress:{isComplete:!1,number:"4",percentage:"0"}},{title:"Setup Einstein Visibility for Admins",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"Watch Video"},stepProgress:{isComplete:!1,number:"5",percentage:"0"}}],M=function(e){return s.a.createElement("li",{className:"slds-setup-assistant__item"},s.a.createElement("article",{className:"slds-setup-assistant__step"},e.children))},z=function(e){return s.a.createElement("ol",{className:"slds-setup-assistant"},e.children)},F=function(e){var t=e.isBase,n=e.stepsHaveProgress,r=e.stepsAreExpandable;return s.a.createElement(z,null,t&&function(e,t){return e.map((function(e,n){return s.a.createElement(M,{key:"base-step-".concat(e.title,"-").concat(t,"-").concat(n)},s.a.createElement(P,{title:e.title,stepProgress:t&&e.stepProgress,action:e.action,duration:e.duration}))}))}(V,n),r&&V.map((function(e,t){return s.a.createElement(M,{key:"expand-step-".concat(e.title,"-").concat(t)},s.a.createElement(c.a,{className:p()({"slds-is-open":e.isOpen})},s.a.createElement(c.b,{className:"slds-m-top_x-small",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen,summaryTitle:e.title}),s.a.createElement("div",{className:"slds-container_fluid"},s.a.createElement(c.d,null,s.a.createElement(P,{title:e.title,isActiveStep:e.isActiveStep,stepProgress:e.stepProgress,duration:e.duration\|\|"10 mins",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen})),s.a.createElement(c.c,{referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen},s.a.createElement(H,null)))))})))},J=function(e){return s.a.createElement("section",{className:"slds-card"},s.a.createElement("header",{className:"slds-theme_shade slds-p-around_medium slds-m-bottom_small"},s.a.createElement(U.a,{barClassName:"slds-progress-bar_circular",label:"Complete all the steps below to finish setting up Einstein Visibility",value:"50"})),s.a.createElement(s.a.Fragment,null,e.children))},W=a.c.a,Y=a.c.h2,G=a.c.li,K=a.c.p,Q=a.c.ul,X=function(){return Object(r.createElement)(a.b,{},Object(r.createElement)("div",{className:"doc lead"},"Setup Assistant provides Administrators with a centralized list of tasks for onboarding organizations, clouds, or features within the Salesforce Platform. It provides a prescriptive and detailed guide for learning, configuring, and importing data which can take hours to days."),Object(r.createElement)(i.a,{exampleOnly:!0},Object(r.createElement)(F,{isBase:!0,stepsHaveProgress:!0})),Y({id:"About-Setup-Assistant"},"About Setup Assistant"),K({},"Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos."),Q({},G({},"The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant)."),G({},"Use links to navigate to Trailheads, articles, Help & Training documentation, and videos."),G({},"Use the Outline Brand Button to open LSF or configuration pages."),G({},"Estimated time is optional.")),Y({id:"Base"},"Base"),K({},"Basic list of learning and task links that do not require progress tracking and do not have sequential steps."),Object(r.createElement)(o.a,{title:"Setup Assistant Base"},Object(r.createElement)(i.a,null,Object(r.createElement)(F,{isBase:!0}))),Y({id:"With-Step-Progress"},"With Step Progress"),K({},"List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the ",W({href:"../progress-ring"},"Progress Ring")," component."),Object(r.createElement)(o.a,{title:"Setup Assistant Base steps with Progress"},Object(r.createElement)(i.a,null,Object(r.createElement)(F,{isBase:!0,stepsHaveProgress:!0}))),Y({id:"Hub-with-Expandable-Steps"},"Hub with Expandable Steps"),K({},"Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional."),K({},"Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps."),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"Since both the chevron toggle and the step's title act as a trigger to open and close the step's detail, ensure both the icon button and the title include"," ",Object(r.createElement)("code",null,"aria-controls=[uniqueId]")," where the ",Object(r.createElement)("code",null,"uniqueId")," matches the "," ",Object(r.createElement)("code",null,"id")," on the"," ",Object(r.createElement)("code",null,"<div>")," with ",Object(r.createElement)("code",null,'class="slds-summary-detail__content"'),".")),Object(r.createElement)(o.a,{title:"Setup Assistant Hub Expandable"},Object(r.createElement)(i.a,null,Object(r.createElement)(F,{stepsAreExpandable:!0}))),Y({id:"In-a-Card"},"In a Card"),K({},"If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the ",W({href:"../progress-bar"},"Descriptive Progress Bar")),Object(r.createElement)(l.a,{type:"a11y",header:"Accessibility Note"},Object(r.createElement)("p",null,"In order to prevent duplicating information for screen reader users, the percentage info on the top of the progress bar is hidden using the"," ",Object(r.createElement)("code",null,"slds-assistive-text")," class.")),Object(r.createElement)(o.a,{title:"Setup Assistant Hub Expandable"},Object(r.createElement)(i.a,null,Object(r.createElement)(J,null,Object(r.createElement)(F,{stepsAreExpandable:!0})))))},Z=function(){return Object(a.a)(X())}}});