@justeattakeaway/pie-tag 0.9.9 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/custom-elements.json +46 -17
  2. package/dist/index.d.ts +15 -6
  3. package/dist/index.js +73 -48
  4. package/dist/react.d.ts +15 -6
  5. package/dist/react.js +7 -6
  6. package/package.json +3 -3
  7. package/src/defs-react.ts +1 -1
  8. package/src/defs.ts +11 -4
  9. package/src/index.ts +54 -18
  10. package/src/tag.scss +77 -18
package/custom-elements.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "type": {
35
35
  "text": "DefaultProps"
36
36
  },
37
- "default": "{\n variant: 'neutral',\n isStrong: false,\n isDimmed: false,\n size: 'large',\n}"
37
+ "default": "{\n variant: 'neutral',\n isStrong: false,\n isInteractive: false,\n disabled: false,\n size: 'large',\n}"
38
38
  }
39
39
  ],
40
40
  "exports": [
@@ -86,18 +86,12 @@
86
86
  {
87
87
  "kind": "field",
88
88
  "name": "variant",
89
- "type": {
90
- "text": "TagProps['variant']"
91
- },
92
89
  "privacy": "public",
93
90
  "attribute": "variant"
94
91
  },
95
92
  {
96
93
  "kind": "field",
97
94
  "name": "size",
98
- "type": {
99
- "text": "TagProps['size']"
100
- },
101
95
  "privacy": "public",
102
96
  "attribute": "size"
103
97
  },
@@ -109,24 +103,55 @@
109
103
  },
110
104
  {
111
105
  "kind": "field",
112
- "name": "isDimmed",
106
+ "name": "disabled",
113
107
  "privacy": "public",
114
- "attribute": "isDimmed"
108
+ "attribute": "disabled"
109
+ },
110
+ {
111
+ "kind": "field",
112
+ "name": "isInteractive",
113
+ "privacy": "public",
114
+ "attribute": "isInteractive"
115
+ },
116
+ {
117
+ "kind": "method",
118
+ "name": "renderIconSlot",
119
+ "privacy": "private"
120
+ },
121
+ {
122
+ "kind": "method",
123
+ "name": "renderTag",
124
+ "privacy": "private",
125
+ "parameters": [
126
+ {
127
+ "name": "classes",
128
+ "type": {
129
+ "text": "ClassInfo"
130
+ }
131
+ }
132
+ ]
133
+ },
134
+ {
135
+ "kind": "method",
136
+ "name": "renderButtonTag",
137
+ "privacy": "private",
138
+ "parameters": [
139
+ {
140
+ "name": "classes",
141
+ "type": {
142
+ "text": "ClassInfo"
143
+ }
144
+ }
145
+ ]
115
146
  }
116
147
  ],
117
148
  "attributes": [
118
149
  {
119
150
  "name": "variant",
120
- "type": {
121
- "text": "TagProps['variant']"
122
- },
123
151
  "fieldName": "variant"
124
152
  },
125
153
  {
126
154
  "name": "size",
127
- "type": {
128
- "text": "TagProps['size']"
129
- },
130
155
  "fieldName": "size"
131
156
  },
132
157
  {
@@ -134,8 +159,12 @@
134
159
  "fieldName": "isStrong"
135
160
  },
136
161
  {
137
- "name": "isDimmed",
138
- "fieldName": "isDimmed"
162
+ "name": "disabled",
163
+ "fieldName": "disabled"
164
+ },
165
+ {
166
+ "name": "isInteractive",
167
+ "fieldName": "isInteractive"
139
168
  }
140
169
  ],
141
170
  "superclass": {
package/dist/index.d.ts CHANGED
@@ -13,11 +13,15 @@ export declare const defaultProps: DefaultProps;
13
13
  * @slot - Default slot
14
14
  */
15
15
  export declare class PieTag extends LitElement implements TagProps {
16
- variant: TagProps['variant'];
17
- size: TagProps['size'];
16
+ variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand";
17
+ size: "small" | "large";
18
18
  isStrong: boolean;
19
- isDimmed: boolean;
19
+ disabled: boolean;
20
+ isInteractive: boolean;
20
21
  render(): TemplateResult<1>;
22
+ private renderIconSlot;
23
+ private renderTag;
24
+ private renderButtonTag;
21
25
  static styles: CSSResult;
22
26
  }
23
27
 
@@ -29,13 +33,18 @@ export declare interface TagProps {
29
33
  */
30
34
  variant?: typeof variants[number];
31
35
  /**
32
- * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
36
+ * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
33
37
  */
34
38
  isStrong?: boolean;
35
39
  /**
36
- * When `true`, lowers the tag opacity.
40
+ * When `true`, the tag will be rendered as a button and can be interacted with.
37
41
  */
38
- isDimmed?: boolean;
42
+ isInteractive?: boolean;
43
+ /**
44
+ * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
45
+ * For a non-interactive tag, this only applies the disabled styling.
46
+ */
47
+ disabled?: boolean;
39
48
  /**
40
49
  * What size the tag should be.
41
50
  */
package/dist/index.js CHANGED
@@ -1,63 +1,88 @@
1
- import { unsafeCSS as f, LitElement as u, html as v, nothing as b } from "lit";
2
- import { property as i } from "lit/decorators.js";
3
- import { validPropertyValues as p, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
4
- const h = `*,*:after,*:before{box-sizing:inherit}.c-tag{--tag-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height)}.c-tag[size=small]{--tag-padding-block: 0;--tag-padding-inline: var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag[variant=neutral][isStrong]{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=blue]{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=blue][isStrong]{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=green]{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=green][isStrong]{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=yellow]{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=yellow][isStrong]{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag[variant=red]{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=red][isStrong]{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag[variant=brand]{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral-alternative]{--tag-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag[variant=outline]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag[variant=ghost]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag[isDimmed]{opacity:.5}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
5
- `, y = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], z = ["small", "large"], e = {
1
+ import { unsafeCSS as b, LitElement as u, nothing as f, html as n } from "lit";
2
+ import { property as v } from "lit/decorators.js";
3
+ import { classMap as p } from "lit/directives/class-map.js";
4
+ import { validPropertyValues as h, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
5
+ const y = `*,*:after,*:before{box-sizing:inherit}.c-tag{--tag-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default);--tag-border-radius: var(--dt-radius-rounded-b);--tag-padding-block: 2px;--tag-padding-inline: var(--dt-spacing-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-transparent-bg-color: transparent;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);padding:var(--tag-padding-block) var(--tag-padding-inline);border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height)}.c-tag.c-tag--interactive{border:none}.c-tag.c-tag--interactive:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-tag.c-tag--small{--tag-padding-block: 0;--tag-padding-inline: var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag.c-tag--neutral.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-container-strong-h), var(--dt-color-container-strong-s), calc(var(--dt-color-container-strong-l) + var(--active-modifier)))}.c-tag.c-tag--neutral.c-tag--strong{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: var(--dt-color-hover-02);--tag-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: var(--dt-color-active-02);--tag-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-tag.c-tag--blue{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--blue.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--hover-modifier)))}.c-tag.c-tag--blue.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-info-02-h), var(--dt-color-support-info-02-s), calc(var(--dt-color-support-info-02-l) + var(--active-modifier)))}.c-tag.c-tag--blue.c-tag--strong{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--blue.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--hover-modifier)))}.c-tag.c-tag--blue.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-info-h), var(--dt-color-support-info-s), calc(var(--dt-color-support-info-l) + var(--active-modifier)))}.c-tag.c-tag--green{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--green.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--hover-modifier)))}.c-tag.c-tag--green.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-positive-02-h), var(--dt-color-support-positive-02-s), calc(var(--dt-color-support-positive-02-l) + var(--active-modifier)))}.c-tag.c-tag--green.c-tag--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--green.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--hover-modifier)))}.c-tag.c-tag--green.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-positive-h), var(--dt-color-support-positive-s), calc(var(--dt-color-support-positive-l) + var(--active-modifier)))}.c-tag.c-tag--yellow{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--yellow.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--hover-modifier)))}.c-tag.c-tag--yellow.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-warning-02-h), var(--dt-color-support-warning-02-s), calc(var(--dt-color-support-warning-02-l) + var(--active-modifier)))}.c-tag.c-tag--yellow.c-tag--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--yellow.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--hover-modifier)))}.c-tag.c-tag--yellow.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-warning-h), var(--dt-color-support-warning-s), calc(var(--dt-color-support-warning-l) + var(--active-modifier)))}.c-tag.c-tag--red{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--red.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--hover-modifier)))}.c-tag.c-tag--red.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-error-02-h), var(--dt-color-support-error-02-s), calc(var(--dt-color-support-error-02-l) + var(--active-modifier)))}.c-tag.c-tag--red.c-tag--strong{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--red.c-tag--strong.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.c-tag.c-tag--red.c-tag--strong.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.c-tag.c-tag--brand{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--hover-modifier)))}.c-tag.c-tag--brand.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-support-brand-02-h), var(--dt-color-support-brand-02-s), calc(var(--dt-color-support-brand-02-l) + var(--active-modifier)))}.c-tag.c-tag--neutral-alternative{--tag-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--tag-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-tag.c-tag--neutral-alternative.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--tag-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-tag.c-tag--outline{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);box-shadow:0 0 0 1px var(--dt-color-border-strong)}.c-tag.c-tag--outline.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-tag.c-tag--outline.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-tag.c-tag--ghost{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--ghost.c-tag--interactive:hover:not(.c-tag--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.c-tag.c-tag--ghost.c-tag--interactive:active:not(.c-tag--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--tag-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.c-tag.c-tag--disabled{opacity:.5}.c-tag[disabled]{cursor:not-allowed}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
6
+ `, w = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], z = ["small", "large"], o = {
6
7
  variant: "neutral",
7
8
  isStrong: !1,
8
- isDimmed: !1,
9
+ isInteractive: !1,
10
+ disabled: !1,
9
11
  size: "large"
10
12
  };
11
- var S = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (g, o, r, a) => {
12
- for (var t = a > 1 ? void 0 : a ? w(o, r) : o, c = g.length - 1, s; c >= 0; c--)
13
- (s = g[c]) && (t = (a ? s(o, r, t) : s(t)) || t);
14
- return a && t && S(o, r, t), t;
13
+ var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (g, t, c, e) => {
14
+ for (var r = e > 1 ? void 0 : e ? k(t, c) : t, l = g.length - 1, i; l >= 0; l--)
15
+ (i = g[l]) && (r = (e ? i(t, c, r) : i(r)) || r);
16
+ return e && r && x(t, c, r), r;
15
17
  };
16
- const d = "pie-tag";
17
- class n extends u {
18
+ const s = "pie-tag";
19
+ class a extends u {
18
20
  constructor() {
19
- super(...arguments), this.variant = e.variant, this.size = e.size, this.isStrong = e.isStrong, this.isDimmed = e.isDimmed;
21
+ super(...arguments), this.variant = o.variant, this.size = o.size, this.isStrong = o.isStrong, this.disabled = o.disabled, this.isInteractive = o.isInteractive;
20
22
  }
21
23
  render() {
22
24
  const {
23
- variant: o,
25
+ disabled: t,
26
+ isInteractive: c,
27
+ isStrong: e,
24
28
  size: r,
25
- isStrong: a,
26
- isDimmed: t
27
- } = this;
28
- return v`
29
- <div
30
- class="c-tag"
31
- variant=${o}
32
- size=${r}
33
- ?isStrong=${a}
34
- ?isDimmed=${t}
35
- data-test-id="pie-tag"
36
- >
37
- ${r === "large" ? v`<slot name="icon"></slot>` : b}
38
- <slot></slot>
39
- </div>`;
29
+ variant: l
30
+ } = this, i = {
31
+ "c-tag": !0,
32
+ [`c-tag--${r}`]: !0,
33
+ [`c-tag--${l}`]: !0,
34
+ "c-tag--disabled": t,
35
+ "c-tag--strong": e,
36
+ "c-tag--interactive": c
37
+ };
38
+ return c ? this.renderButtonTag(i) : this.renderTag(i);
39
+ }
40
+ renderIconSlot() {
41
+ return this.size !== "large" ? f : n`<slot name="icon"></slot>`;
42
+ }
43
+ renderTag(t) {
44
+ return n`
45
+ <div
46
+ class="${p(t)}"
47
+ data-test-id="pie-tag">
48
+ ${this.renderIconSlot()}
49
+ <slot></slot>
50
+ </div>`;
51
+ }
52
+ renderButtonTag(t) {
53
+ return n`
54
+ <button
55
+ type="button"
56
+ ?disabled="${this.disabled}"
57
+ class="${p(t)}"
58
+ data-test-id="pie-tag">
59
+ ${this.renderIconSlot()}
60
+ <slot></slot>
61
+ </button>`;
40
62
  }
41
63
  }
42
- n.styles = f(h);
43
- l([
44
- i({ type: String }),
45
- p(d, y, e.variant)
46
- ], n.prototype, "variant", 2);
47
- l([
48
- i({ type: String }),
49
- p(d, z, e.size)
50
- ], n.prototype, "size", 2);
51
- l([
52
- i({ type: Boolean })
53
- ], n.prototype, "isStrong", 2);
54
- l([
55
- i({ type: Boolean })
56
- ], n.prototype, "isDimmed", 2);
57
- m(d, n);
64
+ a.styles = b(y);
65
+ d([
66
+ v({ type: String }),
67
+ h(s, w, o.variant)
68
+ ], a.prototype, "variant", 2);
69
+ d([
70
+ v({ type: String }),
71
+ h(s, z, o.size)
72
+ ], a.prototype, "size", 2);
73
+ d([
74
+ v({ type: Boolean })
75
+ ], a.prototype, "isStrong", 2);
76
+ d([
77
+ v({ type: Boolean })
78
+ ], a.prototype, "disabled", 2);
79
+ d([
80
+ v({ type: Boolean })
81
+ ], a.prototype, "isInteractive", 2);
82
+ m(s, a);
58
83
  export {
59
- n as PieTag,
60
- e as defaultProps,
84
+ a as PieTag,
85
+ o as defaultProps,
61
86
  z as sizes,
62
- y as variants
87
+ w as variants
63
88
  };
package/dist/react.d.ts CHANGED
@@ -16,11 +16,15 @@ export declare const PieTag: React_2.ForwardRefExoticComponent<TagProps & React_
16
16
  * @slot - Default slot
17
17
  */
18
18
  declare class PieTag_2 extends LitElement implements TagProps {
19
- variant: TagProps['variant'];
20
- size: TagProps['size'];
19
+ variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand";
20
+ size: "small" | "large";
21
21
  isStrong: boolean;
22
- isDimmed: boolean;
22
+ disabled: boolean;
23
+ isInteractive: boolean;
23
24
  render(): TemplateResult<1>;
25
+ private renderIconSlot;
26
+ private renderTag;
27
+ private renderButtonTag;
24
28
  static styles: CSSResult;
25
29
  }
26
30
 
@@ -34,13 +38,18 @@ export declare interface TagProps {
34
38
  */
35
39
  variant?: typeof variants[number];
36
40
  /**
37
- * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
41
+ * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
38
42
  */
39
43
  isStrong?: boolean;
40
44
  /**
41
- * When `true`, lowers the tag opacity.
45
+ * When `true`, the tag will be rendered as a button and can be interacted with.
42
46
  */
43
- isDimmed?: boolean;
47
+ isInteractive?: boolean;
48
+ /**
49
+ * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
50
+ * For a non-interactive tag, this only applies the disabled styling.
51
+ */
52
+ disabled?: boolean;
44
53
  /**
45
54
  * What size the tag should be.
46
55
  */
package/dist/react.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as e from "react";
2
2
  import { createComponent as t } from "@lit/react";
3
3
  import { PieTag as a } from "./index.js";
4
- import { defaultProps as P, sizes as f, variants as T } from "./index.js";
4
+ import { defaultProps as f, sizes as T, variants as l } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
+ import "lit/directives/class-map.js";
7
8
  import "@justeattakeaway/pie-webc-core";
8
9
  const o = t({
9
10
  displayName: "PieTag",
@@ -11,10 +12,10 @@ const o = t({
11
12
  react: e,
12
13
  tagName: "pie-tag",
13
14
  events: {}
14
- }), g = o;
15
+ }), n = o;
15
16
  export {
16
- g as PieTag,
17
- P as defaultProps,
18
- f as sizes,
19
- T as variants
17
+ n as PieTag,
18
+ f as defaultProps,
19
+ T as sizes,
20
+ l as variants
20
21
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-tag",
3
3
  "description": "PIE Design System Tag built using Web Components",
4
- "version": "0.9.9",
4
+ "version": "0.10.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -36,9 +36,9 @@
36
36
  "license": "Apache-2.0",
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
- "@justeattakeaway/pie-components-config": "0.17.0",
39
+ "@justeattakeaway/pie-components-config": "0.18.0",
40
40
  "@justeattakeaway/pie-css": "0.12.1",
41
- "@justeattakeaway/pie-icons-webc": "0.25.0",
41
+ "@justeattakeaway/pie-icons-webc": "0.25.1",
42
42
  "@justeattakeaway/pie-wrapper-react": "0.14.1",
43
43
  "cem-plugin-module-file-extensions": "0.0.5"
44
44
  },
package/src/defs-react.ts CHANGED
@@ -1,3 +1,3 @@
1
- import React from 'react';
1
+ import type React from 'react';
2
2
 
3
3
  export type ReactBaseType = React.HTMLAttributes<HTMLSpanElement>
package/src/defs.ts CHANGED
@@ -10,14 +10,20 @@ export interface TagProps {
10
10
  variant?: typeof variants[number];
11
11
 
12
12
  /**
13
- * When true, the 'green', "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
13
+ * When true, the "green", "yellow", "red", "blue" and "neutral" variants change their styles and become bolder
14
14
  */
15
15
  isStrong?: boolean;
16
16
 
17
17
  /**
18
- * When `true`, lowers the tag opacity.
18
+ * When `true`, the tag will be rendered as a button and can be interacted with.
19
19
  */
20
- isDimmed?: boolean;
20
+ isInteractive?: boolean;
21
+
22
+ /**
23
+ * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
24
+ * For a non-interactive tag, this only applies the disabled styling.
25
+ */
26
+ disabled?: boolean;
21
27
 
22
28
  /**
23
29
  * What size the tag should be.
@@ -30,6 +36,7 @@ export type DefaultProps = ComponentDefaultProps<TagProps>;
30
36
  export const defaultProps: DefaultProps = {
31
37
  variant: 'neutral',
32
38
  isStrong: false,
33
- isDimmed: false,
39
+ isInteractive: false,
40
+ disabled: false,
34
41
  size: 'large',
35
42
  };
package/src/index.ts CHANGED
@@ -2,10 +2,11 @@ import {
2
2
  LitElement, html, unsafeCSS, nothing,
3
3
  } from 'lit';
4
4
  import { property } from 'lit/decorators.js';
5
+ import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
5
6
  import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
6
7
  import styles from './tag.scss?inline';
7
8
  import {
8
- TagProps, variants, sizes, defaultProps,
9
+ type TagProps, variants, sizes, defaultProps,
9
10
  } from './defs';
10
11
 
11
12
  // Valid values available to consumers
@@ -21,37 +22,72 @@ const componentSelector = 'pie-tag';
21
22
  export class PieTag extends LitElement implements TagProps {
22
23
  @property({ type: String })
23
24
  @validPropertyValues(componentSelector, variants, defaultProps.variant)
24
- public variant: TagProps['variant'] = defaultProps.variant;
25
+ public variant = defaultProps.variant;
25
26
 
26
27
  @property({ type: String })
27
28
  @validPropertyValues(componentSelector, sizes, defaultProps.size)
28
- public size : TagProps['size'] = defaultProps.size;
29
+ public size = defaultProps.size;
29
30
 
30
31
  @property({ type: Boolean })
31
32
  public isStrong = defaultProps.isStrong;
32
33
 
33
34
  @property({ type: Boolean })
34
- public isDimmed = defaultProps.isDimmed;
35
+ public disabled = defaultProps.disabled;
36
+
37
+ @property({ type: Boolean })
38
+ public isInteractive = defaultProps.isInteractive;
35
39
 
36
40
  render () {
37
41
  const {
38
- variant,
39
- size,
42
+ disabled,
43
+ isInteractive,
40
44
  isStrong,
41
- isDimmed,
45
+ size,
46
+ variant,
42
47
  } = this;
48
+
49
+ const classes = {
50
+ 'c-tag': true,
51
+ [`c-tag--${size}`]: true,
52
+ [`c-tag--${variant}`]: true,
53
+ 'c-tag--disabled': disabled,
54
+ 'c-tag--strong': isStrong,
55
+ 'c-tag--interactive': isInteractive,
56
+ };
57
+
58
+ if (isInteractive) {
59
+ return this.renderButtonTag(classes);
60
+ }
61
+
62
+ return this.renderTag(classes);
63
+ }
64
+
65
+ private renderIconSlot () {
66
+ if (this.size !== 'large') return nothing;
67
+
68
+ return html`<slot name="icon"></slot>`;
69
+ }
70
+
71
+ private renderTag (classes: ClassInfo) {
72
+ return html`
73
+ <div
74
+ class="${classMap(classes)}"
75
+ data-test-id="pie-tag">
76
+ ${this.renderIconSlot()}
77
+ <slot></slot>
78
+ </div>`;
79
+ }
80
+
81
+ private renderButtonTag (classes: ClassInfo) {
43
82
  return html`
44
- <div
45
- class="c-tag"
46
- variant=${variant}
47
- size=${size}
48
- ?isStrong=${isStrong}
49
- ?isDimmed=${isDimmed}
50
- data-test-id="pie-tag"
51
- >
52
- ${size === 'large' ? html`<slot name="icon"></slot>` : nothing}
53
- <slot></slot>
54
- </div>`;
83
+ <button
84
+ type="button"
85
+ ?disabled="${this.disabled}"
86
+ class="${classMap(classes)}"
87
+ data-test-id="pie-tag">
88
+ ${this.renderIconSlot()}
89
+ <slot></slot>
90
+ </button>`;
55
91
  }
56
92
 
57
93
  // Renders a `CSSResult` generated from SCSS by Vite
package/src/tag.scss CHANGED
@@ -1,5 +1,39 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
2
 
3
+ @mixin tag-interactive-states($bg-color, $mode: 'default') {
4
+ &.c-tag--interactive {
5
+ &:hover:not(.c-tag--disabled) {
6
+ @if $mode == 'inverse' {
7
+ --hover-modifier: var(--dt-color-hover-02);
8
+ } @else {
9
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
10
+ }
11
+
12
+ @if $mode == 'transparent' {
13
+ --hover-modifier: var(--dt-color-hover-01);
14
+ --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
15
+ } @else {
16
+ --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
17
+ }
18
+ }
19
+
20
+ &:active:not(.c-tag--disabled) {
21
+ @if $mode == 'inverse' {
22
+ --active-modifier: var(--dt-color-active-02);
23
+ } @else {
24
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
25
+ }
26
+
27
+ @if $mode == 'transparent' {
28
+ --active-modifier: var(--dt-color-active-01);
29
+ --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
30
+ } @else {
31
+ --tag-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
32
+ }
33
+ }
34
+ }
35
+ }
36
+
3
37
  // Base tag styles
4
38
  .c-tag {
5
39
  --tag-bg-color: var(--dt-color-container-strong);
@@ -33,8 +67,16 @@
33
67
  font-size: var(--tag-font-size);
34
68
  line-height: var(--tag-line-height);
35
69
 
70
+ &.c-tag--interactive {
71
+ border: none;
72
+
73
+ &:focus-visible {
74
+ @include p.focus;
75
+ }
76
+ }
77
+
36
78
  // Size
37
- &[size='small'] {
79
+ &.c-tag--small {
38
80
  --tag-padding-block: 0;
39
81
  --tag-padding-inline: var(--dt-spacing-a);
40
82
  --tag-border-radius: var(--dt-radius-rounded-a);
@@ -42,73 +84,85 @@
42
84
  --tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
43
85
  }
44
86
 
45
- &[size='large'] {
87
+ &.c-tag--large {
46
88
  // same as default styles
47
89
  }
48
90
 
49
91
  // Variant
50
- &[variant='neutral'] {
51
- // same as default styles
92
+ &.c-tag--neutral {
93
+ @include tag-interactive-states('--dt-color-container-strong');
52
94
 
53
- &[isStrong] {
95
+ &.c-tag--strong {
54
96
  --tag-bg-color: var(--dt-color-container-inverse);
55
97
  --tag-color: var(--dt-color-content-inverse);
98
+ @include tag-interactive-states('--dt-color-container-inverse', 'inverse');
56
99
  }
57
100
  }
58
101
 
59
- &[variant='blue'] {
102
+ &.c-tag--blue {
60
103
  --tag-bg-color: var(--dt-color-support-info-02);
61
104
  --tag-color: var(--dt-color-content-default);
105
+ @include tag-interactive-states('--dt-color-support-info-02');
62
106
 
63
- &[isStrong] {
107
+ &.c-tag--strong {
64
108
  --tag-bg-color: var(--dt-color-support-info);
65
109
  --tag-color: var(--dt-color-content-inverse);
110
+ @include tag-interactive-states('--dt-color-support-info');
66
111
  }
67
112
  }
68
113
 
69
- &[variant='green'] {
114
+ &.c-tag--green {
70
115
  --tag-bg-color: var(--dt-color-support-positive-02);
71
116
  --tag-color: var(--dt-color-content-default);
117
+ @include tag-interactive-states('--dt-color-support-positive-02');
72
118
 
73
- &[isStrong] {
119
+ &.c-tag--strong {
74
120
  --tag-bg-color: var(--dt-color-support-positive);
75
121
  --tag-color: var(--dt-color-content-inverse);
122
+ @include tag-interactive-states('--dt-color-support-positive');
76
123
  }
77
124
  }
78
125
 
79
- &[variant='yellow'] {
126
+ &.c-tag--yellow {
80
127
  --tag-bg-color: var(--dt-color-support-warning-02);
81
128
  --tag-color: var(--dt-color-content-default);
129
+ @include tag-interactive-states('--dt-color-support-warning-02');
82
130
 
83
- &[isStrong] {
131
+ &.c-tag--strong {
84
132
  --tag-bg-color: var(--dt-color-support-warning);
85
133
  --tag-color: var(--dt-color-content-dark);
134
+ @include tag-interactive-states('--dt-color-support-warning');
86
135
  }
87
136
  }
88
137
 
89
- &[variant='red'] {
138
+ &.c-tag--red {
90
139
  --tag-bg-color: var(--dt-color-support-error-02);
91
140
  --tag-color: var(--dt-color-content-default);
141
+ @include tag-interactive-states('--dt-color-support-error-02');
92
142
 
93
- &[isStrong] {
143
+ &.c-tag--strong {
94
144
  --tag-bg-color: var(--dt-color-support-error);
95
145
  --tag-color: var(--dt-color-content-light);
146
+ @include tag-interactive-states('--dt-color-support-error');
96
147
  }
97
148
  }
98
149
 
99
- &[variant='brand'] {
150
+ &.c-tag--brand {
100
151
  --tag-bg-color: var(--dt-color-support-brand-02);
101
152
  --tag-color: var(--dt-color-content-default);
153
+ @include tag-interactive-states('--dt-color-support-brand-02');
102
154
  }
103
155
 
104
- &[variant='neutral-alternative'] {
156
+ &.c-tag--neutral-alternative {
105
157
  --tag-bg-color: var(--dt-color-container-default);
106
158
  --tag-color: var(--dt-color-content-default);
159
+ @include tag-interactive-states('--dt-color-container-default');
107
160
  }
108
161
 
109
- &[variant='outline'] {
162
+ &.c-tag--outline {
110
163
  --tag-bg-color: var(--tag-transparent-bg-color);
111
164
  --tag-color: var(--dt-color-content-default);
165
+ @include tag-interactive-states('--dt-color-black', 'transparent');
112
166
 
113
167
  // the outline in design specs is part of the total component
114
168
  // height calculation, thus, we use box-shadow to mimic borders
@@ -116,14 +170,19 @@
116
170
  box-shadow: 0 0 0 1px var(--dt-color-border-strong);
117
171
  }
118
172
 
119
- &[variant='ghost'] {
173
+ &.c-tag--ghost {
120
174
  --tag-bg-color: var(--tag-transparent-bg-color);
121
175
  --tag-color: var(--dt-color-content-default);
176
+ @include tag-interactive-states('--dt-color-black', 'transparent');
122
177
  }
123
178
 
124
- &[isDimmed] {
179
+ &.c-tag--disabled {
125
180
  opacity: 0.5;
126
181
  }
182
+
183
+ &[disabled] {
184
+ cursor: not-allowed;
185
+ }
127
186
  }
128
187
 
129
188
  // Used to size an SVG if one is passed in (when not using the component icons)