@sps-woodland/progress-indicators 8.23.17 → 8.24.0
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 +27 -27
- package/lib/index.umd.cjs +2 -2
- package/lib/style.css +1 -1
- package/package.json +9 -9
package/lib/index.js
CHANGED
|
@@ -16,8 +16,8 @@ function N(s, o) {
|
|
|
16
16
|
var a = Object.keys(s);
|
|
17
17
|
if (Object.getOwnPropertySymbols) {
|
|
18
18
|
var t = Object.getOwnPropertySymbols(s);
|
|
19
|
-
o && (t = t.filter(function(
|
|
20
|
-
return Object.getOwnPropertyDescriptor(s,
|
|
19
|
+
o && (t = t.filter(function(n) {
|
|
20
|
+
return Object.getOwnPropertyDescriptor(s, n).enumerable;
|
|
21
21
|
})), a.push.apply(a, t);
|
|
22
22
|
}
|
|
23
23
|
return a;
|
|
@@ -35,21 +35,21 @@ function j(s) {
|
|
|
35
35
|
}
|
|
36
36
|
var M = (s, o, a) => {
|
|
37
37
|
for (var t of Object.keys(s)) {
|
|
38
|
-
var
|
|
39
|
-
if (s[t] !== ((
|
|
38
|
+
var n;
|
|
39
|
+
if (s[t] !== ((n = o[t]) !== null && n !== void 0 ? n : a[t]))
|
|
40
40
|
return !1;
|
|
41
41
|
}
|
|
42
42
|
return !0;
|
|
43
43
|
}, f = (s) => (o) => {
|
|
44
44
|
var a = s.defaultClassName, t = j(j({}, s.defaultVariants), o);
|
|
45
|
-
for (var
|
|
46
|
-
var
|
|
45
|
+
for (var n in t) {
|
|
46
|
+
var l, p = (l = t[n]) !== null && l !== void 0 ? l : s.defaultVariants[n];
|
|
47
47
|
if (p != null) {
|
|
48
48
|
var _ = p;
|
|
49
49
|
typeof _ == "boolean" && (_ = _ === !0 ? "true" : "false");
|
|
50
50
|
var i = (
|
|
51
51
|
// @ts-expect-error
|
|
52
|
-
s.variantClassNames[
|
|
52
|
+
s.variantClassNames[n][_]
|
|
53
53
|
);
|
|
54
54
|
i && (a += " " + i);
|
|
55
55
|
}
|
|
@@ -57,14 +57,14 @@ 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_24_0__hash_1890qme0", $ = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmef", variantClassNames: { disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeg", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeh" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), G = "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme2", U = "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme1", W = "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmet", Y = "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme3", K = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme5", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme6", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme7" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme8", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme9" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmea", blue: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeb", red: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmec", orange: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmed", grey: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmee" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [] }), z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmei", variantClassNames: { completed: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmej", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmek" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmel", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmem" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmen", blue: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeo", red: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmep", orange: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeq", grey: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmer" } }, defaultVariants: { completed: !1, disabled: !1, color: "purple" }, compoundVariants: [[{ completed: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmes"]] }), J = "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme4", L = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goj", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gok", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gol" } }, defaultVariants: { stepCompleted: !1 }, compoundVariants: [] }), Q = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gom", variantClassNames: { stepCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gon", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goo" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gop", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goq" }, barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gor", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gos" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0got", red: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gou", blue: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gov", orange: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gow", grey: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gox" } }, defaultVariants: { stepCompleted: !1, disabled: !1, barCompleted: !1, color: "purple" }, compoundVariants: [[{ barCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goy"], [{ barCompleted: !0, disabled: !1 }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goz"], [{ stepCompleted: !0, disabled: !0 }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go10"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "purple" }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go11"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "red" }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go12"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "blue" }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go13"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "orange" }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go14"], [{ barCompleted: !1, disabled: !1, stepCompleted: !0, color: "grey" }, "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go15"]] }), X = f({ defaultClassName: "", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goa", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gob" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goc", blue: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0god", red: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goe", orange: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gof", grey: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gog" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goh", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goi" } }, defaultVariants: { barCompleted: !1, color: "purple", disabled: !1 }, compoundVariants: [] }), Z = f({ defaultClassName: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go0", variantClassNames: { barCompleted: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go1", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go2" }, disabled: { true: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go3", false: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go4" }, color: { purple: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go5", blue: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go6", red: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go7", orange: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go8", grey: "pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go9" } }, defaultVariants: { barCompleted: !1, disabled: !1, color: "purple" }, compoundVariants: [] });
|
|
61
61
|
function S({
|
|
62
62
|
className: s,
|
|
63
63
|
title: o,
|
|
64
64
|
description: a,
|
|
65
65
|
icon: t,
|
|
66
|
-
complete:
|
|
67
|
-
disabled:
|
|
66
|
+
complete: n = !1,
|
|
67
|
+
disabled: l,
|
|
68
68
|
barCompleted: p,
|
|
69
69
|
progressColor: _,
|
|
70
70
|
...i
|
|
@@ -76,8 +76,8 @@ function S({
|
|
|
76
76
|
id: h,
|
|
77
77
|
className: E(
|
|
78
78
|
Q({
|
|
79
|
-
stepCompleted:
|
|
80
|
-
disabled:
|
|
79
|
+
stepCompleted: n,
|
|
80
|
+
disabled: l,
|
|
81
81
|
barCompleted: p,
|
|
82
82
|
color: _
|
|
83
83
|
}),
|
|
@@ -91,7 +91,7 @@ function S({
|
|
|
91
91
|
icon: t,
|
|
92
92
|
size: "sm",
|
|
93
93
|
className: L({
|
|
94
|
-
stepCompleted:
|
|
94
|
+
stepCompleted: n
|
|
95
95
|
})
|
|
96
96
|
}
|
|
97
97
|
),
|
|
@@ -112,8 +112,8 @@ function T({
|
|
|
112
112
|
children: o,
|
|
113
113
|
detail: a,
|
|
114
114
|
disabled: t,
|
|
115
|
-
onClose:
|
|
116
|
-
percentComplete:
|
|
115
|
+
onClose: n,
|
|
116
|
+
percentComplete: l = 0,
|
|
117
117
|
title: p,
|
|
118
118
|
showStepsCounter: _,
|
|
119
119
|
progressColor: i = "purple",
|
|
@@ -127,7 +127,7 @@ function T({
|
|
|
127
127
|
g.forEach((B) => {
|
|
128
128
|
B.hasOwnProperty("props") && B.props.complete === !0 && v.push(B), q(v);
|
|
129
129
|
});
|
|
130
|
-
}, []),
|
|
130
|
+
}, []), l && g && console.warn(
|
|
131
131
|
[
|
|
132
132
|
"The percentComplete prop can't be used with the ProgressBarStep subcomponent.",
|
|
133
133
|
"The progress will be determined by how many nested ProgressBarStep components have the completed prop."
|
|
@@ -152,12 +152,12 @@ function T({
|
|
|
152
152
|
"div",
|
|
153
153
|
{
|
|
154
154
|
className: K({
|
|
155
|
-
completed:
|
|
155
|
+
completed: l === 1,
|
|
156
156
|
disabled: t,
|
|
157
157
|
color: i
|
|
158
158
|
})
|
|
159
159
|
},
|
|
160
|
-
`${Math.floor(
|
|
160
|
+
`${Math.floor(l * 100)}%`
|
|
161
161
|
)), g.length > 0 ? /* @__PURE__ */ e.createElement(
|
|
162
162
|
"ul",
|
|
163
163
|
{
|
|
@@ -182,19 +182,19 @@ function T({
|
|
|
182
182
|
"div",
|
|
183
183
|
{
|
|
184
184
|
className: z({
|
|
185
|
-
completed:
|
|
185
|
+
completed: l === 1,
|
|
186
186
|
disabled: t,
|
|
187
187
|
color: i
|
|
188
188
|
}),
|
|
189
|
-
style: { width: `${
|
|
189
|
+
style: { width: `${l * 100}%` }
|
|
190
190
|
}
|
|
191
191
|
)
|
|
192
|
-
), a && /* @__PURE__ */ e.createElement("div", { className: W }, a)),
|
|
192
|
+
), a && /* @__PURE__ */ e.createElement("div", { className: W }, a)), n && l !== 1 && /* @__PURE__ */ e.createElement("div", { className: G }, /* @__PURE__ */ e.createElement(
|
|
193
193
|
R,
|
|
194
194
|
{
|
|
195
195
|
kind: "icon",
|
|
196
196
|
icon: "x",
|
|
197
|
-
onClick:
|
|
197
|
+
onClick: n,
|
|
198
198
|
title: P("design-system:progressBar.closeButtonTitle")
|
|
199
199
|
}
|
|
200
200
|
)));
|
|
@@ -215,7 +215,7 @@ function ee({
|
|
|
215
215
|
progress: a = 0,
|
|
216
216
|
...t
|
|
217
217
|
}) {
|
|
218
|
-
const
|
|
218
|
+
const l = c.component["progress-ring"][o] - 4, p = l * 2 * Math.PI, _ = p - a / 100 * p;
|
|
219
219
|
return /* @__PURE__ */ e.createElement("div", { className: s, ...t }, /* @__PURE__ */ e.createElement(
|
|
220
220
|
"svg",
|
|
221
221
|
{
|
|
@@ -230,7 +230,7 @@ function ee({
|
|
|
230
230
|
fill: "transparent",
|
|
231
231
|
strokeWidth: 4,
|
|
232
232
|
strokeDasharray: `${p} ${p}`,
|
|
233
|
-
r:
|
|
233
|
+
r: l,
|
|
234
234
|
cx: c.component["progress-ring"][o],
|
|
235
235
|
cy: c.component["progress-ring"][o]
|
|
236
236
|
}
|
|
@@ -243,7 +243,7 @@ function ee({
|
|
|
243
243
|
strokeWidth: 4,
|
|
244
244
|
strokeDasharray: `${p} ${p}`,
|
|
245
245
|
style: { strokeDashoffset: _ },
|
|
246
|
-
r:
|
|
246
|
+
r: l,
|
|
247
247
|
cx: c.component["progress-ring"][o],
|
|
248
248
|
cy: c.component["progress-ring"][o]
|
|
249
249
|
}
|
|
@@ -555,11 +555,11 @@ const re = {
|
|
|
555
555
|
}
|
|
556
556
|
}
|
|
557
557
|
}
|
|
558
|
-
},
|
|
558
|
+
}, le = {
|
|
559
559
|
"Progress Bars": re
|
|
560
560
|
};
|
|
561
561
|
export {
|
|
562
|
-
|
|
562
|
+
le as MANIFEST,
|
|
563
563
|
T as ProgressBar,
|
|
564
564
|
S as ProgressBarStep,
|
|
565
565
|
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,C]of s.compoundVariants)q(f,a,s.defaultVariants)&&(t+=" "+C);return t},O="pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme0",D=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),V="pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme2",x="pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme1",F="pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmet",H="pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme3",I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qmes"]]}),A="pkg_sps-woodland_progress-indicators__version_8_23_17__hash_1890qme4",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go15"]]}),U=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),W=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_23_17__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_23_17__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 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`
|
|
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,v]of s.compoundVariants)q(f,a,s.defaultVariants)&&(t+=" "+v);return t},O="pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme0",D=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmef",variantClassNames:{disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeg",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeh"}},defaultVariants:{disabled:!1},compoundVariants:[]}),V="pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme2",x="pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme1",F="pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmet",H="pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme3",I=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme5",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme6",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme7"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme8",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme9"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmea",blue:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeb",red:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmec",orange:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmed",grey:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmee"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[]}),M=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmei",variantClassNames:{completed:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmej",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmek"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmel",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmem"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmen",blue:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeo",red:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmep",orange:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeq",grey:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmer"}},defaultVariants:{completed:!1,disabled:!1,color:"purple"},compoundVariants:[[{completed:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmes"]]}),A="pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme4",$=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goj",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gok",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gol"}},defaultVariants:{stepCompleted:!1},compoundVariants:[]}),G=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gom",variantClassNames:{stepCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gon",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goo"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gop",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goq"},barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gor",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gos"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0got",red:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gou",blue:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gov",orange:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gow",grey:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gox"}},defaultVariants:{stepCompleted:!1,disabled:!1,barCompleted:!1,color:"purple"},compoundVariants:[[{barCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goy"],[{barCompleted:!0,disabled:!1},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goz"],[{stepCompleted:!0,disabled:!0},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go10"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"purple"},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go11"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"red"},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go12"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"blue"},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go13"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"orange"},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go14"],[{barCompleted:!1,disabled:!1,stepCompleted:!0,color:"grey"},"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go15"]]}),U=h({defaultClassName:"",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goa",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gob"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goc",blue:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0god",red:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goe",orange:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gof",grey:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gog"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goh",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goi"}},defaultVariants:{barCompleted:!1,color:"purple",disabled:!1},compoundVariants:[]}),W=h({defaultClassName:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go0",variantClassNames:{barCompleted:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go1",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go2"},disabled:{true:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go3",false:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go4"},color:{purple:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go5",blue:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go6",red:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go7",orange:"pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go8",grey:"pkg_sps-woodland_progress-indicators__version_8_24_0__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 C({className:s,children:o,detail:t,disabled:a,onClose:l,percentComplete:n=0,title:_,showStepsCounter:d,progressColor:c="purple",...f}){const{t:v}=e.useContext(i.I18nContext),[P,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:P.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:P.length===u.length,disabled:a,color:c})},`${P.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:P.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:v("design-system:progressBar.closeButtonTitle")})))}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`
|
|
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
|
-
`}}}}}};p.MANIFEST=Y,p.ProgressBar=
|
|
232
|
+
`}}}}}};p.MANIFEST=Y,p.ProgressBar=C,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_24_0__hash_1890qme0{align-items:center;display:flex}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme1{flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme2{margin-left:.5rem;margin-top:-.375rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme3{display:flex;font-size:.875rem;line-height:1.25rem;margin-bottom:.5rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme4{color:#1f282c;flex-grow:1}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme5{color:#91467f;font-weight:600;font-size:.875rem;line-height:1.25rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme6{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qme8{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmea{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeb{color:#027db8}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmec{color:#de012e}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmed{color:#e77609}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmee{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmef{background:#e9e9ea;border-radius:.5rem;height:1rem;width:100%;overflow:hidden}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeg{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmei{background-color:#91467f;border-radius:.5rem;height:1rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmej{background-color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmel{background-color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmen{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmen:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeo{background:#027db8}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeo:hover{background:#08638d}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmep{background:#de012e}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmep:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeq{background:#e77609}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmeq:hover{background:#aa5e13}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmer{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmer:hover{background:#1f282c}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmes{background-color:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_1890qmet{color:#4b5356;font-size:.75rem;line-height:1.125rem;margin-top:1rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go0{font-weight:600}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go1{color:#0b8940!important}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go3{color:#d2d4d4!important}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go5{color:#91467f}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go6{color:#027db8}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go7{color:#de012e}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go8{color:#e77609}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go9{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goh{cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goj{display:block}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gok{color:#fff}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gol{color:#717779}.pkg_sps-woodland_progress-indicators__version_8_24_0__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_24_0__hash_17lj0gom:last-child{border-radius:.125rem .5rem .5rem .125rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gom:first-child{border-radius:.5rem .125rem .125rem .5rem;margin-left:0}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0gom:only-child{border-radius:.5rem}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goy{background:#d2d4d4}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0goz{background:#0b8940}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go10{background:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go11{background:#91467f}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go11:hover{background:#6e3c65}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go12{background:#de012e}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go12:hover{background:#a30d2d}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go13{background:#027db8}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go13:hover{background:#08638d}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go14{background:#e77609}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go14:hover{background:#aa5e13}.pkg_sps-woodland_progress-indicators__version_8_24_0__hash_17lj0go15{background:#717779}.pkg_sps-woodland_progress-indicators__version_8_24_0__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.24.0",
|
|
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,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.
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tokens": "8.
|
|
35
|
-
"@spscommerce/ds-react": "8.
|
|
32
|
+
"@sps-woodland/buttons": "8.24.0",
|
|
33
|
+
"@sps-woodland/core": "8.24.0",
|
|
34
|
+
"@sps-woodland/tokens": "8.24.0",
|
|
35
|
+
"@spscommerce/ds-react": "8.24.0"
|
|
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.
|
|
44
|
-
"@sps-woodland/core": "8.
|
|
45
|
-
"@sps-woodland/tokens": "8.
|
|
46
|
-
"@spscommerce/ds-react": "8.
|
|
43
|
+
"@sps-woodland/buttons": "8.24.0",
|
|
44
|
+
"@sps-woodland/core": "8.24.0",
|
|
45
|
+
"@sps-woodland/tokens": "8.24.0",
|
|
46
|
+
"@spscommerce/ds-react": "8.24.0"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "pnpm run build:js && pnpm run build:types",
|