@spscommerce/ds-react 6.4.1 → 6.5.0

package/lib/index.es.js

@@ -25442,8 +25442,12 @@ Object.assign(SpsLabel, {
   displayName: "SpsLabel"
 });
 const SpsLabelExamples = {
+  general: {
+    label: "General Usage",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "In almost all cases, input fields should be paired with a label describing the value to be entered into the field. Certain labels can be accompanied by icons to provide additional information or context about that particular field.")
+  },
   basic: {
-    label: "Basic",
+    label: "Basic Label",
     examples: {
       basic: {
         react: code`
@@ -25465,31 +25469,9 @@ const SpsLabelExamples = {
       }
     }
   },
-  b_suggested: {
-    label: "Strongly Suggested",
-    examples: {
-      basic: {
-        react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            companyName: ""
-                        });
-
-                        return <>
-                            <SpsLabel for={formMeta.fields.companyName} stronglySuggested>
-                                Company Name
-                            </SpsLabel>
-                            <SpsTextInput value={formValue.companyName}
-                                formMeta={formMeta.fields.companyName}
-                            ></SpsTextInput>
-                        </>;
-                    }
-                `
-      }
-    }
-  },
-  c_required: {
-    label: "Required",
+  required: {
+    label: "Required Labels",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Many forms contain input fields that require values in order for the form to be submitted. Such fields have an accompanying red asterisk to the left of the Label."),
     examples: {
       basic: {
         react: code`
@@ -25516,11 +25498,12 @@ const SpsLabelExamples = {
       }
     }
   },
-  d_help: {
-    label: "Help Information",
+  icons: {
+    label: "Labels with Icons",
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Icons can be used with labels to reveal tooltips with additional contextual information or help text. Icons remain visible at all times, even when an input field is in an error state. For more information about error states view the Validation section of this page."),
     examples: {
-      a_defaultIcon: {
-        description: "<p>Default icon</p>",
+      infoIcon: {
+        description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", null, "Info Icons"), /* @__PURE__ */ React.createElement("p", null, "Info Icons reveal a tooltip providing more information, such as instructions on correct formatting required for the input field.")),
         react: code`
                     function DemoComponent() {
                         const { formValue, formMeta, updateForm } = useSpsForm({
@@ -25529,7 +25512,8 @@ const SpsLabelExamples = {
 
                         return <>
                             <SpsLabel for={formMeta.fields.companyName}
-                                help="Pretend there's something helpful written here."
+                                helpIcon={SpsIcon.INFO}
+                                help="This is an informative and instructive tooltip."
                             >
                                 Company Name
                             </SpsLabel>
@@ -25540,18 +25524,29 @@ const SpsLabelExamples = {
                     }
                 `
       },
-      b_customIcon: {
-        description: "<p>Custom icon</p>",
+      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.EXCHANGE} helpIconColor="red200"
+                                helpIcon={SpsIcon.GEAR}
+                                onClick={iconClickHandler}
                             >
                                 Company Name
                             </SpsLabel>
@@ -25561,11 +25556,34 @@ const SpsLabelExamples = {
                         </>;
                     }
                 `
+      },
+      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`
+        function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+                companyName: ""
+            });
+        
+            return <>
+                <SpsLabel for={formMeta.fields.companyName}
+                    helpIcon={SpsIcon.BELL}
+                    help="This is a custom icon"
+                >
+                    Company Name
+                </SpsLabel>
+                <SpsTextInput formMeta={formMeta.fields.companyName}
+                    value={formValue.companyName}
+                ></SpsTextInput>
+                </>
+        }
+        `
       }
     }
   },
-  e_validation: {
+  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."),
     examples: {
       basic: {
         react: code`
@@ -25596,64 +25614,6 @@ const SpsLabelExamples = {
                 `
       }
     }
-  },
-  f_combinations: {
-    label: "Combinations",
-    examples: {
-      a_combo1: {
-        react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            companyName: "Target"
-                        }, {
-                            "companyName": [SpsValidators.minLength(7)]
-                        });
-
-                        React.useEffect(() => {
-                            // Make validation error visible for the purpose of this demo
-                            formMeta.markAsDirty();
-                        }, []);
-
-                        return <>
-                            <SpsLabel for={formMeta.fields.companyName}
-                                stronglySuggested
-                                errors={() => formMeta.fields.companyName.hasError("minLength")
-                                    && "Company Name must be at least 7 characters."}
-                            >
-                                Company Name
-                            </SpsLabel>
-                            <SpsTextInput formMeta={formMeta.fields.companyName}
-                                value={formValue.companyName}
-                            ></SpsTextInput>
-                        </>;
-                    }
-                `
-      },
-      b_combo2: {
-        react: code`
-                    function DemoComponent() {
-                        const { formValue, formMeta, updateForm } = useSpsForm({
-                            companyName: ""
-                        }, {
-                            "companyName": [SpsValidators.required]
-                        });
-
-                        return <>
-                            <SpsLabel for={formMeta.fields.companyName}
-                                help="Pretend there's something helpful written here."
-                                errors={() => formMeta.fields.companyName.hasError("required")
-                                    && "Please enter a company name."}
-                            >
-                                Company Name
-                            </SpsLabel>
-                            <SpsTextInput formMeta={formMeta.fields.companyName}
-                                value={formValue.companyName}
-                            ></SpsTextInput>
-                        </>;
-                    }
-                `
-      }
-    }
   }
 };
 const propsDoc$Y = {
@@ -37667,6 +37627,7 @@ const MANIFEST = {
     examples: SpsKeyValueListExamples
   },
   Label: {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Labels provide a description for the value to be entered or selected in an accompanying input field."),
     components: [SpsLabel],
     examples: SpsLabelExamples
   },

package/package.json

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