@sps-woodland/tags 8.21.0 → 8.21.2
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.es.js → index.js} +3 -3
- package/lib/index.umd.cjs +168 -0
- package/lib/style.css +1 -1
- package/package.json +10 -10
- package/vite.config.mjs +2 -2
- package/lib/index.cjs.js +0 -168
|
@@ -54,7 +54,7 @@ var O = (a, o, e) => {
|
|
|
54
54
|
for (var [g, u] of a.compoundVariants)
|
|
55
55
|
O(g, s, a.defaultVariants) && (e += " " + u);
|
|
56
56
|
return e;
|
|
57
|
-
}, E = m({ defaultClassName: "pkg_sps-
|
|
57
|
+
}, E = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw10", variantClassNames: { kind: { blue: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw11", gray: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw12" }, disabled: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw13", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw14" }, wrap: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw15", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw16" } }, defaultVariants: { kind: "blue", disabled: !1, wrap: !1 }, compoundVariants: [] }), x = "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1k", V = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1h", variantClassNames: { wrap: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1i", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1j" } }, defaultVariants: { wrap: !1 }, compoundVariants: [] }), K = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw17", variantClassNames: { link: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw18", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw19" }, wrap: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1a", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1b" }, disabled: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1c", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1d" }, addOrRemove: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1e", false: "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1f" } }, defaultVariants: { link: !1, wrap: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, wrap: !1, addOrRemove: !0 }, "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1g"]] }), R = "pkg_sps-woodland_tags__version_8_21_2__hash_160drw1l";
|
|
58
58
|
function T({
|
|
59
59
|
children: a,
|
|
60
60
|
className: o,
|
|
@@ -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_21_2__hash_5f3efi0", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi1", key: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi2", warning: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi3", error: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi4", pending: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi5", success: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi6", info: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), P = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi8", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi9", key: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efia", warning: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efib", error: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efic", pending: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efid", success: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efie", info: "pkg_sps-woodland_tags__version_8_21_2__hash_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
|
|
125
125
|
const I = Object.freeze({
|
|
126
126
|
default: "info-circle",
|
|
127
127
|
key: "info-circle",
|
|
@@ -147,7 +147,7 @@ k.set(f, {
|
|
|
147
147
|
icon: { type: "boolean", default: "false" }
|
|
148
148
|
}
|
|
149
149
|
});
|
|
150
|
-
var j = "pkg_sps-
|
|
150
|
+
var j = "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse0", L = "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse1", W = "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse2", D = "pkg_sps-woodland_tags__version_8_21_2__hash_79ofsed", B = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse3", variantClassNames: { href: { true: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse4", false: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse5" }, kind: { default: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse6", key: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse7", warning: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse8", error: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofse9", pending: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofsea", success: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofseb", info: "pkg_sps-woodland_tags__version_8_21_2__hash_79ofsec" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
|
|
151
151
|
function v({
|
|
152
152
|
children: a,
|
|
153
153
|
className: o,
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
(function(t,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):(t=typeof globalThis<"u"?globalThis:t||self,u(t.Tags={},t.React,t.core,t.utils))})(this,function(t,u,n,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 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 r=a.variantClassNames[_][c];r&&(e+=" "+r)}}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_21_2__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw11",gray:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw13",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw14"},wrap:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw15",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw16"}},defaultVariants:{kind:"blue",disabled:!1,wrap:!1},compoundVariants:[]}),E="pkg_sps-woodland_tags__version_8_21_2__hash_160drw1k",V=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1h",variantClassNames:{wrap:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1i",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1j"}},defaultVariants:{wrap:!1},compoundVariants:[]}),K=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw17",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw18",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw19"},wrap:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1a",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1b"},disabled:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1c",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1d"},addOrRemove:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1e",false:"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1f"}},defaultVariants:{link:!1,wrap:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,wrap:!1,addOrRemove:!0},"pkg_sps-woodland_tags__version_8_21_2__hash_160drw1g"]]}),R="pkg_sps-woodland_tags__version_8_21_2__hash_160drw1l";function k({children:a,className:o,onClick:e,disabled:s,wrap:_,href:d,target:p,kind:c,onAdd:r,onRemove:g,...T}){const A=l.Children.toArray(a).filter(f=>typeof f=="string").join("");l.useEffect(()=>{if(g&&r)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[r,g]);function z(f){r?r():g&&g(),f.stopPropagation()}function H(f){f.stopPropagation(),e&&e(f)}return l.createElement("div",{className:n.cl(O({kind:c,disabled:s,wrap:_}),o),...T},l.createElement("span",{className:n.cl(K({link:!!d||!!e,disabled:s,wrap:_,addOrRemove:r||g})),onClick:H,title:A},d?l.createElement("a",{className:R,href:d,target:p},a):a),(r||g)&&!s&&l.createElement("div",{className:n.cl(V({wrap:_})),onClick:z,tabIndex:-1,"aria-label":r?"Add":"Remove"},l.createElement(n.Icon,{className:E,"aria-hidden":"true",icon:r?"plus-sign":"x"})))}n.Metadata.set(k,{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_21_2__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),F=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi8",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi9",key:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efia",warning:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efib",error:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efic",pending:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efid",success:"pkg_sps-woodland_tags__version_8_21_2__hash_5f3efie",info:"pkg_sps-woodland_tags__version_8_21_2__hash_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 w({children:a,className:o,kind:e="default",icon:s,..._}){return l.createElement("span",{className:n.cl(x({kind:e}),o),..._},s&&l.createElement(n.Icon,{className:n.cl(F({kind:e})),icon:C[e]}),a)}n.Metadata.set(w,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var P="pkg_sps-woodland_tags__version_8_21_2__hash_79ofse0",j="pkg_sps-woodland_tags__version_8_21_2__hash_79ofse1",I="pkg_sps-woodland_tags__version_8_21_2__hash_79ofse2",M="pkg_sps-woodland_tags__version_8_21_2__hash_79ofsed",D=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse3",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse4",false:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse5"},kind:{default:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse6",key:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse7",warning:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse8",error:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofse9",pending:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofsea",success:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofseb",info:"pkg_sps-woodland_tags__version_8_21_2__hash_79ofsec"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function h({children:a,className:o,color:e="default",href:s,target:_,icon:d,tagKey:p,value:c,...r}){return l.createElement("span",{className:n.cl(P,o),...r},l.createElement(w,{className:n.cl(j),icon:d,kind:e},p&&l.createElement("span",{className:n.cl(I)},p)),l.createElement(w,{className:n.cl(D({href:!!s,kind:e}))},s?l.createElement("a",{className:M,href:s,target:_},c):c))}n.Metadata.set(h,{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:[k],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
|
+
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:i.code`
|
|
23
|
+
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
24
|
+
import { Icon } from "@sps-woodland/core";
|
|
25
|
+
|
|
26
|
+
function Component() {
|
|
27
|
+
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
28
|
+
selected: false
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
function selectRow() {
|
|
32
|
+
updateForm({ selected: !formValue.selected })
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<ContentRow
|
|
37
|
+
selectable
|
|
38
|
+
selected={formValue.selected}
|
|
39
|
+
onSelectionChange={selectRow}
|
|
40
|
+
>
|
|
41
|
+
<ContentRowCol style={{ width: "2.9rem" }}>
|
|
42
|
+
<Icon icon="star" size="md" color="blue-medium" />
|
|
43
|
+
</ContentRowCol>
|
|
44
|
+
<ContentRowCol style={{ width: "7rem" }}>
|
|
45
|
+
<ClickableTag className="mr-1 mb-1" wrap>Wrap: This Is Very Excessively Wide To Show How These Look</ClickableTag>
|
|
46
|
+
<ClickableTag className="mr-1" wrap kind="gray">Wrap: This Is Very Excessively Wide To Show How These Look</ClickableTag>
|
|
47
|
+
</ContentRowCol>
|
|
48
|
+
<ContentRowCol widthPx={160}>
|
|
49
|
+
May 23, 2018 @ 4:38 PM
|
|
50
|
+
</ContentRowCol>
|
|
51
|
+
</ContentRow>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
`}}},button:{label:"Button",examples:{remove:{react:i.code`
|
|
55
|
+
import { ClickableTag } from "@sps-woodland/tags";
|
|
56
|
+
|
|
57
|
+
function Component() {
|
|
58
|
+
return (
|
|
59
|
+
<>
|
|
60
|
+
<ClickableTag className="mr-1" onRemove={() => console.log("removed")}>One</ClickableTag>
|
|
61
|
+
<ClickableTag className="mr-1" onRemove={() => console.log("removed")} kind="gray">Two</ClickableTag>
|
|
62
|
+
</>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
`},add:{react:i.code`
|
|
66
|
+
import { ClickableTag } from "@sps-woodland/tags";
|
|
67
|
+
|
|
68
|
+
function Component() {
|
|
69
|
+
return (
|
|
70
|
+
<>
|
|
71
|
+
<ClickableTag className="mr-1" onAdd={() => console.log("added")}>One</ClickableTag>
|
|
72
|
+
<ClickableTag className="mr-1" onAdd={() => console.log("added")} kind="gray">Two</ClickableTag>
|
|
73
|
+
</>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
`}}},link:{label:"Link",examples:{basic:{react:i.code`
|
|
77
|
+
import { ClickableTag } from "@sps-woodland/tags";
|
|
78
|
+
|
|
79
|
+
function Component() {
|
|
80
|
+
return (
|
|
81
|
+
<>
|
|
82
|
+
<ClickableTag className="mr-1" href="https://google.com">Link</ClickableTag>
|
|
83
|
+
<ClickableTag className="mr-1" onClick={() => window.alert("hi")} kind="gray">Link</ClickableTag>
|
|
84
|
+
</>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
`},button:{react:i.code`
|
|
88
|
+
import { ClickableTag } from "@sps-woodland/tags";
|
|
89
|
+
|
|
90
|
+
function Component() {
|
|
91
|
+
return (
|
|
92
|
+
<>
|
|
93
|
+
<ClickableTag className="mr-1" href="https://google.com" onRemove={() => console.log("removed")}>Remove</ClickableTag>
|
|
94
|
+
<ClickableTag className="mr-1" onClick={() => window.alert("hi")} onAdd={() => console.log("added")} kind="gray">Add</ClickableTag>
|
|
95
|
+
</>
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
`}}}}},W={components:[w],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
|
|
99
|
+
import { Tag } from "@sps-woodland/tags";
|
|
100
|
+
|
|
101
|
+
function Component() {
|
|
102
|
+
return (
|
|
103
|
+
<>
|
|
104
|
+
<Tag className="mr-1 mb-1">Default</Tag>
|
|
105
|
+
<Tag className="mr-1 mb-1" kind="key">Key</Tag>
|
|
106
|
+
<Tag className="mr-1 mb-1" kind="warning">Warning</Tag>
|
|
107
|
+
<Tag className="mr-1 mb-1" kind="error">Error</Tag>
|
|
108
|
+
<Tag className="mr-1 mb-1" kind="pending">Pending</Tag>
|
|
109
|
+
<Tag className="mr-1 mb-1" kind="success">Success</Tag>
|
|
110
|
+
<Tag className="mr-1 mb-1" kind="info">Info</Tag>
|
|
111
|
+
</>
|
|
112
|
+
)
|
|
113
|
+
}
|
|
114
|
+
`}}},withIcon:{label:"Tag with icon",examples:{basic:{react:i.code`
|
|
115
|
+
import { Tag } from "@sps-woodland/tags";
|
|
116
|
+
|
|
117
|
+
function Component() {
|
|
118
|
+
return (
|
|
119
|
+
<>
|
|
120
|
+
<Tag className="mr-1 mb-1" icon>Default</Tag>
|
|
121
|
+
<Tag className="mr-1 mb-1" kind="key" icon>Key</Tag>
|
|
122
|
+
<Tag className="mr-1 mb-1" kind="warning" icon>Warning</Tag>
|
|
123
|
+
<Tag className="mr-1 mb-1" kind="error" icon>Error</Tag>
|
|
124
|
+
<Tag className="mr-1 mb-1" kind="pending" icon>Pending</Tag>
|
|
125
|
+
<Tag className="mr-1 mb-1" kind="success" icon>Success</Tag>
|
|
126
|
+
<Tag className="mr-1 mb-1" kind="info" icon>Info</Tag>
|
|
127
|
+
</>
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
`}}}}},q={components:[h],examples:{basic:{label:"Basic",examples:{basic:{react:i.code`
|
|
131
|
+
import { SplitTag } from "@sps-woodland/tag";
|
|
132
|
+
|
|
133
|
+
function Component() {
|
|
134
|
+
return (
|
|
135
|
+
<>
|
|
136
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" />
|
|
137
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
|
|
138
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" />
|
|
139
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
|
|
140
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" />
|
|
141
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" />
|
|
142
|
+
</>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
`}}},icon:{label:"Icon",examples:{basic:{react:i.code`
|
|
146
|
+
import { SplitTag } from "@sps-woodland/tag";
|
|
147
|
+
|
|
148
|
+
function Component() {
|
|
149
|
+
return (
|
|
150
|
+
<>
|
|
151
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
|
|
152
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
|
|
153
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
|
|
154
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
|
|
155
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
|
|
156
|
+
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
|
|
157
|
+
</>
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
`}}},link:{label:"Link",examples:{basic:{react:i.code`
|
|
161
|
+
import { SplitTag } from "@sps-woodland/tag";
|
|
162
|
+
|
|
163
|
+
function Component() {
|
|
164
|
+
return (
|
|
165
|
+
<SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
`}}}}},B={"Clickable Tags":L,Tags:W,"Split Tags":q};t.ClickableTag=k,t.MANIFEST=B,t.SplitTag=h,t.Tag=w,t.TagIcons=C,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_tags__version_8_21_2__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_21_2__hash_160drw11{background-color:#e6f2f8}.pkg_sps-woodland_tags__version_8_21_2__hash_160drw12{background-color:#e9e9ea}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__hash_160drw15{height:auto}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__hash_160drw18{cursor:pointer;text-decoration:underline}.pkg_sps-woodland_tags__version_8_21_2__hash_160drw18:hover{color:#e6f2f8;background-color:#08638d;border-radius:.125rem}.pkg_sps-woodland_tags__version_8_21_2__hash_160drw1a{white-space:normal;height:auto;line-height:.9rem;word-break:break-word}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__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_21_2__hash_160drw1h:focus,.pkg_sps-woodland_tags__version_8_21_2__hash_160drw1h:hover{background-color:#08638d;color:#e6f2f8;cursor:pointer}.pkg_sps-woodland_tags__version_8_21_2__hash_160drw1i{height:auto;align-content:center}.pkg_sps-woodland_tags__version_8_21_2__hash_160drw1k{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>.pkg_sps-woodland_tags__version_8_21_2__hash_160drw1l{color:#08638d}span:hover>.pkg_sps-woodland_tags__version_8_21_2__hash_160drw1l{color:#e6f2f8}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__hash_5f3efi1{background:#e9e9ea;color:#4b5356}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi2{background:#4b5356;color:#fff}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi3{background:#e77609;color:#fff}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi4{background:#de012e;color:#fff}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi5{background:#91467f;color:#fff}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi6{background:#0b8940;color:#fff}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi7{background:#027db8;color:#fff}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi8:before{vertical-align:text-bottom}.pkg_sps-woodland_tags__version_8_21_2__hash_5f3efi9{display:none}.pkg_sps-woodland_tags__version_8_21_2__hash_79ofse0{display:inline-block}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__hash_79ofse2{margin-left:.25rem}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__hash_79ofse4{cursor:pointer;text-decoration:underline;color:#4b5356}.pkg_sps-woodland_tags__version_8_21_2__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_21_2__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_21_2__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_21_2__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_21_2__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_21_2__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_21_2__hash_79ofsed,.pkg_sps-woodland_tags__version_8_21_2__hash_79ofsed:hover{color:#4b5356}.pkg_sps-woodland_tags__version_8_21_2__hash_79ofse1>i{margin-right:0}
|
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": "8.21.
|
|
4
|
+
"version": "8.21.2",
|
|
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
9
|
"type": "module",
|
|
10
|
-
"module": "./lib/index.
|
|
11
|
-
"main": "./lib/index.cjs
|
|
10
|
+
"module": "./lib/index.js",
|
|
11
|
+
"main": "./lib/index.umd.cjs",
|
|
12
12
|
"types": "./lib/index.d.ts",
|
|
13
13
|
"exports": {
|
|
14
14
|
".": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"default": "./lib/index.
|
|
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": "^7.0.0",
|
|
30
30
|
"react": "^16.14.0",
|
|
31
31
|
"react-dom": "^16.14.0",
|
|
32
|
-
"@sps-woodland/core": "8.21.
|
|
33
|
-
"@sps-woodland/tokens": "8.21.
|
|
32
|
+
"@sps-woodland/core": "8.21.2",
|
|
33
|
+
"@sps-woodland/tokens": "8.21.2"
|
|
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.21.
|
|
42
|
-
"@sps-woodland/tokens": "8.21.
|
|
41
|
+
"@sps-woodland/core": "8.21.2",
|
|
42
|
+
"@sps-woodland/tokens": "8.21.2"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "pnpm run build:js && pnpm run build:types",
|
package/vite.config.mjs
CHANGED
|
@@ -18,8 +18,8 @@ export default defineConfig({
|
|
|
18
18
|
build: {
|
|
19
19
|
lib: {
|
|
20
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
21
|
-
|
|
22
|
-
fileName:
|
|
21
|
+
name: "Tags",
|
|
22
|
+
fileName: "index",
|
|
23
23
|
},
|
|
24
24
|
outDir: path.resolve(__dirname, "./lib"),
|
|
25
25
|
emptyOutDir: false,
|
package/lib/index.cjs.js
DELETED
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),l=require("@sps-woodland/core"),r=require("@spscommerce/utils");function S(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 n=S(N);function O(a,o,e){return o in a?Object.defineProperty(a,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):a[o]=e,a}function h(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 b(a){for(var o=1;o<arguments.length;o++){var e=arguments[o]!=null?arguments[o]:{};o%2?h(Object(e),!0).forEach(function(s){O(a,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(e)):h(Object(e)).forEach(function(s){Object.defineProperty(a,s,Object.getOwnPropertyDescriptor(e,s))})}return a}var E=(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=b(b({},a.defaultVariants),o);for(var _ in s){var i,g=(i=s[_])!==null&&i!==void 0?i:a.defaultVariants[_];if(g!=null){var d=g;typeof d=="boolean"&&(d=d===!0?"true":"false");var t=a.variantClassNames[_][d];t&&(e+=" "+t)}}for(var[c,u]of a.compoundVariants)E(c,s,a.defaultVariants)&&(e+=" "+u);return e},V=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw11",gray:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw13",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw14"},wrap:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw15",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw16"}},defaultVariants:{kind:"blue",disabled:!1,wrap:!1},compoundVariants:[]}),x="pkg_sps-woodland_tags__version_8_21_0__hash_160drw1k",K=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1h",variantClassNames:{wrap:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1i",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1j"}},defaultVariants:{wrap:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw17",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw18",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw19"},wrap:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1a",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1b"},disabled:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1c",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1d"},addOrRemove:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1e",false:"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1f"}},defaultVariants:{link:!1,wrap:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,wrap:!1,addOrRemove:!0},"pkg_sps-woodland_tags__version_8_21_0__hash_160drw1g"]]}),F="pkg_sps-woodland_tags__version_8_21_0__hash_160drw1l";function k({children:a,className:o,onClick:e,disabled:s,wrap:_,href:i,target:g,kind:d,onAdd:t,onRemove:c,...u}){const v=n.Children.toArray(a).filter(p=>typeof p=="string").join("");n.useEffect(()=>{if(c&&t)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[t,c]);function C(p){t?t():c&&c(),p.stopPropagation()}function y(p){p.stopPropagation(),e&&e(p)}return n.createElement("div",{className:l.cl(V({kind:d,disabled:s,wrap:_}),o),...u},n.createElement("span",{className:l.cl(R({link:!!i||!!e,disabled:s,wrap:_,addOrRemove:t||c})),onClick:y,title:v},i?n.createElement("a",{className:F,href:i,target:g},a):a),(t||c)&&!s&&n.createElement("div",{className:l.cl(K({wrap:_})),onClick:C,tabIndex:-1,"aria-label":t?"Add":"Remove"},n.createElement(l.Icon,{className:x,"aria-hidden":"true",icon:t?"plus-sign":"x"})))}l.Metadata.set(k,{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 P=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),I=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi8",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efi9",key:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efia",warning:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efib",error:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efic",pending:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efid",success:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efie",info:"pkg_sps-woodland_tags__version_8_21_0__hash_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const T=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 f({children:a,className:o,kind:e="default",icon:s,..._}){return n.createElement("span",{className:l.cl(P({kind:e}),o),..._},s&&n.createElement(l.Icon,{className:l.cl(I({kind:e})),icon:T[e]}),a)}l.Metadata.set(f,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var j="pkg_sps-woodland_tags__version_8_21_0__hash_79ofse0",M="pkg_sps-woodland_tags__version_8_21_0__hash_79ofse1",D="pkg_sps-woodland_tags__version_8_21_0__hash_79ofse2",L="pkg_sps-woodland_tags__version_8_21_0__hash_79ofsed",W=m({defaultClassName:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse3",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse4",false:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse5"},kind:{default:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse6",key:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse7",warning:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse8",error:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofse9",pending:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofsea",success:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofseb",info:"pkg_sps-woodland_tags__version_8_21_0__hash_79ofsec"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function w({children:a,className:o,color:e="default",href:s,target:_,icon:i,tagKey:g,value:d,...t}){return n.createElement("span",{className:l.cl(j,o),...t},n.createElement(f,{className:l.cl(M),icon:i,kind:e},g&&n.createElement("span",{className:l.cl(D)},g)),n.createElement(f,{className:l.cl(W({href:!!s,kind:e}))},s?n.createElement("a",{className:L,href:s,target:_},d):d))}l.Metadata.set(w,{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 q={components:[k],examples:{basic:{label:"Basic Tag",examples:{basic:{react:r.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:r.code`
|
|
13
|
-
import { ClickableTag } from "@sps-woodland/tags";
|
|
14
|
-
|
|
15
|
-
function Component() {
|
|
16
|
-
return (
|
|
17
|
-
<>
|
|
18
|
-
<ClickableTag disabled>Disabled</ClickableTag>
|
|
19
|
-
</>
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
`}}},wrap:{label:"Wrapped Tag",examples:{basic:{react:r.code`
|
|
23
|
-
import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
|
|
24
|
-
import { Icon } from "@sps-woodland/core";
|
|
25
|
-
|
|
26
|
-
function Component() {
|
|
27
|
-
const { formValue, formMeta, updateForm } = useSpsForm({
|
|
28
|
-
selected: false
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
function selectRow() {
|
|
32
|
-
updateForm({ selected: !formValue.selected })
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<ContentRow
|
|
37
|
-
selectable
|
|
38
|
-
selected={formValue.selected}
|
|
39
|
-
onSelectionChange={selectRow}
|
|
40
|
-
>
|
|
41
|
-
<ContentRowCol style={{ width: "2.9rem" }}>
|
|
42
|
-
<Icon icon="star" size="md" color="blue-medium" />
|
|
43
|
-
</ContentRowCol>
|
|
44
|
-
<ContentRowCol style={{ width: "7rem" }}>
|
|
45
|
-
<ClickableTag className="mr-1 mb-1" wrap>Wrap: This Is Very Excessively Wide To Show How These Look</ClickableTag>
|
|
46
|
-
<ClickableTag className="mr-1" wrap kind="gray">Wrap: This Is Very Excessively Wide To Show How These Look</ClickableTag>
|
|
47
|
-
</ContentRowCol>
|
|
48
|
-
<ContentRowCol widthPx={160}>
|
|
49
|
-
May 23, 2018 @ 4:38 PM
|
|
50
|
-
</ContentRowCol>
|
|
51
|
-
</ContentRow>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
`}}},button:{label:"Button",examples:{remove:{react:r.code`
|
|
55
|
-
import { ClickableTag } from "@sps-woodland/tags";
|
|
56
|
-
|
|
57
|
-
function Component() {
|
|
58
|
-
return (
|
|
59
|
-
<>
|
|
60
|
-
<ClickableTag className="mr-1" onRemove={() => console.log("removed")}>One</ClickableTag>
|
|
61
|
-
<ClickableTag className="mr-1" onRemove={() => console.log("removed")} kind="gray">Two</ClickableTag>
|
|
62
|
-
</>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
`},add:{react:r.code`
|
|
66
|
-
import { ClickableTag } from "@sps-woodland/tags";
|
|
67
|
-
|
|
68
|
-
function Component() {
|
|
69
|
-
return (
|
|
70
|
-
<>
|
|
71
|
-
<ClickableTag className="mr-1" onAdd={() => console.log("added")}>One</ClickableTag>
|
|
72
|
-
<ClickableTag className="mr-1" onAdd={() => console.log("added")} kind="gray">Two</ClickableTag>
|
|
73
|
-
</>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
`}}},link:{label:"Link",examples:{basic:{react:r.code`
|
|
77
|
-
import { ClickableTag } from "@sps-woodland/tags";
|
|
78
|
-
|
|
79
|
-
function Component() {
|
|
80
|
-
return (
|
|
81
|
-
<>
|
|
82
|
-
<ClickableTag className="mr-1" href="https://google.com">Link</ClickableTag>
|
|
83
|
-
<ClickableTag className="mr-1" onClick={() => window.alert("hi")} kind="gray">Link</ClickableTag>
|
|
84
|
-
</>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
`},button:{react:r.code`
|
|
88
|
-
import { ClickableTag } from "@sps-woodland/tags";
|
|
89
|
-
|
|
90
|
-
function Component() {
|
|
91
|
-
return (
|
|
92
|
-
<>
|
|
93
|
-
<ClickableTag className="mr-1" href="https://google.com" onRemove={() => console.log("removed")}>Remove</ClickableTag>
|
|
94
|
-
<ClickableTag className="mr-1" onClick={() => window.alert("hi")} onAdd={() => console.log("added")} kind="gray">Add</ClickableTag>
|
|
95
|
-
</>
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
`}}}}},B={components:[f],examples:{basic:{label:"Basic Tag",examples:{basic:{react:r.code`
|
|
99
|
-
import { Tag } from "@sps-woodland/tags";
|
|
100
|
-
|
|
101
|
-
function Component() {
|
|
102
|
-
return (
|
|
103
|
-
<>
|
|
104
|
-
<Tag className="mr-1 mb-1">Default</Tag>
|
|
105
|
-
<Tag className="mr-1 mb-1" kind="key">Key</Tag>
|
|
106
|
-
<Tag className="mr-1 mb-1" kind="warning">Warning</Tag>
|
|
107
|
-
<Tag className="mr-1 mb-1" kind="error">Error</Tag>
|
|
108
|
-
<Tag className="mr-1 mb-1" kind="pending">Pending</Tag>
|
|
109
|
-
<Tag className="mr-1 mb-1" kind="success">Success</Tag>
|
|
110
|
-
<Tag className="mr-1 mb-1" kind="info">Info</Tag>
|
|
111
|
-
</>
|
|
112
|
-
)
|
|
113
|
-
}
|
|
114
|
-
`}}},withIcon:{label:"Tag with icon",examples:{basic:{react:r.code`
|
|
115
|
-
import { Tag } from "@sps-woodland/tags";
|
|
116
|
-
|
|
117
|
-
function Component() {
|
|
118
|
-
return (
|
|
119
|
-
<>
|
|
120
|
-
<Tag className="mr-1 mb-1" icon>Default</Tag>
|
|
121
|
-
<Tag className="mr-1 mb-1" kind="key" icon>Key</Tag>
|
|
122
|
-
<Tag className="mr-1 mb-1" kind="warning" icon>Warning</Tag>
|
|
123
|
-
<Tag className="mr-1 mb-1" kind="error" icon>Error</Tag>
|
|
124
|
-
<Tag className="mr-1 mb-1" kind="pending" icon>Pending</Tag>
|
|
125
|
-
<Tag className="mr-1 mb-1" kind="success" icon>Success</Tag>
|
|
126
|
-
<Tag className="mr-1 mb-1" kind="info" icon>Info</Tag>
|
|
127
|
-
</>
|
|
128
|
-
)
|
|
129
|
-
}
|
|
130
|
-
`}}}}},A={components:[w],examples:{basic:{label:"Basic",examples:{basic:{react:r.code`
|
|
131
|
-
import { SplitTag } from "@sps-woodland/tag";
|
|
132
|
-
|
|
133
|
-
function Component() {
|
|
134
|
-
return (
|
|
135
|
-
<>
|
|
136
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" />
|
|
137
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" />
|
|
138
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" />
|
|
139
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" />
|
|
140
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" />
|
|
141
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" />
|
|
142
|
-
</>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
`}}},icon:{label:"Icon",examples:{basic:{react:r.code`
|
|
146
|
-
import { SplitTag } from "@sps-woodland/tag";
|
|
147
|
-
|
|
148
|
-
function Component() {
|
|
149
|
-
return (
|
|
150
|
-
<>
|
|
151
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="key" icon />
|
|
152
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="warning" icon />
|
|
153
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="error" icon />
|
|
154
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="pending" icon />
|
|
155
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="success" icon />
|
|
156
|
-
<SplitTag className="mr-1" tagKey="Foo" value="1234" color="info" icon />
|
|
157
|
-
</>
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
`}}},link:{label:"Link",examples:{basic:{react:r.code`
|
|
161
|
-
import { SplitTag } from "@sps-woodland/tag";
|
|
162
|
-
|
|
163
|
-
function Component() {
|
|
164
|
-
return (
|
|
165
|
-
<SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
|
|
166
|
-
);
|
|
167
|
-
}
|
|
168
|
-
`}}}}},z={"Clickable Tags":q,Tags:B,"Split Tags":A};exports.ClickableTag=k;exports.MANIFEST=z;exports.SplitTag=w;exports.Tag=f;exports.TagIcons=T;
|