@sps-woodland/cards 8.2.2 → 8.3.1

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 (4) hide show
  1. package/lib/index.es.js +38 -73
  2. package/lib/insight-card/InsightCardSet.d.ts +2 -1
  3. package/lib/style.css +1 -1
  4. package/package.json +6 -6
package/lib/index.es.js CHANGED
@@ -7,10 +7,7 @@ function g({
7
7
  className: a = "",
8
8
  ...i
9
9
  }) {
10
- return /* @__PURE__ */ e.createElement(I, {
11
- className: c(P, a),
12
- ...i
13
- }, t);
10
+ return /* @__PURE__ */ e.createElement(I, { className: c(P, a), ...i }, t);
14
11
  }
15
12
  s.set(g, { name: "CardFooter" });
16
13
  var H = "mxozo50";
@@ -19,10 +16,7 @@ function C({
19
16
  className: a = "",
20
17
  ...i
21
18
  }) {
22
- return /* @__PURE__ */ e.createElement(I, {
23
- className: c(H, a),
24
- ...i
25
- }, t);
19
+ return /* @__PURE__ */ e.createElement(I, { className: c(H, a), ...i }, t);
26
20
  }
27
21
  s.set(C, { name: "CardHeader" });
28
22
  var D = "jyyttb0";
@@ -43,12 +37,7 @@ function x({
43
37
  },
44
38
  { type: g }
45
39
  ]), d = f(i);
46
- return /* @__PURE__ */ e.createElement("div", {
47
- className: c(D, a),
48
- ...i
49
- }, l, o ? q(o, { context: "container" }) : /* @__PURE__ */ e.createElement(N, {
50
- ...d("body")
51
- }, p), u);
40
+ return /* @__PURE__ */ e.createElement("div", { className: c(D, a), ...i }, l, o ? q(o, { context: "container" }) : /* @__PURE__ */ e.createElement(N, { ...d("body") }, p), u);
52
41
  }
53
42
  s.set(x, { name: "Card" });
54
43
  var z = "_1f11ubh0";
@@ -57,10 +46,7 @@ function y({
57
46
  className: a = "",
58
47
  ...i
59
48
  }) {
60
- return /* @__PURE__ */ e.createElement(_, {
61
- className: c(z, a),
62
- ...i
63
- }, t);
49
+ return /* @__PURE__ */ e.createElement(_, { className: c(z, a), ...i }, t);
64
50
  }
65
51
  s.set(y, { name: "CardTitle" });
66
52
  const W = Object.freeze({
@@ -90,43 +76,29 @@ function v({
90
76
  count: d,
91
77
  total: m
92
78
  }) : "").split("|");
93
- return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
94
- className: c(
95
- "sps-insight-tile",
96
- `sps-insight-tile--${o}`,
97
- i && "sps-insight-tile--horizontal",
98
- t && "sps-insight-tile--has-detail",
99
- a
100
- ),
101
- ...b
102
- }, /* @__PURE__ */ e.createElement("div", {
103
- className: "sps-insight-tile__body",
104
- ...r("body")
105
- }, l ? /* @__PURE__ */ e.createElement("i", {
106
- className: `sps-icon sps-icon-${l}`,
107
- ...r("icon")
108
- }) : /* @__PURE__ */ e.createElement("i", {
109
- className: `sps-icon sps-icon-${W[o]}`,
110
- ...r("icon")
111
- }), p && /* @__PURE__ */ e.createElement("div", {
112
- className: "sps-insight-tile__metric-count",
113
- ...r("metric")
114
- }, p), u && /* @__PURE__ */ e.createElement("div", {
115
- className: "sps-insight-tile__description",
116
- ...r("description")
117
- }, /* @__PURE__ */ e.createElement("div", {
118
- className: "sps-insight-tile__title",
119
- style: { "-webkit-box-orient": "vertical" },
120
- ...r("title")
121
- }, u), /* @__PURE__ */ e.createElement("div", {
122
- className: "sps-insight-tile__detail",
123
- ...r("detail")
124
- }, t))), d && /* @__PURE__ */ e.createElement("div", {
125
- className: "sps-insight-tile__partner-count",
126
- ...r("partner-count")
127
- }, 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, B), /* @__PURE__ */ e.createElement("div", null, S)), /* @__PURE__ */ e.createElement("div", {
128
- className: "sps-insight-tile__partners-text"
129
- }, h("design-system:insightTile.partners")))));
79
+ return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
80
+ "div",
81
+ {
82
+ className: c(
83
+ "sps-insight-tile",
84
+ `sps-insight-tile--${o}`,
85
+ i && "sps-insight-tile--horizontal",
86
+ t && "sps-insight-tile--has-detail",
87
+ a
88
+ ),
89
+ ...b
90
+ },
91
+ /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__body", ...r("body") }, l ? /* @__PURE__ */ e.createElement("i", { className: `sps-icon sps-icon-${l}`, ...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(
92
+ "div",
93
+ {
94
+ className: "sps-insight-tile__title",
95
+ style: { "-webkit-box-orient": "vertical" },
96
+ ...r("title")
97
+ },
98
+ u
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, B), /* @__PURE__ */ e.createElement("div", null, S)), /* @__PURE__ */ e.createElement("div", { className: "sps-insight-tile__partners-text" }, h("design-system:insightTile.partners")))
101
+ ));
130
102
  }
131
103
  s.set(v, {
132
104
  name: "InsightCard",
@@ -144,10 +116,7 @@ function T({
144
116
  children: t,
145
117
  ...a
146
118
  }) {
147
- return /* @__PURE__ */ e.createElement("div", {
148
- className: "insight-tile-wrapper",
149
- ...a
150
- }, t);
119
+ return /* @__PURE__ */ e.createElement("div", { className: "insight-tile-wrapper", ...a }, t);
151
120
  }
152
121
  s.set(T, { name: "InsightCardSet" });
153
122
  var A = "_7b9vus0";
@@ -158,11 +127,15 @@ function k({
158
127
  style: l,
159
128
  ...o
160
129
  }) {
161
- return /* @__PURE__ */ e.createElement("div", {
162
- className: c(A, a),
163
- style: { ...l, maxHeight: i },
164
- ...o
165
- }, t);
130
+ return /* @__PURE__ */ e.createElement(
131
+ "div",
132
+ {
133
+ className: c(A, a),
134
+ style: { ...l, maxHeight: i },
135
+ ...o
136
+ },
137
+ t
138
+ );
166
139
  }
167
140
  s.set(k, {
168
141
  name: "ScrollableContainer",
@@ -181,15 +154,7 @@ const R = {
181
154
  examples: {
182
155
  general: {
183
156
  label: "General Usage",
184
- description: ({ Link: t, NavigateTo: a }) => /* @__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(t, {
185
- to: "/style-and-layout/grid"
186
- }, "Woodland Grid"), " and", " ", /* @__PURE__ */ e.createElement(t, {
187
- to: "/style-and-layout/page-types"
188
- }, "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(a, {
189
- to: "page-title"
190
- }, "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(t, {
191
- to: "/style-and-layout/typography"
192
- }, "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)."))
157
+ description: ({ Link: t, NavigateTo: a }) => /* @__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(t, { to: "/style-and-layout/grid" }, "Woodland Grid"), " and", " ", /* @__PURE__ */ e.createElement(t, { 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(a, { 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(t, { 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)."))
193
158
  },
194
159
  basic: {
195
160
  label: "Basic card",
package/lib/insight-card/InsightCardSet.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import type { ComponentProps } from "@sps-woodland/core";
2
- export declare function InsightCardSet({ children, ...rest }: ComponentProps<unknown, HTMLDivElement>): JSX.Element;
2
+ import * as React from "react";
3
+ export declare function InsightCardSet({ children, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.JSX.Element;
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
+ ._1gxcp3j0{border-top-color:oklch(86.84% .002 197.12);border-top-style:solid;border-top-width:.0625rem}.mxozo50{border-bottom-color:oklch(86.84% .002 197.12);border-bottom-style:solid;border-bottom-width:.0625rem}.jyyttb0{background-clip:border-box;background-color:oklch(100% 0 0);border-color:oklch(86.84% .002 197.12);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:#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.2.2",
4
+ "version": "8.3.1",
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": "^6.12.1",
30
30
  "react": "^16.14.0",
31
31
  "react-dom": "^16.14.0",
32
- "@sps-woodland/core": "8.2.2",
33
- "@sps-woodland/tokens": "8.2.2"
32
+ "@sps-woodland/core": "8.3.1",
33
+ "@sps-woodland/tokens": "8.3.1"
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.2.2",
42
- "@sps-woodland/tabs": "8.2.2",
43
- "@sps-woodland/tokens": "8.2.2"
41
+ "@sps-woodland/core": "8.3.1",
42
+ "@sps-woodland/tabs": "8.3.1",
43
+ "@sps-woodland/tokens": "8.3.1"
44
44
  },
45
45
  "scripts": {
46
46
  "build": "pnpm run build:js && pnpm run build:types",