@sps-woodland/tags 8.19.9 → 8.19.11

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.
@@ -4,12 +4,13 @@ export declare type ClickableTagKind = keyof typeof Tokens.component["clickable-
4
4
  interface ClickableTagVariantDefinitions extends VariantDefinitions {
5
5
  kind: RecipeVariant<ClickableTagKind>;
6
6
  disabled: BooleanRecipeVariant;
7
+ wrap: BooleanRecipeVariant;
7
8
  link: BooleanRecipeVariant;
8
9
  addOrRemove: BooleanRecipeVariant;
9
10
  }
10
- export declare const clickableTag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ClickableTagVariantDefinitions, "kind" | "disabled">>;
11
+ export declare const clickableTag: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ClickableTagVariantDefinitions, "kind" | "disabled" | "wrap">>;
11
12
  export declare const clickableTagLabel: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Omit<ClickableTagVariantDefinitions, "kind">>;
12
- export declare const clickableTagIconWrapper: string;
13
+ export declare const clickableTagIconWrapper: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<ClickableTagVariantDefinitions, "wrap">>;
13
14
  export declare const clickableTagIcon: string;
14
15
  export declare const clickableTagLink: string;
15
16
  export {};
@@ -1,8 +1,9 @@
1
1
  import * as React from "react";
2
2
  import type { ComponentProps } from "@sps-woodland/core";
3
3
  import type { ClickableTagKind } from "./ClickableTag.css";
4
- export declare function ClickableTag({ children, className, onClick, disabled, href, target, kind, onAdd, onRemove, ...rest }: ComponentProps<{
4
+ export declare function ClickableTag({ children, className, onClick, disabled, wrap, href, target, kind, onAdd, onRemove, ...rest }: ComponentProps<{
5
5
  disabled?: boolean;
6
+ wrap?: boolean;
6
7
  href?: string;
7
8
  target?: "_blank" | "_self" | "_parent" | "_top";
8
9
  kind?: ClickableTagKind;
package/lib/index.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),r=require("@sps-woodland/core"),i=require("@spscommerce/utils");function N(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=N(C);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 T(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 h(a){for(var o=1;o<arguments.length;o++){var e=arguments[o]!=null?arguments[o]:{};o%2?T(Object(e),!0).forEach(function(s){O(a,s,e[s])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(e)):T(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=h(h({},a.defaultVariants),o);for(var _ in s){var c,d=(c=s[_])!==null&&c!==void 0?c:a.defaultVariants[_];if(d!=null){var n=d;typeof n=="boolean"&&(n=n===!0?"true":"false");var t=a.variantClassNames[_][n];t&&(e+=" "+t)}}for(var[f,u]of a.compoundVariants)S(f,s,a.defaultVariants)&&(e+=" "+u);return e},E=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw11",gray:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw13",false:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw14"}},defaultVariants:{kind:"blue",disabled:!1},compoundVariants:[]}),K="pkg_sps-woodland_tags__version_8_19_9__hash_160drw1e",x="pkg_sps-woodland_tags__version_8_19_9__hash_160drw1d",P=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw15",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw16",false:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw17"},disabled:{true:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw18",false:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw19"},addOrRemove:{true:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw1a",false:"pkg_sps-woodland_tags__version_8_19_9__hash_160drw1b"}},defaultVariants:{link:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,addOrRemove:!0},"pkg_sps-woodland_tags__version_8_19_9__hash_160drw1c"]]}),j="pkg_sps-woodland_tags__version_8_19_9__hash_160drw1f";function k({children:a,className:o,onClick:e,disabled:s,href:_,target:c,kind:d,onAdd:n,onRemove:t,...f}){const u=l.Children.toArray(a).filter(g=>typeof g=="string").join("");l.useEffect(()=>{if(t&&n)throw new Error("Clickable tag should have onRemove or onAdd, not both")},[n,t]);function w(g){n?n():t&&t(),g.stopPropagation()}function y(g){g.stopPropagation(),e&&e(g)}return l.createElement("div",{className:r.cl(E({kind:d,disabled:s}),o),...f},l.createElement("span",{className:r.cl(P({link:!!_||!!e,disabled:s,addOrRemove:n||t})),onClick:y,title:u},_?l.createElement("a",{className:j,href:_,target:c},a):a),(n||t)&&!s&&l.createElement("div",{className:x,onClick:s?void 0:w,tabIndex:-1,"aria-label":n?"Add":"Remove"},l.createElement(r.Icon,{className:K,"aria-hidden":"true",icon:n?"plus-sign":"x"})))}r.Metadata.set(k,{name:"Clickable Tag",props:{disabled:{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 F=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),V=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi8",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi9",key:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efia",warning:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efib",error:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efic",pending:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efid",success:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efie",info:"pkg_sps-woodland_tags__version_8_19_9__hash_5f3efif"}},defaultVariants:{kind:"default"},compoundVariants:[]});const v=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 p({children:a,className:o,kind:e="default",icon:s,..._}){return l.createElement("span",{className:r.cl(F({kind:e}),o),..._},s&&l.createElement(r.Icon,{className:r.cl(V({kind:e})),icon:v[e]}),a)}r.Metadata.set(p,{name:"Tag",props:{kind:{type:"TagKind",default:"default"},icon:{type:"boolean",default:"false"}}});var I="pkg_sps-woodland_tags__version_8_19_9__hash_79ofse0",D="pkg_sps-woodland_tags__version_8_19_9__hash_79ofse1",R="pkg_sps-woodland_tags__version_8_19_9__hash_79ofse2",L="pkg_sps-woodland_tags__version_8_19_9__hash_79ofsed",M=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse3",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse4",false:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse5"},kind:{default:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse6",key:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse7",warning:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse8",error:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofse9",pending:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofsea",success:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofseb",info:"pkg_sps-woodland_tags__version_8_19_9__hash_79ofsec"}},defaultVariants:{href:!1,kind:"default"},compoundVariants:[]});function b({children:a,className:o,color:e="default",href:s,target:_,icon:c,tagKey:d,value:n,...t}){return l.createElement("span",{className:r.cl(I,o),...t},l.createElement(p,{className:r.cl(D),icon:c,kind:e},d&&l.createElement("span",{className:r.cl(R)},d)),l.createElement(p,{className:r.cl(M({href:!!s,kind:e}))},s?l.createElement("a",{className:L,href:s,target:_},n):n))}r.Metadata.set(b,{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:i.code`
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_19_11__hash_160drw10",variantClassNames:{kind:{blue:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw11",gray:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw12"},disabled:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw13",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw14"},wrap:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw15",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw16"}},defaultVariants:{kind:"blue",disabled:!1,wrap:!1},compoundVariants:[]}),x="pkg_sps-woodland_tags__version_8_19_11__hash_160drw1k",K=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1h",variantClassNames:{wrap:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1i",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1j"}},defaultVariants:{wrap:!1},compoundVariants:[]}),R=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw17",variantClassNames:{link:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw18",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw19"},wrap:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1a",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1b"},disabled:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1c",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1d"},addOrRemove:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1e",false:"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1f"}},defaultVariants:{link:!1,wrap:!1,disabled:!1,addOrRemove:!1},compoundVariants:[[{disabled:!1,wrap:!1,addOrRemove:!0},"pkg_sps-woodland_tags__version_8_19_11__hash_160drw1g"]]}),F="pkg_sps-woodland_tags__version_8_19_11__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:s?void 0: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_19_11__hash_5f3efi0",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi1",key:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi2",warning:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi3",error:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi4",pending:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi5",success:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi6",info:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi7"}},defaultVariants:{kind:"default"},compoundVariants:[]}),I=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi8",variantClassNames:{kind:{default:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi9",key:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efia",warning:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efib",error:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efic",pending:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efid",success:"pkg_sps-woodland_tags__version_8_19_11__hash_5f3efie",info:"pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_79ofse0",M="pkg_sps-woodland_tags__version_8_19_11__hash_79ofse1",D="pkg_sps-woodland_tags__version_8_19_11__hash_79ofse2",L="pkg_sps-woodland_tags__version_8_19_11__hash_79ofsed",W=m({defaultClassName:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse3",variantClassNames:{href:{true:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse4",false:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse5"},kind:{default:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse6",key:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse7",warning:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse8",error:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofse9",pending:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofsea",success:"pkg_sps-woodland_tags__version_8_19_11__hash_79ofseb",info:"pkg_sps-woodland_tags__version_8_19_11__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
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:i.code`
12
+ `},disabled:{react:r.code`
13
13
  import { ClickableTag } from "@sps-woodland/tags";
14
14
 
15
15
  function Component() {
@@ -19,7 +19,39 @@
19
19
  </>
20
20
  );
21
21
  }
22
- `}}},button:{label:"Button",examples:{remove:{react:i.code`
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`
23
55
  import { ClickableTag } from "@sps-woodland/tags";
24
56
 
25
57
  function Component() {
@@ -30,7 +62,7 @@
30
62
  </>
31
63
  );
32
64
  }
33
- `},add:{react:i.code`
65
+ `},add:{react:r.code`
34
66
  import { ClickableTag } from "@sps-woodland/tags";
35
67
 
36
68
  function Component() {
@@ -41,7 +73,7 @@
41
73
  </>
42
74
  );
43
75
  }
44
- `}}},link:{label:"Link",examples:{basic:{react:i.code`
76
+ `}}},link:{label:"Link",examples:{basic:{react:r.code`
45
77
  import { ClickableTag } from "@sps-woodland/tags";
46
78
 
47
79
  function Component() {
@@ -52,7 +84,7 @@
52
84
  </>
53
85
  );
54
86
  }
55
- `},button:{react:i.code`
87
+ `},button:{react:r.code`
56
88
  import { ClickableTag } from "@sps-woodland/tags";
57
89
 
58
90
  function Component() {
@@ -63,7 +95,7 @@
63
95
  </>
64
96
  );
65
97
  }
66
- `}}}}},B={components:[p],examples:{basic:{label:"Basic Tag",examples:{basic:{react:i.code`
98
+ `}}}}},B={components:[f],examples:{basic:{label:"Basic Tag",examples:{basic:{react:r.code`
67
99
  import { Tag } from "@sps-woodland/tags";
68
100
 
69
101
  function Component() {
@@ -79,7 +111,7 @@
79
111
  </>
80
112
  )
81
113
  }
82
- `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:i.code`
114
+ `}}},withIcon:{label:"Tag with icon",examples:{basic:{react:r.code`
83
115
  import { Tag } from "@sps-woodland/tags";
84
116
 
85
117
  function Component() {
@@ -95,7 +127,7 @@
95
127
  </>
96
128
  )
97
129
  }
98
- `}}}}},A={components:[b],examples:{basic:{label:"Basic",examples:{basic:{react:i.code`
130
+ `}}}}},A={components:[w],examples:{basic:{label:"Basic",examples:{basic:{react:r.code`
99
131
  import { SplitTag } from "@sps-woodland/tag";
100
132
 
101
133
  function Component() {
@@ -110,7 +142,7 @@
110
142
  </>
111
143
  );
112
144
  }
113
- `}}},icon:{label:"Icon",examples:{basic:{react:i.code`
145
+ `}}},icon:{label:"Icon",examples:{basic:{react:r.code`
114
146
  import { SplitTag } from "@sps-woodland/tag";
115
147
 
116
148
  function Component() {
@@ -125,7 +157,7 @@
125
157
  </>
126
158
  );
127
159
  }
128
- `}}},link:{label:"Link",examples:{basic:{react:i.code`
160
+ `}}},link:{label:"Link",examples:{basic:{react:r.code`
129
161
  import { SplitTag } from "@sps-woodland/tag";
130
162
 
131
163
  function Component() {
@@ -133,4 +165,4 @@
133
165
  <SplitTag tagKey="Foo" value="1234" icon href="https://www.google.com" />
134
166
  );
135
167
  }
136
- `}}}}},W={"Clickable Tags":q,Tags:B,"Split Tags":A};exports.ClickableTag=k;exports.MANIFEST=W;exports.SplitTag=b;exports.Tag=p;exports.TagIcons=v;
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;
package/lib/index.es.js CHANGED
@@ -1,112 +1,119 @@
1
- import * as l from "react";
2
- import { Metadata as k, cl as i, Icon as T } from "@sps-woodland/core";
3
- import { code as t } from "@spscommerce/utils";
4
- function N(a, _, e) {
5
- return _ in a ? Object.defineProperty(a, _, {
1
+ import * as n from "react";
2
+ import { Metadata as k, cl as d, Icon as b } from "@sps-woodland/core";
3
+ import { code as r } from "@spscommerce/utils";
4
+ function S(a, o, e) {
5
+ return o in a ? Object.defineProperty(a, o, {
6
6
  value: e,
7
7
  enumerable: !0,
8
8
  configurable: !0,
9
9
  writable: !0
10
- }) : a[_] = e, a;
10
+ }) : a[o] = e, a;
11
11
  }
12
- function h(a, _) {
12
+ function w(a, o) {
13
13
  var e = Object.keys(a);
14
14
  if (Object.getOwnPropertySymbols) {
15
15
  var s = Object.getOwnPropertySymbols(a);
16
- _ && (s = s.filter(function(o) {
17
- return Object.getOwnPropertyDescriptor(a, o).enumerable;
16
+ o && (s = s.filter(function(_) {
17
+ return Object.getOwnPropertyDescriptor(a, _).enumerable;
18
18
  })), e.push.apply(e, s);
19
19
  }
20
20
  return e;
21
21
  }
22
- function b(a) {
23
- for (var _ = 1; _ < arguments.length; _++) {
24
- var e = arguments[_] != null ? arguments[_] : {};
25
- _ % 2 ? h(Object(e), !0).forEach(function(s) {
26
- N(a, s, e[s]);
27
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) : h(Object(e)).forEach(function(s) {
22
+ function h(a) {
23
+ for (var o = 1; o < arguments.length; o++) {
24
+ var e = arguments[o] != null ? arguments[o] : {};
25
+ o % 2 ? w(Object(e), !0).forEach(function(s) {
26
+ S(a, s, e[s]);
27
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(a, Object.getOwnPropertyDescriptors(e)) : w(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 O = (a, _, e) => {
33
+ var O = (a, o, e) => {
34
34
  for (var s of Object.keys(a)) {
35
- var o;
36
- if (a[s] !== ((o = _[s]) !== null && o !== void 0 ? o : e[s]))
35
+ var _;
36
+ if (a[s] !== ((_ = o[s]) !== null && _ !== void 0 ? _ : e[s]))
37
37
  return !1;
38
38
  }
39
39
  return !0;
40
- }, p = (a) => (_) => {
41
- var e = a.defaultClassName, s = b(b({}, a.defaultVariants), _);
42
- for (var o in s) {
43
- var g, d = (g = s[o]) !== null && g !== void 0 ? g : a.defaultVariants[o];
44
- if (d != null) {
45
- var n = d;
46
- typeof n == "boolean" && (n = n === !0 ? "true" : "false");
47
- var r = (
40
+ }, m = (a) => (o) => {
41
+ var e = a.defaultClassName, s = h(h({}, a.defaultVariants), o);
42
+ for (var _ in s) {
43
+ var t, p = (t = s[_]) !== null && t !== void 0 ? t : a.defaultVariants[_];
44
+ if (p != null) {
45
+ var i = p;
46
+ typeof i == "boolean" && (i = i === !0 ? "true" : "false");
47
+ var l = (
48
48
  // @ts-expect-error
49
- a.variantClassNames[o][n]
49
+ a.variantClassNames[_][i]
50
50
  );
51
- r && (e += " " + r);
51
+ l && (e += " " + l);
52
52
  }
53
53
  }
54
- for (var [f, u] of a.compoundVariants)
55
- O(f, s, a.defaultVariants) && (e += " " + u);
54
+ for (var [g, u] of a.compoundVariants)
55
+ O(g, s, a.defaultVariants) && (e += " " + u);
56
56
  return e;
57
- }, S = p({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw10", variantClassNames: { kind: { blue: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw11", gray: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw12" }, disabled: { true: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw13", false: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw14" } }, defaultVariants: { kind: "blue", disabled: !1 }, compoundVariants: [] }), E = "pkg_sps-woodland_tags__version_8_19_9__hash_160drw1e", K = "pkg_sps-woodland_tags__version_8_19_9__hash_160drw1d", x = p({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw15", variantClassNames: { link: { true: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw16", false: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw17" }, disabled: { true: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw18", false: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw19" }, addOrRemove: { true: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw1a", false: "pkg_sps-woodland_tags__version_8_19_9__hash_160drw1b" } }, defaultVariants: { link: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, addOrRemove: !0 }, "pkg_sps-woodland_tags__version_8_19_9__hash_160drw1c"]] }), F = "pkg_sps-woodland_tags__version_8_19_9__hash_160drw1f";
58
- function v({
57
+ }, E = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw10", variantClassNames: { kind: { blue: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw11", gray: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw12" }, disabled: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw13", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw14" }, wrap: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw15", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw16" } }, defaultVariants: { kind: "blue", disabled: !1, wrap: !1 }, compoundVariants: [] }), x = "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1k", V = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1h", variantClassNames: { wrap: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1i", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1j" } }, defaultVariants: { wrap: !1 }, compoundVariants: [] }), K = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw17", variantClassNames: { link: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw18", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw19" }, wrap: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1a", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1b" }, disabled: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1c", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1d" }, addOrRemove: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1e", false: "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1f" } }, defaultVariants: { link: !1, wrap: !1, disabled: !1, addOrRemove: !1 }, compoundVariants: [[{ disabled: !1, wrap: !1, addOrRemove: !0 }, "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1g"]] }), R = "pkg_sps-woodland_tags__version_8_19_11__hash_160drw1l";
58
+ function T({
59
59
  children: a,
60
- className: _,
60
+ className: o,
61
61
  onClick: e,
62
62
  disabled: s,
63
- href: o,
64
- target: g,
65
- kind: d,
66
- onAdd: n,
67
- onRemove: r,
68
- ...f
63
+ wrap: _,
64
+ href: t,
65
+ target: p,
66
+ kind: i,
67
+ onAdd: l,
68
+ onRemove: g,
69
+ ...u
69
70
  }) {
70
- const u = l.Children.toArray(a).filter((c) => typeof c == "string").join("");
71
- l.useEffect(() => {
72
- if (r && n)
71
+ const C = n.Children.toArray(a).filter((c) => typeof c == "string").join("");
72
+ n.useEffect(() => {
73
+ if (g && l)
73
74
  throw new Error("Clickable tag should have onRemove or onAdd, not both");
74
- }, [n, r]);
75
- function C(c) {
76
- n ? n() : r && r(), c.stopPropagation();
77
- }
75
+ }, [l, g]);
78
76
  function y(c) {
77
+ l ? l() : g && g(), c.stopPropagation();
78
+ }
79
+ function N(c) {
79
80
  c.stopPropagation(), e && e(c);
80
81
  }
81
- return /* @__PURE__ */ l.createElement("div", { className: i(S({ kind: d, disabled: s }), _), ...f }, /* @__PURE__ */ l.createElement(
82
+ return /* @__PURE__ */ n.createElement("div", { className: d(E({ kind: i, disabled: s, wrap: _ }), o), ...u }, /* @__PURE__ */ n.createElement(
82
83
  "span",
83
84
  {
84
- className: i(
85
- x({
86
- link: !!o || !!e,
85
+ className: d(
86
+ K({
87
+ link: !!t || !!e,
87
88
  disabled: s,
88
- addOrRemove: n || r
89
+ wrap: _,
90
+ addOrRemove: l || g
89
91
  })
90
92
  ),
91
- onClick: y,
92
- title: u
93
+ onClick: N,
94
+ title: C
93
95
  },
94
- o ? /* @__PURE__ */ l.createElement("a", { className: F, href: o, target: g }, a) : a
95
- ), (n || r) && !s && /* @__PURE__ */ l.createElement(
96
+ t ? /* @__PURE__ */ n.createElement("a", { className: R, href: t, target: p }, a) : a
97
+ ), (l || g) && !s && /* @__PURE__ */ n.createElement(
96
98
  "div",
97
99
  {
98
- className: K,
99
- onClick: s ? void 0 : C,
100
+ className: d(
101
+ V({
102
+ wrap: _
103
+ })
104
+ ),
105
+ onClick: s ? void 0 : y,
100
106
  tabIndex: -1,
101
- "aria-label": n ? "Add" : "Remove"
107
+ "aria-label": l ? "Add" : "Remove"
102
108
  },
103
- /* @__PURE__ */ l.createElement(T, { className: E, "aria-hidden": "true", icon: n ? "plus-sign" : "x" })
109
+ /* @__PURE__ */ n.createElement(b, { className: x, "aria-hidden": "true", icon: l ? "plus-sign" : "x" })
104
110
  ));
105
111
  }
106
- k.set(v, {
112
+ k.set(T, {
107
113
  name: "Clickable Tag",
108
114
  props: {
109
115
  disabled: { type: "boolean", default: "false" },
116
+ wrap: { type: "boolean", default: "false" },
110
117
  href: { type: "string" },
111
118
  target: { type: "'_blank' | '_self' | '_parent' | '_top'" },
112
119
  kind: { type: "ClickableTagKind", default: "blue" },
@@ -114,8 +121,8 @@ k.set(v, {
114
121
  onRemove: { type: "() => void" }
115
122
  }
116
123
  });
117
- var V = p({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi0", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi1", key: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi2", warning: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi3", error: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi4", pending: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi5", success: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi6", info: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), P = p({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi8", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi9", key: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efia", warning: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efib", error: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efic", pending: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efid", success: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efie", info: "pkg_sps-woodland_tags__version_8_19_9__hash_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
118
- const j = Object.freeze({
124
+ var F = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi0", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi1", key: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi2", warning: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi3", error: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi4", pending: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi5", success: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi6", info: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi7" } }, defaultVariants: { kind: "default" }, compoundVariants: [] }), P = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi8", variantClassNames: { kind: { default: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi9", key: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efia", warning: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efib", error: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efic", pending: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efid", success: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efie", info: "pkg_sps-woodland_tags__version_8_19_11__hash_5f3efif" } }, defaultVariants: { kind: "default" }, compoundVariants: [] });
125
+ const I = Object.freeze({
119
126
  default: "info-circle",
120
127
  key: "info-circle",
121
128
  warning: "status-warning",
@@ -124,37 +131,37 @@ const j = Object.freeze({
124
131
  success: "status-ok",
125
132
  info: "info-circle"
126
133
  });
127
- function m({
134
+ function f({
128
135
  children: a,
129
- className: _,
136
+ className: o,
130
137
  kind: e = "default",
131
138
  icon: s,
132
- ...o
139
+ ..._
133
140
  }) {
134
- return /* @__PURE__ */ l.createElement("span", { className: i(V({ kind: e }), _), ...o }, s && /* @__PURE__ */ l.createElement(T, { className: i(P({ kind: e })), icon: j[e] }), a);
141
+ return /* @__PURE__ */ n.createElement("span", { className: d(F({ kind: e }), o), ..._ }, s && /* @__PURE__ */ n.createElement(b, { className: d(P({ kind: e })), icon: I[e] }), a);
135
142
  }
136
- k.set(m, {
143
+ k.set(f, {
137
144
  name: "Tag",
138
145
  props: {
139
146
  kind: { type: "TagKind", default: "default" },
140
147
  icon: { type: "boolean", default: "false" }
141
148
  }
142
149
  });
143
- var I = "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse0", R = "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse1", D = "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse2", L = "pkg_sps-woodland_tags__version_8_19_9__hash_79ofsed", B = p({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse3", variantClassNames: { href: { true: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse4", false: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse5" }, kind: { default: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse6", key: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse7", warning: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse8", error: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofse9", pending: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofsea", success: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofseb", info: "pkg_sps-woodland_tags__version_8_19_9__hash_79ofsec" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
144
- function w({
150
+ var j = "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse0", L = "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse1", W = "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse2", D = "pkg_sps-woodland_tags__version_8_19_11__hash_79ofsed", B = m({ defaultClassName: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse3", variantClassNames: { href: { true: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse4", false: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse5" }, kind: { default: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse6", key: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse7", warning: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse8", error: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofse9", pending: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofsea", success: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofseb", info: "pkg_sps-woodland_tags__version_8_19_11__hash_79ofsec" } }, defaultVariants: { href: !1, kind: "default" }, compoundVariants: [] });
151
+ function v({
145
152
  children: a,
146
- className: _,
153
+ className: o,
147
154
  color: e = "default",
148
155
  href: s,
149
- target: o,
150
- icon: g,
151
- tagKey: d,
152
- value: n,
153
- ...r
156
+ target: _,
157
+ icon: t,
158
+ tagKey: p,
159
+ value: i,
160
+ ...l
154
161
  }) {
155
- return /* @__PURE__ */ l.createElement("span", { className: i(I, _), ...r }, /* @__PURE__ */ l.createElement(m, { className: i(R), icon: g, kind: e }, d && /* @__PURE__ */ l.createElement("span", { className: i(D) }, d)), /* @__PURE__ */ l.createElement(m, { className: i(B({ href: !!s, kind: e })) }, s ? /* @__PURE__ */ l.createElement("a", { className: L, href: s, target: o }, n) : n));
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(B({ href: !!s, kind: e })) }, s ? /* @__PURE__ */ n.createElement("a", { className: D, href: s, target: _ }, i) : i));
156
163
  }
157
- k.set(w, {
164
+ k.set(v, {
158
165
  name: "Split Tag",
159
166
  props: {
160
167
  color: { type: "TagKind", default: "key" },
@@ -165,14 +172,14 @@ k.set(w, {
165
172
  value: { type: "string", required: !0 }
166
173
  }
167
174
  });
168
- const A = {
169
- components: [v],
175
+ const M = {
176
+ components: [T],
170
177
  examples: {
171
178
  basic: {
172
179
  label: "Basic Tag",
173
180
  examples: {
174
181
  basic: {
175
- react: t`
182
+ react: r`
176
183
  import { ClickableTag } from "@sps-woodland/tags";
177
184
 
178
185
  function Component() {
@@ -186,7 +193,7 @@ const A = {
186
193
  `
187
194
  },
188
195
  disabled: {
189
- react: t`
196
+ react: r`
190
197
  import { ClickableTag } from "@sps-woodland/tags";
191
198
 
192
199
  function Component() {
@@ -200,11 +207,51 @@ const A = {
200
207
  }
201
208
  }
202
209
  },
210
+ wrap: {
211
+ label: "Wrapped Tag",
212
+ examples: {
213
+ basic: {
214
+ react: r`
215
+ import { ContentRow, ContentRowCol } from "@sps-woodland/content-row";
216
+ import { Icon } from "@sps-woodland/core";
217
+
218
+ function Component() {
219
+ const { formValue, formMeta, updateForm } = useSpsForm({
220
+ selected: false
221
+ });
222
+
223
+ function selectRow() {
224
+ updateForm({ selected: !formValue.selected })
225
+ }
226
+
227
+ return (
228
+ <ContentRow
229
+ selectable
230
+ selected={formValue.selected}
231
+ onSelectionChange={selectRow}
232
+ >
233
+ <ContentRowCol style={{ width: "2.9rem" }}>
234
+ <Icon icon="star" size="md" color="blue-medium" />
235
+ </ContentRowCol>
236
+ <ContentRowCol style={{ width: "7rem" }}>
237
+ <ClickableTag className="mr-1 mb-1" wrap>Wrap: This Is Very Excessively Wide To Show How These Look</ClickableTag>
238
+ <ClickableTag className="mr-1" wrap kind="gray">Wrap: This Is Very Excessively Wide To Show How These Look</ClickableTag>
239
+ </ContentRowCol>
240
+ <ContentRowCol widthPx={160}>
241
+ May 23, 2018 @ 4:38 PM
242
+ </ContentRowCol>
243
+ </ContentRow>
244
+ )
245
+ }
246
+ `
247
+ }
248
+ }
249
+ },
203
250
  button: {
204
251
  label: "Button",
205
252
  examples: {
206
253
  remove: {
207
- react: t`
254
+ react: r`
208
255
  import { ClickableTag } from "@sps-woodland/tags";
209
256
 
210
257
  function Component() {
@@ -218,7 +265,7 @@ const A = {
218
265
  `
219
266
  },
220
267
  add: {
221
- react: t`
268
+ react: r`
222
269
  import { ClickableTag } from "@sps-woodland/tags";
223
270
 
224
271
  function Component() {
@@ -237,7 +284,7 @@ const A = {
237
284
  label: "Link",
238
285
  examples: {
239
286
  basic: {
240
- react: t`
287
+ react: r`
241
288
  import { ClickableTag } from "@sps-woodland/tags";
242
289
 
243
290
  function Component() {
@@ -251,7 +298,7 @@ const A = {
251
298
  `
252
299
  },
253
300
  button: {
254
- react: t`
301
+ react: r`
255
302
  import { ClickableTag } from "@sps-woodland/tags";
256
303
 
257
304
  function Component() {
@@ -267,14 +314,14 @@ const A = {
267
314
  }
268
315
  }
269
316
  }
270
- }, W = {
271
- components: [m],
317
+ }, A = {
318
+ components: [f],
272
319
  examples: {
273
320
  basic: {
274
321
  label: "Basic Tag",
275
322
  examples: {
276
323
  basic: {
277
- react: t`
324
+ react: r`
278
325
  import { Tag } from "@sps-woodland/tags";
279
326
 
280
327
  function Component() {
@@ -298,7 +345,7 @@ const A = {
298
345
  label: "Tag with icon",
299
346
  examples: {
300
347
  basic: {
301
- react: t`
348
+ react: r`
302
349
  import { Tag } from "@sps-woodland/tags";
303
350
 
304
351
  function Component() {
@@ -320,13 +367,13 @@ const A = {
320
367
  }
321
368
  }
322
369
  }, q = {
323
- components: [w],
370
+ components: [v],
324
371
  examples: {
325
372
  basic: {
326
373
  label: "Basic",
327
374
  examples: {
328
375
  basic: {
329
- react: t`
376
+ react: r`
330
377
  import { SplitTag } from "@sps-woodland/tag";
331
378
 
332
379
  function Component() {
@@ -349,7 +396,7 @@ const A = {
349
396
  label: "Icon",
350
397
  examples: {
351
398
  basic: {
352
- react: t`
399
+ react: r`
353
400
  import { SplitTag } from "@sps-woodland/tag";
354
401
 
355
402
  function Component() {
@@ -372,7 +419,7 @@ const A = {
372
419
  label: "Link",
373
420
  examples: {
374
421
  basic: {
375
- react: t`
422
+ react: r`
376
423
  import { SplitTag } from "@sps-woodland/tag";
377
424
 
378
425
  function Component() {
@@ -386,14 +433,14 @@ const A = {
386
433
  }
387
434
  }
388
435
  }, G = {
389
- "Clickable Tags": A,
390
- Tags: W,
436
+ "Clickable Tags": M,
437
+ Tags: A,
391
438
  "Split Tags": q
392
439
  };
393
440
  export {
394
- v as ClickableTag,
441
+ T as ClickableTag,
395
442
  G as MANIFEST,
396
- w as SplitTag,
397
- m as Tag,
398
- j as TagIcons
443
+ v as SplitTag,
444
+ f as Tag,
445
+ I as TagIcons
399
446
  };
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .pkg_sps-woodland_tags__version_8_19_9__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_19_9__hash_160drw11{background-color:#e6f2f8}.pkg_sps-woodland_tags__version_8_19_9__hash_160drw12{background-color:#e9e9ea}.pkg_sps-woodland_tags__version_8_19_9__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_19_9__hash_160drw15{border-radius:.125rem;flex-grow:1;flex-shrink:1;height:1.125rem;overflow:hidden;padding:.125rem .25rem;text-overflow:ellipsis;white-space:nowrap}.pkg_sps-woodland_tags__version_8_19_9__hash_160drw16{cursor:pointer;text-decoration:underline}.pkg_sps-woodland_tags__version_8_19_9__hash_160drw16:hover{color:#e6f2f8;background-color:#08638d;border-radius:.125rem}.pkg_sps-woodland_tags__version_8_19_9__hash_160drw1c{border-top-left-radius:.125rem;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:.125rem}.pkg_sps-woodland_tags__version_8_19_9__hash_160drw1d{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_19_9__hash_160drw1d:focus,.pkg_sps-woodland_tags__version_8_19_9__hash_160drw1d:hover{background-color:#08638d;color:#e6f2f8;cursor:pointer}.pkg_sps-woodland_tags__version_8_19_9__hash_160drw1e{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>.pkg_sps-woodland_tags__version_8_19_9__hash_160drw1f{color:#08638d}span:hover>.pkg_sps-woodland_tags__version_8_19_9__hash_160drw1f{color:#e6f2f8}.pkg_sps-woodland_tags__version_8_19_9__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_19_9__hash_5f3efi1{background:#e9e9ea;color:#4b5356}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi2{background:#4b5356;color:#fff}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi3{background:#e77609;color:#fff}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi4{background:#de012e;color:#fff}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi5{background:#91467f;color:#fff}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi6{background:#0b8940;color:#fff}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi7{background:#027db8;color:#fff}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi8:before{vertical-align:text-bottom}.pkg_sps-woodland_tags__version_8_19_9__hash_5f3efi9{display:none}.pkg_sps-woodland_tags__version_8_19_9__hash_79ofse0{display:inline-block}.pkg_sps-woodland_tags__version_8_19_9__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_19_9__hash_79ofse2{margin-left:.25rem}.pkg_sps-woodland_tags__version_8_19_9__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_19_9__hash_79ofse4{cursor:pointer;text-decoration:underline;color:#4b5356}.pkg_sps-woodland_tags__version_8_19_9__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_19_9__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_19_9__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_19_9__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_19_9__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_19_9__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_19_9__hash_79ofsed,.pkg_sps-woodland_tags__version_8_19_9__hash_79ofsed:hover{color:#4b5356}.pkg_sps-woodland_tags__version_8_19_9__hash_79ofse1>i{margin-right:0}
1
+ .pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_160drw11{background-color:#e6f2f8}.pkg_sps-woodland_tags__version_8_19_11__hash_160drw12{background-color:#e9e9ea}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_160drw15{height:auto}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_160drw18{cursor:pointer;text-decoration:underline}.pkg_sps-woodland_tags__version_8_19_11__hash_160drw18:hover{color:#e6f2f8;background-color:#08638d;border-radius:.125rem}.pkg_sps-woodland_tags__version_8_19_11__hash_160drw1a{white-space:normal;height:auto;line-height:.9rem;word-break:break-word}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__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_19_11__hash_160drw1h:focus,.pkg_sps-woodland_tags__version_8_19_11__hash_160drw1h:hover{background-color:#08638d;color:#e6f2f8;cursor:pointer}.pkg_sps-woodland_tags__version_8_19_11__hash_160drw1i{height:auto;align-content:center}.pkg_sps-woodland_tags__version_8_19_11__hash_160drw1k{cursor:pointer;font-size:.625rem;position:relative;text-decoration:none;top:-.0625rem;vertical-align:middle}span>.pkg_sps-woodland_tags__version_8_19_11__hash_160drw1l{color:#08638d}span:hover>.pkg_sps-woodland_tags__version_8_19_11__hash_160drw1l{color:#e6f2f8}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_5f3efi1{background:#e9e9ea;color:#4b5356}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi2{background:#4b5356;color:#fff}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi3{background:#e77609;color:#fff}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi4{background:#de012e;color:#fff}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi5{background:#91467f;color:#fff}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi6{background:#0b8940;color:#fff}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi7{background:#027db8;color:#fff}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi8{font-size:.75rem;line-height:.625rem;margin-right:.25rem}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi8:before{vertical-align:text-bottom}.pkg_sps-woodland_tags__version_8_19_11__hash_5f3efi9{display:none}.pkg_sps-woodland_tags__version_8_19_11__hash_79ofse0{display:inline-block}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_79ofse2{margin-left:.25rem}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__hash_79ofse4{cursor:pointer;text-decoration:underline;color:#4b5356}.pkg_sps-woodland_tags__version_8_19_11__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_19_11__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_19_11__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_19_11__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_19_11__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_19_11__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_19_11__hash_79ofsed,.pkg_sps-woodland_tags__version_8_19_11__hash_79ofsed:hover{color:#4b5356}.pkg_sps-woodland_tags__version_8_19_11__hash_79ofse1>i{margin-right:0}
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.19.9",
4
+ "version": "8.19.11",
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.19.9",
33
- "@sps-woodland/tokens": "8.19.9"
32
+ "@sps-woodland/core": "8.19.11",
33
+ "@sps-woodland/tokens": "8.19.11"
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.19.9",
42
- "@sps-woodland/tokens": "8.19.9"
41
+ "@sps-woodland/core": "8.19.11",
42
+ "@sps-woodland/tokens": "8.19.11"
43
43
  },
44
44
  "scripts": {
45
45
  "build": "pnpm run build:js && pnpm run build:types",