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

@salesforce-ux/design-system 2.27.1 → 2.27.2

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

Files changed (859) hide show

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/pills/docs.mdx.js"]=function(e){function t(t){for(var a,s,r=t[0],o=t[1],c=t[2],p=0,m=[];p<r.length;p++)s=r[p],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,r=1;r<l.length;r++){var o=l[r];0!==n[o]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={55:0},i=[];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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return i.push([747,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},747:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return P})),l.d(t,"getContents",(function(){return N}));var a=l(0),n=l.n(a),i=l(4),s=l(2),r=(l(27),l(14),l(40)),o=l(1),c=l(39),d=l(9),p=l(30),m=n.a.createElement(p.e,null),u=[{id:"error",label:"Error",element:n.a.createElement(p.e,{className:"slds-has-error"},n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container",title:"Error"},n.a.createElement(d.a,{className:"slds-icon slds-icon-text-error",sprite:"utility",symbol:"error"}),n.a.createElement("span",{className:"slds-assistive-text"},"Warning"))))},{id:"truncated",label:"Truncated",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.f,null,n.a.createElement(p.e,{label:"Pill label that is longer than the area that contains it"}))},{id:"pill-truncated-tooltip",label:"Truncated Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.g,null)},{id:"linked-pill-truncated-tooltip",label:"Truncated Linked Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.a,null)}],b=[{id:"icon",label:"With icon",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account",title:"Account"},n.a.createElement(d.a,{className:"slds-icon",sprite:"standard",symbol:"account"}),n.a.createElement("span",{className:"slds-assistive-text"},"Account"))))},{id:"avatar",label:"With avatar",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle",title:"User avatar"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},{id:"container",label:"Pill with Container",element:n.a.createElement(p.f,null,n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))},{id:"container-bare",label:"Pill with Bare Container - Deprecated",element:n.a.createElement(p.f,{variant:"container-bare"},n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))}],h=l(49),f=l(35),E=[{id:"default",label:"Default",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-default"},n.a.createElement(p.c,{id:"listbox-pill-default"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null))))}],x=[{id:"listbox-pill-with-icon",label:"With icon",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-icon"},n.a.createElement(p.c,{id:"listbox-pill-with-icon"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",symbol:"case",title:"Case",assistiveText:"Case"})))))},{id:"listbox-pill-with-avatar",label:"With avatar",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-avatar"},n.a.createElement(p.c,{id:"listbox-pill-with-avatar"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))))},{id:"listbox-pill-bare",label:"Bare",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pills-bare"},n.a.createElement(p.c,{id:"listbox-pills-bare"},n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare",tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare"}))))},{id:"listbox-pill-group",label:"Grouped",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-combobox_container"}),n.a.createElement(p.f,{variant:"listbox-group"},n.a.createElement(p.c,null,n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null)))))}],y=i.c.a,v=i.c.code,_=i.c.h2,w=i.c.h3,O=i.c.h4,g=i.c.li,j=i.c.p,k=i.c.strong,S=i.c.ul,P=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"A pill represents an object that can be viewed with or without an icon."),Object(a.createElement)(s.a,{exampleOnly:!0},Object(o.f)(b,"icon")),_({id:"About-Pills"},"About Pills"),j({},"To create a pill, apply the ",v({},".slds-pill")," class on a ",v({},"<span>"),"."),j({},"Depending on your context, you will either need a base pill (linked or unlinked), or a pill option inside of a listbox. Note that a linked pill should not be used as a pill option inside of a listbox."),j({},"For linked pills, a modifier class of ",v({},"slds-pill_link")," needs to be added to the existing ",v({},"<span>")," with the class name of ",v({},"slds-pill"),". You need an ",v({},"<a>")," inside of the span with the ",v({},"slds-pill_link")," class. The ",v({},"<a>")," will get the class name of ",v({},"slds-pill__action"),". This will treat the interactions differently from an unlinked pill option inside of a listbox."),j({},"For both linked and unlinked pills, a ",v({},"<span>")," with the class name of ",v({},"slds-pill__label")," should contain the string of text describing the pill object."),j({},"Additionally, a pill can have an icon or image that sits to the left-hand side of the ",v({},".slds-pill__label"),". That icon or image should receive the class ",v({},".slds-pill__icon_container"),"."),j({},'You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the ',v({},".slds-pill__label"),". That icon should receive the class ",v({},".slds-pill__remove"),"."),j({},"A ",v({},".slds-pill_container")," can be used as a visual container for multiple pill(s)."),w({id:"Mobile"},"Mobile"),Object(a.createElement)(c.a,{patternSpecificText:"pills will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(s.a,{frameOnly:!0,frameTitle:"Example mobile styles for pills"},Object(o.f)(b,"icon")),_({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(o.f)(m)),w({id:"Examples"},"Examples"),O({id:"With-Icon"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(b,"icon")),O({id:"With-Avatar"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(b,"avatar")),O({id:"Pill-with-Container"},"Pill with Container"),Object(a.createElement)(s.a,null,Object(o.f)(b,"container")),w({id:"States"},"States"),O({id:"Error"},"Error"),Object(a.createElement)(s.a,null,Object(o.f)(u,"error")),O({id:"Truncated"},"Truncated"),j({},"The pills component will respect the width of its parent and truncate if necessary."),Object(a.createElement)(s.a,{demoStyles:"width: 220px;"},Object(o.f)(u,"truncated")),j({},"Showing the full text of a truncated pill as a tooltip."),Object(a.createElement)(s.a,{demoStyles:"width: 220px; padding-top:48px;"},Object(o.f)(u,"pill-truncated-tooltip")),_({id:"Listbox-Of-Pill-Options"},"Listbox Of Pill Options"),Object(a.createElement)(s.a,null,Object(o.f)(E)),j({},"A Listbox of Pills is a way to display a list of selected options when performing user input, usually from a multi-select ",y({href:"/components/combobox"},"Combobox"),", ",y({href:"/components/lookups"},"Lookup")," or ",y({href:"/components/picklist"},"Picklist"),"."),j({},"Note that we can use a linked or unlinked pill as a pill item inside of a listbox"),w({id:"Accessibility"},"Accessibility"),j({},k({},"Interaction requirements")),S({},g({},"Only 1 focused Pill per set of Pills"),g({},"The remove button is a focusable element and can be clickable.")),j({},k({},"Keyboard navigation")),S({},g({},"The first ",v({},"pill")," in the list will be take user focus initially, when tabbed to"),g({},v({},"Right")," arrow key will move focus to the next pill in the list"),g({},v({},"Left")," arrow key will move focus to the previous pill in the list"),g({},v({},"Left")," arrow key when on the first ",v({},"pill")," should cycle user focus to the last ",v({},"pill")),g({},v({},"Right")," arrow key when on the last ",v({},"pill")," should cycle user focus to the first ",v({},"pill")),g({},"On removing of the pill, the focus should then be placed on the nearest ",v({},"pill"),S({},g({},"When on the last ",v({},"pill"),", place user focus on the previous ",v({},"pill")),g({},"When on the first ",v({},"pill"),", place user focus on the next ",v({},"pill")),g({},"When on the only ",v({},"pill"),", place user focus on the ",v({},"listbox")," or any ",v({},"input")," element the ",v({},"pill")," might be associated with")))),w({id:"Examples-2"},"Examples"),O({id:"With-Icon-2"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-icon")),O({id:"With-Avatar-2"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-avatar")),w({id:"Layout"},"Layout"),O({id:"Bare"},"Bare"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-bare")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(r.a,{name:"pills",type:"component"}))},N=function(){return Object(i.a)(P())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/pills/docs.mdx.js"]=function(e){function t(t){for(var a,s,r=t[0],o=t[1],c=t[2],p=0,m=[];p<r.length;p++)s=r[p],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,r=1;r<l.length;r++){var o=l[r];0!==n[o]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=l[0]))}return e}var a={},n={55:0},i=[];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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return i.push([748,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},748:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return P})),l.d(t,"getContents",(function(){return N}));var a=l(0),n=l.n(a),i=l(4),s=l(2),r=(l(27),l(13),l(40)),o=l(1),c=l(39),d=l(9),p=l(30),m=n.a.createElement(p.e,null),u=[{id:"error",label:"Error",element:n.a.createElement(p.e,{className:"slds-has-error"},n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container",title:"Error"},n.a.createElement(d.a,{className:"slds-icon slds-icon-text-error",sprite:"utility",symbol:"error"}),n.a.createElement("span",{className:"slds-assistive-text"},"Warning"))))},{id:"truncated",label:"Truncated",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.f,null,n.a.createElement(p.e,{label:"Pill label that is longer than the area that contains it"}))},{id:"pill-truncated-tooltip",label:"Truncated Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.g,null)},{id:"linked-pill-truncated-tooltip",label:"Truncated Linked Pill as Tooltip",demoStyles:"width: 220px;",storybookStyles:!0,element:n.a.createElement(p.a,null)}],b=[{id:"icon",label:"With icon",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account",title:"Account"},n.a.createElement(d.a,{className:"slds-icon",sprite:"standard",symbol:"account"}),n.a.createElement("span",{className:"slds-assistive-text"},"Account"))))},{id:"avatar",label:"With avatar",element:n.a.createElement(p.e,null,n.a.createElement("span",{className:"slds-pill__icon_container"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle",title:"User avatar"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},{id:"container",label:"Pill with Container",element:n.a.createElement(p.f,null,n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))},{id:"container-bare",label:"Pill with Bare Container - Deprecated",element:n.a.createElement(p.f,{variant:"container-bare"},n.a.createElement(p.e,null),n.a.createElement(p.e,null),n.a.createElement(p.e,null))}],h=l(49),f=l(35),E=[{id:"default",label:"Default",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-default"},n.a.createElement(p.c,{id:"listbox-pill-default"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null))))}],x=[{id:"listbox-pill-with-icon",label:"With icon",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-icon"},n.a.createElement(p.c,{id:"listbox-pill-with-icon"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",title:"Account",assistiveText:"Account"}))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(f.a,{containerClassName:"slds-pill__icon_container",symbol:"case",title:"Case",assistiveText:"Case"})))))},{id:"listbox-pill-with-avatar",label:"With avatar",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pill-with-avatar"},n.a.createElement(p.c,{id:"listbox-pill-with-avatar"},n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"},n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))),n.a.createElement(p.d,null,n.a.createElement(p.b,null,n.a.createElement(h.a,{className:"slds-avatar_x-small slds-pill__icon_container"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))))},{id:"listbox-pill-bare",label:"Bare",element:n.a.createElement(p.f,{type:"listbox",id:"listbox-pills-bare"},n.a.createElement(p.c,{id:"listbox-pills-bare"},n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare",tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,{className:"slds-pill_bare"}))))},{id:"listbox-pill-group",label:"Grouped",element:n.a.createElement("div",null,n.a.createElement("div",{className:"slds-combobox_container"}),n.a.createElement(p.f,{variant:"listbox-group"},n.a.createElement(p.c,null,n.a.createElement(p.d,null,n.a.createElement(p.b,{tabIndex:"0"})),n.a.createElement(p.d,null,n.a.createElement(p.b,null)))))}],y=i.c.a,v=i.c.code,_=i.c.h2,w=i.c.h3,O=i.c.h4,g=i.c.li,j=i.c.p,k=i.c.strong,S=i.c.ul,P=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"A pill represents an object that can be viewed with or without an icon."),Object(a.createElement)(s.a,{exampleOnly:!0},Object(o.f)(b,"icon")),_({id:"About-Pills"},"About Pills"),j({},"To create a pill, apply the ",v({},".slds-pill")," class on a ",v({},"<span>"),"."),j({},"Depending on your context, you will either need a base pill (linked or unlinked), or a pill option inside of a listbox. Note that a linked pill should not be used as a pill option inside of a listbox."),j({},"For linked pills, a modifier class of ",v({},"slds-pill_link")," needs to be added to the existing ",v({},"<span>")," with the class name of ",v({},"slds-pill"),". You need an ",v({},"<a>")," inside of the span with the ",v({},"slds-pill_link")," class. The ",v({},"<a>")," will get the class name of ",v({},"slds-pill__action"),". This will treat the interactions differently from an unlinked pill option inside of a listbox."),j({},"For both linked and unlinked pills, a ",v({},"<span>")," with the class name of ",v({},"slds-pill__label")," should contain the string of text describing the pill object."),j({},"Additionally, a pill can have an icon or image that sits to the left-hand side of the ",v({},".slds-pill__label"),". That icon or image should receive the class ",v({},".slds-pill__icon_container"),"."),j({},'You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the ',v({},".slds-pill__label"),". That icon should receive the class ",v({},".slds-pill__remove"),"."),j({},"A ",v({},".slds-pill_container")," can be used as a visual container for multiple pill(s)."),w({id:"Mobile"},"Mobile"),Object(a.createElement)(c.a,{patternSpecificText:"pills will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(a.createElement)(s.a,{frameOnly:!0,frameTitle:"Example mobile styles for pills"},Object(o.f)(b,"icon")),_({id:"Base"},"Base"),Object(a.createElement)(s.a,null,Object(o.f)(m)),w({id:"Examples"},"Examples"),O({id:"With-Icon"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(b,"icon")),O({id:"With-Avatar"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(b,"avatar")),O({id:"Pill-with-Container"},"Pill with Container"),Object(a.createElement)(s.a,null,Object(o.f)(b,"container")),w({id:"States"},"States"),O({id:"Error"},"Error"),Object(a.createElement)(s.a,null,Object(o.f)(u,"error")),O({id:"Truncated"},"Truncated"),j({},"The pills component will respect the width of its parent and truncate if necessary."),Object(a.createElement)(s.a,{demoStyles:"width: 220px;"},Object(o.f)(u,"truncated")),j({},"Showing the full text of a truncated pill as a tooltip."),Object(a.createElement)(s.a,{demoStyles:"width: 220px; padding-top:48px;"},Object(o.f)(u,"pill-truncated-tooltip")),_({id:"Listbox-Of-Pill-Options"},"Listbox Of Pill Options"),Object(a.createElement)(s.a,null,Object(o.f)(E)),j({},"A Listbox of Pills is a way to display a list of selected options when performing user input, usually from a multi-select ",y({href:"/components/combobox"},"Combobox"),", ",y({href:"/components/lookups"},"Lookup")," or ",y({href:"/components/picklist"},"Picklist"),"."),j({},"Note that we can use a linked or unlinked pill as a pill item inside of a listbox"),w({id:"Accessibility"},"Accessibility"),j({},k({},"Interaction requirements")),S({},g({},"Only 1 focused Pill per set of Pills"),g({},"The remove button is a focusable element and can be clickable.")),j({},k({},"Keyboard navigation")),S({},g({},"The first ",v({},"pill")," in the list will be take user focus initially, when tabbed to"),g({},v({},"Right")," arrow key will move focus to the next pill in the list"),g({},v({},"Left")," arrow key will move focus to the previous pill in the list"),g({},v({},"Left")," arrow key when on the first ",v({},"pill")," should cycle user focus to the last ",v({},"pill")),g({},v({},"Right")," arrow key when on the last ",v({},"pill")," should cycle user focus to the first ",v({},"pill")),g({},"On removing of the pill, the focus should then be placed on the nearest ",v({},"pill"),S({},g({},"When on the last ",v({},"pill"),", place user focus on the previous ",v({},"pill")),g({},"When on the first ",v({},"pill"),", place user focus on the next ",v({},"pill")),g({},"When on the only ",v({},"pill"),", place user focus on the ",v({},"listbox")," or any ",v({},"input")," element the ",v({},"pill")," might be associated with")))),w({id:"Examples-2"},"Examples"),O({id:"With-Icon-2"},"With Icon"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-icon")),O({id:"With-Avatar-2"},"With Avatar"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-with-avatar")),w({id:"Layout"},"Layout"),O({id:"Bare"},"Bare"),Object(a.createElement)(s.a,null,Object(o.f)(x,"listbox-pill-bare")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(r.a,{name:"pills",type:"component"}))},N=function(){return Object(i.a)(P())}}});

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 l,o,i=t[0],r=t[1],c=t[2],m=0,u=[];m<i.length;m++)o=i[m],Object.prototype.hasOwnProperty.call(s,o)&&s[o]&&u.push(s[o][0]),s[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);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],l=!0,i=1;i<a.length;i++){var r=a[i];0!==s[r]&&(l=!1)}l&&(n.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},s={56:0},n=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var 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([719,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},719:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return X})),a.d(t,"getContents",(function(){return Z}));var l=a(0),s=a.n(l),n=a(4),o=a(2),i=(a(27),a(14)),r=a(28),c=a(45),d=a(38),m=a(9),u=function(e){return e.symbol?s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))):s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")},p=(d.a,d.a,d.a,d.a,d.a,d.a,d.a,d.a,a(7)),b=function(e){return s.a.createElement("section",{"aria-label":"Dialog title","aria-describedby":"popover-body-id",className:"slds-popover slds-nubbin_".concat(e.nubbinPosition),role:"dialog"},s.a.createElement(p.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),s.a.createElement("div",{id:"popover-body-id",className:"slds-popover__body"},s.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:s.a.createElement(b,{nubbinPosition:"left"})},{context:"Nubbins",id:"left-top",label:"Nubbin Left (top)",element:s.a.createElement(b,{nubbinPosition:"left-top"})},{context:"Nubbins",id:"left-top-corner",label:"Nubbin Left (top corner)",element:s.a.createElement(b,{nubbinPosition:"left-top-corner"})},{context:"Nubbins",id:"left-bottom",label:"Nubbin Left (bottom)",element:s.a.createElement(b,{nubbinPosition:"left-bottom"})},{context:"Nubbins",id:"left-bottom-corner",label:"Nubbin Left (bottom corner)",element:s.a.createElement(b,{nubbinPosition:"left-bottom-corner"})},{context:"Nubbins",id:"top",label:"Nubbin Top",element:s.a.createElement(b,{nubbinPosition:"top"})},{context:"Nubbins",id:"top-left",label:"Nubbin Top (left)",element:s.a.createElement(b,{nubbinPosition:"top-left"})},{context:"Nubbins",id:"top-left-corner",label:"Nubbin Top (left corner)",element:s.a.createElement(b,{nubbinPosition:"top-left-corner"})},{context:"Nubbins",id:"top-right",label:"Nubbin Top (right)",element:s.a.createElement(b,{nubbinPosition:"top-right"})},{context:"Nubbins",id:"top-right-corner",label:"Nubbin Top (right corner)",element:s.a.createElement(b,{nubbinPosition:"top-right-corner"})},{context:"Nubbins",id:"right",label:"Nubbin Right",element:s.a.createElement(b,{nubbinPosition:"right"})},{context:"Nubbins",id:"right-top",label:"Nubbin Right (top)",element:s.a.createElement(b,{nubbinPosition:"right-top"})},{context:"Nubbins",id:"right-top-corner",label:"Nubbin Right (top corner)",element:s.a.createElement(b,{nubbinPosition:"right-top-corner"})},{context:"Nubbins",id:"right-bottom",label:"Nubbin Right (bottom)",element:s.a.createElement(b,{nubbinPosition:"right-bottom"})},{context:"Nubbins",id:"right-bottom-corner",label:"Nubbin Right (bottom corner)",element:s.a.createElement(b,{nubbinPosition:"right-bottom-corner"})},{context:"Nubbins",id:"bottom",label:"Nubbin Bottom",element:s.a.createElement(b,{nubbinPosition:"bottom"})},{context:"Nubbins",id:"bottom-left",label:"Nubbin Bottom (left)",element:s.a.createElement(b,{nubbinPosition:"bottom-left"})},{context:"Nubbins",id:"bottom-left-corner",label:"Nubbin Bottom (left corner)",element:s.a.createElement(b,{nubbinPosition:"bottom-left-corner"})},{context:"Nubbins",id:"bottom-right",label:"Nubbin Bottom (right)",element:s.a.createElement(b,{nubbinPosition:"bottom-right"})},{context:"Nubbins",id:"bottom-right-corner",label:"Nubbin Bottom (right corner)",element:s.a.createElement(b,{nubbinPosition:"bottom-right-corner"})}],E=a(72),f=a(51),g=a(1),_=g.d.uniqueId("dialog-heading-id-"),v=[{context:"Warning",id:"warning-default",label:"Warning – default",element:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_bottom-left",headingId:_,bodyClassName:"slds-popover_warning__body",header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_top",bodyClassName:"slds-popover_warning__body",headingId:_,header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:s.a.createElement(E.a,{isNeutral:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:s.a.createElement(E.a,{isBrand:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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 s.a.createElement("header",{className:"slds-popover__header slds-p-vertical_medium"},s.a.createElement("h2",{id:x,className:"slds-text-heading_medium"},e.title))},k=function(e){return s.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.steps?s.a.createElement("span",{className:"slds-text-title"},"Step 2 of 4"):null,e.skipButton?s.a.createElement("button",{className:"slds-button slds-button_inverse slds-col_bump-left"},"Skip"):null,e.setupButton?s.a.createElement("button",{className:"slds-button slds-button_success slds-col_bump-left"},"Setup Email"):null,e.nextButton?s.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Next"):null,e.learnMoreButton?s.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-left"},"Learn More"):null)},O=[{context:"Walkthrough",id:"walkthrough-default",label:"Walkthrough default [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))}],j=[{context:"Walkthrough",id:"micro-setup-dark",label:"Micro Setup [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.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",id:"micro-setup-alternate-dark",label:"Micro Setup - Alternate [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},s.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",id:"micro-setup-in-page-dark",label:"Micro Setup - In Page [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_bottom",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},s.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",id:"micro-setup-inline-form-dark",label:"Micro Setup - Inline Form [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement("div",{className:"slds-form-element slds-p-top_small"},s.a.createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),s.a.createElement("div",{className:"slds-form-element__control"},s.a.createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",id:"action-popover-dark",label:"Action Popover [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-heading-dark",label:"Action Popover - With Heading [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-with-link-dark",label:"Action Popover - With Link [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"micro-setup",label:"Deprecated – Micro Setup",element:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_bottom",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement("div",{className:"slds-form-element slds-p-top_small"},s.a.createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),s.a.createElement("div",{className:"slds-form-element__control"},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))}],w=g.d.uniqueId("dialog-heading-id-"),P=[{context:"Feature",id:"feature-default",label:"Feature default [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))}],S=[{context:"Feature",id:"icon-text-dark",label:"With icon and text [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",id:"icon-header-text-link-dark",label:"With icon, header, text, and link [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",id:"icon-header-text-dark",label:"With icon, header, and text [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.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",id:"icon-header-text-footer-dark",label:"With icon, header, text, and footer [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",headingId:w,footer:s.a.createElement(k,{learnMoreButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.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-text",label:"Deprecated – With icon and text",element:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.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:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",s.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:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.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:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,footer:s.a.createElement(k,{learnMoreButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))}],W=a(81),B=s.a.createElement("span",{className:"slds-icon_container slds-icon-standard-opportunity"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"opportunity"}),s.a.createElement("span",{className:"slds-assistive-text"},"Opportunities")),L=s.a.createElement("span",{className:"slds-icon_container slds-icon-standard-case"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"case"}),s.a.createElement("span",{className:"slds-assistive-text"},"Cases")),D=function(){return s.a.createElement("dd",{className:"slds-m-top_x-small slds-text-align_right"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"View all Opportunities"},"View All"))},T=[{id:"panels-default",label:"Panels – default",element:s.a.createElement("section",{"aria-labelledby":"panel-heading-id",className:"slds-popover slds-popover_panel slds-nubbin_left-top",role:"dialog"},s.a.createElement(p.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),s.a.createElement("div",{className:"slds-popover__header"},s.a.createElement("header",{className:"slds-media slds-media_center slds-m-bottom_small"},s.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account slds-media__figure"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"account"})),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{className:"slds-text-heading_medium slds-hyphenate",id:"panel-heading-id"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla Motors")))),s.a.createElement("footer",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Billing Address"},"Billing Address")),s.a.createElement("dd",null,s.a.createElement("p",{className:"slds-truncate",title:"3500 Deer Creek Rd."},"3500 Deer Creek Rd."),s.a.createElement("p",{className:"slds-truncate",title:"Palo Alto, CA 94304"},"Palo Alto, CA 94304")))),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Phone"},"Phone")),s.a.createElement("dd",null,s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"212-345-3485")))),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Website"},"Website")),s.a.createElement("dd",null,s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"teslamotors.com")))),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Account Owner"},"Account Owner")),s.a.createElement("dd",null,s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeff Maguire")))))),s.a.createElement("div",{className:"slds-popover__body"},s.a.createElement("dl",{className:"slds-popover__body-list"},s.a.createElement("dt",{className:"slds-m-bottom_small"},s.a.createElement(W.a,{figureLeft:B,flavor:"center"},s.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Opportunities (2+)"))),s.a.createElement("dd",{className:"slds-m-top_x-small"},s.a.createElement("p",{className:"slds-truncate",title:"Tesla - Mule ESB"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Mule ESB")),s.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$500,000"},"$500,000"),s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Dec 15, 2015"},"Dec 15, 2015"))),s.a.createElement("dd",{className:"slds-m-top_x-small"},s.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),s.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),s.a.createElement(D,null)),s.a.createElement("dl",{className:"slds-popover__body-list"},s.a.createElement("dt",{className:"slds-m-bottom_small"},s.a.createElement(W.a,{figureLeft:L,flavor:"center"},s.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Cases (1)"))),s.a.createElement("dd",{className:"slds-m-top_x-small"},s.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),s.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),s.a.createElement(D,null))))}],A=a(5),C=a.n(A),F="height: 13rem;",I=g.d.uniqueId("dialog-heading-id-"),M=function(e){return s.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.dismissButtonLabel&&s.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-right"},e.dismissButtonLabel),e.actionLinkText&&s.a.createElement("span",{className:"slds-popover_prompt__action-link"},s.a.createElement("a",{href:"#",className:"slds-button"},e.actionLinkText)),e.brandButtonLabel&&s.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 s.a.createElement(d.a,{className:C()("slds-popover_prompt",t,e.className),bodyClassName:e.bodyClassName,headingId:I,footer:e.showFooter&&s.a.createElement(M,{dismissButtonLabel:"Dismiss",actionLinkText:"Learn More",brandButtonLabel:"Save"}),closeButton:!0},s.a.createElement("div",{className:"slds-media"},e.symbol&&s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:e.assistiveText},s.a.createElement(m.a,{className:C()("slds-icon slds-icon_small slds-icon-text-default",e.iconClassName),sprite:"utility",symbol:e.symbol}),s.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:I,className:"slds-popover_prompt__heading"},"Prompt title"),s.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:s.a.createElement(q,{symbol:"prompt"})}],z=[{context:"Prompt",id:"top-left",label:"Positioned: top left",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-left"})},{context:"Prompt",id:"top-center",label:"Positioned: top center",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top"})},{context:"Prompt",id:"top-right",label:"Positioned: top right",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-right"})},{context:"Prompt",id:"bottom-right",label:"Positioned: bottom right",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-right"})},{context:"Prompt",id:"bottom-center",label:"Positioned: bottom center",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom"})},{context:"Prompt",id:"bottom-left",label:"Positioned: bottom left",demoStyles:F,storybookStyles:!0,element:s.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:s.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:s.a.createElement(q,{symbol:"prompt",position:"top",className:"slds-popover_brand slds-popover_brand-bottom",iconClassName:"slds-popover__icon"})}],H=a(40),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(l.createElement)(n.b,{},Object(l.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(l.createElement)(o.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(l.createElement)(o.a,null,Object(g.f)(d.b)),$({id:"With-Header"},"With Header"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"header")),$({id:"With-Footer"},"With Footer"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"footer")),$({id:"With-Badge"},"With Badge"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"badge")),$({id:"Scrolling-region-with-max-height"},"Scrolling region with max-height"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"scrolling")),V({id:"Widths"},"Widths"),$({id:"Small"},"Small"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-small")),$({id:"Medium"},"Medium"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-medium")),$({id:"Large"},"Large"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-large")),$({id:"Full-Width"},"Full Width"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-full-width")),V({id:"Nubbins"},"Nubbins"),$({id:"Left"},"Left"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Left"),Object(l.createElement)(o.a,null,Object(g.f)(h,"left"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Left Top"),Object(l.createElement)(o.a,null,Object(g.f)(h,"left-top"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Left Bottom"),Object(l.createElement)(o.a,null,Object(g.f)(h,"left-bottom")))),$({id:"Right"},"Right"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Right"),Object(l.createElement)(o.a,null,Object(g.f)(h,"right"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Right Top"),Object(l.createElement)(o.a,null,Object(g.f)(h,"right-top"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Right Bottom"),Object(l.createElement)(o.a,null,Object(g.f)(h,"right-bottom")))),$({id:"Top"},"Top"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Top"),Object(l.createElement)(o.a,null,Object(g.f)(h,"top"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Top Left"),Object(l.createElement)(o.a,null,Object(g.f)(h,"top-left"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Top Right"),Object(l.createElement)(o.a,null,Object(g.f)(h,"top-right")))),$({id:"Bottom"},"Bottom"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Bottom"),Object(l.createElement)(o.a,null,Object(g.f)(h,"bottom"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Bottom Left"),Object(l.createElement)(o.a,null,Object(g.f)(h,"bottom-left"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Bottom Right"),Object(l.createElement)(o.a,null,Object(g.f)(h,"bottom-right")))),V({id:"Feedback-States"},"Feedback States"),$({id:"Error"},"Error"),Object(l.createElement)(o.a,null,Object(g.f)(E.c)),U({id:"With-Footer-2"},"With Footer"),Object(l.createElement)(o.a,null,Object(g.f)(E.d,"with-footer")),U({id:"With-Bullet-List"},"With Bullet List"),Object(l.createElement)(o.a,null,Object(g.f)(E.d,"with-bullet-list")),$({id:"Warning"},"Warning"),Object(l.createElement)(o.a,null,Object(g.f)(v)),U({id:"With-Footer-3"},"With Footer"),Object(l.createElement)(o.a,null,Object(g.f)(N,"with-footer")),V({id:"Examples"},"Examples"),$({id:"Walkthrough"},"Walkthrough"),Object(l.createElement)(o.a,null,Object(g.f)(O)),U({id:"Micro-Setup"},"Micro Setup"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-dark")),U({id:"Micro-Setup-Alternate"},"Micro Setup - Alternate"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-alternate-dark")),U({id:"Micro-Setup-In-Page"},"Micro Setup - In Page"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-in-page-dark")),U({id:"Micro-Setup-Inline-Form"},"Micro Setup - Inline Form"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-inline-form-dark")),U({id:"Action"},"Action"),Object(l.createElement)(o.a,null,Object(g.f)(j,"action-popover-dark")),U({id:"Action-With-Heading"},"Action - With Heading"),Object(l.createElement)(o.a,null,Object(g.f)(j,"action-popover-heading-dark")),U({id:"Action-With-Link"},"Action - With Link"),Object(l.createElement)(o.a,null,Object(g.f)(j,"action-popover-with-link-dark")),$({id:"Feature"},"Feature"),Object(l.createElement)(o.a,null,Object(g.f)(P)),U({id:"With-icon-and-text"},"With icon and text"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-text-dark")),U({id:"With-icon-header-and-text"},"With icon, header, and text"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-header-text-dark")),U({id:"With-icon-header-text-and-link"},"With icon, header, text and link"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-header-text-link-dark")),U({id:"With-icon-header-text-and-footer"},"With icon, header, text and footer"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-header-text-footer-dark")),$({id:"Record-Preview-Panel"},"Record Preview Panel"),Object(l.createElement)(o.a,null,Object(g.f)(T)),$({id:"Prompt"},"Prompt"),Object(l.createElement)(o.a,null,Object(g.f)(R)),U({id:"Positioned-top-left"},"Positioned top left"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-left")),U({id:"Positioned-top-center"},"Positioned top center"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-center")),U({id:"Positioned-top-right"},"Positioned top right"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-right")),U({id:"Positioned-bottom-right"},"Positioned bottom right"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-right")),U({id:"Positioned-bottom-center"},"Positioned bottom center"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-center")),U({id:"Positioned-bottom-left"},"Positioned bottom left"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-left")),U({id:"With-brand-color-and-footer"},"With brand color and footer"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-with-footer")),U({id:"With-brand-color-no-footer"},"With brand color - no footer"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-without-footer")),V({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(l.createElement)(i.a,{header:"A Note About z-index"},Object(l.createElement)("p",null,"By default, Popovers use the ",Object(l.createElement)("code",null,"$z-index-dialog")," (",Object(l.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(l.createElement)("p",null,"For this particular use case, the ",Object(l.createElement)("code",null,"--slds-c-popover-position-zindex")," ",Object(l.createElement)("a",{href:"/platforms/lightning/styling-hooks/"},"Styling Hook")," allows developers to change the z-index value. ",Object(l.createElement)("strong",null,"Please note"),": when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.")),Object(l.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 l,o,i=t[0],r=t[1],c=t[2],m=0,u=[];m<i.length;m++)o=i[m],Object.prototype.hasOwnProperty.call(s,o)&&s[o]&&u.push(s[o][0]),s[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);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],l=!0,i=1;i<a.length;i++){var r=a[i];0!==s[r]&&(l=!1)}l&&(n.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},s={56:0},n=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var 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([720,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},720:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return X})),a.d(t,"getContents",(function(){return Z}));var l=a(0),s=a.n(l),n=a(4),o=a(2),i=(a(27),a(13)),r=a(28),c=a(46),d=a(38),m=a(9),u=function(e){return e.symbol?s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))):s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")},p=(d.a,d.a,d.a,d.a,d.a,d.a,d.a,d.a,a(7)),b=function(e){return s.a.createElement("section",{"aria-label":"Dialog title","aria-describedby":"popover-body-id",className:"slds-popover slds-nubbin_".concat(e.nubbinPosition),role:"dialog"},s.a.createElement(p.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),s.a.createElement("div",{id:"popover-body-id",className:"slds-popover__body"},s.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:s.a.createElement(b,{nubbinPosition:"left"})},{context:"Nubbins",id:"left-top",label:"Nubbin Left (top)",element:s.a.createElement(b,{nubbinPosition:"left-top"})},{context:"Nubbins",id:"left-top-corner",label:"Nubbin Left (top corner)",element:s.a.createElement(b,{nubbinPosition:"left-top-corner"})},{context:"Nubbins",id:"left-bottom",label:"Nubbin Left (bottom)",element:s.a.createElement(b,{nubbinPosition:"left-bottom"})},{context:"Nubbins",id:"left-bottom-corner",label:"Nubbin Left (bottom corner)",element:s.a.createElement(b,{nubbinPosition:"left-bottom-corner"})},{context:"Nubbins",id:"top",label:"Nubbin Top",element:s.a.createElement(b,{nubbinPosition:"top"})},{context:"Nubbins",id:"top-left",label:"Nubbin Top (left)",element:s.a.createElement(b,{nubbinPosition:"top-left"})},{context:"Nubbins",id:"top-left-corner",label:"Nubbin Top (left corner)",element:s.a.createElement(b,{nubbinPosition:"top-left-corner"})},{context:"Nubbins",id:"top-right",label:"Nubbin Top (right)",element:s.a.createElement(b,{nubbinPosition:"top-right"})},{context:"Nubbins",id:"top-right-corner",label:"Nubbin Top (right corner)",element:s.a.createElement(b,{nubbinPosition:"top-right-corner"})},{context:"Nubbins",id:"right",label:"Nubbin Right",element:s.a.createElement(b,{nubbinPosition:"right"})},{context:"Nubbins",id:"right-top",label:"Nubbin Right (top)",element:s.a.createElement(b,{nubbinPosition:"right-top"})},{context:"Nubbins",id:"right-top-corner",label:"Nubbin Right (top corner)",element:s.a.createElement(b,{nubbinPosition:"right-top-corner"})},{context:"Nubbins",id:"right-bottom",label:"Nubbin Right (bottom)",element:s.a.createElement(b,{nubbinPosition:"right-bottom"})},{context:"Nubbins",id:"right-bottom-corner",label:"Nubbin Right (bottom corner)",element:s.a.createElement(b,{nubbinPosition:"right-bottom-corner"})},{context:"Nubbins",id:"bottom",label:"Nubbin Bottom",element:s.a.createElement(b,{nubbinPosition:"bottom"})},{context:"Nubbins",id:"bottom-left",label:"Nubbin Bottom (left)",element:s.a.createElement(b,{nubbinPosition:"bottom-left"})},{context:"Nubbins",id:"bottom-left-corner",label:"Nubbin Bottom (left corner)",element:s.a.createElement(b,{nubbinPosition:"bottom-left-corner"})},{context:"Nubbins",id:"bottom-right",label:"Nubbin Bottom (right)",element:s.a.createElement(b,{nubbinPosition:"bottom-right"})},{context:"Nubbins",id:"bottom-right-corner",label:"Nubbin Bottom (right corner)",element:s.a.createElement(b,{nubbinPosition:"bottom-right-corner"})}],E=a(73),f=a(51),g=a(1),_=g.d.uniqueId("dialog-heading-id-"),v=[{context:"Warning",id:"warning-default",label:"Warning – default",element:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_bottom-left",headingId:_,bodyClassName:"slds-popover_warning__body",header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_top",bodyClassName:"slds-popover_warning__body",headingId:_,header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:s.a.createElement(E.a,{isNeutral:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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:s.a.createElement(f.a,{className:"slds-popover_warning slds-nubbin_bottom-left",bodyClassName:"slds-popover_warning__body",headingId:_,header:s.a.createElement(E.b,{headingId:_,title:"Just a heads up…",symbol:"warning",iconDefault:!0}),footer:s.a.createElement(E.a,{isBrand:!0}),closeButton:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore."," ",s.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 s.a.createElement("header",{className:"slds-popover__header slds-p-vertical_medium"},s.a.createElement("h2",{id:x,className:"slds-text-heading_medium"},e.title))},k=function(e){return s.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.steps?s.a.createElement("span",{className:"slds-text-title"},"Step 2 of 4"):null,e.skipButton?s.a.createElement("button",{className:"slds-button slds-button_inverse slds-col_bump-left"},"Skip"):null,e.setupButton?s.a.createElement("button",{className:"slds-button slds-button_success slds-col_bump-left"},"Setup Email"):null,e.nextButton?s.a.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Next"):null,e.learnMoreButton?s.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-left"},"Learn More"):null)},O=[{context:"Walkthrough",id:"walkthrough-default",label:"Walkthrough default [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))}],j=[{context:"Walkthrough",id:"micro-setup-dark",label:"Micro Setup [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.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",id:"micro-setup-alternate-dark",label:"Micro Setup - Alternate [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},s.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",id:"micro-setup-in-page-dark",label:"Micro Setup - In Page [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_bottom",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},s.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",id:"micro-setup-inline-form-dark",label:"Micro Setup - Inline Form [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement("div",{className:"slds-form-element slds-p-top_small"},s.a.createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),s.a.createElement("div",{className:"slds-form-element__control"},s.a.createElement("input",{id:"email-text-input-01",className:"slds-input",type:"text",placeholder:"Email Address"}))))},{context:"Walkthrough",id:"action-popover-dark",label:"Action Popover [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-heading-dark",label:"Action Popover - With Heading [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",id:"action-popover-with-link-dark",label:"Action Popover - With Link [dark]",element:s.a.createElement(f.a,{className:"slds-popover_dark slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))},{context:"Walkthrough",deprecated:!0,id:"micro-setup",label:"Deprecated – Micro Setup",element:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,setupButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,setupButton:!0}),closeButton:!0,inverse:!0},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_bottom",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0}),closeButton:!0,inverse:!0},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-nubbin_left",headingId:x,header:s.a.createElement(y,{title:"Walkthrough title"}),footer:s.a.createElement(k,{steps:!0,skipButton:!0,nextButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),s.a.createElement("div",{className:"slds-form-element slds-p-top_small"},s.a.createElement("label",{className:"slds-form-element__label slds-assistive-text",htmlFor:"email-text-input-01"},"Email Address"),s.a.createElement("div",{className:"slds-form-element__control"},s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Text that describes the action"),s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.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:s.a.createElement(f.a,{className:"slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left",headingId:x,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"touch_action"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:x,className:"slds-text-heading_small"},"Action title"),s.a.createElement("p",null,"Text that describes the action"),s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Take Action"),s.a.createElement("p",{className:"slds-m-top_medium slds-text-title"},"Step 3 of 4"))))}],w=g.d.uniqueId("dialog-heading-id-"),P=[{context:"Feature",id:"feature-default",label:"Feature default [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))}],S=[{context:"Feature",id:"icon-text-dark",label:"With icon and text [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("p",{className:"slds-text-heading_small"},"Shelly, it seems you frequent this record. Try favoriting it for easy access."))))},{context:"Feature",id:"icon-header-text-link-dark",label:"With icon, header, text, and link [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Learn More")))))},{context:"Feature",id:"icon-header-text-dark",label:"With icon, header, and text [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.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",id:"icon-header-text-footer-dark",label:"With icon, header, text, and footer [dark]",element:s.a.createElement(d.a,{className:"slds-popover_dark slds-nubbin_left",headingId:w,footer:s.a.createElement(k,{learnMoreButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.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-text",label:"Deprecated – With icon and text",element:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",title:"Dialog Title",closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.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:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"smiley_and_people"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."," ",s.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:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"description"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.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:s.a.createElement(d.a,{className:"slds-popover_walkthrough slds-popover_feature slds-nubbin_left",headingId:w,footer:s.a.createElement(k,{learnMoreButton:!0}),closeButton:!0,inverse:!0},s.a.createElement("div",{className:"slds-media"},s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:"description of icon when needed"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"utility",symbol:"favorite"}),s.a.createElement("span",{className:"slds-assistive-text"},"Description of icon"))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:w,className:"slds-text-heading_small"},"Feature title"),s.a.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))))}],W=a(82),B=s.a.createElement("span",{className:"slds-icon_container slds-icon-standard-opportunity"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"opportunity"}),s.a.createElement("span",{className:"slds-assistive-text"},"Opportunities")),L=s.a.createElement("span",{className:"slds-icon_container slds-icon-standard-case"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"case"}),s.a.createElement("span",{className:"slds-assistive-text"},"Cases")),D=function(){return s.a.createElement("dd",{className:"slds-m-top_x-small slds-text-align_right"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},title:"View all Opportunities"},"View All"))},T=[{id:"panels-default",label:"Panels – default",element:s.a.createElement("section",{"aria-labelledby":"panel-heading-id",className:"slds-popover slds-popover_panel slds-nubbin_left-top",role:"dialog"},s.a.createElement(p.b,{className:"slds-button_icon slds-button_icon-small slds-float_right slds-popover__close",symbol:"close",assistiveText:"Close dialog",title:"Close dialog"}),s.a.createElement("div",{className:"slds-popover__header"},s.a.createElement("header",{className:"slds-media slds-media_center slds-m-bottom_small"},s.a.createElement("span",{className:"slds-icon_container slds-icon-standard-account slds-media__figure"},s.a.createElement(m.a,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"account"})),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{className:"slds-text-heading_medium slds-hyphenate",id:"panel-heading-id"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla Motors")))),s.a.createElement("footer",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Billing Address"},"Billing Address")),s.a.createElement("dd",null,s.a.createElement("p",{className:"slds-truncate",title:"3500 Deer Creek Rd."},"3500 Deer Creek Rd."),s.a.createElement("p",{className:"slds-truncate",title:"Palo Alto, CA 94304"},"Palo Alto, CA 94304")))),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Phone"},"Phone")),s.a.createElement("dd",null,s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"212-345-3485")))),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Website"},"Website")),s.a.createElement("dd",null,s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"teslamotors.com")))),s.a.createElement("div",{className:"slds-p-horizontal_small slds-size_1-of-2 slds-p-bottom_x-small"},s.a.createElement("dl",null,s.a.createElement("dt",null,s.a.createElement("p",{className:"slds-popover_panel__label slds-truncate",title:"Account Owner"},"Account Owner")),s.a.createElement("dd",null,s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Jeff Maguire")))))),s.a.createElement("div",{className:"slds-popover__body"},s.a.createElement("dl",{className:"slds-popover__body-list"},s.a.createElement("dt",{className:"slds-m-bottom_small"},s.a.createElement(W.a,{figureLeft:B,flavor:"center"},s.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Opportunities (2+)"))),s.a.createElement("dd",{className:"slds-m-top_x-small"},s.a.createElement("p",{className:"slds-truncate",title:"Tesla - Mule ESB"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Mule ESB")),s.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$500,000"},"$500,000"),s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Dec 15, 2015"},"Dec 15, 2015"))),s.a.createElement("dd",{className:"slds-m-top_x-small"},s.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),s.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),s.a.createElement(D,null)),s.a.createElement("dl",{className:"slds-popover__body-list"},s.a.createElement("dt",{className:"slds-m-bottom_small"},s.a.createElement(W.a,{figureLeft:L,flavor:"center"},s.a.createElement("p",{className:"slds-text-heading_small slds-hyphenate"},"Cases (1)"))),s.a.createElement("dd",{className:"slds-m-top_x-small"},s.a.createElement("p",{className:"slds-truncate",title:"Tesla - Anypoint Studios"},s.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Tesla - Anypoint Studios")),s.a.createElement("dl",{className:"slds-list_horizontal slds-wrap slds-text-body_small"},s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Value"},"Value"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"$60,000"},"$60,000"),s.a.createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Close Date"},"Close Date"),s.a.createElement("dd",{className:"slds-item_detail slds-text-color_weak slds-truncate",title:"Jan 15, 2016"},"Jan 15, 2016"))),s.a.createElement(D,null))))}],A=a(5),C=a.n(A),F="height: 13rem;",I=g.d.uniqueId("dialog-heading-id-"),M=function(e){return s.a.createElement("div",{className:"slds-grid slds-grid_vertical-align-center"},e.dismissButtonLabel&&s.a.createElement("button",{className:"slds-button slds-button_neutral slds-col_bump-right"},e.dismissButtonLabel),e.actionLinkText&&s.a.createElement("span",{className:"slds-popover_prompt__action-link"},s.a.createElement("a",{href:"#",className:"slds-button"},e.actionLinkText)),e.brandButtonLabel&&s.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 s.a.createElement(d.a,{className:C()("slds-popover_prompt",t,e.className),bodyClassName:e.bodyClassName,headingId:I,footer:e.showFooter&&s.a.createElement(M,{dismissButtonLabel:"Dismiss",actionLinkText:"Learn More",brandButtonLabel:"Save"}),closeButton:!0},s.a.createElement("div",{className:"slds-media"},e.symbol&&s.a.createElement("div",{className:"slds-media__figure"},s.a.createElement("span",{className:"slds-icon_container",title:e.assistiveText},s.a.createElement(m.a,{className:C()("slds-icon slds-icon_small slds-icon-text-default",e.iconClassName),sprite:"utility",symbol:e.symbol}),s.a.createElement("span",{className:"slds-assistive-text"},e.assistiveText))),s.a.createElement("div",{className:"slds-media__body"},s.a.createElement("h2",{id:I,className:"slds-popover_prompt__heading"},"Prompt title"),s.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:s.a.createElement(q,{symbol:"prompt"})}],z=[{context:"Prompt",id:"top-left",label:"Positioned: top left",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-left"})},{context:"Prompt",id:"top-center",label:"Positioned: top center",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top"})},{context:"Prompt",id:"top-right",label:"Positioned: top right",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"top-right"})},{context:"Prompt",id:"bottom-right",label:"Positioned: bottom right",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom-right"})},{context:"Prompt",id:"bottom-center",label:"Positioned: bottom center",demoStyles:F,storybookStyles:!0,element:s.a.createElement(q,{symbol:"prompt",showFooter:!0,position:"bottom"})},{context:"Prompt",id:"bottom-left",label:"Positioned: bottom left",demoStyles:F,storybookStyles:!0,element:s.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:s.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:s.a.createElement(q,{symbol:"prompt",position:"top",className:"slds-popover_brand slds-popover_brand-bottom",iconClassName:"slds-popover__icon"})}],H=a(40),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(l.createElement)(n.b,{},Object(l.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(l.createElement)(o.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(l.createElement)(o.a,null,Object(g.f)(d.b)),$({id:"With-Header"},"With Header"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"header")),$({id:"With-Footer"},"With Footer"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"footer")),$({id:"With-Badge"},"With Badge"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"badge")),$({id:"Scrolling-region-with-max-height"},"Scrolling region with max-height"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"scrolling")),V({id:"Widths"},"Widths"),$({id:"Small"},"Small"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-small")),$({id:"Medium"},"Medium"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-medium")),$({id:"Large"},"Large"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-large")),$({id:"Full-Width"},"Full Width"),Object(l.createElement)(o.a,null,Object(g.f)(d.c,"width-full-width")),V({id:"Nubbins"},"Nubbins"),$({id:"Left"},"Left"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Left"),Object(l.createElement)(o.a,null,Object(g.f)(h,"left"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Left Top"),Object(l.createElement)(o.a,null,Object(g.f)(h,"left-top"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Left Bottom"),Object(l.createElement)(o.a,null,Object(g.f)(h,"left-bottom")))),$({id:"Right"},"Right"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Right"),Object(l.createElement)(o.a,null,Object(g.f)(h,"right"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Right Top"),Object(l.createElement)(o.a,null,Object(g.f)(h,"right-top"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Right Bottom"),Object(l.createElement)(o.a,null,Object(g.f)(h,"right-bottom")))),$({id:"Top"},"Top"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Top"),Object(l.createElement)(o.a,null,Object(g.f)(h,"top"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Top Left"),Object(l.createElement)(o.a,null,Object(g.f)(h,"top-left"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Top Right"),Object(l.createElement)(o.a,null,Object(g.f)(h,"top-right")))),$({id:"Bottom"},"Bottom"),Object(l.createElement)(c.a,null,Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Bottom"),Object(l.createElement)(o.a,null,Object(g.f)(h,"bottom"))),Object(l.createElement)(r.a,null,Object(l.createElement)("strong",null,"Bottom Left"),Object(l.createElement)(o.a,null,Object(g.f)(h,"bottom-left"))),Object(l.createElement)(r.a,{columnCount:"1"},Object(l.createElement)("strong",null,"Bottom Right"),Object(l.createElement)(o.a,null,Object(g.f)(h,"bottom-right")))),V({id:"Feedback-States"},"Feedback States"),$({id:"Error"},"Error"),Object(l.createElement)(o.a,null,Object(g.f)(E.c)),U({id:"With-Footer-2"},"With Footer"),Object(l.createElement)(o.a,null,Object(g.f)(E.d,"with-footer")),U({id:"With-Bullet-List"},"With Bullet List"),Object(l.createElement)(o.a,null,Object(g.f)(E.d,"with-bullet-list")),$({id:"Warning"},"Warning"),Object(l.createElement)(o.a,null,Object(g.f)(v)),U({id:"With-Footer-3"},"With Footer"),Object(l.createElement)(o.a,null,Object(g.f)(N,"with-footer")),V({id:"Examples"},"Examples"),$({id:"Walkthrough"},"Walkthrough"),Object(l.createElement)(o.a,null,Object(g.f)(O)),U({id:"Micro-Setup"},"Micro Setup"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-dark")),U({id:"Micro-Setup-Alternate"},"Micro Setup - Alternate"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-alternate-dark")),U({id:"Micro-Setup-In-Page"},"Micro Setup - In Page"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-in-page-dark")),U({id:"Micro-Setup-Inline-Form"},"Micro Setup - Inline Form"),Object(l.createElement)(o.a,null,Object(g.f)(j,"micro-setup-inline-form-dark")),U({id:"Action"},"Action"),Object(l.createElement)(o.a,null,Object(g.f)(j,"action-popover-dark")),U({id:"Action-With-Heading"},"Action - With Heading"),Object(l.createElement)(o.a,null,Object(g.f)(j,"action-popover-heading-dark")),U({id:"Action-With-Link"},"Action - With Link"),Object(l.createElement)(o.a,null,Object(g.f)(j,"action-popover-with-link-dark")),$({id:"Feature"},"Feature"),Object(l.createElement)(o.a,null,Object(g.f)(P)),U({id:"With-icon-and-text"},"With icon and text"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-text-dark")),U({id:"With-icon-header-and-text"},"With icon, header, and text"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-header-text-dark")),U({id:"With-icon-header-text-and-link"},"With icon, header, text and link"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-header-text-link-dark")),U({id:"With-icon-header-text-and-footer"},"With icon, header, text and footer"),Object(l.createElement)(o.a,null,Object(g.f)(S,"icon-header-text-footer-dark")),$({id:"Record-Preview-Panel"},"Record Preview Panel"),Object(l.createElement)(o.a,null,Object(g.f)(T)),$({id:"Prompt"},"Prompt"),Object(l.createElement)(o.a,null,Object(g.f)(R)),U({id:"Positioned-top-left"},"Positioned top left"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-left")),U({id:"Positioned-top-center"},"Positioned top center"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-center")),U({id:"Positioned-top-right"},"Positioned top right"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"top-right")),U({id:"Positioned-bottom-right"},"Positioned bottom right"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-right")),U({id:"Positioned-bottom-center"},"Positioned bottom center"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-center")),U({id:"Positioned-bottom-left"},"Positioned bottom left"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"bottom-left")),U({id:"With-brand-color-and-footer"},"With brand color and footer"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-with-footer")),U({id:"With-brand-color-no-footer"},"With brand color - no footer"),Object(l.createElement)(o.a,{demoStyles:"height: 250px;"},Object(g.f)(z,"brand-without-footer")),V({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(l.createElement)(i.a,{header:"A Note About z-index"},Object(l.createElement)("p",null,"By default, Popovers use the ",Object(l.createElement)("code",null,"$z-index-dialog")," (",Object(l.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(l.createElement)("p",null,"For this particular use case, the ",Object(l.createElement)("code",null,"--slds-c-popover-position-zindex")," ",Object(l.createElement)("a",{href:"/platforms/lightning/styling-hooks/"},"Styling Hook")," allows developers to change the z-index value. ",Object(l.createElement)("strong",null,"Please note"),": when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.")),Object(l.createElement)(H.a,{name:"popovers",type:"component"}))},Z=function(){return Object(n.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([~~774~~,0]),c()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},~~774~~: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(61),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([775,0]),c()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},775: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(46),s=(c(13),c(1)),u=c(74),m=c(61),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-indicator/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-indicator/docs.mdx.js"]=function(e){function t(t){for(var l,c,n=t[0],i=t[1],o=t[2],m=0,p=[];m<n.length;m++)c=n[m],Object.prototype.hasOwnProperty.call(r,c)&&r[c]&&p.push(r[c][0]),r[c]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(d&&d(t);p.length;)p.shift()();return s.push.apply(s,o\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],l=!0,n=1;n<a.length;n++){var i=a[n];0!==r[i]&&(l=!1)}l&&(s.splice(t--,1),e=c(c.s=a[0]))}return e}var l={},r={58:0},s=[];function c(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,c),a.l=!0,a.exports}c.m=e,c.c=l,c.d=function(e,t,a){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(c.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)c.d(a,l,function(t){return e[t]}.bind(null,l));return a},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=n.push.bind(n);n.push=t,n=n.slice();for(var o=0;o<n.length;o++)t(n[o]);var d=i;return s.push([770,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},770:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return x}));var l=a(0),r=a.n(l),s=a(4),c=a(2),n=a(27),i=a(15),o=a(14),d=a(5),m=a.n(d),p=a(50),u=a(9),b=a(21),E=a(61),O=function(e){return r.a.createElement("div",{className:m()("slds-progress",e.className)},r.a.createElement("ol",{className:"slds-progress__list"},e.children),r.a.createElement(E.a,{className:"slds-progress-bar_x-small",value:e.value}))},j=function(e){return r.a.createElement("li",{className:m()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?r.a.createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},r.a.createElement(u.a,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),r.a.createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?r.a.createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},r.a.createElement(u.a,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),r.a.createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):r.a.createElement("div",{className:"slds-progress__marker",tabIndex:"0"},r.a.createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))},h=(p.a,b.a,b.b,b.e,b.c,b.d,a(59)),v=a(39),S=s.c.code,g=s.c.h2,f=s.c.h3,_=s.c.p,y=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"doc lead"},"A progress indicator component communicates to the user the progress of a particular process."),Object(l.createElement)(c.a,{exampleOnly:!0},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5"))),g({id:"About-Progress-Indicator"},"About Progress Indicator"),f({id:"Implementation-Requirements"},"Implementation Requirements"),_({},"The ",S({},"slds-progress-bar")," accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the ",S({},"div")," with class ",S({},"slds-progress-bar__value")," using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators."),f({id:"Accessibility"},"Accessibility"),_({},"As the percentage of completion changes, be sure to update the ",S({},"aria-valuenow")," property on the ",S({},"<div>")," with ",S({},'class="slds-progress-bar"'),", as well as the ",S({},"slds-assistive-text")," ",S({},"<span>"),"."),Object(l.createElement)(n.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-progress-bar slds-progress-bar_x-small","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"50",role:"progressbar"},Object(l.createElement)("span",{className:"slds-progress-bar__value",style:{width:"50%"}},Object(l.createElement)("span",{className:"slds-assistive-text"},"Progress: 50%")))),f({id:"Mobile"},"Mobile"),Object(l.createElement)(v.a,{patternSpecificText:"progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(l.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for progress indicators"},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5"))),g({id:"Base"},"Base"),Object(l.createElement)(i.a,{title:"Progress Indicator Base Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"0"},Object(l.createElement)(j,{active:!0},"Step 1"),Object(l.createElement)(j,null,"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),g({id:"Horizontal"},"Horizontal"),f({id:"Active-Step"},"Active Step"),_({},"When a step becomes active, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-is-active"),"."),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step is active, be sure to append "- Active" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 1 - Active"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Active Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"0"},Object(l.createElement)(j,{active:!0},"Step 1"),Object(l.createElement)(j,null,"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Completed-Step"},"Completed Step"),_({},"When the step is completed, the ",S({},".slds-is-active")," class should be replaced with the class ",S({},".slds-is-completed")," on ",S({},".slds-progress__item"),". At that point, the ",S({},".slds-progress__item"),' element will receive a "success" icon, providing feedback that the step has been completed.'),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step is completed, be sure to append "- Completed" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 2 - Completed"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Done Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Error-in-a-Step"},"Error in a Step"),_({},"When an error has occurred on a step, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-has-error"),"."),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step has an error, be sure to append "- Error" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 3 - Error"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Done Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{error:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Step-Title-Tooltip"},"Step Title Tooltip"),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,"The name of the step should be included with the ",Object(l.createElement)("code",null,"slds-assistive-text")," class as the inner text of the step's ",Object(l.createElement)("code",null,"div")," so that it is available to screen readers.")),Object(l.createElement)(i.a,{title:"Progress Indicator Tooltip Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)("div",{style:{padding:"3.5rem 1rem 0"}},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")),Object(l.createElement)(p.a,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"1rem",left:"calc(50% + 6px)",transform:"translateX(-50%)"}},"Verify Email")))),f({id:"In-a-Modal"},"In a Modal"),Object(l.createElement)(i.a,{title:"Progress Indicator Horizontal in Modal"},Object(l.createElement)(c.a,{isViewport:!0,demoStyles:"height: 640px;"},Object(l.createElement)("div",null,Object(l.createElement)(b.a,null,Object(l.createElement)(b.b,{className:"slds-modal_large","aria-labelledby":"header43"},Object(l.createElement)(b.e,null,Object(l.createElement)("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),Object(l.createElement)(b.c,{className:"slds-grow slds-p-around_medium"}),Object(l.createElement)(b.d,{className:"slds-grid slds-grid_align-spread"},Object(l.createElement)("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),Object(l.createElement)(O,{className:"slds-progress_shade",value:"25"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{active:!0},"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")),Object(l.createElement)("button",{className:"slds-button slds-button_brand"},"Save"))))))),f({id:"On-a-Gray-Background"},"On a Gray Background"),Object(l.createElement)(i.a,{title:"Progress Indicator Horizontal Gray Background"},Object(l.createElement)(c.a,{demoStyles:"background-color: #F3F2F2; padding: 1rem;"},Object(l.createElement)(O,{className:"slds-progress_shade",value:"25"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{active:!0},"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),g({id:"Vertical"},"Vertical"),_({},"To display a vertical progress indicator, the ",S({},"<div>")," with class ",S({},".slds-progress")," should also get the class ",S({},".slds-progress_vertical"),". The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip."),Object(l.createElement)(o.a,{type:"note",header:"Implementation Note"},Object(l.createElement)("p",null,"The key markup difference between the horizontal and vertical variants is the progress markers. Horizontal progress indicators use ",Object(l.createElement)("code",null,"<button>")," for each step, whereas Vertical progress indicator steps are not interactive and therefore simply use ",Object(l.createElement)("code",null,"<div>"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Green-Success"},"Green Success"),_({},"To create a green completed step, the ",S({},".slds-progress__item")," element should also receive the ",S({},".slds-is-completed")," class. In addition, the ",S({},"<span>")," with class ",S({},".slds-progress__marker_icon")," should also get the class ",S({},"slds-progress__marker_icon-success"),"."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical Success"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0,hasSuccessMarker:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Error-in-a-Step-2"},"Error in a Step"),_({},"When an error has occurred on a step, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-has-error"),"."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical Success"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{error:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Multiline-Step-Titles"},"Multiline Step Titles"),_({},"The vertical progress indicator also supports multiline step descriptions."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent eget pellentesque lacus. Suspendisse euismod magna nec nulla ornare viverra. Sed pretium, eros ullamcorper scelerisque placerat, nunc velit volutpat libero, a semper lacus urna eget nibh. Maecenas eget tortor pulvinar, scelerisque nibh sed, fringilla erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ultricies dui turpis, at posuere dolor convallis vitae."),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))))},x=function(){return Object(s.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-indicator/docs.mdx.js"]=function(e){function t(t){for(var l,c,n=t[0],i=t[1],o=t[2],m=0,p=[];m<n.length;m++)c=n[m],Object.prototype.hasOwnProperty.call(r,c)&&r[c]&&p.push(r[c][0]),r[c]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(d&&d(t);p.length;)p.shift()();return s.push.apply(s,o\|\|[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],l=!0,n=1;n<a.length;n++){var i=a[n];0!==r[i]&&(l=!1)}l&&(s.splice(t--,1),e=c(c.s=a[0]))}return e}var l={},r={58:0},s=[];function c(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,c),a.l=!0,a.exports}c.m=e,c.c=l,c.d=function(e,t,a){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},c.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.t=function(e,t){if(1&t&&(e=c(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(c.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)c.d(a,l,function(t){return e[t]}.bind(null,l));return a},c.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(t,"a",t),t},c.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},c.p="/assets/scripts/bundle/";var n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],i=n.push.bind(n);n.push=t,n=n.slice();for(var o=0;o<n.length;o++)t(n[o]);var d=i;return s.push([771,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},771:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return x}));var l=a(0),r=a.n(l),s=a(4),c=a(2),n=a(27),i=a(15),o=a(13),d=a(5),m=a.n(d),p=a(50),u=a(9),b=a(21),E=a(61),O=function(e){return r.a.createElement("div",{className:m()("slds-progress",e.className)},r.a.createElement("ol",{className:"slds-progress__list"},e.children),r.a.createElement(E.a,{className:"slds-progress-bar_x-small",value:e.value}))},j=function(e){return r.a.createElement("li",{className:m()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?r.a.createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},r.a.createElement(u.a,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),r.a.createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?r.a.createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},r.a.createElement(u.a,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),r.a.createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):r.a.createElement("div",{className:"slds-progress__marker",tabIndex:"0"},r.a.createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))},h=(p.a,b.a,b.b,b.e,b.c,b.d,a(59)),v=a(39),S=s.c.code,g=s.c.h2,f=s.c.h3,_=s.c.p,y=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"doc lead"},"A progress indicator component communicates to the user the progress of a particular process."),Object(l.createElement)(c.a,{exampleOnly:!0},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5"))),g({id:"About-Progress-Indicator"},"About Progress Indicator"),f({id:"Implementation-Requirements"},"Implementation Requirements"),_({},"The ",S({},"slds-progress-bar")," accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the ",S({},"div")," with class ",S({},"slds-progress-bar__value")," using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators."),f({id:"Accessibility"},"Accessibility"),_({},"As the percentage of completion changes, be sure to update the ",S({},"aria-valuenow")," property on the ",S({},"<div>")," with ",S({},'class="slds-progress-bar"'),", as well as the ",S({},"slds-assistive-text")," ",S({},"<span>"),"."),Object(l.createElement)(n.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-progress-bar slds-progress-bar_x-small","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"50",role:"progressbar"},Object(l.createElement)("span",{className:"slds-progress-bar__value",style:{width:"50%"}},Object(l.createElement)("span",{className:"slds-assistive-text"},"Progress: 50%")))),f({id:"Mobile"},"Mobile"),Object(l.createElement)(v.a,{patternSpecificText:"progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(l.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for progress indicators"},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5"))),g({id:"Base"},"Base"),Object(l.createElement)(i.a,{title:"Progress Indicator Base Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"0"},Object(l.createElement)(j,{active:!0},"Step 1"),Object(l.createElement)(j,null,"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),g({id:"Horizontal"},"Horizontal"),f({id:"Active-Step"},"Active Step"),_({},"When a step becomes active, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-is-active"),"."),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step is active, be sure to append "- Active" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 1 - Active"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Active Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"0"},Object(l.createElement)(j,{active:!0},"Step 1"),Object(l.createElement)(j,null,"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Completed-Step"},"Completed Step"),_({},"When the step is completed, the ",S({},".slds-is-active")," class should be replaced with the class ",S({},".slds-is-completed")," on ",S({},".slds-progress__item"),". At that point, the ",S({},".slds-progress__item"),' element will receive a "success" icon, providing feedback that the step has been completed.'),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step is completed, be sure to append "- Completed" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 2 - Completed"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Done Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Error-in-a-Step"},"Error in a Step"),_({},"When an error has occurred on a step, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-has-error"),"."),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step has an error, be sure to append "- Error" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 3 - Error"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Done Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{error:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Step-Title-Tooltip"},"Step Title Tooltip"),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,"The name of the step should be included with the ",Object(l.createElement)("code",null,"slds-assistive-text")," class as the inner text of the step's ",Object(l.createElement)("code",null,"div")," so that it is available to screen readers.")),Object(l.createElement)(i.a,{title:"Progress Indicator Tooltip Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)("div",{style:{padding:"3.5rem 1rem 0"}},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")),Object(l.createElement)(p.a,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"1rem",left:"calc(50% + 6px)",transform:"translateX(-50%)"}},"Verify Email")))),f({id:"In-a-Modal"},"In a Modal"),Object(l.createElement)(i.a,{title:"Progress Indicator Horizontal in Modal"},Object(l.createElement)(c.a,{isViewport:!0,demoStyles:"height: 640px;"},Object(l.createElement)("div",null,Object(l.createElement)(b.a,null,Object(l.createElement)(b.b,{className:"slds-modal_large","aria-labelledby":"header43"},Object(l.createElement)(b.e,null,Object(l.createElement)("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),Object(l.createElement)(b.c,{className:"slds-grow slds-p-around_medium"}),Object(l.createElement)(b.d,{className:"slds-grid slds-grid_align-spread"},Object(l.createElement)("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),Object(l.createElement)(O,{className:"slds-progress_shade",value:"25"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{active:!0},"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")),Object(l.createElement)("button",{className:"slds-button slds-button_brand"},"Save"))))))),f({id:"On-a-Gray-Background"},"On a Gray Background"),Object(l.createElement)(i.a,{title:"Progress Indicator Horizontal Gray Background"},Object(l.createElement)(c.a,{demoStyles:"background-color: #F3F2F2; padding: 1rem;"},Object(l.createElement)(O,{className:"slds-progress_shade",value:"25"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{active:!0},"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),g({id:"Vertical"},"Vertical"),_({},"To display a vertical progress indicator, the ",S({},"<div>")," with class ",S({},".slds-progress")," should also get the class ",S({},".slds-progress_vertical"),". The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip."),Object(l.createElement)(o.a,{type:"note",header:"Implementation Note"},Object(l.createElement)("p",null,"The key markup difference between the horizontal and vertical variants is the progress markers. Horizontal progress indicators use ",Object(l.createElement)("code",null,"<button>")," for each step, whereas Vertical progress indicator steps are not interactive and therefore simply use ",Object(l.createElement)("code",null,"<div>"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Green-Success"},"Green Success"),_({},"To create a green completed step, the ",S({},".slds-progress__item")," element should also receive the ",S({},".slds-is-completed")," class. In addition, the ",S({},"<span>")," with class ",S({},".slds-progress__marker_icon")," should also get the class ",S({},"slds-progress__marker_icon-success"),"."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical Success"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0,hasSuccessMarker:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Error-in-a-Step-2"},"Error in a Step"),_({},"When an error has occurred on a step, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-has-error"),"."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical Success"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{error:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Multiline-Step-Titles"},"Multiline Step Titles"),_({},"The vertical progress indicator also supports multiline step descriptions."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent eget pellentesque lacus. Suspendisse euismod magna nec nulla ornare viverra. Sed pretium, eros ullamcorper scelerisque placerat, nunc velit volutpat libero, a semper lacus urna eget nibh. Maecenas eget tortor pulvinar, scelerisque nibh sed, fringilla erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ultricies dui turpis, at posuere dolor convallis vitae."),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))))},x=function(){return Object(s.a)(y())}}});

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([~~778~~,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},~~778~~: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())}}});
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([779,0]),r()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},779: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(13)),s=r(1),c=r(78),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/prompt/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/prompt/docs.mdx.js"]=function(e){function t(t){for(var o,r,i=t[0],l=t[1],d=t[2],u=0,m=[];u<i.length;u++)r=i[u],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&m.push(s[r][0]),s[r]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);for(c&&c(t);m.length;)m.shift()();return n.push.apply(n,d\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,i=1;i<a.length;i++){var l=a[i];0!==s[l]&&(o=!1)}o&&(n.splice(t--,1),e=r(r.s=a[0]))}return e}var o={},s={60:0},n=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=o,r.d=function(e,t,a){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(a,o,function(t){return e[t]}.bind(null,o));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var c=l;return n.push([~~804~~,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},~~804~~:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var o=a(0),s=a.n(o),n=a(4),r=a(21),i=s.a.createElement("div",{className:"demo-only",style:{height:"24rem"}},s.a.createElement(r.a,null,s.a.createElement(r.b,{tabIndex:"0",role:"alertdialog","aria-labelledby":"prompt-heading-id","aria-describedby":"prompt-message-wrapper",className:"slds-modal_prompt",closeButton:!1},s.a.createElement(r.e,{className:"slds-theme_error slds-theme_alert-texture"},s.a.createElement("h1",{className:"slds-text-heading_medium",id:"prompt-heading-id"},"Service unavailable")),s.a.createElement(r.c,{className:"slds-p-around_medium",id:"prompt-message-wrapper"},s.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.")),s.a.createElement(r.d,{className:"slds-theme_default"},s.a.createElement("button",{className:"slds-button slds-button_neutral"},"Got It"))))),l=a(2),d=(a(1),n.c.a),c=n.c.code,u=n.c.h2,m=n.c.h3,h=n.c.h4,p=n.c.li,f=n.c.p,b=n.c.ul,y=function(){return Object(o.createElement)(n.b,{},Object(o.createElement)("div",{className:"doc lead"},"Prompt notice grabs the user’s attention & alerts them of system-related issues/updates."),Object(o.createElement)(l.a,{exampleOnly:!0},i),u({id:"About-Prompt"},"About Prompt"),f({},"A prompt uses the ",d({href:"/components/modals"},"base modal component")," and then adds the class ",c({},".slds-modal_prompt")," to the overall ",c({},".slds-modal"),". The utilities > themes > colors class is placed on the ",c({},".slds-modal__head")," to create the color of the header. In the example, we illustrate using ",c({},".slds-theme_error"),". The class ",c({},".slds-theme_alert-texture")," should be applied to create the striped gradient. The ",c({},".slds-modal__footer")," receives the class ",c({},".slds-theme_default"),"."),m({id:"Implementation-Guidelines"},"Implementation Guidelines"),h({id:"Markup"},"Markup"),f({},"Expected markup is the same as Modals (/components/modals), but with the following differences):"),b({},p({},"Modal has ",c({},'role="alertdialog"')),p({},"Modal has an ",c({},"aria-describedby")," attribute that matches the id of the modal message container."),p({},"Modal message container container should have ",c({},'tabindex="0"'))),h({id:"Keyboard-Interaction"},"Keyboard Interaction"),f({},"Expected keyboard interaction is the ",d({href:"/components/modals"},"same as Modals"),", with the addition of:"),b({},p({},"Modal message container should take initial focus")),m({id:"Accessibility"},"Accessibility"),f({},"Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different ",c({},"role")," of ",c({},"alertdialog")," to indicate their severity. Like modals they should be labelled by their headings, but additionally they should be described by the message details of the prompt."),f({},"The element containing the prompt message should be the target focus of the browser when it is displayed, which is why we add ",c({},'tabindex="0"')," to ",c({},"slds-modal__container"),"."),f({},"There is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal."),u({id:"Base"},"Base"),Object(o.createElement)(l.a,null,i))},g=function(){return Object(n.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/prompt/docs.mdx.js"]=function(e){function t(t){for(var o,r,i=t[0],l=t[1],d=t[2],u=0,m=[];u<i.length;u++)r=i[u],Object.prototype.hasOwnProperty.call(s,r)&&s[r]&&m.push(s[r][0]),s[r]=0;for(o in l)Object.prototype.hasOwnProperty.call(l,o)&&(e[o]=l[o]);for(c&&c(t);m.length;)m.shift()();return n.push.apply(n,d\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],o=!0,i=1;i<a.length;i++){var l=a[i];0!==s[l]&&(o=!1)}o&&(n.splice(t--,1),e=r(r.s=a[0]))}return e}var o={},s={60:0},n=[];function r(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,r),a.l=!0,a.exports}r.m=e,r.c=o,r.d=function(e,t,a){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(a,o,function(t){return e[t]}.bind(null,o));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],l=i.push.bind(i);i.push=t,i=i.slice();for(var d=0;d<i.length;d++)t(i[d]);var c=l;return n.push([805,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},805:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var o=a(0),s=a.n(o),n=a(4),r=a(21),i=s.a.createElement("div",{className:"demo-only",style:{height:"24rem"}},s.a.createElement(r.a,null,s.a.createElement(r.b,{tabIndex:"0",role:"alertdialog","aria-labelledby":"prompt-heading-id","aria-describedby":"prompt-message-wrapper",className:"slds-modal_prompt",closeButton:!1},s.a.createElement(r.e,{className:"slds-theme_error slds-theme_alert-texture"},s.a.createElement("h1",{className:"slds-text-heading_medium",id:"prompt-heading-id"},"Service unavailable")),s.a.createElement(r.c,{className:"slds-p-around_medium",id:"prompt-message-wrapper"},s.a.createElement("p",null,"Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.")),s.a.createElement(r.d,{className:"slds-theme_default"},s.a.createElement("button",{className:"slds-button slds-button_neutral"},"Got It"))))),l=a(2),d=(a(1),n.c.a),c=n.c.code,u=n.c.h2,m=n.c.h3,h=n.c.h4,p=n.c.li,f=n.c.p,b=n.c.ul,y=function(){return Object(o.createElement)(n.b,{},Object(o.createElement)("div",{className:"doc lead"},"Prompt notice grabs the user’s attention & alerts them of system-related issues/updates."),Object(o.createElement)(l.a,{exampleOnly:!0},i),u({id:"About-Prompt"},"About Prompt"),f({},"A prompt uses the ",d({href:"/components/modals"},"base modal component")," and then adds the class ",c({},".slds-modal_prompt")," to the overall ",c({},".slds-modal"),". The utilities > themes > colors class is placed on the ",c({},".slds-modal__head")," to create the color of the header. In the example, we illustrate using ",c({},".slds-theme_error"),". The class ",c({},".slds-theme_alert-texture")," should be applied to create the striped gradient. The ",c({},".slds-modal__footer")," receives the class ",c({},".slds-theme_default"),"."),m({id:"Implementation-Guidelines"},"Implementation Guidelines"),h({id:"Markup"},"Markup"),f({},"Expected markup is the same as Modals (/components/modals), but with the following differences):"),b({},p({},"Modal has ",c({},'role="alertdialog"')),p({},"Modal has an ",c({},"aria-describedby")," attribute that matches the id of the modal message container."),p({},"Modal message container container should have ",c({},'tabindex="0"'))),h({id:"Keyboard-Interaction"},"Keyboard Interaction"),f({},"Expected keyboard interaction is the ",d({href:"/components/modals"},"same as Modals"),", with the addition of:"),b({},p({},"Modal message container should take initial focus")),m({id:"Accessibility"},"Accessibility"),f({},"Prompt notifications are similar to modals, in that they are a focus trap, but they should take a slightly different ",c({},"role")," of ",c({},"alertdialog")," to indicate their severity. Like modals they should be labelled by their headings, but additionally they should be described by the message details of the prompt."),f({},"The element containing the prompt message should be the target focus of the browser when it is displayed, which is why we add ",c({},'tabindex="0"')," to ",c({},"slds-modal__container"),"."),f({},"There is no requirement for a close button, as the confirmation button should be used to dismiss the prompt, along with the usual Esc key dismissal."),u({id:"Base"},"Base"),Object(o.createElement)(l.a,null,i))},g=function(){return Object(n.a)(y())}}});