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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},9238:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return oe},getElement:function(){return ae}});var r=n(1594),s=n.n(r),i=n(5671),a=n(6547),o=(n(3212),n(1374)),l=n(5619),c=n(942),u=n.n(c),d=n(9382),m=n(6955),p=function(e){return s().createElement("div",{className:u()("slds-summary-detail",e.className)},e.children)},f=function(e){return s().createElement("div",{hidden:!e.isOpen,className:u()("slds-summary-detail__content",e.className),id:e.referenceId},e.children)},b=function(e){return s().createElement("div",{className:u()("slds-summary-detail__title",e.className)},e.children)},h=function(e){return s().createElement(m.A,{className:u()("slds-m-right_x-small",e.className),iconClassName:"slds-summary-detail__action-icon",symbol:"switch",title:"Toggle details for ".concat(e.summaryTitle),assistiveText:"Toggle details for ".concat(e.summaryTitle),"aria-controls":e.referenceId,"aria-expanded":e.isOpen?"true":"false"})},g=(d.Ex,d.Ex,n(7412)),y=n.n(g),v=n(538),E=n(9825),_=n(806),O=function(e){return s().createElement("div",{className:u()("slds-form-element",e.className)},e.children)},S=function(e){return s().createElement("label",{className:u()("slds-checkbox_toggle slds-grid",e.className),htmlFor:e.id},e.children)},w=function(e){return s().createElement("span",{className:u()("slds-form-element__label","slds-m-bottom_none",{"slds-assistive-text":e.isBare})},e.children)},x=function(e){return s().createElement("input",{name:e.uniqueId,value:e.uniqueId,type:"checkbox",role:"switch",disabled:e.disabled,defaultChecked:e.checked,"aria-describedby":e.uniqueId})},N=function(e){return s().createElement("span",{id:e.uniqueId,className:u()("slds-checkbox_faux_container",e.className)},s().createElement("span",{className:"slds-checkbox_faux"}),s().createElement("span",{className:u()("slds-checkbox_on",e.className)},e.labelTextOn||"Enabled"),s().createElement("span",{className:u()("slds-checkbox_off",e.className)},e.labelTextOff||"Disabled"))},k=function(e){var t=_.Ay.uniqueId("checkbox-toggle-");return s().createElement(O,null,s().createElement(S,null,s().createElement(w,{isBare:e.isBare},e.title||"Toggle Label"),s().createElement(x,{uniqueId:t,checked:e.checked,disabled:e.disabled}),s().createElement(N,{uniqueId:t,labelTextOn:e.labelTextOn,labelTextOff:e.labelTextOff})))},P=n(1314);function T(e){return T="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},T(e)}function A(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,j(r.key),r)}}function j(e){var t=function(e){if("object"!=T(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=T(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==T(t)?t:t+""}function B(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(B=function(){return!!e})()}function C(e){return C=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},C(e)}function I(e,t){return I=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},I(e,t)}var q=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=C(t),function(e,t){if(t&&("object"==T(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)}(e,B()?Reflect.construct(t,n||[],C(e).constructor):t.apply(e,n))}(this,t,arguments)}return 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&&I(e,t)}(t,e),n=t,r=[{key:"render",value:function(){var e=this.props,t=e.title,n=e.description,r=e.action,i=e.duration,a=e.stepProgress,o=e.isActiveStep,l=e.referenceId,c=e.isOpen,d=r&&("button"===r.type?s().createElement(E.$n,{isOutlineBrand:!0},r.title):"toggle"===r.type?s().createElement(k,{title:r.title,isBare:!0,checked:r.checked,labelTextOn:"On",labelTextOff:"Off"}):s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},r.title)),m=a&&(a.isComplete?s().createElement(P.A,{className:"slds-progress-ring_large",percent:100,isComplete:!0},s().createElement(v.eX,{symbol:"check",title:"Complete",assistiveText:"Complete"})):s().createElement(P.A,{className:"slds-progress-ring_large",percent:o?a.percentage:0,isActiveStep:o,isFilling:!0},a.number)),p=s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-setup-assistant__step-summary-content slds-media__body"},s().createElement("h3",{className:"slds-setup-assistant__step-summary-title slds-text-heading_small"},l?s().createElement(E.$n,{className:"slds-button_reset","aria-controls":l,"aria-expanded":c?"true":"false"},t):t),s().createElement("p",null,n)),s().createElement("div",{className:"slds-media__figure slds-media__figure_reverse"},d,i&&s().createElement("p",{className:u()("slds-text-align_right","slds-text-color_weak",{"slds-p-top_medium":r})},i)));return s().createElement("div",{className:"slds-setup-assistant__step-summary"},a?s().createElement("div",{className:"slds-media"},s().createElement("div",{className:"slds-media__figure"},m),s().createElement("div",{className:"slds-media__body slds-m-top_x-small"},p)):p)}}],r&&A(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);q.propTypes={title:y().string.isRequired,description:y().string.isRequired,action:y().object,duration:y().string,stepProgress:y().object,isActiveStep:y().bool},q.defaultProps={title:"Configure user settings for this org",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."};var L=q,z=n(2870);y().oneOf(["info","success","warning","error"]),y().node;var D=function(e){var t=e.children,n=e.theme;return s().createElement("div",{className:u()("slds-scoped-notification slds-media slds-media_center",e.theme&&"slds-scoped-notification_"+e.theme),role:"status"},s().createElement("div",{className:"slds-media__figure"},s().createElement(v.eX,{title:"information",className:u()("slds-icon_small",n&&"light"===n&&"slds-icon-text-default"),assistiveText:"information",symbol:"info"})),s().createElement("div",{className:"slds-media__body"},t))};function R(e){return R="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},R(e)}function H(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,U(r.key),r)}}function U(e){var t=function(e){if("object"!=R(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=R(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==R(t)?t:t+""}function F(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(F=function(){return!!e})()}function V(e){return V=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},V(e)}function X(e,t){return X=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},X(e,t)}D.propTypes={children:y().node,theme:y().oneOf(["light","dark"])};var M=[{complete:!0,title:"Turn on Lightning for all users.",action:{type:"toggle",title:"Turn on Lightning for all users",checked:!0}},{active:!0,title:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",action:{type:"link",title:"View in Trailhead"}},{title:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"}}],J=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=V(t),function(e,t){if(t&&("object"==R(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)}(e,F()?Reflect.construct(t,n||[],V(e).constructor):t.apply(e,n))}(this,t,arguments)}return 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&&X(e,t)}(t,e),n=t,r=[{key:"render",value:function(){var e=u()("slds-setup-assistant__step-detail",this.props.className);return s().createElement("div",{className:e},s().createElement(z.ke,{value:"50",hasBorders:!0,hasSuccessBar:!0},M.map(function(e,t){return s().createElement(z.pn,{key:"progress-step-".concat(t),done:e.complete,hasSuccessMarker:e.complete,active:e.active,assistiveText:e.title},s().createElement("div",{className:"slds-size_3-of-4"},e.title),s().createElement("div",{className:"slds-grid slds-grid_align-end slds-size_1-of-4"},(n=e.action)&&"button"===n.type?s().createElement(E.$n,{isOutlineBrand:!0},n.title):"toggle"===n.type?s().createElement(k,{title:n.title,isBare:!0,checked:n.checked,labelTextOn:"On",labelTextOff:"Off"}):s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},n.title)));var n})),s().createElement(D,{theme:"light"},s().createElement("p",null,"It looks as if duplicates exist for this lead."," ",s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"View Duplicates"))))}}],r&&H(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);J.propTypes={className:y().string};var W=J,$=n(4231),Y=function(e){var t=_.Ay.uniqueId("progress-bar-label-id-");return s().createElement("div",{className:e.className},s().createElement("div",{className:"slds-grid slds-grid_align-spread slds-p-bottom_x-small",id:t},s().createElement("span",null,e.label),s().createElement("span",{"aria-hidden":"true"},s().createElement("strong",null,"".concat(e.value,"% Complete")))),s().createElement($.z,{className:u()(e.barClassName),value:e.value,"aria-labelledby":t,isSuccess:e.isSuccess}))},Q=($.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,$.z,[{title:"Add Users to Your Org",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Users"},duration:"4 mins",stepProgress:{isComplete:!0,number:"1"}},{title:"Create Profiles for Your Users",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"button",title:"Add Profiles"},stepProgress:{isComplete:!1,number:"2",percentage:33},isActiveStep:!0,isOpen:!0},{title:"Learn How to Use Profiles to Control Visibility",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"View on Trailhead"},duration:"15 mins",stepProgress:{isComplete:!0,number:"3",percentage:"0"}},{title:"Turn On Tracking for Profiles",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"toggle",title:"Turn on tracking for profiles"},stepProgress:{isComplete:!1,number:"4",percentage:"0"}},{title:"Setup Einstein Visibility for Admins",description:"Lorem ipsum dolor sit amet, lorem ipsum dolor.",action:{type:"link",title:"Watch Video"},stepProgress:{isComplete:!1,number:"5",percentage:"0"}}]),G=function(e){return s().createElement("li",{className:"slds-setup-assistant__item"},s().createElement("article",{className:"slds-setup-assistant__step"},e.children))},K=function(e){return s().createElement("ol",{className:"slds-setup-assistant"},e.children)},Z=function(e){var t=e.isBase,n=e.stepsHaveProgress,r=e.stepsAreExpandable;return s().createElement(K,null,t&&function(e,t){return e.map(function(e,n){return s().createElement(G,{key:"base-step-".concat(e.title,"-").concat(t,"-").concat(n)},s().createElement(L,{title:e.title,stepProgress:t&&e.stepProgress,action:e.action,duration:e.duration}))})}(Q,n),r&&Q.map(function(e,t){return s().createElement(G,{key:"expand-step-".concat(e.title,"-").concat(t)},s().createElement(p,{className:u()({"slds-is-open":e.isOpen})},s().createElement(h,{className:"slds-m-top_x-small",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen,summaryTitle:e.title}),s().createElement("div",{className:"slds-container_fluid"},s().createElement(b,null,s().createElement(L,{title:e.title,isActiveStep:e.isActiveStep,stepProgress:e.stepProgress,duration:e.duration||"10 mins",referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen})),s().createElement(f,{referenceId:"step-".concat(t,"-summary-action"),isOpen:e.isOpen},s().createElement(W,null)))))}))},ee=function(e){return s().createElement("section",{className:"slds-card"},s().createElement("header",{className:"slds-theme_shade slds-p-around_medium slds-m-bottom_small"},s().createElement(Y,{barClassName:"slds-progress-bar_circular",label:"Complete all the steps below to finish setting up Einstein Visibility",value:"50"})),s().createElement(s().Fragment,null,e.children))},te=i.XB.a,ne=i.XB.h2,re=i.XB.li,se=i.XB.p,ie=i.XB.ul,ae=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"Setup Assistant provides Administrators with a centralized list of tasks for onboarding organizations, clouds, or features within the Salesforce Platform. It provides a prescriptive and detailed guide for learning, configuring, and importing data which can take hours to days."),(0,r.createElement)(a.A,{exampleOnly:!0},(0,r.createElement)(Z,{isBase:!0,stepsHaveProgress:!0})),ne({id:"About-Setup-Assistant"},"About Setup Assistant"),se({},"Actions in the assistant launch LSF (Lightning Setup Flow) or link to configuration pages, and may be accompanied by links to Trailheads, articles, Help & Training documentation, and videos."),ie({},re({},"The title of the assistant should always end with “Setup Assistant” (e.g. Einstein Setup Assistant)."),re({},"Use links to navigate to Trailheads, articles, Help & Training documentation, and videos."),re({},"Use the Outline Brand Button to open LSF or configuration pages."),re({},"Estimated time is optional.")),ne({id:"Base"},"Base"),se({},"Basic list of learning and task links that do not require progress tracking and do not have sequential steps."),(0,r.createElement)(o.A,{title:"Setup Assistant Base"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{isBase:!0}))),ne({id:"With-Step-Progress"},"With Step Progress"),se({},"List of learning and task links with a recommended sequence that require progress tracking. Depending on the platform, completion checking will be through an API or a link click. The progress markers use the ",te({href:"../progress-ring"},"Progress Ring")," component."),(0,r.createElement)(o.A,{title:"Setup Assistant Base steps with Progress"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{isBase:!0,stepsHaveProgress:!0}))),ne({id:"Hub-with-Expandable-Steps"},"Hub with Expandable Steps"),se({},"Includes all the features of Setup Assistant Base + Progress, but also includes substeps that require sequential completion within the primary step. Inline Text within each primary step is optional."),se({},"Clicking on the icon toggle or the primary step's title will open and close that step's details. If a primary step's substeps have been started, the primary step's progress ring turns blue to indicate the amount of progress made on the substeps."),(0,r.createElement)(l.A,{type:"a11y",header:"Accessibility Note"},(0,r.createElement)("p",null,"Since both the chevron toggle and the step's title act as a trigger to open and close the step's detail, ensure both the icon button and the title include"," ",(0,r.createElement)("code",null,"aria-controls=[uniqueId]")," where the ",(0,r.createElement)("code",null,"uniqueId")," matches the "," ",(0,r.createElement)("code",null,"id")," on the"," ",(0,r.createElement)("code",null,"<div>")," with ",(0,r.createElement)("code",null,'class="slds-summary-detail__content"'),".")),(0,r.createElement)(o.A,{title:"Setup Assistant Hub Expandable"},(0,r.createElement)(a.A,null,(0,r.createElement)(Z,{stepsAreExpandable:!0}))),ne({id:"In-a-Card"},"In a Card"),se({},"If the steps have associated progress, a header is added to the card containing the steps. This header indicates overall progress on this Setup Assistant and utilizes the ",te({href:"../progress-bar"},"Descriptive Progress Bar")),(0,r.createElement)(l.A,{type:"a11y",header:"Accessibility Note"},(0,r.createElement)("p",null,"In order to prevent duplicating information for screen reader users, the percentage info on the top of the progress bar is hidden using the"," ",(0,r.createElement)("code",null,"slds-assistive-text")," class.")),(0,r.createElement)(o.A,{title:"Setup Assistant Hub Expandable"},(0,r.createElement)(a.A,null,(0,r.createElement)(ee,null,(0,r.createElement)(Z,{stepsAreExpandable:!0})))))},oe=function(){return(0,i.Qr)(ae())}}},s={};function i(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.m=r,i.amdO={},e=[],i.O=function(t,n,r,s){if(!n){var a=1/0;for(u=0;u<e.length;u++){n=e[u][0],r=e[u][1],s=e[u][2];for(var o=!0,l=0;l<n.length;l++)(!1&s||a>=s)&&Object.keys(i.O).every(function(e){return i.O[e](n[l])})?n.splice(l--,1):(o=!1,s<a&&(a=s));if(o){e.splice(u--,1);var c=r();void 0!==c&&(t=c)}}return t}s=s||0;for(var u=e.length;u>0&&e[u-1][2]>s;u--)e[u]=e[u-1];e[u]=[n,r,s]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var s=Object.create(null);i.r(s);var a={};t=t||[null,n({}),n([]),n(n)];for(var o=2&r&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},i.d(s,a),s},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=5997,function(){var e={5997:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,s,a=n[0],o=n[1],l=n[2],c=0;if(a.some(function(t){return 0!==e[t]})){for(r in o)i.o(o,r)&&(i.m[r]=o[r]);if(l)var u=l(i)}for(t&&t(n);c<a.length;c++)s=a[c],i.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return i.O(u)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var a=i.O(void 0,[3540],function(){return i(9238)});a=i.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/setup-assistant/docs.mdx.js"]=a}();