@justeattakeaway/pie-tag 0.7.1 → 0.8.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 +13 -13
- package/package.json +1 -1
- package/src/tag.scss +8 -8
package/dist/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as
|
|
1
|
+
import { unsafeCSS as p, LitElement as u, html as d, nothing as f } from "lit";
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
|
-
import { validPropertyValues as v, defineCustomElement as
|
|
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-
|
|
3
|
+
import { validPropertyValues as v, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
|
|
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-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
5
|
`, m = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], y = ["small", "large"];
|
|
6
|
-
var
|
|
7
|
-
for (var t = a > 1 ? void 0 : a ?
|
|
6
|
+
var z = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (l, r, o, a) => {
|
|
7
|
+
for (var t = a > 1 ? void 0 : a ? S(r, o) : r, g = l.length - 1, c; g >= 0; g--)
|
|
8
8
|
(c = l[g]) && (t = (a ? c(r, o, t) : c(t)) || t);
|
|
9
|
-
return a && t &&
|
|
9
|
+
return a && t && z(r, o, t), t;
|
|
10
10
|
};
|
|
11
|
-
const
|
|
12
|
-
class e extends
|
|
11
|
+
const s = "pie-tag";
|
|
12
|
+
class e extends u {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments), this.variant = "neutral", this.size = "large", this.isStrong = !1, this.isDimmed = !1;
|
|
15
15
|
}
|
|
@@ -20,7 +20,7 @@ class e extends b {
|
|
|
20
20
|
isStrong: a,
|
|
21
21
|
isDimmed: t
|
|
22
22
|
} = this;
|
|
23
|
-
return
|
|
23
|
+
return d`
|
|
24
24
|
<div
|
|
25
25
|
class="c-tag"
|
|
26
26
|
variant=${r || "neutral"}
|
|
@@ -29,7 +29,7 @@ class e extends b {
|
|
|
29
29
|
?isDimmed=${t}
|
|
30
30
|
data-test-id="pie-tag"
|
|
31
31
|
>
|
|
32
|
-
${o === "large" ?
|
|
32
|
+
${o === "large" ? d`<slot name="icon"></slot>` : f}
|
|
33
33
|
<slot></slot>
|
|
34
34
|
</div>`;
|
|
35
35
|
}
|
|
@@ -37,11 +37,11 @@ class e extends b {
|
|
|
37
37
|
e.styles = p(h);
|
|
38
38
|
i([
|
|
39
39
|
n({ type: String }),
|
|
40
|
-
v(
|
|
40
|
+
v(s, m, "neutral")
|
|
41
41
|
], e.prototype, "variant", 2);
|
|
42
42
|
i([
|
|
43
43
|
n({ type: String }),
|
|
44
|
-
v(
|
|
44
|
+
v(s, 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
|
-
|
|
52
|
+
b(s, e);
|
|
53
53
|
export {
|
|
54
54
|
e as PieTag,
|
|
55
55
|
y as sizes,
|
package/package.json
CHANGED
package/src/tag.scss
CHANGED
|
@@ -5,10 +5,8 @@
|
|
|
5
5
|
--tag-bg-color: var(--dt-color-container-strong);
|
|
6
6
|
--tag-color: var(--dt-color-content-default);
|
|
7
7
|
--tag-border-radius: var(--dt-radius-rounded-b);
|
|
8
|
-
--tag-
|
|
9
|
-
--tag-
|
|
10
|
-
--tag-padding-block: calc(2px - var(--tag-border-width));
|
|
11
|
-
--tag-padding-inline: calc(var(--dt-spacing-b) - var(--tag-border-width));
|
|
8
|
+
--tag-padding-block: 2px;
|
|
9
|
+
--tag-padding-inline: var(--dt-spacing-b);
|
|
12
10
|
--tag-font-family: var(--dt-font-body-s-family);
|
|
13
11
|
--tag-font-weight: var(--dt-font-body-s-weight);
|
|
14
12
|
--tag-font-size: #{p.font-size(--dt-font-body-s-size)};
|
|
@@ -27,8 +25,6 @@
|
|
|
27
25
|
justify-content: center;
|
|
28
26
|
gap: var(--dt-spacing-a);
|
|
29
27
|
padding: var(--tag-padding-block) var(--tag-padding-inline);
|
|
30
|
-
border: var(--tag-border-width) solid;
|
|
31
|
-
border-color: var(--tag-border-color);
|
|
32
28
|
border-radius: var(--tag-border-radius);
|
|
33
29
|
background-color: var(--tag-bg-color);
|
|
34
30
|
color: var(--tag-color);
|
|
@@ -40,7 +36,7 @@
|
|
|
40
36
|
// Size
|
|
41
37
|
&[size='small'] {
|
|
42
38
|
--tag-padding-block: 0;
|
|
43
|
-
--tag-padding-inline:
|
|
39
|
+
--tag-padding-inline: var(--dt-spacing-a);
|
|
44
40
|
--tag-border-radius: var(--dt-radius-rounded-a);
|
|
45
41
|
--tag-font-size: #{p.font-size(--dt-font-caption-size)};
|
|
46
42
|
--tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
|
|
@@ -113,7 +109,11 @@
|
|
|
113
109
|
&[variant='outline'] {
|
|
114
110
|
--tag-bg-color: var(--tag-transparent-bg-color);
|
|
115
111
|
--tag-color: var(--dt-color-content-default);
|
|
116
|
-
|
|
112
|
+
|
|
113
|
+
// the outline in design specs is part of the total component
|
|
114
|
+
// height calculation, thus, we use box-shadow to mimic borders
|
|
115
|
+
// and avoid the extra 2px from "border: 1px solid" as shadows are applied "internally"
|
|
116
|
+
box-shadow: 0 0 0 1px var(--dt-color-border-strong);
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
&[variant='ghost'] {
|