@sps-woodland/cards 8.53.12 → 8.53.13
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 +7 -5
- package/lib/index.umd.cjs +2 -2
- package/lib/style.css +3 -3
- package/package.json +3 -3
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Card as
|
|
1
|
+
import { Card as i, CardFooter as o, CardHeader as r, CardTitle as s } from "@sps-woodland/core/cards";
|
|
2
2
|
export * from "@sps-woodland/core/cards";
|
|
3
3
|
import { InsightCard as l, InsightCardSet as d } from "@sps-woodland/core/insight-card";
|
|
4
4
|
export * from "@sps-woodland/core/insight-card";
|
|
@@ -9,7 +9,7 @@ import { code as t } from "@spscommerce/utils";
|
|
|
9
9
|
const m = {
|
|
10
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."),
|
|
11
11
|
components: [
|
|
12
|
-
|
|
12
|
+
i,
|
|
13
13
|
o,
|
|
14
14
|
r,
|
|
15
15
|
s
|
|
@@ -17,7 +17,7 @@ const m = {
|
|
|
17
17
|
examples: {
|
|
18
18
|
general: {
|
|
19
19
|
label: "General Usage",
|
|
20
|
-
description: ({ Link: a, NavigateTo:
|
|
20
|
+
description: ({ Link: a, NavigateTo: n }) => /* @__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(n, { 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)."))
|
|
21
21
|
},
|
|
22
22
|
basic: {
|
|
23
23
|
label: "Basic card",
|
|
@@ -392,6 +392,7 @@ const m = {
|
|
|
392
392
|
}
|
|
393
393
|
}, u = {
|
|
394
394
|
components: [l, d],
|
|
395
|
+
description: () => /* @__PURE__ */ e.createElement("p", null, "Starting in version 8.53.8, Insight Cards are also available directly from", " ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/core/insight-card"), ", without the ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/cards"), " ", "wrapper package. If you import it that way, you'll also need its own stylesheet —", " ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/core/insight-card/style.css"), " — since", " ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/core/cards/style.css"), " only covers the base Card family, not Insight Cards or Scrollable Container."),
|
|
395
396
|
examples: {
|
|
396
397
|
basic: {
|
|
397
398
|
label: "Basic Insight Cards",
|
|
@@ -638,6 +639,7 @@ const m = {
|
|
|
638
639
|
}
|
|
639
640
|
}, p = {
|
|
640
641
|
components: [c],
|
|
642
|
+
description: () => /* @__PURE__ */ e.createElement("p", null, "Starting in version 8.53.8, Scrollable Container is also available directly from", " ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/core/scrollable-container"), ", without the", " ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/cards"), " wrapper package. If you import it that way, you'll also need its own stylesheet — ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/core/scrollable-container/style.css"), " — since ", /* @__PURE__ */ e.createElement("code", null, "@sps-woodland/core/cards/style.css"), " only covers the base Card family, not Insight Cards or Scrollable Container."),
|
|
641
643
|
examples: {
|
|
642
644
|
basic: {
|
|
643
645
|
label: "Basic",
|
|
@@ -716,11 +718,11 @@ const m = {
|
|
|
716
718
|
}
|
|
717
719
|
}
|
|
718
720
|
}
|
|
719
|
-
},
|
|
721
|
+
}, f = {
|
|
720
722
|
Cards: m,
|
|
721
723
|
"Insight Cards": u,
|
|
722
724
|
"Scrollable Container": p
|
|
723
725
|
};
|
|
724
726
|
export {
|
|
725
|
-
|
|
727
|
+
f as MANIFEST
|
|
726
728
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
</Card>
|
|
311
311
|
);
|
|
312
312
|
}
|
|
313
|
-
`}}}}},p={components:[r.InsightCard,r.InsightCardSet],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:n.code`
|
|
313
|
+
`}}}}},p={components:[r.InsightCard,r.InsightCardSet],description:()=>e.createElement("p",null,"Starting in version 8.53.8, Insight Cards are also available directly from"," ",e.createElement("code",null,"@sps-woodland/core/insight-card"),", without the ",e.createElement("code",null,"@sps-woodland/cards")," ","wrapper package. If you import it that way, you'll also need its own stylesheet —"," ",e.createElement("code",null,"@sps-woodland/core/insight-card/style.css")," — since"," ",e.createElement("code",null,"@sps-woodland/core/cards/style.css")," only covers the base Card family, not Insight Cards or Scrollable Container."),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 (
|
|
@@ -512,7 +512,7 @@
|
|
|
512
512
|
</InsightCardSet>
|
|
513
513
|
);
|
|
514
514
|
}
|
|
515
|
-
`}}}}},h={components:[l.ScrollableContainer],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:n.code`
|
|
515
|
+
`}}}}},h={components:[l.ScrollableContainer],description:()=>e.createElement("p",null,"Starting in version 8.53.8, Scrollable Container is also available directly from"," ",e.createElement("code",null,"@sps-woodland/core/scrollable-container"),", without the"," ",e.createElement("code",null,"@sps-woodland/cards")," wrapper package. If you import it that way, you'll also need its own stylesheet — ",e.createElement("code",null,"@sps-woodland/core/scrollable-container/style.css")," — since ",e.createElement("code",null,"@sps-woodland/core/cards/style.css")," only covers the base Card family, not Insight Cards or Scrollable Container."),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 (
|
package/lib/style.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.pkg_sps-
|
|
2
|
-
.pkg_sps-
|
|
3
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_core__family_cards__version_8_53_13__hash_jj9br00{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_core__family_cards__version_8_53_13__hash_171xmyc0{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_core__family_cards__version_8_53_13__hash_171xmyc0 svg{margin-bottom:0}.pkg_sps-woodland_core__family_cards__version_8_53_13__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__family_cards__version_8_53_13__hash_1c9yfku0{font-weight:600}
|
|
2
|
+
.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__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__family_insight-card__version_8_53_13__hash_z81y4l2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l2:hover{background:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l3:hover{background:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l4:hover{background:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l5:hover{background:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l6:hover{background:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l7{display:flex;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l9{display:block;min-width:0}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4la{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4ld{color:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4le{color:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lf{color:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lg{color:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lh{color:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4li{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lj{color:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lk{color:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4ll{color:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lm{color:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4ln{color:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lo{margin-left:.5rem;order:1}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__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__family_insight-card__version_8_53_13__hash_z81y4lr{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lu{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__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__family_insight-card__version_8_53_13__hash_z81y4lx{display:block}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__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__family_insight-card__version_8_53_13__hash_z81y4l10{background:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l11{background:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l12{background:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l13{background:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l14{background:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__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__family_insight-card__version_8_53_13__hash_z81y4l18{display:none!important}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lz>*{display:inline-block}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lz>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l1:hover{cursor:pointer}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l1:hover>*{color:#fff!important}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l1:hover>.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l9>*{color:#fff!important}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l1:hover>.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l9>.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lt>*{color:#fff!important}.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l1:hover>.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4l9>.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lt>.pkg_sps-woodland_core__family_insight-card__version_8_53_13__hash_z81y4lw>*{color:#fff!important}
|
|
3
|
+
.pkg_sps-woodland_core__family_scrollable-container__version_8_53_13__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__family_scrollable-container__version_8_53_13__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.53.
|
|
4
|
+
"version": "8.53.13",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
|
|
@@ -30,14 +30,14 @@
|
|
|
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.53.
|
|
33
|
+
"@sps-woodland/core": "8.53.13"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@react-stately/collections": "3.12.10",
|
|
37
37
|
"@spscommerce/utils": "9.1.1",
|
|
38
38
|
"react": "16.14.0",
|
|
39
39
|
"react-dom": "16.14.0",
|
|
40
|
-
"@sps-woodland/core": "8.53.
|
|
40
|
+
"@sps-woodland/core": "8.53.13"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
43
|
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|