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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,r,t,n={805:function(e,r,t){t.r(r),t.d(r,{getContents:function(){return x},getElement:function(){return E}});var n=t(1594),i=t.n(n),l=t(5671),o=t(6547),a=(t(3212),t(5619)),s=t(806),c=t(1314),p=t(538),g=i().createElement(c.A,{percent:100}),d=[{id:"progress-ring-partially-drained",label:"Partially Drained",element:i().createElement(c.A,{percent:88})},{id:"progress-ring-partially-filled",label:"Partially Filled",element:i().createElement(c.A,{percent:40,isFilling:!0})},{id:"progress-ring-warning",label:"Partially Drained With Warning Icon",element:i().createElement(c.A,{percent:20,isWarning:!0},i().createElement(p.eX,{symbol:"warning",title:"Warning",assistiveText:"Warning"}))},{id:"progress-ring-partially-filled-warning",label:"Partially Filled with Warning Icon",element:i().createElement(c.A,{percent:75,isFilling:!0,isWarning:!0},i().createElement(p.eX,{symbol:"warning",title:"Warning",assistiveText:"Warning"}))},{id:"progress-ring-expired",label:"With Expired Icon",element:i().createElement(c.A,{percent:0,isExpired:!0},i().createElement(p.eX,{symbol:"error",title:"Expired",assistiveText:"Expired"}))},{id:"progress-ring-complete",label:"Complete",element:i().createElement(c.A,{percent:100,isComplete:!0},i().createElement(p.eX,{symbol:"check",title:"Complete",assistiveText:"Complete"}))},{id:"progress-ring-large",label:"Large Size",element:i().createElement(c.A,{percent:100,className:"slds-progress-ring_large"})},{id:"progress-ring-active-step",label:"Active Step",element:i().createElement(c.A,{percent:100,isActiveStep:!0})},{id:"progress-ring-theme-warning",label:"Theme: Warning",element:i().createElement(c.A,{percent:100,isWarning:!0})},{id:"progress-ring-theme-expired",label:"Theme: Expired",element:i().createElement(c.A,{percent:100,isExpired:!0})},{id:"progress-ring-theme-complete",label:"Theme: Complete",element:i().createElement(c.A,{percent:100,isComplete:!0})}],u=l.XB.code,m=l.XB.h2,h=l.XB.h3,f=l.XB.h4,y=l.XB.li,b=l.XB.p,v=l.XB.ul,E=function(){return(0,n.createElement)(l.Ay,{},(0,n.createElement)("div",{className:"lead doc"},"Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure."),(0,n.createElement)(o.A,{exampleOnly:!0},(0,s.NO)(d,"progress-ring-partially-filled")),m({id:"About-Progress-Ring"},"About Progress Ring"),b({},"The Progress Ring component renders a svg-based progress ring."),b({},"Content (typically iconography) can be rendered inside the progress ring. For the current supported size of this progress ring, xxs sized icons should be used."),(0,n.createElement)(a.A,{type:"note",header:"Styling Note"},(0,n.createElement)("p",null,"If you plan to override the size properties of Progress Ring, use discrete values rather than percentages (ie. 4rem, not 40%). The inner structure of Progress Ring requires the container dimensions to remain square with an 1:1 aspect ratio, which isn't achievable with percentage values in most contexts.")),h({id:"Implementation-Guidelines"},"Implementation Guidelines"),f({id:"Defining-Completeness"},"Defining Completeness"),b({},"The 'completeness' of the Progress Ring is indicated by the circular shape (pie slice), which is a svg shape of an arc."),b({},"The path declaration looks complex, but is actually pretty straightforward, with just a few parts that need customization."),b({},"The breakdown of the progress ring's ",u({},"d")," attribute can be broken down like so:"),b({},u({},'d="M 1 0 A 1 1 0 {isLong} 1 {arcX} {arcY} L 0 0"')),v({},y({},"isLong: a binary flag if the arc should 'take the long path' (used for > 50% fill)"),y({},"arcX: the arc's x position, formulated by Math.cos(2 * Math.PI * fillPercent)"),y({},"arcY: the arc's y position, formulated by Math.sin(2 * Math.PI * fillPercent)")),b({},"These calculations work in accordance with the defined svg viewBox, which goes from -1 to 1, on both x and y axis."),f({id:"Content"},"Content"),b({},"The Progress Ring is currently designed to display any icon from our icon set."),h({id:"Accessibility"},"Accessibility"),b({},u({},".slds-progress-ring__progress")," is the visual indicator of progress and needs proper aria roles and settings:"),v({},y({},u({},"role")," : ",u({},"progressbar")),y({},u({},"aria-valuemin")," : ",u({},"0")," // the smallest valid value"),y({},u({},"aria-valuemax")," : ",u({},"100")," // the largest valid value"),y({},u({},"aria-valuenow")," : ",u({},"{fill}")," // the current fill value")),b({},"Proper accessibility guidelines should be followed on any icons used within this Progress Ring component."),m({id:"Base"},"Base"),(0,n.createElement)(o.A,null,(0,s.NO)(g)),m({id:"Examples"},"Examples"),h({id:"Partially-Drained"},"Partially Drained"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-partially-drained")),h({id:"Partially-Drained-with-Warning-Icon"},"Partially Drained with Warning Icon"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-warning")),h({id:"Partially-Filled"},"Partially Filled"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-partially-filled")),h({id:"Partially-Filled-with-Warning-Icon"},"Partially Filled with Warning Icon"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-partially-filled-warning")),h({id:"With-Expired-Icon"},"With Expired Icon"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-expired")),h({id:"Complete"},"Complete"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-complete")),h({id:"Large-Size"},"Large Size"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-large")),h({id:"Active-Step"},"Active Step"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-active-step")),b({},"Set the color of the ring to the active step color."),h({id:"Theme-Warning"},"Theme - Warning"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-theme-warning")),b({},"Set the color of the ring to the warning color."),h({id:"Theme-Expired"},"Theme - Expired"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-theme-expired")),b({},"Set the color of the ring to the expired color."),h({id:"Theme-Complete"},"Theme - Complete"),(0,n.createElement)(o.A,null,(0,s.NO)(d,"progress-ring-theme-complete")),b({},"Set the color of the ring to the complete color and solid fill."))},x=function(){return(0,l.Qr)(E())}},1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM}},i={};function l(e){var r=i[e];if(void 0!==r)return r.exports;var t=i[e]={id:e,exports:{}};return n[e](t,t.exports,l),t.exports}l.m=n,l.amdO={},e=[],l.O=function(r,t,n,i){if(!t){var o=1/0;for(p=0;p<e.length;p++){t=e[p][0],n=e[p][1],i=e[p][2];for(var a=!0,s=0;s<t.length;s++)(!1&i||o>=i)&&Object.keys(l.O).every(function(e){return l.O[e](t[s])})?t.splice(s--,1):(a=!1,i<o&&(o=i));if(a){e.splice(p--,1);var c=n();void 0!==c&&(r=c)}}return r}i=i||0;for(var p=e.length;p>0&&e[p-1][2]>i;p--)e[p]=e[p-1];e[p]=[t,n,i]},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,{a:r}),r},t=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},l.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var i=Object.create(null);l.r(i);var o={};r=r||[null,t({}),t([]),t(t)];for(var a=2&n&&e;("object"==typeof a||"function"==typeof a)&&!~r.indexOf(a);a=t(a))Object.getOwnPropertyNames(a).forEach(function(r){o[r]=function(){return e[r]}});return o.default=function(){return e},l.d(i,o),i},l.d=function(e,r){for(var t in r)l.o(r,t)&&!l.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},l.e=function(){return Promise.resolve()},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=3993,function(){var e={3993:0};l.O.j=function(r){return 0===e[r]};var r=function(r,t){var n,i,o=t[0],a=t[1],s=t[2],c=0;if(o.some(function(r){return 0!==e[r]})){for(n in a)l.o(a,n)&&(l.m[n]=a[n]);if(s)var p=s(l)}for(r&&r(t);c<o.length;c++)i=o[c],l.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return l.O(p)},t=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))}(),l.nc=void 0;var o=l.O(void 0,[3540],function(){return l(805)});o=l.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/progress-ring/docs.mdx.js"]=o}();