@justeattakeaway/pie-tag 0.6.2 → 0.7.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.
- package/dist/index.js +20 -20
- package/package.json +1 -1
- package/src/tag.scss +15 -31
package/dist/index.js
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as
|
|
1
|
+
import { unsafeCSS as p, LitElement as b, html as s, nothing as u } from "lit";
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
3
|
import { validPropertyValues as v, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
|
|
4
|
-
const
|
|
4
|
+
const h = `.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-border-width: 1px;--tag-border-color: transparent;--tag-padding-block: calc(2px - var(--tag-border-width));--tag-padding-inline: calc(var(--dt-spacing-b) - var(--tag-border-width));--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:var(--tag-border-width) solid;border-color:var(--tag-border-color);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: calc(var(--dt-spacing-a) - var(--tag-border-width));--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);--tag-border-color: 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
5
|
`, m = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], y = ["small", "large"];
|
|
6
|
-
var
|
|
7
|
-
for (var t =
|
|
8
|
-
(c = g
|
|
9
|
-
return
|
|
6
|
+
var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, i = (l, r, o, a) => {
|
|
7
|
+
for (var t = a > 1 ? void 0 : a ? z(r, o) : r, g = l.length - 1, c; g >= 0; g--)
|
|
8
|
+
(c = l[g]) && (t = (a ? c(r, o, t) : c(t)) || t);
|
|
9
|
+
return a && t && w(r, o, t), t;
|
|
10
10
|
};
|
|
11
|
-
const
|
|
12
|
-
class e extends
|
|
11
|
+
const d = "pie-tag";
|
|
12
|
+
class e extends b {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments), this.variant = "neutral", this.size = "large", this.isStrong = !1, this.isDimmed = !1;
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
const {
|
|
18
|
-
variant:
|
|
19
|
-
size:
|
|
20
|
-
isStrong:
|
|
18
|
+
variant: r,
|
|
19
|
+
size: o,
|
|
20
|
+
isStrong: a,
|
|
21
21
|
isDimmed: t
|
|
22
22
|
} = this;
|
|
23
|
-
return
|
|
23
|
+
return s`
|
|
24
24
|
<div
|
|
25
25
|
class="c-tag"
|
|
26
|
-
variant=${
|
|
27
|
-
size=${
|
|
28
|
-
?isStrong=${
|
|
26
|
+
variant=${r || "neutral"}
|
|
27
|
+
size=${o || "large"}
|
|
28
|
+
?isStrong=${a}
|
|
29
29
|
?isDimmed=${t}
|
|
30
30
|
data-test-id="pie-tag"
|
|
31
31
|
>
|
|
32
|
-
${
|
|
32
|
+
${o === "large" ? s`<slot name="icon"></slot>` : u}
|
|
33
33
|
<slot></slot>
|
|
34
34
|
</div>`;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
e.styles = p(
|
|
37
|
+
e.styles = p(h);
|
|
38
38
|
i([
|
|
39
39
|
n({ type: String }),
|
|
40
|
-
v(
|
|
40
|
+
v(d, m, "neutral")
|
|
41
41
|
], e.prototype, "variant", 2);
|
|
42
42
|
i([
|
|
43
43
|
n({ type: String }),
|
|
44
|
-
v(
|
|
44
|
+
v(d, y, "large")
|
|
45
45
|
], e.prototype, "size", 2);
|
|
46
46
|
i([
|
|
47
47
|
n({ type: Boolean })
|
|
@@ -49,7 +49,7 @@ i([
|
|
|
49
49
|
i([
|
|
50
50
|
n({ type: Boolean })
|
|
51
51
|
], e.prototype, "isDimmed", 2);
|
|
52
|
-
f(
|
|
52
|
+
f(d, e);
|
|
53
53
|
export {
|
|
54
54
|
e as PieTag,
|
|
55
55
|
y as sizes,
|
package/package.json
CHANGED
package/src/tag.scss
CHANGED
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
// Base tag styles
|
|
4
4
|
.c-tag {
|
|
5
|
-
|
|
6
|
-
--tag-
|
|
7
|
-
--tag-color: var(--dt-color-content-inverse);
|
|
8
|
-
--tag-padding: 2px var(--dt-spacing-b);
|
|
9
|
-
--tag-height: 24px;
|
|
5
|
+
--tag-bg-color: var(--dt-color-container-strong);
|
|
6
|
+
--tag-color: var(--dt-color-content-default);
|
|
10
7
|
--tag-border-radius: var(--dt-radius-rounded-b);
|
|
8
|
+
--tag-border-width: 1px;
|
|
9
|
+
--tag-border-color: transparent;
|
|
10
|
+
--tag-padding-block: calc(2px - var(--tag-border-width));
|
|
11
|
+
--tag-padding-inline: calc(var(--dt-spacing-b) - var(--tag-border-width));
|
|
11
12
|
--tag-font-family: var(--dt-font-body-s-family);
|
|
12
13
|
--tag-font-weight: var(--dt-font-body-s-weight);
|
|
13
14
|
--tag-font-size: #{p.font-size(--dt-font-body-s-size)};
|
|
@@ -16,10 +17,6 @@
|
|
|
16
17
|
// transparent to variable to function properly in component tests
|
|
17
18
|
--tag-transparent-bg-color: transparent;
|
|
18
19
|
|
|
19
|
-
// Heights for the different tag sizes
|
|
20
|
-
--tag-height-large: 24px;
|
|
21
|
-
--tag-height-small: 16px;
|
|
22
|
-
|
|
23
20
|
// Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
|
|
24
21
|
--icon-display-override: block;
|
|
25
22
|
--icon-size-override: 16px;
|
|
@@ -29,9 +26,9 @@
|
|
|
29
26
|
align-items: center;
|
|
30
27
|
justify-content: center;
|
|
31
28
|
gap: var(--dt-spacing-a);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
border:
|
|
29
|
+
padding: var(--tag-padding-block) var(--tag-padding-inline);
|
|
30
|
+
border: var(--tag-border-width) solid;
|
|
31
|
+
border-color: var(--tag-border-color);
|
|
35
32
|
border-radius: var(--tag-border-radius);
|
|
36
33
|
background-color: var(--tag-bg-color);
|
|
37
34
|
color: var(--tag-color);
|
|
@@ -42,25 +39,20 @@
|
|
|
42
39
|
|
|
43
40
|
// Size
|
|
44
41
|
&[size='small'] {
|
|
45
|
-
--tag-
|
|
46
|
-
--tag-padding:
|
|
42
|
+
--tag-padding-block: 0;
|
|
43
|
+
--tag-padding-inline: calc(var(--dt-spacing-a) - var(--tag-border-width));
|
|
47
44
|
--tag-border-radius: var(--dt-radius-rounded-a);
|
|
48
45
|
--tag-font-size: #{p.font-size(--dt-font-caption-size)};
|
|
49
46
|
--tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
|
|
50
47
|
}
|
|
51
48
|
|
|
52
49
|
&[size='large'] {
|
|
53
|
-
|
|
54
|
-
--tag-padding: 2px var(--dt-spacing-b);
|
|
55
|
-
--tag-border-radius: var(--dt-radius-rounded-b);
|
|
56
|
-
--tag-font-size: #{p.font-size(--dt-font-body-s-size)};
|
|
57
|
-
--tag-line-height: #{p.line-height(--dt-font-body-s-line-height)};
|
|
50
|
+
// same as default styles
|
|
58
51
|
}
|
|
59
52
|
|
|
60
53
|
// Variant
|
|
61
54
|
&[variant='neutral'] {
|
|
62
|
-
|
|
63
|
-
--tag-color: var(--dt-color-content-default);
|
|
55
|
+
// same as default styles
|
|
64
56
|
|
|
65
57
|
&[isStrong] {
|
|
66
58
|
--tag-bg-color: var(--dt-color-container-inverse);
|
|
@@ -104,7 +96,7 @@
|
|
|
104
96
|
|
|
105
97
|
&[isStrong] {
|
|
106
98
|
--tag-bg-color: var(--dt-color-support-error);
|
|
107
|
-
--tag-color: var(--dt-color-content-
|
|
99
|
+
--tag-color: var(--dt-color-content-light);
|
|
108
100
|
}
|
|
109
101
|
}
|
|
110
102
|
|
|
@@ -121,15 +113,7 @@
|
|
|
121
113
|
&[variant='outline'] {
|
|
122
114
|
--tag-bg-color: var(--tag-transparent-bg-color);
|
|
123
115
|
--tag-color: var(--dt-color-content-default);
|
|
124
|
-
border:
|
|
125
|
-
|
|
126
|
-
&[size='small'] {
|
|
127
|
-
--tag-padding: 0 3px; // small tag padding minus 1px of the border
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
&[size='large'] {
|
|
131
|
-
--tag-padding: 1px 7px; // large tag padding minus 1px of the border
|
|
132
|
-
}
|
|
116
|
+
--tag-border-color: var(--dt-color-border-strong);
|
|
133
117
|
}
|
|
134
118
|
|
|
135
119
|
&[variant='ghost'] {
|