@sps-woodland/cards 8.33.10 → 8.34.0
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 +56 -55
- package/lib/index.umd.cjs +4 -4
- package/lib/style.css +1 -1
- package/package.json +8 -6
package/lib/index.js
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import { Metadata as s, CapContent as
|
|
1
|
+
import { Metadata as s, CapContent as f, cl as m, selectChildren as S, useChildTestIdAttrBuilder as I, addProps as E, Content as q, CapContentTitle as N } from "@sps-woodland/core";
|
|
2
2
|
import * as e from "react";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { useWoodlandLanguage as F } from "@spscommerce/i18n";
|
|
4
|
+
import { code as i } from "@spscommerce/utils";
|
|
5
|
+
var P = "pkg_sps-woodland_cards__version_8_34_0__hash_1gxcp3j0";
|
|
5
6
|
function g({
|
|
6
7
|
children: t,
|
|
7
8
|
className: a = "",
|
|
8
|
-
...
|
|
9
|
+
...n
|
|
9
10
|
}) {
|
|
10
|
-
return /* @__PURE__ */ e.createElement(
|
|
11
|
+
return /* @__PURE__ */ e.createElement(f, { className: m(P, a), ...n }, t);
|
|
11
12
|
}
|
|
12
13
|
s.set(g, { name: "CardFooter" });
|
|
13
|
-
var H = "pkg_sps-
|
|
14
|
+
var H = "pkg_sps-woodland_cards__version_8_34_0__hash_mxozo50";
|
|
14
15
|
function C({
|
|
15
16
|
children: t,
|
|
16
17
|
className: a = "",
|
|
17
|
-
...
|
|
18
|
+
...n
|
|
18
19
|
}) {
|
|
19
|
-
return /* @__PURE__ */ e.createElement(
|
|
20
|
+
return /* @__PURE__ */ e.createElement(f, { className: m(H, a), ...n }, t);
|
|
20
21
|
}
|
|
21
22
|
s.set(C, { name: "CardHeader" });
|
|
22
|
-
var D = "pkg_sps-
|
|
23
|
+
var D = "pkg_sps-woodland_cards__version_8_34_0__hash_jyyttb0";
|
|
23
24
|
function x({
|
|
24
25
|
children: t,
|
|
25
26
|
className: a,
|
|
26
|
-
...
|
|
27
|
+
...n
|
|
27
28
|
}) {
|
|
28
29
|
const [
|
|
29
30
|
d,
|
|
@@ -36,20 +37,20 @@ function x({
|
|
|
36
37
|
custom: (c) => s.isWoodlandComponent(c) && s.get(c).name === "Tabs"
|
|
37
38
|
},
|
|
38
39
|
{ type: g }
|
|
39
|
-
]), l =
|
|
40
|
-
return /* @__PURE__ */ e.createElement("div", { className: m(D, a), ...
|
|
40
|
+
]), l = I(n);
|
|
41
|
+
return /* @__PURE__ */ e.createElement("div", { className: m(D, a), ...n }, d, o ? E(o, { context: "container" }) : /* @__PURE__ */ e.createElement(q, { ...l("body") }, p), u);
|
|
41
42
|
}
|
|
42
43
|
s.set(x, { name: "Card" });
|
|
43
|
-
var z = "pkg_sps-
|
|
44
|
+
var z = "pkg_sps-woodland_cards__version_8_34_0__hash_1f11ubh0";
|
|
44
45
|
function k({
|
|
45
46
|
children: t,
|
|
46
47
|
className: a = "",
|
|
47
|
-
...
|
|
48
|
+
...n
|
|
48
49
|
}) {
|
|
49
|
-
return /* @__PURE__ */ e.createElement(N, { className: m(z, a), ...
|
|
50
|
+
return /* @__PURE__ */ e.createElement(N, { className: m(z, a), ...n }, t);
|
|
50
51
|
}
|
|
51
52
|
s.set(k, { name: "CardTitle" });
|
|
52
|
-
const
|
|
53
|
+
const W = Object.freeze({
|
|
53
54
|
general: "status-new",
|
|
54
55
|
success: "status-ok",
|
|
55
56
|
error: "status-error",
|
|
@@ -59,7 +60,7 @@ const A = Object.freeze({
|
|
|
59
60
|
function w({
|
|
60
61
|
children: t,
|
|
61
62
|
className: a,
|
|
62
|
-
horizontal:
|
|
63
|
+
horizontal: n = !1,
|
|
63
64
|
icon: d,
|
|
64
65
|
kind: o = "general",
|
|
65
66
|
title: u,
|
|
@@ -68,11 +69,11 @@ function w({
|
|
|
68
69
|
totalPartners: c,
|
|
69
70
|
...b
|
|
70
71
|
}) {
|
|
71
|
-
const { t: h } =
|
|
72
|
-
|
|
72
|
+
const { t: h } = F(), r = I(b), [
|
|
73
|
+
y,
|
|
73
74
|
B,
|
|
74
75
|
_
|
|
75
|
-
] = (l ? h("
|
|
76
|
+
] = (l ? h("insightTile.partnerCount", {
|
|
76
77
|
count: l,
|
|
77
78
|
total: c,
|
|
78
79
|
defaultValue: `${l} |of| ${c}`
|
|
@@ -83,13 +84,13 @@ function w({
|
|
|
83
84
|
className: m(
|
|
84
85
|
"sps-insight-tile",
|
|
85
86
|
`sps-insight-tile--${o}`,
|
|
86
|
-
|
|
87
|
+
n && "sps-insight-tile--horizontal",
|
|
87
88
|
t && "sps-insight-tile--has-detail",
|
|
88
89
|
a
|
|
89
90
|
),
|
|
90
91
|
...b
|
|
91
92
|
},
|
|
92
|
-
/* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__body", ...r("body") }, d ? /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${d}`, ...r("icon") }) : /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${
|
|
93
|
+
/* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__body", ...r("body") }, d ? /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${d}`, ...r("icon") }) : /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${W[o]}`, ...r("icon") }), p && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__metric-count", ...r("metric") }, p), u && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__description", ...r("description") }, /* @__PURE__ */ e.createElement(
|
|
93
94
|
"div",
|
|
94
95
|
{
|
|
95
96
|
className: "sps-insight-tile__title",
|
|
@@ -98,7 +99,7 @@ function w({
|
|
|
98
99
|
},
|
|
99
100
|
u
|
|
100
101
|
), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__detail", ...r("detail") }, t))),
|
|
101
|
-
l && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...r("partner-count") }, l === c ? /* @__PURE__ */ e.createElement("div", null, h("
|
|
102
|
+
l && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...r("partner-count") }, l === c ? /* @__PURE__ */ e.createElement("div", null, h("insightTile.all", { defaultValue: "ALL" })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, y), /* @__PURE__ */ e.createElement("div", null, B), /* @__PURE__ */ e.createElement("div", null, _)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("insightTile.partners", { defaultValue: "PARTNERS" })))
|
|
102
103
|
));
|
|
103
104
|
}
|
|
104
105
|
s.set(w, {
|
|
@@ -113,32 +114,32 @@ s.set(w, {
|
|
|
113
114
|
totalPartners: "number"
|
|
114
115
|
}
|
|
115
116
|
});
|
|
116
|
-
function
|
|
117
|
+
function v({
|
|
117
118
|
children: t,
|
|
118
119
|
...a
|
|
119
120
|
}) {
|
|
120
121
|
return /* @__PURE__ */ e.createElement("div", { className: "insight-tile-wrapper", ...a }, t);
|
|
121
122
|
}
|
|
122
|
-
s.set(
|
|
123
|
-
var
|
|
124
|
-
function
|
|
123
|
+
s.set(v, { name: "InsightCardSet" });
|
|
124
|
+
var A = "pkg_sps-woodland_cards__version_8_34_0__hash_7b9vus0";
|
|
125
|
+
function T({
|
|
125
126
|
children: t,
|
|
126
127
|
className: a,
|
|
127
|
-
maxHeight:
|
|
128
|
+
maxHeight: n,
|
|
128
129
|
style: d,
|
|
129
130
|
...o
|
|
130
131
|
}) {
|
|
131
132
|
return /* @__PURE__ */ e.createElement(
|
|
132
133
|
"div",
|
|
133
134
|
{
|
|
134
|
-
className: m(
|
|
135
|
-
style: { ...d, maxHeight:
|
|
135
|
+
className: m(A, a),
|
|
136
|
+
style: { ...d, maxHeight: n },
|
|
136
137
|
...o
|
|
137
138
|
},
|
|
138
139
|
t
|
|
139
140
|
);
|
|
140
141
|
}
|
|
141
|
-
s.set(
|
|
142
|
+
s.set(T, {
|
|
142
143
|
name: "ScrollableContainer",
|
|
143
144
|
props: {
|
|
144
145
|
maxHeight: "string"
|
|
@@ -162,7 +163,7 @@ const R = {
|
|
|
162
163
|
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."),
|
|
163
164
|
examples: {
|
|
164
165
|
basic: {
|
|
165
|
-
react:
|
|
166
|
+
react: i`
|
|
166
167
|
import { Card } from "@sps-woodland/cards";
|
|
167
168
|
function Component() {
|
|
168
169
|
return (
|
|
@@ -174,7 +175,7 @@ const R = {
|
|
|
174
175
|
`
|
|
175
176
|
},
|
|
176
177
|
sections: {
|
|
177
|
-
react:
|
|
178
|
+
react: i`
|
|
178
179
|
import { Card } from "@sps-woodland/cards";
|
|
179
180
|
function Component() {
|
|
180
181
|
return (
|
|
@@ -211,7 +212,7 @@ const R = {
|
|
|
211
212
|
`
|
|
212
213
|
},
|
|
213
214
|
nestedSections: {
|
|
214
|
-
react:
|
|
215
|
+
react: i`
|
|
215
216
|
import { Card } from "@sps-woodland/cards";
|
|
216
217
|
function Component() {
|
|
217
218
|
return (
|
|
@@ -242,7 +243,7 @@ const R = {
|
|
|
242
243
|
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."),
|
|
243
244
|
examples: {
|
|
244
245
|
title: {
|
|
245
|
-
react:
|
|
246
|
+
react: i`
|
|
246
247
|
import { Button } from "@sps-woodland/buttons";
|
|
247
248
|
import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
|
|
248
249
|
import { Icon } from "@sps-woodland/core";
|
|
@@ -281,7 +282,7 @@ const R = {
|
|
|
281
282
|
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."),
|
|
282
283
|
examples: {
|
|
283
284
|
basicFooter: {
|
|
284
|
-
react:
|
|
285
|
+
react: i`
|
|
285
286
|
import { Button } from "@sps-woodland/buttons";
|
|
286
287
|
import { Card, CardFooter } from "@sps-woodland/cards";
|
|
287
288
|
import { Box } from "@sps-woodland/core";
|
|
@@ -314,7 +315,7 @@ const R = {
|
|
|
314
315
|
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.")),
|
|
315
316
|
examples: {
|
|
316
317
|
tabsOnly: {
|
|
317
|
-
react:
|
|
318
|
+
react: i`
|
|
318
319
|
import { Card } from "@sps-woodland/cards";
|
|
319
320
|
import { Box, Icon } from "@sps-woodland/core";
|
|
320
321
|
import { Tabs } from "@sps-woodland/tabs";
|
|
@@ -371,7 +372,7 @@ const R = {
|
|
|
371
372
|
`
|
|
372
373
|
},
|
|
373
374
|
activeTabInput: {
|
|
374
|
-
react:
|
|
375
|
+
react: i`
|
|
375
376
|
import { Card } from "@sps-woodland/cards";
|
|
376
377
|
import { Tabs } from "@sps-woodland/tabs";
|
|
377
378
|
import { Item } from "@react-stately/collections";
|
|
@@ -401,7 +402,7 @@ const R = {
|
|
|
401
402
|
description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
|
|
402
403
|
examples: {
|
|
403
404
|
everything: {
|
|
404
|
-
react:
|
|
405
|
+
react: i`
|
|
405
406
|
import { SpsTag } from "@spscommerce/ds-react";
|
|
406
407
|
import { Button } from "@sps-woodland/buttons";
|
|
407
408
|
import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
|
|
@@ -486,13 +487,13 @@ const R = {
|
|
|
486
487
|
}
|
|
487
488
|
}
|
|
488
489
|
}, U = {
|
|
489
|
-
components: [w,
|
|
490
|
+
components: [w, v],
|
|
490
491
|
examples: {
|
|
491
492
|
basic: {
|
|
492
493
|
label: "Basic Insight Cards",
|
|
493
494
|
examples: {
|
|
494
495
|
basic: {
|
|
495
|
-
react:
|
|
496
|
+
react: i`
|
|
496
497
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
497
498
|
function Component() {
|
|
498
499
|
return (
|
|
@@ -533,7 +534,7 @@ const R = {
|
|
|
533
534
|
label: "With Details",
|
|
534
535
|
examples: {
|
|
535
536
|
details: {
|
|
536
|
-
react:
|
|
537
|
+
react: i`
|
|
537
538
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
538
539
|
import { Box } from "@sps-woodland/core";
|
|
539
540
|
function Component() {
|
|
@@ -575,7 +576,7 @@ const R = {
|
|
|
575
576
|
label: "Partner Count",
|
|
576
577
|
examples: {
|
|
577
578
|
partnerCount: {
|
|
578
|
-
react:
|
|
579
|
+
react: i`
|
|
579
580
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
580
581
|
function Component() {
|
|
581
582
|
return (
|
|
@@ -626,7 +627,7 @@ const R = {
|
|
|
626
627
|
label: "Using alternate icons",
|
|
627
628
|
examples: {
|
|
628
629
|
alternateIcons: {
|
|
629
|
-
react:
|
|
630
|
+
react: i`
|
|
630
631
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
631
632
|
function Component() {
|
|
632
633
|
return (
|
|
@@ -672,7 +673,7 @@ const R = {
|
|
|
672
673
|
label: "Horizontal",
|
|
673
674
|
examples: {
|
|
674
675
|
horizontal: {
|
|
675
|
-
react:
|
|
676
|
+
react: i`
|
|
676
677
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
677
678
|
function Component() {
|
|
678
679
|
return (
|
|
@@ -731,15 +732,15 @@ const R = {
|
|
|
731
732
|
}
|
|
732
733
|
}
|
|
733
734
|
}
|
|
734
|
-
},
|
|
735
|
-
components: [
|
|
735
|
+
}, L = {
|
|
736
|
+
components: [T],
|
|
736
737
|
examples: {
|
|
737
738
|
basic: {
|
|
738
739
|
label: "Basic",
|
|
739
740
|
description: "Basic scrollable container",
|
|
740
741
|
examples: {
|
|
741
742
|
text: {
|
|
742
|
-
react:
|
|
743
|
+
react: i`
|
|
743
744
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
744
745
|
function Component() {
|
|
745
746
|
return (
|
|
@@ -785,7 +786,7 @@ const R = {
|
|
|
785
786
|
`
|
|
786
787
|
},
|
|
787
788
|
components: {
|
|
788
|
-
react:
|
|
789
|
+
react: i`
|
|
789
790
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
790
791
|
import { SpsClickableTag } from "@spscommerce/ds-react";
|
|
791
792
|
function Component() {
|
|
@@ -811,10 +812,10 @@ const R = {
|
|
|
811
812
|
}
|
|
812
813
|
}
|
|
813
814
|
}
|
|
814
|
-
},
|
|
815
|
+
}, G = {
|
|
815
816
|
Cards: R,
|
|
816
817
|
"Insight Cards": U,
|
|
817
|
-
"Scrollable Container":
|
|
818
|
+
"Scrollable Container": L
|
|
818
819
|
};
|
|
819
820
|
export {
|
|
820
821
|
x as Card,
|
|
@@ -822,8 +823,8 @@ export {
|
|
|
822
823
|
C as CardHeader,
|
|
823
824
|
k as CardTitle,
|
|
824
825
|
w as InsightCard,
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
826
|
+
W as InsightCardIcons,
|
|
827
|
+
v as InsightCardSet,
|
|
828
|
+
G as MANIFEST,
|
|
829
|
+
T as ScrollableContainer
|
|
829
830
|
};
|
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/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@spscommerce/utils"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.Cards={},i.core,i.React,i.utils))})(this,function(i,t,
|
|
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_0__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_0__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_0__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_0__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_0__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`
|
|
2
2
|
import { Card } from "@sps-woodland/cards";
|
|
3
3
|
function Component() {
|
|
4
4
|
return (
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
</Card>
|
|
272
272
|
);
|
|
273
273
|
}
|
|
274
|
-
`}}}}},
|
|
274
|
+
`}}}}},P={components:[f,I],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:r.code`
|
|
275
275
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
276
276
|
function Component() {
|
|
277
277
|
return (
|
|
@@ -473,7 +473,7 @@
|
|
|
473
473
|
</InsightCardSet>
|
|
474
474
|
);
|
|
475
475
|
}
|
|
476
|
-
`}}}}},
|
|
476
|
+
`}}}}},D={components:[T],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:r.code`
|
|
477
477
|
import { Card, ScrollableContainer } from "@sps-woodland/cards";
|
|
478
478
|
function Component() {
|
|
479
479
|
return (
|
|
@@ -537,4 +537,4 @@
|
|
|
537
537
|
</Card>
|
|
538
538
|
);
|
|
539
539
|
}
|
|
540
|
-
`}}}}},
|
|
540
|
+
`}}}}},H={Cards:F,"Insight Cards":P,"Scrollable Container":D};i.Card=C,i.CardFooter=u,i.CardHeader=p,i.CardTitle=b,i.InsightCard=f,i.InsightCardIcons=y,i.InsightCardSet=I,i.MANIFEST=H,i.ScrollableContainer=T,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_cards__version_8_34_0__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_8_34_0__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_8_34_0__hash_mxozo50 svg{margin-bottom:0}.pkg_sps-woodland_cards__version_8_34_0__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_0__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_8_34_0__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_0__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.
|
|
4
|
+
"version": "8.34.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
|
|
@@ -29,8 +29,9 @@
|
|
|
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.
|
|
33
|
-
"@sps-woodland/tokens": "8.
|
|
32
|
+
"@sps-woodland/core": "8.34.0",
|
|
33
|
+
"@sps-woodland/tokens": "8.34.0",
|
|
34
|
+
"@spscommerce/i18n": "8.34.0"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
36
37
|
"@react-stately/collections": "^3.6.0",
|
|
@@ -38,9 +39,10 @@
|
|
|
38
39
|
"@vanilla-extract/css": "^1.9.3",
|
|
39
40
|
"react": "^16.14.0",
|
|
40
41
|
"react-dom": "^16.14.0",
|
|
41
|
-
"@sps-woodland/core": "8.
|
|
42
|
-
"@sps-woodland/tabs": "8.
|
|
43
|
-
"@sps-woodland/tokens": "8.
|
|
42
|
+
"@sps-woodland/core": "8.34.0",
|
|
43
|
+
"@sps-woodland/tabs": "8.34.0",
|
|
44
|
+
"@sps-woodland/tokens": "8.34.0",
|
|
45
|
+
"@spscommerce/i18n": "8.34.0"
|
|
44
46
|
},
|
|
45
47
|
"scripts": {
|
|
46
48
|
"build": "pnpm run build:js && pnpm run build:types",
|