@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,o=t[0],i=t[1],c=t[2],d=0,u=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(l,r)&&l[r]&&u.push(l[r][0]),l[r]=0;for(a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[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,o=1;o<s.length;o++){var i=s[o];0!==l[i]&&(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 o=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=o.push.bind(o);o.push=t,o=o.slice();for(var c=0;c<o.length;c++)t(o[c]);var m=i;return n.push([743,0]),s()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},743:function(e,t,s){"use strict";s.r(t),s.d(t,"getElement",(function(){return x})),s.d(t,"getContents",(function(){return C}));var a=s(0),l=s.n(a),n=s(4),r=s(2),o=s(13),i=s(40),c=s(3),m=s.n(c),d=s(5),u=s.n(d),f=s(7),h=function(e){var t=e.containerClassName,s=e.className,a=e.type,n=e.children;return l.a.createElement("div",{className:u()("slds-notify_container",t)},l.a.createElement("div",{className:u()("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(f.b,{className:"slds-button_icon-inverse",symbol:"close",assistiveText:"Close",title:"Close"}))))};h.propTypes={containerClassName:m.a.string,className:m.a.string,type:m.a.oneOf(["info","success","warning","error"]),children:m.a.node},h.defaultProps={type:"info"};var p=h,y=s(11),b=[{id:"default",label:"Base - default",element:l.a.createElement(p,{type:"info",containerClassName:"slds-is-relative"},l.a.createElement(y.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(p,{type:"success",containerClassName:"slds-is-relative"},l.a.createElement(y.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(p,{type:"warning",containerClassName:"slds-is-relative"},l.a.createElement(y.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(p,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(y.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(p,{type:"error",containerClassName:"slds-is-relative"},l.a.createElement(y.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.")))}],g=[{id:"small",label:"Small Column",demoStyles:"width: 25rem",storybookStyles:!0,element:l.a.createElement("div",{className:"slds-region_narrow"},l.a.createElement(p,{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."))))}],E=s(1),_=n.c.code,S=n.c.h2,N=n.c.h3,O=n.c.p,x=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(E.f)(b)),S({id:"About-Toast"},"About Toast"),Object(a.createElement)(o.a,{type:"note",header:"SLDS 2"},"To be compatible with the SLDS 2 default theme, Salesforce Cosmos, the toast ",Object(a.createElement)("code",null,"X")," close button is set with ",Object(a.createElement)("code",null,"slds-button__icon_xx-small"),"."),N({id:"Accessibility"},"Accessibility"),O({},"Toast should contain ",_({},'role="alert"')," on the container to signal to assistive technology that they require the user’s attention."),O({},"When the design uses multiple toasts simultaneously, set the role to ",_({},'role="status"'),". Historically, toasts would use the role of ",_({},"alert"),", but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. The role of ",_({},"status")," is a polite live region, which does not clear the queue, reducing the risk of a missed toast message."),O({},"Use a span with ",_({},"slds-assistive-text")," to let the user know what type of notification it is."),S({id:"Base"},"Base"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(E.f)(b)),S({id:"States"},"States"),N({id:"Success"},"Success"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(E.f)(v,"success")),N({id:"Warning"},"Warning"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(E.f)(v,"warning")),N({id:"Error"},"Error"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(E.f)(v,"error")),N({id:"Error-With-Details"},"Error With Details"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(E.f)(v,"error-with-details")),S({id:"Examples"},"Examples"),N({id:"Small-Column"},"Small Column"),Object(a.createElement)(r.a,{demoStyles:"height: 4rem;"},Object(E.f)(g,"small")),S({id:"Styling-Hooks-Overview"},"Styling Hooks Overview"),Object(a.createElement)(i.a,{name:"toast",type:"component"}))},C=function(){return Object(n.a)(x())}}});