@spscommerce/ds-react 6.30.1 → 6.31.0

package/lib/index.es.js

@@ -25027,7 +25027,8 @@ const propsDoc$$ = {
   help: "ReactNodeOrRenderFn",
   helpIcon: "SpsIcon",
   helpIconColor: "string",
-  errors: "ReactNodeOrRenderFn"
+  errors: "ReactNodeOrRenderFn",
+  interactiveIcons: "Array<{icon: SpsIcon, iconColor: string, onClick: () => void}>"
 };
 const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   description: propTypes$1I.exports.string,
@@ -25039,7 +25040,8 @@ const propTypes$10 = __spreadProps(__spreadValues({}, spsGlobalPropTypes), {
   help: nodeOrRenderFn,
   helpIcon: enumValue(SpsIcon),
   helpIconColor: propTypes$1I.exports.string,
-  errors: nodeOrRenderFn
+  errors: nodeOrRenderFn,
+  interactiveIcons: propTypes$1I.exports.arrayOf(impl())
 });
 function SpsLabel(_y) {
   var _z = _y, {
@@ -25052,6 +25054,7 @@ function SpsLabel(_y) {
     helpIcon = SpsIcon.QUESTION_CIRCLE,
     helpIconColor = "blue200",
     errors,
+    interactiveIcons,
     unsafelyReplaceClassName,
     "data-testid": testId
   } = _z, rest = __objRest(_z, [
@@ -25064,6 +25067,7 @@ function SpsLabel(_y) {
     "helpIcon",
     "helpIconColor",
     "errors",
+    "interactiveIcons",
     "unsafelyReplaceClassName",
     "data-testid"
   ]);
@@ -25194,7 +25198,12 @@ function SpsLabel(_y) {
     className: clsx("sps-icon", `sps-icon-${helpIcon}`, helpIconColor, !help && "d-none"),
     onClick: handleHelpClick,
     onMouseLeave: delayedHideTooltips
-  })), /* @__PURE__ */ React.createElement(SpsTooltip, {
+  }), interactiveIcons && interactiveIcons.map((icon, idx) => /* @__PURE__ */ React.createElement("i", {
+    key: idx,
+    "data-testid": `${testId}__interactive-icon-${idx}`,
+    className: clsx("sps-icon", `sps-icon-${icon.icon}`, icon.iconColor, "interactive-icon"),
+    onClick: () => icon.onClick()
+  }))), /* @__PURE__ */ React.createElement(SpsTooltip, {
     kind: TooltipKind.DEFAULT,
     for: helpIconRef,
     showOn: TooltipShowTrigger.MANUAL,
@@ -25313,39 +25322,6 @@ const SpsLabelExamples = {
                     }
                 `
       },
-      settingsIcon: {
-        description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Settings Icons"), /* @__PURE__ */ React.createElement("p", null, "The gear icon can be used to launch a ", /* @__PURE__ */ React.createElement(NavigateTo, {
-          to: "modal"
-        }, "Modal"), " window or ", /* @__PURE__ */ React.createElement(NavigateTo, {
-          to: "focused-task"
-        }, "Focused Task View"), " containing settings or preferences related to a specific input field.")),
-        react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            companyName: ""
-                        });
-
-                        function iconClickHandler(event) {
-                            // screen out non-icon clicks
-                            if (event.target.tagName !== "I") return;
-                            alert("settings action triggered");
-                        }
-
-                        return <>
-                            <SpsLabel for={formMeta.fields.companyName}
-                                help="Pretend there's something helpful written here."
-                                helpIcon={SpsIcon.GEAR}
-                                onClick={iconClickHandler}
-                            >
-                                Company Name
-                            </SpsLabel>
-                            <SpsTextInput formMeta={formMeta.fields.companyName}
-                                value={formValue.companyName}
-                            ></SpsTextInput>
-                        </>;
-                    }
-                `
-      },
       customIcons: {
         description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Custom Icons"), /* @__PURE__ */ React.createElement("p", null, "The icon can be customized, but only in the case when the Info Icon does not properly represent the tooltip message.")),
         react: code`
@@ -25370,6 +25346,49 @@ const SpsLabelExamples = {
       }
     }
   },
+  interactiveIcons: {
+    label: "Interactive Icons",
+    description: ({ NavigateTo }) => /* @__PURE__ */ React.createElement("p", null, "The Interactive Icons can be used to launch a ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "modal"
+    }, "Modal"), " ", "window or ", /* @__PURE__ */ React.createElement(NavigateTo, {
+      to: "focused-task"
+    }, "Focused Task View"), " containing settings or preferences related to a specific input field."),
+    examples: {
+      basic: {
+        react: code`
+                    function DemoComponent() {
+                      const { formValue, formMeta, updateForm } = useSpsForm({
+                          companyName: ""
+                      });
+
+                      const [showModal, setShowModal] = React.useState(false);
+                      const [showFocusedTask, setShowFocusedTask] = React.useState(false);
+
+                      return <>
+                          <SpsLabel for={formMeta.fields.companyName}
+                            interactiveIcons={[
+                              {icon: SpsIcon.GEAR, onClick: () => setShowModal(true)}, 
+                              {icon: SpsIcon.WRENCH, onClick: () => setShowFocusedTask(true), iconColor: "blue200"}
+                            ]}
+                          >
+                              Company Name
+                          </SpsLabel>
+                          <SpsTextInput formMeta={formMeta.fields.companyName}
+                              value={formValue.companyName}
+                          ></SpsTextInput>
+                          {showModal && (
+                            <SpsModal onClose={() => setShowModal(false)}>
+                            </SpsModal>
+                          )}
+                          <SpsFocusedTask isOpen={showFocusedTask} onClose={() => setShowFocusedTask(false)}>
+                            <h2>Focused Task</h2>
+                          </SpsFocusedTask>
+                      </>;
+                  }
+                `
+      }
+    }
+  },
   validation: {
     label: "Validation",
     description: () => /* @__PURE__ */ React.createElement("p", null, "When an input field fails validation for any reason, an Error State style is applied, which includes an Error Icon tot he left of the label that reveals instructions for correcting the error."),

package/lib/label/SpsLabel.d.ts

@@ -2,6 +2,11 @@ import { SpsIcon } from "@spscommerce/ds-shared";
 import * as PropTypes from "../prop-types";
 import type { SpsFormControl } from "../form/hooks/formControl";
 import { SpsFormMetaBase } from "../form/hooks/useSpsForm";
+interface InteractiveIcon {
+    icon: SpsIcon;
+    iconColor: string;
+    onClick: () => void;
+}
 declare const propTypes: {
     description: PropTypes.Requireable<string>;
     for: PropTypes.Validator<SpsFormMetaBase<any> | SpsFormControl<any>>;
@@ -10,11 +15,12 @@ declare const propTypes: {
     helpIcon: PropTypes.Requireable<SpsIcon>;
     helpIconColor: PropTypes.Requireable<string>;
     errors: PropTypes.Requireable<PropTypes.ReactNodeOrRenderFn>;
+    interactiveIcons: PropTypes.Requireable<InteractiveIcon[]>;
     children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     className: PropTypes.Requireable<string>;
     "data-testid": PropTypes.Requireable<string>;
     unsafelyReplaceClassName: PropTypes.Requireable<string>;
 };
 export declare type SpsLabelProps = PropTypes.InferTS<typeof propTypes, HTMLLabelElement>;
-export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, unsafelyReplaceClassName, "data-testid": testId, ...rest }: SpsLabelProps): JSX.Element;
+export declare function SpsLabel({ children, className, description, for: forProp, stronglySuggested, help, helpIcon, helpIconColor, errors, interactiveIcons, unsafelyReplaceClassName, "data-testid": testId, ...rest }: SpsLabelProps): JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.30.1",
+  "version": "6.31.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": "6.30.1",
-    "@spscommerce/ds-illustrations": "6.30.1",
-    "@spscommerce/ds-shared": "6.30.1",
-    "@spscommerce/positioning": "6.30.1",
+    "@spscommerce/ds-colors": "6.31.0",
+    "@spscommerce/ds-illustrations": "6.31.0",
+    "@spscommerce/ds-shared": "6.31.0",
+    "@spscommerce/positioning": "6.31.0",
     "@spscommerce/utils": "^6.11.3",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "6.30.1",
-    "@spscommerce/ds-illustrations": "6.30.1",
-    "@spscommerce/ds-shared": "6.30.1",
-    "@spscommerce/positioning": "6.30.1",
+    "@spscommerce/ds-colors": "6.31.0",
+    "@spscommerce/ds-illustrations": "6.31.0",
+    "@spscommerce/ds-shared": "6.31.0",
+    "@spscommerce/positioning": "6.31.0",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^10.4.0",
     "@types/prop-types": "^15.7.1",