@justeattakeaway/pie-checkbox 0.12.3 → 0.13.1

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 (5) hide show
  1. package/dist/index.js +84 -81
  2. package/dist/react.js +6 -12
  3. package/package.json +4 -4
  4. package/src/checkbox.scss +83 -51
  5. package/src/index.ts +20 -11
package/dist/index.js CHANGED
@@ -1,11 +1,11 @@
1
- import { LitElement as m, html as v, nothing as $, unsafeCSS as C } from "lit";
2
- import { state as f, property as c, query as E } from "lit/decorators.js";
3
- import { ifDefined as x } from "lit/directives/if-defined.js";
4
- import { live as P } from "lit/directives/live.js";
5
- import { FormControlMixin as B, RtlMixin as F, wrapNativeEvent as q, validPropertyValues as D, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as v, html as u, nothing as F, unsafeCSS as q } from "lit";
2
+ import { classMap as m } from "lit/directives/class-map.js";
3
+ import { state as y, property as t, query as S } from "lit/decorators.js";
4
+ import { ifDefined as f } from "lit/directives/if-defined.js";
5
+ import { live as z } from "lit/directives/live.js";
6
+ import { FormControlMixin as A, RtlMixin as H, wrapNativeEvent as L, validPropertyValues as P, defineCustomElement as T } from "@justeattakeaway/pie-webc-core";
6
7
  import "@justeattakeaway/pie-assistive-text";
7
- const _ = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-disabled]{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick[data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-checked]{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-checked]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-checked][data-pie-status=error]{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-checked]:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick[data-pie-checked]:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick[data-pie-checked]:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick[data-pie-checked][data-is-rtl]:before{left:unset;right:50%}.c-checkbox-tick[data-pie-indeterminate]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-indeterminate][data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error);--checkbox-bg-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-indeterminate]:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-indeterminate]:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick[data-is-rtl]:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: p.font-size(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-interactive-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))));transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox[data-pie-disabled] label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox[data-pie-disabled]:hover .c-checkbox-tick,.c-checkbox[data-pie-disabled]:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox[data-pie-status=error]:hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-status=error]:active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-disabled]):hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))));--checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-status=error]:hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))));--checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-disabled]):active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))));--checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-status=error]:active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))));--checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))))}
8
- `, z = ["default", "success", "error"], i = {
8
+ const D = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: p.font-size(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-interactive-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox.c-checkbox--disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.c-checkbox--disabled:hover .c-checkbox-tick,.c-checkbox.c-checkbox--disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) )}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) )}', R = ["default", "success", "error"], i = {
9
9
  // a default value for the html <input type="checkbox" /> value attribute.
10
10
  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
11
11
  value: "on",
@@ -16,13 +16,12 @@ const _ = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
16
16
  required: !1,
17
17
  status: "default"
18
18
  };
19
- var A = Object.defineProperty, H = Object.getOwnPropertyDescriptor, o = (b, e, d, a) => {
20
- for (var r = a > 1 ? void 0 : a ? H(e, d) : e, n = b.length - 1, s; n >= 0; n--)
21
- (s = b[n]) && (r = (a ? s(e, d, r) : s(r)) || r);
22
- return a && r && A(e, d, r), r;
19
+ var I = Object.defineProperty, o = (p, e, a, s) => {
20
+ for (var r = void 0, d = p.length - 1, l; d >= 0; d--)
21
+ (l = p[d]) && (r = l(e, a, r) || r);
22
+ return r && I(e, a, r), r;
23
23
  };
24
- const g = "pie-checkbox", u = "assistive-text";
25
- class t extends B(F(m)) {
24
+ const w = "pie-checkbox", g = "assistive-text", b = class b extends A(H(v)) {
26
25
  constructor() {
27
26
  super(...arguments), this.disabledByParent = !1, this.visuallyHiddenError = !1, this.value = i.value, this.checked = i.checked, this.defaultChecked = i.defaultChecked, this.disabled = i.disabled, this.required = i.required, this.indeterminate = i.indeterminate, this.status = i.status;
28
27
  }
@@ -70,10 +69,10 @@ class t extends B(F(m)) {
70
69
  * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
71
70
  */
72
71
  handleChange(e) {
73
- const { checked: d } = e == null ? void 0 : e.currentTarget;
74
- this.checked = d;
75
- const a = q(e);
76
- this.dispatchEvent(a), this.handleFormAssociation();
72
+ const { checked: a } = e == null ? void 0 : e.currentTarget;
73
+ this.checked = a;
74
+ const s = L(e);
75
+ this.dispatchEvent(s), this.handleFormAssociation();
77
76
  }
78
77
  /**
79
78
  * Called when the form that contains this component is reset.
@@ -90,103 +89,107 @@ class t extends B(F(m)) {
90
89
  render() {
91
90
  const {
92
91
  checked: e,
93
- value: d,
94
- name: a,
92
+ value: a,
93
+ name: s,
95
94
  disabled: r,
96
- disabledByParent: n,
97
- visuallyHiddenError: s,
98
- required: y,
99
- indeterminate: p,
100
- assistiveText: k,
95
+ disabledByParent: d,
96
+ visuallyHiddenError: l,
97
+ required: C,
98
+ indeterminate: k,
99
+ assistiveText: x,
101
100
  status: h,
102
- isRTL: w
103
- } = this, l = r || n;
104
- return v`
101
+ isRTL: $
102
+ } = this, n = r || d, E = {
103
+ "c-checkbox": !0,
104
+ [`c-checkbox--status-${h}`]: !n,
105
+ "c-checkbox--disabled": n,
106
+ "c-checkbox--checked": e,
107
+ "c-checkbox--indeterminate": k && !e
108
+ }, B = {
109
+ "c-checkbox-tick": !0,
110
+ [`c-checkbox-tick--status-${h}`]: !n,
111
+ "c-checkbox-tick--disabled": n,
112
+ "c-checkbox-tick--checked": e,
113
+ "c-checkbox-tick--indeterminate": k && !e,
114
+ "c-checkbox-tick--rtl": $
115
+ };
116
+ return u`
105
117
  <div
106
- class="c-checkbox"
107
- data-pie-status=${!l && h}
108
- ?data-pie-disabled=${l}
109
- ?data-pie-checked=${e}
110
- ?data-pie-indeterminate=${p && !e}>
118
+ class="${m(E)}">
111
119
  <input
112
120
  type="checkbox"
113
121
  id="inputId"
114
- .value=${d}
115
- .checked=${P(e)}
116
- name=${x(a)}
117
- ?disabled=${l}
118
- ?required=${y}
119
- .indeterminate=${p}
122
+ .value=${a}
123
+ .checked=${z(e)}
124
+ name=${f(s)}
125
+ ?disabled=${n}
126
+ ?required=${C}
127
+ .indeterminate=${k}
120
128
  aria-invalid=${h === "error" ? "true" : "false"}
121
- aria-describedby=${x(k ? u : void 0)}
129
+ aria-describedby=${f(x ? g : void 0)}
122
130
  @change=${this.handleChange}
123
131
  data-test-id="checkbox-input"
124
132
  />
125
133
  <label for="inputId" data-test-id="checkbox-component">
126
134
  <span
127
- class="c-checkbox-tick"
128
- ?data-is-rtl=${w}
129
- ?data-pie-checked=${e}
130
- ?data-pie-disabled=${l}
131
- data-pie-status=${!l && h}
132
- ?data-pie-indeterminate=${p && !e}></span>
135
+ class="${m(B)}"></span>
133
136
  <span class="c-checkbox-text">
134
137
  <slot></slot>
135
138
  </span>
136
139
  </label>
137
- ${k ? v`
140
+ ${x ? u`
138
141
  <pie-assistive-text
139
- id="${u}"
142
+ id="${g}"
140
143
  variant=${h}
141
- ?isVisuallyHidden=${s}
144
+ ?isVisuallyHidden=${l}
142
145
  data-test-id="pie-checkbox-assistive-text">
143
- ${k}
144
- </pie-assistive-text>` : $}
146
+ ${x}
147
+ </pie-assistive-text>` : F}
145
148
  </div>`;
146
149
  }
147
- }
148
- t.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
149
- t.styles = C(_);
150
+ };
151
+ b.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, b.styles = q(D);
152
+ let c = b;
150
153
  o([
151
- f()
152
- ], t.prototype, "disabledByParent", 2);
154
+ y()
155
+ ], c.prototype, "disabledByParent");
153
156
  o([
154
- f()
155
- ], t.prototype, "visuallyHiddenError", 2);
157
+ y()
158
+ ], c.prototype, "visuallyHiddenError");
156
159
  o([
157
- c({ type: String })
158
- ], t.prototype, "value", 2);
160
+ t({ type: String })
161
+ ], c.prototype, "value");
159
162
  o([
160
- c({ type: String })
161
- ], t.prototype, "name", 2);
163
+ t({ type: String })
164
+ ], c.prototype, "name");
162
165
  o([
163
- c({ type: Boolean, reflect: !0 })
164
- ], t.prototype, "checked", 2);
166
+ t({ type: Boolean, reflect: !0 })
167
+ ], c.prototype, "checked");
165
168
  o([
166
- c({ type: Boolean, reflect: !0 })
167
- ], t.prototype, "defaultChecked", 2);
169
+ t({ type: Boolean, reflect: !0 })
170
+ ], c.prototype, "defaultChecked");
168
171
  o([
169
- c({ type: Boolean, reflect: !0 })
170
- ], t.prototype, "disabled", 2);
172
+ t({ type: Boolean, reflect: !0 })
173
+ ], c.prototype, "disabled");
171
174
  o([
172
- c({ type: Boolean, reflect: !0 })
173
- ], t.prototype, "required", 2);
175
+ t({ type: Boolean, reflect: !0 })
176
+ ], c.prototype, "required");
174
177
  o([
175
- c({ type: Boolean, reflect: !0 })
176
- ], t.prototype, "indeterminate", 2);
178
+ t({ type: Boolean, reflect: !0 })
179
+ ], c.prototype, "indeterminate");
177
180
  o([
178
- E('input[type="checkbox"]')
179
- ], t.prototype, "checkbox", 2);
181
+ S('input[type="checkbox"]')
182
+ ], c.prototype, "checkbox");
180
183
  o([
181
- c({ type: String })
182
- ], t.prototype, "assistiveText", 2);
184
+ t({ type: String })
185
+ ], c.prototype, "assistiveText");
183
186
  o([
184
- c({ type: String }),
185
- D(g, z, i.status)
186
- ], t.prototype, "status", 2);
187
- S(g, t);
187
+ t({ type: String }),
188
+ P(w, R, i.status)
189
+ ], c.prototype, "status");
190
+ T(w, c);
188
191
  export {
189
- t as PieCheckbox,
192
+ c as PieCheckbox,
190
193
  i as defaultProps,
191
- z as statusTypes
194
+ R as statusTypes
192
195
  };
package/dist/react.js CHANGED
@@ -1,14 +1,8 @@
1
1
  import * as e from "react";
2
2
  import { createComponent as o } from "@lit/react";
3
3
  import { PieCheckbox as t } from "./index.js";
4
- import { defaultProps as k, statusTypes as P } from "./index.js";
5
- import "lit";
6
- import "lit/decorators.js";
7
- import "lit/directives/if-defined.js";
8
- import "lit/directives/live.js";
9
- import "@justeattakeaway/pie-webc-core";
10
- import "@justeattakeaway/pie-assistive-text";
11
- const r = o({
4
+ import { defaultProps as p, statusTypes as n } from "./index.js";
5
+ const a = o({
12
6
  displayName: "PieCheckbox",
13
7
  elementClass: t,
14
8
  react: e,
@@ -17,9 +11,9 @@ const r = o({
17
11
  onChange: "change"
18
12
  // when checked state is changed.
19
13
  }
20
- }), x = r;
14
+ }), s = a;
21
15
  export {
22
- x as PieCheckbox,
23
- k as defaultProps,
24
- P as statusTypes
16
+ s as PieCheckbox,
17
+ p as defaultProps,
18
+ n as statusTypes
25
19
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox",
3
3
  "description": "PIE Design System Checkbox built using Web Components",
4
- "version": "0.12.3",
4
+ "version": "0.13.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -37,12 +37,12 @@
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.12.1",
40
+ "@justeattakeaway/pie-css": "0.13.0",
41
41
  "cem-plugin-module-file-extensions": "0.0.5"
42
42
  },
43
43
  "dependencies": {
44
- "@justeattakeaway/pie-assistive-text": "0.7.1",
45
- "@justeattakeaway/pie-webc-core": "0.24.0"
44
+ "@justeattakeaway/pie-assistive-text": "0.7.2",
45
+ "@justeattakeaway/pie-webc-core": "0.24.1"
46
46
  },
47
47
  "volta": {
48
48
  "extends": "../../../package.json"
package/src/checkbox.scss CHANGED
@@ -5,14 +5,12 @@
5
5
  width: 0;
6
6
  height: 0;
7
7
  border-color: #fff;
8
-
9
8
  transform: translate3d(0, 0, 0) rotate(45deg);
10
9
  }
11
10
 
12
11
  33% {
13
12
  width: 8px;
14
13
  height: 0;
15
-
16
14
  transform: translate3d(0, 0, 0) rotate(45deg);
17
15
  }
18
16
 
@@ -55,14 +53,10 @@
55
53
  .c-checkbox-tick {
56
54
  content: "";
57
55
  display: flex;
58
-
59
56
  flex: 0 0 auto;
60
-
61
57
  width: var(--checkbox-width);
62
58
  height: var(--checkbox-height);
63
-
64
59
  margin: var(--checkbox-margin);
65
-
66
60
  border: 1px solid var(--checkbox-border-color);
67
61
  border-radius: var(--checkbox-radius);
68
62
  background-color: var(--checkbox-bg-color);
@@ -71,48 +65,43 @@
71
65
  transition:
72
66
  background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
73
67
  border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
74
-
75
68
  animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
76
69
  }
77
70
 
78
- &[data-pie-disabled] {
71
+ &.c-checkbox-tick--disabled {
79
72
  --checkbox-bg-color: var(--dt-color-container-strong);
80
73
  --checkbox-border-color: var(--dt-color-disabled-01);
81
74
  }
82
75
 
83
- &[data-pie-status="error"] {
76
+ &.c-checkbox-tick--status-error {
84
77
  --checkbox-border-color: var(--dt-color-support-error);
85
78
  }
86
79
 
87
- &[data-pie-checked] {
80
+ &.c-checkbox-tick--checked {
88
81
  @media (prefers-reduced-motion: no-preference) {
89
82
  animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
90
83
  }
91
84
 
92
- &:not([data-pie-disabled]) {
85
+ &:not(.c-checkbox-tick--disabled) {
93
86
  --checkbox-bg-color: var(--dt-color-interactive-brand);
94
87
  --checkbox-border-color: var(--dt-color-interactive-brand);
95
88
  }
96
89
 
97
- &[data-pie-status="error"] {
90
+ &.c-checkbox-tick--status-error {
98
91
  --checkbox-bg-color: var(--dt-color-support-error);
99
92
  --checkbox-border-color: var(--dt-color-support-error);
100
93
  }
101
94
  }
102
95
 
103
- &[data-pie-checked]:before {
96
+ &.c-checkbox-tick--checked:before {
104
97
  content: "";
105
-
106
98
  position: relative;
107
99
  top: 55%;
108
100
  left: 14%;
109
-
110
101
  border-right: 2px solid transparent;
111
102
  border-bottom: 2px solid transparent;
112
-
113
103
  transform: rotate(45deg);
114
104
  transform-origin: 0% 100%;
115
-
116
105
  animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
117
106
 
118
107
  @media (prefers-reduced-motion: reduce) {
@@ -123,40 +112,37 @@
123
112
  height: 16px;
124
113
  border-color: #fff;
125
114
  border-bottom-right-radius: 2px;
126
-
127
115
  transform: translate3d(0, -16px, 0) rotate(45deg);
128
116
  }
129
117
 
130
118
  @media only percy {
131
119
  animation: none;
132
-
133
120
  width: 8px;
134
121
  height: 16px;
135
122
  border-color: #fff;
136
123
  border-bottom-right-radius: 2px;
137
-
138
124
  transform: translate3d(0, -16px, 0) rotate(45deg);
139
125
  }
140
126
  }
141
127
 
142
- &[data-pie-checked][data-is-rtl]:before {
128
+ &.c-checkbox-tick--checked.c-checkbox-tick--rtl:before {
143
129
  left: unset;
144
130
  right: 50%;
145
131
  }
146
132
 
147
- &[data-pie-indeterminate] {
148
- &:not([data-pie-disabled]) {
133
+ &.c-checkbox-tick--indeterminate {
134
+ &:not(.c-checkbox-tick--disabled) {
149
135
  --checkbox-bg-color: var(--dt-color-interactive-brand);
150
136
  --checkbox-border-color: var(--dt-color-interactive-brand);
151
137
  }
152
138
 
153
- &[data-pie-status="error"] {
154
- --checkbox-border-color: var(--dt-color-support-error);
139
+ &.c-checkbox-tick--status-error {
155
140
  --checkbox-bg-color: var(--dt-color-support-error);
141
+ --checkbox-border-color: var(--dt-color-support-error);
156
142
  }
157
143
  }
158
144
 
159
- &[data-pie-indeterminate]:after {
145
+ &.c-checkbox-tick--indeterminate:after {
160
146
  width: 16px;
161
147
 
162
148
  @media (prefers-reduced-motion: no-preference) {
@@ -177,10 +163,9 @@
177
163
  font-weight: var(--checkbox-font-weight);
178
164
  }
179
165
 
180
- // initial styles for indeterminate state
166
+ // Initial styles for indeterminate state
181
167
  .c-checkbox-tick:after {
182
168
  content: "";
183
-
184
169
  position: relative;
185
170
  top: 47%;
186
171
  left: 14%;
@@ -189,7 +174,7 @@
189
174
  background-color: white;
190
175
  }
191
176
 
192
- .c-checkbox-tick[data-is-rtl]:after {
177
+ .c-checkbox-tick.c-checkbox-tick--rtl:after {
193
178
  left: unset;
194
179
  right: 14%;
195
180
  }
@@ -230,7 +215,11 @@
230
215
 
231
216
  &:hover {
232
217
  .c-checkbox-tick {
233
- --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
218
+ --checkbox-bg-color: hsl(
219
+ var(--dt-color-container-default-h),
220
+ var(--dt-color-container-default-s),
221
+ calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
222
+ );
234
223
  transition:
235
224
  background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),
236
225
  border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
@@ -239,15 +228,18 @@
239
228
 
240
229
  &:active {
241
230
  .c-checkbox-tick {
242
- --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))));
243
-
231
+ --checkbox-bg-color: hsl(
232
+ var(--dt-color-container-default-h),
233
+ var(--dt-color-container-default-s),
234
+ calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
235
+ );
244
236
  transition:
245
237
  background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
246
238
  border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
247
239
  }
248
240
  }
249
241
 
250
- &[data-pie-disabled] {
242
+ &.c-checkbox--disabled {
251
243
  label {
252
244
  cursor: not-allowed;
253
245
  }
@@ -259,7 +251,7 @@
259
251
  }
260
252
  }
261
253
 
262
- &[data-pie-disabled] {
254
+ &.c-checkbox--disabled {
263
255
  &:hover,
264
256
  &:active {
265
257
  .c-checkbox-tick {
@@ -269,47 +261,87 @@
269
261
  }
270
262
  }
271
263
 
272
- &[data-pie-status="error"] {
264
+ &.c-checkbox--status-error {
273
265
  &:hover {
274
266
  .c-checkbox-tick {
275
- --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
267
+ --checkbox-bg-color: hsl(
268
+ var(--dt-color-container-default-h),
269
+ var(--dt-color-container-default-s),
270
+ calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
271
+ );
276
272
  }
277
273
  }
278
274
 
279
275
  &:active {
280
276
  .c-checkbox-tick {
281
- --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))));
277
+ --checkbox-bg-color: hsl(
278
+ var(--dt-color-container-default-h),
279
+ var(--dt-color-container-default-s),
280
+ calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
281
+ );
282
282
  }
283
283
  }
284
284
  }
285
285
 
286
- &[data-pie-checked],
287
- &[data-pie-indeterminate] {
288
- &:not([data-pie-disabled]):hover {
286
+ &.c-checkbox--checked,
287
+ &.c-checkbox--indeterminate {
288
+ &:not(.c-checkbox--disabled):hover {
289
289
  .c-checkbox-tick {
290
- --checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))));
291
- --checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))));
290
+ --checkbox-bg-color: hsl(
291
+ var(--dt-color-interactive-brand-h),
292
+ var(--dt-color-interactive-brand-s),
293
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
294
+ );
295
+ --checkbox-border-color: hsl(
296
+ var(--dt-color-interactive-brand-h),
297
+ var(--dt-color-interactive-brand-s),
298
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
299
+ );
292
300
  }
293
301
  }
294
302
 
295
- &[data-pie-status="error"]:hover {
303
+ &.c-checkbox--status-error:hover {
296
304
  .c-checkbox-tick {
297
- --checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))));
298
- --checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))));
305
+ --checkbox-bg-color: hsl(
306
+ var(--dt-color-support-error-h),
307
+ var(--dt-color-support-error-s),
308
+ calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
309
+ );
310
+ --checkbox-border-color: hsl(
311
+ var(--dt-color-support-error-h),
312
+ var(--dt-color-support-error-s),
313
+ calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
314
+ );
299
315
  }
300
316
  }
301
317
 
302
- &:not([data-pie-disabled]):active {
318
+ &:not(.c-checkbox--disabled):active {
303
319
  .c-checkbox-tick {
304
- --checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))));
305
- --checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))));
320
+ --checkbox-bg-color: hsl(
321
+ var(--dt-color-interactive-brand-h),
322
+ var(--dt-color-interactive-brand-s),
323
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
324
+ );
325
+ --checkbox-border-color: hsl(
326
+ var(--dt-color-interactive-brand-h),
327
+ var(--dt-color-interactive-brand-s),
328
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
329
+ );
306
330
  }
307
331
  }
308
332
 
309
- &[data-pie-status="error"]:active {
333
+ &.c-checkbox--status-error:active {
310
334
  .c-checkbox-tick {
311
- --checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))));
312
- --checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))));
335
+ --checkbox-bg-color: hsl(
336
+ var(--dt-color-support-error-h),
337
+ var(--dt-color-support-error-s),
338
+ calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
339
+ );
340
+ --checkbox-border-color: hsl(
341
+ var(--dt-color-support-error-h),
342
+ var(--dt-color-support-error-s),
343
+ calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
344
+ );
313
345
  }
314
346
  }
315
347
  }
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
2
  LitElement, html, unsafeCSS, nothing,
3
3
  } from 'lit';
4
+ import { classMap } from 'lit/directives/class-map.js';
4
5
  import { property, query, state } from 'lit/decorators.js';
5
6
  import { ifDefined } from 'lit/directives/if-defined.js';
6
7
  import { live } from 'lit/directives/live.js';
@@ -164,13 +165,26 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
164
165
 
165
166
  const componentDisabled = disabled || disabledByParent;
166
167
 
168
+ const checkboxClasses = {
169
+ 'c-checkbox': true,
170
+ [`c-checkbox--status-${status}`]: !componentDisabled,
171
+ 'c-checkbox--disabled': componentDisabled,
172
+ 'c-checkbox--checked': checked,
173
+ 'c-checkbox--indeterminate': indeterminate && !checked,
174
+ };
175
+
176
+ const labelClasses = {
177
+ 'c-checkbox-tick': true,
178
+ [`c-checkbox-tick--status-${status}`]: !componentDisabled,
179
+ 'c-checkbox-tick--disabled': componentDisabled,
180
+ 'c-checkbox-tick--checked': checked,
181
+ 'c-checkbox-tick--indeterminate': indeterminate && !checked,
182
+ 'c-checkbox-tick--rtl': isRTL,
183
+ };
184
+
167
185
  return html`
168
186
  <div
169
- class="c-checkbox"
170
- data-pie-status=${!componentDisabled && status}
171
- ?data-pie-disabled=${componentDisabled}
172
- ?data-pie-checked=${checked}
173
- ?data-pie-indeterminate=${indeterminate && !checked}>
187
+ class="${classMap(checkboxClasses)}">
174
188
  <input
175
189
  type="checkbox"
176
190
  id="inputId"
@@ -187,12 +201,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
187
201
  />
188
202
  <label for="inputId" data-test-id="checkbox-component">
189
203
  <span
190
- class="c-checkbox-tick"
191
- ?data-is-rtl=${isRTL}
192
- ?data-pie-checked=${checked}
193
- ?data-pie-disabled=${componentDisabled}
194
- data-pie-status=${!componentDisabled && status}
195
- ?data-pie-indeterminate=${indeterminate && !checked}></span>
204
+ class="${classMap(labelClasses)}"></span>
196
205
  <span class="c-checkbox-text">
197
206
  <slot></slot>
198
207
  </span>