@sps-woodland/cards 8.34.3 → 8.34.5
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 +153 -102
- package/lib/index.umd.cjs +16 -16
- package/lib/insight-card/InsightCard.css.d.ts +19 -0
- package/lib/style.css +1 -1
- package/package.json +10 -8
package/lib/index.js
CHANGED
|
@@ -1,108 +1,159 @@
|
|
|
1
|
-
import { Metadata as
|
|
1
|
+
import { Metadata as d, CapContent as w, cl as _, selectChildren as P, useChildTestIdAttrBuilder as x, addProps as D, Content as F, CapContentTitle as V, Icon as b } from "@sps-woodland/core";
|
|
2
2
|
import * as e from "react";
|
|
3
|
-
import { useWoodlandLanguage as
|
|
3
|
+
import { useWoodlandLanguage as z } from "@spscommerce/i18n";
|
|
4
4
|
import { code as i } from "@spscommerce/utils";
|
|
5
|
-
var
|
|
6
|
-
function
|
|
5
|
+
var O = "pkg_sps-woodland_cards__version_8_34_5__hash_1gxcp3j0";
|
|
6
|
+
function C({
|
|
7
7
|
children: t,
|
|
8
|
-
className:
|
|
9
|
-
...
|
|
8
|
+
className: s = "",
|
|
9
|
+
...a
|
|
10
10
|
}) {
|
|
11
|
-
return /* @__PURE__ */ e.createElement(
|
|
11
|
+
return /* @__PURE__ */ e.createElement(w, { className: _(O, s), ...a }, t);
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
var H = "pkg_sps-
|
|
15
|
-
function
|
|
13
|
+
d.set(C, { name: "CardFooter" });
|
|
14
|
+
var H = "pkg_sps-woodland_cards__version_8_34_5__hash_mxozo50";
|
|
15
|
+
function f({
|
|
16
16
|
children: t,
|
|
17
|
-
className:
|
|
18
|
-
...
|
|
17
|
+
className: s = "",
|
|
18
|
+
...a
|
|
19
19
|
}) {
|
|
20
|
-
return /* @__PURE__ */ e.createElement(
|
|
20
|
+
return /* @__PURE__ */ e.createElement(w, { className: _(H, s), ...a }, t);
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
function
|
|
22
|
+
d.set(f, { name: "CardHeader" });
|
|
23
|
+
var j = "pkg_sps-woodland_cards__version_8_34_5__hash_jyyttb0";
|
|
24
|
+
function k({
|
|
25
25
|
children: t,
|
|
26
|
-
className:
|
|
27
|
-
...
|
|
26
|
+
className: s,
|
|
27
|
+
...a
|
|
28
28
|
}) {
|
|
29
29
|
const [
|
|
30
|
-
|
|
31
|
-
[
|
|
32
|
-
|
|
30
|
+
n,
|
|
31
|
+
[r],
|
|
32
|
+
c,
|
|
33
33
|
p
|
|
34
|
-
] =
|
|
35
|
-
{ type:
|
|
34
|
+
] = P(t, [
|
|
35
|
+
{ type: f },
|
|
36
36
|
{
|
|
37
|
-
custom: (
|
|
37
|
+
custom: (l) => d.isWoodlandComponent(l) && d.get(l).name === "Tabs"
|
|
38
38
|
},
|
|
39
|
-
{ type:
|
|
40
|
-
]),
|
|
41
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
39
|
+
{ type: C }
|
|
40
|
+
]), o = x(a);
|
|
41
|
+
return /* @__PURE__ */ e.createElement("div", { className: _(j, s), ...a }, n, r ? D(r, { context: "container" }) : /* @__PURE__ */ e.createElement(F, { ...o("body") }, p), c);
|
|
42
42
|
}
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
function
|
|
43
|
+
d.set(k, { name: "Card" });
|
|
44
|
+
var W = "pkg_sps-woodland_cards__version_8_34_5__hash_1f11ubh0";
|
|
45
|
+
function y({
|
|
46
46
|
children: t,
|
|
47
|
-
className:
|
|
48
|
-
...
|
|
47
|
+
className: s = "",
|
|
48
|
+
...a
|
|
49
49
|
}) {
|
|
50
|
-
return /* @__PURE__ */ e.createElement(
|
|
50
|
+
return /* @__PURE__ */ e.createElement(V, { className: _(W, s), ...a }, t);
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
d.set(y, { name: "CardTitle" });
|
|
53
|
+
function A(t, s, a) {
|
|
54
|
+
return s in t ? Object.defineProperty(t, s, {
|
|
55
|
+
value: a,
|
|
56
|
+
enumerable: !0,
|
|
57
|
+
configurable: !0,
|
|
58
|
+
writable: !0
|
|
59
|
+
}) : t[s] = a, t;
|
|
60
|
+
}
|
|
61
|
+
function v(t, s) {
|
|
62
|
+
var a = Object.keys(t);
|
|
63
|
+
if (Object.getOwnPropertySymbols) {
|
|
64
|
+
var n = Object.getOwnPropertySymbols(t);
|
|
65
|
+
s && (n = n.filter(function(r) {
|
|
66
|
+
return Object.getOwnPropertyDescriptor(t, r).enumerable;
|
|
67
|
+
})), a.push.apply(a, n);
|
|
68
|
+
}
|
|
69
|
+
return a;
|
|
70
|
+
}
|
|
71
|
+
function I(t) {
|
|
72
|
+
for (var s = 1; s < arguments.length; s++) {
|
|
73
|
+
var a = arguments[s] != null ? arguments[s] : {};
|
|
74
|
+
s % 2 ? v(Object(a), !0).forEach(function(n) {
|
|
75
|
+
A(t, n, a[n]);
|
|
76
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(a)) : v(Object(a)).forEach(function(n) {
|
|
77
|
+
Object.defineProperty(t, n, Object.getOwnPropertyDescriptor(a, n));
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
return t;
|
|
81
|
+
}
|
|
82
|
+
var R = (t, s, a) => {
|
|
83
|
+
for (var n of Object.keys(t)) {
|
|
84
|
+
var r;
|
|
85
|
+
if (t[n] !== ((r = s[n]) !== null && r !== void 0 ? r : a[n]))
|
|
86
|
+
return !1;
|
|
87
|
+
}
|
|
88
|
+
return !0;
|
|
89
|
+
}, m = (t) => (s) => {
|
|
90
|
+
var a = t.defaultClassName, n = I(I({}, t.defaultVariants), s);
|
|
91
|
+
for (var r in n) {
|
|
92
|
+
var c, p = (c = n[r]) !== null && c !== void 0 ? c : t.defaultVariants[r];
|
|
93
|
+
if (p != null) {
|
|
94
|
+
var o = p;
|
|
95
|
+
typeof o == "boolean" && (o = o === !0 ? "true" : "false");
|
|
96
|
+
var l = (
|
|
97
|
+
// @ts-expect-error
|
|
98
|
+
t.variantClassNames[r][o]
|
|
99
|
+
);
|
|
100
|
+
l && (a += " " + l);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
for (var [g, h] of t.compoundVariants)
|
|
104
|
+
R(g, n, t.defaultVariants) && (a += " " + h);
|
|
105
|
+
return a;
|
|
106
|
+
}, U = "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq0", L = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq2", error: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq3", success: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq4", warning: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq5", processing: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq6" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq7", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq8" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), M = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqa", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqb" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), G = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqi", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqj", error: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqk", success: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsql", warning: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqm", processing: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqn" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqo", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqp" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), K = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqq", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqr", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqs" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), J = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqt", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqu", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqv" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), X = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqw", variantClassNames: { hasDetail: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqx", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqy" } }, defaultVariants: { hasDetail: !1 }, compoundVariants: [] }), $ = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqz", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq10", error: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq11", success: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq12", warning: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq13", processing: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq14" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq15", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq16" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), Q = m({ defaultClassName: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq17", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq18", false: "pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq19" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] });
|
|
107
|
+
const Y = Object.freeze({
|
|
54
108
|
general: "status-new",
|
|
55
109
|
success: "status-ok",
|
|
56
110
|
error: "status-error",
|
|
57
111
|
warning: "status-warning",
|
|
58
112
|
processing: "status-in-process"
|
|
59
113
|
});
|
|
60
|
-
function
|
|
114
|
+
function T({
|
|
61
115
|
children: t,
|
|
62
|
-
className:
|
|
63
|
-
horizontal:
|
|
64
|
-
icon:
|
|
65
|
-
kind:
|
|
66
|
-
title:
|
|
116
|
+
className: s,
|
|
117
|
+
horizontal: a = !1,
|
|
118
|
+
icon: n,
|
|
119
|
+
kind: r = "general",
|
|
120
|
+
title: c,
|
|
67
121
|
metric: p,
|
|
68
|
-
partnerCount:
|
|
69
|
-
totalPartners:
|
|
70
|
-
...
|
|
122
|
+
partnerCount: o,
|
|
123
|
+
totalPartners: l,
|
|
124
|
+
...g
|
|
71
125
|
}) {
|
|
72
|
-
const { t: h } =
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
] = (
|
|
77
|
-
count:
|
|
78
|
-
total:
|
|
79
|
-
defaultValue: `${
|
|
126
|
+
const { t: h } = z(), u = x(g), [
|
|
127
|
+
S,
|
|
128
|
+
E,
|
|
129
|
+
N
|
|
130
|
+
] = (o ? h("insightTile.partnerCount", {
|
|
131
|
+
count: o,
|
|
132
|
+
total: l,
|
|
133
|
+
defaultValue: `${o} |of| ${l}`
|
|
80
134
|
}) : "").split("|");
|
|
81
135
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
82
136
|
"div",
|
|
83
137
|
{
|
|
84
|
-
className:
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
n && "sps-insight-tile--horizontal",
|
|
88
|
-
t && "sps-insight-tile--has-detail",
|
|
89
|
-
a
|
|
138
|
+
className: _(
|
|
139
|
+
L({ kind: r, horizontal: a }),
|
|
140
|
+
s
|
|
90
141
|
),
|
|
91
|
-
...
|
|
142
|
+
...g
|
|
92
143
|
},
|
|
93
|
-
/* @__PURE__ */ e.createElement("div", { className:
|
|
144
|
+
/* @__PURE__ */ e.createElement("div", { className: M({ horizontal: a }), ...u("body") }, n ? /* @__PURE__ */ e.createElement(b, { icon: `${n}`, ...u("icon") }) : /* @__PURE__ */ e.createElement(b, { icon: `${Y[r]}`, ...u("icon") }), p && /* @__PURE__ */ e.createElement("div", { className: G({ kind: r, horizontal: a }), ...u("metric") }, p), c && /* @__PURE__ */ e.createElement("div", { className: J({ horizontal: a }), ...u("description") }, /* @__PURE__ */ e.createElement(
|
|
94
145
|
"div",
|
|
95
146
|
{
|
|
96
|
-
className:
|
|
147
|
+
className: K({ horizontal: a }),
|
|
97
148
|
style: { "-webkit-box-orient": "vertical" },
|
|
98
|
-
...
|
|
149
|
+
...u("title")
|
|
99
150
|
},
|
|
100
|
-
|
|
101
|
-
), /* @__PURE__ */ e.createElement("div", { className:
|
|
102
|
-
|
|
151
|
+
c
|
|
152
|
+
), /* @__PURE__ */ e.createElement("div", { className: X({ hasDetail: !!t }), ...u("detail") }, t))),
|
|
153
|
+
o && /* @__PURE__ */ e.createElement("div", { className: $({ kind: r, horizontal: a }), ...u("partner-count") }, o === l ? /* @__PURE__ */ e.createElement("div", null, h("insightTile.all", { defaultValue: "ALL" })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, S), /* @__PURE__ */ e.createElement("div", null, E), /* @__PURE__ */ e.createElement("div", null, N)), /* @__PURE__ */ e.createElement("div", { className: Q({ horizontal: a }) }, h("insightTile.partners", { defaultValue: "PARTNERS" })))
|
|
103
154
|
));
|
|
104
155
|
}
|
|
105
|
-
|
|
156
|
+
d.set(T, {
|
|
106
157
|
name: "InsightCard",
|
|
107
158
|
props: {
|
|
108
159
|
horizontal: { type: "boolean", default: "false" },
|
|
@@ -114,49 +165,49 @@ s.set(w, {
|
|
|
114
165
|
totalPartners: "number"
|
|
115
166
|
}
|
|
116
167
|
});
|
|
117
|
-
function
|
|
168
|
+
function q({
|
|
118
169
|
children: t,
|
|
119
|
-
...
|
|
170
|
+
...s
|
|
120
171
|
}) {
|
|
121
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
172
|
+
return /* @__PURE__ */ e.createElement("div", { className: U, ...s }, t);
|
|
122
173
|
}
|
|
123
|
-
|
|
124
|
-
var
|
|
125
|
-
function
|
|
174
|
+
d.set(q, { name: "InsightCardSet" });
|
|
175
|
+
var Z = "pkg_sps-woodland_cards__version_8_34_5__hash_7b9vus0";
|
|
176
|
+
function B({
|
|
126
177
|
children: t,
|
|
127
|
-
className:
|
|
128
|
-
maxHeight:
|
|
129
|
-
style:
|
|
130
|
-
...
|
|
178
|
+
className: s,
|
|
179
|
+
maxHeight: a,
|
|
180
|
+
style: n,
|
|
181
|
+
...r
|
|
131
182
|
}) {
|
|
132
183
|
return /* @__PURE__ */ e.createElement(
|
|
133
184
|
"div",
|
|
134
185
|
{
|
|
135
|
-
className:
|
|
136
|
-
style: { ...
|
|
137
|
-
...
|
|
186
|
+
className: _(Z, s),
|
|
187
|
+
style: { ...n, maxHeight: a },
|
|
188
|
+
...r
|
|
138
189
|
},
|
|
139
190
|
t
|
|
140
191
|
);
|
|
141
192
|
}
|
|
142
|
-
|
|
193
|
+
d.set(B, {
|
|
143
194
|
name: "ScrollableContainer",
|
|
144
195
|
props: {
|
|
145
196
|
maxHeight: "string"
|
|
146
197
|
}
|
|
147
198
|
});
|
|
148
|
-
const
|
|
199
|
+
const ee = {
|
|
149
200
|
description: () => /* @__PURE__ */ e.createElement("p", null, "Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),
|
|
150
201
|
components: [
|
|
151
|
-
|
|
152
|
-
g,
|
|
202
|
+
k,
|
|
153
203
|
C,
|
|
154
|
-
|
|
204
|
+
f,
|
|
205
|
+
y
|
|
155
206
|
],
|
|
156
207
|
examples: {
|
|
157
208
|
general: {
|
|
158
209
|
label: "General Usage",
|
|
159
|
-
description: ({ Link: t, NavigateTo:
|
|
210
|
+
description: ({ Link: t, NavigateTo: s }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("h5", null, "Sizing and Layout"), /* @__PURE__ */ e.createElement("p", null, "All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ", /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/grid" }, "Woodland Grid"), " and", " ", /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/page-types" }, "Page Layouts"), " sections for more guidance on appropriate usage."), /* @__PURE__ */ e.createElement("p", null, "The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."), /* @__PURE__ */ e.createElement("h5", null, "Text Content"), /* @__PURE__ */ e.createElement("p", null, "The only text content that can exist outside of a Card is the", " ", /* @__PURE__ */ e.createElement(s, { to: "page-title" }, "Page Title"), " component."), /* @__PURE__ */ e.createElement("p", null, "All other content should exist inside of a Card and should adhere to the Woodland Design System ", /* @__PURE__ */ e.createElement(t, { to: "/style-and-layout/typography" }, "Typography"), " rules."), /* @__PURE__ */ e.createElement("h5", null, "Nesting"), /* @__PURE__ */ e.createElement("p", null, "Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))
|
|
160
211
|
},
|
|
161
212
|
basic: {
|
|
162
213
|
label: "Basic card",
|
|
@@ -486,8 +537,8 @@ const R = {
|
|
|
486
537
|
}
|
|
487
538
|
}
|
|
488
539
|
}
|
|
489
|
-
},
|
|
490
|
-
components: [
|
|
540
|
+
}, te = {
|
|
541
|
+
components: [T, q],
|
|
491
542
|
examples: {
|
|
492
543
|
basic: {
|
|
493
544
|
label: "Basic Insight Cards",
|
|
@@ -732,8 +783,8 @@ const R = {
|
|
|
732
783
|
}
|
|
733
784
|
}
|
|
734
785
|
}
|
|
735
|
-
},
|
|
736
|
-
components: [
|
|
786
|
+
}, ae = {
|
|
787
|
+
components: [B],
|
|
737
788
|
examples: {
|
|
738
789
|
basic: {
|
|
739
790
|
label: "Basic",
|
|
@@ -812,19 +863,19 @@ const R = {
|
|
|
812
863
|
}
|
|
813
864
|
}
|
|
814
865
|
}
|
|
815
|
-
},
|
|
816
|
-
Cards:
|
|
817
|
-
"Insight Cards":
|
|
818
|
-
"Scrollable Container":
|
|
866
|
+
}, ie = {
|
|
867
|
+
Cards: ee,
|
|
868
|
+
"Insight Cards": te,
|
|
869
|
+
"Scrollable Container": ae
|
|
819
870
|
};
|
|
820
871
|
export {
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
872
|
+
k as Card,
|
|
873
|
+
C as CardFooter,
|
|
874
|
+
f as CardHeader,
|
|
875
|
+
y as CardTitle,
|
|
876
|
+
T as InsightCard,
|
|
877
|
+
Y as InsightCardIcons,
|
|
878
|
+
q as InsightCardSet,
|
|
879
|
+
ie as MANIFEST,
|
|
880
|
+
B as ScrollableContainer
|
|
830
881
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@sps-woodland/core"),require("react"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@spscommerce/i18n","@spscommerce/utils"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.Cards={},i.core,i.React,i.i18n,i.utils))})(this,function(i,t,x,v,r){"use strict";function B(a){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const s in a)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(a,s);Object.defineProperty(n,s,o.get?o:{enumerable:!0,get:()=>a[s]})}}return n.default=a,Object.freeze(n)}const e=B(x);var _="pkg_sps-woodland_cards__version_8_34_3__hash_1gxcp3j0";function u({children:a,className:n="",...s}){return e.createElement(t.CapContent,{className:t.cl(_,n),...s},a)}t.Metadata.set(u,{name:"CardFooter"});var S="pkg_sps-woodland_cards__version_8_34_3__hash_mxozo50";function p({children:a,className:n="",...s}){return e.createElement(t.CapContent,{className:t.cl(S,n),...s},a)}t.Metadata.set(p,{name:"CardHeader"});var q="pkg_sps-woodland_cards__version_8_34_3__hash_jyyttb0";function C({children:a,className:n,...s}){const[o,[d],h,g]=t.selectChildren(a,[{type:p},{custom:m=>t.Metadata.isWoodlandComponent(m)&&t.Metadata.get(m).name==="Tabs"},{type:u}]),c=t.useChildTestIdAttrBuilder(s);return e.createElement("div",{className:t.cl(q,n),...s},o,d?t.addProps(d,{context:"container"}):e.createElement(t.Content,{...c("body")},g),h)}t.Metadata.set(C,{name:"Card"});var E="pkg_sps-woodland_cards__version_8_34_3__hash_1f11ubh0";function b({children:a,className:n="",...s}){return e.createElement(t.CapContentTitle,{className:t.cl(E,n),...s},a)}t.Metadata.set(b,{name:"CardTitle"});const y=Object.freeze({general:"status-new",success:"status-ok",error:"status-error",warning:"status-warning",processing:"status-in-process"});function f({children:a,className:n,horizontal:s=!1,icon:o,kind:d="general",title:h,metric:g,partnerCount:c,totalPartners:m,...k}){const{t:w}=v.useWoodlandLanguage(),l=t.useChildTestIdAttrBuilder(k),[M,z,A]=(c?w("insightTile.partnerCount",{count:c,total:m,defaultValue:`${c} |of| ${m}`}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:t.cl("sps-insight-tile",`sps-insight-tile--${d}`,s&&"sps-insight-tile--horizontal",a&&"sps-insight-tile--has-detail",n),...k},e.createElement("div",{className:"sps-insight-tile__body",...l("body")},o?e.createElement("i",{className:`sps-icon sps-icon-${o}`,...l("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${y[d]}`,...l("icon")}),g&&e.createElement("div",{className:"sps-insight-tile__metric-count",...l("metric")},g),h&&e.createElement("div",{className:"sps-insight-tile__description",...l("description")},e.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"},...l("title")},h),e.createElement("div",{className:"sps-insight-tile__detail",...l("detail")},a))),c&&e.createElement("div",{className:"sps-insight-tile__partner-count",...l("partner-count")},c===m?e.createElement("div",null,w("insightTile.all",{defaultValue:"ALL"})):e.createElement(e.Fragment,null,e.createElement("div",null,M),e.createElement("div",null,z),e.createElement("div",null,A)),e.createElement("div",{className:"sps-insight-tile__partners-text"},w("insightTile.partners",{defaultValue:"PARTNERS"})))))}t.Metadata.set(f,{name:"InsightCard",props:{horizontal:{type:"boolean",default:"false"},icon:"IconName",kind:{type:"InsightCardKind",default:'"general"'},title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"}});function I({children:a,...n}){return e.createElement("div",{className:"insight-tile-wrapper",...n},a)}t.Metadata.set(I,{name:"InsightCardSet"});var N="pkg_sps-woodland_cards__version_8_34_3__hash_7b9vus0";function T({children:a,className:n,maxHeight:s,style:o,...d}){return e.createElement("div",{className:t.cl(N,n),style:{...o,maxHeight:s},...d},a)}t.Metadata.set(T,{name:"ScrollableContainer",props:{maxHeight:"string"}});const F={description:()=>e.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[C,u,p,b],examples:{general:{label:"General Usage",description:({Link:a,NavigateTo:n})=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Sizing and Layout"),e.createElement("p",null,"All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",e.createElement(a,{to:"/style-and-layout/grid"},"Woodland Grid")," and"," ",e.createElement(a,{to:"/style-and-layout/page-types"},"Page Layouts")," sections for more guidance on appropriate usage."),e.createElement("p",null,"The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),e.createElement("h5",null,"Text Content"),e.createElement("p",null,"The only text content that can exist outside of a Card is the"," ",e.createElement(n,{to:"page-title"},"Page Title")," component."),e.createElement("p",null,"All other content should exist inside of a Card and should adhere to the Woodland Design System ",e.createElement(a,{to:"/style-and-layout/typography"},"Typography")," rules."),e.createElement("h5",null,"Nesting"),e.createElement("p",null,"Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))},basic:{label:"Basic card",description:()=>e.createElement("p",null,"Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),examples:{basic:{react:r.code`
|
|
1
|
+
(function(o,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@sps-woodland/core"),require("react"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@spscommerce/i18n","@spscommerce/utils"],s):(o=typeof globalThis<"u"?globalThis:o||self,s(o.Cards={},o.core,o.React,o.i18n,o.utils))})(this,function(o,s,q,B,l){"use strict";function S(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(n,a,r.get?r:{enumerable:!0,get:()=>t[a]})}}return n.default=t,Object.freeze(n)}const e=S(q);var N="pkg_sps-woodland_cards__version_8_34_5__hash_1gxcp3j0";function g({children:t,className:n="",...a}){return e.createElement(s.CapContent,{className:s.cl(N,n),...a},t)}s.Metadata.set(g,{name:"CardFooter"});var E="pkg_sps-woodland_cards__version_8_34_5__hash_mxozo50";function C({children:t,className:n="",...a}){return e.createElement(s.CapContent,{className:s.cl(E,n),...a},t)}s.Metadata.set(C,{name:"CardHeader"});var P="pkg_sps-woodland_cards__version_8_34_5__hash_jyyttb0";function b({children:t,className:n,...a}){const[r,[i],m,_]=s.selectChildren(t,[{type:C},{custom:c=>s.Metadata.isWoodlandComponent(c)&&s.Metadata.get(c).name==="Tabs"},{type:g}]),d=s.useChildTestIdAttrBuilder(a);return e.createElement("div",{className:s.cl(P,n),...a},r,i?s.addProps(i,{context:"container"}):e.createElement(s.Content,{...d("body")},_),m)}s.Metadata.set(b,{name:"Card"});var D="pkg_sps-woodland_cards__version_8_34_5__hash_1f11ubh0";function v({children:t,className:n="",...a}){return e.createElement(s.CapContentTitle,{className:s.cl(D,n),...a},t)}s.Metadata.set(v,{name:"CardTitle"});function F(t,n,a){return n in t?Object.defineProperty(t,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[n]=a,t}function k(t,n){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);n&&(r=r.filter(function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable})),a.push.apply(a,r)}return a}function y(t){for(var n=1;n<arguments.length;n++){var a=arguments[n]!=null?arguments[n]:{};n%2?k(Object(a),!0).forEach(function(r){F(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):k(Object(a)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(a,r))})}return t}var O=(t,n,a)=>{for(var r of Object.keys(t)){var i;if(t[r]!==((i=n[r])!==null&&i!==void 0?i:a[r]))return!1}return!0},u=t=>n=>{var a=t.defaultClassName,r=y(y({},t.defaultVariants),n);for(var i in r){var m,_=(m=r[i])!==null&&m!==void 0?m:t.defaultVariants[i];if(_!=null){var d=_;typeof d=="boolean"&&(d=d===!0?"true":"false");var c=t.variantClassNames[i][d];c&&(a+=" "+c)}}for(var[f,h]of t.compoundVariants)O(f,r,t.defaultVariants)&&(a+=" "+h);return a},V="pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq0",z=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq2",error:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq3",success:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq4",warning:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq5",processing:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq6"},horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq7",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq8"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),H=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqa",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqb"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),j=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqi",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqj",error:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqk",success:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsql",warning:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqm",processing:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqn"},horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqo",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqp"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),M=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqq",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqr",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqs"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),A=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqt",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqu",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqv"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),W=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqw",variantClassNames:{hasDetail:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqx",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqy"}},defaultVariants:{hasDetail:!1},compoundVariants:[]}),R=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqz",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq10",error:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq11",success:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq12",warning:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq13",processing:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq14"},horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq15",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq16"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),U=u({defaultClassName:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq17",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq18",false:"pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq19"}},defaultVariants:{horizontal:!1},compoundVariants:[]});const T=Object.freeze({general:"status-new",success:"status-ok",error:"status-error",warning:"status-warning",processing:"status-in-process"});function I({children:t,className:n,horizontal:a=!1,icon:r,kind:i="general",title:m,metric:_,partnerCount:d,totalPartners:c,...f}){const{t:h}=B.useWoodlandLanguage(),p=s.useChildTestIdAttrBuilder(f),[$,Q,Y]=(d?h("insightTile.partnerCount",{count:d,total:c,defaultValue:`${d} |of| ${c}`}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:s.cl(z({kind:i,horizontal:a}),n),...f},e.createElement("div",{className:H({horizontal:a}),...p("body")},r?e.createElement(s.Icon,{icon:`${r}`,...p("icon")}):e.createElement(s.Icon,{icon:`${T[i]}`,...p("icon")}),_&&e.createElement("div",{className:j({kind:i,horizontal:a}),...p("metric")},_),m&&e.createElement("div",{className:A({horizontal:a}),...p("description")},e.createElement("div",{className:M({horizontal:a}),style:{"-webkit-box-orient":"vertical"},...p("title")},m),e.createElement("div",{className:W({hasDetail:!!t}),...p("detail")},t))),d&&e.createElement("div",{className:R({kind:i,horizontal:a}),...p("partner-count")},d===c?e.createElement("div",null,h("insightTile.all",{defaultValue:"ALL"})):e.createElement(e.Fragment,null,e.createElement("div",null,$),e.createElement("div",null,Q),e.createElement("div",null,Y)),e.createElement("div",{className:U({horizontal:a})},h("insightTile.partners",{defaultValue:"PARTNERS"})))))}s.Metadata.set(I,{name:"InsightCard",props:{horizontal:{type:"boolean",default:"false"},icon:"IconName",kind:{type:"InsightCardKind",default:'"general"'},title:"string",metric:"number | string",partnerCount:"number",totalPartners:"number"}});function w({children:t,...n}){return e.createElement("div",{className:V,...n},t)}s.Metadata.set(w,{name:"InsightCardSet"});var L="pkg_sps-woodland_cards__version_8_34_5__hash_7b9vus0";function x({children:t,className:n,maxHeight:a,style:r,...i}){return e.createElement("div",{className:s.cl(L,n),style:{...r,maxHeight:a},...i},t)}s.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const G={description:()=>e.createElement("p",null,"Cards are used to group similar or related content together in a single container. They can be combined with additional elements such as Headers, Footers, or Tabs."),components:[b,g,C,v],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:n})=>e.createElement(e.Fragment,null,e.createElement("h5",null,"Sizing and Layout"),e.createElement("p",null,"All varieties of Cards should be placed on the Woodland Grid (i.e. the width of a Card should span a specific number of grid columns). They should never be set to a custom width. See the ",e.createElement(t,{to:"/style-and-layout/grid"},"Woodland Grid")," and"," ",e.createElement(t,{to:"/style-and-layout/page-types"},"Page Layouts")," sections for more guidance on appropriate usage."),e.createElement("p",null,"The height of a Card should typically be based on the content inside of it, but in specific cases a fixed height can be set. For these cases, content will scroll vertically inside of the container."),e.createElement("h5",null,"Text Content"),e.createElement("p",null,"The only text content that can exist outside of a Card is the"," ",e.createElement(n,{to:"page-title"},"Page Title")," component."),e.createElement("p",null,"All other content should exist inside of a Card and should adhere to the Woodland Design System ",e.createElement(t,{to:"/style-and-layout/typography"},"Typography")," rules."),e.createElement("h5",null,"Nesting"),e.createElement("p",null,"Avoid nesting Cards inside of other Cards when possible. If nesting is necessary, avoid nesting more than one level deep (i.e. limit nesting to a Card inside of a Card)."))},basic:{label:"Basic card",description:()=>e.createElement("p",null,"Basic Cards can include any type of general content, such as body copy, description lists, or more complex content such as forms."),examples:{basic:{react:l.code`
|
|
2
2
|
import { Card } from "@sps-woodland/cards";
|
|
3
3
|
function Component() {
|
|
4
4
|
return (
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
</Card>
|
|
8
8
|
);
|
|
9
9
|
}
|
|
10
|
-
`},sections:{react:
|
|
10
|
+
`},sections:{react:l.code`
|
|
11
11
|
import { Card } from "@sps-woodland/cards";
|
|
12
12
|
function Component() {
|
|
13
13
|
return (
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
</Card>
|
|
42
42
|
);
|
|
43
43
|
}
|
|
44
|
-
`},nestedSections:{react:
|
|
44
|
+
`},nestedSections:{react:l.code`
|
|
45
45
|
import { Card } from "@sps-woodland/cards";
|
|
46
46
|
function Component() {
|
|
47
47
|
return (
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</Card>
|
|
64
64
|
);
|
|
65
65
|
}
|
|
66
|
-
`}}},headers:{label:"Card + Header",description:()=>e.createElement("p",null,"Headers can be attached to a Card to display a title (that describes the content inside the card) or add actions (buttons or links) that relate directly to the content inside of the card. Content is restricted to the left side (for titles) and right side (for actions) of the Header."),examples:{title:{react:
|
|
66
|
+
`}}},headers:{label:"Card + Header",description:()=>e.createElement("p",null,"Headers can be attached to a Card to display a title (that describes the content inside the card) or add actions (buttons or links) that relate directly to the content inside of the card. Content is restricted to the left side (for titles) and right side (for actions) of the Header."),examples:{title:{react:l.code`
|
|
67
67
|
import { Button } from "@sps-woodland/buttons";
|
|
68
68
|
import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
|
|
69
69
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
</Card>
|
|
94
94
|
);
|
|
95
95
|
}
|
|
96
|
-
`}}},footers:{label:"Card + Footer",description:()=>e.createElement("p",null,"Footers can be attached to a Card to add secondary actions (buttons or links) that relate directly to the content inside of it, or other types of general content that may be applicable. Content can be placed in the middle or either side of the Footer."),examples:{basicFooter:{react:
|
|
96
|
+
`}}},footers:{label:"Card + Footer",description:()=>e.createElement("p",null,"Footers can be attached to a Card to add secondary actions (buttons or links) that relate directly to the content inside of it, or other types of general content that may be applicable. Content can be placed in the middle or either side of the Footer."),examples:{basicFooter:{react:l.code`
|
|
97
97
|
import { Button } from "@sps-woodland/buttons";
|
|
98
98
|
import { Card, CardFooter } from "@sps-woodland/cards";
|
|
99
99
|
import { Box } from "@sps-woodland/core";
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
</Card>
|
|
118
118
|
);
|
|
119
119
|
}
|
|
120
|
-
`}}},tabbed:{label:"Card + Tabs",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use Tabs to combine multiple cards with unique but related content. Tabs can include optional details such as icons or tags."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabsOnly:{react:
|
|
120
|
+
`}}},tabbed:{label:"Card + Tabs",description:()=>e.createElement(e.Fragment,null,e.createElement("p",null,"Use Tabs to combine multiple cards with unique but related content. Tabs can include optional details such as icons or tags."),e.createElement("p",null,e.createElement("code",null,"<Item>")," comes from the ",e.createElement("code",null,"@react-stately/collections"),"package, which is a peer dependency of our React components.")),examples:{tabsOnly:{react:l.code`
|
|
121
121
|
import { Card } from "@sps-woodland/cards";
|
|
122
122
|
import { Box, Icon } from "@sps-woodland/core";
|
|
123
123
|
import { Tabs } from "@sps-woodland/tabs";
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
</Card>
|
|
172
172
|
);
|
|
173
173
|
}
|
|
174
|
-
`},activeTabInput:{react:
|
|
174
|
+
`},activeTabInput:{react:l.code`
|
|
175
175
|
import { Card } from "@sps-woodland/cards";
|
|
176
176
|
import { Tabs } from "@sps-woodland/tabs";
|
|
177
177
|
import { Item } from "@react-stately/collections";
|
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
</Card>
|
|
193
193
|
);
|
|
194
194
|
}
|
|
195
|
-
`}}},everything:{label:"Card + Header + Footer + Tabs",description:()=>e.createElement("p",null,"Headers, Footers, and Tabs can be attached to Cards in any combination."),examples:{everything:{react:
|
|
195
|
+
`}}},everything:{label:"Card + Header + Footer + Tabs",description:()=>e.createElement("p",null,"Headers, Footers, and Tabs can be attached to Cards in any combination."),examples:{everything:{react:l.code`
|
|
196
196
|
import { SpsTag } from "@spscommerce/ds-react";
|
|
197
197
|
import { Button } from "@sps-woodland/buttons";
|
|
198
198
|
import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
</Card>
|
|
272
272
|
);
|
|
273
273
|
}
|
|
274
|
-
`}}}}},
|
|
274
|
+
`}}}}},K={components:[I,w],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:l.code`
|
|
275
275
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
276
276
|
function Component() {
|
|
277
277
|
return (
|
|
@@ -304,7 +304,7 @@
|
|
|
304
304
|
</InsightCardSet>
|
|
305
305
|
);
|
|
306
306
|
}
|
|
307
|
-
`}}},details:{label:"With Details",examples:{details:{react:
|
|
307
|
+
`}}},details:{label:"With Details",examples:{details:{react:l.code`
|
|
308
308
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
309
309
|
import { Box } from "@sps-woodland/core";
|
|
310
310
|
function Component() {
|
|
@@ -338,7 +338,7 @@
|
|
|
338
338
|
</InsightCardSet>
|
|
339
339
|
);
|
|
340
340
|
}
|
|
341
|
-
`}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:
|
|
341
|
+
`}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:l.code`
|
|
342
342
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
343
343
|
function Component() {
|
|
344
344
|
return (
|
|
@@ -381,7 +381,7 @@
|
|
|
381
381
|
</InsightCardSet>
|
|
382
382
|
);
|
|
383
383
|
}
|
|
384
|
-
`}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:
|
|
384
|
+
`}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:l.code`
|
|
385
385
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
386
386
|
function Component() {
|
|
387
387
|
return (
|
|
@@ -419,7 +419,7 @@
|
|
|
419
419
|
</InsightCardSet>
|
|
420
420
|
);
|
|
421
421
|
}
|
|
422
|
-
`}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:
|
|
422
|
+
`}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:l.code`
|
|
423
423
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
424
424
|
function Component() {
|
|
425
425
|
return (
|
|
@@ -473,7 +473,7 @@
|
|
|
473
473
|
</InsightCardSet>
|
|
474
474
|
);
|
|
475
475
|
}
|
|
476
|
-
`}}}}},
|
|
476
|
+
`}}}}},J={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:l.code`
|
|
477
477
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
478
478
|
function Component() {
|
|
479
479
|
return (
|
|
@@ -516,7 +516,7 @@
|
|
|
516
516
|
</Card>
|
|
517
517
|
);
|
|
518
518
|
}
|
|
519
|
-
`},components:{react:
|
|
519
|
+
`},components:{react:l.code`
|
|
520
520
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
521
521
|
import { SpsClickableTag } from "@spscommerce/ds-react";
|
|
522
522
|
function Component() {
|
|
@@ -537,4 +537,4 @@
|
|
|
537
537
|
</Card>
|
|
538
538
|
);
|
|
539
539
|
}
|
|
540
|
-
`}}}}},
|
|
540
|
+
`}}}}},X={Cards:G,"Insight Cards":K,"Scrollable Container":J};o.Card=b,o.CardFooter=g,o.CardHeader=C,o.CardTitle=v,o.InsightCard=I,o.InsightCardIcons=T,o.InsightCardSet=w,o.MANIFEST=X,o.ScrollableContainer=x,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Tokens } from "@sps-woodland/tokens";
|
|
2
|
+
import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
|
|
3
|
+
export type InsightCardKind = keyof (typeof Tokens.component)["insight-card"]["kind"];
|
|
4
|
+
interface InsightCardVariantDefinitions extends VariantDefinitions {
|
|
5
|
+
kind: RecipeVariant<InsightCardKind>;
|
|
6
|
+
horizontal: BooleanRecipeVariant;
|
|
7
|
+
hasDetail: BooleanRecipeVariant;
|
|
8
|
+
}
|
|
9
|
+
export declare const insightCardWrapper: string;
|
|
10
|
+
export declare const insightCard: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
|
|
11
|
+
export declare const insightCardBody: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
|
|
12
|
+
export declare const insightCardIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "kind">>;
|
|
13
|
+
export declare const insightCardMetricCount: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
|
|
14
|
+
export declare const insightCardTitle: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
|
|
15
|
+
export declare const insightCardDescription: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
|
|
16
|
+
export declare const insightCardDetail: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "hasDetail">>;
|
|
17
|
+
export declare const insightCardPartnerCount: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal" | "kind">>;
|
|
18
|
+
export declare const insightCardPartnersText: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<InsightCardVariantDefinitions, "horizontal">>;
|
|
19
|
+
export {};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_cards__version_8_34_5__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_8_34_5__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_8_34_5__hash_mxozo50 svg{margin-bottom:0}.pkg_sps-woodland_cards__version_8_34_5__hash_jyyttb0{background-clip:border-box;background-color:#fff;border-color:#d2d4d4;border-radius:.25rem;border-style:solid;border-width:.0625rem;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_34_5__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1{background:#fff;border-width:.0625rem;border-style:solid;border-radius:.25rem;display:block;flex:1 0 calc(20% - 20px);margin:.5rem;min-width:0;padding:.9375rem 1.25rem;text-align:center}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq2:hover{background:#007db8}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq3:hover{background:#de002e}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq4:hover{background:#0b8940}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq5:hover{background:#e7760b}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq6:hover{background:#91467f}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq7{display:flex;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9{display:block;min-width:0}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqa{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqd{color:#007db8}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqe{color:#de002e}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqf{color:#0b8940}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqg{color:#e7760b}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqh{color:#91467f}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqi{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqj{color:#007db8}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqk{color:#de002e}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsql{color:#0b8940}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqm{color:#e7760b}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqn{color:#91467f}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqo{margin-left:.5rem;order:1}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqq{-webkit-box-orient:vertical;-webkit-box-pack:center;align-items:center;color:#1f282c;display:-webkit-box;font-weight:600;min-height:2.125rem;font-size:1rem;line-height:1rem;padding-bottom:.125rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqw{color:#4b5356;display:none;height:12px;font-size:.75rem;line-height:.75rem;margin-top:.25rem;text-transform:uppercase;white-space:nowrap}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqx{display:block}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqz{color:#fff;font-weight:600;font-size:.75rem;line-height:1.125rem;margin:.9375rem -1.25rem -.9375rem;padding:.625rem 1.25rem}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq10{background:#007db8}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq11{background:#de002e}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq12{background:#0b8940}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq13{background:#e7760b}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq14{background:#91467f}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq15{display:flex;flex-direction:column;justify-content:center;line-height:.875rem;margin:-.9375rem -1.25rem -.9375rem 1.25rem;padding:1.25rem .625rem;width:3.75rem}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq18{display:none!important}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqz>*{display:inline-block}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1:hover{cursor:pointer}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1:hover>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9>.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqt>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq1:hover>.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsq9>.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqt>.pkg_sps-woodland_cards__version_8_34_5__hash_1l3fxsqw>*{color:#fff!important}.pkg_sps-woodland_cards__version_8_34_5__hash_7b9vus0{overflow:scroll;background-attachment:local,local,scroll,scroll;background-color:#fff;background-image:linear-gradient(0deg,#fff,#fff0),linear-gradient(180deg,#fff,#fff0),linear-gradient(0deg,#00000026,#fff0),linear-gradient(180deg,#00000026,#fff0);background-position:100% 100%,0 0,100% 100%,0 0;background-repeat:no-repeat;background-size:100% 3.125rem,100% 3.125rem,100% .625rem,100% .625rem;display:block;overflow-x:hidden;overflow-y:auto}.pkg_sps-woodland_cards__version_8_34_5__hash_7b9vus0 .sps-clickable-tag{background-color:#acd4e84d}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/cards",
|
|
3
3
|
"description": "SPS Woodland Design System card, insight card, and scrollable container components",
|
|
4
|
-
"version": "8.34.
|
|
4
|
+
"version": "8.34.5",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
|
|
@@ -29,20 +29,22 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.34.
|
|
33
|
-
"@sps-woodland/tokens": "8.34.
|
|
34
|
-
"@spscommerce/i18n": "8.34.
|
|
32
|
+
"@sps-woodland/core": "8.34.5",
|
|
33
|
+
"@sps-woodland/tokens": "8.34.5",
|
|
34
|
+
"@spscommerce/i18n": "8.34.5"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@react-stately/collections": "^3.6.0",
|
|
38
38
|
"@spscommerce/utils": "^7.0.0",
|
|
39
39
|
"@vanilla-extract/css": "^1.9.3",
|
|
40
|
+
"@vanilla-extract/recipes": "^0.2.5",
|
|
41
|
+
"@vanilla-extract/css-utils": "^0.1.3",
|
|
40
42
|
"react": "^16.14.0",
|
|
41
43
|
"react-dom": "^16.14.0",
|
|
42
|
-
"@sps-woodland/core": "8.34.
|
|
43
|
-
"@sps-woodland/tabs": "8.34.
|
|
44
|
-
"@sps-woodland/tokens": "8.34.
|
|
45
|
-
"@spscommerce/i18n": "8.34.
|
|
44
|
+
"@sps-woodland/core": "8.34.5",
|
|
45
|
+
"@sps-woodland/tabs": "8.34.5",
|
|
46
|
+
"@sps-woodland/tokens": "8.34.5",
|
|
47
|
+
"@spscommerce/i18n": "8.34.5"
|
|
46
48
|
},
|
|
47
49
|
"scripts": {
|
|
48
50
|
"build": "pnpm run build:js && pnpm run build:types",
|