@sps-woodland/content-tiles 8.51.3 → 8.52.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 (11) hide show
  1. package/README.md +1 -18
  2. package/lib/content-tile/ContentTile.css.d.ts +58 -0
  3. package/lib/content-tile/ContentTile.d.ts +15 -0
  4. package/lib/content-tile-list/ContentTileList.css.d.ts +2 -0
  5. package/lib/content-tile-list/ContentTileList.d.ts +2 -0
  6. package/lib/index.d.ts +2 -1
  7. package/lib/index.js +133 -14
  8. package/lib/index.umd.cjs +6 -6
  9. package/lib/style.css +1 -1
  10. package/package.json +8 -11
  11. package/vite.config.mjs +14 -5
package/README.md CHANGED
@@ -1,20 +1,3 @@
1
1
  ## [@sps-woodland/content-tiles](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/content-tiles#readme)
2
2
 
3
- SPS Woodland Design System content-tile and content-tile-list components.
4
-
5
- This package now re-exports from `@sps-woodland/core`. New consumers should import directly from core:
6
-
7
- ```ts
8
- // Preferred (core, tree-shakes per component)
9
- import { ContentTile } from "@sps-woodland/core/content-tile";
10
- import { ContentTileList } from "@sps-woodland/core/content-tile-list";
11
- import "@sps-woodland/core/content-tiles/style.css";
12
- ```
13
-
14
- The legacy wrapper import still works during the transition:
15
-
16
- ```ts
17
- // Still supported, re-exports from @sps-woodland/core
18
- import { ContentTile, ContentTileList } from "@sps-woodland/content-tiles";
19
- import "@sps-woodland/content-tiles/style.css";
20
- ```
3
+ SPS Woodland Design System content tile and content tile list components
package/lib/content-tile/ContentTile.css.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ export declare const contentTileContainer: string;
2
+ export declare const contentTileImage: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
3
+ disabled: {
4
+ true: {
5
+ opacity: string;
6
+ };
7
+ };
8
+ }>;
9
+ export declare const contentTileImageContainer: string;
10
+ export declare const contentTile: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
11
+ error: {
12
+ true: {
13
+ borderColor: string;
14
+ ":hover": {
15
+ borderColor: string;
16
+ cursor: string;
17
+ };
18
+ };
19
+ };
20
+ warning: {
21
+ true: {
22
+ borderColor: string;
23
+ };
24
+ };
25
+ disabled: {
26
+ true: {
27
+ borderColor: string;
28
+ backgroundColor: string;
29
+ color: string;
30
+ ":hover": {
31
+ borderColor: string;
32
+ cursor: string;
33
+ };
34
+ };
35
+ };
36
+ }>;
37
+ export declare const contentTileStatusIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
38
+ error: {
39
+ true: {
40
+ color: string;
41
+ };
42
+ };
43
+ warning: {
44
+ true: {
45
+ color: string;
46
+ };
47
+ };
48
+ disabled: {
49
+ true: {
50
+ color: string;
51
+ };
52
+ };
53
+ }>;
54
+ export declare const contentTileStatusIconContainer: string;
55
+ export declare const contentTileTitleContainer: string;
56
+ export declare const contentTileTitleText: string;
57
+ export declare const contentTileTitleIcon: string;
58
+ export declare const contentTileTagContainer: string;
package/lib/content-tile/ContentTile.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { ComponentProps } from "@sps-woodland/core";
2
+ import * as React from "react";
3
+ export declare function ContentTile({ className, href, icon, error, errorIcon, title, warning, warningIcon, disabled, target, onClick, tagElement, ...rest }: ComponentProps<{
4
+ href?: string;
5
+ icon: React.ReactNode | (() => React.ReactNode);
6
+ error?: boolean;
7
+ errorIcon?: React.ReactNode | (() => React.ReactNode);
8
+ title: string;
9
+ warning?: boolean;
10
+ warningIcon?: React.ReactNode | (() => React.ReactNode);
11
+ disabled?: boolean;
12
+ target?: string;
13
+ onClick?: () => void;
14
+ tagElement?: React.ReactNode | (() => React.ReactNode);
15
+ }, HTMLDivElement>): React.ReactElement;
package/lib/content-tile-list/ContentTileList.css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const contentTileList: string;
2
+ export declare const contentTileListLink: string;
package/lib/content-tile-list/ContentTileList.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ComponentProps } from "@sps-woodland/core";
2
+ export declare function ContentTileList({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): JSX.Element;
package/lib/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- export * from "@sps-woodland/core/content-tiles";
1
+ export * from "./content-tile/ContentTile";
2
+ export * from "./content-tile-list/ContentTileList";
2
3
  export * from "./manifest";
package/lib/index.js CHANGED
@@ -1,15 +1,132 @@
1
- export * from "@sps-woodland/core/content-tiles";
2
- import { code as e } from "@spscommerce/utils";
3
- import { ContentTile as t } from "@sps-woodland/core/content-tile";
4
- import { ContentTileList as n } from "@sps-woodland/core/content-tile-list";
5
- const s = {
6
- components: [t, n],
1
+ import { Metadata as m, selectChildren as E, cl as a, contentOf as g, Icon as u } from "@sps-woodland/core";
2
+ import * as r from "react";
3
+ import { grid as L } from "@sps-woodland/tokens";
4
+ import { code as d } from "@spscommerce/utils";
5
+ var O = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj0", D = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj1";
6
+ function x(e, s, t) {
7
+ return s in e ? Object.defineProperty(e, s, {
8
+ value: t,
9
+ enumerable: !0,
10
+ configurable: !0,
11
+ writable: !0
12
+ }) : e[s] = t, e;
13
+ }
14
+ function h(e, s) {
15
+ var t = Object.keys(e);
16
+ if (Object.getOwnPropertySymbols) {
17
+ var n = Object.getOwnPropertySymbols(e);
18
+ s && (n = n.filter(function(o) {
19
+ return Object.getOwnPropertyDescriptor(e, o).enumerable;
20
+ })), t.push.apply(t, n);
21
+ }
22
+ return t;
23
+ }
24
+ function k(e) {
25
+ for (var s = 1; s < arguments.length; s++) {
26
+ var t = arguments[s] != null ? arguments[s] : {};
27
+ s % 2 ? h(Object(t), !0).forEach(function(n) {
28
+ x(e, n, t[n]);
29
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : h(Object(t)).forEach(function(n) {
30
+ Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
31
+ });
32
+ }
33
+ return e;
34
+ }
35
+ var R = (e, s, t) => {
36
+ for (var n of Object.keys(e)) {
37
+ var o;
38
+ if (e[n] !== ((o = s[n]) !== null && o !== void 0 ? o : t[n]))
39
+ return !1;
40
+ }
41
+ return !0;
42
+ }, w = (e) => (s) => {
43
+ var t = e.defaultClassName, n = k(k({}, e.defaultVariants), s);
44
+ for (var o in n) {
45
+ var p, l = (p = n[o]) !== null && p !== void 0 ? p : e.defaultVariants[o];
46
+ if (l != null) {
47
+ var c = l;
48
+ typeof c == "boolean" && (c = c === !0 ? "true" : "false");
49
+ var i = (
50
+ // @ts-expect-error
51
+ e.variantClassNames[o][c]
52
+ );
53
+ i && (t += " " + i);
54
+ }
55
+ }
56
+ for (var [_, f] of e.compoundVariants)
57
+ R(_, n, e.defaultVariants) && (t += " " + f);
58
+ return t;
59
+ }, A = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf0", I = w({ defaultClassName: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf1", variantClassNames: { disabled: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf2" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), j = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf3", P = w({ defaultClassName: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf4", variantClassNames: { error: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf5" }, warning: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf6" }, disabled: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf7" } }, defaultVariants: { error: !1, warning: !1, disabled: !1 }, compoundVariants: [] }), b = w({ defaultClassName: "", variantClassNames: { error: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf8" }, warning: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf9" }, disabled: { true: "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfa" } }, defaultVariants: { error: !1, disabled: !1, warning: !1 }, compoundVariants: [] }), V = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfb", H = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfc", G = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfd", M = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfe", K = "pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnff";
60
+ function T({
61
+ className: e,
62
+ href: s,
63
+ icon: t,
64
+ error: n = !1,
65
+ errorIcon: o,
66
+ title: p,
67
+ warning: l = !1,
68
+ warningIcon: c,
69
+ disabled: i = !1,
70
+ target: _,
71
+ onClick: f,
72
+ tagElement: N,
73
+ ...S
74
+ }) {
75
+ const [v] = E(N, [
76
+ {
77
+ custom: (C) => m.isWoodlandComponent(C) && m.get(C).name === "Tag"
78
+ }
79
+ ]);
80
+ return /* @__PURE__ */ r.createElement("div", { className: a(L[3], A, e), ...S }, /* @__PURE__ */ r.createElement(
81
+ "a",
82
+ {
83
+ href: i ? void 0 : s,
84
+ className: a(P({ error: n, warning: l, disabled: i }), D),
85
+ target: _,
86
+ onClick: f
87
+ },
88
+ (l || n) && /* @__PURE__ */ r.createElement("div", { className: V }, l && (c ? g(c) : /* @__PURE__ */ r.createElement(
89
+ u,
90
+ {
91
+ icon: "status-warning",
92
+ className: a(b({ warning: l, disabled: i }))
93
+ }
94
+ )), n && (o ? g(o) : /* @__PURE__ */ r.createElement(u, { icon: "ban", className: a(b({ error: n, disabled: i })) }))),
95
+ v[0] && /* @__PURE__ */ r.createElement("div", { className: a(K) }, v[0]),
96
+ /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement("div", { className: a(j) }, typeof t == "string" ? /* @__PURE__ */ r.createElement("img", { className: a(I({ disabled: i })), src: t, alt: "" }) : g(t)), /* @__PURE__ */ r.createElement("div", { className: a(H) }, /* @__PURE__ */ r.createElement("p", { className: a(G) }, p, _ === "_blank" && /* @__PURE__ */ r.createElement(u, { icon: "tabs", className: a(M) }))))
97
+ ));
98
+ }
99
+ m.set(T, {
100
+ name: "Content Tile",
101
+ props: {
102
+ href: { type: "string" },
103
+ icon: { type: "React.ReactNode | (() => React.ReactNode)", required: !0 },
104
+ error: { type: "boolean", default: "false" },
105
+ errorIcon: { type: "React.ReactNode | (() => React.ReactNode)" },
106
+ title: { type: "string", required: !0 },
107
+ warning: { type: "boolean", default: "false" },
108
+ warningIcon: { type: "React.ReactNode | (() => React.ReactNode)" },
109
+ disabled: { type: "boolean", default: "false" },
110
+ target: { type: "string" },
111
+ onClick: { type: "() => void" }
112
+ }
113
+ });
114
+ function y({
115
+ children: e,
116
+ className: s,
117
+ ...t
118
+ }) {
119
+ return /* @__PURE__ */ r.createElement("div", { className: a(O, s), ...t }, e);
120
+ }
121
+ m.set(y, { name: "Content Tile List" });
122
+ const q = {
123
+ components: [T, y],
7
124
  examples: {
8
125
  basic: {
9
126
  label: "Basic",
10
127
  examples: {
11
128
  basic: {
12
- react: e`
129
+ react: d`
13
130
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
14
131
 
15
132
  function Component() {
@@ -86,7 +203,7 @@ const s = {
86
203
  label: "Single Tile",
87
204
  examples: {
88
205
  basic: {
89
- react: e`
206
+ react: d`
90
207
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
91
208
  function Component() {
92
209
  return (
@@ -104,7 +221,7 @@ const s = {
104
221
  `
105
222
  },
106
223
  error: {
107
- react: e`
224
+ react: d`
108
225
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
109
226
 
110
227
  function Component() {
@@ -127,7 +244,7 @@ const s = {
127
244
  `
128
245
  },
129
246
  tag: {
130
- react: e`
247
+ react: d`
131
248
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
132
249
  import { Tag } from "@sps-woodland/tag";
133
250
 
@@ -153,7 +270,7 @@ const s = {
153
270
  label: "Sortable Tiles",
154
271
  examples: {
155
272
  basic: {
156
- react: e`
273
+ react: d`
157
274
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
158
275
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
159
276
  import { grid } from "@sps-woodland/tokens";
@@ -264,9 +381,11 @@ function Component() {
264
381
  }
265
382
  }
266
383
  }
267
- }, a = {
268
- "Content Tiles": s
384
+ }, Y = {
385
+ "Content Tiles": q
269
386
  };
270
387
  export {
271
- a as MANIFEST
388
+ T as ContentTile,
389
+ y as ContentTileList,
390
+ Y as MANIFEST
272
391
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@sps-woodland/core/content-tiles"),require("@spscommerce/utils"),require("@sps-woodland/core/content-tile"),require("@sps-woodland/core/content-tile-list")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/content-tiles","@spscommerce/utils","@sps-woodland/core/content-tile","@sps-woodland/core/content-tile-list"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.ContentTiles={},e.contentTiles,e.utils,e.contentTile,e.contentTileList))})(this,(function(e,t,n,s,r){"use strict";const i={"Content Tiles":{components:[s.ContentTile,r.ContentTileList],examples:{basic:{label:"Basic",examples:{basic:{react:n.code`
1
+ (function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("@sps-woodland/core"),require("react"),require("@sps-woodland/tokens"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core","react","@sps-woodland/tokens","@spscommerce/utils"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.ContentTiles={},r.core,r.React,r.tokens,r.utils))})(this,(function(r,n,T,y,p){"use strict";function N(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,s.get?s:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=N(T);var S="pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj0",O="pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj1";function E(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function v(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);a&&(s=s.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),t.push.apply(t,s)}return t}function C(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?v(Object(t),!0).forEach(function(s){E(e,s,t[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach(function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(t,s))})}return e}var L=(e,a,t)=>{for(var s of Object.keys(e)){var i;if(e[s]!==((i=a[s])!==null&&i!==void 0?i:t[s]))return!1}return!0},f=e=>a=>{var t=e.defaultClassName,s=C(C({},e.defaultVariants),a);for(var i in s){var _,c=(_=s[i])!==null&&_!==void 0?_:e.defaultVariants[i];if(c!=null){var d=c;typeof d=="boolean"&&(d=d===!0?"true":"false");var l=e.variantClassNames[i][d];l&&(t+=" "+l)}}for(var[m,w]of e.compoundVariants)L(m,s,e.defaultVariants)&&(t+=" "+w);return t},D="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf0",j=f({defaultClassName:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf1",variantClassNames:{disabled:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf2"}},defaultVariants:{disabled:!1},compoundVariants:[]}),x="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf3",R=f({defaultClassName:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf4",variantClassNames:{error:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf5"},warning:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf6"},disabled:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf7"}},defaultVariants:{error:!1,warning:!1,disabled:!1},compoundVariants:[]}),h=f({defaultClassName:"",variantClassNames:{error:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf8"},warning:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf9"},disabled:{true:"pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfa"}},defaultVariants:{error:!1,disabled:!1,warning:!1},compoundVariants:[]}),I="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfb",A="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfc",P="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfd",M="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfe",V="pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnff";function u({className:e,href:a,icon:t,error:s=!1,errorIcon:i,title:_,warning:c=!1,warningIcon:d,disabled:l=!1,target:m,onClick:w,tagElement:q,...G}){const[k]=n.selectChildren(q,[{custom:b=>n.Metadata.isWoodlandComponent(b)&&n.Metadata.get(b).name==="Tag"}]);return o.createElement("div",{className:n.cl(y.grid[3],D,e),...G},o.createElement("a",{href:l?void 0:a,className:n.cl(R({error:s,warning:c,disabled:l}),O),target:m,onClick:w},(c||s)&&o.createElement("div",{className:I},c&&(d?n.contentOf(d):o.createElement(n.Icon,{icon:"status-warning",className:n.cl(h({warning:c,disabled:l}))})),s&&(i?n.contentOf(i):o.createElement(n.Icon,{icon:"ban",className:n.cl(h({error:s,disabled:l}))}))),k[0]&&o.createElement("div",{className:n.cl(V)},k[0]),o.createElement("div",null,o.createElement("div",{className:n.cl(x)},typeof t=="string"?o.createElement("img",{className:n.cl(j({disabled:l})),src:t,alt:""}):n.contentOf(t)),o.createElement("div",{className:n.cl(A)},o.createElement("p",{className:n.cl(P)},_,m==="_blank"&&o.createElement(n.Icon,{icon:"tabs",className:n.cl(M)}))))))}n.Metadata.set(u,{name:"Content Tile",props:{href:{type:"string"},icon:{type:"React.ReactNode | (() => React.ReactNode)",required:!0},error:{type:"boolean",default:"false"},errorIcon:{type:"React.ReactNode | (() => React.ReactNode)"},title:{type:"string",required:!0},warning:{type:"boolean",default:"false"},warningIcon:{type:"React.ReactNode | (() => React.ReactNode)"},disabled:{type:"boolean",default:"false"},target:{type:"string"},onClick:{type:"() => void"}}});function g({children:e,className:a,...t}){return o.createElement("div",{className:n.cl(S,a),...t},e)}n.Metadata.set(g,{name:"Content Tile List"});const H={"Content Tiles":{components:[u,g],examples:{basic:{label:"Basic",examples:{basic:{react:p.code`
2
2
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
3
3
 
4
4
  function Component() {
@@ -67,7 +67,7 @@
67
67
  </>
68
68
  );
69
69
  }
70
- `}}},singleTile:{label:"Single Tile",examples:{basic:{react:n.code`
70
+ `}}},singleTile:{label:"Single Tile",examples:{basic:{react:p.code`
71
71
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
72
72
  function Component() {
73
73
  return (
@@ -82,7 +82,7 @@
82
82
  </>
83
83
  )
84
84
  }
85
- `},error:{react:n.code`
85
+ `},error:{react:p.code`
86
86
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
87
87
 
88
88
  function Component() {
@@ -102,7 +102,7 @@
102
102
  </>
103
103
  )
104
104
  }
105
- `},tag:{react:n.code`
105
+ `},tag:{react:p.code`
106
106
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
107
107
  import { Tag } from "@sps-woodland/tag";
108
108
 
@@ -120,7 +120,7 @@
120
120
  </>
121
121
  );
122
122
  }
123
- `}}},sortableTiles:{label:"Sortable Tiles",examples:{basic:{react:n.code`
123
+ `}}},sortableTiles:{label:"Sortable Tiles",examples:{basic:{react:p.code`
124
124
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
125
125
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
126
126
  import { grid } from "@sps-woodland/tokens";
@@ -226,4 +226,4 @@ function Component() {
226
226
  </div>
227
227
  )
228
228
  }
229
- `}}}}}};e.MANIFEST=i,Object.keys(t).forEach(o=>{o!=="default"&&!Object.prototype.hasOwnProperty.call(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:()=>t[o]})}),Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
229
+ `}}}}}};r.ContentTile=u,r.ContentTileList=g,r.MANIFEST=H,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .pkg_sps-woodland_core__version_8_51_3__hash_1dggj5e0{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}.pkg_sps-woodland_core__version_8_51_3__hash_1dggj5e1{color:#000}.pkg_sps-woodland_core__version_8_51_3__hash_1dggj5e1:hover{text-decoration:none;color:#000}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw0{transition:all .25s ease}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw1{height:3.75rem;width:3.75rem}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw2{opacity:.25}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw3{height:3.75rem;width:3.75rem;margin-left:auto;margin-right:auto;margin-top:1rem;margin-bottom:1rem}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw4{display:block;position:relative;background-color:#fff;border-radius:.25rem;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;cursor:pointer;height:8.625rem;text-decoration:none}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw4:hover{border-color:#007db8;color:#000}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw5{border-color:#de002e}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw5:hover{border-color:#de002e;cursor:not-allowed}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw6{border-color:#e7760b}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw7{border-color:#d2d4d4;background-color:#f3f4f4;color:#d2d4d4}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw7:hover{border-color:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw8{color:#de002e}.pkg_sps-woodland_core__version_8_51_3__hash_w95inw9{color:#e7760b}.pkg_sps-woodland_core__version_8_51_3__hash_w95inwa{color:#717779}.pkg_sps-woodland_core__version_8_51_3__hash_w95inwb{position:absolute;padding:.5rem}.pkg_sps-woodland_core__version_8_51_3__hash_w95inwc{text-align:center;padding-left:.5rem;padding-right:.5rem}.pkg_sps-woodland_core__version_8_51_3__hash_w95inwd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkg_sps-woodland_core__version_8_51_3__hash_w95inwe{text-align:center;padding:.5rem;color:#007db8}.pkg_sps-woodland_core__version_8_51_3__hash_w95inwf{position:absolute;right:0;padding:.5rem}
1
+ .pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj0{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj1{color:#000}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_85dplj1:hover{text-decoration:none;color:#000}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf0{transition:all .25s ease}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf1{height:3.75rem;width:3.75rem}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf2{opacity:.25}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf3{height:3.75rem;width:3.75rem;margin-left:auto;margin-right:auto;margin-top:1rem;margin-bottom:1rem}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf4{display:block;position:relative;background-color:#fff;border-radius:.25rem;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;cursor:pointer;height:8.625rem;text-decoration:none}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf4:hover{border-color:#007db8;color:#000}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf5{border-color:#de002e}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf5:hover{border-color:#de002e;cursor:not-allowed}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf6{border-color:#e7760b}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf7{border-color:#d2d4d4;background-color:#f3f4f4;color:#d2d4d4}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf7:hover{border-color:#d2d4d4;cursor:not-allowed}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf8{color:#de002e}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnf9{color:#e7760b}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfa{color:#717779}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfb{position:absolute;padding:.5rem}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfc{text-align:center;padding-left:.5rem;padding-right:.5rem}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnfe{text-align:center;padding:.5rem;color:#007db8}.pkg_sps-woodland_content-tiles__version_8_52_1__hash_1k4ncnff{position:absolute;right:0;padding:.5rem}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/content-tiles",
3
3
  "description": "SPS Woodland Design System content-tile and content tile list components.",
4
- "version": "8.51.3",
4
+ "version": "8.52.1",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/content-tiles",
@@ -20,10 +20,6 @@
20
20
  "./lib/style.css": {
21
21
  "import": "./lib/style.css",
22
22
  "require": "./lib/style.css"
23
- },
24
- "./style.css": {
25
- "import": "./lib/style.css",
26
- "require": "./lib/style.css"
27
23
  }
28
24
  },
29
25
  "publishConfig": {
@@ -33,21 +29,22 @@
33
29
  "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
34
30
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
35
31
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
36
- "@sps-woodland/core": "8.51.3",
37
- "@sps-woodland/tokens": "8.51.3"
32
+ "@sps-woodland/core": "8.52.1",
33
+ "@sps-woodland/tokens": "8.52.1"
38
34
  },
39
35
  "devDependencies": {
40
36
  "@spscommerce/utils": "9.0.3",
37
+ "@vanilla-extract/css": "1.17.4",
38
+ "@vanilla-extract/recipes": "0.2.5",
41
39
  "react": "16.14.0",
42
40
  "react-dom": "16.14.0",
43
- "@sps-woodland/core": "8.51.3",
44
- "@sps-woodland/tokens": "8.51.3"
41
+ "@sps-woodland/core": "8.52.1",
42
+ "@sps-woodland/tokens": "8.52.1"
45
43
  },
46
44
  "scripts": {
47
- "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
45
+ "build": "pnpm run build:js && pnpm run build:types",
48
46
  "build:js": "vite build",
49
47
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
50
- "build:css": "cp ../core/lib/content-tiles/style.css lib/style.css 2>/dev/null || echo 'content-tiles style.css not found, skipping'",
51
48
  "watch": "vite build --watch",
52
49
  "clean": "git clean -fdX",
53
50
  "pub": "node ../../../scripts/publish-package.mjs"
package/vite.config.mjs CHANGED
@@ -1,22 +1,31 @@
1
1
  import path from "node:path";
2
+ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
2
3
  import { defineConfig } from "vite";
4
+ import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
3
5
  import pkg from "./package.json";
4
6
 
7
+ const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
8
+
5
9
  export default defineConfig({
10
+ plugins: [
11
+ vanillaExtractPlugin(
12
+ getVanillaExtractPluginProps({
13
+ packageName: pkg.name,
14
+ packageVersion,
15
+ })
16
+ ),
17
+ ],
6
18
  build: {
7
19
  lib: {
8
20
  entry: path.resolve(__dirname, "src/index.ts"),
9
21
  name: "ContentTiles",
10
22
  fileName: "index",
23
+ cssFileName: "style",
11
24
  },
12
25
  outDir: path.resolve(__dirname, "./lib"),
13
26
  emptyOutDir: false,
14
27
  rollupOptions: {
15
- // External must match subpath imports like @sps-woodland/core/content-tile
16
- external: (id) => {
17
- const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
18
- return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
19
- },
28
+ external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
20
29
  },
21
30
  },
22
31
  });