@sps-woodland/content-tiles 8.9.0 → 8.10.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.
@@ -55,3 +55,4 @@ export declare const contentTileStatusIconContainer: string;
55
55
  export declare const contentTileTitleContainer: string;
56
56
  export declare const contentTileTitleText: string;
57
57
  export declare const contentTileTitleIcon: string;
58
+ export declare const contentTileTagContainer: string;
@@ -1,6 +1,6 @@
1
1
  import type { ComponentProps } from "@sps-woodland/core";
2
2
  import * as React from "react";
3
- export declare function ContentTile({ className, href, icon, error, errorIcon, title, warning, warningIcon, disabled, target, onClick, ...rest }: ComponentProps<{
3
+ export declare function ContentTile({ className, href, icon, error, errorIcon, title, warning, warningIcon, disabled, target, onClick, tagElement, ...rest }: ComponentProps<{
4
4
  href?: string;
5
5
  icon: React.ReactNode | (() => React.ReactNode);
6
6
  error?: boolean;
@@ -11,4 +11,5 @@ export declare function ContentTile({ className, href, icon, error, errorIcon, t
11
11
  disabled?: boolean;
12
12
  target?: string;
13
13
  onClick?: () => void;
14
+ tagElement?: React.ReactNode | (() => React.ReactNode);
14
15
  }, HTMLDivElement>): React.ReactElement;
package/lib/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@sps-woodland/core"),k=require("react"),y=require("@sps-woodland/tokens"),m=require("@spscommerce/utils");function S(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const o=S(k);var N="_85dplj0",h="_85dplj1";function O(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function w(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),t.push.apply(t,n)}return t}function v(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?w(Object(t),!0).forEach(function(n){O(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):w(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}var E=(e,r,t)=>{for(var n of Object.keys(e)){var s;if(e[n]!==((s=r[n])!==null&&s!==void 0?s:t[n]))return!1}return!0},u=e=>r=>{var t=e.defaultClassName,n=v(v({},e.defaultVariants),r);for(var s in n){var p,c=(p=n[s])!==null&&p!==void 0?p:e.defaultVariants[s];if(c!=null){var l=c;typeof l=="boolean"&&(l=l===!0?"true":"false");var i=e.variantClassNames[s][l];i&&(t+=" "+i)}}for(var[d,f]of e.compoundVariants)E(d,n,e.defaultVariants)&&(t+=" "+f);return t},_=u({defaultClassName:"_1k4ncnf4",variantClassNames:{error:{true:"_1k4ncnf5"},warning:{true:"_1k4ncnf6"},disabled:{true:"_1k4ncnf7"}},defaultVariants:{error:!1,warning:!1,disabled:!1},compoundVariants:[]}),D="_1k4ncnf0",L=u({defaultClassName:"_1k4ncnf1",variantClassNames:{disabled:{true:"_1k4ncnf2"}},defaultVariants:{disabled:!1},compoundVariants:[]}),R="_1k4ncnf3",C=u({defaultClassName:"",variantClassNames:{error:{true:"_1k4ncnf8"},warning:{true:"_1k4ncnf9"},disabled:{true:"_1k4ncnfa"}},defaultVariants:{error:!1,disabled:!1,warning:!1},compoundVariants:[]}),j="_1k4ncnfb",x="_1k4ncnfc",I="_1k4ncnfe",A="_1k4ncnfd";function g({className:e,href:r,icon:t,error:n=!1,errorIcon:s,title:p,warning:c=!1,warningIcon:l,disabled:i=!1,target:d,onClick:f,...T}){return o.createElement("div",{className:a.cl(y.grid[3],D,e),...T},o.createElement("a",{href:i?void 0:r,className:a.cl(_({error:n,warning:c,disabled:i}),h),target:d,onClick:f},(c||n)&&o.createElement("div",{className:j},c&&(l?a.contentOf(l):o.createElement(a.Icon,{icon:"status-warning",className:a.cl(C({warning:c,disabled:i}))})),n&&(s?a.contentOf(s):o.createElement(a.Icon,{icon:"ban",className:a.cl(C({error:n,disabled:i}))}))),o.createElement("div",null,o.createElement("div",{className:a.cl(R)},typeof t=="string"?o.createElement("img",{className:a.cl(L({disabled:i})),src:t,alt:""}):a.contentOf(t)),o.createElement("div",{className:a.cl(x)},o.createElement("p",{className:a.cl(A)},p,d==="_blank"&&o.createElement(a.Icon,{icon:"tabs",className:a.cl(I)}))))))}a.Metadata.set(g,{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 b({children:e,className:r,...t}){return o.createElement("div",{className:a.cl(N,r),...t},e)}a.Metadata.set(b,{name:"Content Tile List"});const P={components:[g,b],examples:{basic:{label:"Basic",examples:{basic:{react:m.code`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@sps-woodland/core"),S=require("react"),h=require("@sps-woodland/tokens"),m=require("@spscommerce/utils");function O(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=O(S);var E="_85dplj0",_="_85dplj1";function L(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),t.push.apply(t,n)}return t}function T(e){for(var r=1;r<arguments.length;r++){var t=arguments[r]!=null?arguments[r]:{};r%2?v(Object(t),!0).forEach(function(n){L(e,n,t[n])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})}return e}var D=(e,r,t)=>{for(var n of Object.keys(e)){var o;if(e[n]!==((o=r[n])!==null&&o!==void 0?o:t[n]))return!1}return!0},u=e=>r=>{var t=e.defaultClassName,n=T(T({},e.defaultVariants),r);for(var o in n){var p,c=(p=n[o])!==null&&p!==void 0?p:e.defaultVariants[o];if(c!=null){var l=c;typeof l=="boolean"&&(l=l===!0?"true":"false");var i=e.variantClassNames[o][l];i&&(t+=" "+i)}}for(var[d,f]of e.compoundVariants)D(d,n,e.defaultVariants)&&(t+=" "+f);return t},x=u({defaultClassName:"_1k4ncnf4",variantClassNames:{error:{true:"_1k4ncnf5"},warning:{true:"_1k4ncnf6"},disabled:{true:"_1k4ncnf7"}},defaultVariants:{error:!1,warning:!1,disabled:!1},compoundVariants:[]}),R="_1k4ncnf0",j=u({defaultClassName:"_1k4ncnf1",variantClassNames:{disabled:{true:"_1k4ncnf2"}},defaultVariants:{disabled:!1},compoundVariants:[]}),I="_1k4ncnf3",y=u({defaultClassName:"",variantClassNames:{error:{true:"_1k4ncnf8"},warning:{true:"_1k4ncnf9"},disabled:{true:"_1k4ncnfa"}},defaultVariants:{error:!1,disabled:!1,warning:!1},compoundVariants:[]}),A="_1k4ncnfb",P="_1k4ncnff",M="_1k4ncnfc",V="_1k4ncnfe",H="_1k4ncnfd";function g({className:e,href:r,icon:t,error:n=!1,errorIcon:o,title:p,warning:c=!1,warningIcon:l,disabled:i=!1,target:d,onClick:f,tagElement:k,...N}){const[C]=a.selectChildren(k,[{custom:b=>a.Metadata.isWoodlandComponent(b)&&a.Metadata.get(b).name==="Tag"}]);return s.createElement("div",{className:a.cl(h.grid[3],R,e),...N},s.createElement("a",{href:i?void 0:r,className:a.cl(x({error:n,warning:c,disabled:i}),_),target:d,onClick:f},(c||n)&&s.createElement("div",{className:A},c&&(l?a.contentOf(l):s.createElement(a.Icon,{icon:"status-warning",className:a.cl(y({warning:c,disabled:i}))})),n&&(o?a.contentOf(o):s.createElement(a.Icon,{icon:"ban",className:a.cl(y({error:n,disabled:i}))}))),C[0]&&s.createElement("div",{className:a.cl(P)},C[0]),s.createElement("div",null,s.createElement("div",{className:a.cl(I)},typeof t=="string"?s.createElement("img",{className:a.cl(j({disabled:i})),src:t,alt:""}):a.contentOf(t)),s.createElement("div",{className:a.cl(M)},s.createElement("p",{className:a.cl(H)},p,d==="_blank"&&s.createElement(a.Icon,{icon:"tabs",className:a.cl(V)}))))))}a.Metadata.set(g,{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 w({children:e,className:r,...t}){return s.createElement("div",{className:a.cl(E,r),...t},e)}a.Metadata.set(w,{name:"Content Tile List"});const q={components:[g,w],examples:{basic:{label:"Basic",examples:{basic:{react:m.code`
2
2
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
3
3
 
4
4
  function Component() {
@@ -102,6 +102,24 @@
102
102
  </>
103
103
  )
104
104
  }
105
+ `},tag:{react:m.code`
106
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
107
+ import { Tag } from "@sps-woodland/tag";
108
+
109
+ function Component() {
110
+ return (
111
+ <>
112
+ <ContentTileList>
113
+ <ContentTile
114
+ title="Community"
115
+ icon={"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg"}
116
+ id="tagged-app"
117
+ tagElement={<Tag className="px-2 py-1" kind="success">New</Tag>}
118
+ />
119
+ </ContentTileList>
120
+ </>
121
+ );
122
+ }
105
123
  `}}},sortableTiles:{label:"Sortable Tiles",examples:{basic:{react:m.code`
106
124
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
107
125
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
@@ -208,4 +226,4 @@ function Component() {
208
226
  </div>
209
227
  )
210
228
  }
211
- `}}}}},V={"Content Tiles":P};exports.ContentTile=g;exports.ContentTileList=b;exports.MANIFEST=V;
229
+ `}}}}},G={"Content Tiles":q};exports.ContentTile=g;exports.ContentTileList=w;exports.MANIFEST=G;
package/lib/index.es.js CHANGED
@@ -1,9 +1,9 @@
1
- import { Metadata as k, cl as o, contentOf as u, Icon as g } from "@sps-woodland/core";
2
- import * as s from "react";
3
- import { grid as h } from "@sps-woodland/tokens";
4
- import { code as d } from "@spscommerce/utils";
5
- var S = "_85dplj0", E = "_85dplj1";
6
- function O(e, r, t) {
1
+ import { Metadata as f, selectChildren as L, cl as o, contentOf as g, Icon as w } from "@sps-woodland/core";
2
+ import * as a from "react";
3
+ import { grid as O } from "@sps-woodland/tokens";
4
+ import { code as p } from "@spscommerce/utils";
5
+ var _ = "_85dplj0", x = "_85dplj1";
6
+ function D(e, r, t) {
7
7
  return r in e ? Object.defineProperty(e, r, {
8
8
  value: t,
9
9
  enumerable: !0,
@@ -11,85 +11,92 @@ function O(e, r, t) {
11
11
  writable: !0
12
12
  }) : e[r] = t, e;
13
13
  }
14
- function b(e, r) {
14
+ function T(e, r) {
15
15
  var t = Object.keys(e);
16
16
  if (Object.getOwnPropertySymbols) {
17
17
  var n = Object.getOwnPropertySymbols(e);
18
- r && (n = n.filter(function(a) {
19
- return Object.getOwnPropertyDescriptor(e, a).enumerable;
18
+ r && (n = n.filter(function(s) {
19
+ return Object.getOwnPropertyDescriptor(e, s).enumerable;
20
20
  })), t.push.apply(t, n);
21
21
  }
22
22
  return t;
23
23
  }
24
- function v(e) {
24
+ function k(e) {
25
25
  for (var r = 1; r < arguments.length; r++) {
26
26
  var t = arguments[r] != null ? arguments[r] : {};
27
- r % 2 ? b(Object(t), !0).forEach(function(n) {
28
- O(e, n, t[n]);
29
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : b(Object(t)).forEach(function(n) {
27
+ r % 2 ? T(Object(t), !0).forEach(function(n) {
28
+ D(e, n, t[n]);
29
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : T(Object(t)).forEach(function(n) {
30
30
  Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
31
31
  });
32
32
  }
33
33
  return e;
34
34
  }
35
- var D = (e, r, t) => {
35
+ var R = (e, r, t) => {
36
36
  for (var n of Object.keys(e)) {
37
- var a;
38
- if (e[n] !== ((a = r[n]) !== null && a !== void 0 ? a : t[n]))
37
+ var s;
38
+ if (e[n] !== ((s = r[n]) !== null && s !== void 0 ? s : t[n]))
39
39
  return !1;
40
40
  }
41
41
  return !0;
42
- }, w = (e) => (r) => {
43
- var t = e.defaultClassName, n = v(v({}, e.defaultVariants), r);
44
- for (var a in n) {
45
- var p, c = (p = n[a]) !== null && p !== void 0 ? p : e.defaultVariants[a];
42
+ }, C = (e) => (r) => {
43
+ var t = e.defaultClassName, n = k(k({}, e.defaultVariants), r);
44
+ for (var s in n) {
45
+ var m, c = (m = n[s]) !== null && m !== void 0 ? m : e.defaultVariants[s];
46
46
  if (c != null) {
47
47
  var l = c;
48
48
  typeof l == "boolean" && (l = l === !0 ? "true" : "false");
49
49
  var i = (
50
50
  // @ts-expect-error
51
- e.variantClassNames[a][l]
51
+ e.variantClassNames[s][l]
52
52
  );
53
53
  i && (t += " " + i);
54
54
  }
55
55
  }
56
- for (var [m, f] of e.compoundVariants)
57
- D(m, n, e.defaultVariants) && (t += " " + f);
56
+ for (var [d, u] of e.compoundVariants)
57
+ R(d, n, e.defaultVariants) && (t += " " + u);
58
58
  return t;
59
- }, _ = w({ defaultClassName: "_1k4ncnf4", variantClassNames: { error: { true: "_1k4ncnf5" }, warning: { true: "_1k4ncnf6" }, disabled: { true: "_1k4ncnf7" } }, defaultVariants: { error: !1, warning: !1, disabled: !1 }, compoundVariants: [] }), x = "_1k4ncnf0", L = w({ defaultClassName: "_1k4ncnf1", variantClassNames: { disabled: { true: "_1k4ncnf2" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), R = "_1k4ncnf3", C = w({ defaultClassName: "", variantClassNames: { error: { true: "_1k4ncnf8" }, warning: { true: "_1k4ncnf9" }, disabled: { true: "_1k4ncnfa" } }, defaultVariants: { error: !1, disabled: !1, warning: !1 }, compoundVariants: [] }), A = "_1k4ncnfb", I = "_1k4ncnfc", j = "_1k4ncnfe", P = "_1k4ncnfd";
60
- function T({
59
+ }, A = C({ defaultClassName: "_1k4ncnf4", variantClassNames: { error: { true: "_1k4ncnf5" }, warning: { true: "_1k4ncnf6" }, disabled: { true: "_1k4ncnf7" } }, defaultVariants: { error: !1, warning: !1, disabled: !1 }, compoundVariants: [] }), I = "_1k4ncnf0", j = C({ defaultClassName: "_1k4ncnf1", variantClassNames: { disabled: { true: "_1k4ncnf2" } }, defaultVariants: { disabled: !1 }, compoundVariants: [] }), P = "_1k4ncnf3", y = C({ defaultClassName: "", variantClassNames: { error: { true: "_1k4ncnf8" }, warning: { true: "_1k4ncnf9" }, disabled: { true: "_1k4ncnfa" } }, defaultVariants: { error: !1, disabled: !1, warning: !1 }, compoundVariants: [] }), V = "_1k4ncnfb", H = "_1k4ncnff", G = "_1k4ncnfc", M = "_1k4ncnfe", K = "_1k4ncnfd";
60
+ function N({
61
61
  className: e,
62
62
  href: r,
63
63
  icon: t,
64
64
  error: n = !1,
65
- errorIcon: a,
66
- title: p,
65
+ errorIcon: s,
66
+ title: m,
67
67
  warning: c = !1,
68
68
  warningIcon: l,
69
69
  disabled: i = !1,
70
- target: m,
71
- onClick: f,
72
- ...N
70
+ target: d,
71
+ onClick: u,
72
+ tagElement: S,
73
+ ...E
73
74
  }) {
74
- return /* @__PURE__ */ s.createElement("div", { className: o(h[3], x, e), ...N }, /* @__PURE__ */ s.createElement(
75
+ const [v] = L(S, [
76
+ {
77
+ custom: (b) => f.isWoodlandComponent(b) && f.get(b).name === "Tag"
78
+ }
79
+ ]);
80
+ return /* @__PURE__ */ a.createElement("div", { className: o(O[3], I, e), ...E }, /* @__PURE__ */ a.createElement(
75
81
  "a",
76
82
  {
77
83
  href: i ? void 0 : r,
78
- className: o(_({ error: n, warning: c, disabled: i }), E),
79
- target: m,
80
- onClick: f
84
+ className: o(A({ error: n, warning: c, disabled: i }), x),
85
+ target: d,
86
+ onClick: u
81
87
  },
82
- (c || n) && /* @__PURE__ */ s.createElement("div", { className: A }, c && (l ? u(l) : /* @__PURE__ */ s.createElement(
83
- g,
88
+ (c || n) && /* @__PURE__ */ a.createElement("div", { className: V }, c && (l ? g(l) : /* @__PURE__ */ a.createElement(
89
+ w,
84
90
  {
85
91
  icon: "status-warning",
86
- className: o(C({ warning: c, disabled: i }))
92
+ className: o(y({ warning: c, disabled: i }))
87
93
  }
88
- )), n && (a ? u(a) : /* @__PURE__ */ s.createElement(g, { icon: "ban", className: o(C({ error: n, disabled: i })) }))),
89
- /* @__PURE__ */ s.createElement("div", null, /* @__PURE__ */ s.createElement("div", { className: o(R) }, typeof t == "string" ? /* @__PURE__ */ s.createElement("img", { className: o(L({ disabled: i })), src: t, alt: "" }) : u(t)), /* @__PURE__ */ s.createElement("div", { className: o(I) }, /* @__PURE__ */ s.createElement("p", { className: o(P) }, p, m === "_blank" && /* @__PURE__ */ s.createElement(g, { icon: "tabs", className: o(j) }))))
94
+ )), n && (s ? g(s) : /* @__PURE__ */ a.createElement(w, { icon: "ban", className: o(y({ error: n, disabled: i })) }))),
95
+ v[0] && /* @__PURE__ */ a.createElement("div", { className: o(H) }, v[0]),
96
+ /* @__PURE__ */ a.createElement("div", null, /* @__PURE__ */ a.createElement("div", { className: o(P) }, typeof t == "string" ? /* @__PURE__ */ a.createElement("img", { className: o(j({ disabled: i })), src: t, alt: "" }) : g(t)), /* @__PURE__ */ a.createElement("div", { className: o(G) }, /* @__PURE__ */ a.createElement("p", { className: o(K) }, m, d === "_blank" && /* @__PURE__ */ a.createElement(w, { icon: "tabs", className: o(M) }))))
90
97
  ));
91
98
  }
92
- k.set(T, {
99
+ f.set(N, {
93
100
  name: "Content Tile",
94
101
  props: {
95
102
  href: { type: "string" },
@@ -104,22 +111,22 @@ k.set(T, {
104
111
  onClick: { type: "() => void" }
105
112
  }
106
113
  });
107
- function y({
114
+ function h({
108
115
  children: e,
109
116
  className: r,
110
117
  ...t
111
118
  }) {
112
- return /* @__PURE__ */ s.createElement("div", { className: o(S, r), ...t }, e);
119
+ return /* @__PURE__ */ a.createElement("div", { className: o(_, r), ...t }, e);
113
120
  }
114
- k.set(y, { name: "Content Tile List" });
115
- const V = {
116
- components: [T, y],
121
+ f.set(h, { name: "Content Tile List" });
122
+ const q = {
123
+ components: [N, h],
117
124
  examples: {
118
125
  basic: {
119
126
  label: "Basic",
120
127
  examples: {
121
128
  basic: {
122
- react: d`
129
+ react: p`
123
130
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
124
131
 
125
132
  function Component() {
@@ -196,7 +203,7 @@ const V = {
196
203
  label: "Single Tile",
197
204
  examples: {
198
205
  basic: {
199
- react: d`
206
+ react: p`
200
207
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
201
208
  function Component() {
202
209
  return (
@@ -214,7 +221,7 @@ const V = {
214
221
  `
215
222
  },
216
223
  error: {
217
- react: d`
224
+ react: p`
218
225
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
219
226
 
220
227
  function Component() {
@@ -235,6 +242,27 @@ const V = {
235
242
  )
236
243
  }
237
244
  `
245
+ },
246
+ tag: {
247
+ react: p`
248
+ import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
249
+ import { Tag } from "@sps-woodland/tag";
250
+
251
+ function Component() {
252
+ return (
253
+ <>
254
+ <ContentTileList>
255
+ <ContentTile
256
+ title="Community"
257
+ icon={"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg"}
258
+ id="tagged-app"
259
+ tagElement={<Tag className="px-2 py-1" kind="success">New</Tag>}
260
+ />
261
+ </ContentTileList>
262
+ </>
263
+ );
264
+ }
265
+ `
238
266
  }
239
267
  }
240
268
  },
@@ -242,7 +270,7 @@ const V = {
242
270
  label: "Sortable Tiles",
243
271
  examples: {
244
272
  basic: {
245
- react: d`
273
+ react: p`
246
274
  import { ContentTileList, ContentTile } from "@sps-woodland/content-tiles";
247
275
  import { SortingHeader, SortingHeaderCell } from "@sps-woodland/sorting-header";
248
276
  import { grid } from "@sps-woodland/tokens";
@@ -353,11 +381,11 @@ function Component() {
353
381
  }
354
382
  }
355
383
  }
356
- }, K = {
357
- "Content Tiles": V
384
+ }, Y = {
385
+ "Content Tiles": q
358
386
  };
359
387
  export {
360
- T as ContentTile,
361
- y as ContentTileList,
362
- K as MANIFEST
388
+ N as ContentTile,
389
+ h as ContentTileList,
390
+ Y as MANIFEST
363
391
  };
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- ._85dplj0{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}._85dplj1{color:#000}._85dplj1:hover{text-decoration:none;color:#000}._1k4ncnf0{transition:all .25s ease}._1k4ncnf1{height:3.75rem;width:3.75rem}._1k4ncnf2{opacity:.25}._1k4ncnf3{height:3.75rem;width:3.75rem;margin-left:auto;margin-right:auto;margin-top:1rem;margin-bottom:1rem}._1k4ncnf4{display:block;background-color:#fff;border-radius:.25rem;border-color:#d2d4d4;border-style:solid;border-width:.0625rem;cursor:pointer;height:8.625rem;text-decoration:none}._1k4ncnf4:hover{border-color:#027db8;color:#000}._1k4ncnf5{border-color:#de012e}._1k4ncnf5:hover{border-color:#de012e;cursor:not-allowed}._1k4ncnf6{border-color:#e77609}._1k4ncnf7{border-color:#d2d4d4;background-color:#f3f4f4;color:#d2d4d4}._1k4ncnf7:hover{border-color:#d2d4d4;cursor:not-allowed}._1k4ncnf8{color:#de012e}._1k4ncnf9{color:#e77609}._1k4ncnfa{color:#717779}._1k4ncnfb{position:absolute;padding:.5rem}._1k4ncnfc{text-align:center;padding-left:.5rem;padding-right:.5rem}._1k4ncnfd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._1k4ncnfe{text-align:center;padding:.5rem;color:#027db8}
1
+ ._85dplj0{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}._85dplj1{color:#000}._85dplj1:hover{text-decoration:none;color:#000}._1k4ncnf0{transition:all .25s ease}._1k4ncnf1{height:3.75rem;width:3.75rem}._1k4ncnf2{opacity:.25}._1k4ncnf3{height:3.75rem;width:3.75rem;margin-left:auto;margin-right:auto;margin-top:1rem;margin-bottom:1rem}._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}._1k4ncnf4:hover{border-color:#027db8;color:#000}._1k4ncnf5{border-color:#de012e}._1k4ncnf5:hover{border-color:#de012e;cursor:not-allowed}._1k4ncnf6{border-color:#e77609}._1k4ncnf7{border-color:#d2d4d4;background-color:#f3f4f4;color:#d2d4d4}._1k4ncnf7:hover{border-color:#d2d4d4;cursor:not-allowed}._1k4ncnf8{color:#de012e}._1k4ncnf9{color:#e77609}._1k4ncnfa{color:#717779}._1k4ncnfb{position:absolute;padding:.5rem}._1k4ncnfc{text-align:center;padding-left:.5rem;padding-right:.5rem}._1k4ncnfd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._1k4ncnfe{text-align:center;padding:.5rem;color:#027db8}._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.9.0",
4
+ "version": "8.10.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/content-tiles",
@@ -29,8 +29,8 @@
29
29
  "@spscommerce/utils": "^7.0.0",
30
30
  "react": "^16.14.0",
31
31
  "react-dom": "^16.14.0",
32
- "@sps-woodland/core": "8.9.0",
33
- "@sps-woodland/tokens": "8.9.0"
32
+ "@sps-woodland/core": "8.10.0",
33
+ "@sps-woodland/tokens": "8.10.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@spscommerce/utils": "^7.0.0",
@@ -38,8 +38,8 @@
38
38
  "@vanilla-extract/recipes": "^0.2.5",
39
39
  "react": "^16.14.0",
40
40
  "react-dom": "^16.14.0",
41
- "@sps-woodland/core": "8.9.0",
42
- "@sps-woodland/tokens": "8.9.0"
41
+ "@sps-woodland/core": "8.10.0",
42
+ "@sps-woodland/tokens": "8.10.0"
43
43
  },
44
44
  "scripts": {
45
45
  "build": "pnpm run build:js && pnpm run build:types",