@sps-woodland/progress-indicators 8.21.0 → 8.21.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/{index.es.js → index.js} +1 -1
- package/lib/index.umd.cjs +232 -0
- package/lib/style.css +1 -1
- package/package.json +14 -14
- package/vite.config.mjs +2 -2
- package/lib/index.cjs.js +0 -232
|
@@ -57,7 +57,7 @@ var M = (s, o, a) => {
|
|
|
57
57
|
for (var [h, P] of s.compoundVariants)
|
|
58
58
|
M(h, t, s.defaultVariants) && (a += " " + P);
|
|
59
59
|
return a;
|
|
60
|
-
}, H = "pkg_sps-woodland_progress-
|
|
60
|
+
}, H = "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme0", $ = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmef", variantClassNames: { disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeg", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), G = "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme2", U = "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme1", W = "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmet", Y = "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme3", K = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme5", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme6", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme7" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme8", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme9" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmea", blue: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeb", red: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmec", orange: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmed", grey: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmee" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmei", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmej", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmek" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmel", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmem" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmen", blue: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeo", red: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmep", orange: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeq", grey: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmer" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [[{ completed: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmes"]] }), J = "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme4", L = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goj", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gok", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), Q = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gom", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gon", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goo" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gop", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goq" }, barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gor", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gos" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0got", red: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gou", blue: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gov", orange: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gow", grey: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gox" } }, defaultVariants: { stepCompleted: !1, disabled: !1, barCompleted: !1, color: "purple" }, compoundVariants: [[{ barCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goy"], [{ barCompleted: !0, disabled: !1 }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goz"], [{ stepCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go10"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "purple" }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go11"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "red" }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go12"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "blue" }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go13"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "orange" }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go14"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "grey" }, "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go15"]] }), X = f({ defaultClassName: "", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goa", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gob" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goc", blue: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0god", red: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goe", orange: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gof", grey: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gog" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goh", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goi" } }, defaultVariants: { barCompleted: !1, color: "purple", disabled: !1 }, compoundVariants: [] }), Z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go0", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go1", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go2" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go3", false: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go4" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go5", blue: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go6", red: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go7", orange: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go8", grey: "pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go9" } }, defaultVariants: { barCompleted: !1, disabled: !1, color: "purple" }, compoundVariants: [] });
|
|
61
61
|
function S({
|
|
62
62
|
className: s,
|
|
63
63
|
title: o,
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
(function(p,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@spscommerce/ds-react"),require("@sps-woodland/tokens"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@spscommerce/ds-react","@sps-woodland/tokens","@spscommerce/utils"],S):(p=typeof globalThis<"u"?globalThis:p||self,S(p.ProgressIndicators={},p.React,p.core,p.buttons,p.dsReact,p.tokens,p.utils))})(this,function(p,S,i,y,r,g,m){"use strict";function j(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>s[t]})}}return o.default=s,Object.freeze(o)}const e=j(S);function N(s,o,t){return o in s?Object.defineProperty(s,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):s[o]=t,s}function E(s,o){var t=Object.keys(s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(s);o&&(a=a.filter(function(l){return Object.getOwnPropertyDescriptor(s,l).enumerable})),t.push.apply(t,a)}return t}function T(s){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?E(Object(t),!0).forEach(function(a){N(s,a,t[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(t)):E(Object(t)).forEach(function(a){Object.defineProperty(s,a,Object.getOwnPropertyDescriptor(t,a))})}return s}var q=(s,o,t)=>{for(var a of Object.keys(s)){var l;if(s[a]!==((l=o[a])!==null&&l!==void 0?l:t[a]))return!1}return!0},h=s=>o=>{var t=s.defaultClassName,a=T(T({},s.defaultVariants),o);for(var l in a){var n,_=(n=a[l])!==null&&n!==void 0?n:s.defaultVariants[l];if(_!=null){var d=_;typeof d=="boolean"&&(d=d===!0?"true":"false");var c=s.variantClassNames[l][d];c&&(t+=" "+c)}}for(var[f,C]of s.compoundVariants)q(f,a,s.defaultVariants)&&(t+=" "+C);return t},O="pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme0",D=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),V="pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme2",x="pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme1",F="pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmet",H="pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme3",I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmes"]]}),A="pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme4",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go15"]]}),U=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),W=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]});function w({className:s,title:o,description:t,icon:a,complete:l=!1,disabled:n,barCompleted:_,progressColor:d,...c}){const f=i.useElementId().current||void 0;return e.createElement("li",{id:f,className:i.cl(G({stepCompleted:l,disabled:n,barCompleted:_,color:d}),s),...c},a&&e.createElement(i.Icon,{icon:a,size:"sm",className:$({stepCompleted:l})}),o&&f&&e.createElement(r.SpsTooltip,{for:f,title:o},t))}i.Metadata.set(w,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function P({className:s,children:o,detail:t,disabled:a,onClose:l,percentComplete:n=0,title:_,showStepsCounter:d,progressColor:c="purple",...f}){const{t:C}=e.useContext(i.I18nContext),[v,z]=e.useState([]),[u]=i.selectChildren(o,[{type:w}]);e.useEffect(()=>{let b=[];u.forEach(B=>{B.hasOwnProperty("props")&&B.props.complete===!0&&b.push(B),z(b)})},[]),n&&u&&console.warn(["The percentComplete prop can't be used with the ProgressBarStep subcomponent.","The progress will be determined by how many nested ProgressBarStep components have the completed prop."].join(" "));const K=e.Children.map(o,b=>e.isValidElement(b)?e.cloneElement(b,{disabled:a,barCompleted:v.length===u.length,progressColor:c}):b);return e.createElement("div",{className:i.cl(O,s),...f},e.createElement("div",{className:x},_&&e.createElement("div",{className:H},e.createElement("div",{className:A},_),u.length>0?e.createElement(e.Fragment,null,d===!0&&e.createElement("div",{className:W({barCompleted:v.length===u.length,disabled:a,color:c})},`${v.length} of ${u.length} Complete`)):e.createElement("div",{className:I({completed:n===1,disabled:a,color:c})},`${Math.floor(n*100)}%`)),u.length>0?e.createElement("ul",{className:i.cl(U({barCompleted:v.length===u.length,disabled:a,color:c}),"d-flex align-items-center list-unstyled mb-0")},K):e.createElement("div",{className:D({disabled:a})},e.createElement("div",{className:M({completed:n===1,disabled:a,color:c}),style:{width:`${n*100}%`}})),t&&e.createElement("div",{className:F},t)),l&&n!==1&&e.createElement("div",{className:V},e.createElement(y.Button,{kind:"icon",icon:"x",onClick:l,title:C("design-system:progressBar.closeButtonTitle")})))}i.Metadata.set(P,{name:"Progress Bar",props:{detail:{type:"string"},disabled:{type:"boolean"},onClose:{type:"() => void"},percentComplete:{type:"number",default:"0"},progressColor:{type:'"purple" | "blue" | "red" | "orange" | "grey"',default:'"purple"'}}});function k({className:s,size:o="sm",progress:t=0,...a}){const n=g.Tokens.component["progress-ring"][o]-4,_=n*2*Math.PI,d=_-t/100*_;return e.createElement("div",{className:s,...a},e.createElement("svg",{height:g.Tokens.component["progress-ring"][o]*2,width:g.Tokens.component["progress-ring"][o]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:g.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${_} ${_}`,r:n,cx:g.Tokens.component["progress-ring"][o],cy:g.Tokens.component["progress-ring"][o]}),e.createElement("circle",{stroke:g.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${_} ${_}`,style:{strokeDashoffset:d},r:n,cx:g.Tokens.component["progress-ring"][o],cy:g.Tokens.component["progress-ring"][o]})))}i.Metadata.set(k,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const Y={"Progress Bar":{description:()=>e.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[P,w],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),e.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),e.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Clear Button"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Progress Details"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{description:()=>e.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:m.code`
|
|
2
|
+
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
3
|
+
import { Card } from "@sps-woodland/cards";
|
|
4
|
+
|
|
5
|
+
function Component() {
|
|
6
|
+
function handleClose() {
|
|
7
|
+
console.log("closed");
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<Card>
|
|
12
|
+
<ProgressBar
|
|
13
|
+
title="File Name"
|
|
14
|
+
detail="Step 3 of 5: Verifying Headers"
|
|
15
|
+
percentComplete={0.5}
|
|
16
|
+
onClose={handleClose}
|
|
17
|
+
/>
|
|
18
|
+
</Card>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
`},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:m.code`
|
|
22
|
+
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
23
|
+
import { Card } from "@sps-woodland/cards";
|
|
24
|
+
|
|
25
|
+
function Component() {
|
|
26
|
+
return (
|
|
27
|
+
<Card>
|
|
28
|
+
<ProgressBar
|
|
29
|
+
title="File Name"
|
|
30
|
+
detail="Process Complete"
|
|
31
|
+
percentComplete={1}
|
|
32
|
+
/>
|
|
33
|
+
</Card>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
`},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:m.code`
|
|
37
|
+
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
38
|
+
import { Card } from "@sps-woodland/cards";
|
|
39
|
+
|
|
40
|
+
function Component() {
|
|
41
|
+
function handleClose() {
|
|
42
|
+
console.log("closed");
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<Card>
|
|
47
|
+
<ProgressBar
|
|
48
|
+
title="File Name"
|
|
49
|
+
detail="Step 3 of 5: Verifying Headers"
|
|
50
|
+
percentComplete={0.5}
|
|
51
|
+
disabled
|
|
52
|
+
onClose={handleClose}
|
|
53
|
+
/>
|
|
54
|
+
</Card>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
`}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(r.SpsTable,null,e.createElement(r.SpsTableHead,null,e.createElement(r.SpsTableHeader,null,"Section"),e.createElement(r.SpsTableHeader,null,"Content Type"),e.createElement(r.SpsTableHeader,null,"Required"),e.createElement(r.SpsTableHeader,null,"Description/Guidelines")),e.createElement(r.SpsTableBody,null,e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(r.SpsTableCell,null,"Title"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(r.SpsTableCell,null,"Progress Meter"),e.createElement(r.SpsTableCell,null,"Yes"),e.createElement(r.SpsTableCell,null)),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(r.SpsTableCell,null,"Progress Counter"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(r.SpsTableCell,null,"Step icons"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(r.SpsTableRow,null,e.createElement(r.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(r.SpsTableCell,null,"Step Tooltips"),e.createElement(r.SpsTableCell,null,"No"),e.createElement(r.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:m.code`
|
|
58
|
+
import { Card } from "@sps-woodland/cards";
|
|
59
|
+
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
60
|
+
|
|
61
|
+
function Component() {
|
|
62
|
+
return (
|
|
63
|
+
<Card>
|
|
64
|
+
<ProgressBar
|
|
65
|
+
title="Process Name"
|
|
66
|
+
showStepsCounter={true}
|
|
67
|
+
>
|
|
68
|
+
<ProgressBarStep
|
|
69
|
+
title="Title 1"
|
|
70
|
+
description="Description"
|
|
71
|
+
complete
|
|
72
|
+
/>
|
|
73
|
+
<ProgressBarStep complete />
|
|
74
|
+
<ProgressBarStep complete />
|
|
75
|
+
<ProgressBarStep complete />
|
|
76
|
+
<ProgressBarStep
|
|
77
|
+
title="Title 5"
|
|
78
|
+
description="Description"
|
|
79
|
+
icon="calendar"
|
|
80
|
+
/>
|
|
81
|
+
<ProgressBarStep />
|
|
82
|
+
<ProgressBarStep />
|
|
83
|
+
<ProgressBarStep />
|
|
84
|
+
<ProgressBarStep
|
|
85
|
+
title="Title 9"
|
|
86
|
+
description="Description"
|
|
87
|
+
icon="calendar"
|
|
88
|
+
/>
|
|
89
|
+
<ProgressBarStep />
|
|
90
|
+
<ProgressBarStep />
|
|
91
|
+
<ProgressBarStep
|
|
92
|
+
title="Title 12"
|
|
93
|
+
description="Description"
|
|
94
|
+
/>
|
|
95
|
+
</ProgressBar>
|
|
96
|
+
</Card>
|
|
97
|
+
)
|
|
98
|
+
}
|
|
99
|
+
`},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:m.code`
|
|
100
|
+
import { Card } from "@sps-woodland/cards";
|
|
101
|
+
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
102
|
+
|
|
103
|
+
function Component() {
|
|
104
|
+
return (
|
|
105
|
+
<Card>
|
|
106
|
+
<ProgressBar
|
|
107
|
+
title="Process Name"
|
|
108
|
+
showStepsCounter={true}
|
|
109
|
+
progressColor="grey"
|
|
110
|
+
>
|
|
111
|
+
<ProgressBarStep complete />
|
|
112
|
+
<ProgressBarStep complete />
|
|
113
|
+
<ProgressBarStep complete />
|
|
114
|
+
<ProgressBarStep complete />
|
|
115
|
+
<ProgressBarStep
|
|
116
|
+
title="Title 5"
|
|
117
|
+
description="Description"
|
|
118
|
+
icon="calendar"
|
|
119
|
+
/>
|
|
120
|
+
<ProgressBarStep />
|
|
121
|
+
<ProgressBarStep />
|
|
122
|
+
<ProgressBarStep />
|
|
123
|
+
<ProgressBarStep
|
|
124
|
+
title="Title 9"
|
|
125
|
+
description="Description"
|
|
126
|
+
icon="calendar"
|
|
127
|
+
/>
|
|
128
|
+
<ProgressBarStep />
|
|
129
|
+
<ProgressBarStep />
|
|
130
|
+
<ProgressBarStep
|
|
131
|
+
title="Title 12"
|
|
132
|
+
description="Description"
|
|
133
|
+
/>
|
|
134
|
+
</ProgressBar>
|
|
135
|
+
</Card>
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
`},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:m.code`
|
|
139
|
+
import { Card } from "@sps-woodland/cards";
|
|
140
|
+
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
141
|
+
|
|
142
|
+
function Component() {
|
|
143
|
+
return (
|
|
144
|
+
<Card>
|
|
145
|
+
<ProgressBar
|
|
146
|
+
title="Process Name"
|
|
147
|
+
showStepsCounter={true}
|
|
148
|
+
>
|
|
149
|
+
<ProgressBarStep />
|
|
150
|
+
<ProgressBarStep complete />
|
|
151
|
+
<ProgressBarStep complete />
|
|
152
|
+
<ProgressBarStep complete />
|
|
153
|
+
<ProgressBarStep complete />
|
|
154
|
+
<ProgressBarStep complete />
|
|
155
|
+
<ProgressBarStep complete />
|
|
156
|
+
<ProgressBarStep />
|
|
157
|
+
<ProgressBarStep />
|
|
158
|
+
<ProgressBarStep />
|
|
159
|
+
<ProgressBarStep />
|
|
160
|
+
<ProgressBarStep />
|
|
161
|
+
</ProgressBar>
|
|
162
|
+
</Card>
|
|
163
|
+
)
|
|
164
|
+
}
|
|
165
|
+
`},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:m.code`
|
|
166
|
+
import { Card } from "@sps-woodland/cards";
|
|
167
|
+
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
168
|
+
|
|
169
|
+
function Component() {
|
|
170
|
+
return (
|
|
171
|
+
<Card>
|
|
172
|
+
<ProgressBar
|
|
173
|
+
title="Process Name"
|
|
174
|
+
showStepsCounter={true}
|
|
175
|
+
>
|
|
176
|
+
<ProgressBarStep complete />
|
|
177
|
+
<ProgressBarStep complete />
|
|
178
|
+
<ProgressBarStep complete />
|
|
179
|
+
<ProgressBarStep complete />
|
|
180
|
+
<ProgressBarStep
|
|
181
|
+
title="Title 5"
|
|
182
|
+
description="Description"
|
|
183
|
+
icon="calendar"
|
|
184
|
+
complete
|
|
185
|
+
/>
|
|
186
|
+
<ProgressBarStep complete />
|
|
187
|
+
<ProgressBarStep complete />
|
|
188
|
+
<ProgressBarStep complete />
|
|
189
|
+
<ProgressBarStep
|
|
190
|
+
title="Title 9"
|
|
191
|
+
description="Description"
|
|
192
|
+
icon="calendar"
|
|
193
|
+
complete
|
|
194
|
+
/>
|
|
195
|
+
<ProgressBarStep complete />
|
|
196
|
+
<ProgressBarStep complete />
|
|
197
|
+
<ProgressBarStep
|
|
198
|
+
title="Title 12"
|
|
199
|
+
description="Description"
|
|
200
|
+
complete
|
|
201
|
+
/>
|
|
202
|
+
</ProgressBar>
|
|
203
|
+
</Card>
|
|
204
|
+
)
|
|
205
|
+
}
|
|
206
|
+
`},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:m.code`
|
|
207
|
+
import { Card } from "@sps-woodland/cards";
|
|
208
|
+
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
209
|
+
|
|
210
|
+
function Component() {
|
|
211
|
+
return (
|
|
212
|
+
<Card>
|
|
213
|
+
<ProgressBar
|
|
214
|
+
title="Process Name"
|
|
215
|
+
showStepsCounter={true}
|
|
216
|
+
disabled
|
|
217
|
+
>
|
|
218
|
+
<ProgressBarStep complete />
|
|
219
|
+
<ProgressBarStep complete />
|
|
220
|
+
<ProgressBarStep complete />
|
|
221
|
+
<ProgressBarStep complete />
|
|
222
|
+
<ProgressBarStep complete />
|
|
223
|
+
<ProgressBarStep complete />
|
|
224
|
+
<ProgressBarStep complete />
|
|
225
|
+
<ProgressBarStep />
|
|
226
|
+
<ProgressBarStep />
|
|
227
|
+
<ProgressBarStep />
|
|
228
|
+
</ProgressBar>
|
|
229
|
+
</Card>
|
|
230
|
+
)
|
|
231
|
+
}
|
|
232
|
+
`}}}}}};p.MANIFEST=Y,p.ProgressBar=P,p.ProgressBarStep=w,p.ProgressRing=k,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_progress-
|
|
1
|
+
.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme0{align-items:center;display:flex}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme1{flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme2{margin-left:.5rem;margin-top:-.375rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme4{color:#1f282c;flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme6{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qme8{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmea{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeb{color:#027db8}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmec{color:#de012e}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmed{color:#e77609}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmee{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeg{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmej{background-color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmel{background-color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmen{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmen:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeo{background:#027db8}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeo:hover{background:#08638d}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmep{background:#de012e}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmep:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeq{background:#e77609}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmeq:hover{background:#aa5e13}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmer{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmer:hover{background:#1f282c}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmes{background-color:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go0{font-weight:600}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go1{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go3{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go5{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go6{color:#027db8}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go7{color:#de012e}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go8{color:#e77609}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go9{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goh{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goj{display:block}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gok{color:#fff}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gol{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gom{background:#e9e9ea;border-radius:.125rem;margin-left:.125rem;height:1rem;display:flex;flex:1 1 8%;align-items:center;justify-content:center}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0gom:only-child{border-radius:.5rem}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goy{background:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0goz{background:#0b8940}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go10{background:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go11{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go11:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go12{background:#de012e}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go12:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go13{background:#027db8}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go13:hover{background:#08638d}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go14{background:#e77609}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go14:hover{background:#aa5e13}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go15{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_21_2__hash_17lj0go15:hover{background:#1f282c}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/progress-indicators",
|
|
3
3
|
"description": "SPS Woodland Design System progress indicator components",
|
|
4
|
-
"version": "8.21.
|
|
4
|
+
"version": "8.21.2",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
|
|
8
8
|
"homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/progress-indicators#readme",
|
|
9
9
|
"type": "module",
|
|
10
|
-
"module": "./lib/index.
|
|
11
|
-
"main": "./lib/index.cjs
|
|
10
|
+
"module": "./lib/index.js",
|
|
11
|
+
"main": "./lib/index.umd.cjs",
|
|
12
12
|
"types": "./lib/index.d.ts",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"default": "./lib/index.
|
|
15
|
+
"require": "./lib/index.umd.cjs",
|
|
16
|
+
"import": "./lib/index.js",
|
|
17
|
+
"default": "./lib/index.js",
|
|
18
18
|
"types": "./lib/index.d.ts"
|
|
19
19
|
},
|
|
20
20
|
"./lib/style.css": {
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.9.0",
|
|
31
31
|
"react-dom": "^16.9.0",
|
|
32
|
-
"@sps-woodland/buttons": "8.21.
|
|
33
|
-
"@sps-woodland/core": "8.21.
|
|
34
|
-
"@sps-woodland/tokens": "8.21.
|
|
35
|
-
"@spscommerce/ds-react": "8.21.
|
|
32
|
+
"@sps-woodland/buttons": "8.21.2",
|
|
33
|
+
"@sps-woodland/core": "8.21.2",
|
|
34
|
+
"@sps-woodland/tokens": "8.21.2",
|
|
35
|
+
"@spscommerce/ds-react": "8.21.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
41
41
|
"react": "^16.9.0",
|
|
42
42
|
"react-dom": "^16.9.0",
|
|
43
|
-
"@sps-woodland/buttons": "8.21.
|
|
44
|
-
"@sps-woodland/core": "8.21.
|
|
45
|
-
"@sps-woodland/tokens": "8.21.
|
|
46
|
-
"@spscommerce/ds-react": "8.21.
|
|
43
|
+
"@sps-woodland/buttons": "8.21.2",
|
|
44
|
+
"@sps-woodland/core": "8.21.2",
|
|
45
|
+
"@sps-woodland/tokens": "8.21.2",
|
|
46
|
+
"@spscommerce/ds-react": "8.21.2"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -18,8 +18,8 @@ export default defineConfig({
|
|
|
18
18
|
build: {
|
|
19
19
|
lib: {
|
|
20
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
21
|
-
|
|
22
|
-
fileName:
|
|
21
|
+
name: "ProgressIndicators",
|
|
22
|
+
fileName: "index",
|
|
23
23
|
},
|
|
24
24
|
outDir: path.resolve(__dirname, "./lib"),
|
|
25
25
|
emptyOutDir: false,
|
package/lib/index.cjs.js
DELETED
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),d=require("@sps-woodland/core"),j=require("@sps-woodland/buttons"),s=require("@spscommerce/ds-react"),c=require("@sps-woodland/tokens"),m=require("@spscommerce/utils");function N(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>r[t]})}}return o.default=r,Object.freeze(o)}const e=N(y);function q(r,o,t){return o in r?Object.defineProperty(r,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[o]=t,r}function P(r,o){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);o&&(a=a.filter(function(l){return Object.getOwnPropertyDescriptor(r,l).enumerable})),t.push.apply(t,a)}return t}function B(r){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?P(Object(t),!0).forEach(function(a){q(r,a,t[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):P(Object(t)).forEach(function(a){Object.defineProperty(r,a,Object.getOwnPropertyDescriptor(t,a))})}return r}var O=(r,o,t)=>{for(var a of Object.keys(r)){var l;if(r[a]!==((l=o[a])!==null&&l!==void 0?l:t[a]))return!1}return!0},h=r=>o=>{var t=r.defaultClassName,a=B(B({},r.defaultVariants),o);for(var l in a){var n,p=(n=a[l])!==null&&n!==void 0?n:r.defaultVariants[l];if(p!=null){var _=p;typeof _=="boolean"&&(_=_===!0?"true":"false");var i=r.variantClassNames[l][_];i&&(t+=" "+i)}}for(var[u,w]of r.compoundVariants)O(u,a,r.defaultVariants)&&(t+=" "+w);return t},D="pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme0",V=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),x="pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme2",R="pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme1",F="pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmet",H="pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme3",M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qmes"]]}),A="pkg_sps-woodland_progress-indicators__version_8_21_0__hash_1890qme4",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go15"]]}),U=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),W=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_21_0__hash_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]});function S({className:r,title:o,description:t,icon:a,complete:l=!1,disabled:n,barCompleted:p,progressColor:_,...i}){const u=d.useElementId().current||void 0;return e.createElement("li",{id:u,className:d.cl(G({stepCompleted:l,disabled:n,barCompleted:p,color:_}),r),...i},a&&e.createElement(d.Icon,{icon:a,size:"sm",className:$({stepCompleted:l})}),o&&u&&e.createElement(s.SpsTooltip,{for:u,title:o},t))}d.Metadata.set(S,{name:"ProgressBarStep",props:{icon:{type:"IconName"},complete:{type:"boolean"},title:{type:"string"},description:{type:"string"}}});function C({className:r,children:o,detail:t,disabled:a,onClose:l,percentComplete:n=0,title:p,showStepsCounter:_,progressColor:i="purple",...u}){const{t:w}=e.useContext(d.I18nContext),[b,T]=e.useState([]),[g]=d.selectChildren(o,[{type:S}]);e.useEffect(()=>{let f=[];g.forEach(v=>{v.hasOwnProperty("props")&&v.props.complete===!0&&f.push(v),T(f)})},[]),n&&g&&console.warn(["The percentComplete prop can't be used with the ProgressBarStep subcomponent.","The progress will be determined by how many nested ProgressBarStep components have the completed prop."].join(" "));const k=e.Children.map(o,f=>e.isValidElement(f)?e.cloneElement(f,{disabled:a,barCompleted:b.length===g.length,progressColor:i}):f);return e.createElement("div",{className:d.cl(D,r),...u},e.createElement("div",{className:R},p&&e.createElement("div",{className:H},e.createElement("div",{className:A},p),g.length>0?e.createElement(e.Fragment,null,_===!0&&e.createElement("div",{className:W({barCompleted:b.length===g.length,disabled:a,color:i})},`${b.length} of ${g.length} Complete`)):e.createElement("div",{className:M({completed:n===1,disabled:a,color:i})},`${Math.floor(n*100)}%`)),g.length>0?e.createElement("ul",{className:d.cl(U({barCompleted:b.length===g.length,disabled:a,color:i}),"d-flex align-items-center list-unstyled mb-0")},k):e.createElement("div",{className:V({disabled:a})},e.createElement("div",{className:I({completed:n===1,disabled:a,color:i}),style:{width:`${n*100}%`}})),t&&e.createElement("div",{className:F},t)),l&&n!==1&&e.createElement("div",{className:x},e.createElement(j.Button,{kind:"icon",icon:"x",onClick:l,title:w("design-system:progressBar.closeButtonTitle")})))}d.Metadata.set(C,{name:"Progress Bar",props:{detail:{type:"string"},disabled:{type:"boolean"},onClose:{type:"() => void"},percentComplete:{type:"number",default:"0"},progressColor:{type:'"purple" | "blue" | "red" | "orange" | "grey"',default:'"purple"'}}});function E({className:r,size:o="sm",progress:t=0,...a}){const n=c.Tokens.component["progress-ring"][o]-4,p=n*2*Math.PI,_=p-t/100*p;return e.createElement("div",{className:r,...a},e.createElement("svg",{height:c.Tokens.component["progress-ring"][o]*2,width:c.Tokens.component["progress-ring"][o]*2,style:{transform:"rotate(-90deg)"}},e.createElement("circle",{stroke:c.Tokens.color.grey["medium-light"],fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,r:n,cx:c.Tokens.component["progress-ring"][o],cy:c.Tokens.component["progress-ring"][o]}),e.createElement("circle",{stroke:c.Tokens.color.purple.medium,fill:"transparent",strokeWidth:4,strokeDasharray:`${p} ${p}`,style:{strokeDashoffset:_},r:n,cx:c.Tokens.component["progress-ring"][o],cy:c.Tokens.component["progress-ring"][o]})))}d.Metadata.set(E,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const Y={description:()=>e.createElement("p",null,"Progress Bars are used to visualize the progression of a process (such as a file upload) or series of related tasks that take place over a longer period of time. Progress Bars can be accompanied by a variety of additional content to provide more context regarding the processes being performed."),components:[C,S],examples:{general:{label:"General Usage",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Progress Bars can be used in a variety of situations, but the most common use case is to show the live progress of a process such as a file upload or the processing of a digital payload."),e.createElement("p",null,"For processes that typically complete within minutes or less, opt for the Standard Progress Bar."),e.createElement("p",null,"For processes that are divided into specific steps that are accomplished over a longer period of time, opt for the Stepped Progress Bar."))},standard:{label:"Standard Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Standard Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(s.SpsTable,null,e.createElement(s.SpsTableHead,null,e.createElement(s.SpsTableHeader,null,"Section"),e.createElement(s.SpsTableHeader,null,"Content Type"),e.createElement(s.SpsTableHeader,null,"Required"),e.createElement(s.SpsTableHeader,null,"Description/Guidelines")),e.createElement(s.SpsTableBody,null,e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(s.SpsTableCell,null,"Title"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(s.SpsTableCell,null,"Progress Meter"),e.createElement(s.SpsTableCell,null,"Yes"),e.createElement(s.SpsTableCell,null)),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(s.SpsTableCell,null,"Progress Counter"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(s.SpsTableCell,null,"Clear Button"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"If the process requires the option to be cancelled or removed from a list the clear button can be used.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(s.SpsTableCell,null,"Progress Details"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Progress Details provide more context for the user and are especially useful when the process includes multiple steps."))))),examples:{standard:{description:()=>e.createElement("p",null,"The Standard Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements."),react:m.code`
|
|
2
|
-
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
3
|
-
import { Card } from "@sps-woodland/cards";
|
|
4
|
-
|
|
5
|
-
function Component() {
|
|
6
|
-
function handleClose() {
|
|
7
|
-
console.log("closed");
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
return (
|
|
11
|
-
<Card>
|
|
12
|
-
<ProgressBar
|
|
13
|
-
title="File Name"
|
|
14
|
-
detail="Step 3 of 5: Verifying Headers"
|
|
15
|
-
percentComplete={0.5}
|
|
16
|
-
onClose={handleClose}
|
|
17
|
-
/>
|
|
18
|
-
</Card>
|
|
19
|
-
)
|
|
20
|
-
}
|
|
21
|
-
`},completed:{description:()=>e.createElement("p",null,"Once complete, the progress bar appears in green and the clear button (if included) disappears from view."),react:m.code`
|
|
22
|
-
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
23
|
-
import { Card } from "@sps-woodland/cards";
|
|
24
|
-
|
|
25
|
-
function Component() {
|
|
26
|
-
return (
|
|
27
|
-
<Card>
|
|
28
|
-
<ProgressBar
|
|
29
|
-
title="File Name"
|
|
30
|
-
detail="Process Complete"
|
|
31
|
-
percentComplete={1}
|
|
32
|
-
/>
|
|
33
|
-
</Card>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
`},disabled:{description:()=>e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted."),react:m.code`
|
|
37
|
-
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
38
|
-
import { Card } from "@sps-woodland/cards";
|
|
39
|
-
|
|
40
|
-
function Component() {
|
|
41
|
-
function handleClose() {
|
|
42
|
-
console.log("closed");
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<Card>
|
|
47
|
-
<ProgressBar
|
|
48
|
-
title="File Name"
|
|
49
|
-
detail="Step 3 of 5: Verifying Headers"
|
|
50
|
-
percentComplete={0.5}
|
|
51
|
-
disabled
|
|
52
|
-
onClose={handleClose}
|
|
53
|
-
/>
|
|
54
|
-
</Card>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
`}}},stepped:{label:"Stepped Progress Bar",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Stepped Progress Bars are comprised of the following Required and Optional elements."),e.createElement("img",{src:"assets/images/stepped-progress-bar-example.svg",alt:"A Progress Bar with labels on each section",className:"w-100 mb-3"}),e.createElement(s.SpsTable,null,e.createElement(s.SpsTableHead,null,e.createElement(s.SpsTableHeader,null,"Section"),e.createElement(s.SpsTableHeader,null,"Content Type"),e.createElement(s.SpsTableHeader,null,"Required"),e.createElement(s.SpsTableHeader,null,"Description/Guidelines")),e.createElement(s.SpsTableBody,null,e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"1")),e.createElement(s.SpsTableCell,null,"Title"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Use the Title when it provides necessary or helpful detail about the file or action that is being processed.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"2")),e.createElement(s.SpsTableCell,null,"Progress Meter"),e.createElement(s.SpsTableCell,null,"Yes"),e.createElement(s.SpsTableCell,null)),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"3")),e.createElement(s.SpsTableCell,null,"Progress Counter"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"The Progress Counter should not be used without the existence of a Title.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"4")),e.createElement(s.SpsTableCell,null,"Step icons"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Icons can be set inside of steps for visual emphasis.")),e.createElement(s.SpsTableRow,null,e.createElement(s.SpsTableCell,null,e.createElement("span",{className:"sps-tag sps-tag--info"},"5")),e.createElement(s.SpsTableCell,null,"Step Tooltips"),e.createElement(s.SpsTableCell,null,"No"),e.createElement(s.SpsTableCell,{wrap:400},"Tooltips can be utilized to provide more details about each specific step. Tooltips can be exposed on click or hover."))))),examples:{standard:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Building Stepped Progress Bars"),e.createElement("p",null,"The Stepped Progress Bar is designed to expand to fit the entire width of its container. View the diagram above for rules regarding including or excluding certain elements.")),react:m.code`
|
|
58
|
-
import { Card } from "@sps-woodland/cards";
|
|
59
|
-
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
60
|
-
|
|
61
|
-
function Component() {
|
|
62
|
-
return (
|
|
63
|
-
<Card>
|
|
64
|
-
<ProgressBar
|
|
65
|
-
title="Process Name"
|
|
66
|
-
showStepsCounter={true}
|
|
67
|
-
>
|
|
68
|
-
<ProgressBarStep
|
|
69
|
-
title="Title 1"
|
|
70
|
-
description="Description"
|
|
71
|
-
complete
|
|
72
|
-
/>
|
|
73
|
-
<ProgressBarStep complete />
|
|
74
|
-
<ProgressBarStep complete />
|
|
75
|
-
<ProgressBarStep complete />
|
|
76
|
-
<ProgressBarStep
|
|
77
|
-
title="Title 5"
|
|
78
|
-
description="Description"
|
|
79
|
-
icon="calendar"
|
|
80
|
-
/>
|
|
81
|
-
<ProgressBarStep />
|
|
82
|
-
<ProgressBarStep />
|
|
83
|
-
<ProgressBarStep />
|
|
84
|
-
<ProgressBarStep
|
|
85
|
-
title="Title 9"
|
|
86
|
-
description="Description"
|
|
87
|
-
icon="calendar"
|
|
88
|
-
/>
|
|
89
|
-
<ProgressBarStep />
|
|
90
|
-
<ProgressBarStep />
|
|
91
|
-
<ProgressBarStep
|
|
92
|
-
title="Title 12"
|
|
93
|
-
description="Description"
|
|
94
|
-
/>
|
|
95
|
-
</ProgressBar>
|
|
96
|
-
</Card>
|
|
97
|
-
)
|
|
98
|
-
}
|
|
99
|
-
`},color:{description:()=>e.createElement("h4",null,"Alternate Color"),react:m.code`
|
|
100
|
-
import { Card } from "@sps-woodland/cards";
|
|
101
|
-
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
102
|
-
|
|
103
|
-
function Component() {
|
|
104
|
-
return (
|
|
105
|
-
<Card>
|
|
106
|
-
<ProgressBar
|
|
107
|
-
title="Process Name"
|
|
108
|
-
showStepsCounter={true}
|
|
109
|
-
progressColor="grey"
|
|
110
|
-
>
|
|
111
|
-
<ProgressBarStep complete />
|
|
112
|
-
<ProgressBarStep complete />
|
|
113
|
-
<ProgressBarStep complete />
|
|
114
|
-
<ProgressBarStep complete />
|
|
115
|
-
<ProgressBarStep
|
|
116
|
-
title="Title 5"
|
|
117
|
-
description="Description"
|
|
118
|
-
icon="calendar"
|
|
119
|
-
/>
|
|
120
|
-
<ProgressBarStep />
|
|
121
|
-
<ProgressBarStep />
|
|
122
|
-
<ProgressBarStep />
|
|
123
|
-
<ProgressBarStep
|
|
124
|
-
title="Title 9"
|
|
125
|
-
description="Description"
|
|
126
|
-
icon="calendar"
|
|
127
|
-
/>
|
|
128
|
-
<ProgressBarStep />
|
|
129
|
-
<ProgressBarStep />
|
|
130
|
-
<ProgressBarStep
|
|
131
|
-
title="Title 12"
|
|
132
|
-
description="Description"
|
|
133
|
-
/>
|
|
134
|
-
</ProgressBar>
|
|
135
|
-
</Card>
|
|
136
|
-
)
|
|
137
|
-
}
|
|
138
|
-
`},skippedSteps:{description:()=>e.createElement("h4",null,"Skip steps"),react:m.code`
|
|
139
|
-
import { Card } from "@sps-woodland/cards";
|
|
140
|
-
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
141
|
-
|
|
142
|
-
function Component() {
|
|
143
|
-
return (
|
|
144
|
-
<Card>
|
|
145
|
-
<ProgressBar
|
|
146
|
-
title="Process Name"
|
|
147
|
-
showStepsCounter={true}
|
|
148
|
-
>
|
|
149
|
-
<ProgressBarStep />
|
|
150
|
-
<ProgressBarStep complete />
|
|
151
|
-
<ProgressBarStep complete />
|
|
152
|
-
<ProgressBarStep complete />
|
|
153
|
-
<ProgressBarStep complete />
|
|
154
|
-
<ProgressBarStep complete />
|
|
155
|
-
<ProgressBarStep complete />
|
|
156
|
-
<ProgressBarStep />
|
|
157
|
-
<ProgressBarStep />
|
|
158
|
-
<ProgressBarStep />
|
|
159
|
-
<ProgressBarStep />
|
|
160
|
-
<ProgressBarStep />
|
|
161
|
-
</ProgressBar>
|
|
162
|
-
</Card>
|
|
163
|
-
)
|
|
164
|
-
}
|
|
165
|
-
`},completed:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Completed State"),e.createElement("p",null,"Once complete, the progress bar appears in green.")),react:m.code`
|
|
166
|
-
import { Card } from "@sps-woodland/cards";
|
|
167
|
-
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
168
|
-
|
|
169
|
-
function Component() {
|
|
170
|
-
return (
|
|
171
|
-
<Card>
|
|
172
|
-
<ProgressBar
|
|
173
|
-
title="Process Name"
|
|
174
|
-
showStepsCounter={true}
|
|
175
|
-
>
|
|
176
|
-
<ProgressBarStep complete />
|
|
177
|
-
<ProgressBarStep complete />
|
|
178
|
-
<ProgressBarStep complete />
|
|
179
|
-
<ProgressBarStep complete />
|
|
180
|
-
<ProgressBarStep
|
|
181
|
-
title="Title 5"
|
|
182
|
-
description="Description"
|
|
183
|
-
icon="calendar"
|
|
184
|
-
complete
|
|
185
|
-
/>
|
|
186
|
-
<ProgressBarStep complete />
|
|
187
|
-
<ProgressBarStep complete />
|
|
188
|
-
<ProgressBarStep complete />
|
|
189
|
-
<ProgressBarStep
|
|
190
|
-
title="Title 9"
|
|
191
|
-
description="Description"
|
|
192
|
-
icon="calendar"
|
|
193
|
-
complete
|
|
194
|
-
/>
|
|
195
|
-
<ProgressBarStep complete />
|
|
196
|
-
<ProgressBarStep complete />
|
|
197
|
-
<ProgressBarStep
|
|
198
|
-
title="Title 12"
|
|
199
|
-
description="Description"
|
|
200
|
-
complete
|
|
201
|
-
/>
|
|
202
|
-
</ProgressBar>
|
|
203
|
-
</Card>
|
|
204
|
-
)
|
|
205
|
-
}
|
|
206
|
-
`},disabled:{description:()=>e.createElement(e.Fragment,null,e.createElement("h4",null,"Disabled State"),e.createElement("p",null,"A disabled state is available for cases when progress is intentionally paused or user interaction needs to be restricted.")),react:m.code`
|
|
207
|
-
import { Card } from "@sps-woodland/cards";
|
|
208
|
-
import { ProgressBar, ProgressBarStep } from "@sps-woodland/progress-indicators";
|
|
209
|
-
|
|
210
|
-
function Component() {
|
|
211
|
-
return (
|
|
212
|
-
<Card>
|
|
213
|
-
<ProgressBar
|
|
214
|
-
title="Process Name"
|
|
215
|
-
showStepsCounter={true}
|
|
216
|
-
disabled
|
|
217
|
-
>
|
|
218
|
-
<ProgressBarStep complete />
|
|
219
|
-
<ProgressBarStep complete />
|
|
220
|
-
<ProgressBarStep complete />
|
|
221
|
-
<ProgressBarStep complete />
|
|
222
|
-
<ProgressBarStep complete />
|
|
223
|
-
<ProgressBarStep complete />
|
|
224
|
-
<ProgressBarStep complete />
|
|
225
|
-
<ProgressBarStep />
|
|
226
|
-
<ProgressBarStep />
|
|
227
|
-
<ProgressBarStep />
|
|
228
|
-
</ProgressBar>
|
|
229
|
-
</Card>
|
|
230
|
-
)
|
|
231
|
-
}
|
|
232
|
-
`}}}}},z={"Progress Bar":Y};exports.MANIFEST=z;exports.ProgressBar=C;exports.ProgressBarStep=S;exports.ProgressRing=E;
|