@justeattakeaway/pie-tag 0.9.10 → 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 (8) hide show
  1. package/custom-elements.json +46 -5
  2. package/dist/index.d.ts +13 -4
  3. package/dist/index.js +73 -51
  4. package/dist/react.d.ts +13 -4
  5. package/package.json +1 -1
  6. package/src/defs.ts +11 -4
  7. package/src/index.ts +41 -11
  8. package/src/tag.scss +61 -2
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": [
@@ -103,9 +103,46 @@
103
103
  },
104
104
  {
105
105
  "kind": "field",
106
- "name": "isDimmed",
106
+ "name": "disabled",
107
107
  "privacy": "public",
108
- "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
+ ]
109
146
  }
110
147
  ],
111
148
  "attributes": [
@@ -122,8 +159,12 @@
122
159
  "fieldName": "isStrong"
123
160
  },
124
161
  {
125
- "name": "isDimmed",
126
- "fieldName": "isDimmed"
162
+ "name": "disabled",
163
+ "fieldName": "disabled"
164
+ },
165
+ {
166
+ "name": "isInteractive",
167
+ "fieldName": "isInteractive"
127
168
  }
128
169
  ],
129
170
  "superclass": {
package/dist/index.d.ts CHANGED
@@ -16,8 +16,12 @@ export declare class PieTag extends LitElement implements TagProps {
16
16
  variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand";
17
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,66 +1,88 @@
1
- import { unsafeCSS as u, LitElement as f, html as v, nothing as b } from "lit";
2
- import { property as c } from "lit/decorators.js";
3
- import { classMap as m } from "lit/directives/class-map.js";
4
- import { validPropertyValues as p, defineCustomElement as h } 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--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--strong{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.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--strong{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.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--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.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--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.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--strong{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.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--neutral-alternative{--tag-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.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--ghost{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--dimmed{opacity:.5}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
6
- `, z = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], w = ["small", "large"], r = {
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 = {
7
7
  variant: "neutral",
8
8
  isStrong: !1,
9
- isDimmed: !1,
9
+ isInteractive: !1,
10
+ disabled: !1,
10
11
  size: "large"
11
12
  };
12
- var x = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (i, a, n, o) => {
13
- for (var t = o > 1 ? void 0 : o ? S(a, n) : a, g = i.length - 1, s; g >= 0; g--)
14
- (s = i[g]) && (t = (o ? s(a, n, t) : s(t)) || t);
15
- return o && t && x(a, n, 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;
16
17
  };
17
- const d = "pie-tag";
18
- class e extends f {
18
+ const s = "pie-tag";
19
+ class a extends u {
19
20
  constructor() {
20
- super(...arguments), this.variant = r.variant, this.size = r.size, this.isStrong = r.isStrong, this.isDimmed = r.isDimmed;
21
+ super(...arguments), this.variant = o.variant, this.size = o.size, this.isStrong = o.isStrong, this.disabled = o.disabled, this.isInteractive = o.isInteractive;
21
22
  }
22
23
  render() {
23
24
  const {
24
- isDimmed: a,
25
- isStrong: n,
26
- size: o,
27
- variant: t
28
- } = this, g = {
25
+ disabled: t,
26
+ isInteractive: c,
27
+ isStrong: e,
28
+ size: r,
29
+ variant: l
30
+ } = this, i = {
29
31
  "c-tag": !0,
30
- [`c-tag--${o}`]: !0,
31
- [`c-tag--${t}`]: !0,
32
- "c-tag--dimmed": a,
33
- "c-tag--strong": n
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
34
37
  };
35
- return v`
36
- <div
37
- class="${m(g)}"
38
- data-test-id="pie-tag"
39
- >
40
- ${o === "large" ? v`<slot name="icon"></slot>` : b}
41
- <slot></slot>
42
- </div>`;
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>`;
43
62
  }
44
63
  }
45
- e.styles = u(y);
46
- l([
47
- c({ type: String }),
48
- p(d, z, r.variant)
49
- ], e.prototype, "variant", 2);
50
- l([
51
- c({ type: String }),
52
- p(d, w, r.size)
53
- ], e.prototype, "size", 2);
54
- l([
55
- c({ type: Boolean })
56
- ], e.prototype, "isStrong", 2);
57
- l([
58
- c({ type: Boolean })
59
- ], e.prototype, "isDimmed", 2);
60
- h(d, e);
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);
61
83
  export {
62
- e as PieTag,
63
- r as defaultProps,
64
- w as sizes,
65
- z as variants
84
+ a as PieTag,
85
+ o as defaultProps,
86
+ z as sizes,
87
+ w as variants
66
88
  };
package/dist/react.d.ts CHANGED
@@ -19,8 +19,12 @@ declare class PieTag_2 extends LitElement implements TagProps {
19
19
  variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "blue" | "green" | "yellow" | "red" | "brand";
20
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/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.10",
4
+ "version": "0.10.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
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,7 +2,7 @@ import {
2
2
  LitElement, html, unsafeCSS, nothing,
3
3
  } from 'lit';
4
4
  import { property } from 'lit/decorators.js';
5
- import { classMap } from 'lit/directives/class-map.js';
5
+ import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
6
6
  import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
7
7
  import styles from './tag.scss?inline';
8
8
  import {
@@ -32,11 +32,15 @@ export class PieTag extends LitElement implements TagProps {
32
32
  public isStrong = defaultProps.isStrong;
33
33
 
34
34
  @property({ type: Boolean })
35
- public isDimmed = defaultProps.isDimmed;
35
+ public disabled = defaultProps.disabled;
36
+
37
+ @property({ type: Boolean })
38
+ public isInteractive = defaultProps.isInteractive;
36
39
 
37
40
  render () {
38
41
  const {
39
- isDimmed,
42
+ disabled,
43
+ isInteractive,
40
44
  isStrong,
41
45
  size,
42
46
  variant,
@@ -46,18 +50,44 @@ export class PieTag extends LitElement implements TagProps {
46
50
  'c-tag': true,
47
51
  [`c-tag--${size}`]: true,
48
52
  [`c-tag--${variant}`]: true,
49
- 'c-tag--dimmed': isDimmed,
53
+ 'c-tag--disabled': disabled,
50
54
  'c-tag--strong': isStrong,
55
+ 'c-tag--interactive': isInteractive,
51
56
  };
52
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) {
53
82
  return html`
54
- <div
55
- class="${classMap(classes)}"
56
- data-test-id="pie-tag"
57
- >
58
- ${size === 'large' ? html`<slot name="icon"></slot>` : nothing}
59
- <slot></slot>
60
- </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>`;
61
91
  }
62
92
 
63
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,6 +67,14 @@
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
79
  &.c-tag--small {
38
80
  --tag-padding-block: 0;
@@ -48,67 +90,79 @@
48
90
 
49
91
  // Variant
50
92
  &.c-tag--neutral {
51
- // same as default styles
93
+ @include tag-interactive-states('--dt-color-container-strong');
52
94
 
53
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
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
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
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
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
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
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
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
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
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
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
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
@@ -119,11 +173,16 @@
119
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
- &.c-tag--dimmed {
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)