@spscommerce/ds-react 5.3.0 → 5.4.0

package/lib/index.es.js

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import * as React from "react";
 import React__default, { useRef, useEffect, createContext, useMemo as useMemo$1, useContext, useReducer, useState, useCallback as useCallback$1, useLayoutEffect as useLayoutEffect$1 } from "react";
-import { noI18nI18n, ButtonKind, ButtonType, SpsIcon, SpinnerSize, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, ClickableTagKind, TagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, KeyValueListTitleColor, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, SpsFilterTileKind, RingSize, WizardSubstepConditions } from "@spscommerce/ds-shared";
+import { noI18nI18n, ButtonKind, ButtonType, SpsIcon, SpinnerSize, Position, ZStratum, SpsOptionListOption, DropdownKind, SPS_ACTION_DEFAULTS, ClickableTagKind, TagKind, SpsIconSize, SelectMode, TooltipKind, TooltipShowTrigger, TOOLTIP_HIDE_DELAY_MS_DEFAULT, FeedbackBlockKind, FeedbackBlockIcons, GrowlerKind, GrowlerIcon, GROWLER_VISIBLE_DURATION_MS, GROWLER_FADEOUT_DURATION_MS, SpsInsightTileKind, SpsInsightTileIcons, KeyValueListTitleColor, SortDirection, ModalKind, ModalSize, DEFAULT_PAGE_SIZE_OPTIONS, SteppedProgressBarColor, StdButtonKind, SpsTaskStatus, TASK_QUEUE_NOTIFICATION_DURATION_MS, SpsTaskStatusIcons, SpsFilterTileKind, RingSize, WizardSubstepConditions } from "@spscommerce/ds-shared";
 import { values as values$3, code, debounce, flatten, deepFreeze, setPath, diff, DiffChange, getPath, crumblePath, traversePath, forEachNestedObject, lockToAnimationFrames, constrain } from "@spscommerce/utils";
 import * as ReactDOM from "react-dom";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
@@ -30424,6 +30424,37 @@ const SpsSteppedProgressBarExamples = {
                     }
                 `
       },
+      color: {
+        description: () => /* @__PURE__ */ React.createElement("h4", null, "Alternate Color"),
+        react: code`
+                    function Component() {
+                        const iconsData = [
+                            {index: 4, icon: SpsIcon.CALENDAR},
+                            {index: 8, icon: SpsIcon.CALENDAR},
+                        ];
+                        const tooltipsData = [
+                            {index: 0, title: 'Title 1', description: 'Description'},
+                            {index: 4, title: 'Title 5', description: 'Description'},
+                            {index: 8, title: 'Title 9', description: 'Description'},
+                            {index: 11, title: 'Title 12', description: 'Description'},
+                        ]
+
+                        return (
+                            <SpsCard>
+                                <SpsSteppedProgressBar
+                                    title="Process Name"
+                                    showStepsCounter={true}
+                                    stepsCount={12}
+                                    completedStepsCount={4}
+                                    icons={iconsData}
+                                    tooltipsData={tooltipsData}
+                                    color={SteppedProgressBarColor.GRAY}
+                                />
+                            </SpsCard>
+                        )
+                    }
+                `
+      },
       completed: {
         description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Completed State"), /* @__PURE__ */ React.createElement("p", null, "Once complete, the progress bar appears in green.")),
         react: code`
@@ -31013,7 +31044,8 @@ const propsDoc$G = {
   disabled: "boolean",
   showStepsCounter: "boolean",
   icons: "IconsProps[]",
-  tooltipsData: "TooltipsProps[]"
+  tooltipsData: "TooltipsProps[]",
+  color: "SteppedProgressBarColor"
 };
 const propTypes$J = {
   title: propTypes$1M.exports.string,
@@ -31022,7 +31054,8 @@ const propTypes$J = {
   disabled: propTypes$1M.exports.bool,
   showStepsCounter: propTypes$1M.exports.bool,
   icons: propTypes$1M.exports.arrayOf(impl()),
-  tooltipsData: propTypes$1M.exports.arrayOf(impl())
+  tooltipsData: propTypes$1M.exports.arrayOf(impl()),
+  color: enumValue(SteppedProgressBarColor)
 };
 function SpsSteppedProgressBar(props2) {
   const {
@@ -31033,7 +31066,8 @@ function SpsSteppedProgressBar(props2) {
     showStepsCounter,
     icons,
     tooltipsData,
-    className
+    className,
+    color = SteppedProgressBarColor.PURPLE
   } = props2;
   function findIcon(idx) {
     return icons && icons.find((i2) => i2.index === idx);
@@ -31042,7 +31076,7 @@ function SpsSteppedProgressBar(props2) {
     return tooltipsData && tooltipsData.find((i2) => i2.index === idx);
   }
   const data = Array.from(Array(stepsCount)).map(() => useElementId(null).current);
-  const classes = clsx("sps-stepped-progress-bar", completedStepsCount === stepsCount && "sps-stepped-progress-bar--complete", disabled && "sps-stepped-progress-bar--disabled", className);
+  const classes = clsx("sps-stepped-progress-bar", `sps-stepped-progress-bar--${color}`, completedStepsCount === stepsCount && "sps-stepped-progress-bar--complete", disabled && "sps-stepped-progress-bar--disabled", className);
   return /* @__PURE__ */ React.createElement("div", {
     className: classes
   }, /* @__PURE__ */ React.createElement("div", {

package/lib/stepped-progress-bar/SpsSteppedProgressBar.d.ts

@@ -1,4 +1,5 @@
-import type { SpsIcon } from "@spscommerce/ds-shared";
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { SteppedProgressBarColor } from "@spscommerce/ds-shared";
 import * as PropTypes from "../prop-types";
 declare const propTypes: {
     title: PropTypes.Requireable<string>;
@@ -8,6 +9,7 @@ declare const propTypes: {
     showStepsCounter: PropTypes.Requireable<boolean>;
     icons: PropTypes.Requireable<IconsProps[]>;
     tooltipsData: PropTypes.Requireable<TooltipsProps[]>;
+    color: PropTypes.Requireable<SteppedProgressBarColor>;
 };
 export interface IconsProps {
     index: number;

package/lib/stepped-progress-bar/{SpsStepepdProgressBar.examples.d.ts → SpsSteppedProgressBar.examples.d.ts}

@@ -7,6 +7,10 @@ export declare const SpsSteppedProgressBarExamples: {
                 description: () => JSX.Element;
                 react: string;
             };
+            color: {
+                description: () => JSX.Element;
+                react: string;
+            };
             completed: {
                 description: () => JSX.Element;
                 react: string;

package/lib/stepped-progress-bar/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./SpsSteppedProgressBar";
-export * from "./SpsStepepdProgressBar.examples";
+export * from "./SpsSteppedProgressBar.examples";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.3.0",
-    "@spscommerce/ds-shared": "5.3.0",
-    "@spscommerce/positioning": "5.3.0",
-    "@spscommerce/utils": "5.3.0",
+    "@spscommerce/ds-colors": "5.4.0",
+    "@spscommerce/ds-shared": "5.4.0",
+    "@spscommerce/positioning": "5.4.0",
+    "@spscommerce/utils": "5.4.0",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.3.0",
-    "@spscommerce/ds-shared": "5.3.0",
-    "@spscommerce/positioning": "5.3.0",
-    "@spscommerce/utils": "5.3.0",
+    "@spscommerce/ds-colors": "5.4.0",
+    "@spscommerce/ds-shared": "5.4.0",
+    "@spscommerce/positioning": "5.4.0",
+    "@spscommerce/utils": "5.4.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",