@sps-woodland/key-value-set 8.42.2 → 8.42.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.
package/lib/index.js
CHANGED
|
@@ -1,95 +1,98 @@
|
|
|
1
|
-
import { Metadata as p, cl as
|
|
1
|
+
import { Metadata as p, cl as y, useChildTestIdAttrBuilder as v } from "@sps-woodland/core";
|
|
2
2
|
import * as e from "react";
|
|
3
3
|
import { code as s } from "@spscommerce/utils";
|
|
4
|
-
function
|
|
4
|
+
function _(t, n, a) {
|
|
5
5
|
return n in t ? Object.defineProperty(t, n, {
|
|
6
|
-
value:
|
|
6
|
+
value: a,
|
|
7
7
|
enumerable: !0,
|
|
8
8
|
configurable: !0,
|
|
9
9
|
writable: !0
|
|
10
|
-
}) : t[n] =
|
|
10
|
+
}) : t[n] = a, t;
|
|
11
11
|
}
|
|
12
12
|
function c(t, n) {
|
|
13
|
-
var
|
|
13
|
+
var a = Object.keys(t);
|
|
14
14
|
if (Object.getOwnPropertySymbols) {
|
|
15
|
-
var
|
|
16
|
-
n && (
|
|
15
|
+
var l = Object.getOwnPropertySymbols(t);
|
|
16
|
+
n && (l = l.filter(function(r) {
|
|
17
17
|
return Object.getOwnPropertyDescriptor(t, r).enumerable;
|
|
18
|
-
})),
|
|
18
|
+
})), a.push.apply(a, l);
|
|
19
19
|
}
|
|
20
|
-
return
|
|
20
|
+
return a;
|
|
21
21
|
}
|
|
22
22
|
function d(t) {
|
|
23
23
|
for (var n = 1; n < arguments.length; n++) {
|
|
24
|
-
var
|
|
25
|
-
n % 2 ? c(Object(
|
|
26
|
-
|
|
27
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(
|
|
28
|
-
Object.defineProperty(t,
|
|
24
|
+
var a = arguments[n] != null ? arguments[n] : {};
|
|
25
|
+
n % 2 ? c(Object(a), !0).forEach(function(l) {
|
|
26
|
+
_(t, l, a[l]);
|
|
27
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : c(Object(a)).forEach(function(l) {
|
|
28
|
+
Object.defineProperty(t, l, Object.getOwnPropertyDescriptor(a, l));
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
return t;
|
|
32
32
|
}
|
|
33
|
-
var
|
|
34
|
-
for (var
|
|
33
|
+
var E = (t, n, a) => {
|
|
34
|
+
for (var l of Object.keys(t)) {
|
|
35
35
|
var r;
|
|
36
|
-
if (t[
|
|
36
|
+
if (t[l] !== ((r = n[l]) !== null && r !== void 0 ? r : a[l]))
|
|
37
37
|
return !1;
|
|
38
38
|
}
|
|
39
39
|
return !0;
|
|
40
|
-
},
|
|
41
|
-
var
|
|
42
|
-
for (var r in
|
|
43
|
-
var
|
|
44
|
-
if (
|
|
45
|
-
var
|
|
46
|
-
typeof
|
|
40
|
+
}, V = (t) => (n) => {
|
|
41
|
+
var a = t.defaultClassName, l = d(d({}, t.defaultVariants), n);
|
|
42
|
+
for (var r in l) {
|
|
43
|
+
var o, u = (o = l[r]) !== null && o !== void 0 ? o : t.defaultVariants[r];
|
|
44
|
+
if (u != null) {
|
|
45
|
+
var i = u;
|
|
46
|
+
typeof i == "boolean" && (i = i === !0 ? "true" : "false");
|
|
47
47
|
var m = (
|
|
48
48
|
// @ts-expect-error
|
|
49
|
-
t.variantClassNames[r][
|
|
49
|
+
t.variantClassNames[r][i]
|
|
50
50
|
);
|
|
51
|
-
m && (
|
|
51
|
+
m && (a += " " + m);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
for (var [
|
|
55
|
-
|
|
56
|
-
return
|
|
57
|
-
},
|
|
58
|
-
function
|
|
54
|
+
for (var [f, K] of t.compoundVariants)
|
|
55
|
+
E(f, l, t.defaultVariants) && (a += " " + K);
|
|
56
|
+
return a;
|
|
57
|
+
}, b = V({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj1", variantClassNames: { inline: { true: "pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj2 pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
58
|
+
function S({
|
|
59
59
|
children: t,
|
|
60
60
|
className: n,
|
|
61
|
-
inline:
|
|
62
|
-
...
|
|
61
|
+
inline: a,
|
|
62
|
+
...l
|
|
63
63
|
}) {
|
|
64
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
65
|
-
|
|
64
|
+
return /* @__PURE__ */ e.createElement("div", { className: y(
|
|
65
|
+
b({ inline: a }),
|
|
66
66
|
n
|
|
67
|
-
), ...
|
|
67
|
+
), ...l }, t);
|
|
68
68
|
}
|
|
69
|
-
p.set(
|
|
69
|
+
p.set(S, {
|
|
70
70
|
name: "KeyValueSet",
|
|
71
71
|
props: {
|
|
72
72
|
inline: { type: "boolean", default: "false" }
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
|
-
var I = "pkg_sps-woodland_key-value-
|
|
76
|
-
function
|
|
75
|
+
var g = "pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj090", I = V({ defaultClassName: "pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj091", variantClassNames: { wrap: { normal: "pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj092", truncate: "pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj093" } }, defaultVariants: {}, compoundVariants: [] });
|
|
76
|
+
function h({
|
|
77
77
|
children: t,
|
|
78
|
-
|
|
79
|
-
|
|
78
|
+
className: n,
|
|
79
|
+
itemKey: a,
|
|
80
|
+
wrap: l,
|
|
81
|
+
...r
|
|
80
82
|
}) {
|
|
81
|
-
const
|
|
82
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className:
|
|
83
|
+
const o = v(r), u = l === "truncate" && typeof t == "string" ? t : void 0;
|
|
84
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", { className: g, ...o("key") }, a), /* @__PURE__ */ e.createElement("span", { className: y(I({ wrap: l }), n), title: u, ...r }, t));
|
|
83
85
|
}
|
|
84
|
-
p.set(
|
|
86
|
+
p.set(h, {
|
|
85
87
|
name: "KeyValueSetItem",
|
|
86
88
|
props: {
|
|
87
|
-
itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 }
|
|
89
|
+
itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 },
|
|
90
|
+
wrap: { type: "'normal' | 'truncate'" }
|
|
88
91
|
}
|
|
89
92
|
});
|
|
90
|
-
const
|
|
93
|
+
const w = {
|
|
91
94
|
description: () => /* @__PURE__ */ e.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)."),
|
|
92
|
-
components: [
|
|
95
|
+
components: [S, h],
|
|
93
96
|
examples: {
|
|
94
97
|
vertical: {
|
|
95
98
|
label: "Vertical Key Value Sets",
|
|
@@ -227,6 +230,9 @@ const _ = {
|
|
|
227
230
|
<KeyValueSetItem itemKey="Title Three">
|
|
228
231
|
Value
|
|
229
232
|
</KeyValueSetItem>
|
|
233
|
+
<KeyValueSetItem itemKey="Title Four" wrap="truncate">
|
|
234
|
+
Very long value that will be truncated with an ellipsis instead of wrapping
|
|
235
|
+
</KeyValueSetItem>
|
|
230
236
|
</KeyValueSet>
|
|
231
237
|
</div>
|
|
232
238
|
</div>
|
|
@@ -263,11 +269,11 @@ const _ = {
|
|
|
263
269
|
}
|
|
264
270
|
}
|
|
265
271
|
}
|
|
266
|
-
},
|
|
267
|
-
"Key Value Sets":
|
|
272
|
+
}, k = {
|
|
273
|
+
"Key Value Sets": w
|
|
268
274
|
};
|
|
269
275
|
export {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
276
|
+
S as KeyValueSet,
|
|
277
|
+
h as KeyValueSetItem,
|
|
278
|
+
k as MANIFEST
|
|
273
279
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@sps-woodland/core"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@spscommerce/utils"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s.KeyValueSet={},s.core,s.React,s.utils))})(this,function(s,o,h,u){"use strict";function K(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(n,a,l.get?l:{enumerable:!0,get:()=>t[a]})}}return n.default=t,Object.freeze(n)}const e=K(h);function _(t,n,a){return n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a,t}function y(t,n){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);n&&(l=l.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),a.push.apply(a,l)}return a}function f(t){for(var n=1;n<arguments.length;n++){var a=arguments[n]!=null?arguments[n]:{};n%2?y(Object(a),!0).forEach(function(l){_(t,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):y(Object(a)).forEach(function(l){Object.defineProperty(t,l,Object.getOwnPropertyDescriptor(a,l))})}return t}var b=(t,n,a)=>{for(var l of Object.keys(t)){var r;if(t[l]!==((r=n[l])!==null&&r!==void 0?r:a[l]))return!1}return!0},S=t=>n=>{var a=t.defaultClassName,l=f(f({},t.defaultVariants),n);for(var r in l){var i,m=(i=l[r])!==null&&i!==void 0?i:t.defaultVariants[r];if(m!=null){var c=m;typeof c=="boolean"&&(c=c===!0?"true":"false");var V=t.variantClassNames[r][c];V&&(a+=" "+V)}}for(var[I,N]of t.compoundVariants)b(I,l,t.defaultVariants)&&(a+=" "+N);return a},v=S({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj1",variantClassNames:{inline:{true:"pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj2 pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function d({children:t,className:n,inline:a,...l}){return e.createElement("div",{className:o.cl(v({inline:a}),n),...l},t)}o.Metadata.set(d,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});var E="pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj090",g=S({defaultClassName:"pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj091",variantClassNames:{wrap:{normal:"pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj092",truncate:"pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj093"}},defaultVariants:{},compoundVariants:[]});function p({children:t,className:n,itemKey:a,wrap:l,...r}){const i=o.useChildTestIdAttrBuilder(r),m=l==="truncate"&&typeof t=="string"?t:void 0;return e.createElement(e.Fragment,null,e.createElement("span",{className:E,...i("key")},a),e.createElement("span",{className:o.cl(g({wrap:l}),n),title:m,...r},t))}o.Metadata.set(p,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0},wrap:{type:"'normal' | 'truncate'"}}});const w={"Key Value Sets":{description:()=>e.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:[d,p],examples:{vertical:{label:"Vertical Key Value Sets",description:()=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Vertical containers such as a side bar or general card")),e.createElement("h5",null,"Do Not Use:"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"In Table cells or Description Lists")),e.createElement("h5",null,"Usage Rules"),e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Titles must be written in Title Case"),e.createElement("li",{className:"mb-2"},"Values can be written in Sentence Case or Title Case as best suits the content"),e.createElement("li",{className:"mb-2"},"Titles or Values can include hyperlinks and/or icons",e.createElement("ul",null,e.createElement("li",{className:"mb-2"},"Icons should always appear on the left before any text content"))),e.createElement("li",{className:"mb-2"},"Values can include tags"),e.createElement("li",{className:"mb-2"},"Can include multiple values on additional lines"))),examples:{standard:{description:()=>e.createElement("h4",null,"Standard"),react:u.code`
|
|
2
2
|
import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
|
|
3
3
|
|
|
4
4
|
function Component() {
|
|
@@ -98,6 +98,9 @@
|
|
|
98
98
|
<KeyValueSetItem itemKey="Title Three">
|
|
99
99
|
Value
|
|
100
100
|
</KeyValueSetItem>
|
|
101
|
+
<KeyValueSetItem itemKey="Title Four" wrap="truncate">
|
|
102
|
+
Very long value that will be truncated with an ellipsis instead of wrapping
|
|
103
|
+
</KeyValueSetItem>
|
|
101
104
|
</KeyValueSet>
|
|
102
105
|
</div>
|
|
103
106
|
</div>
|
|
@@ -125,4 +128,4 @@
|
|
|
125
128
|
</div>
|
|
126
129
|
)
|
|
127
130
|
}
|
|
128
|
-
`}}}}}};
|
|
131
|
+
`}}}}}};s.KeyValueSet=d,s.KeyValueSetItem=p,s.MANIFEST=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1 +1,13 @@
|
|
|
1
1
|
export declare const key: string;
|
|
2
|
+
export declare const value: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
3
|
+
wrap: {
|
|
4
|
+
normal: {
|
|
5
|
+
overflowWrap: "normal";
|
|
6
|
+
};
|
|
7
|
+
truncate: {
|
|
8
|
+
overflow: "hidden";
|
|
9
|
+
textOverflow: "ellipsis";
|
|
10
|
+
whiteSpace: "nowrap";
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
}>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps } from "@sps-woodland/core";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
export declare function KeyValueSetItem({ children, itemKey, ...rest }: ComponentProps<{
|
|
3
|
+
export declare function KeyValueSetItem({ children, className, itemKey, wrap, ...rest }: ComponentProps<{
|
|
4
4
|
itemKey: React.ReactNode | (() => React.ReactNode);
|
|
5
|
+
wrap?: "normal" | "truncate";
|
|
5
6
|
}, HTMLSpanElement>): React.ReactElement;
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-woodland_key-value-
|
|
1
|
+
.pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj0{grid-template-columns:auto auto}.pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj1{column-gap:.5rem;display:inline-grid;font-size:.75rem;line-height:1.125rem;max-width:100%}.pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj090{font-weight:600;min-width:0}.pkg_sps-woodland_key-value-set__version_8_42_4__hash_1i7enhj0 .pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj090{text-align:right}.pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj091{min-width:0;overflow-wrap:break-word}.pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj092{overflow-wrap:normal}.pkg_sps-woodland_key-value-set__version_8_42_4__hash_18tyj093{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/key-value-set",
|
|
3
3
|
"description": "SPS Woodland Design System key value set component",
|
|
4
|
-
"version": "8.42.
|
|
4
|
+
"version": "8.42.4",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/key-value-set",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0",
|
|
30
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/core": "8.42.
|
|
33
|
-
"@sps-woodland/tokens": "8.42.
|
|
32
|
+
"@sps-woodland/core": "8.42.4",
|
|
33
|
+
"@sps-woodland/tokens": "8.42.4"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "^8.1.1",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
39
39
|
"react": "^16.14.0",
|
|
40
40
|
"react-dom": "^16.14.0",
|
|
41
|
-
"@sps-woodland/core": "8.42.
|
|
42
|
-
"@sps-woodland/tokens": "8.42.
|
|
41
|
+
"@sps-woodland/core": "8.42.4",
|
|
42
|
+
"@sps-woodland/tokens": "8.42.4"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "pnpm run build:js && pnpm run build:types",
|