@sps-woodland/cards 8.50.2 → 8.51.1
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/README.md +46 -1
- package/lib/index.d.ts +3 -7
- package/lib/index.js +38 -236
- package/lib/index.umd.cjs +17 -17
- package/lib/style.css +3 -1
- package/package.json +6 -13
- package/vite.config.mjs +7 -13
- package/lib/card/card/Card.css.d.ts +0 -1
- package/lib/card/card/Card.d.ts +0 -3
- package/lib/card/card-footer/CardFooter.css.d.ts +0 -1
- package/lib/card/card-footer/CardFooter.d.ts +0 -3
- package/lib/card/card-header/CardHeader.css.d.ts +0 -1
- package/lib/card/card-header/CardHeader.d.ts +0 -3
- package/lib/card/card-title/CardTitle.css.d.ts +0 -1
- package/lib/card/card-title/CardTitle.d.ts +0 -3
- package/lib/insight-card/InsightCard.css.d.ts +0 -19
- package/lib/insight-card/InsightCard.d.ts +0 -14
- package/lib/insight-card/InsightCardSet.d.ts +0 -2
- package/lib/scrollable-container/ScrollableContainer.css.d.ts +0 -1
- package/lib/scrollable-container/ScrollableContainer.d.ts +0 -5
package/README.md
CHANGED
|
@@ -1,3 +1,48 @@
|
|
|
1
1
|
## [@sps-woodland/cards](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/cards#readme)
|
|
2
2
|
|
|
3
|
-
SPS Woodland Design System card, insight card, and scrollable container components
|
|
3
|
+
SPS Woodland Design System card, insight card, and scrollable container components.
|
|
4
|
+
|
|
5
|
+
> **Heads up — this is a wrapper package.** The component source now lives in
|
|
6
|
+
> [`@sps-woodland/core`](../react), split into **three independent families**:
|
|
7
|
+
> `cards`, `insight-card`, and `scrollable-container`. This package re-exports
|
|
8
|
+
> from all three so existing imports keep working, but new code should prefer
|
|
9
|
+
> the mono-package paths.
|
|
10
|
+
|
|
11
|
+
### Why three families and not one?
|
|
12
|
+
|
|
13
|
+
The legacy `@sps-woodland/cards` wrapper bundled three semantically distinct
|
|
14
|
+
things: layout cards (`Card`, `CardHeader`, `CardFooter`, `CardTitle`), data
|
|
15
|
+
display widgets (`InsightCard`, `InsightCardSet`), and a layout utility
|
|
16
|
+
(`ScrollableContainer`). They share no code. `InsightCard`'s CSS alone is
|
|
17
|
+
roughly 9× the size of the entire Card family combined. Splitting them lets a
|
|
18
|
+
consumer who only needs `Card` ship just Card's styles, not InsightCard's.
|
|
19
|
+
|
|
20
|
+
### Preferred imports (mono-package)
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
// Cards (layout container family)
|
|
24
|
+
import { Card, CardHeader, CardFooter, CardTitle } from "@sps-woodland/core/cards";
|
|
25
|
+
import "@sps-woodland/core/cards/style.css";
|
|
26
|
+
|
|
27
|
+
// Insight cards (data-display widget family — migrated to @sps-woodland/core)
|
|
28
|
+
import { InsightCard, InsightCardSet } from "@sps-woodland/core/insight-card";
|
|
29
|
+
import "@sps-woodland/core/insight-card/style.css";
|
|
30
|
+
|
|
31
|
+
// Scrollable container (layout utility)
|
|
32
|
+
import { ScrollableContainer } from "@sps-woodland/core/scrollable-container";
|
|
33
|
+
import "@sps-woodland/core/scrollable-container/style.css";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Card pieces also have their own flat subpaths if you only need one:
|
|
37
|
+
`@sps-woodland/core/card`, `/card-header`, `/card-footer`, `/card-title`.
|
|
38
|
+
|
|
39
|
+
### Legacy imports (still supported)
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import {
|
|
43
|
+
Card, CardHeader, CardFooter, CardTitle,
|
|
44
|
+
InsightCard, InsightCardSet,
|
|
45
|
+
ScrollableContainer,
|
|
46
|
+
} from "@sps-woodland/cards";
|
|
47
|
+
import "@sps-woodland/cards/style.css"; // concatenated bundle of all three
|
|
48
|
+
```
|
package/lib/index.d.ts
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
export * from "
|
|
2
|
-
export * from "
|
|
3
|
-
export * from "
|
|
4
|
-
export * from "./card/card-title/CardTitle";
|
|
5
|
-
export * from "./insight-card/InsightCard";
|
|
6
|
-
export * from "./insight-card/InsightCardSet";
|
|
7
|
-
export * from "./scrollable-container/ScrollableContainer";
|
|
1
|
+
export * from "@sps-woodland/core/cards";
|
|
2
|
+
export * from "@sps-woodland/core/insight-card";
|
|
3
|
+
export * from "@sps-woodland/core/scrollable-container";
|
|
8
4
|
export * from "./manifest";
|
package/lib/index.js
CHANGED
|
@@ -1,220 +1,30 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Card as n, CardFooter as o, CardHeader as r, CardTitle as s } from "@sps-woodland/core/cards";
|
|
2
|
+
export * from "@sps-woodland/core/cards";
|
|
3
|
+
import { InsightCard as l, InsightCardSet as d } from "@sps-woodland/core/insight-card";
|
|
4
|
+
export * from "@sps-woodland/core/insight-card";
|
|
5
|
+
import { ScrollableContainer as c } from "@sps-woodland/core/scrollable-container";
|
|
6
|
+
export * from "@sps-woodland/core/scrollable-container";
|
|
2
7
|
import * as e from "react";
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
var O = "pkg_sps-woodland_cards__version_8_50_2__hash_1gxcp3j0";
|
|
6
|
-
function C({
|
|
7
|
-
children: t,
|
|
8
|
-
className: s = "",
|
|
9
|
-
...a
|
|
10
|
-
}) {
|
|
11
|
-
return /* @__PURE__ */ e.createElement(w, { className: _(O, s), ...a }, t);
|
|
12
|
-
}
|
|
13
|
-
d.set(C, { name: "CardFooter" });
|
|
14
|
-
var H = "pkg_sps-woodland_cards__version_8_50_2__hash_mxozo50";
|
|
15
|
-
function f({
|
|
16
|
-
children: t,
|
|
17
|
-
className: s = "",
|
|
18
|
-
...a
|
|
19
|
-
}) {
|
|
20
|
-
return /* @__PURE__ */ e.createElement(w, { className: _(H, s), ...a }, t);
|
|
21
|
-
}
|
|
22
|
-
d.set(f, { name: "CardHeader" });
|
|
23
|
-
var j = "pkg_sps-woodland_cards__version_8_50_2__hash_jyyttb0";
|
|
24
|
-
function k({
|
|
25
|
-
children: t,
|
|
26
|
-
className: s,
|
|
27
|
-
...a
|
|
28
|
-
}) {
|
|
29
|
-
const [
|
|
30
|
-
n,
|
|
31
|
-
[r],
|
|
32
|
-
c,
|
|
33
|
-
p
|
|
34
|
-
] = P(t, [
|
|
35
|
-
{ type: f },
|
|
36
|
-
{
|
|
37
|
-
custom: (l) => d.isWoodlandComponent(l) && d.get(l).name === "Tabs"
|
|
38
|
-
},
|
|
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
|
-
}
|
|
43
|
-
d.set(k, { name: "Card" });
|
|
44
|
-
var W = "pkg_sps-woodland_cards__version_8_50_2__hash_1f11ubh0";
|
|
45
|
-
function y({
|
|
46
|
-
children: t,
|
|
47
|
-
className: s = "",
|
|
48
|
-
...a
|
|
49
|
-
}) {
|
|
50
|
-
return /* @__PURE__ */ e.createElement(V, { className: _(W, s), ...a }, t);
|
|
51
|
-
}
|
|
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
|
-
}, u = (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
|
-
}, L = "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq0", U = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq2", error: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq3", success: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq4", warning: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq5", processing: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq6" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq7", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq8" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), M = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqa", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqb" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), G = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqi", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqj", error: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqk", success: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsql", warning: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqm", processing: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqn" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqo", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqp" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), K = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqq", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqr", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqs" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), $ = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqt", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqu", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqv" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] }), J = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqw", variantClassNames: { hasDetail: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqx", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqy" } }, defaultVariants: { hasDetail: !1 }, compoundVariants: [] }), X = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqz", variantClassNames: { kind: { general: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq10", error: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq11", success: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq12", warning: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq13", processing: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq14" }, horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq15", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq16" } }, defaultVariants: { kind: "general", horizontal: !1 }, compoundVariants: [] }), Q = u({ defaultClassName: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq17", variantClassNames: { horizontal: { true: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq18", false: "pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq19" } }, defaultVariants: { horizontal: !1 }, compoundVariants: [] });
|
|
107
|
-
const Y = Object.freeze({
|
|
108
|
-
general: "status-new",
|
|
109
|
-
success: "status-ok",
|
|
110
|
-
error: "status-error",
|
|
111
|
-
warning: "status-warning",
|
|
112
|
-
processing: "status-in-process"
|
|
113
|
-
});
|
|
114
|
-
function T({
|
|
115
|
-
children: t,
|
|
116
|
-
className: s,
|
|
117
|
-
horizontal: a = !1,
|
|
118
|
-
icon: n,
|
|
119
|
-
kind: r = "general",
|
|
120
|
-
title: c,
|
|
121
|
-
metric: p,
|
|
122
|
-
partnerCount: o,
|
|
123
|
-
totalPartners: l,
|
|
124
|
-
...g
|
|
125
|
-
}) {
|
|
126
|
-
const { t: h } = z(), m = x(g), [
|
|
127
|
-
S,
|
|
128
|
-
E,
|
|
129
|
-
N
|
|
130
|
-
] = (o ? h("insightTile.partnerCount", {
|
|
131
|
-
count: o,
|
|
132
|
-
total: l,
|
|
133
|
-
defaultValue: `${o} |of| ${l}`
|
|
134
|
-
}) : "").split("|");
|
|
135
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
136
|
-
"div",
|
|
137
|
-
{
|
|
138
|
-
className: _(
|
|
139
|
-
U({ kind: r, horizontal: a }),
|
|
140
|
-
s
|
|
141
|
-
),
|
|
142
|
-
...g
|
|
143
|
-
},
|
|
144
|
-
/* @__PURE__ */ e.createElement("div", { className: M({ horizontal: a }), ...m("body") }, n ? /* @__PURE__ */ e.createElement(b, { icon: `${n}`, ...m("icon") }) : /* @__PURE__ */ e.createElement(b, { icon: `${Y[r]}`, ...m("icon") }), p && /* @__PURE__ */ e.createElement("div", { className: G({ kind: r, horizontal: a }), ...m("metric") }, p), c && /* @__PURE__ */ e.createElement("div", { className: $({ horizontal: a }), ...m("description") }, /* @__PURE__ */ e.createElement(
|
|
145
|
-
"div",
|
|
146
|
-
{
|
|
147
|
-
className: K({ horizontal: a }),
|
|
148
|
-
style: { "-webkit-box-orient": "vertical" },
|
|
149
|
-
...m("title")
|
|
150
|
-
},
|
|
151
|
-
c
|
|
152
|
-
), /* @__PURE__ */ e.createElement("div", { className: J({ hasDetail: !!t }), ...m("detail") }, t))),
|
|
153
|
-
o && /* @__PURE__ */ e.createElement("div", { className: X({ kind: r, horizontal: a }), ...m("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" })))
|
|
154
|
-
));
|
|
155
|
-
}
|
|
156
|
-
d.set(T, {
|
|
157
|
-
name: "InsightCard",
|
|
158
|
-
props: {
|
|
159
|
-
horizontal: { type: "boolean", default: "false" },
|
|
160
|
-
icon: "IconName",
|
|
161
|
-
kind: { type: "InsightCardKind", default: '"general"' },
|
|
162
|
-
title: "string",
|
|
163
|
-
metric: "number | string",
|
|
164
|
-
partnerCount: "number",
|
|
165
|
-
totalPartners: "number"
|
|
166
|
-
}
|
|
167
|
-
});
|
|
168
|
-
function q({
|
|
169
|
-
children: t,
|
|
170
|
-
...s
|
|
171
|
-
}) {
|
|
172
|
-
return /* @__PURE__ */ e.createElement("div", { className: L, ...s }, t);
|
|
173
|
-
}
|
|
174
|
-
d.set(q, { name: "InsightCardSet" });
|
|
175
|
-
var Z = "pkg_sps-woodland_cards__version_8_50_2__hash_7b9vus0";
|
|
176
|
-
function B({
|
|
177
|
-
children: t,
|
|
178
|
-
className: s,
|
|
179
|
-
maxHeight: a,
|
|
180
|
-
style: n,
|
|
181
|
-
...r
|
|
182
|
-
}) {
|
|
183
|
-
return /* @__PURE__ */ e.createElement(
|
|
184
|
-
"div",
|
|
185
|
-
{
|
|
186
|
-
className: _(Z, s),
|
|
187
|
-
style: { ...n, maxHeight: a },
|
|
188
|
-
...r
|
|
189
|
-
},
|
|
190
|
-
t
|
|
191
|
-
);
|
|
192
|
-
}
|
|
193
|
-
d.set(B, {
|
|
194
|
-
name: "ScrollableContainer",
|
|
195
|
-
props: {
|
|
196
|
-
maxHeight: "string"
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
const ee = {
|
|
8
|
+
import { code as t } from "@spscommerce/utils";
|
|
9
|
+
const m = {
|
|
200
10
|
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."),
|
|
201
11
|
components: [
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
12
|
+
n,
|
|
13
|
+
o,
|
|
14
|
+
r,
|
|
15
|
+
s
|
|
206
16
|
],
|
|
207
17
|
examples: {
|
|
208
18
|
general: {
|
|
209
19
|
label: "General Usage",
|
|
210
|
-
description: ({ Link:
|
|
20
|
+
description: ({ Link: a, NavigateTo: i }) => /* @__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(a, { to: "/style-and-layout/grid" }, "Woodland Grid"), " and", " ", /* @__PURE__ */ e.createElement(a, { 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(i, { 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(a, { 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)."))
|
|
211
21
|
},
|
|
212
22
|
basic: {
|
|
213
23
|
label: "Basic card",
|
|
214
24
|
description: () => /* @__PURE__ */ 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."),
|
|
215
25
|
examples: {
|
|
216
26
|
basic: {
|
|
217
|
-
react:
|
|
27
|
+
react: t`
|
|
218
28
|
import { Card } from "@sps-woodland/cards";
|
|
219
29
|
function Component() {
|
|
220
30
|
return (
|
|
@@ -226,7 +36,7 @@ const ee = {
|
|
|
226
36
|
`
|
|
227
37
|
},
|
|
228
38
|
sections: {
|
|
229
|
-
react:
|
|
39
|
+
react: t`
|
|
230
40
|
import { Card } from "@sps-woodland/cards";
|
|
231
41
|
function Component() {
|
|
232
42
|
return (
|
|
@@ -263,7 +73,7 @@ const ee = {
|
|
|
263
73
|
`
|
|
264
74
|
},
|
|
265
75
|
nestedSections: {
|
|
266
|
-
react:
|
|
76
|
+
react: t`
|
|
267
77
|
import { Card } from "@sps-woodland/cards";
|
|
268
78
|
function Component() {
|
|
269
79
|
return (
|
|
@@ -294,7 +104,7 @@ const ee = {
|
|
|
294
104
|
description: () => /* @__PURE__ */ 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."),
|
|
295
105
|
examples: {
|
|
296
106
|
title: {
|
|
297
|
-
react:
|
|
107
|
+
react: t`
|
|
298
108
|
import { Button } from "@sps-woodland/buttons";
|
|
299
109
|
import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
|
|
300
110
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -333,7 +143,7 @@ const ee = {
|
|
|
333
143
|
description: () => /* @__PURE__ */ 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."),
|
|
334
144
|
examples: {
|
|
335
145
|
basicFooter: {
|
|
336
|
-
react:
|
|
146
|
+
react: t`
|
|
337
147
|
import { Button } from "@sps-woodland/buttons";
|
|
338
148
|
import { Card, CardFooter } from "@sps-woodland/cards";
|
|
339
149
|
import { Box } from "@sps-woodland/core";
|
|
@@ -366,7 +176,7 @@ const ee = {
|
|
|
366
176
|
description: () => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ 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."), /* @__PURE__ */ e.createElement("p", null, /* @__PURE__ */ e.createElement("code", null, "<Item>"), " comes from the ", /* @__PURE__ */ e.createElement("code", null, "@react-stately/collections"), "package, which is a peer dependency of our React components.")),
|
|
367
177
|
examples: {
|
|
368
178
|
tabsOnly: {
|
|
369
|
-
react:
|
|
179
|
+
react: t`
|
|
370
180
|
import { Card } from "@sps-woodland/cards";
|
|
371
181
|
import { Box, Icon } from "@sps-woodland/core";
|
|
372
182
|
import { Tabs } from "@sps-woodland/tabs";
|
|
@@ -423,7 +233,7 @@ const ee = {
|
|
|
423
233
|
`
|
|
424
234
|
},
|
|
425
235
|
activeTabInput: {
|
|
426
|
-
react:
|
|
236
|
+
react: t`
|
|
427
237
|
import { Card } from "@sps-woodland/cards";
|
|
428
238
|
import { Tabs } from "@sps-woodland/tabs";
|
|
429
239
|
import { Item } from "@react-stately/collections";
|
|
@@ -448,7 +258,7 @@ const ee = {
|
|
|
448
258
|
},
|
|
449
259
|
scrollable: {
|
|
450
260
|
description: () => /* @__PURE__ */ e.createElement("p", null, "When the list of tabs is wider than its container, the tabs become horizontally scrollable and chevron buttons appear on each side to scroll the tabs into view. The buttons are only shown when there is more content to scroll toward in that direction. Tab titles can also include icons or tags alongside the label."),
|
|
451
|
-
react:
|
|
261
|
+
react: t`
|
|
452
262
|
import { SpsTag } from "@spscommerce/ds-react";
|
|
453
263
|
import { Card } from "@sps-woodland/cards";
|
|
454
264
|
import { Box, Icon } from "@sps-woodland/core";
|
|
@@ -496,7 +306,7 @@ const ee = {
|
|
|
496
306
|
description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
|
|
497
307
|
examples: {
|
|
498
308
|
everything: {
|
|
499
|
-
react:
|
|
309
|
+
react: t`
|
|
500
310
|
import { SpsTag } from "@spscommerce/ds-react";
|
|
501
311
|
import { Button } from "@sps-woodland/buttons";
|
|
502
312
|
import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
|
|
@@ -580,14 +390,14 @@ const ee = {
|
|
|
580
390
|
}
|
|
581
391
|
}
|
|
582
392
|
}
|
|
583
|
-
},
|
|
584
|
-
components: [
|
|
393
|
+
}, u = {
|
|
394
|
+
components: [l, d],
|
|
585
395
|
examples: {
|
|
586
396
|
basic: {
|
|
587
397
|
label: "Basic Insight Cards",
|
|
588
398
|
examples: {
|
|
589
399
|
basic: {
|
|
590
|
-
react:
|
|
400
|
+
react: t`
|
|
591
401
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
592
402
|
function Component() {
|
|
593
403
|
return (
|
|
@@ -628,7 +438,7 @@ const ee = {
|
|
|
628
438
|
label: "With Details",
|
|
629
439
|
examples: {
|
|
630
440
|
details: {
|
|
631
|
-
react:
|
|
441
|
+
react: t`
|
|
632
442
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
633
443
|
import { Box } from "@sps-woodland/core";
|
|
634
444
|
function Component() {
|
|
@@ -670,7 +480,7 @@ const ee = {
|
|
|
670
480
|
label: "Partner Count",
|
|
671
481
|
examples: {
|
|
672
482
|
partnerCount: {
|
|
673
|
-
react:
|
|
483
|
+
react: t`
|
|
674
484
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
675
485
|
function Component() {
|
|
676
486
|
return (
|
|
@@ -721,7 +531,7 @@ const ee = {
|
|
|
721
531
|
label: "Using alternate icons",
|
|
722
532
|
examples: {
|
|
723
533
|
alternateIcons: {
|
|
724
|
-
react:
|
|
534
|
+
react: t`
|
|
725
535
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
726
536
|
function Component() {
|
|
727
537
|
return (
|
|
@@ -767,7 +577,7 @@ const ee = {
|
|
|
767
577
|
label: "Horizontal",
|
|
768
578
|
examples: {
|
|
769
579
|
horizontal: {
|
|
770
|
-
react:
|
|
580
|
+
react: t`
|
|
771
581
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
772
582
|
function Component() {
|
|
773
583
|
return (
|
|
@@ -826,15 +636,15 @@ const ee = {
|
|
|
826
636
|
}
|
|
827
637
|
}
|
|
828
638
|
}
|
|
829
|
-
},
|
|
830
|
-
components: [
|
|
639
|
+
}, p = {
|
|
640
|
+
components: [c],
|
|
831
641
|
examples: {
|
|
832
642
|
basic: {
|
|
833
643
|
label: "Basic",
|
|
834
644
|
description: "Basic scrollable container",
|
|
835
645
|
examples: {
|
|
836
646
|
text: {
|
|
837
|
-
react:
|
|
647
|
+
react: t`
|
|
838
648
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
839
649
|
function Component() {
|
|
840
650
|
return (
|
|
@@ -880,7 +690,7 @@ const ee = {
|
|
|
880
690
|
`
|
|
881
691
|
},
|
|
882
692
|
components: {
|
|
883
|
-
react:
|
|
693
|
+
react: t`
|
|
884
694
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
885
695
|
import { SpsClickableTag } from "@spscommerce/ds-react";
|
|
886
696
|
function Component() {
|
|
@@ -906,19 +716,11 @@ const ee = {
|
|
|
906
716
|
}
|
|
907
717
|
}
|
|
908
718
|
}
|
|
909
|
-
},
|
|
910
|
-
Cards:
|
|
911
|
-
"Insight Cards":
|
|
912
|
-
"Scrollable Container":
|
|
719
|
+
}, I = {
|
|
720
|
+
Cards: m,
|
|
721
|
+
"Insight Cards": u,
|
|
722
|
+
"Scrollable Container": p
|
|
913
723
|
};
|
|
914
724
|
export {
|
|
915
|
-
|
|
916
|
-
C as CardFooter,
|
|
917
|
-
f as CardHeader,
|
|
918
|
-
y as CardTitle,
|
|
919
|
-
T as InsightCard,
|
|
920
|
-
Y as InsightCardIcons,
|
|
921
|
-
q as InsightCardSet,
|
|
922
|
-
ie as MANIFEST,
|
|
923
|
-
B as ScrollableContainer
|
|
725
|
+
I as MANIFEST
|
|
924
726
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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_50_2__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_50_2__hash_mxozo50";function f({children:t,className:n="",...a}){return e.createElement(s.CapContent,{className:s.cl(E,n),...a},t)}s.Metadata.set(f,{name:"CardHeader"});var P="pkg_sps-woodland_cards__version_8_50_2__hash_jyyttb0";function b({children:t,className:n,...a}){const[r,[i],u,_]=s.selectChildren(t,[{type:f},{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")},_),u)}s.Metadata.set(b,{name:"Card"});var D="pkg_sps-woodland_cards__version_8_50_2__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},m=t=>n=>{var a=t.defaultClassName,r=y(y({},t.defaultVariants),n);for(var i in r){var u,_=(u=r[i])!==null&&u!==void 0?u: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[C,h]of t.compoundVariants)O(C,r,t.defaultVariants)&&(a+=" "+h);return a},V="pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq0",z=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq1",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq2",error:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq3",success:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq4",warning:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq5",processing:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq6"},horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq7",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq8"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),H=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq9",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqa",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqb"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),j=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqi",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqj",error:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqk",success:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsql",warning:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqm",processing:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqn"},horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqo",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqp"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),M=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqq",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqr",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqs"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),A=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqt",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqu",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqv"}},defaultVariants:{horizontal:!1},compoundVariants:[]}),W=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqw",variantClassNames:{hasDetail:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqx",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqy"}},defaultVariants:{hasDetail:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsqz",variantClassNames:{kind:{general:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq10",error:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq11",success:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq12",warning:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq13",processing:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq14"},horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq15",false:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq16"}},defaultVariants:{kind:"general",horizontal:!1},compoundVariants:[]}),L=m({defaultClassName:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq17",variantClassNames:{horizontal:{true:"pkg_sps-woodland_cards__version_8_50_2__hash_1l3fxsq18",false:"pkg_sps-woodland_cards__version_8_50_2__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:u,metric:_,partnerCount:d,totalPartners:c,...C}){const{t:h}=B.useWoodlandLanguage(),p=s.useChildTestIdAttrBuilder(C),[X,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),...C},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")},_),u&&e.createElement("div",{className:A({horizontal:a}),...p("description")},e.createElement("div",{className:M({horizontal:a}),style:{"-webkit-box-orient":"vertical"},...p("title")},u),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,X),e.createElement("div",null,Q),e.createElement("div",null,Y)),e.createElement("div",{className:L({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 U="pkg_sps-woodland_cards__version_8_50_2__hash_7b9vus0";function x({children:t,className:n,maxHeight:a,style:r,...i}){return e.createElement("div",{className:s.cl(U,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,f,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`
|
|
1
|
+
(function(a,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@sps-woodland/core/cards"),require("@sps-woodland/core/insight-card"),require("@sps-woodland/core/scrollable-container"),require("react"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/cards","@sps-woodland/core/insight-card","@sps-woodland/core/scrollable-container","react","@spscommerce/utils"],i):(a=typeof globalThis<"u"?globalThis:a||self,i(a.Cards={},a.cards,a.insightCard,a.scrollableContainer,a.React,a.utils))})(this,(function(a,i,r,l,c,n){"use strict";function m(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const d=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(o,s,d.get?d:{enumerable:!0,get:()=>t[s]})}}return o.default=t,Object.freeze(o)}const e=m(c),u={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:[i.Card,i.CardFooter,i.CardHeader,i.CardTitle],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:o})=>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(o,{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:n.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:n.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:n.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:n.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:n.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:n.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:n.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
|
-
`},scrollable:{description:()=>e.createElement("p",null,"When the list of tabs is wider than its container, the tabs become horizontally scrollable and chevron buttons appear on each side to scroll the tabs into view. The buttons are only shown when there is more content to scroll toward in that direction. Tab titles can also include icons or tags alongside the label."),react:
|
|
195
|
+
`},scrollable:{description:()=>e.createElement("p",null,"When the list of tabs is wider than its container, the tabs become horizontally scrollable and chevron buttons appear on each side to scroll the tabs into view. The buttons are only shown when there is more content to scroll toward in that direction. Tab titles can also include icons or tags alongside the label."),react:n.code`
|
|
196
196
|
import { SpsTag } from "@spscommerce/ds-react";
|
|
197
197
|
import { Card } from "@sps-woodland/cards";
|
|
198
198
|
import { Box, Icon } from "@sps-woodland/core";
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
</Card>
|
|
232
232
|
);
|
|
233
233
|
}
|
|
234
|
-
`}}},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:
|
|
234
|
+
`}}},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:n.code`
|
|
235
235
|
import { SpsTag } from "@spscommerce/ds-react";
|
|
236
236
|
import { Button } from "@sps-woodland/buttons";
|
|
237
237
|
import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
|
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
</Card>
|
|
311
311
|
);
|
|
312
312
|
}
|
|
313
|
-
`}}}}},
|
|
313
|
+
`}}}}},p={components:[r.InsightCard,r.InsightCardSet],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:n.code`
|
|
314
314
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
315
315
|
function Component() {
|
|
316
316
|
return (
|
|
@@ -343,7 +343,7 @@
|
|
|
343
343
|
</InsightCardSet>
|
|
344
344
|
);
|
|
345
345
|
}
|
|
346
|
-
`}}},details:{label:"With Details",examples:{details:{react:
|
|
346
|
+
`}}},details:{label:"With Details",examples:{details:{react:n.code`
|
|
347
347
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
348
348
|
import { Box } from "@sps-woodland/core";
|
|
349
349
|
function Component() {
|
|
@@ -377,7 +377,7 @@
|
|
|
377
377
|
</InsightCardSet>
|
|
378
378
|
);
|
|
379
379
|
}
|
|
380
|
-
`}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:
|
|
380
|
+
`}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:n.code`
|
|
381
381
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
382
382
|
function Component() {
|
|
383
383
|
return (
|
|
@@ -420,7 +420,7 @@
|
|
|
420
420
|
</InsightCardSet>
|
|
421
421
|
);
|
|
422
422
|
}
|
|
423
|
-
`}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:
|
|
423
|
+
`}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:n.code`
|
|
424
424
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
425
425
|
function Component() {
|
|
426
426
|
return (
|
|
@@ -458,7 +458,7 @@
|
|
|
458
458
|
</InsightCardSet>
|
|
459
459
|
);
|
|
460
460
|
}
|
|
461
|
-
`}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:
|
|
461
|
+
`}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:n.code`
|
|
462
462
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
463
463
|
function Component() {
|
|
464
464
|
return (
|
|
@@ -512,7 +512,7 @@
|
|
|
512
512
|
</InsightCardSet>
|
|
513
513
|
);
|
|
514
514
|
}
|
|
515
|
-
`}}}}}
|
|
515
|
+
`}}}}},h={components:[l.ScrollableContainer],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:n.code`
|
|
516
516
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
517
517
|
function Component() {
|
|
518
518
|
return (
|
|
@@ -555,7 +555,7 @@
|
|
|
555
555
|
</Card>
|
|
556
556
|
);
|
|
557
557
|
}
|
|
558
|
-
`},components:{react:
|
|
558
|
+
`},components:{react:n.code`
|
|
559
559
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
560
560
|
import { SpsClickableTag } from "@spscommerce/ds-react";
|
|
561
561
|
function Component() {
|
|
@@ -576,4 +576,4 @@
|
|
|
576
576
|
</Card>
|
|
577
577
|
);
|
|
578
578
|
}
|
|
579
|
-
`}}}}},
|
|
579
|
+
`}}}}},g={Cards:u,"Insight Cards":p,"Scrollable Container":h};a.MANIFEST=g,Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>i[t]})}),Object.keys(r).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>r[t]})}),Object.keys(l).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>l[t]})}),Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/lib/style.css
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_core__version_8_51_1__hash_jj9br00{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_core__version_8_51_1__hash_171xmyc0{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_core__version_8_51_1__hash_171xmyc0 svg{margin-bottom:0}.pkg_sps-woodland_core__version_8_51_1__hash_1yomitg0{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_core__version_8_51_1__hash_1c9yfku0{font-weight:600}
|
|
2
|
+
.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1{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_core__version_8_51_1__hash_z81y4l2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l2:hover{background:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l3:hover{background:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l4:hover{background:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l5:hover{background:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l6:hover{background:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l7{display:flex;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9{display:block;min-width:0}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4la{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4ld{color:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4le{color:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lf{color:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lg{color:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lh{color:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4li{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lj{color:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lk{color:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4ll{color:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lm{color:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4ln{color:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lo{margin-left:.5rem;order:1}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lq{-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_core__version_8_51_1__hash_z81y4lr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lw{color:#4b5356;display:none;height:12px;font-size:.75rem;line-height:.75rem;margin-top:.25rem;text-transform:uppercase;white-space:nowrap}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lx{display:block}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lz{color:#fff;font-weight:600;font-size:.75rem;line-height:1.125rem;margin:.9375rem -1.25rem -.9375rem;padding:.625rem 1.25rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l10{background:#007db8}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l11{background:#de002e}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l12{background:#0b8940}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l13{background:#e7760b}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l14{background:#91467f}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l15{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_core__version_8_51_1__hash_z81y4l18{display:none!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lz>*{display:inline-block}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover{cursor:pointer}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lt>*{color:#fff!important}.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l1:hover>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4l9>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lt>.pkg_sps-woodland_core__version_8_51_1__hash_z81y4lw>*{color:#fff!important}
|
|
3
|
+
.pkg_sps-woodland_core__version_8_51_1__hash_xsjxqv0{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_core__version_8_51_1__hash_xsjxqv0 .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.
|
|
4
|
+
"version": "8.51.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"import": "./lib/index.js",
|
|
18
18
|
"default": "./lib/index.js"
|
|
19
19
|
},
|
|
20
|
+
"./style.css": "./lib/style.css",
|
|
20
21
|
"./lib/style.css": {
|
|
21
22
|
"import": "./lib/style.css",
|
|
22
23
|
"require": "./lib/style.css"
|
|
@@ -26,31 +27,23 @@
|
|
|
26
27
|
"access": "public"
|
|
27
28
|
},
|
|
28
29
|
"peerDependencies": {
|
|
29
|
-
"@react-stately/collections": "^3.0.0",
|
|
30
30
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
31
31
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
32
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tokens": "8.50.2",
|
|
35
|
-
"@spscommerce/i18n": "8.50.2"
|
|
33
|
+
"@sps-woodland/core": "8.51.1"
|
|
36
34
|
},
|
|
37
35
|
"devDependencies": {
|
|
38
36
|
"@react-stately/collections": "3.12.10",
|
|
39
37
|
"@spscommerce/utils": "9.0.3",
|
|
40
|
-
"@vanilla-extract/css": "1.17.4",
|
|
41
|
-
"@vanilla-extract/css-utils": "0.1.3",
|
|
42
|
-
"@vanilla-extract/recipes": "0.2.5",
|
|
43
38
|
"react": "16.14.0",
|
|
44
39
|
"react-dom": "16.14.0",
|
|
45
|
-
"@sps-woodland/core": "8.
|
|
46
|
-
"@sps-woodland/tabs": "8.50.2",
|
|
47
|
-
"@sps-woodland/tokens": "8.50.2",
|
|
48
|
-
"@spscommerce/i18n": "8.50.2"
|
|
40
|
+
"@sps-woodland/core": "8.51.1"
|
|
49
41
|
},
|
|
50
42
|
"scripts": {
|
|
51
|
-
"build": "pnpm run build:js && pnpm run build:types",
|
|
43
|
+
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|
|
52
44
|
"build:js": "vite build",
|
|
53
45
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
46
|
+
"build:css": "cat ../core/lib/cards/style.css ../core/lib/insight-card/style.css ../core/lib/scrollable-container/style.css > lib/style.css 2>/dev/null || echo 'one or more cards-family style.css files not found, skipping'",
|
|
54
47
|
"watch": "vite build --watch",
|
|
55
48
|
"clean": "git clean -fdX",
|
|
56
49
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,31 +1,25 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
-
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
3
2
|
import { defineConfig } from "vite";
|
|
4
|
-
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
5
3
|
import pkg from "./package.json";
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
// Cards is now a wrapper package that re-exports from @sps-woodland/core.
|
|
6
|
+
// It aggregates three mono-package families: cards, insight-card, scrollable-container.
|
|
7
|
+
// No vanilla-extract needed - CSS is provided by the mono-package.
|
|
8
|
+
|
|
9
|
+
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
8
10
|
|
|
9
11
|
export default defineConfig({
|
|
10
|
-
plugins: [
|
|
11
|
-
vanillaExtractPlugin(
|
|
12
|
-
getVanillaExtractPluginProps({
|
|
13
|
-
packageName: pkg.name,
|
|
14
|
-
packageVersion,
|
|
15
|
-
})
|
|
16
|
-
),
|
|
17
|
-
],
|
|
18
12
|
build: {
|
|
19
13
|
lib: {
|
|
20
14
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
21
15
|
name: "Cards",
|
|
22
16
|
fileName: "index",
|
|
23
|
-
cssFileName: "style",
|
|
24
17
|
},
|
|
25
18
|
outDir: path.resolve(__dirname, "./lib"),
|
|
26
19
|
emptyOutDir: false,
|
|
27
20
|
rollupOptions: {
|
|
28
|
-
|
|
21
|
+
// External must match subpath imports like @sps-woodland/core/card
|
|
22
|
+
external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
|
|
29
23
|
},
|
|
30
24
|
},
|
|
31
25
|
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const card: string;
|
package/lib/card/card/Card.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const cardFooter: string;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const cardHeader: string;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const cardTitle: string;
|
|
@@ -1,19 +0,0 @@
|
|
|
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 {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps } from "@sps-woodland/core";
|
|
2
|
-
import type { IconName } from "@sps-woodland/tokens";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
export type InsightCardKind = "general" | "success" | "error" | "warning" | "processing";
|
|
5
|
-
export declare const InsightCardIcons: Record<InsightCardKind, IconName>;
|
|
6
|
-
export declare function InsightCard({ children, className, horizontal, icon, kind, title, metric, partnerCount, totalPartners, ...rest }: ComponentProps<{
|
|
7
|
-
horizontal?: boolean;
|
|
8
|
-
icon?: IconName;
|
|
9
|
-
kind?: InsightCardKind;
|
|
10
|
-
title?: string;
|
|
11
|
-
metric?: number | string;
|
|
12
|
-
partnerCount?: number;
|
|
13
|
-
totalPartners?: number;
|
|
14
|
-
}, HTMLDivElement>): React.ReactElement;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const scrollableContainer: string;
|