@justeattakeaway/pie-checkbox 0.9.0 → 0.11.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/custom-elements.json +9 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +58 -48
- package/dist/react.d.ts +1 -0
- package/package.json +2 -2
- package/src/checkbox.scss +17 -10
- package/src/index.ts +11 -3
package/custom-elements.json
CHANGED
|
@@ -81,6 +81,15 @@
|
|
|
81
81
|
"privacy": "private",
|
|
82
82
|
"default": "false"
|
|
83
83
|
},
|
|
84
|
+
{
|
|
85
|
+
"kind": "field",
|
|
86
|
+
"name": "visuallyHiddenError",
|
|
87
|
+
"type": {
|
|
88
|
+
"text": "boolean"
|
|
89
|
+
},
|
|
90
|
+
"privacy": "private",
|
|
91
|
+
"default": "false"
|
|
92
|
+
},
|
|
84
93
|
{
|
|
85
94
|
"kind": "field",
|
|
86
95
|
"name": "value",
|
package/dist/index.d.ts
CHANGED
|
@@ -62,6 +62,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
62
62
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
63
63
|
};
|
|
64
64
|
private disabledByParent;
|
|
65
|
+
private visuallyHiddenError;
|
|
65
66
|
value: string;
|
|
66
67
|
name?: CheckboxProps['name'];
|
|
67
68
|
checked: boolean;
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { state as
|
|
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
3
|
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
4
4
|
import { live as P } from "lit/directives/live.js";
|
|
5
|
-
import { FormControlMixin as B, RtlMixin as
|
|
5
|
+
import { FormControlMixin as B, RtlMixin as F, wrapNativeEvent as q, validPropertyValues as D, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
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(.7)}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 = {
|
|
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,24 +16,28 @@ const S = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
16
16
|
required: !1,
|
|
17
17
|
status: "default"
|
|
18
18
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var
|
|
21
|
-
(s =
|
|
22
|
-
return a &&
|
|
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;
|
|
23
23
|
};
|
|
24
|
-
const
|
|
25
|
-
class t extends B(
|
|
24
|
+
const g = "pie-checkbox", u = "assistive-text";
|
|
25
|
+
class t extends B(F(m)) {
|
|
26
26
|
constructor() {
|
|
27
|
-
super(...arguments), this.disabledByParent = !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;
|
|
27
|
+
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
28
|
}
|
|
29
29
|
connectedCallback() {
|
|
30
30
|
super.connectedCallback(), this.addEventListener("pie-checkbox-group-disabled", (e) => {
|
|
31
31
|
this.disabledByParent = e.detail.disabled;
|
|
32
|
+
}), this.addEventListener("pie-checkbox-group-error", (e) => {
|
|
33
|
+
this.visuallyHiddenError = e.detail.error;
|
|
32
34
|
});
|
|
33
35
|
}
|
|
34
36
|
disconnectedCallback() {
|
|
35
37
|
super.disconnectedCallback(), this.removeEventListener("pie-checkbox-group-disabled", (e) => {
|
|
36
38
|
this.disabledByParent = e.detail.disabled;
|
|
39
|
+
}), this.removeEventListener("pie-checkbox-group-error", (e) => {
|
|
40
|
+
this.visuallyHiddenError = e.detail.error;
|
|
37
41
|
});
|
|
38
42
|
}
|
|
39
43
|
/**
|
|
@@ -68,7 +72,7 @@ class t extends B(E(f)) {
|
|
|
68
72
|
handleChange(e) {
|
|
69
73
|
const { checked: d } = e == null ? void 0 : e.currentTarget;
|
|
70
74
|
this.checked = d;
|
|
71
|
-
const a =
|
|
75
|
+
const a = q(e);
|
|
72
76
|
this.dispatchEvent(a), this.handleFormAssociation();
|
|
73
77
|
}
|
|
74
78
|
/**
|
|
@@ -88,21 +92,22 @@ class t extends B(E(f)) {
|
|
|
88
92
|
checked: e,
|
|
89
93
|
value: d,
|
|
90
94
|
name: a,
|
|
91
|
-
disabled:
|
|
95
|
+
disabled: r,
|
|
92
96
|
disabledByParent: n,
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
visuallyHiddenError: s,
|
|
98
|
+
required: y,
|
|
99
|
+
indeterminate: p,
|
|
100
|
+
assistiveText: k,
|
|
101
|
+
status: h,
|
|
102
|
+
isRTL: w
|
|
103
|
+
} = this, l = r || n;
|
|
99
104
|
return v`
|
|
100
105
|
<div
|
|
101
106
|
class="c-checkbox"
|
|
102
|
-
data-pie-status=${!l &&
|
|
107
|
+
data-pie-status=${!l && h}
|
|
103
108
|
?data-pie-disabled=${l}
|
|
104
109
|
?data-pie-checked=${e}
|
|
105
|
-
?data-pie-indeterminate=${
|
|
110
|
+
?data-pie-indeterminate=${p && !e}>
|
|
106
111
|
<input
|
|
107
112
|
type="checkbox"
|
|
108
113
|
id="inputId"
|
|
@@ -110,73 +115,78 @@ class t extends B(E(f)) {
|
|
|
110
115
|
.checked=${P(e)}
|
|
111
116
|
name=${x(a)}
|
|
112
117
|
?disabled=${l}
|
|
113
|
-
?required=${
|
|
114
|
-
.indeterminate=${
|
|
115
|
-
aria-
|
|
118
|
+
?required=${y}
|
|
119
|
+
.indeterminate=${p}
|
|
120
|
+
aria-invalid=${h === "error" ? "true" : "false"}
|
|
121
|
+
aria-describedby=${x(k ? u : void 0)}
|
|
116
122
|
@change=${this.handleChange}
|
|
117
123
|
data-test-id="checkbox-input"
|
|
118
124
|
/>
|
|
119
125
|
<label for="inputId" data-test-id="checkbox-component">
|
|
120
126
|
<span
|
|
121
127
|
class="c-checkbox-tick"
|
|
122
|
-
?data-is-rtl=${
|
|
128
|
+
?data-is-rtl=${w}
|
|
123
129
|
?data-pie-checked=${e}
|
|
124
130
|
?data-pie-disabled=${l}
|
|
125
|
-
data-pie-status=${!l &&
|
|
126
|
-
?data-pie-indeterminate=${
|
|
131
|
+
data-pie-status=${!l && h}
|
|
132
|
+
?data-pie-indeterminate=${p && !e}></span>
|
|
127
133
|
<span class="c-checkbox-text">
|
|
128
134
|
<slot></slot>
|
|
129
135
|
</span>
|
|
130
136
|
</label>
|
|
131
|
-
${
|
|
137
|
+
${k ? v`
|
|
132
138
|
<pie-assistive-text
|
|
133
139
|
id="${u}"
|
|
134
|
-
variant=${
|
|
140
|
+
variant=${h}
|
|
141
|
+
?isVisuallyHidden=${s}
|
|
135
142
|
data-test-id="pie-checkbox-assistive-text">
|
|
136
|
-
${
|
|
137
|
-
</pie-assistive-text>` :
|
|
143
|
+
${k}
|
|
144
|
+
</pie-assistive-text>` : $}
|
|
138
145
|
</div>`;
|
|
139
146
|
}
|
|
140
147
|
}
|
|
141
|
-
t.shadowRootOptions = { ...
|
|
142
|
-
t.styles =
|
|
148
|
+
t.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
|
|
149
|
+
t.styles = C(_);
|
|
143
150
|
o([
|
|
144
|
-
|
|
151
|
+
f()
|
|
145
152
|
], t.prototype, "disabledByParent", 2);
|
|
146
153
|
o([
|
|
147
|
-
|
|
154
|
+
f()
|
|
155
|
+
], t.prototype, "visuallyHiddenError", 2);
|
|
156
|
+
o([
|
|
157
|
+
c({ type: String })
|
|
148
158
|
], t.prototype, "value", 2);
|
|
149
159
|
o([
|
|
150
|
-
|
|
160
|
+
c({ type: String })
|
|
151
161
|
], t.prototype, "name", 2);
|
|
152
162
|
o([
|
|
153
|
-
|
|
163
|
+
c({ type: Boolean, reflect: !0 })
|
|
154
164
|
], t.prototype, "checked", 2);
|
|
155
165
|
o([
|
|
156
|
-
|
|
166
|
+
c({ type: Boolean, reflect: !0 })
|
|
157
167
|
], t.prototype, "defaultChecked", 2);
|
|
158
168
|
o([
|
|
159
|
-
|
|
169
|
+
c({ type: Boolean, reflect: !0 })
|
|
160
170
|
], t.prototype, "disabled", 2);
|
|
161
171
|
o([
|
|
162
|
-
|
|
172
|
+
c({ type: Boolean, reflect: !0 })
|
|
163
173
|
], t.prototype, "required", 2);
|
|
164
174
|
o([
|
|
165
|
-
|
|
175
|
+
c({ type: Boolean, reflect: !0 })
|
|
166
176
|
], t.prototype, "indeterminate", 2);
|
|
167
177
|
o([
|
|
168
|
-
|
|
178
|
+
E('input[type="checkbox"]')
|
|
169
179
|
], t.prototype, "checkbox", 2);
|
|
170
180
|
o([
|
|
171
|
-
|
|
181
|
+
c({ type: String })
|
|
172
182
|
], t.prototype, "assistiveText", 2);
|
|
173
183
|
o([
|
|
174
|
-
|
|
175
|
-
|
|
184
|
+
c({ type: String }),
|
|
185
|
+
D(g, z, i.status)
|
|
176
186
|
], t.prototype, "status", 2);
|
|
177
|
-
|
|
187
|
+
S(g, t);
|
|
178
188
|
export {
|
|
179
189
|
t as PieCheckbox,
|
|
180
190
|
i as defaultProps,
|
|
181
|
-
|
|
191
|
+
z as statusTypes
|
|
182
192
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -65,6 +65,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
65
65
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
66
66
|
};
|
|
67
67
|
private disabledByParent;
|
|
68
|
+
private visuallyHiddenError;
|
|
68
69
|
value: string;
|
|
69
70
|
name?: CheckboxProps['name'];
|
|
70
71
|
checked: boolean;
|
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.
|
|
4
|
+
"version": "0.11.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-assistive-text": "0.
|
|
43
|
+
"@justeattakeaway/pie-assistive-text": "0.6.0",
|
|
44
44
|
"@justeattakeaway/pie-webc-core": "0.24.0"
|
|
45
45
|
},
|
|
46
46
|
"volta": {
|
package/src/checkbox.scss
CHANGED
|
@@ -22,8 +22,9 @@
|
|
|
22
22
|
border-color: #fff;
|
|
23
23
|
border-bottom-right-radius: 2px;
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
// had to add 1px to z-axis to fix a bug in Safari
|
|
26
|
+
// that adds a tiny line between check borders
|
|
27
|
+
transform: translate3d(0, -16px, 1px) rotate(45deg);
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
|
|
@@ -67,7 +68,9 @@
|
|
|
67
68
|
background-color: var(--checkbox-bg-color);
|
|
68
69
|
|
|
69
70
|
@media (prefers-reduced-motion: no-preference) {
|
|
70
|
-
transition:
|
|
71
|
+
transition:
|
|
72
|
+
background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
|
|
73
|
+
border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
71
74
|
|
|
72
75
|
animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
73
76
|
}
|
|
@@ -92,8 +95,8 @@
|
|
|
92
95
|
}
|
|
93
96
|
|
|
94
97
|
&[data-pie-status="error"] {
|
|
95
|
-
--checkbox-border-color: var(--dt-color-support-error);
|
|
96
98
|
--checkbox-bg-color: var(--dt-color-support-error);
|
|
99
|
+
--checkbox-border-color: var(--dt-color-support-error);
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
102
|
|
|
@@ -113,7 +116,9 @@
|
|
|
113
116
|
animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
|
|
114
117
|
|
|
115
118
|
@media (prefers-reduced-motion: reduce) {
|
|
116
|
-
animation:
|
|
119
|
+
animation-duration: 1ms !important;
|
|
120
|
+
animation-delay: 0 !important;
|
|
121
|
+
animation-iteration-count: 1 !important;
|
|
117
122
|
width: 8px;
|
|
118
123
|
height: 16px;
|
|
119
124
|
border-color: #fff;
|
|
@@ -226,8 +231,9 @@
|
|
|
226
231
|
&:hover {
|
|
227
232
|
.c-checkbox-tick {
|
|
228
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))));
|
|
229
|
-
|
|
230
|
-
|
|
234
|
+
transition:
|
|
235
|
+
background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),
|
|
236
|
+
border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
|
|
231
237
|
}
|
|
232
238
|
}
|
|
233
239
|
|
|
@@ -235,14 +241,15 @@
|
|
|
235
241
|
.c-checkbox-tick {
|
|
236
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))));
|
|
237
243
|
|
|
238
|
-
transition:
|
|
244
|
+
transition:
|
|
245
|
+
background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
|
|
246
|
+
border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
239
247
|
}
|
|
240
248
|
}
|
|
241
249
|
|
|
242
250
|
&[data-pie-disabled] {
|
|
243
251
|
label {
|
|
244
|
-
cursor:
|
|
245
|
-
pointer-events: none;
|
|
252
|
+
cursor: not-allowed;
|
|
246
253
|
}
|
|
247
254
|
}
|
|
248
255
|
|
package/src/index.ts
CHANGED
|
@@ -21,7 +21,7 @@ import { CheckboxProps, defaultProps, statusTypes } from './defs';
|
|
|
21
21
|
export * from './defs';
|
|
22
22
|
|
|
23
23
|
const componentSelector = 'pie-checkbox';
|
|
24
|
-
const
|
|
24
|
+
const assistiveTextId = 'assistive-text';
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* @tagname pie-checkbox
|
|
@@ -34,6 +34,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
34
34
|
@state()
|
|
35
35
|
private disabledByParent = false;
|
|
36
36
|
|
|
37
|
+
@state()
|
|
38
|
+
private visuallyHiddenError = false;
|
|
39
|
+
|
|
37
40
|
@property({ type: String })
|
|
38
41
|
public value = defaultProps.value;
|
|
39
42
|
|
|
@@ -69,12 +72,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
69
72
|
super.connectedCallback();
|
|
70
73
|
|
|
71
74
|
this.addEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
75
|
+
this.addEventListener('pie-checkbox-group-error', (e: CustomEventInit) => { this.visuallyHiddenError = e.detail.error; });
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
disconnectedCallback () : void {
|
|
75
79
|
super.disconnectedCallback();
|
|
76
80
|
|
|
77
81
|
this.removeEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
82
|
+
this.removeEventListener('pie-checkbox-group-error', (e: CustomEventInit) => { this.visuallyHiddenError = e.detail.error; });
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
/**
|
|
@@ -149,6 +154,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
149
154
|
name,
|
|
150
155
|
disabled,
|
|
151
156
|
disabledByParent,
|
|
157
|
+
visuallyHiddenError,
|
|
152
158
|
required,
|
|
153
159
|
indeterminate,
|
|
154
160
|
assistiveText,
|
|
@@ -174,7 +180,8 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
174
180
|
?disabled=${componentDisabled}
|
|
175
181
|
?required=${required}
|
|
176
182
|
.indeterminate=${indeterminate}
|
|
177
|
-
aria-
|
|
183
|
+
aria-invalid=${status === 'error' ? 'true' : 'false'}
|
|
184
|
+
aria-describedby=${ifDefined(assistiveText ? assistiveTextId : undefined)}
|
|
178
185
|
@change=${this.handleChange}
|
|
179
186
|
data-test-id="checkbox-input"
|
|
180
187
|
/>
|
|
@@ -192,8 +199,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
192
199
|
</label>
|
|
193
200
|
${assistiveText ? html`
|
|
194
201
|
<pie-assistive-text
|
|
195
|
-
id="${
|
|
202
|
+
id="${assistiveTextId}"
|
|
196
203
|
variant=${status}
|
|
204
|
+
?isVisuallyHidden=${visuallyHiddenError}
|
|
197
205
|
data-test-id="pie-checkbox-assistive-text">
|
|
198
206
|
${assistiveText}
|
|
199
207
|
</pie-assistive-text>` : nothing}
|