@sps-woodland/cards 8.53.31 → 8.55.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 +46 -2
- package/lib/index.umd.cjs +37 -2
- package/lib/style.css +3 -3
- package/package.json +3 -3
package/lib/index.js
CHANGED
|
@@ -528,6 +528,50 @@ const m = {
|
|
|
528
528
|
}
|
|
529
529
|
}
|
|
530
530
|
},
|
|
531
|
+
onClick: {
|
|
532
|
+
label: "onClick and onEdit",
|
|
533
|
+
description: "You can use the onClick prop to add a click handler to the card or the onEdit prop to make the partner count section of the card clickable. Both of these props add the relevant parts of the card to the tab order.",
|
|
534
|
+
examples: {
|
|
535
|
+
partnerCount: {
|
|
536
|
+
react: t`
|
|
537
|
+
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
538
|
+
function Component() {
|
|
539
|
+
return (
|
|
540
|
+
<InsightCardSet>
|
|
541
|
+
<InsightCard
|
|
542
|
+
kind="general"
|
|
543
|
+
metric="1234"
|
|
544
|
+
title="Insight Card Title"
|
|
545
|
+
partnerCount={250}
|
|
546
|
+
totalPartners={250}
|
|
547
|
+
onClick={() => console.log("blue card clicked" )}
|
|
548
|
+
onEdit={() => console.log("edit blue card")}
|
|
549
|
+
/>
|
|
550
|
+
<InsightCard
|
|
551
|
+
kind="processing"
|
|
552
|
+
metric="1234"
|
|
553
|
+
title="Insight Card Title"
|
|
554
|
+
partnerCount={122}
|
|
555
|
+
totalPartners={250}
|
|
556
|
+
onClick={() => console.log("purple card clicked")}
|
|
557
|
+
onEdit={() => console.log("edit purple card")}
|
|
558
|
+
/>
|
|
559
|
+
<InsightCard
|
|
560
|
+
kind="success"
|
|
561
|
+
metric="1234"
|
|
562
|
+
title="Insight Card Title"
|
|
563
|
+
partnerCount={207}
|
|
564
|
+
totalPartners={250}
|
|
565
|
+
onClick={() => console.log("green card clicked")}
|
|
566
|
+
onEdit={() => console.log("edit green card")}
|
|
567
|
+
/>
|
|
568
|
+
</InsightCardSet>
|
|
569
|
+
);
|
|
570
|
+
}
|
|
571
|
+
`
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
},
|
|
531
575
|
alternateIcons: {
|
|
532
576
|
label: "Using alternate icons",
|
|
533
577
|
examples: {
|
|
@@ -718,11 +762,11 @@ const m = {
|
|
|
718
762
|
}
|
|
719
763
|
}
|
|
720
764
|
}
|
|
721
|
-
},
|
|
765
|
+
}, I = {
|
|
722
766
|
Cards: m,
|
|
723
767
|
"Insight Cards": u,
|
|
724
768
|
"Scrollable Container": p
|
|
725
769
|
};
|
|
726
770
|
export {
|
|
727
|
-
|
|
771
|
+
I as MANIFEST
|
|
728
772
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(a,
|
|
1
|
+
(function(a,o){typeof exports=="object"&&typeof module<"u"?o(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"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a.Cards={},a.spsWoodlandCoreCards,a.spsWoodlandCoreInsightCard,a.spsWoodlandCoreScrollableContainer,a.react,a.spscommerceUtils))})(this,(function(a,o,r,l,c,n){"use strict";function m(t){const i=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(i,s,d.get?d:{enumerable:!0,get:()=>t[s]})}}return i.default=t,Object.freeze(i)}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:[o.Card,o.CardFooter,o.CardHeader,o.CardTitle],examples:{general:{label:"General Usage",description:({Link:t,NavigateTo:i})=>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(i,{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 (
|
|
@@ -420,6 +420,41 @@
|
|
|
420
420
|
</InsightCardSet>
|
|
421
421
|
);
|
|
422
422
|
}
|
|
423
|
+
`}}},onClick:{label:"onClick and onEdit",description:"You can use the onClick prop to add a click handler to the card or the onEdit prop to make the partner count section of the card clickable. Both of these props add the relevant parts of the card to the tab order.",examples:{partnerCount:{react:n.code`
|
|
424
|
+
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
425
|
+
function Component() {
|
|
426
|
+
return (
|
|
427
|
+
<InsightCardSet>
|
|
428
|
+
<InsightCard
|
|
429
|
+
kind="general"
|
|
430
|
+
metric="1234"
|
|
431
|
+
title="Insight Card Title"
|
|
432
|
+
partnerCount={250}
|
|
433
|
+
totalPartners={250}
|
|
434
|
+
onClick={() => console.log("blue card clicked" )}
|
|
435
|
+
onEdit={() => console.log("edit blue card")}
|
|
436
|
+
/>
|
|
437
|
+
<InsightCard
|
|
438
|
+
kind="processing"
|
|
439
|
+
metric="1234"
|
|
440
|
+
title="Insight Card Title"
|
|
441
|
+
partnerCount={122}
|
|
442
|
+
totalPartners={250}
|
|
443
|
+
onClick={() => console.log("purple card clicked")}
|
|
444
|
+
onEdit={() => console.log("edit purple card")}
|
|
445
|
+
/>
|
|
446
|
+
<InsightCard
|
|
447
|
+
kind="success"
|
|
448
|
+
metric="1234"
|
|
449
|
+
title="Insight Card Title"
|
|
450
|
+
partnerCount={207}
|
|
451
|
+
totalPartners={250}
|
|
452
|
+
onClick={() => console.log("green card clicked")}
|
|
453
|
+
onEdit={() => console.log("edit green card")}
|
|
454
|
+
/>
|
|
455
|
+
</InsightCardSet>
|
|
456
|
+
);
|
|
457
|
+
}
|
|
423
458
|
`}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:n.code`
|
|
424
459
|
import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
|
|
425
460
|
function Component() {
|
|
@@ -576,4 +611,4 @@
|
|
|
576
611
|
</Card>
|
|
577
612
|
);
|
|
578
613
|
}
|
|
579
|
-
`}}}}},g={Cards:u,"Insight Cards":p,"Scrollable Container":h};a.MANIFEST=g,Object.keys(
|
|
614
|
+
`}}}}},g={Cards:u,"Insight Cards":p,"Scrollable Container":h};a.MANIFEST=g,Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(a,t)&&Object.defineProperty(a,t,{enumerable:!0,get:()=>o[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,3 +1,3 @@
|
|
|
1
|
-
.pkg_sps-
|
|
2
|
-
.pkg_sps-woodland_core__family_insight-
|
|
3
|
-
.pkg_sps-woodland_core__family_scrollable-
|
|
1
|
+
.pkg_sps-woodland_core__family_cards__version_8_55_0__hash_jj9br00{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_core__family_cards__version_8_55_0__hash_171xmyc0{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_core__family_cards__version_8_55_0__hash_171xmyc0 svg{margin-bottom:0}.pkg_sps-woodland_core__family_cards__version_8_55_0__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_55_0__hash_1c9yfku0{font-weight:600}
|
|
2
|
+
.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l0{display:flex;flex-wrap:wrap;margin:-.5rem}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1{background:#fff;border-width:.0625rem;border-style:solid;border-radius:.25rem;display:flex;flex-direction:column;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_55_0__hash_z81y4l1:focus{outline-color:#007db8;outline-style:solid;outline-offset:.125rem;outline-width:.125rem;box-shadow:0 0 0 6px #fff}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l2{border-color:#007db8;color:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l2:hover{background:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l3{border-color:#de002e;color:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l3:hover{background:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l4{border-color:#0b8940;color:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l4:hover{background:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l5{border-color:#e7760b;color:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l5:hover{background:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l6{border-color:#91467f;color:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l6:hover{background:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l7{display:flex;flex-direction:row;flex:1 0 calc(50% - 20px);height:5.125rem;max-width:calc(50% - 20px)}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l9{display:block;min-width:0}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4la{align-items:center;display:flex;flex:1;text-align:left}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lc{display:block;font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4ld{color:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4le{color:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lf{color:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lg{color:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lh{color:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4li{font-size:3rem;font-weight:600;line-height:3rem;max-width:100%;word-wrap:break-word;color:#000}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lj{margin-left:.5rem;order:1}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4ll{-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_55_0__hash_z81y4lm{min-height:1rem;margin-bottom:0}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lp{flex:1;margin-left:.5rem;min-width:0}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lr{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_55_0__hash_z81y4ls{display:block}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lu{color:#fff;font-weight:600;font-size:.75rem;line-height:1.125rem;margin:.9375rem -1.25rem -.9375rem;padding:.625rem 1.25rem;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(auto,1fr);align-items:center}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lv{background:#007db8}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lw{background:#de002e}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lx{background:#0b8940}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4ly{background:#e7760b}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lz{background:#91467f}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l10{display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:.875rem;margin:-.9375rem -1.25rem -.9375rem 1.25rem;padding:1.25rem .625rem;width:84px}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l11{flex-grow:1}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l12:focus{outline-color:#007db8;outline-style:solid;outline-offset:.125rem;outline-width:.125rem;box-shadow:0 0 0 6px #fff}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l12:focus-visible{outline-color:#007db8;outline-style:solid;outline-offset:.125rem;outline-width:.125rem;box-shadow:0 0 0 6px #fff}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l14:hover{background:#09638d}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l15:hover{background:#a30d2d}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l16:hover{background:#106b39}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l17:hover{background:#aa5e14}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l18:hover{background:#6e3c65}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1a{display:none!important}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1c{grid-column:2}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1d{white-space:nowrap}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1g{margin-top:.25rem}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1h{justify-self:end;margin-left:.25rem}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l9>svg{font-size:2rem;line-height:2rem}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1c>*{display:inline-block}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1c>*:not(:last-child){padding-right:.125rem}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lu>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1f{grid-column:3;color:#fff}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1:hover{cursor:pointer}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1:hover>*{color:#fff!important}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1:hover>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l9>*{color:#fff!important}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1:hover>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l9>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lo>*{color:#fff!important}.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l1:hover>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4l9>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lo>.pkg_sps-woodland_core__family_insight-card__version_8_55_0__hash_z81y4lr>*{color:#fff!important}
|
|
3
|
+
.pkg_sps-woodland_core__family_scrollable-container__version_8_55_0__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_55_0__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.55.0",
|
|
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.
|
|
33
|
+
"@sps-woodland/core": "8.55.0"
|
|
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.
|
|
40
|
+
"@sps-woodland/core": "8.55.0"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
43
|
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|