@justeattakeaway/pie-card 0.21.3 → 0.22.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 (3) hide show
  1. package/dist/index.js +51 -51
  2. package/package.json +2 -2
  3. package/src/card.scss +1 -1
package/dist/index.js CHANGED
@@ -1,20 +1,20 @@
1
- import { LitElement as S, html as u, nothing as g, unsafeCSS as $ } from "lit";
2
- import { classMap as f } from "lit/directives/class-map.js";
1
+ import { LitElement as S, html as b, nothing as g, unsafeCSS as $ } from "lit";
2
+ import { classMap as h } from "lit/directives/class-map.js";
3
3
  import { ifDefined as m } from "lit/directives/if-defined.js";
4
4
  import { property as d, queryAssignedElements as C } from "lit/decorators.js";
5
- import { validPropertyValues as b, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
- const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-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-card.c-card--default:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-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-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-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-card.c-card--outline:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-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-card.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-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-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-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-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-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-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-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-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}", E = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], y = ["a", "b", "c", "d", "e", "f", "g"], D = y.flatMap((v) => [v, ...y.map((r) => `${v},${r}`)]), s = {
5
+ import { validPropertyValues as u, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
+ const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-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-card.c-card--default:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-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-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-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-card.c-card--outline:active:not(.c-card--disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-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-card.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-inverse-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-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-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-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-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-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-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-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-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}", E = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], y = ["a", "b", "c", "d", "e", "f", "g"], D = y.flatMap((v) => [v, ...y.map((r) => `${v},${r}`)]), s = {
7
7
  disabled: !1,
8
8
  variant: "default",
9
9
  isDraggable: !1,
10
10
  tag: "button"
11
11
  };
12
- var I = Object.defineProperty, c = (v, r, a, o) => {
13
- for (var e = void 0, i = v.length - 1, l; i >= 0; i--)
14
- (l = v[i]) && (e = l(r, a, e) || e);
15
- return e && I(r, a, e), e;
12
+ var I = Object.defineProperty, c = (v, r, e, t) => {
13
+ for (var a = void 0, i = v.length - 1, l; i >= 0; i--)
14
+ (l = v[i]) && (a = l(r, e, a) || a);
15
+ return a && I(r, e, a), a;
16
16
  };
17
- const p = "pie-card", h = class h extends S {
17
+ const p = "pie-card", f = class f extends S {
18
18
  constructor() {
19
19
  super(...arguments), this.tag = s.tag, this.variant = s.variant, this.disabled = s.disabled, this.isDraggable = s.isDraggable;
20
20
  }
@@ -27,24 +27,24 @@ const p = "pie-card", h = class h extends S {
27
27
  * @private
28
28
  */
29
29
  renderAnchor(r) {
30
- const a = this.generatePaddingCSS(), {
31
- href: o,
32
- rel: e,
30
+ const e = this.generatePaddingCSS(), {
31
+ href: t,
32
+ rel: a,
33
33
  target: i,
34
34
  disabled: l,
35
35
  aria: n
36
36
  } = this;
37
- return u`
37
+ return b`
38
38
  <a
39
- class="${f(r)}"
39
+ class="${h(r)}"
40
40
  data-test-id="pie-card"
41
- href=${m(o && !l ? o : void 0)}
41
+ href=${m(t && !l ? t : void 0)}
42
42
  target=${i || g}
43
- rel=${e || g}
43
+ rel=${a || g}
44
44
  role="link"
45
45
  aria-label=${(n == null ? void 0 : n.label) || g}
46
46
  aria-disabled=${l ? "true" : "false"}
47
- style=${m(a)}>
47
+ style=${m(e)}>
48
48
  <slot @slotchange=${this.handleSlotChange}></slot>
49
49
  </a>`;
50
50
  }
@@ -60,11 +60,11 @@ const p = "pie-card", h = class h extends S {
60
60
  */
61
61
  generatePaddingCSS() {
62
62
  const { padding: r } = this;
63
- let a = "";
63
+ let e = "";
64
64
  if (!r)
65
65
  return "";
66
- const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
67
- return o.length > 0 && o.length <= 2 && (a += `var(--dt-spacing-${o[0]})`, o.length > 1 && (a += ` var(--dt-spacing-${o[1]})`)), a ? `padding: ${a}` : "";
66
+ const t = r.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
67
+ return t.length > 0 && t.length <= 2 && (e += `var(--dt-spacing-${t[0]})`, t.length > 1 && (e += ` var(--dt-spacing-${t[1]})`)), e ? `padding: ${e}` : "";
68
68
  }
69
69
  /**
70
70
  * Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
@@ -80,9 +80,9 @@ const p = "pie-card", h = class h extends S {
80
80
  * @private
81
81
  */
82
82
  updateImagesOpacity() {
83
- this.assignedElements && this.assignedElements.forEach((a) => {
84
- const o = a.querySelectorAll("img");
85
- this.applyOpacityToImages(o);
83
+ this.assignedElements && this.assignedElements.forEach((e) => {
84
+ const t = e.querySelectorAll("img");
85
+ this.applyOpacityToImages(t);
86
86
  });
87
87
  const r = this.querySelectorAll("img");
88
88
  this.applyOpacityToImages(r);
@@ -94,8 +94,8 @@ const p = "pie-card", h = class h extends S {
94
94
  * @private
95
95
  */
96
96
  applyOpacityToImages(r) {
97
- r.forEach((a) => {
98
- a.style.opacity = this.disabled ? "0.5" : "";
97
+ r.forEach((e) => {
98
+ e.style.opacity = this.disabled ? "0.5" : "";
99
99
  });
100
100
  }
101
101
  /**
@@ -109,24 +109,24 @@ const p = "pie-card", h = class h extends S {
109
109
  render() {
110
110
  const {
111
111
  variant: r,
112
- disabled: a,
113
- tag: o,
114
- aria: e,
112
+ disabled: e,
113
+ tag: t,
114
+ aria: a,
115
115
  isDraggable: i
116
116
  } = this, l = this.generatePaddingCSS(), n = {
117
117
  "c-card": !0,
118
118
  [`c-card--${r}`]: !0,
119
119
  "c-card--draggable": i,
120
- "c-card--disabled": a
120
+ "c-card--disabled": e
121
121
  };
122
- return o === "a" ? this.renderAnchor(n) : u`
122
+ return t === "a" ? this.renderAnchor(n) : b`
123
123
  <div
124
- class="${f(n)}"
124
+ class="${h(n)}"
125
125
  data-test-id="pie-card"
126
126
  role="button"
127
- tabindex=${a ? "-1" : "0"}
128
- aria-label=${(e == null ? void 0 : e.label) || g}
129
- aria-disabled=${a ? "true" : "false"}
127
+ tabindex=${e ? "-1" : "0"}
128
+ aria-label=${(a == null ? void 0 : a.label) || g}
129
+ aria-disabled=${e ? "true" : "false"}
130
130
  style=${l || ""}
131
131
  @click=${this.onClickHandler}>
132
132
  <slot @slotchange=${this.handleSlotChange}></slot>
@@ -134,44 +134,44 @@ const p = "pie-card", h = class h extends S {
134
134
  </div>`;
135
135
  }
136
136
  };
137
- h.styles = $(k);
138
- let t = h;
137
+ f.styles = $(k);
138
+ let o = f;
139
139
  c([
140
140
  d({ type: String }),
141
- b(p, O, s.tag)
142
- ], t.prototype, "tag");
141
+ u(p, O, s.tag)
142
+ ], o.prototype, "tag");
143
143
  c([
144
144
  d({ type: String }),
145
- b(p, E, s.variant)
146
- ], t.prototype, "variant");
145
+ u(p, E, s.variant)
146
+ ], o.prototype, "variant");
147
147
  c([
148
148
  d({ type: String, reflect: !0 })
149
- ], t.prototype, "href");
149
+ ], o.prototype, "href");
150
150
  c([
151
151
  d({ type: String, reflect: !0 })
152
- ], t.prototype, "target");
152
+ ], o.prototype, "target");
153
153
  c([
154
154
  d({ type: String, reflect: !0 })
155
- ], t.prototype, "rel");
155
+ ], o.prototype, "rel");
156
156
  c([
157
157
  d({ type: Boolean })
158
- ], t.prototype, "disabled");
158
+ ], o.prototype, "disabled");
159
159
  c([
160
160
  d({ type: Object })
161
- ], t.prototype, "aria");
161
+ ], o.prototype, "aria");
162
162
  c([
163
163
  d({ type: Boolean })
164
- ], t.prototype, "isDraggable");
164
+ ], o.prototype, "isDraggable");
165
165
  c([
166
166
  d({ type: String }),
167
- b(p, D, void 0)
168
- ], t.prototype, "padding");
167
+ u(p, D, void 0)
168
+ ], o.prototype, "padding");
169
169
  c([
170
170
  C({ flatten: !0 })
171
- ], t.prototype, "assignedElements");
172
- x(p, t);
171
+ ], o.prototype, "assignedElements");
172
+ x(p, o);
173
173
  export {
174
- t as PieCard,
174
+ o as PieCard,
175
175
  s as defaultProps,
176
176
  D as paddingValues,
177
177
  O as tags,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-card",
3
- "version": "0.21.3",
3
+ "version": "0.22.0",
4
4
  "description": "PIE Design System Card built using Web Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -37,7 +37,7 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.13.1",
40
+ "@justeattakeaway/pie-css": "0.14.0",
41
41
  "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
42
  "cem-plugin-module-file-extensions": "0.0.5"
43
43
  },
package/src/card.scss CHANGED
@@ -69,7 +69,7 @@
69
69
  --card-bg-color: var(--dt-color-container-inverse);
70
70
  --card-color: var(--dt-color-content-inverse);
71
71
 
72
- box-shadow: var(--dt-elevation-dark-card);
72
+ box-shadow: var(--dt-elevation-inverse-card);
73
73
 
74
74
  @include card-interactive-states('--dt-color-container-inverse', 'inverse');
75
75
  }