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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/progress-indicator/docs.mdx.js"]=function(e){function t(t){for(var l,c,n=t[0],i=t[1],o=t[2],m=0,p=[];m<n.length;m++)c=n[m],Object.prototype.hasOwnProperty.call(r,c)&&r[c]&&p.push(r[c][0]),r[c]=0;for(l in i)Object.prototype.hasOwnProperty.call(i,l)&&(e[l]=i[l]);for(d&&d(t);p.length;)p.shift()();return s.push.apply(s,o||[]),a()}function a(){for(var e,t=0;t<s.length;t++){for(var a=s[t],l=!0,n=1;n<a.length;n++){var i=a[n];0!==r[i]&&(l=!1)}l&&(s.splice(t--,1),e=c(c.s=a[0]))}return e}var l={},r={58:0},s=[];function c(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,c),a.l=!0,a.exports}c.m=e,c.c=l,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 l in e)c.d(a,l,function(t){return e[t]}.bind(null,l));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 n=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=n.push.bind(n);n.push=t,n=n.slice();for(var o=0;o<n.length;o++)t(n[o]);var d=i;return s.push([770,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},770:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return x}));var l=a(0),r=a.n(l),s=a(4),c=a(2),n=a(27),i=a(15),o=a(14),d=a(5),m=a.n(d),p=a(50),u=a(9),b=a(21),E=a(61),O=function(e){return r.a.createElement("div",{className:m()("slds-progress",e.className)},r.a.createElement("ol",{className:"slds-progress__list"},e.children),r.a.createElement(E.a,{className:"slds-progress-bar_x-small",value:e.value}))},j=function(e){return r.a.createElement("li",{className:m()("slds-progress__item",e.className,e.active?"slds-is-active":null,e.done?"slds-is-completed":null,e.error?"slds-has-error":null)},e.done&&!e.error?r.a.createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},r.a.createElement(u.a,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"success"}),r.a.createElement("span",{className:"slds-assistive-text"},e.done?e.children+" - Completed":null)):e.error?r.a.createElement("div",{className:"slds-progress__marker slds-progress__marker_icon",tabIndex:"0"},r.a.createElement(u.a,{className:"slds-icon slds-icon_xx-small",sprite:"utility",symbol:"error"}),r.a.createElement("span",{className:"slds-assistive-text"},e.error?e.children+" - Error":null)):r.a.createElement("div",{className:"slds-progress__marker",tabIndex:"0"},r.a.createElement("span",{className:"slds-assistive-text"},e.children," ",e.active?"- Active":null)))},h=(p.a,b.a,b.b,b.e,b.c,b.d,a(59)),v=a(39),S=s.c.code,g=s.c.h2,f=s.c.h3,_=s.c.p,y=function(){return Object(l.createElement)(s.b,{},Object(l.createElement)("div",{className:"doc lead"},"A progress indicator component communicates to the user the progress of a particular process."),Object(l.createElement)(c.a,{exampleOnly:!0},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5"))),g({id:"About-Progress-Indicator"},"About Progress Indicator"),f({id:"Implementation-Requirements"},"Implementation Requirements"),_({},"The ",S({},"slds-progress-bar")," accepts a range from 0% to 100%, and this percentage should be applied with inline styling to the ",S({},"div")," with class ",S({},"slds-progress-bar__value")," using JavaScript. If implementing a horizontal progress indicator, set the width, otherwise set the height for vertical progress indicators."),f({id:"Accessibility"},"Accessibility"),_({},"As the percentage of completion changes, be sure to update the ",S({},"aria-valuenow")," property on the ",S({},"<div>")," with ",S({},'class="slds-progress-bar"'),", as well as the ",S({},"slds-assistive-text")," ",S({},"<span>"),"."),Object(l.createElement)(n.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-progress-bar slds-progress-bar_x-small","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":"50",role:"progressbar"},Object(l.createElement)("span",{className:"slds-progress-bar__value",style:{width:"50%"}},Object(l.createElement)("span",{className:"slds-assistive-text"},"Progress: 50%")))),f({id:"Mobile"},"Mobile"),Object(l.createElement)(v.a,{patternSpecificText:"progress indicators will have increased actionable area sizes to accommodate tapping with a finger instead of the more precise mouse cursor"}),Object(l.createElement)(c.a,{frameOnly:!0,frameTitle:"Example mobile styles for progress indicators"},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5"))),g({id:"Base"},"Base"),Object(l.createElement)(i.a,{title:"Progress Indicator Base Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"0"},Object(l.createElement)(j,{active:!0},"Step 1"),Object(l.createElement)(j,null,"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),g({id:"Horizontal"},"Horizontal"),f({id:"Active-Step"},"Active Step"),_({},"When a step becomes active, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-is-active"),"."),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step is active, be sure to append "- Active" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 1 - Active"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Active Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"0"},Object(l.createElement)(j,{active:!0},"Step 1"),Object(l.createElement)(j,null,"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Completed-Step"},"Completed Step"),_({},"When the step is completed, the ",S({},".slds-is-active")," class should be replaced with the class ",S({},".slds-is-completed")," on ",S({},".slds-progress__item"),". At that point, the ",S({},".slds-progress__item"),' element will receive a "success" icon, providing feedback that the step has been completed.'),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step is completed, be sure to append "- Completed" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 2 - Completed"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Done Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Error-in-a-Step"},"Error in a Step"),_({},"When an error has occurred on a step, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-has-error"),"."),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,'When a step has an error, be sure to append "- Error" to the hidden text in the ',Object(l.createElement)("code",null,"<span>")," with class ",Object(l.createElement)("code",null,"slds-assistive-text"),", such as ",Object(l.createElement)("code",null,"Step 3 - Error"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Done Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{error:!0},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),f({id:"Step-Title-Tooltip"},"Step Title Tooltip"),Object(l.createElement)(o.a,{type:"a11y",header:"Accessibility Requirements"},Object(l.createElement)("p",null,"The name of the step should be included with the ",Object(l.createElement)("code",null,"slds-assistive-text")," class as the inner text of the step's ",Object(l.createElement)("code",null,"div")," so that it is available to screen readers.")),Object(l.createElement)(i.a,{title:"Progress Indicator Tooltip Horizontal"},Object(l.createElement)(c.a,null,Object(l.createElement)("div",{style:{padding:"3.5rem 1rem 0"}},Object(l.createElement)(O,{value:"50"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{done:!0},"Step 2"),Object(l.createElement)(j,{active:!0,"aria-describedby":"step-3-tooltip"},"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")),Object(l.createElement)(p.a,{className:"slds-nubbin_bottom",id:"step-3-tooltip",style:{position:"absolute",top:"1rem",left:"calc(50% + 6px)",transform:"translateX(-50%)"}},"Verify Email")))),f({id:"In-a-Modal"},"In a Modal"),Object(l.createElement)(i.a,{title:"Progress Indicator Horizontal in Modal"},Object(l.createElement)(c.a,{isViewport:!0,demoStyles:"height: 640px;"},Object(l.createElement)("div",null,Object(l.createElement)(b.a,null,Object(l.createElement)(b.b,{className:"slds-modal_large","aria-labelledby":"header43"},Object(l.createElement)(b.e,null,Object(l.createElement)("h1",{id:"header43",className:"slds-text-heading_medium"},"Modal header")),Object(l.createElement)(b.c,{className:"slds-grow slds-p-around_medium"}),Object(l.createElement)(b.d,{className:"slds-grid slds-grid_align-spread"},Object(l.createElement)("button",{className:"slds-button slds-button_neutral","aria-label":"Cancel and close"},"Cancel"),Object(l.createElement)(O,{className:"slds-progress_shade",value:"25"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{active:!0},"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")),Object(l.createElement)("button",{className:"slds-button slds-button_brand"},"Save"))))))),f({id:"On-a-Gray-Background"},"On a Gray Background"),Object(l.createElement)(i.a,{title:"Progress Indicator Horizontal Gray Background"},Object(l.createElement)(c.a,{demoStyles:"background-color: #F3F2F2; padding: 1rem;"},Object(l.createElement)(O,{className:"slds-progress_shade",value:"25"},Object(l.createElement)(j,{done:!0},"Step 1"),Object(l.createElement)(j,{active:!0},"Step 2"),Object(l.createElement)(j,null,"Step 3"),Object(l.createElement)(j,null,"Step 4"),Object(l.createElement)(j,null,"Step 5")))),g({id:"Vertical"},"Vertical"),_({},"To display a vertical progress indicator, the ",S({},"<div>")," with class ",S({},".slds-progress")," should also get the class ",S({},".slds-progress_vertical"),". The vertical progress indicator will take up 100% of the height of its container. The step titles in the vertical variant appear next to the step, instead of in a tooltip."),Object(l.createElement)(o.a,{type:"note",header:"Implementation Note"},Object(l.createElement)("p",null,"The key markup difference between the horizontal and vertical variants is the progress markers. Horizontal progress indicators use ",Object(l.createElement)("code",null,"<button>")," for each step, whereas Vertical progress indicator steps are not interactive and therefore simply use ",Object(l.createElement)("code",null,"<div>"),".")),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Green-Success"},"Green Success"),_({},"To create a green completed step, the ",S({},".slds-progress__item")," element should also receive the ",S({},".slds-is-completed")," class. In addition, the ",S({},"<span>")," with class ",S({},".slds-progress__marker_icon")," should also get the class ",S({},"slds-progress__marker_icon-success"),"."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical Success"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0,hasSuccessMarker:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Error-in-a-Step-2"},"Error in a Step"),_({},"When an error has occurred on a step, the ",S({},"<div>")," with class ",S({},".slds-progress__item")," should also get the class ",S({},".slds-has-error"),"."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical Success"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{error:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3"),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))),f({id:"Multiline-Step-Titles"},"Multiline Step Titles"),_({},"The vertical progress indicator also supports multiline step descriptions."),Object(l.createElement)(i.a,{title:"Progress Indicator Vertical"},Object(l.createElement)(c.a,null,Object(l.createElement)(h.a,{value:"25"},Object(l.createElement)(h.b,{done:!0},"Step 1"),Object(l.createElement)(h.b,{active:!0},"Step 2"),Object(l.createElement)(h.b,null,"Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Praesent eget pellentesque lacus. Suspendisse euismod magna nec nulla ornare viverra. Sed pretium, eros ullamcorper scelerisque placerat, nunc velit volutpat libero, a semper lacus urna eget nibh. Maecenas eget tortor pulvinar, scelerisque nibh sed, fringilla erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ultricies dui turpis, at posuere dolor convallis vitae."),Object(l.createElement)(h.b,null,"Step 4"),Object(l.createElement)(h.b,null,"Step 5")))))},x=function(){return Object(s.a)(y())}}});