@sps-woodland/cards 8.26.1 → 8.26.2
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 +32 -31
- package/lib/index.umd.cjs +2 -2
- package/lib/style.css +1 -1
- package/package.json +6 -6
package/lib/index.js
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import { Metadata as s, CapContent as I, cl as
|
|
1
|
+
import { Metadata as s, CapContent as I, cl as m, selectChildren as S, useChildTestIdAttrBuilder as f, addProps as E, Content as q, CapContentTitle as N, I18nContext as F } from "@sps-woodland/core";
|
|
2
2
|
import * as e from "react";
|
|
3
3
|
import { code as n } from "@spscommerce/utils";
|
|
4
|
-
var P = "pkg_sps-
|
|
4
|
+
var P = "pkg_sps-woodland_cards__version_8_26_2__hash_1gxcp3j0";
|
|
5
5
|
function g({
|
|
6
6
|
children: t,
|
|
7
7
|
className: a = "",
|
|
8
8
|
...i
|
|
9
9
|
}) {
|
|
10
|
-
return /* @__PURE__ */ e.createElement(I, { className:
|
|
10
|
+
return /* @__PURE__ */ e.createElement(I, { className: m(P, a), ...i }, t);
|
|
11
11
|
}
|
|
12
12
|
s.set(g, { name: "CardFooter" });
|
|
13
|
-
var H = "pkg_sps-
|
|
13
|
+
var H = "pkg_sps-woodland_cards__version_8_26_2__hash_mxozo50";
|
|
14
14
|
function C({
|
|
15
15
|
children: t,
|
|
16
16
|
className: a = "",
|
|
17
17
|
...i
|
|
18
18
|
}) {
|
|
19
|
-
return /* @__PURE__ */ e.createElement(I, { className:
|
|
19
|
+
return /* @__PURE__ */ e.createElement(I, { className: m(H, a), ...i }, t);
|
|
20
20
|
}
|
|
21
21
|
s.set(C, { name: "CardHeader" });
|
|
22
|
-
var D = "pkg_sps-
|
|
22
|
+
var D = "pkg_sps-woodland_cards__version_8_26_2__hash_jyyttb0";
|
|
23
23
|
function x({
|
|
24
24
|
children: t,
|
|
25
25
|
className: a,
|
|
26
26
|
...i
|
|
27
27
|
}) {
|
|
28
28
|
const [
|
|
29
|
-
|
|
29
|
+
d,
|
|
30
30
|
[o],
|
|
31
31
|
u,
|
|
32
32
|
p
|
|
33
33
|
] = S(t, [
|
|
34
34
|
{ type: C },
|
|
35
35
|
{
|
|
36
|
-
custom: (
|
|
36
|
+
custom: (c) => s.isWoodlandComponent(c) && s.get(c).name === "Tabs"
|
|
37
37
|
},
|
|
38
38
|
{ type: g }
|
|
39
|
-
]),
|
|
40
|
-
return /* @__PURE__ */ e.createElement("div", { className:
|
|
39
|
+
]), l = f(i);
|
|
40
|
+
return /* @__PURE__ */ e.createElement("div", { className: m(D, a), ...i }, d, o ? E(o, { context: "container" }) : /* @__PURE__ */ e.createElement(q, { ...l("body") }, p), u);
|
|
41
41
|
}
|
|
42
42
|
s.set(x, { name: "Card" });
|
|
43
|
-
var z = "pkg_sps-
|
|
43
|
+
var z = "pkg_sps-woodland_cards__version_8_26_2__hash_1f11ubh0";
|
|
44
44
|
function k({
|
|
45
45
|
children: t,
|
|
46
46
|
className: a = "",
|
|
47
47
|
...i
|
|
48
48
|
}) {
|
|
49
|
-
return /* @__PURE__ */ e.createElement(N, { className:
|
|
49
|
+
return /* @__PURE__ */ e.createElement(N, { className: m(z, a), ...i }, t);
|
|
50
50
|
}
|
|
51
51
|
s.set(k, { name: "CardTitle" });
|
|
52
|
-
const
|
|
52
|
+
const A = Object.freeze({
|
|
53
53
|
general: "status-new",
|
|
54
54
|
success: "status-ok",
|
|
55
55
|
error: "status-error",
|
|
@@ -60,26 +60,27 @@ function w({
|
|
|
60
60
|
children: t,
|
|
61
61
|
className: a,
|
|
62
62
|
horizontal: i = !1,
|
|
63
|
-
icon:
|
|
63
|
+
icon: d,
|
|
64
64
|
kind: o = "general",
|
|
65
65
|
title: u,
|
|
66
66
|
metric: p,
|
|
67
|
-
partnerCount:
|
|
68
|
-
totalPartners:
|
|
67
|
+
partnerCount: l,
|
|
68
|
+
totalPartners: c,
|
|
69
69
|
...b
|
|
70
70
|
}) {
|
|
71
71
|
const { t: h } = e.useContext(F), r = f(b), [
|
|
72
72
|
T,
|
|
73
73
|
B,
|
|
74
74
|
_
|
|
75
|
-
] = (
|
|
76
|
-
count:
|
|
77
|
-
total:
|
|
75
|
+
] = (l ? h("design-system:insightTile.partnerCount", {
|
|
76
|
+
count: l,
|
|
77
|
+
total: c,
|
|
78
|
+
defaultValue: `${l} |of| ${c}`
|
|
78
79
|
}) : "").split("|");
|
|
79
80
|
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
80
81
|
"div",
|
|
81
82
|
{
|
|
82
|
-
className:
|
|
83
|
+
className: m(
|
|
83
84
|
"sps-insight-tile",
|
|
84
85
|
`sps-insight-tile--${o}`,
|
|
85
86
|
i && "sps-insight-tile--horizontal",
|
|
@@ -88,7 +89,7 @@ function w({
|
|
|
88
89
|
),
|
|
89
90
|
...b
|
|
90
91
|
},
|
|
91
|
-
/* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__body", ...r("body") },
|
|
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-${A[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(
|
|
92
93
|
"div",
|
|
93
94
|
{
|
|
94
95
|
className: "sps-insight-tile__title",
|
|
@@ -97,7 +98,7 @@ function w({
|
|
|
97
98
|
},
|
|
98
99
|
u
|
|
99
100
|
), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__detail", ...r("detail") }, t))),
|
|
100
|
-
|
|
101
|
+
l && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...r("partner-count") }, l === c ? /* @__PURE__ */ e.createElement("div", null, h("design-system:insightTile.all", { defaultValue: "ALL" })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, T), /* @__PURE__ */ e.createElement("div", null, B), /* @__PURE__ */ e.createElement("div", null, _)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("design-system:insightTile.partners", { defaultValue: "PARTNERS" })))
|
|
101
102
|
));
|
|
102
103
|
}
|
|
103
104
|
s.set(w, {
|
|
@@ -119,19 +120,19 @@ function y({
|
|
|
119
120
|
return /* @__PURE__ */ e.createElement("div", { className: "insight-tile-wrapper", ...a }, t);
|
|
120
121
|
}
|
|
121
122
|
s.set(y, { name: "InsightCardSet" });
|
|
122
|
-
var
|
|
123
|
+
var W = "pkg_sps-woodland_cards__version_8_26_2__hash_7b9vus0";
|
|
123
124
|
function v({
|
|
124
125
|
children: t,
|
|
125
126
|
className: a,
|
|
126
127
|
maxHeight: i,
|
|
127
|
-
style:
|
|
128
|
+
style: d,
|
|
128
129
|
...o
|
|
129
130
|
}) {
|
|
130
131
|
return /* @__PURE__ */ e.createElement(
|
|
131
132
|
"div",
|
|
132
133
|
{
|
|
133
|
-
className:
|
|
134
|
-
style: { ...
|
|
134
|
+
className: m(W, a),
|
|
135
|
+
style: { ...d, maxHeight: i },
|
|
135
136
|
...o
|
|
136
137
|
},
|
|
137
138
|
t
|
|
@@ -730,7 +731,7 @@ const R = {
|
|
|
730
731
|
}
|
|
731
732
|
}
|
|
732
733
|
}
|
|
733
|
-
},
|
|
734
|
+
}, V = {
|
|
734
735
|
components: [v],
|
|
735
736
|
examples: {
|
|
736
737
|
basic: {
|
|
@@ -810,10 +811,10 @@ const R = {
|
|
|
810
811
|
}
|
|
811
812
|
}
|
|
812
813
|
}
|
|
813
|
-
},
|
|
814
|
+
}, M = {
|
|
814
815
|
Cards: R,
|
|
815
816
|
"Insight Cards": U,
|
|
816
|
-
"Scrollable Container":
|
|
817
|
+
"Scrollable Container": V
|
|
817
818
|
};
|
|
818
819
|
export {
|
|
819
820
|
x as Card,
|
|
@@ -821,8 +822,8 @@ export {
|
|
|
821
822
|
C as CardHeader,
|
|
822
823
|
k as CardTitle,
|
|
823
824
|
w as InsightCard,
|
|
824
|
-
|
|
825
|
+
A as InsightCardIcons,
|
|
825
826
|
y as InsightCardSet,
|
|
826
|
-
|
|
827
|
+
M as MANIFEST,
|
|
827
828
|
v as ScrollableContainer
|
|
828
829
|
};
|
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,k,r){"use strict";function v(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=v(k);var B="pkg_sps-
|
|
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,k,r){"use strict";function v(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=v(k);var B="pkg_sps-woodland_cards__version_8_26_2__hash_1gxcp3j0";function u({children:a,className:n="",...s}){return e.createElement(t.CapContent,{className:t.cl(B,n),...s},a)}t.Metadata.set(u,{name:"CardFooter"});var _="pkg_sps-woodland_cards__version_8_26_2__hash_mxozo50";function p({children:a,className:n="",...s}){return e.createElement(t.CapContent,{className:t.cl(_,n),...s},a)}t.Metadata.set(p,{name:"CardHeader"});var S="pkg_sps-woodland_cards__version_8_26_2__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(S,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_26_2__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 w=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,...x}){const{t:T}=e.useContext(t.I18nContext),l=t.useChildTestIdAttrBuilder(x),[H,M,z]=(c?T("design-system: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),...x},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-${w[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,T("design-system:insightTile.all",{defaultValue:"ALL"})):e.createElement(e.Fragment,null,e.createElement("div",null,H),e.createElement("div",null,M),e.createElement("div",null,z)),e.createElement("div",{className:"sps-insight-tile__partners-text"},T("design-system: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 q="pkg_sps-woodland_cards__version_8_26_2__hash_7b9vus0";function y({children:a,className:n,maxHeight:s,style:o,...d}){return e.createElement("div",{className:t.cl(q,n),style:{...o,maxHeight:s},...d},a)}t.Metadata.set(y,{name:"ScrollableContainer",props:{maxHeight:"string"}});const N={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 (
|
|
@@ -537,4 +537,4 @@
|
|
|
537
537
|
</Card>
|
|
538
538
|
);
|
|
539
539
|
}
|
|
540
|
-
`}}}}},D={Cards:N,"Insight Cards":F,"Scrollable Container":P};i.Card=C,i.CardFooter=u,i.CardHeader=p,i.CardTitle=b,i.InsightCard=f,i.InsightCardIcons=
|
|
540
|
+
`}}}}},D={Cards:N,"Insight Cards":F,"Scrollable Container":P};i.Card=C,i.CardFooter=u,i.CardHeader=p,i.CardTitle=b,i.InsightCard=f,i.InsightCardIcons=w,i.InsightCardSet=I,i.MANIFEST=D,i.ScrollableContainer=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_cards__version_8_26_2__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_8_26_2__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_8_26_2__hash_mxozo50 svg{margin-bottom:0}.pkg_sps-woodland_cards__version_8_26_2__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_26_2__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_8_26_2__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_26_2__hash_7b9vus0 .sps-clickable-tag{background-color:#0000004d}
|
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.26.
|
|
4
|
+
"version": "8.26.2",
|
|
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,8 @@
|
|
|
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.26.
|
|
33
|
-
"@sps-woodland/tokens": "8.26.
|
|
32
|
+
"@sps-woodland/core": "8.26.2",
|
|
33
|
+
"@sps-woodland/tokens": "8.26.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@react-stately/collections": "^3.6.0",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"@vanilla-extract/css": "^1.9.3",
|
|
39
39
|
"react": "^16.14.0",
|
|
40
40
|
"react-dom": "^16.14.0",
|
|
41
|
-
"@sps-woodland/core": "8.26.
|
|
42
|
-
"@sps-woodland/tabs": "8.26.
|
|
43
|
-
"@sps-woodland/tokens": "8.26.
|
|
41
|
+
"@sps-woodland/core": "8.26.2",
|
|
42
|
+
"@sps-woodland/tabs": "8.26.2",
|
|
43
|
+
"@sps-woodland/tokens": "8.26.2"
|
|
44
44
|
},
|
|
45
45
|
"scripts": {
|
|
46
46
|
"build": "pnpm run build:js && pnpm run build:types",
|