npm - @salesforce-ux/design-system - Versions diffs - 2.25.3 → 2.25.4 - Mend

@salesforce-ux/design-system 2.25.3 → 2.25.4

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=function(e){function t(t){for(var a,c,n=t[0],o=t[1],s=t[2],u=0,b=[];u<n.length;u++)c=n[u],Object.prototype.hasOwnProperty.call(r,c)&&r[c]&&b.push(r[c][0]),r[c]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,s\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,n=1;n<l.length;n++){var o=l[n];0!==r[o]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=l[0]))}return e}var a={},r={20:0},i=[];function c(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,c),l.l=!0,l.exports}c.m=e,c.c=a,c.d=function(e,t,l){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(l,a,function(t){return e[t]}.bind(null,a));return l},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\|\|[],o=n.push.bind(n);n.push=t,n=n.slice();for(var s=0;s<n.length;s++)t(n[s]);var d=o;return i.push([797,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},797:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return v})),l.d(t,"getContents",(function(){return w}));var a=l(0),r=l.n(a),i=l(4),c=l(2),n=(l(27),l(14),l(39)),o=l(31),s=l(80),d=l(8),u=l(11),b=r.a.createElement(s.a,null),h=[{id:"checked",label:"Checked",element:r.a.createElement(s.a,{isChecked:!0})},{id:"disabled",label:"Disabled",element:r.a.createElement(s.a,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:r.a.createElement(s.a,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:r.a.createElement(s.a,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:r.a.createElement(s.a,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:r.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},r.a.createElement(u.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:r.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},r.a.createElement(u.a,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],m=[{id:"help-text-icon",label:"Help text icon",element:r.a.createElement(s.a,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:r.a.createElement(s.a,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:r.a.createElement("div",{style:{paddingTop:"3rem"}},r.a.createElement(s.a,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],p=l(1),f=l(38),O=i.c.a,x=i.c.code,k=i.c.h2,j=i.c.h3,E=i.c.h4,y=i.c.h5,g=i.c.p,v=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(p.f)(o.b)),k({id:"About-Checkbox"},"About Checkbox"),g({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),j({id:"Accessibility"},"Accessibility"),g({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),g({},"Custom checkboxes are created by applying the ",x({},".slds-checkbox")," class to a ",x({},"<label>")," element. To remain accessible to all user agents, place ",x({},"<input>")," with ",x({},'type="checkbox"')," inside the ",x({},"<label>")," element. The ",x({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",x({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",x({},".slds-form-element__label")," contains the label text."),g({},"When a single checkbox is required, ",x({},'<div class="slds-checkbox">')," should get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",x({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),g({},"When a checkbox group is required, the ",x({},"<fieldset>")," should receive the class ",x({},".slds-is-required"),". The ",x({},"<legend>")," should then get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),g({},"As SLDS checkboxes rely on the ",x({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),j({id:"Mobile"},"Mobile"),Object(a.createElement)(f.a,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},Object(p.f)(o.b)),k({id:"Base"},"Base"),g({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),g({},"The ",O({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),Object(a.createElement)(c.a,null,Object(p.f)(o.b)),j({id:"States"},"States"),E({id:"Required"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required checkbox example"},Object(p.f)(o.d,"required")),E({id:"Error"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Checkbox in error state example"},Object(p.f)(o.d,"error")),E({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"disabled")),y({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"checked-and-disabled")),j({id:"Examples"},"Examples"),E({id:"Group"},"Group"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox example"},Object(p.f)(o.c,"group")),y({id:"Required-2"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox example"},Object(p.f)(o.c,"group-required")),y({id:"Error-2"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group error checkbox example"},Object(p.f)(o.c,"group-error")),y({id:"Disabled-2"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-disabled")),E({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"rtl")),k({id:"Form-Element"},"Form Element"),Object(a.createElement)(c.a,null,Object(p.f)(b)),j({id:"States-2"},"States"),E({id:"Checked"},"Checked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"checked")),E({id:"Disabled-3"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(h,"disabled")),E({id:"Checked-and-Disabled-2"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(h,"checked-disabled")),E({id:"Error-3"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(h,"error")),E({id:"Required-3"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(h,"required")),j({id:"View-mode"},"View mode"),g({},"View mode is the read only state of a checkbox form element."),E({id:"Unchecked"},"Unchecked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"view-mode-unchecked")),E({id:"Checked-2"},"Checked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"view-mode-checked")),j({id:"Examples-2"},"Examples"),E({id:"With-help-text"},"With help text"),Object(a.createElement)(c.a,null,Object(p.f)(m,"help-text-icon")),E({id:"Required-with-help-text"},"Required with help text"),Object(a.createElement)(c.a,null,Object(p.f)(m,"required-help-text-icon")),E({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),Object(a.createElement)(c.a,null,Object(p.f)(m,"required-help-text-icon-tooltip")),k({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(n.a,{name:"checkbox",type:"component"}))},w=function(){return Object(i.a)(v())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/checkbox/docs.mdx.js"]=function(e){function t(t){for(var a,c,n=t[0],o=t[1],s=t[2],u=0,b=[];u<n.length;u++)c=n[u],Object.prototype.hasOwnProperty.call(r,c)&&r[c]&&b.push(r[c][0]),r[c]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(d&&d(t);b.length;)b.shift()();return i.push.apply(i,s\|\|[]),l()}function l(){for(var e,t=0;t<i.length;t++){for(var l=i[t],a=!0,n=1;n<l.length;n++){var o=l[n];0!==r[o]&&(a=!1)}a&&(i.splice(t--,1),e=c(c.s=l[0]))}return e}var a={},r={20:0},i=[];function c(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,c),l.l=!0,l.exports}c.m=e,c.c=a,c.d=function(e,t,l){c.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:l})},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 l=Object.create(null);if(c.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)c.d(l,a,function(t){return e[t]}.bind(null,a));return l},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\|\|[],o=n.push.bind(n);n.push=t,n=n.slice();for(var s=0;s<n.length;s++)t(n[s]);var d=o;return i.push([797,0]),l()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},797:function(e,t,l){"use strict";l.r(t),l.d(t,"getElement",(function(){return v})),l.d(t,"getContents",(function(){return w}));var a=l(0),r=l.n(a),i=l(4),c=l(2),n=(l(27),l(14),l(39)),o=l(32),s=l(80),d=l(8),u=l(11),b=r.a.createElement(s.a,null),h=[{id:"checked",label:"Checked",element:r.a.createElement(s.a,{isChecked:!0})},{id:"disabled",label:"Disabled",element:r.a.createElement(s.a,{isDisabled:!0})},{id:"checked-disabled",label:"Checked and Disabled",element:r.a.createElement(s.a,{isChecked:!0,isDisabled:!0})},{id:"error",label:"Error",element:r.a.createElement(s.a,{isRequired:!0,hasError:!0,inlineMessage:"This field is required"})},{id:"required",label:"Required",element:r.a.createElement(s.a,{isRequired:!0})},{id:"view-mode-unchecked",label:"View mode - Unchecked",element:r.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},r.a.createElement(u.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}))},{id:"view-mode-checked",label:"View mode - Checked",element:r.a.createElement(d.b,{labelContent:"Form Element Label",isViewMode:!0},r.a.createElement(u.a,{symbol:"check",size:"x-small",useCurrentColor:!0,assistiveText:"True",title:"True"}))}],m=[{id:"help-text-icon",label:"Help text icon",element:r.a.createElement(s.a,{hasTooltip:!0})},{id:"required-help-text-icon",label:"Required with Help text icon",element:r.a.createElement(s.a,{isRequired:!0,hasTooltip:!0})},{id:"required-help-text-icon-tooltip",label:"Required with Help text icon, showing tooltip",element:r.a.createElement("div",{style:{paddingTop:"3rem"}},r.a.createElement(s.a,{isRequired:!0,hasTooltip:!0,showTooltip:!0}))}],p=l(1),f=l(38),O=i.c.a,x=i.c.code,k=i.c.h2,j=i.c.h3,E=i.c.h4,y=i.c.h5,g=i.c.p,v=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"doc lead"},"A checkable input that communicates if an option is true, false or indeterminate"),Object(a.createElement)(c.a,{exampleOnly:!0},Object(p.f)(o.b)),k({id:"About-Checkbox"},"About Checkbox"),g({},"The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work."),j({id:"Accessibility"},"Accessibility"),g({},"Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question."),g({},"Custom checkboxes are created by applying the ",x({},".slds-checkbox")," class to a ",x({},"<label>")," element. To remain accessible to all user agents, place ",x({},"<input>")," with ",x({},'type="checkbox"')," inside the ",x({},"<label>")," element. The ",x({},"<input>")," is then visually hidden, and the styling is placed on a span with the ",x({},".slds-checkbox_faux")," class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with ",x({},".slds-form-element__label")," contains the label text."),g({},"When a single checkbox is required, ",x({},'<div class="slds-checkbox">')," should get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM, directly before the ",x({},'<input type="checkbox" />')," for visual indication that the checkbox is required."),g({},"When a checkbox group is required, the ",x({},"<fieldset>")," should receive the class ",x({},".slds-is-required"),". The ",x({},"<legend>")," should then get ",x({},'<abbr class="required" title="required"></abbr>')," added to the DOM for visual indication that the checkbox group is required."),g({},"As SLDS checkboxes rely on the ",x({},":checked")," pseudo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input."),j({id:"Mobile"},"Mobile"),Object(a.createElement)(f.a,{patternSpecificText:"checkboxes will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as having larger label text"}),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for checkboxes"},Object(p.f)(o.b)),k({id:"Base"},"Base"),g({},"The base variant of a checkbox is a single boolean value. The base checkbox is consumed by both a grouped checkbox and a checkbox within a form element."),g({},"The ",O({href:"#Form-Element"},"form element variant")," accommodates a top level label and additional functionality such as like help text and read only mode. Help text is not supported on a single checkbox."),Object(a.createElement)(c.a,null,Object(p.f)(o.b)),j({id:"States"},"States"),E({id:"Required"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required checkbox example"},Object(p.f)(o.d,"required")),E({id:"Error"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Checkbox in error state example"},Object(p.f)(o.d,"error")),E({id:"Disabled"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"disabled")),y({id:"Checked-and-Disabled"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.d,"checked-and-disabled")),j({id:"Examples"},"Examples"),E({id:"Group"},"Group"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group checkbox example"},Object(p.f)(o.c,"group")),y({id:"Required-2"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-required")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Required group checkbox example"},Object(p.f)(o.c,"group-required")),y({id:"Error-2"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-error")),Object(a.createElement)(c.a,{frameOnly:!0,frameTitle:"Group error checkbox example"},Object(p.f)(o.c,"group-error")),y({id:"Disabled-2"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"group-disabled")),E({id:"RTL-(right-to-left-direction)"},"RTL (right to left direction)"),Object(a.createElement)(c.a,null,Object(p.f)(o.c,"rtl")),k({id:"Form-Element"},"Form Element"),Object(a.createElement)(c.a,null,Object(p.f)(b)),j({id:"States-2"},"States"),E({id:"Checked"},"Checked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"checked")),E({id:"Disabled-3"},"Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(h,"disabled")),E({id:"Checked-and-Disabled-2"},"Checked and Disabled"),Object(a.createElement)(c.a,null,Object(p.f)(h,"checked-disabled")),E({id:"Error-3"},"Error"),Object(a.createElement)(c.a,null,Object(p.f)(h,"error")),E({id:"Required-3"},"Required"),Object(a.createElement)(c.a,null,Object(p.f)(h,"required")),j({id:"View-mode"},"View mode"),g({},"View mode is the read only state of a checkbox form element."),E({id:"Unchecked"},"Unchecked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"view-mode-unchecked")),E({id:"Checked-2"},"Checked"),Object(a.createElement)(c.a,null,Object(p.f)(h,"view-mode-checked")),j({id:"Examples-2"},"Examples"),E({id:"With-help-text"},"With help text"),Object(a.createElement)(c.a,null,Object(p.f)(m,"help-text-icon")),E({id:"Required-with-help-text"},"Required with help text"),Object(a.createElement)(c.a,null,Object(p.f)(m,"required-help-text-icon")),E({id:"Required-with-help-text-with-tooltip"},"Required with help text with tooltip"),Object(a.createElement)(c.a,null,Object(p.f)(m,"required-help-text-icon-tooltip")),k({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(n.a,{name:"checkbox",type:"component"}))},w=function(){return Object(i.a)(v())}}});