@justeattakeaway/pie-tag 0.9.8 → 0.9.10

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 (9) hide show
  1. package/custom-elements.json +0 -12
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +41 -38
  4. package/dist/react.d.ts +2 -2
  5. package/dist/react.js +7 -6
  6. package/package.json +4 -3
  7. package/src/defs-react.ts +1 -1
  8. package/src/index.ts +17 -11
  9. package/src/tag.scss +17 -17
package/custom-elements.json CHANGED
@@ -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
  },
@@ -117,16 +111,10 @@
117
111
  "attributes": [
118
112
  {
119
113
  "name": "variant",
120
- "type": {
121
- "text": "TagProps['variant']"
122
- },
123
114
  "fieldName": "variant"
124
115
  },
125
116
  {
126
117
  "name": "size",
127
- "type": {
128
- "text": "TagProps['size']"
129
- },
130
118
  "fieldName": "size"
131
119
  },
132
120
  {
package/dist/index.d.ts CHANGED
@@ -13,8 +13,8 @@ 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
19
  isDimmed: boolean;
20
20
  render(): TemplateResult<1>;
package/dist/index.js CHANGED
@@ -1,63 +1,66 @@
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 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 = {
6
7
  variant: "neutral",
7
8
  isStrong: !1,
8
9
  isDimmed: !1,
9
10
  size: "large"
10
11
  };
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;
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;
15
16
  };
16
17
  const d = "pie-tag";
17
- class n extends u {
18
+ class e extends f {
18
19
  constructor() {
19
- super(...arguments), this.variant = e.variant, this.size = e.size, this.isStrong = e.isStrong, this.isDimmed = e.isDimmed;
20
+ super(...arguments), this.variant = r.variant, this.size = r.size, this.isStrong = r.isStrong, this.isDimmed = r.isDimmed;
20
21
  }
21
22
  render() {
22
23
  const {
23
- variant: o,
24
- size: r,
25
- isStrong: a,
26
- isDimmed: t
27
- } = this;
24
+ isDimmed: a,
25
+ isStrong: n,
26
+ size: o,
27
+ variant: t
28
+ } = this, g = {
29
+ "c-tag": !0,
30
+ [`c-tag--${o}`]: !0,
31
+ [`c-tag--${t}`]: !0,
32
+ "c-tag--dimmed": a,
33
+ "c-tag--strong": n
34
+ };
28
35
  return v`
29
36
  <div
30
- class="c-tag"
31
- variant=${o}
32
- size=${r}
33
- ?isStrong=${a}
34
- ?isDimmed=${t}
37
+ class="${m(g)}"
35
38
  data-test-id="pie-tag"
36
39
  >
37
- ${r === "large" ? v`<slot name="icon"></slot>` : b}
40
+ ${o === "large" ? v`<slot name="icon"></slot>` : b}
38
41
  <slot></slot>
39
42
  </div>`;
40
43
  }
41
44
  }
42
- n.styles = f(h);
45
+ e.styles = u(y);
43
46
  l([
44
- i({ type: String }),
45
- p(d, y, e.variant)
46
- ], n.prototype, "variant", 2);
47
+ c({ type: String }),
48
+ p(d, z, r.variant)
49
+ ], e.prototype, "variant", 2);
47
50
  l([
48
- i({ type: String }),
49
- p(d, z, e.size)
50
- ], n.prototype, "size", 2);
51
+ c({ type: String }),
52
+ p(d, w, r.size)
53
+ ], e.prototype, "size", 2);
51
54
  l([
52
- i({ type: Boolean })
53
- ], n.prototype, "isStrong", 2);
55
+ c({ type: Boolean })
56
+ ], e.prototype, "isStrong", 2);
54
57
  l([
55
- i({ type: Boolean })
56
- ], n.prototype, "isDimmed", 2);
57
- m(d, n);
58
+ c({ type: Boolean })
59
+ ], e.prototype, "isDimmed", 2);
60
+ h(d, e);
58
61
  export {
59
- n as PieTag,
60
- e as defaultProps,
61
- z as sizes,
62
- y as variants
62
+ e as PieTag,
63
+ r as defaultProps,
64
+ w as sizes,
65
+ z as variants
63
66
  };
package/dist/react.d.ts CHANGED
@@ -16,8 +16,8 @@ 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
22
  isDimmed: boolean;
23
23
  render(): TemplateResult<1>;
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.8",
4
+ "version": "0.9.10",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -36,8 +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.16.0",
40
- "@justeattakeaway/pie-icons-webc": "0.24.2",
39
+ "@justeattakeaway/pie-components-config": "0.18.0",
40
+ "@justeattakeaway/pie-css": "0.12.1",
41
+ "@justeattakeaway/pie-icons-webc": "0.25.1",
41
42
  "@justeattakeaway/pie-wrapper-react": "0.14.1",
42
43
  "cem-plugin-module-file-extensions": "0.0.5"
43
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/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 } 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,11 +22,11 @@ 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;
@@ -35,18 +36,23 @@ export class PieTag extends LitElement implements TagProps {
35
36
 
36
37
  render () {
37
38
  const {
38
- variant,
39
- size,
40
- isStrong,
41
39
  isDimmed,
40
+ isStrong,
41
+ size,
42
+ variant,
42
43
  } = this;
44
+
45
+ const classes = {
46
+ 'c-tag': true,
47
+ [`c-tag--${size}`]: true,
48
+ [`c-tag--${variant}`]: true,
49
+ 'c-tag--dimmed': isDimmed,
50
+ 'c-tag--strong': isStrong,
51
+ };
52
+
43
53
  return html`
44
54
  <div
45
- class="c-tag"
46
- variant=${variant}
47
- size=${size}
48
- ?isStrong=${isStrong}
49
- ?isDimmed=${isDimmed}
55
+ class="${classMap(classes)}"
50
56
  data-test-id="pie-tag"
51
57
  >
52
58
  ${size === 'large' ? html`<slot name="icon"></slot>` : nothing}
package/src/tag.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  line-height: var(--tag-line-height);
35
35
 
36
36
  // Size
37
- &[size='small'] {
37
+ &.c-tag--small {
38
38
  --tag-padding-block: 0;
39
39
  --tag-padding-inline: var(--dt-spacing-a);
40
40
  --tag-border-radius: var(--dt-radius-rounded-a);
@@ -42,71 +42,71 @@
42
42
  --tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
43
43
  }
44
44
 
45
- &[size='large'] {
45
+ &.c-tag--large {
46
46
  // same as default styles
47
47
  }
48
48
 
49
49
  // Variant
50
- &[variant='neutral'] {
50
+ &.c-tag--neutral {
51
51
  // same as default styles
52
52
 
53
- &[isStrong] {
53
+ &.c-tag--strong {
54
54
  --tag-bg-color: var(--dt-color-container-inverse);
55
55
  --tag-color: var(--dt-color-content-inverse);
56
56
  }
57
57
  }
58
58
 
59
- &[variant='blue'] {
59
+ &.c-tag--blue {
60
60
  --tag-bg-color: var(--dt-color-support-info-02);
61
61
  --tag-color: var(--dt-color-content-default);
62
62
 
63
- &[isStrong] {
63
+ &.c-tag--strong {
64
64
  --tag-bg-color: var(--dt-color-support-info);
65
65
  --tag-color: var(--dt-color-content-inverse);
66
66
  }
67
67
  }
68
68
 
69
- &[variant='green'] {
69
+ &.c-tag--green {
70
70
  --tag-bg-color: var(--dt-color-support-positive-02);
71
71
  --tag-color: var(--dt-color-content-default);
72
72
 
73
- &[isStrong] {
73
+ &.c-tag--strong {
74
74
  --tag-bg-color: var(--dt-color-support-positive);
75
75
  --tag-color: var(--dt-color-content-inverse);
76
76
  }
77
77
  }
78
78
 
79
- &[variant='yellow'] {
79
+ &.c-tag--yellow {
80
80
  --tag-bg-color: var(--dt-color-support-warning-02);
81
81
  --tag-color: var(--dt-color-content-default);
82
82
 
83
- &[isStrong] {
83
+ &.c-tag--strong {
84
84
  --tag-bg-color: var(--dt-color-support-warning);
85
85
  --tag-color: var(--dt-color-content-dark);
86
86
  }
87
87
  }
88
88
 
89
- &[variant='red'] {
89
+ &.c-tag--red {
90
90
  --tag-bg-color: var(--dt-color-support-error-02);
91
91
  --tag-color: var(--dt-color-content-default);
92
92
 
93
- &[isStrong] {
93
+ &.c-tag--strong {
94
94
  --tag-bg-color: var(--dt-color-support-error);
95
95
  --tag-color: var(--dt-color-content-light);
96
96
  }
97
97
  }
98
98
 
99
- &[variant='brand'] {
99
+ &.c-tag--brand {
100
100
  --tag-bg-color: var(--dt-color-support-brand-02);
101
101
  --tag-color: var(--dt-color-content-default);
102
102
  }
103
103
 
104
- &[variant='neutral-alternative'] {
104
+ &.c-tag--neutral-alternative {
105
105
  --tag-bg-color: var(--dt-color-container-default);
106
106
  --tag-color: var(--dt-color-content-default);
107
107
  }
108
108
 
109
- &[variant='outline'] {
109
+ &.c-tag--outline {
110
110
  --tag-bg-color: var(--tag-transparent-bg-color);
111
111
  --tag-color: var(--dt-color-content-default);
112
112
 
@@ -116,12 +116,12 @@
116
116
  box-shadow: 0 0 0 1px var(--dt-color-border-strong);
117
117
  }
118
118
 
119
- &[variant='ghost'] {
119
+ &.c-tag--ghost {
120
120
  --tag-bg-color: var(--tag-transparent-bg-color);
121
121
  --tag-color: var(--dt-color-content-default);
122
122
  }
123
123
 
124
- &[isDimmed] {
124
+ &.c-tag--dimmed {
125
125
  opacity: 0.5;
126
126
  }
127
127
  }