@sps-woodland/cards 7.17.13 → 7.19.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.
Files changed (6) hide show
  1. package/lib/{index.es.js → index.js} +54 -54
  2. package/lib/{index.cjs.js → index.umd.cjs} +16 -16
  3. package/lib/style.css +1 -1
  4. package/package.json +11 -11
  5. package/sps-woodland-cards-7.19.0.tgz +0 -0
  6. package/vite.config.js +13 -4
package/lib/{index.es.js → index.js} RENAMED
@@ -1,54 +1,54 @@
1
- import { Metadata as s, CapContent as I, cl as c, selectChildren as E, useChildTestIdAttrBuilder as f, addProps as q, Content as N, CapContentTitle as _, I18nContext as F } from "@sps-woodland/core";
1
+ import { Metadata as s, CapContent as I, cl as c, selectChildren as B, 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
- import { code as i } from "@spscommerce/utils";
4
- var P = "_1gxcp3j0";
3
+ import { code as n } from "@spscommerce/utils";
4
+ var P = "pkg_sps-woodland_cards__version_7_19_0__hash_1gxcp3j0";
5
5
  function g({
6
6
  children: t,
7
7
  className: a = "",
8
- ...n
8
+ ...i
9
9
  }) {
10
- return /* @__PURE__ */ e.createElement(I, { className: c(P, a), ...n }, t);
10
+ return /* @__PURE__ */ e.createElement(I, { className: c(P, a), ...i }, t);
11
11
  }
12
12
  s.set(g, { name: "CardFooter" });
13
- var H = "mxozo50";
13
+ var H = "pkg_sps-woodland_cards__version_7_19_0__hash_mxozo50";
14
14
  function C({
15
15
  children: t,
16
16
  className: a = "",
17
- ...n
17
+ ...i
18
18
  }) {
19
- return /* @__PURE__ */ e.createElement(I, { className: c(H, a), ...n }, t);
19
+ return /* @__PURE__ */ e.createElement(I, { className: c(H, a), ...i }, t);
20
20
  }
21
21
  s.set(C, { name: "CardHeader" });
22
- var D = "jyyttb0";
22
+ var D = "pkg_sps-woodland_cards__version_7_19_0__hash_jyyttb0";
23
23
  function x({
24
24
  children: t,
25
25
  className: a,
26
- ...n
26
+ ...i
27
27
  }) {
28
28
  const [
29
29
  l,
30
30
  [o],
31
31
  u,
32
32
  p
33
- ] = E(t, [
33
+ ] = B(t, [
34
34
  { type: C },
35
35
  {
36
36
  custom: (m) => s.isWoodlandComponent(m) && s.get(m).name === "Tabs"
37
37
  },
38
38
  { type: g }
39
- ]), d = f(n);
40
- return /* @__PURE__ */ e.createElement("div", { className: c(D, a), ...n }, l, o ? q(o, { context: "container" }) : /* @__PURE__ */ e.createElement(N, { ...d("body") }, p), u);
39
+ ]), d = f(i);
40
+ return /* @__PURE__ */ e.createElement("div", { className: c(D, a), ...i }, l, o ? E(o, { context: "container" }) : /* @__PURE__ */ e.createElement(q, { ...d("body") }, p), u);
41
41
  }
42
42
  s.set(x, { name: "Card" });
43
- var z = "_1f11ubh0";
44
- function y({
43
+ var z = "pkg_sps-woodland_cards__version_7_19_0__hash_1f11ubh0";
44
+ function v({
45
45
  children: t,
46
46
  className: a = "",
47
- ...n
47
+ ...i
48
48
  }) {
49
- return /* @__PURE__ */ e.createElement(_, { className: c(z, a), ...n }, t);
49
+ return /* @__PURE__ */ e.createElement(N, { className: c(z, a), ...i }, t);
50
50
  }
51
- s.set(y, { name: "CardTitle" });
51
+ s.set(v, { name: "CardTitle" });
52
52
  const W = Object.freeze({
53
53
  general: "status-new",
54
54
  success: "status-ok",
@@ -56,10 +56,10 @@ const W = Object.freeze({
56
56
  warning: "status-warning",
57
57
  processing: "status-in-process"
58
58
  });
59
- function v({
59
+ function k({
60
60
  children: t,
61
61
  className: a,
62
- horizontal: n = !1,
62
+ horizontal: i = !1,
63
63
  icon: l,
64
64
  kind: o = "general",
65
65
  title: u,
@@ -69,9 +69,9 @@ function v({
69
69
  ...b
70
70
  }) {
71
71
  const { t: h } = e.useContext(F), r = f(b), [
72
- w,
72
+ T,
73
73
  S,
74
- B
74
+ _
75
75
  ] = (d ? h("design-system:insightTile.partnerCount", {
76
76
  count: d,
77
77
  total: m
@@ -82,7 +82,7 @@ function v({
82
82
  className: c(
83
83
  "sps-insight-tile",
84
84
  `sps-insight-tile--${o}`,
85
- n && "sps-insight-tile--horizontal",
85
+ i && "sps-insight-tile--horizontal",
86
86
  t && "sps-insight-tile--has-detail",
87
87
  a
88
88
  ),
@@ -97,10 +97,10 @@ function v({
97
97
  },
98
98
  u
99
99
  ), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__detail", ...r("detail") }, t))),
100
- d && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...r("partner-count") }, d === m ? /* @__PURE__ */ e.createElement("div", null, h("design-system:insightTile.all")) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, w), /* @__PURE__ */ e.createElement("div", null, S), /* @__PURE__ */ e.createElement("div", null, B)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("design-system:insightTile.partners")))
100
+ d && /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partner-count", ...r("partner-count") }, d === m ? /* @__PURE__ */ e.createElement("div", null, h("design-system:insightTile.all")) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, T), /* @__PURE__ */ e.createElement("div", null, S), /* @__PURE__ */ e.createElement("div", null, _)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("design-system:insightTile.partners")))
101
101
  ));
102
102
  }
103
- s.set(v, {
103
+ s.set(k, {
104
104
  name: "InsightCard",
105
105
  props: {
106
106
  horizontal: { type: "boolean", default: "false" },
@@ -112,18 +112,18 @@ s.set(v, {
112
112
  totalPartners: "number"
113
113
  }
114
114
  });
115
- function T({
115
+ function y({
116
116
  children: t,
117
117
  ...a
118
118
  }) {
119
119
  return /* @__PURE__ */ e.createElement("div", { className: "insight-tile-wrapper", ...a }, t);
120
120
  }
121
- s.set(T, { name: "InsightCardSet" });
122
- var A = "_7b9vus0";
123
- function k({
121
+ s.set(y, { name: "InsightCardSet" });
122
+ var A = "pkg_sps-woodland_cards__version_7_19_0__hash_7b9vus0";
123
+ function w({
124
124
  children: t,
125
125
  className: a,
126
- maxHeight: n,
126
+ maxHeight: i,
127
127
  style: l,
128
128
  ...o
129
129
  }) {
@@ -131,13 +131,13 @@ function k({
131
131
  "div",
132
132
  {
133
133
  className: c(A, a),
134
- style: { ...l, maxHeight: n },
134
+ style: { ...l, maxHeight: i },
135
135
  ...o
136
136
  },
137
137
  t
138
138
  );
139
139
  }
140
- s.set(k, {
140
+ s.set(w, {
141
141
  name: "ScrollableContainer",
142
142
  props: {
143
143
  maxHeight: "string"
@@ -149,7 +149,7 @@ const R = {
149
149
  x,
150
150
  g,
151
151
  C,
152
- y
152
+ v
153
153
  ],
154
154
  examples: {
155
155
  general: {
@@ -161,7 +161,7 @@ const R = {
161
161
  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."),
162
162
  examples: {
163
163
  basic: {
164
- react: i`
164
+ react: n`
165
165
  import { Card } from "@sps-woodland/cards";
166
166
  function Component() {
167
167
  return (
@@ -173,7 +173,7 @@ const R = {
173
173
  `
174
174
  },
175
175
  sections: {
176
- react: i`
176
+ react: n`
177
177
  import { Card } from "@sps-woodland/cards";
178
178
  function Component() {
179
179
  return (
@@ -210,7 +210,7 @@ const R = {
210
210
  `
211
211
  },
212
212
  nestedSections: {
213
- react: i`
213
+ react: n`
214
214
  import { Card } from "@sps-woodland/cards";
215
215
  function Component() {
216
216
  return (
@@ -241,7 +241,7 @@ const R = {
241
241
  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."),
242
242
  examples: {
243
243
  title: {
244
- react: i`
244
+ react: n`
245
245
  import { SpsButton } from "@spscommerce/ds-react";
246
246
  import { Card, CardHeader, CardTitle } from "@sps-woodland/cards";
247
247
  import { Icon } from "@sps-woodland/core";
@@ -280,7 +280,7 @@ const R = {
280
280
  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."),
281
281
  examples: {
282
282
  basicFooter: {
283
- react: i`
283
+ react: n`
284
284
  import { SpsButton } from "@spscommerce/ds-react";
285
285
  import { Card, CardFooter } from "@sps-woodland/cards";
286
286
  import { Box } from "@sps-woodland/core";
@@ -313,7 +313,7 @@ const R = {
313
313
  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.")),
314
314
  examples: {
315
315
  tabsOnly: {
316
- react: i`
316
+ react: n`
317
317
  import { Card } from "@sps-woodland/cards";
318
318
  import { Box, Icon } from "@sps-woodland/core";
319
319
  import { Tabs } from "@sps-woodland/tabs";
@@ -370,7 +370,7 @@ const R = {
370
370
  `
371
371
  },
372
372
  activeTabInput: {
373
- react: i`
373
+ react: n`
374
374
  import { Card } from "@sps-woodland/cards";
375
375
  import { Tabs } from "@sps-woodland/tabs";
376
376
  import { Item } from "@react-stately/collections";
@@ -400,7 +400,7 @@ const R = {
400
400
  description: () => /* @__PURE__ */ e.createElement("p", null, "Headers, Footers, and Tabs can be attached to Cards in any combination."),
401
401
  examples: {
402
402
  everything: {
403
- react: i`
403
+ react: n`
404
404
  import { SpsButton, SpsTag } from "@spscommerce/ds-react";
405
405
  import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
406
406
  import { Box, Icon } from "@sps-woodland/core";
@@ -484,13 +484,13 @@ const R = {
484
484
  }
485
485
  }
486
486
  }, U = {
487
- components: [v, T],
487
+ components: [k, y],
488
488
  examples: {
489
489
  basic: {
490
490
  label: "Basic Insight Cards",
491
491
  examples: {
492
492
  basic: {
493
- react: i`
493
+ react: n`
494
494
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
495
495
  function Component() {
496
496
  return (
@@ -531,7 +531,7 @@ const R = {
531
531
  label: "With Details",
532
532
  examples: {
533
533
  details: {
534
- react: i`
534
+ react: n`
535
535
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
536
536
  import { Box } from "@sps-woodland/core";
537
537
  function Component() {
@@ -573,7 +573,7 @@ const R = {
573
573
  label: "Partner Count",
574
574
  examples: {
575
575
  partnerCount: {
576
- react: i`
576
+ react: n`
577
577
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
578
578
  function Component() {
579
579
  return (
@@ -624,7 +624,7 @@ const R = {
624
624
  label: "Using alternate icons",
625
625
  examples: {
626
626
  alternateIcons: {
627
- react: i`
627
+ react: n`
628
628
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
629
629
  function Component() {
630
630
  return (
@@ -670,7 +670,7 @@ const R = {
670
670
  label: "Horizontal",
671
671
  examples: {
672
672
  horizontal: {
673
- react: i`
673
+ react: n`
674
674
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
675
675
  function Component() {
676
676
  return (
@@ -730,14 +730,14 @@ const R = {
730
730
  }
731
731
  }
732
732
  }, M = {
733
- components: [k],
733
+ components: [w],
734
734
  examples: {
735
735
  basic: {
736
736
  label: "Basic",
737
737
  description: "Basic scrollable container",
738
738
  examples: {
739
739
  text: {
740
- react: i`
740
+ react: n`
741
741
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
742
742
  function Component() {
743
743
  return (
@@ -783,7 +783,7 @@ const R = {
783
783
  `
784
784
  },
785
785
  components: {
786
- react: i`
786
+ react: n`
787
787
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
788
788
  import { SpsClickableTag } from "@spscommerce/ds-react";
789
789
  function Component() {
@@ -818,10 +818,10 @@ export {
818
818
  x as Card,
819
819
  g as CardFooter,
820
820
  C as CardHeader,
821
- y as CardTitle,
822
- v as InsightCard,
821
+ v as CardTitle,
822
+ k as InsightCard,
823
823
  W as InsightCardIcons,
824
- T as InsightCardSet,
824
+ y as InsightCardSet,
825
825
  j as MANIFEST,
826
- k as ScrollableContainer
826
+ w as ScrollableContainer
827
827
  };
package/lib/{index.cjs.js → index.umd.cjs} RENAMED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@sps-woodland/core"),w=require("react"),s=require("@spscommerce/utils");function B(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const e=B(w);var q="_1gxcp3j0";function p({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(q,n),...i},t)}a.Metadata.set(p,{name:"CardFooter"});var E="mxozo50";function g({children:t,className:n="",...i}){return e.createElement(a.CapContent,{className:a.cl(E,n),...i},t)}a.Metadata.set(g,{name:"CardHeader"});var N="jyyttb0";function C({children:t,className:n,...i}){const[r,[l],m,u]=a.selectChildren(t,[{type:g},{custom:c=>a.Metadata.isWoodlandComponent(c)&&a.Metadata.get(c).name==="Tabs"},{type:p}]),d=a.useChildTestIdAttrBuilder(i);return e.createElement("div",{className:a.cl(N,n),...i},r,l?a.addProps(l,{context:"container"}):e.createElement(a.Content,{...d("body")},u),m)}a.Metadata.set(C,{name:"Card"});var _="_1f11ubh0";function b({children:t,className:n="",...i}){return e.createElement(a.CapContentTitle,{className:a.cl(_,n),...i},t)}a.Metadata.set(b,{name:"CardTitle"});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:i=!1,icon:r,kind:l="general",title:m,metric:u,partnerCount:d,totalPartners:c,...y}){const{t:h}=e.useContext(a.I18nContext),o=a.useChildTestIdAttrBuilder(y),[v,S,k]=(d?h("design-system:insightTile.partnerCount",{count:d,total:c}):"").split("|");return e.createElement(e.Fragment,null,e.createElement("div",{className:a.cl("sps-insight-tile",`sps-insight-tile--${l}`,i&&"sps-insight-tile--horizontal",t&&"sps-insight-tile--has-detail",n),...y},e.createElement("div",{className:"sps-insight-tile__body",...o("body")},r?e.createElement("i",{className:`sps-icon sps-icon-${r}`,...o("icon")}):e.createElement("i",{className:`sps-icon sps-icon-${T[l]}`,...o("icon")}),u&&e.createElement("div",{className:"sps-insight-tile__metric-count",...o("metric")},u),m&&e.createElement("div",{className:"sps-insight-tile__description",...o("description")},e.createElement("div",{className:"sps-insight-tile__title",style:{"-webkit-box-orient":"vertical"},...o("title")},m),e.createElement("div",{className:"sps-insight-tile__detail",...o("detail")},t))),d&&e.createElement("div",{className:"sps-insight-tile__partner-count",...o("partner-count")},d===c?e.createElement("div",null,h("design-system:insightTile.all")):e.createElement(e.Fragment,null,e.createElement("div",null,v),e.createElement("div",null,S),e.createElement("div",null,k)),e.createElement("div",{className:"sps-insight-tile__partners-text"},h("design-system:insightTile.partners")))))}a.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 f({children:t,...n}){return e.createElement("div",{className:"insight-tile-wrapper",...n},t)}a.Metadata.set(f,{name:"InsightCardSet"});var F="_7b9vus0";function x({children:t,className:n,maxHeight:i,style:r,...l}){return e.createElement("div",{className:a.cl(F,n),style:{...r,maxHeight:i},...l},t)}a.Metadata.set(x,{name:"ScrollableContainer",props:{maxHeight:"string"}});const P={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,p,g,b],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:s.code`
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 w(a){if(a&&a.__esModule)return 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=w(k),A="";var S="pkg_sps-woodland_cards__version_7_19_0__hash_1gxcp3j0";function u({children:a,className:n="",...s}){return e.createElement(t.CapContent,{className:t.cl(S,n),...s},a)}t.Metadata.set(u,{name:"CardFooter"});const W="";var _="pkg_sps-woodland_cards__version_7_19_0__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"});const j="";var B="pkg_sps-woodland_cards__version_7_19_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(B,n),...s},o,d?t.addProps(d,{context:"container"}):e.createElement(t.Content,{...c("body")},g),h)}t.Metadata.set(C,{name:"Card"});const O="";var q="pkg_sps-woodland_cards__version_7_19_0__hash_1f11ubh0";function b({children:a,className:n="",...s}){return e.createElement(t.CapContentTitle,{className:t.cl(q,n),...s},a)}t.Metadata.set(b,{name:"CardTitle"});const T=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:y}=e.useContext(t.I18nContext),l=t.useChildTestIdAttrBuilder(x),[D,M,z]=(c?y("design-system:insightTile.partnerCount",{count:c,total: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-${T[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,y("design-system:insightTile.all")):e.createElement(e.Fragment,null,e.createElement("div",null,D),e.createElement("div",null,M),e.createElement("div",null,z)),e.createElement("div",{className:"sps-insight-tile__partners-text"},y("design-system:insightTile.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"});const R="";var E="pkg_sps-woodland_cards__version_7_19_0__hash_7b9vus0";function v({children:a,className:n,maxHeight:s,style:o,...d}){return e.createElement("div",{className:t.cl(E,n),style:{...o,maxHeight:s},...d},a)}t.Metadata.set(v,{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 (
@@ -7,7 +7,7 @@
7
7
  </Card>
8
8
  );
9
9
  }
10
- `},sections:{react:s.code`
10
+ `},sections:{react:r.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:s.code`
44
+ `},nestedSections:{react:r.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:s.code`
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:r.code`
67
67
  import { SpsButton } from "@spscommerce/ds-react";
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:s.code`
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:r.code`
97
97
  import { SpsButton } from "@spscommerce/ds-react";
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:s.code`
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:r.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:s.code`
174
+ `},activeTabInput:{react:r.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
- `}}},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:s.code`
195
+ `}}},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:r.code`
196
196
  import { SpsButton, SpsTag } from "@spscommerce/ds-react";
197
197
  import { Card, CardHeader, CardTitle, CardFooter } from "@sps-woodland/cards";
198
198
  import { Box, Icon } from "@sps-woodland/core";
@@ -270,7 +270,7 @@
270
270
  </Card>
271
271
  );
272
272
  }
273
- `}}}}},H={components:[I,f],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:s.code`
273
+ `}}}}},F={components:[f,I],examples:{basic:{label:"Basic Insight Cards",examples:{basic:{react:r.code`
274
274
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
275
275
  function Component() {
276
276
  return (
@@ -303,7 +303,7 @@
303
303
  </InsightCardSet>
304
304
  );
305
305
  }
306
- `}}},details:{label:"With Details",examples:{details:{react:s.code`
306
+ `}}},details:{label:"With Details",examples:{details:{react:r.code`
307
307
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
308
308
  import { Box } from "@sps-woodland/core";
309
309
  function Component() {
@@ -337,7 +337,7 @@
337
337
  </InsightCardSet>
338
338
  );
339
339
  }
340
- `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:s.code`
340
+ `}}},partnerCount:{label:"Partner Count",examples:{partnerCount:{react:r.code`
341
341
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
342
342
  function Component() {
343
343
  return (
@@ -380,7 +380,7 @@
380
380
  </InsightCardSet>
381
381
  );
382
382
  }
383
- `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:s.code`
383
+ `}}},alternateIcons:{label:"Using alternate icons",examples:{alternateIcons:{react:r.code`
384
384
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
385
385
  function Component() {
386
386
  return (
@@ -418,7 +418,7 @@
418
418
  </InsightCardSet>
419
419
  );
420
420
  }
421
- `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:s.code`
421
+ `}}},horizontal:{label:"Horizontal",examples:{horizontal:{react:r.code`
422
422
  import { InsightCard, InsightCardSet } from "@sps-woodland/cards";
423
423
  function Component() {
424
424
  return (
@@ -472,7 +472,7 @@
472
472
  </InsightCardSet>
473
473
  );
474
474
  }
475
- `}}}}},D={components:[x],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:s.code`
475
+ `}}}}},P={components:[v],examples:{basic:{label:"Basic",description:"Basic scrollable container",examples:{text:{react:r.code`
476
476
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
477
477
  function Component() {
478
478
  return (
@@ -515,7 +515,7 @@
515
515
  </Card>
516
516
  );
517
517
  }
518
- `},components:{react:s.code`
518
+ `},components:{react:r.code`
519
519
  import { Card, ScrollableContainer } from "@sps-woodland/cards";
520
520
  import { SpsClickableTag } from "@spscommerce/ds-react";
521
521
  function Component() {
@@ -536,4 +536,4 @@
536
536
  </Card>
537
537
  );
538
538
  }
539
- `}}}}},M={Cards:P,"Insight Cards":H,"Scrollable Container":D};exports.Card=C;exports.CardFooter=p;exports.CardHeader=g;exports.CardTitle=b;exports.InsightCard=I;exports.InsightCardIcons=T;exports.InsightCardSet=f;exports.MANIFEST=M;exports.ScrollableContainer=x;
539
+ `}}}}},H={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=T,i.InsightCardSet=I,i.MANIFEST=H,i.ScrollableContainer=v,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- ._1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.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}._1f11ubh0{font-weight:600}._7b9vus0{overflow:scroll;background-attachment:local,local,scroll,scroll;background-color:#fff;background-image:linear-gradient(0deg,#fff,hsla(0,0%,100%,0)),linear-gradient(180deg,#fff,hsla(0,0%,100%,0)),linear-gradient(0deg,rgba(0,0,0,.15),hsla(0,0%,100%,0)),linear-gradient(180deg,rgba(0,0,0,.15),hsla(0,0%,100%,0));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}._7b9vus0 .sps-clickable-tag{background-color:#acd4e84d}
1
+ .pkg_sps-woodland_cards__version_7_19_0__hash_1gxcp3j0{border-top-color:#d2d4d4;border-top-style:solid;border-top-width:.0625rem}.pkg_sps-woodland_cards__version_7_19_0__hash_mxozo50{border-bottom-color:#d2d4d4;border-bottom-style:solid;border-bottom-width:.0625rem}.pkg_sps-woodland_cards__version_7_19_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_7_19_0__hash_1f11ubh0{font-weight:600}.pkg_sps-woodland_cards__version_7_19_0__hash_7b9vus0{overflow:scroll;background-attachment:local,local,scroll,scroll;background-color:#fff;background-image:linear-gradient(0deg,#fff,hsla(0,0%,100%,0)),linear-gradient(180deg,#fff,hsla(0,0%,100%,0)),linear-gradient(0deg,rgba(0,0,0,.15),hsla(0,0%,100%,0)),linear-gradient(180deg,rgba(0,0,0,.15),hsla(0,0%,100%,0));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_7_19_0__hash_7b9vus0 .sps-clickable-tag{background-color:#acd4e84d}
package/package.json CHANGED
@@ -1,12 +1,11 @@
1
1
  {
2
2
  "name": "@sps-woodland/cards",
3
3
  "description": "SPS Woodland Design System card, insight card, and scrollable container components",
4
- "version": "7.17.13",
4
+ "version": "7.19.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
8
8
  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/cards#readme",
9
- "module": "./lib/index.es.js",
10
9
  "publishConfig": {
11
10
  "access": "public"
12
11
  },
@@ -14,17 +13,18 @@
14
13
  "@spscommerce/utils": "^6.12.1",
15
14
  "react": "^16.14.0",
16
15
  "react-dom": "^16.14.0",
17
- "@sps-woodland/tokens": "7.17.13",
18
- "@sps-woodland/core": "7.17.13"
16
+ "@sps-woodland/tokens": "7.19.0",
17
+ "@sps-woodland/core": "7.19.0"
19
18
  },
20
19
  "type": "module",
21
- "main": "./lib/index.cjs.js",
20
+ "module": "./lib/index.js",
21
+ "main": "./lib/index.umd.cjs",
22
22
  "types": "./lib/index.d.ts",
23
23
  "exports": {
24
24
  ".": {
25
- "import": "./lib/index.es.js",
26
- "require": "./lib/index.cjs.js",
27
- "default": "./lib/index.cjs.js",
25
+ "require": "./lib/index.umd.cjs",
26
+ "import": "./lib/index.js",
27
+ "default": "./lib/index.js",
28
28
  "types": "./lib/index.d.ts"
29
29
  },
30
30
  "./lib/style.css": {
@@ -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": "7.17.13",
42
- "@sps-woodland/tabs": "7.17.13",
43
- "@sps-woodland/tokens": "7.17.13"
41
+ "@sps-woodland/tabs": "7.19.0",
42
+ "@sps-woodland/tokens": "7.19.0",
43
+ "@sps-woodland/core": "7.19.0"
44
44
  },
45
45
  "scripts": {
46
46
  "build": "pnpm run build:js && pnpm run build:types",
package/sps-woodland-cards-7.19.0.tgz ADDED
Binary file
package/vite.config.js CHANGED
@@ -1,16 +1,25 @@
1
1
  import path from "path";
2
2
  import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
3
  import { defineConfig } from "vite";
4
-
4
+ import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.js";
5
5
  import pkg from "./package.json";
6
6
 
7
+ const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
8
+
7
9
  export default defineConfig({
8
- plugins: [vanillaExtractPlugin()],
10
+ plugins: [
11
+ vanillaExtractPlugin(
12
+ getVanillaExtractPluginProps({
13
+ packageName: pkg.name,
14
+ packageVersion,
15
+ })
16
+ ),
17
+ ],
9
18
  build: {
10
19
  lib: {
11
20
  entry: path.resolve(__dirname, "src/index.ts"),
12
- formats: ["es", "cjs"],
13
- fileName: (format) => `index.${format}.js`,
21
+ name: "Cards",
22
+ fileName: "index",
14
23
  },
15
24
  outDir: path.resolve(__dirname, "./lib"),
16
25
  emptyOutDir: false,