@sps-woodland/tags 8.51.3 → 8.52.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/clickable-tag/ClickableTag.css.d.ts +16 -0
- package/lib/clickable-tag/ClickableTag.d.ts +12 -0
- package/lib/index.d.ts +3 -1
- package/lib/index.js +212 -29
- package/lib/index.umd.cjs +14 -14
- package/lib/split-tag/SplitTag.css.d.ts +66 -0
- package/lib/split-tag/SplitTag.d.ts +13 -0
- package/lib/style.css +1 -1
- package/lib/tag/Tag.css.d.ts +23 -0
- package/lib/tag/Tag.d.ts +10 -0
- package/package.json +8 -6
- package/vite.config.mjs +13 -6
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Tokens } from "@sps-woodland/tokens";
|
|
2
|
+
import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
|
|
3
|
+
export type ClickableTagKind = keyof typeof Tokens.component["clickable-tag"]["kind"];
|
|
4
|
+
interface ClickableTagVariantDefinitions extends VariantDefinitions {
|
|
5
|
+
kind: RecipeVariant<ClickableTagKind>;
|
|
6
|
+
disabled: BooleanRecipeVariant;
|
|
7
|
+
wrap: BooleanRecipeVariant;
|
|
8
|
+
link: BooleanRecipeVariant;
|
|
9
|
+
addOrRemove: BooleanRecipeVariant;
|
|
10
|
+
}
|
|
11
|
+
export declare const clickableTag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ClickableTagVariantDefinitions, "kind" | "disabled" | "wrap">>;
|
|
12
|
+
export declare const clickableTagLabel: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Omit<ClickableTagVariantDefinitions, "kind">>;
|
|
13
|
+
export declare const clickableTagIconWrapper: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ClickableTagVariantDefinitions, "wrap">>;
|
|
14
|
+
export declare const clickableTagIcon: string;
|
|
15
|
+
export declare const clickableTagLink: string;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
+
import type { ClickableTagKind } from "./ClickableTag.css";
|
|
4
|
+
export declare function ClickableTag({ children, className, onClick, disabled, wrap, href, target, kind, onAdd, onRemove, ...rest }: ComponentProps<{
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
wrap?: boolean;
|
|
7
|
+
href?: string;
|
|
8
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
9
|
+
kind?: ClickableTagKind;
|
|
10
|
+
onAdd?: () => void;
|
|
11
|
+
onRemove?: () => void;
|
|
12
|
+
}, HTMLDivElement>): React.ReactElement;
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,16 +1,195 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import * as l from "react";
|
|
2
|
+
import { Metadata as w, cl as p, Icon as b } from "@sps-woodland/core";
|
|
3
|
+
import { code as t } from "@spscommerce/utils";
|
|
4
|
+
function S(a, o, s) {
|
|
5
|
+
return o in a ? Object.defineProperty(a, o, {
|
|
6
|
+
value: s,
|
|
7
|
+
enumerable: !0,
|
|
8
|
+
configurable: !0,
|
|
9
|
+
writable: !0
|
|
10
|
+
}) : a[o] = s, a;
|
|
11
|
+
}
|
|
12
|
+
function h(a, o) {
|
|
13
|
+
var s = Object.keys(a);
|
|
14
|
+
if (Object.getOwnPropertySymbols) {
|
|
15
|
+
var e = Object.getOwnPropertySymbols(a);
|
|
16
|
+
o && (e = e.filter(function(_) {
|
|
17
|
+
return Object.getOwnPropertyDescriptor(a, _).enumerable;
|
|
18
|
+
})), s.push.apply(s, e);
|
|
19
|
+
}
|
|
20
|
+
return s;
|
|
21
|
+
}
|
|
22
|
+
function k(a) {
|
|
23
|
+
for (var o = 1; o < arguments.length; o++) {
|
|
24
|
+
var s = arguments[o] != null ? arguments[o] : {};
|
|
25
|
+
o % 2 ? h(Object(s), !0).forEach(function(e) {
|
|
26
|
+
S(a, e, s[e]);
|
|
27
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(s)) : h(Object(s)).forEach(function(e) {
|
|
28
|
+
Object.defineProperty(a, e, Object.getOwnPropertyDescriptor(s, e));
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
return a;
|
|
32
|
+
}
|
|
33
|
+
var R = (a, o, s) => {
|
|
34
|
+
for (var e of Object.keys(a)) {
|
|
35
|
+
var _;
|
|
36
|
+
if (a[e] !== ((_ = o[e]) !== null && _ !== void 0 ? _ : s[e]))
|
|
37
|
+
return !1;
|
|
38
|
+
}
|
|
39
|
+
return !0;
|
|
40
|
+
}, c = (a) => (o) => {
|
|
41
|
+
var s = a.defaultClassName, e = k(k({}, a.defaultVariants), o);
|
|
42
|
+
for (var _ in e) {
|
|
43
|
+
var i, d = (i = e[_]) !== null && i !== void 0 ? i : a.defaultVariants[_];
|
|
44
|
+
if (d != null) {
|
|
45
|
+
var r = d;
|
|
46
|
+
typeof r == "boolean" && (r = r === !0 ? "true" : "false");
|
|
47
|
+
var n = (
|
|
48
|
+
// @ts-expect-error
|
|
49
|
+
a.variantClassNames[_][r]
|
|
50
|
+
);
|
|
51
|
+
n && (s += " " + n);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
for (var [g, u] of a.compoundVariants)
|
|
55
|
+
R(g, e, a.defaultVariants) && (s += " " + u);
|
|
56
|
+
return s;
|
|
57
|
+
}, O = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw10", variantClassNames: { kind: { blue: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw11", gray: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw12" }, disabled: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw13", false: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw14" }, wrap: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw15", false: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw16" } }, defaultVariants: { kind: "blue", disabled: !1, wrap: !1 }, compoundVariants: [] }), x = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw17", variantClassNames: { link: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw18", false: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw19" }, wrap: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1a", false: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1b" }, disabled: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1c", false: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1d" }, addOrRemove: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1e", false: "pkg_sps-woodland_tags__version_8_52_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_52_1__hash_160drw1g"]] }), E = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1h", variantClassNames: { wrap: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1i", false: "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1j" } }, defaultVariants: { wrap: !1 }, compoundVariants: [] }), V = "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1k", K = "pkg_sps-woodland_tags__version_8_52_1__hash_160drw1l";
|
|
58
|
+
function T({
|
|
59
|
+
children: a,
|
|
60
|
+
className: o,
|
|
61
|
+
onClick: s,
|
|
62
|
+
disabled: e,
|
|
63
|
+
wrap: _,
|
|
64
|
+
href: i,
|
|
65
|
+
target: d,
|
|
66
|
+
kind: r,
|
|
67
|
+
onAdd: n,
|
|
68
|
+
onRemove: g,
|
|
69
|
+
...u
|
|
70
|
+
}) {
|
|
71
|
+
const C = l.Children.toArray(a).filter((m) => typeof m == "string").join("");
|
|
72
|
+
l.useEffect(() => {
|
|
73
|
+
if (g && n)
|
|
74
|
+
throw new Error("Clickable tag should have onRemove or onAdd, not both");
|
|
75
|
+
}, [n, g]);
|
|
76
|
+
function y(m) {
|
|
77
|
+
n ? n() : g && g(), m.stopPropagation();
|
|
78
|
+
}
|
|
79
|
+
function N(m) {
|
|
80
|
+
m.stopPropagation(), s && s(m);
|
|
81
|
+
}
|
|
82
|
+
return /* @__PURE__ */ l.createElement("div", { className: p(O({ kind: r, disabled: e, wrap: _ }), o), ...u }, /* @__PURE__ */ l.createElement(
|
|
83
|
+
"span",
|
|
84
|
+
{
|
|
85
|
+
className: p(
|
|
86
|
+
x({
|
|
87
|
+
link: !!i || !!s,
|
|
88
|
+
disabled: e,
|
|
89
|
+
wrap: _,
|
|
90
|
+
addOrRemove: n || g
|
|
91
|
+
})
|
|
92
|
+
),
|
|
93
|
+
onClick: N,
|
|
94
|
+
title: C
|
|
95
|
+
},
|
|
96
|
+
i ? /* @__PURE__ */ l.createElement("a", { className: K, href: i, target: d }, a) : a
|
|
97
|
+
), (n || g) && !e && /* @__PURE__ */ l.createElement(
|
|
98
|
+
"div",
|
|
99
|
+
{
|
|
100
|
+
className: p(
|
|
101
|
+
E({
|
|
102
|
+
wrap: _
|
|
103
|
+
})
|
|
104
|
+
),
|
|
105
|
+
onClick: y,
|
|
106
|
+
tabIndex: -1,
|
|
107
|
+
"aria-label": n ? "Add" : "Remove"
|
|
108
|
+
},
|
|
109
|
+
/* @__PURE__ */ l.createElement(b, { className: V, "aria-hidden": "true", icon: n ? "plus-sign" : "x" })
|
|
110
|
+
));
|
|
111
|
+
}
|
|
112
|
+
w.set(T, {
|
|
113
|
+
name: "Clickable Tag",
|
|
114
|
+
props: {
|
|
115
|
+
disabled: { type: "boolean", default: "false" },
|
|
116
|
+
wrap: { type: "boolean", default: "false" },
|
|
117
|
+
href: { type: "string" },
|
|
118
|
+
target: { type: "'_blank' | '_self' | '_parent' | '_top'" },
|
|
119
|
+
kind: { type: "ClickableTagKind", default: "blue" },
|
|
120
|
+
onAdd: { type: "() => void" },
|
|
121
|
+
onRemove: { type: "() => void" }
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
var I = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi0", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi1", key: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi2", warning: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi3", error: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi4", pending: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi5", success: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi6", info: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi7" }, wrap: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi8", false: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi9" } }, defaultVariants: { kind: "default", wrap: !1 }, compoundVariants: [] }), F = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efia", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efib", key: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efic", warning: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efid", error: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efie", pending: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efif", success: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efig", info: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efih", custom: "pkg_sps-woodland_tags__version_8_52_1__hash_5f3efii" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
|
|
125
|
+
const P = Object.freeze({
|
|
126
|
+
default: "info-circle",
|
|
127
|
+
key: "info-circle",
|
|
128
|
+
warning: "status-warning",
|
|
129
|
+
error: "status-error",
|
|
130
|
+
pending: "status-in-process",
|
|
131
|
+
success: "status-ok",
|
|
132
|
+
info: "info-circle"
|
|
133
|
+
});
|
|
134
|
+
function f({
|
|
135
|
+
children: a,
|
|
136
|
+
className: o,
|
|
137
|
+
kind: s = "default",
|
|
138
|
+
icon: e,
|
|
139
|
+
wrap: _,
|
|
140
|
+
...i
|
|
141
|
+
}) {
|
|
142
|
+
const d = typeof e == "string", r = e && d ? e : e ? P[s] : void 0;
|
|
143
|
+
return /* @__PURE__ */ l.createElement("span", { className: p(I({ kind: s, wrap: _ }), o), ...i }, r && /* @__PURE__ */ l.createElement(
|
|
144
|
+
b,
|
|
145
|
+
{
|
|
146
|
+
className: p(F({ kind: d ? "custom" : s })),
|
|
147
|
+
icon: r
|
|
148
|
+
}
|
|
149
|
+
), a);
|
|
150
|
+
}
|
|
151
|
+
w.set(f, {
|
|
152
|
+
name: "Tag",
|
|
153
|
+
props: {
|
|
154
|
+
kind: { type: "TagKind", default: "default" },
|
|
155
|
+
icon: { type: "boolean | IconName", default: "false" },
|
|
156
|
+
wrap: { type: "boolean", default: "false" }
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
var j = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse0", variantClassNames: { wrap: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse1", false: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse2" } }, defaultVariants: { wrap: !1 }, compoundVariants: [] }), L = "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse3", W = "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse4", D = c({ defaultClassName: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse5", variantClassNames: { href: { true: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse6", false: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse7" }, kind: { default: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse8", key: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofse9", warning: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofsea", error: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofseb", pending: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofsec", success: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofsed", info: "pkg_sps-woodland_tags__version_8_52_1__hash_79ofsee" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] }), M = "pkg_sps-woodland_tags__version_8_52_1__hash_79ofsef";
|
|
160
|
+
function v({
|
|
161
|
+
children: a,
|
|
162
|
+
className: o,
|
|
163
|
+
color: s = "default",
|
|
164
|
+
href: e,
|
|
165
|
+
target: _,
|
|
166
|
+
icon: i,
|
|
167
|
+
tagKey: d,
|
|
168
|
+
value: r,
|
|
169
|
+
wrap: n = !1,
|
|
170
|
+
...g
|
|
171
|
+
}) {
|
|
172
|
+
return /* @__PURE__ */ l.createElement("span", { className: p(j({ wrap: n }), o), ...g }, /* @__PURE__ */ l.createElement(f, { className: p(L), icon: i, kind: s, wrap: n }, d && /* @__PURE__ */ l.createElement("span", { className: p(W) }, d)), /* @__PURE__ */ l.createElement(f, { className: p(D({ href: !!e, kind: s })), wrap: n }, e ? /* @__PURE__ */ l.createElement("a", { className: M, href: e, target: _ }, r) : r));
|
|
173
|
+
}
|
|
174
|
+
w.set(v, {
|
|
175
|
+
name: "Split Tag",
|
|
176
|
+
props: {
|
|
177
|
+
color: { type: "TagKind", default: "key" },
|
|
178
|
+
href: { type: "string" },
|
|
179
|
+
target: { type: "'_blank' | '_self' | '_parent' | '_top'" },
|
|
180
|
+
icon: { type: "boolean | IconName", default: "false" },
|
|
181
|
+
tagKey: { type: "string", required: !0 },
|
|
182
|
+
value: { type: "string", required: !0 }
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
const B = {
|
|
186
|
+
components: [T],
|
|
8
187
|
examples: {
|
|
9
188
|
basic: {
|
|
10
189
|
label: "Basic Tag",
|
|
11
190
|
examples: {
|
|
12
191
|
basic: {
|
|
13
|
-
react:
|
|
192
|
+
react: t`
|
|
14
193
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
15
194
|
|
|
16
195
|
function Component() {
|
|
@@ -24,7 +203,7 @@ const n = {
|
|
|
24
203
|
`
|
|
25
204
|
},
|
|
26
205
|
disabled: {
|
|
27
|
-
react:
|
|
206
|
+
react: t`
|
|
28
207
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
29
208
|
|
|
30
209
|
function Component() {
|
|
@@ -42,7 +221,7 @@ const n = {
|
|
|
42
221
|
label: "Wrapped Tag",
|
|
43
222
|
examples: {
|
|
44
223
|
basic: {
|
|
45
|
-
react:
|
|
224
|
+
react: t`
|
|
46
225
|
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
47
226
|
import { Icon } from "@sps-woodland/core";
|
|
48
227
|
|
|
@@ -82,7 +261,7 @@ const n = {
|
|
|
82
261
|
label: "Button",
|
|
83
262
|
examples: {
|
|
84
263
|
remove: {
|
|
85
|
-
react:
|
|
264
|
+
react: t`
|
|
86
265
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
87
266
|
|
|
88
267
|
function Component() {
|
|
@@ -96,7 +275,7 @@ const n = {
|
|
|
96
275
|
`
|
|
97
276
|
},
|
|
98
277
|
add: {
|
|
99
|
-
react:
|
|
278
|
+
react: t`
|
|
100
279
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
101
280
|
|
|
102
281
|
function Component() {
|
|
@@ -115,7 +294,7 @@ const n = {
|
|
|
115
294
|
label: "Link",
|
|
116
295
|
examples: {
|
|
117
296
|
basic: {
|
|
118
|
-
react:
|
|
297
|
+
react: t`
|
|
119
298
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
120
299
|
|
|
121
300
|
function Component() {
|
|
@@ -129,7 +308,7 @@ const n = {
|
|
|
129
308
|
`
|
|
130
309
|
},
|
|
131
310
|
button: {
|
|
132
|
-
react:
|
|
311
|
+
react: t`
|
|
133
312
|
import { ClickableTag } from "@sps-woodland/tags";
|
|
134
313
|
|
|
135
314
|
function Component() {
|
|
@@ -145,14 +324,14 @@ const n = {
|
|
|
145
324
|
}
|
|
146
325
|
}
|
|
147
326
|
}
|
|
148
|
-
},
|
|
149
|
-
components: [
|
|
327
|
+
}, A = {
|
|
328
|
+
components: [f],
|
|
150
329
|
examples: {
|
|
151
330
|
basic: {
|
|
152
331
|
label: "Basic Tag",
|
|
153
332
|
examples: {
|
|
154
333
|
basic: {
|
|
155
|
-
react:
|
|
334
|
+
react: t`
|
|
156
335
|
import { Tag } from "@sps-woodland/tags";
|
|
157
336
|
|
|
158
337
|
function Component() {
|
|
@@ -176,7 +355,7 @@ const n = {
|
|
|
176
355
|
label: "Wrapped Tag",
|
|
177
356
|
examples: {
|
|
178
357
|
basic: {
|
|
179
|
-
react:
|
|
358
|
+
react: t`
|
|
180
359
|
import { Tag } from "@sps-woodland/tags";
|
|
181
360
|
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
182
361
|
function Component() {
|
|
@@ -200,7 +379,7 @@ const n = {
|
|
|
200
379
|
label: "Tag with icon",
|
|
201
380
|
examples: {
|
|
202
381
|
basic: {
|
|
203
|
-
react:
|
|
382
|
+
react: t`
|
|
204
383
|
import { Tag } from "@sps-woodland/tags";
|
|
205
384
|
|
|
206
385
|
function Component() {
|
|
@@ -222,14 +401,14 @@ const n = {
|
|
|
222
401
|
}
|
|
223
402
|
}
|
|
224
403
|
}
|
|
225
|
-
},
|
|
226
|
-
components: [
|
|
404
|
+
}, q = {
|
|
405
|
+
components: [v],
|
|
227
406
|
examples: {
|
|
228
407
|
basic: {
|
|
229
408
|
label: "Basic",
|
|
230
409
|
examples: {
|
|
231
410
|
basic: {
|
|
232
|
-
react:
|
|
411
|
+
react: t`
|
|
233
412
|
import { SplitTag } from "@sps-woodland/tag";
|
|
234
413
|
|
|
235
414
|
function Component() {
|
|
@@ -252,7 +431,7 @@ const n = {
|
|
|
252
431
|
label: "Icon",
|
|
253
432
|
examples: {
|
|
254
433
|
basic: {
|
|
255
|
-
react:
|
|
434
|
+
react: t`
|
|
256
435
|
import { SplitTag } from "@sps-woodland/tag";
|
|
257
436
|
|
|
258
437
|
function Component() {
|
|
@@ -276,7 +455,7 @@ const n = {
|
|
|
276
455
|
label: "Link",
|
|
277
456
|
examples: {
|
|
278
457
|
basic: {
|
|
279
|
-
react:
|
|
458
|
+
react: t`
|
|
280
459
|
import { SplitTag } from "@sps-woodland/tag";
|
|
281
460
|
|
|
282
461
|
function Component() {
|
|
@@ -289,11 +468,15 @@ const n = {
|
|
|
289
468
|
}
|
|
290
469
|
}
|
|
291
470
|
}
|
|
292
|
-
},
|
|
293
|
-
"Clickable Tags":
|
|
294
|
-
Tags:
|
|
295
|
-
"Split Tags":
|
|
471
|
+
}, G = {
|
|
472
|
+
"Clickable Tags": B,
|
|
473
|
+
Tags: A,
|
|
474
|
+
"Split Tags": q
|
|
296
475
|
};
|
|
297
476
|
export {
|
|
298
|
-
|
|
477
|
+
T as ClickableTag,
|
|
478
|
+
G as MANIFEST,
|
|
479
|
+
v as SplitTag,
|
|
480
|
+
f as Tag,
|
|
481
|
+
P as TagIcons
|
|
299
482
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(r,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):(r=typeof globalThis<"u"?globalThis:r||self,u(r.Tags={},r.React,r.core,r.utils))})(this,(function(r,u,t,i){"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 l=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 c,g=(c=s[_])!==null&&c!==void 0?c:a.defaultVariants[_];if(g!=null){var d=g;typeof d=="boolean"&&(d=d===!0?"true":"false");var n=a.variantClassNames[_][d];n&&(e+=" "+n)}}for(var[p,T]of a.compoundVariants)S(p,s,a.defaultVariants)&&(e+=" "+T);return e},O=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw11",gray:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw13",false:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw14"},wrap:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw15",false:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw16"}},defaultVariants:{kind:"blue",disabled:!1,wrap:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw17",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw18",false:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw19"},wrap:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1a",false:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1b"},disabled:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1c",false:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1d"},addOrRemove:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1e",false:"pkg_sps-woodland_tags__version_8_52_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_52_1__hash_160drw1g"]]}),E=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1h",variantClassNames:{wrap:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1i",false:"pkg_sps-woodland_tags__version_8_52_1__hash_160drw1j"}},defaultVariants:{wrap:!1},compoundVariants:[]}),I="pkg_sps-woodland_tags__version_8_52_1__hash_160drw1k",V="pkg_sps-woodland_tags__version_8_52_1__hash_160drw1l";function h({children:a,className:o,onClick:e,disabled:s,wrap:_,href:c,target:g,kind:d,onAdd:n,onRemove:p,...T}){const A=l.Children.toArray(a).filter(f=>typeof f=="string").join("");l.useEffect(()=>{if(p&&n)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[n,p]);function z(f){n?n():p&&p(),f.stopPropagation()}function H(f){f.stopPropagation(),e&&e(f)}return l.createElement("div",{className:t.cl(O({kind:d,disabled:s,wrap:_}),o),...T},l.createElement("span",{className:t.cl(R({link:!!c||!!e,disabled:s,wrap:_,addOrRemove:n||p})),onClick:H,title:A},c?l.createElement("a",{className:V,href:c,target:g},a):a),(n||p)&&!s&&l.createElement("div",{className:t.cl(E({wrap:_})),onClick:z,tabIndex:-1,"aria-label":n?"Add":"Remove"},l.createElement(t.Icon,{className:I,"aria-hidden":"true",icon:n?"plus-sign":"x"})))}t.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 x=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi7"},wrap:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi8",false:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi9"}},defaultVariants:{kind:"default",wrap:!1},compoundVariants:[]}),K=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efia",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efib",key:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efic",warning:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efid",error:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efie",pending:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efif",success:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efig",info:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efih",custom:"pkg_sps-woodland_tags__version_8_52_1__hash_5f3efii"}},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:_,...c}){const g=typeof s=="string",d=s&&g?s:s?C[e]:void 0;return l.createElement("span",{className:t.cl(x({kind:e,wrap:_}),o),...c},d&&l.createElement(t.Icon,{className:t.cl(K({kind:g?"custom":e})),icon:d}),a)}t.Metadata.set(w,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean | IconName",default:"false"},wrap:{type:"boolean",default:"false"}}});var F=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse0",variantClassNames:{wrap:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse1",false:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse2"}},defaultVariants:{wrap:!1},compoundVariants:[]}),P="pkg_sps-woodland_tags__version_8_52_1__hash_79ofse3",j="pkg_sps-woodland_tags__version_8_52_1__hash_79ofse4",M=m({defaultClassName:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse5",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse6",false:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse7"},kind:{default:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse8",key:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofse9",warning:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofsea",error:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofseb",pending:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofsec",success:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofsed",info:"pkg_sps-woodland_tags__version_8_52_1__hash_79ofsee"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]}),D="pkg_sps-woodland_tags__version_8_52_1__hash_79ofsef";function k({children:a,className:o,color:e="default",href:s,target:_,icon:c,tagKey:g,value:d,wrap:n=!1,...p}){return l.createElement("span",{className:t.cl(F({wrap:n}),o),...p},l.createElement(w,{className:t.cl(P),icon:c,kind:e,wrap:n},g&&l.createElement("span",{className:t.cl(j)},g)),l.createElement(w,{className:t.cl(M({href:!!s,kind:e})),wrap:n},s?l.createElement("a",{className:D,href:s,target:_},d):d))}t.Metadata.set(k,{name:"Split Tag",props:{color:{type:"TagKind",default:"key"},href:{type:"string"},target:{type:"'_blank' | '_self' | '_parent' | '_top'"},icon:{type:"boolean | IconName",default:"false"},tagKey:{type:"string",required:!0},value:{type:"string",required:!0}}});const L={components:[h],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.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:i.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:i.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:i.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:i.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:i.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:i.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
|
-
`}}}}},
|
|
98
|
+
`}}}}},W={components:[w],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
|
|
99
99
|
import { Tag } from "@sps-woodland/tags";
|
|
100
100
|
|
|
101
101
|
function Component() {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
</>
|
|
112
112
|
)
|
|
113
113
|
}
|
|
114
|
-
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:
|
|
114
|
+
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:i.code`
|
|
115
115
|
import { Tag } from "@sps-woodland/tags";
|
|
116
116
|
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
117
117
|
function Component() {
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
</ContentRow>
|
|
128
128
|
)
|
|
129
129
|
}
|
|
130
|
-
`}}},withIcon:{label:"Tag with icon",examples:{basic:{react:
|
|
130
|
+
`}}},withIcon:{label:"Tag with icon",examples:{basic:{react:i.code`
|
|
131
131
|
import { Tag } from "@sps-woodland/tags";
|
|
132
132
|
|
|
133
133
|
function Component() {
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
</>
|
|
145
145
|
)
|
|
146
146
|
}
|
|
147
|
-
`}}}}},
|
|
147
|
+
`}}}}},q={components:[k],examples:{basic:{label:"Basic",examples:{basic:{react:i.code`
|
|
148
148
|
import { SplitTag } from "@sps-woodland/tag";
|
|
149
149
|
|
|
150
150
|
function Component() {
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
</>
|
|
160
160
|
);
|
|
161
161
|
}
|
|
162
|
-
`}}},icon:{label:"Icon",examples:{basic:{react:
|
|
162
|
+
`}}},icon:{label:"Icon",examples:{basic:{react:i.code`
|
|
163
163
|
import { SplitTag } from "@sps-woodland/tag";
|
|
164
164
|
|
|
165
165
|
function Component() {
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
</>
|
|
176
176
|
);
|
|
177
177
|
}
|
|
178
|
-
`}}},link:{label:"Link",examples:{basic:{react:
|
|
178
|
+
`}}},link:{label:"Link",examples:{basic:{react:i.code`
|
|
179
179
|
import { SplitTag } from "@sps-woodland/tag";
|
|
180
180
|
|
|
181
181
|
function Component() {
|
|
@@ -183,4 +183,4 @@
|
|
|
183
183
|
<SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
|
|
184
184
|
);
|
|
185
185
|
}
|
|
186
|
-
`}}}}},
|
|
186
|
+
`}}}}},B={"Clickable Tags":L,Tags:W,"Split Tags":q};r.ClickableTag=h,r.MANIFEST=B,r.SplitTag=k,r.Tag=w,r.TagIcons=C,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export declare const splitTag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
2
|
+
wrap: {
|
|
3
|
+
true: {
|
|
4
|
+
display: "inline-flex";
|
|
5
|
+
};
|
|
6
|
+
false: {};
|
|
7
|
+
};
|
|
8
|
+
}>;
|
|
9
|
+
export declare const splitTagKey: string;
|
|
10
|
+
export declare const splitTagKeyText: string;
|
|
11
|
+
export declare const splitTagValue: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
12
|
+
href: {
|
|
13
|
+
true: {
|
|
14
|
+
cursor: "pointer";
|
|
15
|
+
textDecoration: "underline";
|
|
16
|
+
color: string;
|
|
17
|
+
};
|
|
18
|
+
false: {};
|
|
19
|
+
};
|
|
20
|
+
kind: {
|
|
21
|
+
default: {};
|
|
22
|
+
key: {
|
|
23
|
+
boxShadow: `
|
|
24
|
+
${string} 0 0 ${string} inset,
|
|
25
|
+
-${string} 0 0 ${string} inset,
|
|
26
|
+
0 ${string} 0 ${string} inset,
|
|
27
|
+
0 -${string} 0 ${string} inset`;
|
|
28
|
+
};
|
|
29
|
+
warning: {
|
|
30
|
+
boxShadow: `
|
|
31
|
+
${string} 0 0 ${string} inset,
|
|
32
|
+
-${string} 0 0 ${string} inset,
|
|
33
|
+
0 ${string} 0 ${string} inset,
|
|
34
|
+
0 -${string} 0 ${string} inset`;
|
|
35
|
+
};
|
|
36
|
+
error: {
|
|
37
|
+
boxShadow: `
|
|
38
|
+
${string} 0 0 ${string} inset,
|
|
39
|
+
-${string} 0 0 ${string} inset,
|
|
40
|
+
0 ${string} 0 ${string} inset,
|
|
41
|
+
0 -${string} 0 ${string} inset`;
|
|
42
|
+
};
|
|
43
|
+
pending: {
|
|
44
|
+
boxShadow: `
|
|
45
|
+
${string} 0 0 ${string} inset,
|
|
46
|
+
-${string} 0 0 ${string} inset,
|
|
47
|
+
0 ${string} 0 ${string} inset,
|
|
48
|
+
0 -${string} 0 ${string} inset`;
|
|
49
|
+
};
|
|
50
|
+
success: {
|
|
51
|
+
boxShadow: `
|
|
52
|
+
${string} 0 0 ${string} inset,
|
|
53
|
+
-${string} 0 0 ${string} inset,
|
|
54
|
+
0 ${string} 0 ${string} inset,
|
|
55
|
+
0 -${string} 0 ${string} inset`;
|
|
56
|
+
};
|
|
57
|
+
info: {
|
|
58
|
+
boxShadow: `
|
|
59
|
+
${string} 0 0 ${string} inset,
|
|
60
|
+
-${string} 0 0 ${string} inset,
|
|
61
|
+
0 ${string} 0 ${string} inset,
|
|
62
|
+
0 -${string} 0 ${string} inset`;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
}>;
|
|
66
|
+
export declare const splitTagLink: string;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
+
import type { IconName } from "@sps-woodland/tokens";
|
|
4
|
+
import type { TagKind } from "../tag/Tag.css";
|
|
5
|
+
export declare function SplitTag({ children, className, color, href, target, icon, tagKey, value, wrap, ...rest }: ComponentProps<{
|
|
6
|
+
color: TagKind;
|
|
7
|
+
href?: string;
|
|
8
|
+
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
9
|
+
icon?: boolean | IconName;
|
|
10
|
+
tagKey: string;
|
|
11
|
+
value: string;
|
|
12
|
+
wrap?: boolean;
|
|
13
|
+
}, HTMLDivElement>): React.ReactElement;
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_tags__version_8_52_1__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_8_52_1__hash_160drw11{background-color:#e6f2f8}.pkg_sps-woodland_tags__version_8_52_1__hash_160drw12{background-color:#e9e9ea}.pkg_sps-woodland_tags__version_8_52_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_52_1__hash_160drw15{height:auto}.pkg_sps-woodland_tags__version_8_52_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_52_1__hash_160drw18{cursor:pointer;text-decoration:underline}.pkg_sps-woodland_tags__version_8_52_1__hash_160drw18:hover{color:#e6f2f8;background-color:#09638d;border-radius:.125rem}.pkg_sps-woodland_tags__version_8_52_1__hash_160drw1a{white-space:normal;height:auto;line-height:.875rem;word-break:break-word}.pkg_sps-woodland_tags__version_8_52_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_52_1__hash_160drw1h{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_8_52_1__hash_160drw1h:focus,.pkg_sps-woodland_tags__version_8_52_1__hash_160drw1h:hover{background-color:#09638d;color:#e6f2f8;cursor:pointer}.pkg_sps-woodland_tags__version_8_52_1__hash_160drw1i{height:auto;align-content:center}.pkg_sps-woodland_tags__version_8_52_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_52_1__hash_160drw1l{color:#09638d}span:hover>.pkg_sps-woodland_tags__version_8_52_1__hash_160drw1l{color:#e6f2f8}.pkg_sps-woodland_tags__version_8_52_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_52_1__hash_5f3efi1{background:#e9e9ea;color:#4b5356}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi2{background:#4b5356;color:#fff}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi3{background:#e7760b;color:#fff}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi4{background:#de002e;color:#fff}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi5{background:#91467f;color:#fff}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi6{background:#0b8940;color:#fff}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi7{background:#007db8;color:#fff}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efi8{display:inline-flex;align-items:start;flex-wrap:nowrap;white-space:normal;height:auto;line-height:.875rem;word-break:break-word;text-overflow:clip}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efia{height:1em;font-size:.75rem;line-height:.625rem;margin-right:.25rem}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efia:before{vertical-align:text-bottom}.pkg_sps-woodland_tags__version_8_52_1__hash_5f3efib{display:none}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofse0{display:inline-block}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofse1{display:inline-flex}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofse3{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_52_1__hash_79ofse5{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_52_1__hash_79ofse6{cursor:pointer;text-decoration:underline;color:#4b5356}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofse9{box-shadow:.0625rem 0 #4b5356 inset,-.0625rem 0 #4b5356 inset,0 .0625rem #4b5356 inset,0 -.0625rem #4b5356 inset}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofsea{box-shadow:.0625rem 0 #e7760b inset,-.0625rem 0 #e7760b inset,0 .0625rem #e7760b inset,0 -.0625rem #e7760b inset}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofseb{box-shadow:.0625rem 0 #de002e inset,-.0625rem 0 #de002e inset,0 .0625rem #de002e inset,0 -.0625rem #de002e inset}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofsec{box-shadow:.0625rem 0 #91467f inset,-.0625rem 0 #91467f inset,0 .0625rem #91467f inset,0 -.0625rem #91467f inset}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofsed{box-shadow:.0625rem 0 #0b8940 inset,-.0625rem 0 #0b8940 inset,0 .0625rem #0b8940 inset,0 -.0625rem #0b8940 inset}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofsee{box-shadow:.0625rem 0 #007db8 inset,-.0625rem 0 #007db8 inset,0 .0625rem #007db8 inset,0 -.0625rem #007db8 inset}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofsef,.pkg_sps-woodland_tags__version_8_52_1__hash_79ofsef:hover{color:#4b5356}.pkg_sps-woodland_tags__version_8_52_1__hash_79ofse3>i{margin-right:0}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { BooleanRecipeVariant, RecipeVariant, VariantDefinitions } from "@sps-woodland/core";
|
|
2
|
+
import { Tokens } from "@sps-woodland/tokens";
|
|
3
|
+
export type TagKind = keyof typeof Tokens.component.tag;
|
|
4
|
+
interface TagVariantDefinitions extends VariantDefinitions {
|
|
5
|
+
kind: RecipeVariant<TagKind>;
|
|
6
|
+
wrap: BooleanRecipeVariant;
|
|
7
|
+
}
|
|
8
|
+
export declare const tag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<TagVariantDefinitions>;
|
|
9
|
+
export declare const tagIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
10
|
+
kind: {
|
|
11
|
+
default: {
|
|
12
|
+
display: "none";
|
|
13
|
+
};
|
|
14
|
+
key: {};
|
|
15
|
+
warning: {};
|
|
16
|
+
error: {};
|
|
17
|
+
pending: {};
|
|
18
|
+
success: {};
|
|
19
|
+
info: {};
|
|
20
|
+
custom: {};
|
|
21
|
+
};
|
|
22
|
+
}>;
|
|
23
|
+
export {};
|
package/lib/tag/Tag.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ComponentProps } from "@sps-woodland/core";
|
|
3
|
+
import type { IconName } from "@sps-woodland/tokens";
|
|
4
|
+
import type { TagKind } from "./Tag.css";
|
|
5
|
+
export declare const TagIcons: Record<TagKind, IconName>;
|
|
6
|
+
export declare function Tag({ children, className, kind, icon, wrap, ...rest }: ComponentProps<{
|
|
7
|
+
kind?: TagKind;
|
|
8
|
+
icon?: boolean | IconName;
|
|
9
|
+
wrap?: boolean;
|
|
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.52.1",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/cards",
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
"import": "./lib/index.js",
|
|
18
18
|
"default": "./lib/index.js"
|
|
19
19
|
},
|
|
20
|
-
"./style.css": "./lib/style.css",
|
|
21
20
|
"./lib/style.css": {
|
|
22
21
|
"import": "./lib/style.css",
|
|
23
22
|
"require": "./lib/style.css"
|
|
@@ -30,19 +29,22 @@
|
|
|
30
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
31
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
32
|
+
"@sps-woodland/core": "8.52.1",
|
|
33
|
+
"@sps-woodland/tokens": "8.52.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@spscommerce/utils": "9.0.3",
|
|
37
|
+
"@vanilla-extract/css": "1.17.4",
|
|
38
|
+
"@vanilla-extract/recipes": "0.2.5",
|
|
37
39
|
"react": "16.14.0",
|
|
38
40
|
"react-dom": "16.14.0",
|
|
39
|
-
"@sps-woodland/core": "8.
|
|
41
|
+
"@sps-woodland/core": "8.52.1",
|
|
42
|
+
"@sps-woodland/tokens": "8.52.1"
|
|
40
43
|
},
|
|
41
44
|
"scripts": {
|
|
42
|
-
"build": "pnpm run build:js && pnpm run build:types
|
|
45
|
+
"build": "pnpm run build:js && pnpm run build:types",
|
|
43
46
|
"build:js": "vite build",
|
|
44
47
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
45
|
-
"build:css": "cp ../core/lib/tags/style.css lib/style.css 2>/dev/null || echo 'tags style.css not found, skipping'",
|
|
46
48
|
"watch": "vite build --watch",
|
|
47
49
|
"clean": "git clean -fdX",
|
|
48
50
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
+
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
2
3
|
import { defineConfig } from "vite";
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
3
5
|
import pkg from "./package.json";
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
// No vanilla-extract needed - CSS is provided by the mono-package.
|
|
7
|
-
|
|
8
|
-
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
9
8
|
|
|
10
9
|
export default defineConfig({
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
11
18
|
build: {
|
|
12
19
|
lib: {
|
|
13
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
14
21
|
name: "Tags",
|
|
15
22
|
fileName: "index",
|
|
23
|
+
cssFileName: "style",
|
|
16
24
|
},
|
|
17
25
|
outDir: path.resolve(__dirname, "./lib"),
|
|
18
26
|
emptyOutDir: false,
|
|
19
27
|
rollupOptions: {
|
|
20
|
-
|
|
21
|
-
external: (id) => !id.endsWith(".css") && peerDeps.some((dep) => id === dep || id.startsWith(dep + "/")),
|
|
28
|
+
external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
|
|
22
29
|
},
|
|
23
30
|
},
|
|
24
31
|
});
|