@salesforce-ux/design-system/__internal/chunked/docs/ui/components/toast/docs.mdx.js

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/toast/docs.mdx.js"]=function(e){function t(t){for(var a,r,i=t[0],o=t[1],c=t[2],d=0,u=[];d<i.length;d++)r=i[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a]);for(m&&m(t);u.length;)u.shift()();return n.push.apply(n,c||[]),s()}function s(){for(var e,t=0;t<n.length;t++){for(var s=n[t],a=!0,i=1;i<s.length;i++){var o=s[i];0!==l[o]&&(a=!1)}a&&(n.splice(t--,1),e=r(r.s=s[0]))}return e}var a={},l={77:0},n=[];function r(t){if(a[t])return a[t].exports;var s=a[t]={i:t,l:!1,exports:{}};return e[t].call(s.exports,s,s.exports,r),s.l=!0,s.exports}r.m=e,r.c=a,r.d=function(e,t,s){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},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 s=Object.create(null);if(r.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(s,a,function(t){return e[t]}.bind(null,a));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],o=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var m=o;return n.push([742,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},742:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return O})),s.d(t,"getContents",(function(){return C}));var a=s(0),l=s.n(a),n=s(4),r=s(2),i=(s(14),s(40)),o=s(3),c=s.n(o),m=s(5),d=s.n(m),u=s(7),f=function(e){var t=e.containerClassName,s=e.className,a=e.type,n=e.children;return l.a.createElement("div",{className:d()("slds-notify_container",t)},l.a.createElement("div",{className:d()("slds-notify slds-notify_toast",s,a&&"slds-theme_"+a),role:"status"},l.a.createElement("span",{className:"slds-assistive-text"},a),n,l.a.createElement("div",{className:"slds-notify__close"},l.a.createElement(u.b,{className:"slds-button_icon-inverse",symbol:"close",assistiveText:"Close",title:"Close"}))))};f.propTypes={containerClassName:c.a.string,className:c.a.string,type:c.a.oneOf(["info","success","warning","error"]),children:c.a.node},f.defaultProps={type:"info"};var h=f,p=s(11),y=[{id:"default",label:"Base - default",element:l.a.createElement(h,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"info"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"26 potential duplicate leads were found."," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"Select Leads to Merge"))))}],v=[{id:"success",label:"Success (Theme Class)",element:l.a.createElement(h,{type:"success",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"success"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Account"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"ACME - 100")," ","widgets was created.")))},{id:"warning",label:"Warning (Theme Class)",element:l.a.createElement(h,{type:"warning",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"warning"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Can’t share file “report-q3.pdf” with the"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"selected users"),".")))},{id:"error",label:"Error (Theme Class)",element:l.a.createElement(h,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small "},"Can’t save lead “Sally Wong” because"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"another lead")," ","has the same name.")))},{id:"error-with-details",label:"Error With Details (Theme Class)",element:l.a.createElement(h,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(p.a,{containerClassName:"slds-m-right_small slds-no-flex slds-align-top",className:"slds-icon_small",assistiveText:!1,symbol:"error"}),l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"You've encountered some errors when trying to save edits to Samuel Smith."),l.a.createElement("p",null,"Here's some detail of"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"what happened"),", being very descriptive and transparent.")))}],b=[{id:"small",label:"Small Column",demoStyles:"width: 25rem",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-region_narrow"},l.a.createElement(h,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement("div",{className:"slds-notify__content"},l.a.createElement("h2",{className:"slds-text-heading_small"},"26 potential"," ",l.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"duplicate leads")," ","were found."))))}],g=s(1),E=n.c.code,_=n.c.h2,S=n.c.h3,N=n.c.p,O=function(){return Object(a.createElement)(n.b,{},Object(a.createElement)("div",{className:"doc lead"},"Toast serves as a feedback & confirmation mechanism after the user takes an action."),Object(a.createElement)(r.a,{exampleOnly:!0,demoStyles:"height: 4rem;"},Object(g.f)(y)),_({id:"About-Toast"},"About Toast"),S({id:"Accessibility"},"Accessibility"),N({},"Toast should contain ",E({},'role="alert"')," on the container to signal to assistive technology that they require the user’s attention."),N({},"When the design uses multiple toasts simultaneously, set the role to ",E({},'role="status"'),". Historically, toasts would use the role of ",E({},"alert"),", but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of ",E({},"status")," is a polite live region, which does not clear the queue, reducing the risk of a missed toast message."),N({},"Use a span with ",E({},"slds-assistive-text")," to let the user know what type of notification it is."),_({id:"Base"},"Base"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(y)),_({id:"States"},"States"),S({id:"Success"},"Success"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"success")),S({id:"Warning"},"Warning"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"warning")),S({id:"Error"},"Error"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"error")),S({id:"Error-With-Details"},"Error With Details"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(v,"error-with-details")),_({id:"Examples"},"Examples"),S({id:"Small-Column"},"Small Column"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(g.f)(b,"small")),_({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(i.a,{name:"toast",type:"component"}))},C=function(){return Object(n.a)(O())}}});