@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 25.9 kB
JavaScript
var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/welcome-mat/docs.mdx.js"]=function(e){function t(t){for(var r,a,i=t[0],c=t[1],s=t[2],m=0,p=[];m<i.length;m++)a=i[m],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(r in c)Object.prototype.hasOwnProperty.call(c,r)&&(e[r]=c[r]);for(u&&u(t);p.length;)p.shift()();return l.push.apply(l,s||[]),n()}function n(){for(var e,t=0;t<l.length;t++){for(var n=l[t],r=!0,i=1;i<n.length;i++){var c=n[i];0!==o[c]&&(r=!1)}r&&(l.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={85:0},l=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/assets/scripts/bundle/";var i=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var s=0;s<i.length;s++)t(i[s]);var u=c;return l.push([715,0]),n()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},715:function(e,t,n){"use strict";n.r(t),n.d(t,"getElement",(function(){return xe})),n.d(t,"getContents",(function(){return Pe}));var r=n(0),o=n.n(r),l=n(4),a=n(3),i=n.n(a),c=n(12),s=n(32),u=n(8),m=function(e){return o.a.createElement("div",{className:"demo-only",style:{height:"800px"}},e.children)};m.propTypes={children:i.a.node.isRequired};var p=function(){return o.a.createElement(r.Fragment,null,o.a.createElement(c.a,{isBrand:!0},"Learn More"),o.a.createElement("div",{className:"slds-m-top_large"},o.a.createElement(u.b,null,o.a.createElement(s.a,{label:"Don't show this again"}))))},d=function(e){return o.a.createElement("h2",{className:"slds-welcome-mat__info-title",id:e.labelId},e.children)};d.propTypes={labelId:i.a.string.isRequired,children:i.a.string.isRequired};var f=function(e){return o.a.createElement("div",{className:"slds-welcome-mat__info-description slds-text-longform"},e.children)};f.propTypes={children:i.a.node.isRequired};var h=function(e){return o.a.createElement("div",{className:"slds-welcome-mat__info-actions"},o.a.createElement(p,null))};h.propTypes={children:i.a.node};var b=function(e){var t=e.labelId,n=e.headline,l=e.description,a=e.actions;return o.a.createElement(r.Fragment,null,o.a.createElement(d,{labelId:t},n),o.a.createElement(f,null,l),o.a.createElement(h,null,a))};b.propTypes={labelId:i.a.string.isRequired,headline:i.a.string.isRequired,description:i.a.object,actions:i.a.object},b.defaultProps={headline:"The Lightning Experience is here!",description:o.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var y=n(5),v=n.n(y),w=n(1),g=n(21),_=n(11),E=n(149);function O(e){return(O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function j(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function S(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function T(e,t){return(T=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function x(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=I(e);if(t){var o=I(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return P(this,n)}}function P(e,t){if(t&&("object"===O(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function I(e){return(I=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var R=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&T(e,t)}(i,e);var t,n,l,a=x(i);function i(){return j(this,i),a.apply(this,arguments)}return t=i,(n=[{key:"render",value:function(){var e=this.props,t=e.tile,n=e.isInfoOnly,l=t.completed,a=v()("slds-welcome-mat__tile",{"slds-welcome-mat__tile_complete":l,"slds-welcome-mat__tile_info-only":n}),i=function(){return o.a.createElement(r.Fragment,null,o.a.createElement("div",{className:v()("slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center")},o.a.createElement("div",{className:"slds-welcome-mat__tile-figure"},o.a.createElement("div",{className:"slds-welcome-mat__tile-icon-container"},o.a.createElement(_.a,{className:"slds-icon-text-default",symbol:t.symbol,title:!1,assistiveText:!1}),!n&&o.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check",symbol:"check"})))),o.a.createElement("div",{className:"slds-media__body"},o.a.createElement("div",{className:"slds-welcome-mat__tile-body"},o.a.createElement("h3",{className:"slds-welcome-mat__tile-title"},t.title),o.a.createElement("p",{className:"slds-welcome-mat__tile-description"},t.description))))};return o.a.createElement("li",{className:a},n?o.a.createElement("div",{className:"slds-media"},i()):o.a.createElement("a",{href:"#",className:"slds-box slds-box_link slds-media",onClick:function(e){return e.preventDefault()}},i()))}}])&&S(t.prototype,n),l&&S(t,l),Object.defineProperty(t,"prototype",{writable:!1}),i}(o.a.Component);R.propTypes={tile:i.a.object.isRequired},R.defaultProps={tile:{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",completed:!1}};var k=R,C=n(60);function N(e){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function L(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function W(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function q(e,t){return(q=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function D(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=B(e);if(t){var o=B(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return M(this,n)}}function M(e,t){if(t&&("object"===N(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function B(e){return(B=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var A=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&q(e,t)}(a,e);var t,n,r,l=D(a);function a(){return L(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,r=e.labelId,l=e.description,a=t/n*100;return o.a.createElement(o.a.Fragment,null,o.a.createElement(d,{labelId:r},"The Lightning Experience is here!"),o.a.createElement(f,null,l),o.a.createElement("div",{className:"slds-welcome-mat__info-progress"},o.a.createElement("p",null,o.a.createElement("strong",null,t,"/",n," units completed"))),o.a.createElement(C.a,{value:a,className:"slds-progress-bar_circular"}))}}])&&W(t.prototype,n),r&&W(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(o.a.Component);A.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired,description:i.a.element.isRequired},A.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1",description:o.a.createElement("p",null,"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.")};var z=A;function V(e){return(V="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function U(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function J(e,t){return(J=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function H(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=Y(e);if(t){var o=Y(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return K(this,n)}}function K(e,t){if(t&&("object"===V(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function Y(e){return(Y=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var $=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&J(e,t)}(a,e);var t,n,r,l=H(a);function a(){return F(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"renderTiles",value:function(e){var t=this.props,n=t.tiles,r=t.isInfoOnly;return n.filter((function(t){return(t.completed||!1)===e})).map((function(e,t){return o.a.createElement(k,{key:"".concat(w.d.uniqueId("welcome-mat-"),"-").concat(t),tile:e,isInfoOnly:r})}))}},{key:"completeTileCount",value:function(){var e=this.props.tiles;return e?e.filter((function(e){return!0===e.completed})).length:0}},{key:"totalTileCount",value:function(){var e=this.props.tiles;return e?e.length:0}},{key:"render",value:function(){var e=this.props,t=e.content,n=e.isInfoOnly,r=e.tiles,l=w.d.uniqueId("welcome-mat-"),a="".concat(l,"-label"),i="".concat(l,"-content"),c=v()("slds-welcome-mat",{"slds-welcome-mat_info-only":n,"slds-welcome-mat_splash":!r}),s=v()("slds-welcome-mat__info",{"slds-size_1-of-2":!!r,"slds-size_1-of-1":!r}),u=v()("slds-welcome-mat__tiles slds-size_1-of-2",{"slds-welcome-mat__tiles_info-only":n});return o.a.createElement(g.b,{className:"slds-modal_small","aria-labelledby":a},o.a.createElement(g.e,{className:"slds-modal__header_empty"}),o.a.createElement(g.c,{id:i},o.a.createElement("div",{className:c},o.a.createElement("div",{className:"slds-welcome-mat__content slds-grid"},o.a.createElement("div",{className:s,tabindex:"0",role:"region"},o.a.createElement("div",{className:"slds-welcome-mat__info-content"},t({complete:this.completeTileCount(),total:this.totalTileCount(),labelId:a}))),r&&r.length>0?o.a.createElement("ul",{className:u},this.renderTiles(!0),this.renderTiles(!1)):null))))}}])&&U(t.prototype,n),r&&U(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(r.Component);$.propTypes={tiles:i.a.arrayOf(i.a.shape({symbol:i.a.string.isRequired,title:i.a.string.isRequired,description:i.a.string.isRequired,completed:i.a.bool})),content:i.a.func.isRequired,isInfoOnly:i.a.bool},$.defaultProps={tiles:[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(z,{complete:t,total:n,labelId:r})}};var G=$;function Q(e){return function(e){if(Array.isArray(e))return X(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return X(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return X(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function X(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var Z=[{symbol:"animal_and_nature",title:"Welcome to Salesforce!",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"call",title:"Learn About OpenCTI",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."},{symbol:"upload",title:"Power Up the Utility Bar",description:"Tap into case history or share notes with fellow agents—it all happens on the utility bar."},{symbol:"magicwand",title:"Customize your view",description:"Tailor your cases to your team's workflow with custom list views."},{symbol:"knowledge_base",title:"Share the Knowledge",description:"Harness your team's collective know-how with our powerful knowledge base."}],ee=[Object.assign({},Z[0],{completed:!0}),Object.assign({},Z[1],{completed:!0})].concat(Q(Z.slice(2))),te=Q(ee).concat(Z.slice(2)),ne=o.a.createElement(g.a,null,o.a.createElement(G,null)),re=[{id:"default",label:"Default (Base)",demoStyles:"height: 800px;",element:ne},{id:"with-completed-tiles",label:"With Completed Tiles",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:ee}))},{id:"with-overflowing-tiles",label:"With Overflowing Tiles",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:te}))},{id:"with-overflowing-tiles-and-long-description",label:"With Overflowing Tiles and Long Description",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:te,content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(z,{complete:t,total:n,labelId:r,description:o.a.createElement(o.a.Fragment,null,o.a.createElement("p",null,"Integer nibh libero, pulvinar sed libero et, rhoncus convallis purus. Sed faucibus nibh vel arcu vestibulum, nec commodo sapien tincidunt. In dignissim faucibus ipsum, nec placerat dui pulvinar a mi nec lectus feugiat vel arcu rhoncus convallis, nibh libero."),o.a.createElement("p",null,"Sed vestibulum dui ac diam suscipit vehicula. Nam vestibulum mi nec lectus feugiat euismod. Phasellus in suscipit est."),o.a.createElement("p",null,"Morbi facilisis aliquet dapibus. Morbi ac leo viverra, cursus nibh eget, ultrices mauris. Integer pharetra, lorem ac hendrerit vulputate, sem elit luctus metus, sit amet vehicula justo ex at sem."))})}}))}];function oe(e){return(oe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function le(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function ae(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function ie(e,t){return(ie=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ce(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=ue(e);if(t){var o=ue(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return se(this,n)}}function se(e,t){if(t&&("object"===oe(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function ue(e){return(ue=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var me=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&ie(e,t)}(a,e);var t,n,r,l=ce(a);function a(){return le(this,a),l.apply(this,arguments)}return t=a,(n=[{key:"render",value:function(){var e=this.props,t=e.complete,n=e.total,r=e.labelId,l=t/n*100,a=100===l,i=a?o.a.createElement("p",null,"Cha-ching! You earned the badge."):o.a.createElement("p",null,t,"/",n," units completed");return o.a.createElement(o.a.Fragment,null,o.a.createElement("h2",{id:r,className:"slds-welcome-mat__info-title"},"The Lightning Experience is here!"),o.a.createElement("p",{className:"slds-welcome-mat__info-description slds-text-longform"},"Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes."),o.a.createElement("div",{className:v()("slds-welcome-mat__info-progress",{"slds-welcome-mat__info-progress_complete":a})},o.a.createElement("div",{className:"slds-welcome-mat__info-badge-container"},o.a.createElement("img",{className:"slds-welcome-mat__info-badge",src:"/assets/images/welcome-mat/trailhead_badge@2x.png",width:"50",height:"50",alt:""}),o.a.createElement(E.a,{title:"Completed",assistiveText:"Completed",className:"slds-welcome-mat__icon-check slds-icon_xx-small",symbol:"check"})),o.a.createElement("p",null,o.a.createElement("strong",null,"Lightning Explorer")),i),a?o.a.createElement(c.a,{isBrand:!0},"View on your Trailblazer Profile"):o.a.createElement(C.a,{value:l,className:"slds-progress-bar_circular"}))}}])&&ae(t.prototype,n),r&&ae(t,r),Object.defineProperty(t,"prototype",{writable:!1}),a}(o.a.Component);me.propTypes={complete:i.a.number.isRequired,total:i.a.number.isRequired,labelId:i.a.string.isRequired},me.defaultProps={complete:0,total:5,labelId:"welcome-mat-label-1"};var pe=me,de=[];G.defaultProps.tiles.forEach((function(e){de.push(Object.assign({},e,{completed:!0}))}));var fe=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(pe,{complete:t,total:n,labelId:r})}})),he=[{id:"default",label:"Default (Trailhead)",demoStyles:"height: 800px;",element:fe},{id:"trailhead-complete",label:"Trailhead Complete",demoStyles:"height: 800px;",element:o.a.createElement(g.a,null,o.a.createElement(G,{tiles:de,content:function(e){var t=e.complete,n=e.total,r=e.labelId;return o.a.createElement(pe,{complete:t,total:n,labelId:r})}}))}],be=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.labelId;return o.a.createElement(b,{labelId:t})},tiles:null})),ye=[{id:"default",label:"Default (Splash)",demoStyles:"height: 800px;",element:be}],ve=o.a.createElement(g.a,null,o.a.createElement(G,{content:function(e){var t=e.labelId;return o.a.createElement(b,{labelId:t})},isInfoOnly:!0})),we=[{id:"default",label:"Default (Info Only)",demoStyles:"height: 800px;",element:ve}],ge=(n(15),n(2)),_e=l.c.code,Ee=l.c.h2,Oe=l.c.h3,je=l.c.li,Se=l.c.p,Te=l.c.ul,xe=function(){return Object(r.createElement)(l.b,{},Object(r.createElement)("div",{className:"doc lead"},"A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic."),Object(r.createElement)(ge.a,{exampleOnly:!0,isViewport:!0,demoStyles:Object(w.e)(re,"with-completed-tiles")},Object(w.f)(re,"with-completed-tiles")),Ee({id:"About-Welcome-Mat"},"About Welcome Mat"),Te({},je({},"Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs."),je({},"The Welcome Mat consists of two sections, the informational left pane and the actionable right pane."),je({},"The left pane should be used to educate users as to the theme of the content displayed in the right pane."),je({},"Icon choices, colors, and tile content can be customized to fit your experience.")),Ee({id:"Base"},"Base"),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"default")},Object(w.f)(re,"default")),Ee({id:"Examples"},"Examples"),Oe({id:"With-Completed-Steps"},"With Completed Steps"),Se({},"As users complete items in the list, the list updates to show as completed."),Se({},"As tiles are completed, they move to the bottom of the list, and get a modifier class of ",_e({},"slds-welcome-mat__tile_complete"),"."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"with-completed-tiles")},Object(w.f)(re,"with-completed-tiles")),Oe({id:"Trailhead-Connected"},"Trailhead Connected"),Se({},"The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat."),Se({},"Only Trailhead connected mats may have the Trailhead font for the header."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(re,"default")},Object(w.f)(he,"default")),Oe({id:"Trailhead-Connected-Complete"},"Trailhead Connected - Complete"),Se({},"When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page."),Se({},"When a class of ",_e({},"slds-welcome-mat__info-progress_complete")," is added to the ",_e({},".slds-welcome-mat__info-progress")," element, the complete check mark will appear with the Trailhead badge."),Se({},"Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(he,"trailhead-complete")},Object(w.f)(he,"trailhead-complete")),Oe({id:"Info-only"},"Info-only"),Se({},'In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the ',_e({},"<a>")," tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows."),Se({},"The tile container background changes from gray to white, which is done by applying the modifier class of ",_e({},"slds-welcome-mat__tiles_info-only")," to the ",_e({},"slds-welcome-mat__tiles")," element. Since the tiles aren't actionable, also apply the modifier class of ",_e({},"slds-welcome-mat__tile-info-only")," to each ",_e({},"slds-welcome-mat__tile")," element."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(we,"default")},Object(w.f)(we,"default")),Oe({id:"Splash"},"Splash"),Se({},"The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility."),Object(r.createElement)(ge.a,{isViewport:!0,demoStyles:Object(w.e)(ye,"default")},Object(w.f)(ye,"default")))},Pe=function(){return Object(l.a)(xe())}}});