@spscommerce/ds-react 6.36.3 → 6.36.4

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.
Files changed (3) hide show
  1. package/lib/index.cjs.js +122 -64
  2. package/lib/index.es.js +68 -2
  3. package/package.json +9 -9
package/lib/index.es.js CHANGED
@@ -23331,7 +23331,7 @@ function SpsFieldset({
23331
23331
  onClick: toggleTooltip
23332
23332
  }, optional && /* @__PURE__ */ React.createElement(SpsCheckbox, {
23333
23333
  checked: isChecked,
23334
- className: "d-inline-flex",
23334
+ className: "d-inline-flex pr-1",
23335
23335
  onChange: () => {
23336
23336
  setIsChecked(!isChecked);
23337
23337
  },
@@ -27633,6 +27633,72 @@ const SpsTagExamples = {
27633
27633
  `
27634
27634
  }
27635
27635
  }
27636
+ },
27637
+ keyValueTag: {
27638
+ label: "Key Value Tag",
27639
+ examples: {
27640
+ basic: {
27641
+ react: code`
27642
+ import { SpsKeyValueTag } from "@spscommerce/ds-react";
27643
+ import { TagKind, SpsIcon } from "@spscommerce/ds-shared";
27644
+ function Component() {
27645
+ return (
27646
+ <>
27647
+ <SpsKeyValueTag
27648
+ icon={SpsIcon.INFO_CIRCLE}
27649
+ color={TagKind.DEFAULT}
27650
+ tagKey="Baz"
27651
+ value="1234"
27652
+ className="mr-1 mb-1"
27653
+ />
27654
+ <SpsKeyValueTag
27655
+ icon={SpsIcon.CHECKMARK}
27656
+ color={TagKind.KEY}
27657
+ tagKey="Baz"
27658
+ value="1234"
27659
+ className="mr-1 mb-1"
27660
+ />
27661
+ <SpsKeyValueTag
27662
+ icon={SpsIcon.EXCLAMATION_TRIANGLE}
27663
+ color={TagKind.WARNING}
27664
+ tagKey="Baz"
27665
+ value="1234"
27666
+ className="mr-1 mb-1"
27667
+ />
27668
+ <SpsKeyValueTag
27669
+ icon={SpsIcon.EXCLAMATION_CIRCLE}
27670
+ color={TagKind.ERROR}
27671
+ tagKey="Baz"
27672
+ value="1234"
27673
+ className="mr-1 mb-1"
27674
+ />
27675
+ <SpsKeyValueTag
27676
+ icon={SpsIcon.ELLIPSES}
27677
+ color={TagKind.PENDING}
27678
+ tagKey="Baz"
27679
+ value="1234"
27680
+ className="mr-1 mb-1"
27681
+ />
27682
+ <SpsKeyValueTag
27683
+ icon={SpsIcon.CHECKMARK}
27684
+ color={TagKind.SUCCESS}
27685
+ tagKey="Baz"
27686
+ value="1234"
27687
+ className="mr-1 mb-1"
27688
+ />
27689
+ <SpsKeyValueTag
27690
+ icon={SpsIcon.INFO_CIRCLE}
27691
+ color={TagKind.INFO}
27692
+ tagKey="Baz"
27693
+ value="1234"
27694
+ className="mr-1 mb-1"
27695
+ />
27696
+ </>
27697
+ )
27698
+ }
27699
+ `
27700
+ }
27701
+ }
27636
27702
  }
27637
27703
  };
27638
27704
  const SpsListActionBarExamples = {
@@ -39453,7 +39519,7 @@ function SpsKeyValueTag(props2) {
39453
39519
  kind: color,
39454
39520
  className: "sps-key-value-tag--key"
39455
39521
  }, tagKey), /* @__PURE__ */ React.createElement(SpsTag, {
39456
- className: "sps-key-value-tag--value"
39522
+ className: `sps-key-value-tag--value ${color}`
39457
39523
  }, href && /* @__PURE__ */ React.createElement("a", {
39458
39524
  href
39459
39525
  }, value), !href && value));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@spscommerce/ds-react",
3
3
  "description": "SPS Design System React components",
4
- "version": "6.36.3",
4
+ "version": "6.36.4",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
28
28
  },
29
29
  "peerDependencies": {
30
30
  "@react-stately/collections": "^3.3.3",
31
- "@spscommerce/ds-colors": "6.36.3",
32
- "@spscommerce/ds-illustrations": "6.36.3",
33
- "@spscommerce/ds-shared": "6.36.3",
34
- "@spscommerce/positioning": "6.36.3",
31
+ "@spscommerce/ds-colors": "6.36.4",
32
+ "@spscommerce/ds-illustrations": "6.36.4",
33
+ "@spscommerce/ds-shared": "6.36.4",
34
+ "@spscommerce/positioning": "6.36.4",
35
35
  "@spscommerce/utils": "^6.11.3",
36
36
  "moment": "^2.25.3",
37
37
  "moment-timezone": "^0.5.28",
@@ -40,10 +40,10 @@
40
40
  },
41
41
  "devDependencies": {
42
42
  "@react-stately/collections": "^3.3.3",
43
- "@spscommerce/ds-colors": "6.36.3",
44
- "@spscommerce/ds-illustrations": "6.36.3",
45
- "@spscommerce/ds-shared": "6.36.3",
46
- "@spscommerce/positioning": "6.36.3",
43
+ "@spscommerce/ds-colors": "6.36.4",
44
+ "@spscommerce/ds-illustrations": "6.36.4",
45
+ "@spscommerce/ds-shared": "6.36.4",
46
+ "@spscommerce/positioning": "6.36.4",
47
47
  "@spscommerce/utils": "^6.11.3",
48
48
  "@testing-library/react": "^10.4.0",
49
49
  "@types/prop-types": "^15.7.1",