@sps-woodland/key-value-set 7.1.2 → 7.1.3
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.cjs.js +2 -2
- package/lib/index.es.js +49 -50
- package/package.json +5 -5
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@sps-woodland/core"),K=require("react"),s=require("@spscommerce/utils");function b(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const l in t)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(t,l);Object.defineProperty(n,l,a.get?a:{enumerable:!0,get:()=>t[l]})}}return n.default=t,Object.freeze(n)}const e=b(K);function h(t,n,l){return n in t?Object.defineProperty(t,n,{value:l,enumerable:!0,configurable:!0,writable:!0}):t[n]=l,t}function p(t,n){var l=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);n&&(a=a.filter(function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})),l.push.apply(l,a)}return l}function S(t){for(var n=1;n<arguments.length;n++){var l=arguments[n]!=null?arguments[n]:{};n%2?p(Object(l),!0).forEach(function(a){h(t,a,l[a])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(l)):p(Object(l)).forEach(function(a){Object.defineProperty(t,a,Object.getOwnPropertyDescriptor(l,a))})}return t}var E=(t,n,l)=>{for(var a of Object.keys(t)){var r;if(t[a]!==((r=n[a])!==null&&r!==void 0?r:l[a]))return!1}return!0},v=t=>n=>{var l=t.defaultClassName,a=S(S({},t.defaultVariants),n);for(var r in a){var i,d=(i=a[r])!==null&&i!==void 0?i:t.defaultVariants[r];if(d!=null){var o=d;typeof o=="boolean"&&(o=o===!0?"true":"false");var y=t.variantClassNames[r][o];y&&(l+=" "+y)}}for(var[V,f]of t.compoundVariants)E(V,a,t.defaultVariants)&&(l+=" "+f);return l},g=v({defaultClassName:"_1i7enhj1",variantClassNames:{inline:{true:"_1i7enhj0"}},defaultVariants:{},compoundVariants:[]});function m({children:t,className:n,inline:l,...a}){return e.createElement("div",{className:u.cl(g({inline:l}),n),...a},t)}u.Metadata.set(m,{name:"KeyValueSet",props:{inline:{type:"boolean",default:"false"}}});var I="_18tyj090";function c({children:t,itemKey:n,...l}){const a=u.useChildTestIdAttrBuilder(l);return e.createElement(e.Fragment,null,e.createElement("span",{className:I,...a("key")},n),e.createElement("span",{...l},t))}u.Metadata.set(c,{name:"KeyValueSetItem",props:{itemKey:{type:"React.ReactNode | (() => React.ReactNode)",required:!0}}});const N={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:[m,c],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:s.code`
|
|
2
2
|
import { KeyValueSet, KeyValueSetItem } from "@sps-woodland/key-value-set";
|
|
3
3
|
|
|
4
4
|
function Component() {
|
|
@@ -125,4 +125,4 @@
|
|
|
125
125
|
</div>
|
|
126
126
|
)
|
|
127
127
|
}
|
|
128
|
-
`}}}}},T={"Key Value Sets":N};exports.KeyValueSet=
|
|
128
|
+
`}}}}},T={"Key Value Sets":N};exports.KeyValueSet=m;exports.KeyValueSetItem=c;exports.MANIFEST=T;
|
package/lib/index.es.js
CHANGED
|
@@ -1,27 +1,7 @@
|
|
|
1
|
-
import { Metadata as
|
|
1
|
+
import { Metadata as p, cl as f, useChildTestIdAttrBuilder as h } from "@sps-woodland/core";
|
|
2
2
|
import * as e from "react";
|
|
3
3
|
import { code as s } from "@spscommerce/utils";
|
|
4
|
-
|
|
5
|
-
function i({
|
|
6
|
-
children: t,
|
|
7
|
-
itemKey: n,
|
|
8
|
-
...l
|
|
9
|
-
}) {
|
|
10
|
-
const a = f(l);
|
|
11
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
|
|
12
|
-
className: b,
|
|
13
|
-
...a("key")
|
|
14
|
-
}, n), /* @__PURE__ */ e.createElement("span", {
|
|
15
|
-
...l
|
|
16
|
-
}, t));
|
|
17
|
-
}
|
|
18
|
-
y.set(i, {
|
|
19
|
-
name: "KeyValueSetItem",
|
|
20
|
-
props: {
|
|
21
|
-
itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 }
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
function v(t, n, l) {
|
|
4
|
+
function E(t, n, l) {
|
|
25
5
|
return n in t ? Object.defineProperty(t, n, {
|
|
26
6
|
value: l,
|
|
27
7
|
enumerable: !0,
|
|
@@ -29,7 +9,7 @@ function v(t, n, l) {
|
|
|
29
9
|
writable: !0
|
|
30
10
|
}) : t[n] = l, t;
|
|
31
11
|
}
|
|
32
|
-
function
|
|
12
|
+
function c(t, n) {
|
|
33
13
|
var l = Object.keys(t);
|
|
34
14
|
if (Object.getOwnPropertySymbols) {
|
|
35
15
|
var a = Object.getOwnPropertySymbols(t);
|
|
@@ -39,63 +19,82 @@ function d(t, n) {
|
|
|
39
19
|
}
|
|
40
20
|
return l;
|
|
41
21
|
}
|
|
42
|
-
function
|
|
22
|
+
function d(t) {
|
|
43
23
|
for (var n = 1; n < arguments.length; n++) {
|
|
44
24
|
var l = arguments[n] != null ? arguments[n] : {};
|
|
45
|
-
n % 2 ?
|
|
46
|
-
|
|
47
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) :
|
|
25
|
+
n % 2 ? c(Object(l), !0).forEach(function(a) {
|
|
26
|
+
E(t, a, l[a]);
|
|
27
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(l)) : c(Object(l)).forEach(function(a) {
|
|
48
28
|
Object.defineProperty(t, a, Object.getOwnPropertyDescriptor(l, a));
|
|
49
29
|
});
|
|
50
30
|
}
|
|
51
31
|
return t;
|
|
52
32
|
}
|
|
53
|
-
var
|
|
33
|
+
var b = (t, n, l) => {
|
|
54
34
|
for (var a of Object.keys(t)) {
|
|
55
35
|
var r;
|
|
56
36
|
if (t[a] !== ((r = n[a]) !== null && r !== void 0 ? r : l[a]))
|
|
57
37
|
return !1;
|
|
58
38
|
}
|
|
59
39
|
return !0;
|
|
60
|
-
},
|
|
61
|
-
var l = t.defaultClassName, a =
|
|
40
|
+
}, v = (t) => (n) => {
|
|
41
|
+
var l = t.defaultClassName, a = d(d({}, t.defaultVariants), n);
|
|
62
42
|
for (var r in a) {
|
|
63
|
-
var u,
|
|
64
|
-
if (
|
|
65
|
-
var o =
|
|
43
|
+
var u, i = (u = a[r]) !== null && u !== void 0 ? u : t.defaultVariants[r];
|
|
44
|
+
if (i != null) {
|
|
45
|
+
var o = i;
|
|
66
46
|
typeof o == "boolean" && (o = o === !0 ? "true" : "false");
|
|
67
|
-
var
|
|
68
|
-
|
|
47
|
+
var m = t.variantClassNames[r][o];
|
|
48
|
+
m && (l += " " + m);
|
|
69
49
|
}
|
|
70
50
|
}
|
|
71
51
|
for (var [S, K] of t.compoundVariants)
|
|
72
|
-
|
|
52
|
+
b(S, a, t.defaultVariants) && (l += " " + K);
|
|
73
53
|
return l;
|
|
74
|
-
},
|
|
75
|
-
function
|
|
54
|
+
}, g = v({ defaultClassName: "_1i7enhj1", variantClassNames: { inline: { true: "_1i7enhj0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
55
|
+
function y({
|
|
76
56
|
children: t,
|
|
77
57
|
className: n,
|
|
78
58
|
inline: l,
|
|
79
59
|
...a
|
|
80
60
|
}) {
|
|
81
|
-
const [r] = h(t, [{ type: i }]);
|
|
82
61
|
return /* @__PURE__ */ e.createElement("div", {
|
|
83
|
-
className:
|
|
84
|
-
|
|
62
|
+
className: f(
|
|
63
|
+
g({ inline: l }),
|
|
85
64
|
n
|
|
86
65
|
),
|
|
87
66
|
...a
|
|
88
|
-
},
|
|
67
|
+
}, t);
|
|
89
68
|
}
|
|
90
|
-
|
|
69
|
+
p.set(y, {
|
|
91
70
|
name: "KeyValueSet",
|
|
92
71
|
props: {
|
|
93
72
|
inline: { type: "boolean", default: "false" }
|
|
94
73
|
}
|
|
95
74
|
});
|
|
96
|
-
|
|
75
|
+
var I = "_18tyj090";
|
|
76
|
+
function V({
|
|
77
|
+
children: t,
|
|
78
|
+
itemKey: n,
|
|
79
|
+
...l
|
|
80
|
+
}) {
|
|
81
|
+
const a = h(l);
|
|
82
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("span", {
|
|
83
|
+
className: I,
|
|
84
|
+
...a("key")
|
|
85
|
+
}, n), /* @__PURE__ */ e.createElement("span", {
|
|
86
|
+
...l
|
|
87
|
+
}, t));
|
|
88
|
+
}
|
|
89
|
+
p.set(V, {
|
|
90
|
+
name: "KeyValueSetItem",
|
|
91
|
+
props: {
|
|
92
|
+
itemKey: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 }
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
const N = {
|
|
97
96
|
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)."),
|
|
98
|
-
components: [
|
|
97
|
+
components: [y, V],
|
|
99
98
|
examples: {
|
|
100
99
|
vertical: {
|
|
101
100
|
label: "Vertical Key Value Sets",
|
|
@@ -303,11 +302,11 @@ const T = {
|
|
|
303
302
|
}
|
|
304
303
|
}
|
|
305
304
|
}
|
|
306
|
-
},
|
|
307
|
-
"Key Value Sets":
|
|
305
|
+
}, C = {
|
|
306
|
+
"Key Value Sets": N
|
|
308
307
|
};
|
|
309
308
|
export {
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
309
|
+
y as KeyValueSet,
|
|
310
|
+
V as KeyValueSetItem,
|
|
311
|
+
C as MANIFEST
|
|
313
312
|
};
|
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": "7.1.
|
|
4
|
+
"version": "7.1.3",
|
|
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",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"@spscommerce/utils": "^6.12.1",
|
|
17
|
-
"@sps-woodland/core": "7.1.
|
|
18
|
-
"@sps-woodland/tokens": "7.1.
|
|
17
|
+
"@sps-woodland/core": "7.1.3",
|
|
18
|
+
"@sps-woodland/tokens": "7.1.3",
|
|
19
19
|
"react": "^16.9.0",
|
|
20
20
|
"react-dom": "^16.9.0"
|
|
21
21
|
},
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
"@vanilla-extract/css": "^1.9.1",
|
|
24
24
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
25
25
|
"@spscommerce/utils": "^6.12.1",
|
|
26
|
-
"@sps-woodland/core": "7.1.
|
|
27
|
-
"@sps-woodland/tokens": "7.1.
|
|
26
|
+
"@sps-woodland/core": "7.1.3",
|
|
27
|
+
"@sps-woodland/tokens": "7.1.3",
|
|
28
28
|
"react": "^16.9.0",
|
|
29
29
|
"react-dom": "^16.9.0"
|
|
30
30
|
},
|