@sps-woodland/tags 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 (7) hide show
  1. package/lib/{index.es.js → index.js} +99 -99
  2. package/lib/index.umd.cjs +138 -0
  3. package/lib/style.css +1 -1
  4. package/package.json +10 -10
  5. package/sps-woodland-tags-7.19.0.tgz +0 -0
  6. package/vite.config.js +13 -4
  7. package/lib/index.cjs.js +0 -138
package/lib/{index.es.js → index.js} RENAMED
@@ -1,105 +1,105 @@
1
- import * as t from "react";
2
- import { Metadata as b, cl as m, Icon as v } from "@sps-woodland/core";
3
- import { code as i } from "@spscommerce/utils";
4
- function K(a, r, e) {
5
- return r in a ? Object.defineProperty(a, r, {
1
+ import * as r from "react";
2
+ import { Metadata as k, cl as g, Icon as v } from "@sps-woodland/core";
3
+ import { code as t } from "@spscommerce/utils";
4
+ function C(a, _, e) {
5
+ return _ in a ? Object.defineProperty(a, _, {
6
6
  value: e,
7
7
  enumerable: !0,
8
8
  configurable: !0,
9
9
  writable: !0
10
- }) : a[r] = e, a;
10
+ }) : a[_] = e, a;
11
11
  }
12
- function k(a, r) {
12
+ function h(a, _) {
13
13
  var e = Object.keys(a);
14
14
  if (Object.getOwnPropertySymbols) {
15
- var l = Object.getOwnPropertySymbols(a);
16
- r && (l = l.filter(function(n) {
17
- return Object.getOwnPropertyDescriptor(a, n).enumerable;
18
- })), e.push.apply(e, l);
15
+ var s = Object.getOwnPropertySymbols(a);
16
+ _ && (s = s.filter(function(o) {
17
+ return Object.getOwnPropertyDescriptor(a, o).enumerable;
18
+ })), e.push.apply(e, s);
19
19
  }
20
20
  return e;
21
21
  }
22
- function y(a) {
23
- for (var r = 1; r < arguments.length; r++) {
24
- var e = arguments[r] != null ? arguments[r] : {};
25
- r % 2 ? k(Object(e), !0).forEach(function(l) {
26
- K(a, l, e[l]);
27
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) : k(Object(e)).forEach(function(l) {
28
- Object.defineProperty(a, l, Object.getOwnPropertyDescriptor(e, l));
22
+ function T(a) {
23
+ for (var _ = 1; _ < arguments.length; _++) {
24
+ var e = arguments[_] != null ? arguments[_] : {};
25
+ _ % 2 ? h(Object(e), !0).forEach(function(s) {
26
+ C(a, s, e[s]);
27
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) : h(Object(e)).forEach(function(s) {
28
+ Object.defineProperty(a, s, Object.getOwnPropertyDescriptor(e, s));
29
29
  });
30
30
  }
31
31
  return a;
32
32
  }
33
- var V = (a, r, e) => {
34
- for (var l of Object.keys(a)) {
35
- var n;
36
- if (a[l] !== ((n = r[l]) !== null && n !== void 0 ? n : e[l]))
33
+ var N = (a, _, e) => {
34
+ for (var s of Object.keys(a)) {
35
+ var o;
36
+ if (a[s] !== ((o = _[s]) !== null && o !== void 0 ? o : e[s]))
37
37
  return !1;
38
38
  }
39
39
  return !0;
40
- }, u = (a) => (r) => {
41
- var e = a.defaultClassName, l = y(y({}, a.defaultVariants), r);
42
- for (var n in l) {
43
- var c, s = (c = l[n]) !== null && c !== void 0 ? c : a.defaultVariants[n];
44
- if (s != null) {
45
- var o = s;
46
- typeof o == "boolean" && (o = o === !0 ? "true" : "false");
47
- var d = a.variantClassNames[n][o];
48
- d && (e += " " + d);
40
+ }, d = (a) => (_) => {
41
+ var e = a.defaultClassName, s = T(T({}, a.defaultVariants), _);
42
+ for (var o in s) {
43
+ var i, l = (i = s[o]) !== null && i !== void 0 ? i : a.defaultVariants[o];
44
+ if (l != null) {
45
+ var n = l;
46
+ typeof n == "boolean" && (n = n === !0 ? "true" : "false");
47
+ var p = a.variantClassNames[o][n];
48
+ p && (e += " " + p);
49
49
  }
50
50
  }
51
- for (var [p, T] of a.compoundVariants)
52
- V(p, l, a.defaultVariants) && (e += " " + T);
51
+ for (var [u, f] of a.compoundVariants)
52
+ N(u, s, a.defaultVariants) && (e += " " + f);
53
53
  return e;
54
- }, _ = u({ defaultClassName: "_160drw10", variantClassNames: { kind: { blue: "_160drw11", gray: "_160drw12" }, disabled: { true: "_160drw13", false: "_160drw14" } }, defaultVariants: { kind: "blue", disabled: !1 }, compoundVariants: [] }), O = "_160drw1e", E = "_160drw1d", h = u({ defaultClassName: "_160drw15", variantClassNames: { link: { true: "_160drw16", false: "_160drw17" }, disabled: { true: "_160drw18", false: "_160drw19" }, addOrRemove: { true: "_160drw1a", false: "_160drw1b" } }, defaultVariants: { link: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, addOrRemove: !0 }, "_160drw1c"]] }), x = "_160drw1f";
55
- function C({
54
+ }, K = d({ defaultClassName: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw10", variantClassNames: { kind: { blue: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw11", gray: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw12" }, disabled: { true: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw13", false: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw14" } }, defaultVariants: { kind: "blue", disabled: !1 }, compoundVariants: [] }), V = "pkg_sps-woodland_tags__version_7_19_0__hash_160drw1e", O = "pkg_sps-woodland_tags__version_7_19_0__hash_160drw1d", E = d({ defaultClassName: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw15", variantClassNames: { link: { true: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw16", false: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw17" }, disabled: { true: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw18", false: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw19" }, addOrRemove: { true: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw1a", false: "pkg_sps-woodland_tags__version_7_19_0__hash_160drw1b" } }, defaultVariants: { link: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, addOrRemove: !0 }, "pkg_sps-woodland_tags__version_7_19_0__hash_160drw1c"]] }), x = "pkg_sps-woodland_tags__version_7_19_0__hash_160drw1f";
55
+ function b({
56
56
  children: a,
57
- className: r,
57
+ className: _,
58
58
  onClick: e,
59
- disabled: l,
60
- href: n,
61
- kind: c,
62
- onAdd: s,
63
- onRemove: o,
64
- ...d
59
+ disabled: s,
60
+ href: o,
61
+ kind: i,
62
+ onAdd: l,
63
+ onRemove: n,
64
+ ...p
65
65
  }) {
66
- const p = t.Children.toArray(a).filter((g) => typeof g == "string").join("");
67
- t.useEffect(() => {
68
- if (o && s)
66
+ const u = r.Children.toArray(a).filter((c) => typeof c == "string").join("");
67
+ r.useEffect(() => {
68
+ if (n && l)
69
69
  throw new Error("Clickable tag should have onRemove or onAdd, not both");
70
- }, [s, o]);
71
- function T(g) {
72
- s ? s() : o && o(), g.stopPropagation();
70
+ }, [l, n]);
71
+ function f(c) {
72
+ l ? l() : n && n(), c.stopPropagation();
73
73
  }
74
- function w(g) {
75
- g.stopPropagation(), e && e(g);
74
+ function y(c) {
75
+ c.stopPropagation(), e && e(c);
76
76
  }
77
- return /* @__PURE__ */ t.createElement("div", { className: m(_({ kind: c, disabled: l }), r), ...d }, /* @__PURE__ */ t.createElement(
77
+ return /* @__PURE__ */ r.createElement("div", { className: g(K({ kind: i, disabled: s }), _), ...p }, /* @__PURE__ */ r.createElement(
78
78
  "span",
79
79
  {
80
- className: m(
81
- h({
82
- link: !!n || !!e,
83
- disabled: l,
84
- addOrRemove: s || o
80
+ className: g(
81
+ E({
82
+ link: !!o || !!e,
83
+ disabled: s,
84
+ addOrRemove: l || n
85
85
  })
86
86
  ),
87
- onClick: w,
88
- title: p
87
+ onClick: y,
88
+ title: u
89
89
  },
90
- n ? /* @__PURE__ */ t.createElement("a", { className: x, href: n }, a) : a
91
- ), (s || o) && !l && /* @__PURE__ */ t.createElement(
90
+ o ? /* @__PURE__ */ r.createElement("a", { className: x, href: o }, a) : a
91
+ ), (l || n) && !s && /* @__PURE__ */ r.createElement(
92
92
  "div",
93
93
  {
94
- className: E,
95
- onClick: l ? void 0 : T,
94
+ className: O,
95
+ onClick: s ? void 0 : f,
96
96
  tabIndex: -1,
97
- "aria-label": s ? "Add" : "Remove"
97
+ "aria-label": l ? "Add" : "Remove"
98
98
  },
99
- /* @__PURE__ */ t.createElement(v, { className: O, "aria-hidden": "true", icon: s ? "plus-sign" : "x" })
99
+ /* @__PURE__ */ r.createElement(v, { className: V, "aria-hidden": "true", icon: l ? "plus-sign" : "x" })
100
100
  ));
101
101
  }
102
- b.set(C, {
102
+ k.set(b, {
103
103
  name: "Clickable Tag",
104
104
  props: {
105
105
  disabled: { type: "boolean", default: "false" },
@@ -109,7 +109,7 @@ b.set(C, {
109
109
  onRemove: { type: "() => void" }
110
110
  }
111
111
  });
112
- var F = u({ defaultClassName: "_5f3efi0", variantClassNames: { kind: { default: "_5f3efi1", key: "_5f3efi2", warning: "_5f3efi3", error: "_5f3efi4", pending: "_5f3efi5", success: "_5f3efi6", info: "_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), q = u({ defaultClassName: "_5f3efi8", variantClassNames: { kind: { default: "_5f3efi9", key: "_5f3efia", warning: "_5f3efib", error: "_5f3efic", pending: "_5f3efid", success: "_5f3efie", info: "_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
112
+ var F = d({ defaultClassName: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi0", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi1", key: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi2", warning: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi3", error: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi4", pending: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi5", success: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi6", info: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), q = d({ defaultClassName: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi8", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi9", key: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efia", warning: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efib", error: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efic", pending: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efid", success: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efie", info: "pkg_sps-woodland_tags__version_7_19_0__hash_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
113
113
  const P = Object.freeze({
114
114
  default: "info-circle",
115
115
  key: "info-circle",
@@ -119,36 +119,36 @@ const P = Object.freeze({
119
119
  success: "status-ok",
120
120
  info: "info-circle"
121
121
  });
122
- function f({
122
+ function m({
123
123
  children: a,
124
- className: r,
124
+ className: _,
125
125
  kind: e = "default",
126
- icon: l,
127
- ...n
126
+ icon: s,
127
+ ...o
128
128
  }) {
129
- return /* @__PURE__ */ t.createElement("span", { className: m(F({ kind: e }), r), ...n }, l && /* @__PURE__ */ t.createElement(v, { className: m(q({ kind: e })), icon: P[e] }), a);
129
+ return /* @__PURE__ */ r.createElement("span", { className: g(F({ kind: e }), _), ...o }, s && /* @__PURE__ */ r.createElement(v, { className: g(q({ kind: e })), icon: P[e] }), a);
130
130
  }
131
- b.set(f, {
131
+ k.set(m, {
132
132
  name: "Tag",
133
133
  props: {
134
134
  kind: { type: "TagKind", default: "default" },
135
135
  icon: { type: "boolean", default: "false" }
136
136
  }
137
137
  });
138
- var j = "c357iq0", I = "c357iq1", R = "c357iqc", D = u({ defaultClassName: "c357iq2", variantClassNames: { href: { true: "c357iq3", false: "c357iq4" }, kind: { default: "c357iq5", key: "c357iq6", warning: "c357iq7", error: "c357iq8", pending: "c357iq9", success: "c357iqa", info: "c357iqb" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
139
- function N({
138
+ var j = "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq0", I = "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq1", R = "pkg_sps-woodland_tags__version_7_19_0__hash_c357iqc", D = d({ defaultClassName: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq2", variantClassNames: { href: { true: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq3", false: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq4" }, kind: { default: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq5", key: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq6", warning: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq7", error: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq8", pending: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iq9", success: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iqa", info: "pkg_sps-woodland_tags__version_7_19_0__hash_c357iqb" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
139
+ function w({
140
140
  children: a,
141
- className: r,
141
+ className: _,
142
142
  color: e = "default",
143
- href: l,
144
- icon: n,
145
- tagKey: c,
146
- value: s,
147
- ...o
143
+ href: s,
144
+ icon: o,
145
+ tagKey: i,
146
+ value: l,
147
+ ...n
148
148
  }) {
149
- return /* @__PURE__ */ t.createElement("span", { className: m(j, r), ...o }, /* @__PURE__ */ t.createElement(f, { className: m(I), icon: n, kind: e }, c), /* @__PURE__ */ t.createElement(f, { className: m(D({ href: !!l, kind: e })) }, l ? /* @__PURE__ */ t.createElement("a", { className: R, href: l }, s) : s));
149
+ return /* @__PURE__ */ r.createElement("span", { className: g(j, _), ...n }, /* @__PURE__ */ r.createElement(m, { className: g(I), icon: o, kind: e }, i), /* @__PURE__ */ r.createElement(m, { className: g(D({ href: !!s, kind: e })) }, s ? /* @__PURE__ */ r.createElement("a", { className: R, href: s }, l) : l));
150
150
  }
151
- b.set(N, {
151
+ k.set(w, {
152
152
  name: "Key Value Tag",
153
153
  props: {
154
154
  color: { type: "TagKind", default: "key" },
@@ -159,13 +159,13 @@ b.set(N, {
159
159
  }
160
160
  });
161
161
  const L = {
162
- components: [C],
162
+ components: [b],
163
163
  examples: {
164
164
  basic: {
165
165
  label: "Basic Tag",
166
166
  examples: {
167
167
  basic: {
168
- react: i`
168
+ react: t`
169
169
  import { ClickableTag } from "@sps-woodland/tags";
170
170
 
171
171
  function Component() {
@@ -179,7 +179,7 @@ const L = {
179
179
  `
180
180
  },
181
181
  disabled: {
182
- react: i`
182
+ react: t`
183
183
  import { ClickableTag } from "@sps-woodland/tags";
184
184
 
185
185
  function Component() {
@@ -197,7 +197,7 @@ const L = {
197
197
  label: "Button",
198
198
  examples: {
199
199
  remove: {
200
- react: i`
200
+ react: t`
201
201
  import { ClickableTag } from "@sps-woodland/tags";
202
202
 
203
203
  function Component() {
@@ -211,7 +211,7 @@ const L = {
211
211
  `
212
212
  },
213
213
  add: {
214
- react: i`
214
+ react: t`
215
215
  import { ClickableTag } from "@sps-woodland/tags";
216
216
 
217
217
  function Component() {
@@ -230,7 +230,7 @@ const L = {
230
230
  label: "Link",
231
231
  examples: {
232
232
  basic: {
233
- react: i`
233
+ react: t`
234
234
  import { ClickableTag } from "@sps-woodland/tags";
235
235
 
236
236
  function Component() {
@@ -244,7 +244,7 @@ const L = {
244
244
  `
245
245
  },
246
246
  button: {
247
- react: i`
247
+ react: t`
248
248
  import { ClickableTag } from "@sps-woodland/tags";
249
249
 
250
250
  function Component() {
@@ -261,13 +261,13 @@ const L = {
261
261
  }
262
262
  }
263
263
  }, B = {
264
- components: [f],
264
+ components: [m],
265
265
  examples: {
266
266
  basic: {
267
267
  label: "Basic Tag",
268
268
  examples: {
269
269
  basic: {
270
- react: i`
270
+ react: t`
271
271
  import { Tag } from "@sps-woodland/tag";
272
272
 
273
273
  function Component() {
@@ -291,7 +291,7 @@ const L = {
291
291
  label: "Tag with icon",
292
292
  examples: {
293
293
  basic: {
294
- react: i`
294
+ react: t`
295
295
  import { Tag } from "@sps-woodland/tag";
296
296
 
297
297
  function Component() {
@@ -313,13 +313,13 @@ const L = {
313
313
  }
314
314
  }
315
315
  }, S = {
316
- components: [N],
316
+ components: [w],
317
317
  examples: {
318
318
  basic: {
319
319
  label: "Basic",
320
320
  examples: {
321
321
  basic: {
322
- react: i`
322
+ react: t`
323
323
  import { KeyValueTag } from "@sps-woodland/tag";
324
324
 
325
325
  function Component() {
@@ -343,7 +343,7 @@ const L = {
343
343
  label: "Icon",
344
344
  examples: {
345
345
  basic: {
346
- react: i`
346
+ react: t`
347
347
  import { KeyValueTag } from "@sps-woodland/tag";
348
348
 
349
349
  function Component() {
@@ -367,7 +367,7 @@ const L = {
367
367
  label: "Link",
368
368
  examples: {
369
369
  basic: {
370
- react: i`
370
+ react: t`
371
371
  import { KeyValueTag } from "@sps-woodland/tag";
372
372
 
373
373
  function Component() {
@@ -386,9 +386,9 @@ const L = {
386
386
  "Key Value Tags": S
387
387
  };
388
388
  export {
389
- C as ClickableTag,
390
- N as KeyValueTag,
389
+ b as ClickableTag,
390
+ w as KeyValueTag,
391
391
  M as MANIFEST,
392
- f as Tag,
392
+ m as Tag,
393
393
  P as TagIcons
394
394
  };
package/lib/index.umd.cjs ADDED
@@ -0,0 +1,138 @@
1
+ (function(l,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],p):(l=typeof globalThis<"u"?globalThis:l||self,p(l.Tags={},l.React,l.core,l.utils))})(this,function(l,p,i,c){"use strict";function C(a){if(a&&a.__esModule)return a;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(o,e,s.get?s:{enumerable:!0,get:()=>a[e]})}}return o.default=a,Object.freeze(o)}const r=C(p),W="";function N(a,o,e){return o in a?Object.defineProperty(a,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):a[o]=e,a}function v(a,o){var e=Object.keys(a);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(a);o&&(s=s.filter(function(_){return Object.getOwnPropertyDescriptor(a,_).enumerable})),e.push.apply(e,s)}return e}function w(a){for(var o=1;o<arguments.length;o++){var e=arguments[o]!=null?arguments[o]:{};o%2?v(Object(e),!0).forEach(function(s){N(a,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(e)):v(Object(e)).forEach(function(s){Object.defineProperty(a,s,Object.getOwnPropertyDescriptor(e,s))})}return a}var K=(a,o,e)=>{for(var s of Object.keys(a)){var _;if(a[s]!==((_=o[s])!==null&&_!==void 0?_:e[s]))return!1}return!0},m=a=>o=>{var e=a.defaultClassName,s=w(w({},a.defaultVariants),o);for(var _ in s){var d,n=(d=s[_])!==null&&d!==void 0?d:a.defaultVariants[_];if(n!=null){var t=n;typeof t=="boolean"&&(t=t===!0?"true":"false");var f=a.variantClassNames[_][t];f&&(e+=" "+f)}}for(var[b,h]of a.compoundVariants)K(b,s,a.defaultVariants)&&(e+=" "+h);return e},V=m({defaultClassName:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw11",gray:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw13",false:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),O="pkg_sps-woodland_tags__version_7_19_0__hash_160drw1e",E="pkg_sps-woodland_tags__version_7_19_0__hash_160drw1d",q=m({defaultClassName:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw15",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw16",false:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw17"},disabled:{true:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw18",false:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw19"},addOrRemove:{true:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw1a",false:"pkg_sps-woodland_tags__version_7_19_0__hash_160drw1b"}},defaultVariants:{link:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,addOrRemove:!0},"pkg_sps-woodland_tags__version_7_19_0__hash_160drw1c"]]}),F="pkg_sps-woodland_tags__version_7_19_0__hash_160drw1f";function k({children:a,className:o,onClick:e,disabled:s,href:_,kind:d,onAdd:n,onRemove:t,...f}){const b=r.Children.toArray(a).filter(g=>typeof g=="string").join("");r.useEffect(()=>{if(t&&n)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[n,t]);function h(g){n?n():t&&t(),g.stopPropagation()}function A(g){g.stopPropagation(),e&&e(g)}return r.createElement("div",{className:i.cl(V({kind:d,disabled:s}),o),...f},r.createElement("span",{className:i.cl(q({link:!!_||!!e,disabled:s,addOrRemove:n||t})),onClick:A,title:b},_?r.createElement("a",{className:F,href:_},a):a),(n||t)&&!s&&r.createElement("div",{className:E,onClick:s?void 0:h,tabIndex:-1,"aria-label":n?"Add":"Remove"},r.createElement(i.Icon,{className:O,"aria-hidden":"true",icon:n?"plus-sign":"x"})))}i.Metadata.set(k,{name:"Clickable Tag",props:{disabled:{type:"boolean",default:"false"},href:{type:"string"},kind:{type:"ClickableTagKind",default:"blue"},onAdd:{type:"() => void"},onRemove:{type:"() => void"}}});const z="";var j=m({defaultClassName:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),P=m({defaultClassName:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi8",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi9",key:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efia",warning:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efib",error:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efic",pending:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efid",success:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efie",info:"pkg_sps-woodland_tags__version_7_19_0__hash_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const y=Object.freeze({default:"info-circle",key:"info-circle",warning:"status-warning",error:"status-error",pending:"status-in-process",success:"status-ok",info:"info-circle"});function u({children:a,className:o,kind:e="default",icon:s,..._}){return r.createElement("span",{className:i.cl(j({kind:e}),o),..._},s&&r.createElement(i.Icon,{className:i.cl(P({kind:e})),icon:y[e]}),a)}i.Metadata.set(u,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});const G="";var x="pkg_sps-woodland_tags__version_7_19_0__hash_c357iq0",I="pkg_sps-woodland_tags__version_7_19_0__hash_c357iq1",S="pkg_sps-woodland_tags__version_7_19_0__hash_c357iqc",M=m({defaultClassName:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq2",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq3",false:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq4"},kind:{default:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq5",key:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq6",warning:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq7",error:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq8",pending:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iq9",success:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iqa",info:"pkg_sps-woodland_tags__version_7_19_0__hash_c357iqb"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function T({children:a,className:o,color:e="default",href:s,icon:_,tagKey:d,value:n,...t}){return r.createElement("span",{className:i.cl(x,o),...t},r.createElement(u,{className:i.cl(I),icon:_,kind:e},d),r.createElement(u,{className:i.cl(M({href:!!s,kind:e}))},s?r.createElement("a",{className:S,href:s},n):n))}i.Metadata.set(T,{name:"Key Value Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},icon:{type:"boolean",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const R={components:[k],examples:{basic:{label:"Basic Tag",examples:{basic:{react:c.code`
2
+ import { ClickableTag } from "@sps-woodland/tags";
3
+
4
+ function Component() {
5
+ return (
6
+ <>
7
+ <ClickableTag className="mr-1">Blue</ClickableTag>
8
+ <ClickableTag className="mr-1" kind="gray">Gray</ClickableTag>
9
+ </>
10
+ );
11
+ }
12
+ `},disabled:{react:c.code`
13
+ import { ClickableTag } from "@sps-woodland/tags";
14
+
15
+ function Component() {
16
+ return (
17
+ <>
18
+ <ClickableTag disabled>Disabled</ClickableTag>
19
+ </>
20
+ );
21
+ }
22
+ `}}},button:{label:"Button",examples:{remove:{react:c.code`
23
+ import { ClickableTag } from "@sps-woodland/tags";
24
+
25
+ function Component() {
26
+ return (
27
+ <>
28
+ <ClickableTag className="mr-1" onRemove={() => console.log("removed")}>One</ClickableTag>
29
+ <ClickableTag className="mr-1" onRemove={() => console.log("removed")} kind="gray">Two</ClickableTag>
30
+ </>
31
+ );
32
+ }
33
+ `},add:{react:c.code`
34
+ import { ClickableTag } from "@sps-woodland/tags";
35
+
36
+ function Component() {
37
+ return (
38
+ <>
39
+ <ClickableTag className="mr-1" onAdd={() => console.log("added")}>One</ClickableTag>
40
+ <ClickableTag className="mr-1" onAdd={() => console.log("added")} kind="gray">Two</ClickableTag>
41
+ </>
42
+ );
43
+ }
44
+ `}}},link:{label:"Link",examples:{basic:{react:c.code`
45
+ import { ClickableTag } from "@sps-woodland/tags";
46
+
47
+ function Component() {
48
+ return (
49
+ <>
50
+ <ClickableTag className="mr-1" href="https://google.com">Link</ClickableTag>
51
+ <ClickableTag className="mr-1" onClick={() => window.alert("hi")} kind="gray">Link</ClickableTag>
52
+ </>
53
+ );
54
+ }
55
+ `},button:{react:c.code`
56
+ import { ClickableTag } from "@sps-woodland/tags";
57
+
58
+ function Component() {
59
+ return (
60
+ <>
61
+ <ClickableTag className="mr-1" href="https://google.com" onRemove={() => console.log("removed")}>Remove</ClickableTag>
62
+ <ClickableTag className="mr-1" onClick={() => window.alert("hi")} onAdd={() => console.log("added")} kind="gray">Add</ClickableTag>
63
+ </>
64
+ );
65
+ }
66
+ `}}}}},D={components:[u],examples:{basic:{label:"Basic Tag",examples:{basic:{react:c.code`
67
+ import { Tag } from "@sps-woodland/tag";
68
+
69
+ function Component() {
70
+ return (
71
+ <>
72
+ <Tag className="mr-1 mb-1">Default</Tag>
73
+ <Tag className="mr-1 mb-1" kind="key">Key</Tag>
74
+ <Tag className="mr-1 mb-1" kind="warning">Warning</Tag>
75
+ <Tag className="mr-1 mb-1" kind="error">Error</Tag>
76
+ <Tag className="mr-1 mb-1" kind="pending">Pending</Tag>
77
+ <Tag className="mr-1 mb-1" kind="success">Success</Tag>
78
+ <Tag className="mr-1 mb-1" kind="info">Info</Tag>
79
+ </>
80
+ )
81
+ }
82
+ `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:c.code`
83
+ import { Tag } from "@sps-woodland/tag";
84
+
85
+ function Component() {
86
+ return (
87
+ <>
88
+ <Tag className="mr-1 mb-1" icon>Default</Tag>
89
+ <Tag className="mr-1 mb-1" kind="key" icon>Key</Tag>
90
+ <Tag className="mr-1 mb-1" kind="warning" icon>Warning</Tag>
91
+ <Tag className="mr-1 mb-1" kind="error" icon>Error</Tag>
92
+ <Tag className="mr-1 mb-1" kind="pending" icon>Pending</Tag>
93
+ <Tag className="mr-1 mb-1" kind="success" icon>Success</Tag>
94
+ <Tag className="mr-1 mb-1" kind="info" icon>Info</Tag>
95
+ </>
96
+ )
97
+ }
98
+ `}}}}},L={components:[T],examples:{basic:{label:"Basic",examples:{basic:{react:c.code`
99
+ import { KeyValueTag } from "@sps-woodland/tag";
100
+
101
+ function Component() {
102
+ return (
103
+ <>
104
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
105
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" />
106
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
107
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" />
108
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
109
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" />
110
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" />
111
+ </>
112
+ );
113
+ }
114
+ `}}},icon:{label:"Icon",examples:{basic:{react:c.code`
115
+ import { KeyValueTag } from "@sps-woodland/tag";
116
+
117
+ function Component() {
118
+ return (
119
+ <>
120
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
121
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
122
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
123
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
124
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
125
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
126
+ <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
127
+ </>
128
+ );
129
+ }
130
+ `}}},link:{label:"Link",examples:{basic:{react:c.code`
131
+ import { KeyValueTag } from "@sps-woodland/tag";
132
+
133
+ function Component() {
134
+ return (
135
+ <KeyValueTag tagKey="Foo" value="1234" href="https://www.google.com" />
136
+ );
137
+ }
138
+ `}}}}},B={"Clickable Tags":R,Tags:D,"Key Value Tags":L};l.ClickableTag=k,l.KeyValueTag=T,l.MANIFEST=B,l.Tag=u,l.TagIcons=y,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- ._160drw10{border-radius:.125rem;display:inline-flex;color:#09638d;font-size:.75rem;font-weight:600;height:1.125rem;line-height:.75rem;max-width:100%}._160drw11{background-color:#e6f2f8}._160drw12{background-color:#e9e9ea}._160drw13{background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;color:#717779;cursor:not-allowed}._160drw15{border-radius:.125rem;flex-grow:1;flex-shrink:1;height:1.125rem;overflow:hidden;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}._160drw16{cursor:pointer;text-decoration:underline}._160drw16:hover{color:#e6f2f8;background-color:#09638d;border-radius:.125rem}._160drw1c{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}._160drw1d{border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;color:#09638d;height:1.125rem;line-height:.75rem;padding:.125rem .25rem}._160drw1d:focus,._160drw1d:hover{background-color:#09638d;color:#e6f2f8;cursor:pointer}._160drw1e{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>._160drw1f{color:#09638d}span:hover>._160drw1f{color:#e6f2f8}._5f3efi0{border-radius:.125rem;display:inline-block;font-size:.75rem;font-weight:600;line-height:.75rem;overflow:hidden;padding:.125rem .25rem;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}._5f3efi1{background:#e9e9ea;color:#4b5356}._5f3efi2{background:#4b5356;color:#fff}._5f3efi3{background:#e7760b;color:#fff}._5f3efi4{background:#de002e;color:#fff}._5f3efi5{background:#91467f;color:#fff}._5f3efi6{background:#0b8940;color:#fff}._5f3efi7{background:#007db8;color:#fff}._5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}._5f3efi8:before{vertical-align:text-bottom}._5f3efi9{display:none}.c357iq0{display:inline-block}.c357iq1{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}.c357iq2{background:#ffffff;border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;padding:.125rem .25rem;box-shadow:.0625rem 0 #e9e9ea inset,-.0625rem 0 #e9e9ea inset,0 .0625rem #e9e9ea inset,0 -.0625rem #e9e9ea inset}.c357iq3{cursor:pointer;text-decoration:underline;color:#4b5356}.c357iq6{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}.c357iq7{box-shadow:.0625rem 0 #e7760b inset,-.0625rem 0 #e7760b inset,0 .0625rem #e7760b inset,0 -.0625rem #e7760b inset}.c357iq8{box-shadow:.0625rem 0 #de002e inset,-.0625rem 0 #de002e inset,0 .0625rem #de002e inset,0 -.0625rem #de002e inset}.c357iq9{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}.c357iqa{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}.c357iqb{box-shadow:.0625rem 0 #007db8 inset,-.0625rem 0 #007db8 inset,0 .0625rem #007db8 inset,0 -.0625rem #007db8 inset}.c357iqc,.c357iqc:hover{color:#4b5356}
1
+ .pkg_sps-woodland_tags__version_7_19_0__hash_160drw10{border-radius:.125rem;display:inline-flex;color:#09638d;font-size:.75rem;font-weight:600;height:1.125rem;line-height:.75rem;max-width:100%}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw11{background-color:#e6f2f8}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw12{background-color:#e9e9ea}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw13{background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;color:#717779;cursor:not-allowed}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw15{border-radius:.125rem;flex-grow:1;flex-shrink:1;height:1.125rem;overflow:hidden;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw16{cursor:pointer;text-decoration:underline}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw16:hover{color:#e6f2f8;background-color:#09638d;border-radius:.125rem}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1c{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1d{border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;color:#09638d;height:1.125rem;line-height:.75rem;padding:.125rem .25rem}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1d:focus,.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1d:hover{background-color:#09638d;color:#e6f2f8;cursor:pointer}.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1e{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1f{color:#09638d}span:hover>.pkg_sps-woodland_tags__version_7_19_0__hash_160drw1f{color:#e6f2f8}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi0{border-radius:.125rem;display:inline-block;font-size:.75rem;font-weight:600;line-height:.75rem;overflow:hidden;padding:.125rem .25rem;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi1{background:#e9e9ea;color:#4b5356}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi2{background:#4b5356;color:#fff}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi3{background:#e7760b;color:#fff}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi4{background:#de002e;color:#fff}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi5{background:#91467f;color:#fff}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi6{background:#0b8940;color:#fff}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi7{background:#007db8;color:#fff}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi8:before{vertical-align:text-bottom}.pkg_sps-woodland_tags__version_7_19_0__hash_5f3efi9{display:none}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq0{display:inline-block}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq1{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq2{background:#ffffff;border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;padding:.125rem .25rem;box-shadow:.0625rem 0 #e9e9ea inset,-.0625rem 0 #e9e9ea inset,0 .0625rem #e9e9ea inset,0 -.0625rem #e9e9ea inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq3{cursor:pointer;text-decoration:underline;color:#4b5356}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq6{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq7{box-shadow:.0625rem 0 #e7760b inset,-.0625rem 0 #e7760b inset,0 .0625rem #e7760b inset,0 -.0625rem #e7760b inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq8{box-shadow:.0625rem 0 #de002e inset,-.0625rem 0 #de002e inset,0 .0625rem #de002e inset,0 -.0625rem #de002e inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iq9{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iqa{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iqb{box-shadow:.0625rem 0 #007db8 inset,-.0625rem 0 #007db8 inset,0 .0625rem #007db8 inset,0 -.0625rem #007db8 inset}.pkg_sps-woodland_tags__version_7_19_0__hash_c357iqc,.pkg_sps-woodland_tags__version_7_19_0__hash_c357iqc:hover{color:#4b5356}
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@sps-woodland/tags",
3
3
  "description": "SPS Woodland Design System tag 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
  "type": "module",
11
- "main": "./lib/index.cjs.js",
10
+ "module": "./lib/index.js",
11
+ "main": "./lib/index.umd.cjs",
12
12
  "types": "./lib/index.d.ts",
13
13
  "exports": {
14
14
  ".": {
15
- "import": "./lib/index.es.js",
16
- "require": "./lib/index.cjs.js",
17
- "default": "./lib/index.cjs.js",
15
+ "require": "./lib/index.umd.cjs",
16
+ "import": "./lib/index.js",
17
+ "default": "./lib/index.js",
18
18
  "types": "./lib/index.d.ts"
19
19
  },
20
20
  "./lib/style.css": {
@@ -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": "7.17.13",
33
- "@sps-woodland/tokens": "7.17.13"
32
+ "@sps-woodland/core": "7.19.0",
33
+ "@sps-woodland/tokens": "7.19.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@spscommerce/utils": "^6.12.1",
@@ -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/tokens": "7.17.13",
42
- "@sps-woodland/core": "7.17.13"
41
+ "@sps-woodland/tokens": "7.19.0",
42
+ "@sps-woodland/core": "7.19.0"
43
43
  },
44
44
  "scripts": {
45
45
  "build": "pnpm run build:js && pnpm run build:types",
package/sps-woodland-tags-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: "Tags",
22
+ fileName: "index",
14
23
  },
15
24
  outDir: path.resolve(__dirname, "./lib"),
16
25
  emptyOutDir: false,
package/lib/index.cjs.js DELETED
@@ -1,138 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react"),c=require("@sps-woodland/core"),i=require("@spscommerce/utils");function K(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return r.default=e,Object.freeze(r)}const s=K(w);function _(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function y(e,r){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);r&&(l=l.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),a.push.apply(a,l)}return a}function v(e){for(var r=1;r<arguments.length;r++){var a=arguments[r]!=null?arguments[r]:{};r%2?y(Object(a),!0).forEach(function(l){_(e,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):y(Object(a)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))})}return e}var V=(e,r,a)=>{for(var l of Object.keys(e)){var n;if(e[l]!==((n=r[l])!==null&&n!==void 0?n:a[l]))return!1}return!0},g=e=>r=>{var a=e.defaultClassName,l=v(v({},e.defaultVariants),r);for(var n in l){var m,o=(m=l[n])!==null&&m!==void 0?m:e.defaultVariants[n];if(o!=null){var t=o;typeof t=="boolean"&&(t=t===!0?"true":"false");var f=e.variantClassNames[n][t];f&&(a+=" "+f)}}for(var[p,b]of e.compoundVariants)V(p,l,e.defaultVariants)&&(a+=" "+b);return a},O=g({defaultClassName:"_160drw10",variantClassNames:{kind:{blue:"_160drw11",gray:"_160drw12"},disabled:{true:"_160drw13",false:"_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),E="_160drw1e",h="_160drw1d",q=g({defaultClassName:"_160drw15",variantClassNames:{link:{true:"_160drw16",false:"_160drw17"},disabled:{true:"_160drw18",false:"_160drw19"},addOrRemove:{true:"_160drw1a",false:"_160drw1b"}},defaultVariants:{link:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,addOrRemove:!0},"_160drw1c"]]}),F="_160drw1f";function T({children:e,className:r,onClick:a,disabled:l,href:n,kind:m,onAdd:o,onRemove:t,...f}){const p=s.Children.toArray(e).filter(u=>typeof u=="string").join("");s.useEffect(()=>{if(t&&o)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[o,t]);function b(u){o?o():t&&t(),u.stopPropagation()}function N(u){u.stopPropagation(),a&&a(u)}return s.createElement("div",{className:c.cl(O({kind:m,disabled:l}),r),...f},s.createElement("span",{className:c.cl(q({link:!!n||!!a,disabled:l,addOrRemove:o||t})),onClick:N,title:p},n?s.createElement("a",{className:F,href:n},e):e),(o||t)&&!l&&s.createElement("div",{className:h,onClick:l?void 0:b,tabIndex:-1,"aria-label":o?"Add":"Remove"},s.createElement(c.Icon,{className:E,"aria-hidden":"true",icon:o?"plus-sign":"x"})))}c.Metadata.set(T,{name:"Clickable Tag",props:{disabled:{type:"boolean",default:"false"},href:{type:"string"},kind:{type:"ClickableTagKind",default:"blue"},onAdd:{type:"() => void"},onRemove:{type:"() => void"}}});var P=g({defaultClassName:"_5f3efi0",variantClassNames:{kind:{default:"_5f3efi1",key:"_5f3efi2",warning:"_5f3efi3",error:"_5f3efi4",pending:"_5f3efi5",success:"_5f3efi6",info:"_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),j=g({defaultClassName:"_5f3efi8",variantClassNames:{kind:{default:"_5f3efi9",key:"_5f3efia",warning:"_5f3efib",error:"_5f3efic",pending:"_5f3efid",success:"_5f3efie",info:"_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const C=Object.freeze({default:"info-circle",key:"info-circle",warning:"status-warning",error:"status-error",pending:"status-in-process",success:"status-ok",info:"info-circle"});function d({children:e,className:r,kind:a="default",icon:l,...n}){return s.createElement("span",{className:c.cl(P({kind:a}),r),...n},l&&s.createElement(c.Icon,{className:c.cl(j({kind:a})),icon:C[a]}),e)}c.Metadata.set(d,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var x="c357iq0",I="c357iq1",S="c357iqc",M=g({defaultClassName:"c357iq2",variantClassNames:{href:{true:"c357iq3",false:"c357iq4"},kind:{default:"c357iq5",key:"c357iq6",warning:"c357iq7",error:"c357iq8",pending:"c357iq9",success:"c357iqa",info:"c357iqb"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function k({children:e,className:r,color:a="default",href:l,icon:n,tagKey:m,value:o,...t}){return s.createElement("span",{className:c.cl(x,r),...t},s.createElement(d,{className:c.cl(I),icon:n,kind:a},m),s.createElement(d,{className:c.cl(M({href:!!l,kind:a}))},l?s.createElement("a",{className:S,href:l},o):o))}c.Metadata.set(k,{name:"Key Value Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},icon:{type:"boolean",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const R={components:[T],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
2
- import { ClickableTag } from "@sps-woodland/tags";
3
-
4
- function Component() {
5
- return (
6
- <>
7
- <ClickableTag className="mr-1">Blue</ClickableTag>
8
- <ClickableTag className="mr-1" kind="gray">Gray</ClickableTag>
9
- </>
10
- );
11
- }
12
- `},disabled:{react:i.code`
13
- import { ClickableTag } from "@sps-woodland/tags";
14
-
15
- function Component() {
16
- return (
17
- <>
18
- <ClickableTag disabled>Disabled</ClickableTag>
19
- </>
20
- );
21
- }
22
- `}}},button:{label:"Button",examples:{remove:{react:i.code`
23
- import { ClickableTag } from "@sps-woodland/tags";
24
-
25
- function Component() {
26
- return (
27
- <>
28
- <ClickableTag className="mr-1" onRemove={() => console.log("removed")}>One</ClickableTag>
29
- <ClickableTag className="mr-1" onRemove={() => console.log("removed")} kind="gray">Two</ClickableTag>
30
- </>
31
- );
32
- }
33
- `},add:{react:i.code`
34
- import { ClickableTag } from "@sps-woodland/tags";
35
-
36
- function Component() {
37
- return (
38
- <>
39
- <ClickableTag className="mr-1" onAdd={() => console.log("added")}>One</ClickableTag>
40
- <ClickableTag className="mr-1" onAdd={() => console.log("added")} kind="gray">Two</ClickableTag>
41
- </>
42
- );
43
- }
44
- `}}},link:{label:"Link",examples:{basic:{react:i.code`
45
- import { ClickableTag } from "@sps-woodland/tags";
46
-
47
- function Component() {
48
- return (
49
- <>
50
- <ClickableTag className="mr-1" href="https://google.com">Link</ClickableTag>
51
- <ClickableTag className="mr-1" onClick={() => window.alert("hi")} kind="gray">Link</ClickableTag>
52
- </>
53
- );
54
- }
55
- `},button:{react:i.code`
56
- import { ClickableTag } from "@sps-woodland/tags";
57
-
58
- function Component() {
59
- return (
60
- <>
61
- <ClickableTag className="mr-1" href="https://google.com" onRemove={() => console.log("removed")}>Remove</ClickableTag>
62
- <ClickableTag className="mr-1" onClick={() => window.alert("hi")} onAdd={() => console.log("added")} kind="gray">Add</ClickableTag>
63
- </>
64
- );
65
- }
66
- `}}}}},D={components:[d],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
67
- import { Tag } from "@sps-woodland/tag";
68
-
69
- function Component() {
70
- return (
71
- <>
72
- <Tag className="mr-1 mb-1">Default</Tag>
73
- <Tag className="mr-1 mb-1" kind="key">Key</Tag>
74
- <Tag className="mr-1 mb-1" kind="warning">Warning</Tag>
75
- <Tag className="mr-1 mb-1" kind="error">Error</Tag>
76
- <Tag className="mr-1 mb-1" kind="pending">Pending</Tag>
77
- <Tag className="mr-1 mb-1" kind="success">Success</Tag>
78
- <Tag className="mr-1 mb-1" kind="info">Info</Tag>
79
- </>
80
- )
81
- }
82
- `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:i.code`
83
- import { Tag } from "@sps-woodland/tag";
84
-
85
- function Component() {
86
- return (
87
- <>
88
- <Tag className="mr-1 mb-1" icon>Default</Tag>
89
- <Tag className="mr-1 mb-1" kind="key" icon>Key</Tag>
90
- <Tag className="mr-1 mb-1" kind="warning" icon>Warning</Tag>
91
- <Tag className="mr-1 mb-1" kind="error" icon>Error</Tag>
92
- <Tag className="mr-1 mb-1" kind="pending" icon>Pending</Tag>
93
- <Tag className="mr-1 mb-1" kind="success" icon>Success</Tag>
94
- <Tag className="mr-1 mb-1" kind="info" icon>Info</Tag>
95
- </>
96
- )
97
- }
98
- `}}}}},L={components:[k],examples:{basic:{label:"Basic",examples:{basic:{react:i.code`
99
- import { KeyValueTag } from "@sps-woodland/tag";
100
-
101
- function Component() {
102
- return (
103
- <>
104
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
105
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" />
106
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
107
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" />
108
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
109
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" />
110
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" />
111
- </>
112
- );
113
- }
114
- `}}},icon:{label:"Icon",examples:{basic:{react:i.code`
115
- import { KeyValueTag } from "@sps-woodland/tag";
116
-
117
- function Component() {
118
- return (
119
- <>
120
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="default" />
121
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
122
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
123
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
124
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
125
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
126
- <KeyValueTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
127
- </>
128
- );
129
- }
130
- `}}},link:{label:"Link",examples:{basic:{react:i.code`
131
- import { KeyValueTag } from "@sps-woodland/tag";
132
-
133
- function Component() {
134
- return (
135
- <KeyValueTag tagKey="Foo" value="1234" href="https://www.google.com" />
136
- );
137
- }
138
- `}}}}},B={"Clickable Tags":R,Tags:D,"Key Value Tags":L};exports.ClickableTag=T;exports.KeyValueTag=k;exports.MANIFEST=B;exports.Tag=d;exports.TagIcons=C;