@sps-woodland/tags 8.28.5 → 8.29.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.
- package/lib/index.js +54 -28
- package/lib/index.umd.cjs +29 -13
- package/lib/style.css +1 -1
- package/lib/tag/Tag.css.d.ts +2 -1
- package/lib/tag/Tag.d.ts +2 -1
- package/package.json +5 -5
package/lib/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as n from "react";
|
|
2
|
-
import { Metadata as
|
|
2
|
+
import { Metadata as u, cl as d, Icon as b } from "@sps-woodland/core";
|
|
3
3
|
import { code as r } from "@spscommerce/utils";
|
|
4
|
-
function
|
|
4
|
+
function R(a, o, e) {
|
|
5
5
|
return o in a ? Object.defineProperty(a, o, {
|
|
6
6
|
value: e,
|
|
7
7
|
enumerable: !0,
|
|
@@ -9,7 +9,7 @@ function S(a, o, e) {
|
|
|
9
9
|
writable: !0
|
|
10
10
|
}) : a[o] = e, a;
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function h(a, o) {
|
|
13
13
|
var e = Object.keys(a);
|
|
14
14
|
if (Object.getOwnPropertySymbols) {
|
|
15
15
|
var s = Object.getOwnPropertySymbols(a);
|
|
@@ -19,18 +19,18 @@ function w(a, o) {
|
|
|
19
19
|
}
|
|
20
20
|
return e;
|
|
21
21
|
}
|
|
22
|
-
function
|
|
22
|
+
function k(a) {
|
|
23
23
|
for (var o = 1; o < arguments.length; o++) {
|
|
24
24
|
var e = arguments[o] != null ? arguments[o] : {};
|
|
25
|
-
o % 2 ?
|
|
26
|
-
|
|
27
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) :
|
|
25
|
+
o % 2 ? h(Object(e), !0).forEach(function(s) {
|
|
26
|
+
R(a, s, e[s]);
|
|
27
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) : h(Object(e)).forEach(function(s) {
|
|
28
28
|
Object.defineProperty(a, s, Object.getOwnPropertyDescriptor(e, s));
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
return a;
|
|
32
32
|
}
|
|
33
|
-
var
|
|
33
|
+
var S = (a, o, e) => {
|
|
34
34
|
for (var s of Object.keys(a)) {
|
|
35
35
|
var _;
|
|
36
36
|
if (a[s] !== ((_ = o[s]) !== null && _ !== void 0 ? _ : e[s]))
|
|
@@ -38,7 +38,7 @@ var O = (a, o, e) => {
|
|
|
38
38
|
}
|
|
39
39
|
return !0;
|
|
40
40
|
}, m = (a) => (o) => {
|
|
41
|
-
var e = a.defaultClassName, s =
|
|
41
|
+
var e = a.defaultClassName, s = k(k({}, a.defaultVariants), o);
|
|
42
42
|
for (var _ in s) {
|
|
43
43
|
var t, p = (t = s[_]) !== null && t !== void 0 ? t : a.defaultVariants[_];
|
|
44
44
|
if (p != null) {
|
|
@@ -51,10 +51,10 @@ var O = (a, o, e) => {
|
|
|
51
51
|
l && (e += " " + l);
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
for (var [g,
|
|
55
|
-
|
|
54
|
+
for (var [g, w] of a.compoundVariants)
|
|
55
|
+
S(g, s, a.defaultVariants) && (e += " " + w);
|
|
56
56
|
return e;
|
|
57
|
-
},
|
|
57
|
+
}, O = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw10", variantClassNames: { kind: { blue: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw11", gray: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw12" }, disabled: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw13", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw14" }, wrap: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw15", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw16" } }, defaultVariants: { kind: "blue", disabled: !1, wrap: !1 }, compoundVariants: [] }), x = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw17", variantClassNames: { link: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw18", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw19" }, wrap: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1a", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1b" }, disabled: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1c", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1d" }, addOrRemove: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1e", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1f" } }, defaultVariants: { link: !1, wrap: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, wrap: !1, addOrRemove: !0 }, "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1g"]] }), E = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1h", variantClassNames: { wrap: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1i", false: "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1j" } }, defaultVariants: { wrap: !1 }, compoundVariants: [] }), V = "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1k", K = "pkg_sps-woodland_tags__version_8_29_1__hash_160drw1l";
|
|
58
58
|
function T({
|
|
59
59
|
children: a,
|
|
60
60
|
className: o,
|
|
@@ -66,7 +66,7 @@ function T({
|
|
|
66
66
|
kind: i,
|
|
67
67
|
onAdd: l,
|
|
68
68
|
onRemove: g,
|
|
69
|
-
...
|
|
69
|
+
...w
|
|
70
70
|
}) {
|
|
71
71
|
const C = n.Children.toArray(a).filter((c) => typeof c == "string").join("");
|
|
72
72
|
n.useEffect(() => {
|
|
@@ -79,7 +79,7 @@ function T({
|
|
|
79
79
|
function N(c) {
|
|
80
80
|
c.stopPropagation(), e && e(c);
|
|
81
81
|
}
|
|
82
|
-
return /* @__PURE__ */ n.createElement("div", { className: d(
|
|
82
|
+
return /* @__PURE__ */ n.createElement("div", { className: d(O({ kind: i, disabled: s, wrap: _ }), o), ...w }, /* @__PURE__ */ n.createElement(
|
|
83
83
|
"span",
|
|
84
84
|
{
|
|
85
85
|
className: d(
|
|
@@ -93,12 +93,12 @@ function T({
|
|
|
93
93
|
onClick: N,
|
|
94
94
|
title: C
|
|
95
95
|
},
|
|
96
|
-
t ? /* @__PURE__ */ n.createElement("a", { className:
|
|
96
|
+
t ? /* @__PURE__ */ n.createElement("a", { className: K, href: t, target: p }, a) : a
|
|
97
97
|
), (l || g) && !s && /* @__PURE__ */ n.createElement(
|
|
98
98
|
"div",
|
|
99
99
|
{
|
|
100
100
|
className: d(
|
|
101
|
-
|
|
101
|
+
E({
|
|
102
102
|
wrap: _
|
|
103
103
|
})
|
|
104
104
|
),
|
|
@@ -106,10 +106,10 @@ function T({
|
|
|
106
106
|
tabIndex: -1,
|
|
107
107
|
"aria-label": l ? "Add" : "Remove"
|
|
108
108
|
},
|
|
109
|
-
/* @__PURE__ */ n.createElement(b, { className:
|
|
109
|
+
/* @__PURE__ */ n.createElement(b, { className: V, "aria-hidden": "true", icon: l ? "plus-sign" : "x" })
|
|
110
110
|
));
|
|
111
111
|
}
|
|
112
|
-
|
|
112
|
+
u.set(T, {
|
|
113
113
|
name: "Clickable Tag",
|
|
114
114
|
props: {
|
|
115
115
|
disabled: { type: "boolean", default: "false" },
|
|
@@ -121,7 +121,7 @@ k.set(T, {
|
|
|
121
121
|
onRemove: { type: "() => void" }
|
|
122
122
|
}
|
|
123
123
|
});
|
|
124
|
-
var F = m({ defaultClassName: "pkg_sps-
|
|
124
|
+
var F = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi0", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi1", key: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi2", warning: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi3", error: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi4", pending: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi5", success: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi6", info: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi7" }, wrap: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi8", false: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi9" } }, defaultVariants: { kind: "default", wrap: !1 }, compoundVariants: [] }), P = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efia", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efib", key: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efic", warning: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efid", error: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efie", pending: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efif", success: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efig", info: "pkg_sps-woodland_tags__version_8_29_1__hash_5f3efih" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
|
|
125
125
|
const I = Object.freeze({
|
|
126
126
|
default: "info-circle",
|
|
127
127
|
key: "info-circle",
|
|
@@ -136,18 +136,20 @@ function f({
|
|
|
136
136
|
className: o,
|
|
137
137
|
kind: e = "default",
|
|
138
138
|
icon: s,
|
|
139
|
-
|
|
139
|
+
wrap: _,
|
|
140
|
+
...t
|
|
140
141
|
}) {
|
|
141
|
-
return /* @__PURE__ */ n.createElement("span", { className: d(F({ kind: e }), o), ...
|
|
142
|
+
return /* @__PURE__ */ n.createElement("span", { className: d(F({ kind: e, wrap: _ }), o), ...t }, s && /* @__PURE__ */ n.createElement(b, { className: d(P({ kind: e })), icon: I[e] }), a);
|
|
142
143
|
}
|
|
143
|
-
|
|
144
|
+
u.set(f, {
|
|
144
145
|
name: "Tag",
|
|
145
146
|
props: {
|
|
146
147
|
kind: { type: "TagKind", default: "default" },
|
|
147
|
-
icon: { type: "boolean", default: "false" }
|
|
148
|
+
icon: { type: "boolean", default: "false" },
|
|
149
|
+
wrap: { type: "boolean", default: "false" }
|
|
148
150
|
}
|
|
149
151
|
});
|
|
150
|
-
var j = "pkg_sps-
|
|
152
|
+
var j = "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse0", L = "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse1", W = "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse2", D = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse3", variantClassNames: { href: { true: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse4", false: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse5" }, kind: { default: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse6", key: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse7", warning: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse8", error: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofse9", pending: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofsea", success: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofseb", info: "pkg_sps-woodland_tags__version_8_29_1__hash_79ofsec" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] }), M = "pkg_sps-woodland_tags__version_8_29_1__hash_79ofsed";
|
|
151
153
|
function v({
|
|
152
154
|
children: a,
|
|
153
155
|
className: o,
|
|
@@ -159,9 +161,9 @@ function v({
|
|
|
159
161
|
value: i,
|
|
160
162
|
...l
|
|
161
163
|
}) {
|
|
162
|
-
return /* @__PURE__ */ n.createElement("span", { className: d(j, o), ...l }, /* @__PURE__ */ n.createElement(f, { className: d(L), icon: t, kind: e }, p && /* @__PURE__ */ n.createElement("span", { className: d(W) }, p)), /* @__PURE__ */ n.createElement(f, { className: d(D({ href: !!s, kind: e })) }, s ? /* @__PURE__ */ n.createElement("a", { className:
|
|
164
|
+
return /* @__PURE__ */ n.createElement("span", { className: d(j, o), ...l }, /* @__PURE__ */ n.createElement(f, { className: d(L), icon: t, kind: e }, p && /* @__PURE__ */ n.createElement("span", { className: d(W) }, p)), /* @__PURE__ */ n.createElement(f, { className: d(D({ href: !!s, kind: e })) }, s ? /* @__PURE__ */ n.createElement("a", { className: M, href: s, target: _ }, i) : i));
|
|
163
165
|
}
|
|
164
|
-
|
|
166
|
+
u.set(v, {
|
|
165
167
|
name: "Split Tag",
|
|
166
168
|
props: {
|
|
167
169
|
color: { type: "TagKind", default: "key" },
|
|
@@ -172,7 +174,7 @@ k.set(v, {
|
|
|
172
174
|
value: { type: "string", required: !0 }
|
|
173
175
|
}
|
|
174
176
|
});
|
|
175
|
-
const
|
|
177
|
+
const B = {
|
|
176
178
|
components: [T],
|
|
177
179
|
examples: {
|
|
178
180
|
basic: {
|
|
@@ -341,6 +343,30 @@ const M = {
|
|
|
341
343
|
}
|
|
342
344
|
}
|
|
343
345
|
},
|
|
346
|
+
wrap: {
|
|
347
|
+
label: "Wrapped Tag",
|
|
348
|
+
examples: {
|
|
349
|
+
basic: {
|
|
350
|
+
react: r`
|
|
351
|
+
import { Tag } from "@sps-woodland/tags";
|
|
352
|
+
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
353
|
+
function Component() {
|
|
354
|
+
return (
|
|
355
|
+
<ContentRow selectable>
|
|
356
|
+
<ContentRowCol widthRem={10}>
|
|
357
|
+
<Tag className="mr-1 mb-1" wrap>This is a long tag showing text wrapping behavior</Tag>
|
|
358
|
+
<Tag className="mr-1 mb-1" kind="key" wrap>This is another long tag showing text wrapping behavior</Tag>
|
|
359
|
+
</ContentRowCol>
|
|
360
|
+
<ContentRowCol>
|
|
361
|
+
March 31, 2025 @ 2:15 PM
|
|
362
|
+
</ContentRowCol>
|
|
363
|
+
</ContentRow>
|
|
364
|
+
)
|
|
365
|
+
}
|
|
366
|
+
`
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
},
|
|
344
370
|
withIcon: {
|
|
345
371
|
label: "Tag with icon",
|
|
346
372
|
examples: {
|
|
@@ -433,7 +459,7 @@ const M = {
|
|
|
433
459
|
}
|
|
434
460
|
}
|
|
435
461
|
}, G = {
|
|
436
|
-
"Clickable Tags":
|
|
462
|
+
"Clickable Tags": B,
|
|
437
463
|
Tags: A,
|
|
438
464
|
"Split Tags": q
|
|
439
465
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils"],u):(l=typeof globalThis<"u"?globalThis:l||self,u(l.Tags={},l.React,l.core,l.utils))})(this,function(l,u,n,r){"use strict";function y(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 t=y(u);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 b(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 v(a){for(var o=1;o<arguments.length;o++){var e=arguments[o]!=null?arguments[o]:{};o%2?b(Object(e),!0).forEach(function(s){N(a,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(e)):b(Object(e)).forEach(function(s){Object.defineProperty(a,s,Object.getOwnPropertyDescriptor(e,s))})}return a}var S=(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=v(v({},a.defaultVariants),o);for(var _ in s){var d,p=(d=s[_])!==null&&d!==void 0?d:a.defaultVariants[_];if(p!=null){var c=p;typeof c=="boolean"&&(c=c===!0?"true":"false");var i=a.variantClassNames[_][c];i&&(e+=" "+i)}}for(var[g,T]of a.compoundVariants)S(g,s,a.defaultVariants)&&(e+=" "+T);return e},O=m({defaultClassName:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw11",gray:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw13",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw14"},wrap:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw15",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw16"}},defaultVariants:{kind:"blue",disabled:!1,wrap:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw17",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw18",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw19"},wrap:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1a",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1b"},disabled:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1c",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1d"},addOrRemove:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1e",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1f"}},defaultVariants:{link:!1,wrap:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,wrap:!1,addOrRemove:!0},"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1g"]]}),E=m({defaultClassName:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1h",variantClassNames:{wrap:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1i",false:"pkg_sps-woodland_tags__version_8_29_1__hash_160drw1j"}},defaultVariants:{wrap:!1},compoundVariants:[]}),x="pkg_sps-woodland_tags__version_8_29_1__hash_160drw1k",V="pkg_sps-woodland_tags__version_8_29_1__hash_160drw1l";function h({children:a,className:o,onClick:e,disabled:s,wrap:_,href:d,target:p,kind:c,onAdd:i,onRemove:g,...T}){const A=t.Children.toArray(a).filter(f=>typeof f=="string").join("");t.useEffect(()=>{if(g&&i)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[i,g]);function z(f){i?i():g&&g(),f.stopPropagation()}function H(f){f.stopPropagation(),e&&e(f)}return t.createElement("div",{className:n.cl(O({kind:c,disabled:s,wrap:_}),o),...T},t.createElement("span",{className:n.cl(R({link:!!d||!!e,disabled:s,wrap:_,addOrRemove:i||g})),onClick:H,title:A},d?t.createElement("a",{className:V,href:d,target:p},a):a),(i||g)&&!s&&t.createElement("div",{className:n.cl(E({wrap:_})),onClick:z,tabIndex:-1,"aria-label":i?"Add":"Remove"},t.createElement(n.Icon,{className:x,"aria-hidden":"true",icon:i?"plus-sign":"x"})))}n.Metadata.set(h,{name:"Clickable Tag",props:{disabled:{type:"boolean",default:"false"},wrap:{type:"boolean",default:"false"},href:{type:"string"},target:{type:"'_blank' | '_self' | '_parent' | '_top'"},kind:{type:"ClickableTagKind",default:"blue"},onAdd:{type:"() => void"},onRemove:{type:"() => void"}}});var K=m({defaultClassName:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi7"},wrap:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi8",false:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi9"}},defaultVariants:{kind:"default",wrap:!1},compoundVariants:[]}),P=m({defaultClassName:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efia",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efib",key:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efic",warning:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efid",error:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efie",pending:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efif",success:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efig",info:"pkg_sps-woodland_tags__version_8_29_1__hash_5f3efih"}},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 w({children:a,className:o,kind:e="default",icon:s,wrap:_,...d}){return t.createElement("span",{className:n.cl(K({kind:e,wrap:_}),o),...d},s&&t.createElement(n.Icon,{className:n.cl(P({kind:e})),icon:C[e]}),a)}n.Metadata.set(w,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"},wrap:{type:"boolean",default:"false"}}});var F="pkg_sps-woodland_tags__version_8_29_1__hash_79ofse0",j="pkg_sps-woodland_tags__version_8_29_1__hash_79ofse1",I="pkg_sps-woodland_tags__version_8_29_1__hash_79ofse2",M=m({defaultClassName:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse3",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse4",false:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse5"},kind:{default:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse6",key:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse7",warning:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse8",error:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofse9",pending:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofsea",success:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofseb",info:"pkg_sps-woodland_tags__version_8_29_1__hash_79ofsec"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]}),D="pkg_sps-woodland_tags__version_8_29_1__hash_79ofsed";function k({children:a,className:o,color:e="default",href:s,target:_,icon:d,tagKey:p,value:c,...i}){return t.createElement("span",{className:n.cl(F,o),...i},t.createElement(w,{className:n.cl(j),icon:d,kind:e},p&&t.createElement("span",{className:n.cl(I)},p)),t.createElement(w,{className:n.cl(M({href:!!s,kind:e}))},s?t.createElement("a",{className:D,href:s,target:_},c):c))}n.Metadata.set(k,{name:"Split Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},target:{type:"'_blank' | '_self' | '_parent' | '_top'"},icon:{type:"boolean",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const L={components:[h],examples:{basic:{label:"Basic Tag",examples:{basic:{react:r.code`
|
|
2
2
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
3
3
|
|
|
4
4
|
function Component() {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
</>
|
|
10
10
|
);
|
|
11
11
|
}
|
|
12
|
-
`},disabled:{react:
|
|
12
|
+
`},disabled:{react:r.code`
|
|
13
13
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
14
14
|
|
|
15
15
|
function Component() {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
</>
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
|
-
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:
|
|
22
|
+
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:r.code`
|
|
23
23
|
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
24
24
|
import { Icon } from "@sps-woodland/core";
|
|
25
25
|
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
</ContentRow>
|
|
52
52
|
)
|
|
53
53
|
}
|
|
54
|
-
`}}},button:{label:"Button",examples:{remove:{react:
|
|
54
|
+
`}}},button:{label:"Button",examples:{remove:{react:r.code`
|
|
55
55
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
56
56
|
|
|
57
57
|
function Component() {
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
</>
|
|
63
63
|
);
|
|
64
64
|
}
|
|
65
|
-
`},add:{react:
|
|
65
|
+
`},add:{react:r.code`
|
|
66
66
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
67
67
|
|
|
68
68
|
function Component() {
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
</>
|
|
74
74
|
);
|
|
75
75
|
}
|
|
76
|
-
`}}},link:{label:"Link",examples:{basic:{react:
|
|
76
|
+
`}}},link:{label:"Link",examples:{basic:{react:r.code`
|
|
77
77
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
78
78
|
|
|
79
79
|
function Component() {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
</>
|
|
85
85
|
);
|
|
86
86
|
}
|
|
87
|
-
`},button:{react:
|
|
87
|
+
`},button:{react:r.code`
|
|
88
88
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
89
89
|
|
|
90
90
|
function Component() {
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
</>
|
|
96
96
|
);
|
|
97
97
|
}
|
|
98
|
-
`}}}}},W={components:[w],examples:{basic:{label:"Basic Tag",examples:{basic:{react:
|
|
98
|
+
`}}}}},W={components:[w],examples:{basic:{label:"Basic Tag",examples:{basic:{react:r.code`
|
|
99
99
|
import { Tag } from "@sps-woodland/tags";
|
|
100
100
|
|
|
101
101
|
function Component() {
|
|
@@ -111,7 +111,23 @@
|
|
|
111
111
|
</>
|
|
112
112
|
)
|
|
113
113
|
}
|
|
114
|
-
`}}},
|
|
114
|
+
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:r.code`
|
|
115
|
+
import { Tag } from "@sps-woodland/tags";
|
|
116
|
+
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
117
|
+
function Component() {
|
|
118
|
+
return (
|
|
119
|
+
<ContentRow selectable>
|
|
120
|
+
<ContentRowCol widthRem={10}>
|
|
121
|
+
<Tag className="mr-1 mb-1" wrap>This is a long tag showing text wrapping behavior</Tag>
|
|
122
|
+
<Tag className="mr-1 mb-1" kind="key" wrap>This is another long tag showing text wrapping behavior</Tag>
|
|
123
|
+
</ContentRowCol>
|
|
124
|
+
<ContentRowCol>
|
|
125
|
+
March 31, 2025 @ 2:15 PM
|
|
126
|
+
</ContentRowCol>
|
|
127
|
+
</ContentRow>
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
`}}},withIcon:{label:"Tag with icon",examples:{basic:{react:r.code`
|
|
115
131
|
import { Tag } from "@sps-woodland/tags";
|
|
116
132
|
|
|
117
133
|
function Component() {
|
|
@@ -127,7 +143,7 @@
|
|
|
127
143
|
</>
|
|
128
144
|
)
|
|
129
145
|
}
|
|
130
|
-
`}}}}},q={components:[
|
|
146
|
+
`}}}}},q={components:[k],examples:{basic:{label:"Basic",examples:{basic:{react:r.code`
|
|
131
147
|
import { SplitTag } from "@sps-woodland/tag";
|
|
132
148
|
|
|
133
149
|
function Component() {
|
|
@@ -142,7 +158,7 @@
|
|
|
142
158
|
</>
|
|
143
159
|
);
|
|
144
160
|
}
|
|
145
|
-
`}}},icon:{label:"Icon",examples:{basic:{react:
|
|
161
|
+
`}}},icon:{label:"Icon",examples:{basic:{react:r.code`
|
|
146
162
|
import { SplitTag } from "@sps-woodland/tag";
|
|
147
163
|
|
|
148
164
|
function Component() {
|
|
@@ -157,7 +173,7 @@
|
|
|
157
173
|
</>
|
|
158
174
|
);
|
|
159
175
|
}
|
|
160
|
-
`}}},link:{label:"Link",examples:{basic:{react:
|
|
176
|
+
`}}},link:{label:"Link",examples:{basic:{react:r.code`
|
|
161
177
|
import { SplitTag } from "@sps-woodland/tag";
|
|
162
178
|
|
|
163
179
|
function Component() {
|
|
@@ -165,4 +181,4 @@
|
|
|
165
181
|
<SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
|
|
166
182
|
);
|
|
167
183
|
}
|
|
168
|
-
`}}}}},B={"Clickable Tags":L,Tags:W,"Split Tags":q};
|
|
184
|
+
`}}}}},B={"Clickable Tags":L,Tags:W,"Split Tags":q};l.ClickableTag=h,l.MANIFEST=B,l.SplitTag=k,l.Tag=w,l.TagIcons=C,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_tags__version_8_29_1__hash_160drw10{border-radius:.125rem;display:inline-flex;color:#08638d;font-size:.75rem;font-weight:600;height:1.125rem;line-height:.75rem;max-width:100%}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw11{background-color:#e6f2f8}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw12{background-color:#e9e9ea}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw13{background-color:#fff;border-width:.0625rem;border-style:solid;border-color:#d2d4d4;color:#717779;cursor:not-allowed}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw15{height:auto}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw17{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_8_29_1__hash_160drw18{cursor:pointer;text-decoration:underline}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw18:hover{color:#e6f2f8;background-color:#08638d;border-radius:.125rem}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1a{white-space:normal;height:auto;line-height:.875rem;word-break:break-word}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1g{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_8_29_1__hash_160drw1h{border-top-left-radius:0;border-top-right-radius:.125rem;border-bottom-right-radius:.125rem;border-bottom-left-radius:0;color:#08638d;height:1.125rem;line-height:.75rem;padding:.125rem .25rem}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1h:focus,.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1h:hover{background-color:#08638d;color:#e6f2f8;cursor:pointer}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1i{height:auto;align-content:center}.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1k{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1l{color:#08638d}span:hover>.pkg_sps-woodland_tags__version_8_29_1__hash_160drw1l{color:#e6f2f8}.pkg_sps-woodland_tags__version_8_29_1__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_8_29_1__hash_5f3efi1{background:#e9e9ea;color:#4b5356}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi2{background:#4b5356;color:#fff}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi3{background:#e77609;color:#fff}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi4{background:#de012e;color:#fff}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi5{background:#91467f;color:#fff}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi6{background:#0b8940;color:#fff}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi7{background:#027db8;color:#fff}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efi8{white-space:normal;height:auto;line-height:.875rem;word-break:break-word;text-overflow:clip}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efia{font-size:.75rem;line-height:.625rem;margin-right:.25rem}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efia:before{vertical-align:text-bottom}.pkg_sps-woodland_tags__version_8_29_1__hash_5f3efib{display:none}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofse0{display:inline-block}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofse1{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_8_29_1__hash_79ofse3{background:#fff;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_8_29_1__hash_79ofse4{cursor:pointer;text-decoration:underline;color:#4b5356}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofse7{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofse8{box-shadow:.0625rem 0 #e77609 inset,-.0625rem 0 #e77609 inset,0 .0625rem #e77609 inset,0 -.0625rem #e77609 inset}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofse9{box-shadow:.0625rem 0 #de012e inset,-.0625rem 0 #de012e inset,0 .0625rem #de012e inset,0 -.0625rem #de012e inset}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofsea{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofseb{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofsec{box-shadow:.0625rem 0 #027db8 inset,-.0625rem 0 #027db8 inset,0 .0625rem #027db8 inset,0 -.0625rem #027db8 inset}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofsed,.pkg_sps-woodland_tags__version_8_29_1__hash_79ofsed:hover{color:#4b5356}.pkg_sps-woodland_tags__version_8_29_1__hash_79ofse1>i{margin-right:0}
|
package/lib/tag/Tag.css.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import type { RecipeVariant, VariantDefinitions } from "@sps-woodland/core";
|
|
1
|
+
import type { BooleanRecipeVariant, RecipeVariant, VariantDefinitions } from "@sps-woodland/core";
|
|
2
2
|
import { Tokens } from "@sps-woodland/tokens";
|
|
3
3
|
export type TagKind = keyof typeof Tokens.component.tag;
|
|
4
4
|
interface TagVariantDefinitions extends VariantDefinitions {
|
|
5
5
|
kind: RecipeVariant<TagKind>;
|
|
6
|
+
wrap: BooleanRecipeVariant;
|
|
6
7
|
}
|
|
7
8
|
export declare const tag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<TagVariantDefinitions>;
|
|
8
9
|
export declare const tagIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
package/lib/tag/Tag.d.ts
CHANGED
|
@@ -3,7 +3,8 @@ import type { ComponentProps } from "@sps-woodland/core";
|
|
|
3
3
|
import type { IconName } from "@sps-woodland/tokens";
|
|
4
4
|
import type { TagKind } from "./Tag.css";
|
|
5
5
|
export declare const TagIcons: Record<TagKind, IconName>;
|
|
6
|
-
export declare function Tag({ children, className, kind, icon, ...rest }: ComponentProps<{
|
|
6
|
+
export declare function Tag({ children, className, kind, icon, wrap, ...rest }: ComponentProps<{
|
|
7
7
|
kind?: TagKind;
|
|
8
8
|
icon?: boolean;
|
|
9
|
+
wrap?: boolean;
|
|
9
10
|
}, HTMLDivElement>): React.ReactElement;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/tags",
|
|
3
3
|
"description": "SPS Woodland Design System tag components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.29.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.
|
|
33
|
-
"@sps-woodland/tokens": "8.
|
|
32
|
+
"@sps-woodland/core": "8.29.1",
|
|
33
|
+
"@sps-woodland/tokens": "8.29.1"
|
|
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.
|
|
42
|
-
"@sps-woodland/tokens": "8.
|
|
41
|
+
"@sps-woodland/core": "8.29.1",
|
|
42
|
+
"@sps-woodland/tokens": "8.29.1"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "pnpm run build:js && pnpm run build:types",
|