@spscommerce/ds-react 6.17.0 → 6.17.1

package/lib/index.es.js

@@ -24713,41 +24713,186 @@ Object.assign(SpsKeyValueListItem, {
   displayName: "SpsKeyValueListItem"
 });
 const SpsKeyValueListExamples = {
-  stacked: {
-    label: "Stacked",
+  vertical: {
+    label: "Vertical Key Value Sets",
+    description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Vertical containers such as a side bar or general card")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "In Table cells or Description Lists")), /* @__PURE__ */ React__default.createElement("h5", null, "Usage Rules"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles must be written in Title Case"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Values can be written in Sentence Case or Title Case as best suits the content"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles or Values can include hyperlinks and/or icons", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Icons should always appear on the left before any text content"))), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Values can include tags"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Can include multiple values on additional lines"))),
     examples: {
-      stacked: {
-        jsx: code`
-                    <SpsKeyValueList>
-                        <SpsKeyValueListItem itemKey="Buying From">
-                            75 Companies
-                            <span className="font-weight-light d-block">38 of 75 Operational</span>
-                        </SpsKeyValueListItem>
-                        <SpsKeyValueListItem itemKey="Some Other Key">Its Value</SpsKeyValueListItem>
-                    </SpsKeyValueList>
-                `
+      standard: {
+        description: () => /* @__PURE__ */ React__default.createElement("h4", null, "Standard"),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Company">
+                  SPS Commerce
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      multipleValues: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Multiple Values"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of values that can be listed, but extensive lists should be avoided.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Program Requirements">
+                  Electronic Order
+                  <br />
+                  Fulfillment
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      secondaryValues: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Secondary Values"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " When using a secondary value (styled in lighter grey text) the number of values listed should be limited to two (2).")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Company">
+                  SPS Commerce
+                  <span className="font-weight-light d-block">Minneapolis, MN</span>
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      tags: {
+        description: ({ NavigateTo }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Tags"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Tags can appear inline or on individual lines as the length of content requires. Reference the ", /* @__PURE__ */ React__default.createElement(NavigateTo, {
+          to: "tags"
+        }, "Tag"), " component for spacing rules.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Accepted Documents">
+                  <SpsTag className="mr-1 mb-1">850</SpsTag>
+                  <SpsTag className="mr-1 mb-1">855</SpsTag>
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      hyperlinksAndIcons: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Hyperlinks & Icons"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Icons and Hyperlinks can be used independently of one another.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList>
+                <SpsKeyValueListItem itemKey="Company">
+                  <a href="#" target="_blank">SPS Commerce</a>
+                  <span className="font-weight-light d-block">Minneapolis, MN</span>
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
       }
     }
   },
-  inline: {
-    label: "Inline",
+  horizontal: {
+    label: "Horizontal Key Value Sets",
+    description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h5", null, "Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Horizontal containers such as a content row")), /* @__PURE__ */ React__default.createElement("h5", null, "Do Not Use:"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "In Table cells or Description Lists")), /* @__PURE__ */ React__default.createElement("h5", null, "Usage Rules"), /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles must be written in Title Case"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Values can be written in Sentence Case or Title Case as best suits the content"), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Titles or Values can include hyperlinks and/or icons", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Icons should always appear on the left before any text content"))), /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "Can be used individually or stacked on top of one another", /* @__PURE__ */ React__default.createElement("ul", null, /* @__PURE__ */ React__default.createElement("li", {
+      className: "mb-2"
+    }, "When stacking, the value sets should share a common category or theme"))))),
     examples: {
-      inline: {
-        jsx: code`
-                    <SpsKeyValueList inline>
-                        <SpsKeyValueListItem itemKey="Title">Sub copy goes here</SpsKeyValueListItem>
-                        <SpsKeyValueListItem itemKey="Long Title">Sub copy</SpsKeyValueListItem>
-                        <SpsKeyValueListItem itemKey="Tags">
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Tag</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Another Tag</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Taggart McTaggerson</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Taggle Rock</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">A Tag On Titan</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">bröther may i have some tägs</SpsTag>
-                            <SpsTag kind={TagKind.INFO} className="mr-1 mb-1">Tag Me Up, Tag Me Down</SpsTag>
-                        </SpsKeyValueListItem>
-                    </SpsKeyValueList>
-                `
+      standard: {
+        description: () => /* @__PURE__ */ React__default.createElement("h4", null, "Standard"),
+        react: code`
+          function DemoComponent() {
+            return (
+              <SpsKeyValueList inline>
+                <SpsKeyValueListItem itemKey="Company">
+                  SPS Commerce
+                </SpsKeyValueListItem>
+              </SpsKeyValueList>
+            )
+          }
+        `
+      },
+      stacked: {
+        description: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h4", null, "Stacked"), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " There is no limit to the number of stacked listings, but more than three in a single container should be avoided."), /* @__PURE__ */ React__default.createElement("p", null, /* @__PURE__ */ React__default.createElement("b", null, "Note:"), " Titles are right-aligned in the horizontal Key Value Sets to optimize scanability of the values.")),
+        react: code`
+          function DemoComponent() {
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-3">
+                  <SpsKeyValueList inline>
+                    <SpsKeyValueListItem itemKey="Title One">
+                      Value
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Two">
+                      Value that wraps to a second line
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Three">
+                      Value
+                    </SpsKeyValueListItem>
+                  </SpsKeyValueList>
+                </div>
+              </div>
+            )
+          }
+        `
+      },
+      withLinks: {
+        description: () => /* @__PURE__ */ React__default.createElement("h4", null, "With Links"),
+        react: code`
+          function DemoComponent() {
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-3">
+                  <SpsKeyValueList inline>
+                    <SpsKeyValueListItem itemKey="Title One">
+                      Value
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Two">
+                      Value that wraps to a <a href="#" target="_blank">second line</a>
+                    </SpsKeyValueListItem>
+                    <SpsKeyValueListItem itemKey="Title Three">
+                      Value
+                    </SpsKeyValueListItem>
+                  </SpsKeyValueList>
+                </div>
+              </div>
+            )
+          }
+        `
       }
     }
   }
@@ -37895,6 +38040,7 @@ const MANIFEST = {
     examples: SpsInsightTileExamples
   },
   "Key Value Lists": {
+    description: () => /* @__PURE__ */ React.createElement("p", null, "Key Value Sets consist of a title and value, or values, paired together visually. They are ideal for displaying details (a value or values) that require additional context (title)."),
     components: [SpsKeyValueList, SpsKeyValueListItem],
     examples: SpsKeyValueListExamples
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "6.17.0",
+  "version": "6.17.1",
   "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.17.0",
-    "@spscommerce/ds-illustrations": "6.17.0",
-    "@spscommerce/ds-shared": "6.17.0",
-    "@spscommerce/positioning": "6.17.0",
+    "@spscommerce/ds-colors": "6.17.1",
+    "@spscommerce/ds-illustrations": "6.17.1",
+    "@spscommerce/ds-shared": "6.17.1",
+    "@spscommerce/positioning": "6.17.1",
     "@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.17.0",
-    "@spscommerce/ds-illustrations": "6.17.0",
-    "@spscommerce/ds-shared": "6.17.0",
-    "@spscommerce/positioning": "6.17.0",
+    "@spscommerce/ds-colors": "6.17.1",
+    "@spscommerce/ds-illustrations": "6.17.1",
+    "@spscommerce/ds-shared": "6.17.1",
+    "@spscommerce/positioning": "6.17.1",
     "@spscommerce/utils": "^6.11.3",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",