@sps-woodland/progress-indicators 8.33.10 → 8.34.1
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.js +16 -15
- package/lib/index.umd.cjs +2 -2
- package/lib/style.css +1 -1
- package/package.json +11 -9
package/lib/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
|
-
import { Metadata as b, useElementId as V, cl as E, Icon as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { SpsTooltip as
|
|
2
|
+
import { Metadata as b, useElementId as V, cl as E, Icon as D, selectChildren as x } from "@sps-woodland/core";
|
|
3
|
+
import { Button as F } from "@sps-woodland/buttons";
|
|
4
|
+
import { SpsTooltip as R, SpsTable as C, SpsTableHead as k, SpsTableHeader as m, SpsTableBody as y, SpsTableRow as d, SpsTableCell as r } from "@spscommerce/ds-react";
|
|
5
|
+
import { useWoodlandLanguage as I } from "@spscommerce/i18n";
|
|
5
6
|
import { Tokens as c } from "@sps-woodland/tokens";
|
|
6
7
|
import { code as u } from "@spscommerce/utils";
|
|
7
8
|
function A(s, o, a) {
|
|
@@ -57,7 +58,7 @@ var M = (s, o, a) => {
|
|
|
57
58
|
for (var [h, P] of s.compoundVariants)
|
|
58
59
|
M(h, t, s.defaultVariants) && (a += " " + P);
|
|
59
60
|
return a;
|
|
60
|
-
}, H = "pkg_sps-woodland_progress-
|
|
61
|
+
}, H = "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme0", W = "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme1", $ = "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme2", G = "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme3", U = "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme4", Y = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme5", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme6", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme7" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme8", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme9" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmea", blue: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeb", red: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmec", orange: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmed", grey: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmee" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), K = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmef", variantClassNames: { disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeg", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), L = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmei", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmej", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmek" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmel", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmem" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmen", blue: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeo", red: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmep", orange: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeq", grey: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmer" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [[{ completed: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmes"]] }), z = "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmet", J = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go0", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go1", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go2" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go3", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go4" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go5", blue: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go6", red: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go7", orange: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go8", grey: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go9" } }, defaultVariants: { barCompleted: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), Q = f({ defaultClassName: "", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goa", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gob" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goc", blue: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0god", red: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goe", orange: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gof", grey: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gog" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goh", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goi" } }, defaultVariants: { barCompleted: !1, color: "purple", disabled: !1 }, compoundVariants: [] }), X = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goj", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gok", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), Z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gom", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gon", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goo" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gop", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goq" }, barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gor", false: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gos" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0got", red: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gou", blue: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gov", orange: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gow", grey: "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gox" } }, defaultVariants: { stepCompleted: !1, disabled: !1, barCompleted: !1, color: "purple" }, compoundVariants: [[{ barCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goy"], [{ barCompleted: !0, disabled: !1 }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goz"], [{ stepCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go10"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "purple" }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go11"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "red" }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go12"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "blue" }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go13"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "orange" }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go14"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "grey" }, "pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go15"]] });
|
|
61
62
|
function S({
|
|
62
63
|
className: s,
|
|
63
64
|
title: o,
|
|
@@ -86,7 +87,7 @@ function S({
|
|
|
86
87
|
...i
|
|
87
88
|
},
|
|
88
89
|
t && /* @__PURE__ */ e.createElement(
|
|
89
|
-
|
|
90
|
+
D,
|
|
90
91
|
{
|
|
91
92
|
icon: t,
|
|
92
93
|
size: "sm",
|
|
@@ -95,7 +96,7 @@ function S({
|
|
|
95
96
|
})
|
|
96
97
|
}
|
|
97
98
|
),
|
|
98
|
-
o && h && /* @__PURE__ */ e.createElement(
|
|
99
|
+
o && h && /* @__PURE__ */ e.createElement(R, { for: h, title: o }, a)
|
|
99
100
|
);
|
|
100
101
|
}
|
|
101
102
|
b.set(S, {
|
|
@@ -119,7 +120,7 @@ function T({
|
|
|
119
120
|
progressColor: i = "purple",
|
|
120
121
|
...h
|
|
121
122
|
}) {
|
|
122
|
-
const { t: P } =
|
|
123
|
+
const { t: P } = I(), [w, q] = e.useState([]), [g] = x(o, [
|
|
123
124
|
{ type: S }
|
|
124
125
|
]);
|
|
125
126
|
e.useEffect(() => {
|
|
@@ -138,10 +139,10 @@ function T({
|
|
|
138
139
|
barCompleted: w.length === g.length,
|
|
139
140
|
progressColor: i
|
|
140
141
|
}) : v);
|
|
141
|
-
return /* @__PURE__ */ e.createElement("div", { className: E(H, s), ...h }, /* @__PURE__ */ e.createElement("div", { className:
|
|
142
|
+
return /* @__PURE__ */ e.createElement("div", { className: E(H, s), ...h }, /* @__PURE__ */ e.createElement("div", { className: W }, p && /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement("div", { className: U }, p), g.length > 0 ? /* @__PURE__ */ e.createElement(e.Fragment, null, _ === !0 && /* @__PURE__ */ e.createElement(
|
|
142
143
|
"div",
|
|
143
144
|
{
|
|
144
|
-
className:
|
|
145
|
+
className: J({
|
|
145
146
|
barCompleted: w.length === g.length,
|
|
146
147
|
disabled: t,
|
|
147
148
|
color: i
|
|
@@ -181,7 +182,7 @@ function T({
|
|
|
181
182
|
/* @__PURE__ */ e.createElement(
|
|
182
183
|
"div",
|
|
183
184
|
{
|
|
184
|
-
className:
|
|
185
|
+
className: L({
|
|
185
186
|
completed: n === 1,
|
|
186
187
|
disabled: t,
|
|
187
188
|
color: i
|
|
@@ -189,13 +190,13 @@ function T({
|
|
|
189
190
|
style: { width: `${n * 100}%` }
|
|
190
191
|
}
|
|
191
192
|
)
|
|
192
|
-
), a && /* @__PURE__ */ e.createElement("div", { className:
|
|
193
|
-
|
|
193
|
+
), a && /* @__PURE__ */ e.createElement("div", { className: z }, a)), l && n !== 1 && /* @__PURE__ */ e.createElement("div", { className: $ }, /* @__PURE__ */ e.createElement(
|
|
194
|
+
F,
|
|
194
195
|
{
|
|
195
196
|
kind: "icon",
|
|
196
197
|
icon: "x",
|
|
197
198
|
onClick: l,
|
|
198
|
-
title: P("
|
|
199
|
+
title: P("progressBar.closeButtonTitle", { defaultValue: "Close progress bar" })
|
|
199
200
|
}
|
|
200
201
|
)));
|
|
201
202
|
}
|
|
@@ -555,11 +556,11 @@ const re = {
|
|
|
555
556
|
}
|
|
556
557
|
}
|
|
557
558
|
}
|
|
558
|
-
},
|
|
559
|
+
}, pe = {
|
|
559
560
|
"Progress Bars": re
|
|
560
561
|
};
|
|
561
562
|
export {
|
|
562
|
-
|
|
563
|
+
pe as MANIFEST,
|
|
563
564
|
T as ProgressBar,
|
|
564
565
|
S as ProgressBarStep,
|
|
565
566
|
ee as ProgressRing
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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,P]of s.compoundVariants)q(f,a,s.defaultVariants)&&(t+=" "+P);return t},O="pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme0",D="pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme1",V="pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme2",x="pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme3",F="pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme4",H=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmes"]]}),A="pkg_sps-woodland_progress-indicators__version_8_33_10__hash_1890qmet",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]}),G=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),U=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),W=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_33_10__hash_17lj0go15"]]});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(W({stepCompleted:l,disabled:n,barCompleted:_,color:d}),s),...c},a&&e.createElement(i.Icon,{icon:a,size:"sm",className:U({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 C({className:s,children:o,detail:t,disabled:a,onClose:l,percentComplete:n=0,title:_,showStepsCounter:d,progressColor:c="purple",...f}){const{t:P}=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:D},_&&e.createElement("div",{className:x},e.createElement("div",{className:F},_),u.length>0?e.createElement(e.Fragment,null,d===!0&&e.createElement("div",{className:$({barCompleted:v.length===u.length,disabled:a,color:c})},`${v.length} of ${u.length} Complete`)):e.createElement("div",{className:H({completed:n===1,disabled:a,color:c})},`${Math.floor(n*100)}%`)),u.length>0?e.createElement("ul",{className:i.cl(G({barCompleted:v.length===u.length,disabled:a,color:c}),"d-flex align-items-center list-unstyled mb-0")},K):e.createElement("div",{className:I({disabled:a})},e.createElement("div",{className:M({completed:n===1,disabled:a,color:c}),style:{width:`${n*100}%`}})),t&&e.createElement("div",{className:A},t)),l&&n!==1&&e.createElement("div",{className:V},e.createElement(y.Button,{kind:"icon",icon:"x",onClick:l,title:P("design-system:progressBar.closeButtonTitle",{defaultValue:"Close progress bar"})})))}i.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 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 Bars":{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,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`
|
|
1
|
+
(function(l,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/buttons"),require("@spscommerce/ds-react"),require("@spscommerce/i18n"),require("@sps-woodland/tokens"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/buttons","@spscommerce/ds-react","@spscommerce/i18n","@sps-woodland/tokens","@spscommerce/utils"],S):(l=typeof globalThis<"u"?globalThis:l||self,S(l.ProgressIndicators={},l.React,l.core,l.buttons,l.dsReact,l.i18n,l.tokens,l.utils))})(this,function(l,S,c,y,r,j,g,m){"use strict";function N(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=N(S);function q(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(n){return Object.getOwnPropertyDescriptor(s,n).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){q(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 O=(s,o,t)=>{for(var a of Object.keys(s)){var n;if(s[a]!==((n=o[a])!==null&&n!==void 0?n:t[a]))return!1}return!0},h=s=>o=>{var t=s.defaultClassName,a=T(T({},s.defaultVariants),o);for(var n in a){var p,_=(p=a[n])!==null&&p!==void 0?p:s.defaultVariants[n];if(_!=null){var i=_;typeof i=="boolean"&&(i=i===!0?"true":"false");var d=s.variantClassNames[n][i];d&&(t+=" "+d)}}for(var[f,C]of s.compoundVariants)O(f,a,s.defaultVariants)&&(t+=" "+C);return t},D="pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme0",V="pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme1",x="pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme2",F="pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme3",H="pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme4",M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),A=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmes"]]}),W="pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmet",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go9"}},defaultVariants:{barCompleted:!1,disabled:!1,color:"purple"},compoundVariants:[]}),G=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),U=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),Y=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go15"]]});function w({className:s,title:o,description:t,icon:a,complete:n=!1,disabled:p,barCompleted:_,progressColor:i,...d}){const f=c.useElementId().current||void 0;return e.createElement("li",{id:f,className:c.cl(Y({stepCompleted:n,disabled:p,barCompleted:_,color:i}),s),...d},a&&e.createElement(c.Icon,{icon:a,size:"sm",className:U({stepCompleted:n})}),o&&f&&e.createElement(r.SpsTooltip,{for:f,title:o},t))}c.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:n,percentComplete:p=0,title:_,showStepsCounter:i,progressColor:d="purple",...f}){const{t:C}=j.useWoodlandLanguage(),[v,K]=e.useState([]),[u]=c.selectChildren(o,[{type:w}]);e.useEffect(()=>{let b=[];u.forEach(B=>{B.hasOwnProperty("props")&&B.props.complete===!0&&b.push(B),K(b)})},[]),p&&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 L=e.Children.map(o,b=>e.isValidElement(b)?e.cloneElement(b,{disabled:a,barCompleted:v.length===u.length,progressColor:d}):b);return e.createElement("div",{className:c.cl(D,s),...f},e.createElement("div",{className:V},_&&e.createElement("div",{className:F},e.createElement("div",{className:H},_),u.length>0?e.createElement(e.Fragment,null,i===!0&&e.createElement("div",{className:$({barCompleted:v.length===u.length,disabled:a,color:d})},`${v.length} of ${u.length} Complete`)):e.createElement("div",{className:M({completed:p===1,disabled:a,color:d})},`${Math.floor(p*100)}%`)),u.length>0?e.createElement("ul",{className:c.cl(G({barCompleted:v.length===u.length,disabled:a,color:d}),"d-flex align-items-center list-unstyled mb-0")},L):e.createElement("div",{className:I({disabled:a})},e.createElement("div",{className:A({completed:p===1,disabled:a,color:d}),style:{width:`${p*100}%`}})),t&&e.createElement("div",{className:W},t)),n&&p!==1&&e.createElement("div",{className:x},e.createElement(y.Button,{kind:"icon",icon:"x",onClick:n,title:C("progressBar.closeButtonTitle",{defaultValue:"Close progress bar"})})))}c.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 p=g.Tokens.component["progress-ring"][o]-4,_=p*2*Math.PI,i=_-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:p,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:i},r:p,cx:g.Tokens.component["progress-ring"][o],cy:g.Tokens.component["progress-ring"][o]})))}c.Metadata.set(k,{name:"Progress Ring",props:{size:{type:'"sm" | "md" | "lg"',default:'"sm"'},progress:{type:"number",default:"0"}}});const z={"Progress Bars":{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
2
|
import { ProgressBar } from "@sps-woodland/progress-indicators";
|
|
3
3
|
import { Card } from "@sps-woodland/cards";
|
|
4
4
|
|
|
@@ -229,4 +229,4 @@
|
|
|
229
229
|
</Card>
|
|
230
230
|
)
|
|
231
231
|
}
|
|
232
|
-
`}}}}}};
|
|
232
|
+
`}}}}}};l.MANIFEST=z,l.ProgressBar=P,l.ProgressBarStep=w,l.ProgressRing=k,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_progress-
|
|
1
|
+
.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme0{align-items:center;display:flex}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme1{flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme2{margin-left:.5rem;margin-top:-.375rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme4{color:#1f282c;flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme6{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qme8{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmea{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeb{color:#007db8}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmec{color:#de002e}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmed{color:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmee{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeg{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmej{background-color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmel{background-color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmen{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmen:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeo{background:#007db8}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeo:hover{background:#09638d}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmep{background:#de002e}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmep:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeq{background:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmeq:hover{background:#aa5e14}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmer{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmer:hover{background:#1f282c}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmes{background-color:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go0{font-weight:600}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go1{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go3{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go5{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go6{color:#007db8}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go7{color:#de002e}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go8{color:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go9{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goh{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goj{display:block;margin-bottom:0}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gok{color:#fff}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gol{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_34_1__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_34_1__hash_17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0gom:only-child{border-radius:.5rem}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goy{background:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0goz{background:#0b8940}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go10{background:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go11{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go11:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go12{background:#de002e}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go12:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go13{background:#007db8}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go13:hover{background:#09638d}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go14{background:#e7760b}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go14:hover{background:#aa5e14}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go15{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_34_1__hash_17lj0go15:hover{background:#1f282c}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/progress-indicators",
|
|
3
3
|
"description": "SPS Woodland Design System progress indicator components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.34.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/progress-indicators",
|
|
@@ -29,10 +29,11 @@
|
|
|
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.
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tokens": "8.
|
|
35
|
-
"@spscommerce/
|
|
32
|
+
"@sps-woodland/buttons": "8.34.1",
|
|
33
|
+
"@sps-woodland/core": "8.34.1",
|
|
34
|
+
"@sps-woodland/tokens": "8.34.1",
|
|
35
|
+
"@spscommerce/i18n": "8.34.1",
|
|
36
|
+
"@spscommerce/ds-react": "8.34.1"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
39
|
"@spscommerce/utils": "^7.0.0",
|
|
@@ -40,10 +41,11 @@
|
|
|
40
41
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
41
42
|
"react": "^16.9.0",
|
|
42
43
|
"react-dom": "^16.9.0",
|
|
43
|
-
"@sps-woodland/buttons": "8.
|
|
44
|
-
"@sps-woodland/core": "8.
|
|
45
|
-
"@sps-woodland/tokens": "8.
|
|
46
|
-
"@spscommerce/ds-react": "8.
|
|
44
|
+
"@sps-woodland/buttons": "8.34.1",
|
|
45
|
+
"@sps-woodland/core": "8.34.1",
|
|
46
|
+
"@sps-woodland/tokens": "8.34.1",
|
|
47
|
+
"@spscommerce/ds-react": "8.34.1",
|
|
48
|
+
"@spscommerce/i18n": "8.34.1"
|
|
47
49
|
},
|
|
48
50
|
"scripts": {
|
|
49
51
|
"build": "pnpm run build:js && pnpm run build:types",
|