@justeattakeaway/pie-checkbox 0.8.0 → 0.10.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/README.md +6 -9
- package/custom-elements.json +14 -15
- package/dist/index.d.ts +3 -6
- package/dist/index.js +54 -44
- package/dist/react.d.ts +3 -6
- package/package.json +2 -2
- package/src/checkbox.scss +11 -1
- package/src/defs.ts +1 -6
- package/src/index.ts +18 -9
package/README.md
CHANGED
|
@@ -77,7 +77,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
|
|
|
77
77
|
| `name` | `string` | - | The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms. |
|
|
78
78
|
| `value` | `string` `'on'` | The value of the input (used as a key/value pair in HTML forms with `name`). If not passed falls back to the html default value "on". |
|
|
79
79
|
| `required` | `boolean` | `false` | If true, the checkbox is required to be checked before submitting the form. If it is not in checked state, the component validity state will be invalid. |
|
|
80
|
-
| `label` | `string` | `''` | Text associated with the checkbox. If there is no label to provide, make sure to pass aria-label, aria-labelledby or aria-describedby attributes instead. |
|
|
81
80
|
| `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
|
|
82
81
|
| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
|
|
83
82
|
| `defaultChecked` | `boolean` | `false` | Sets the default checked state for the checkbox. This does not directly set the initial checked state when the page loads, use `checked` for that. If the checkbox is inside a form which is reset, the `checked` state will be updated to match `defaultChecked`. |
|
|
@@ -89,16 +88,14 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
89
88
|
|
|
90
89
|
```html
|
|
91
90
|
<!-- Native HTML -->
|
|
92
|
-
<pie-checkbox
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
<pie-checkbox name="mycheckbox">Label</pie-checkbox>
|
|
92
|
+
|
|
93
|
+
<!-- Without a label it is necessary to pass aria-label or aria-labelledby attributes to the component -->
|
|
94
|
+
<pie-checkbox name="mycheckbox" aria-label="Label"></pie-checkbox>
|
|
96
95
|
|
|
97
96
|
<!-- JSX -->
|
|
98
|
-
<PieCheckbox
|
|
99
|
-
|
|
100
|
-
label="Checkbox Label">
|
|
101
|
-
</PieCheckbox>
|
|
97
|
+
<PieCheckbox name="mycheckbox">Label</PieCheckbox>
|
|
98
|
+
<PieCheckbox name="mycheckbox" aria-label="Label"></PieCheckbox>
|
|
102
99
|
```
|
|
103
100
|
|
|
104
101
|
## Events
|
package/custom-elements.json
CHANGED
|
@@ -56,6 +56,12 @@
|
|
|
56
56
|
"kind": "class",
|
|
57
57
|
"description": "",
|
|
58
58
|
"name": "PieCheckbox",
|
|
59
|
+
"slots": [
|
|
60
|
+
{
|
|
61
|
+
"description": "Default slot",
|
|
62
|
+
"name": ""
|
|
63
|
+
}
|
|
64
|
+
],
|
|
59
65
|
"members": [
|
|
60
66
|
{
|
|
61
67
|
"kind": "field",
|
|
@@ -77,18 +83,18 @@
|
|
|
77
83
|
},
|
|
78
84
|
{
|
|
79
85
|
"kind": "field",
|
|
80
|
-
"name": "
|
|
81
|
-
"
|
|
82
|
-
|
|
86
|
+
"name": "visuallyHiddenError",
|
|
87
|
+
"type": {
|
|
88
|
+
"text": "boolean"
|
|
89
|
+
},
|
|
90
|
+
"privacy": "private",
|
|
91
|
+
"default": "false"
|
|
83
92
|
},
|
|
84
93
|
{
|
|
85
94
|
"kind": "field",
|
|
86
|
-
"name": "
|
|
87
|
-
"type": {
|
|
88
|
-
"text": "CheckboxProps['label'] | undefined"
|
|
89
|
-
},
|
|
95
|
+
"name": "value",
|
|
90
96
|
"privacy": "public",
|
|
91
|
-
"attribute": "
|
|
97
|
+
"attribute": "value"
|
|
92
98
|
},
|
|
93
99
|
{
|
|
94
100
|
"kind": "field",
|
|
@@ -239,13 +245,6 @@
|
|
|
239
245
|
"name": "value",
|
|
240
246
|
"fieldName": "value"
|
|
241
247
|
},
|
|
242
|
-
{
|
|
243
|
-
"name": "label",
|
|
244
|
-
"type": {
|
|
245
|
-
"text": "CheckboxProps['label'] | undefined"
|
|
246
|
-
},
|
|
247
|
-
"fieldName": "label"
|
|
248
|
-
},
|
|
249
248
|
{
|
|
250
249
|
"name": "name",
|
|
251
250
|
"type": {
|
package/dist/index.d.ts
CHANGED
|
@@ -11,10 +11,6 @@ export declare interface CheckboxProps {
|
|
|
11
11
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
12
12
|
*/
|
|
13
13
|
value?: string;
|
|
14
|
-
/**
|
|
15
|
-
* The label value of the component
|
|
16
|
-
*/
|
|
17
|
-
label?: string;
|
|
18
14
|
/**
|
|
19
15
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
20
16
|
*/
|
|
@@ -50,12 +46,13 @@ export declare interface CheckboxProps {
|
|
|
50
46
|
status?: typeof statusTypes[number];
|
|
51
47
|
}
|
|
52
48
|
|
|
53
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
49
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
54
50
|
|
|
55
51
|
export declare const defaultProps: DefaultProps;
|
|
56
52
|
|
|
57
53
|
/**
|
|
58
54
|
* @tagname pie-checkbox
|
|
55
|
+
* @slot - Default slot
|
|
59
56
|
* @event {CustomEvent} change - when checked state is changed.
|
|
60
57
|
*/
|
|
61
58
|
export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
|
|
@@ -65,8 +62,8 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
65
62
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
66
63
|
};
|
|
67
64
|
private disabledByParent;
|
|
65
|
+
private visuallyHiddenError;
|
|
68
66
|
value: string;
|
|
69
|
-
label?: CheckboxProps['label'];
|
|
70
67
|
name?: CheckboxProps['name'];
|
|
71
68
|
checked: boolean;
|
|
72
69
|
defaultChecked: boolean;
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as f, html as v, nothing as
|
|
2
|
-
import { state as
|
|
1
|
+
import { LitElement as f, html as v, nothing as $, unsafeCSS as C } from "lit";
|
|
2
|
+
import { state as m, 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,0) 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);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-border-color: var(--dt-color-support-error);--checkbox-bg-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:none;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)}.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)}.c-checkbox[data-pie-disabled] label{cursor:default;pointer-events:none}.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 D = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
16
16
|
required: !1,
|
|
17
17
|
status: "default"
|
|
18
18
|
};
|
|
19
|
-
var A = Object.defineProperty,
|
|
20
|
-
for (var r = a > 1 ? void 0 : a ?
|
|
21
|
-
(
|
|
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
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(f)) {
|
|
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,64 +92,70 @@ class t extends B(E(f)) {
|
|
|
88
92
|
checked: e,
|
|
89
93
|
value: d,
|
|
90
94
|
name: a,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
required:
|
|
95
|
-
indeterminate:
|
|
96
|
-
assistiveText:
|
|
97
|
-
status:
|
|
98
|
-
|
|
95
|
+
disabled: r,
|
|
96
|
+
disabledByParent: n,
|
|
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=${!
|
|
103
|
-
?data-pie-disabled=${
|
|
107
|
+
data-pie-status=${!l && h}
|
|
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"
|
|
109
114
|
.value=${d}
|
|
110
115
|
.checked=${P(e)}
|
|
111
116
|
name=${x(a)}
|
|
112
|
-
?disabled=${
|
|
113
|
-
?required=${
|
|
114
|
-
.indeterminate=${
|
|
115
|
-
aria-
|
|
117
|
+
?disabled=${l}
|
|
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"
|
|
128
|
+
?data-is-rtl=${w}
|
|
122
129
|
?data-pie-checked=${e}
|
|
123
|
-
?data-pie-disabled=${
|
|
124
|
-
data-pie-status=${!
|
|
125
|
-
?data-pie-indeterminate=${
|
|
126
|
-
<span class="c-checkbox-text"
|
|
130
|
+
?data-pie-disabled=${l}
|
|
131
|
+
data-pie-status=${!l && h}
|
|
132
|
+
?data-pie-indeterminate=${p && !e}></span>
|
|
133
|
+
<span class="c-checkbox-text">
|
|
134
|
+
<slot></slot>
|
|
135
|
+
</span>
|
|
127
136
|
</label>
|
|
128
|
-
${
|
|
137
|
+
${k ? v`
|
|
129
138
|
<pie-assistive-text
|
|
130
139
|
id="${u}"
|
|
131
|
-
variant=${
|
|
140
|
+
variant=${h}
|
|
141
|
+
?isVisuallyHidden=${s}
|
|
132
142
|
data-test-id="pie-checkbox-assistive-text">
|
|
133
|
-
${
|
|
134
|
-
</pie-assistive-text>` :
|
|
143
|
+
${k}
|
|
144
|
+
</pie-assistive-text>` : $}
|
|
135
145
|
</div>`;
|
|
136
146
|
}
|
|
137
147
|
}
|
|
138
148
|
t.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
|
|
139
|
-
t.styles =
|
|
149
|
+
t.styles = C(_);
|
|
140
150
|
o([
|
|
141
|
-
|
|
151
|
+
m()
|
|
142
152
|
], t.prototype, "disabledByParent", 2);
|
|
143
153
|
o([
|
|
144
|
-
|
|
145
|
-
], t.prototype, "
|
|
154
|
+
m()
|
|
155
|
+
], t.prototype, "visuallyHiddenError", 2);
|
|
146
156
|
o([
|
|
147
157
|
c({ type: String })
|
|
148
|
-
], t.prototype, "
|
|
158
|
+
], t.prototype, "value", 2);
|
|
149
159
|
o([
|
|
150
160
|
c({ type: String })
|
|
151
161
|
], t.prototype, "name", 2);
|
|
@@ -165,18 +175,18 @@ 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
184
|
c({ type: String }),
|
|
175
|
-
|
|
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
|
@@ -12,10 +12,6 @@ export declare interface CheckboxProps {
|
|
|
12
12
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
13
13
|
*/
|
|
14
14
|
value?: string;
|
|
15
|
-
/**
|
|
16
|
-
* The label value of the component
|
|
17
|
-
*/
|
|
18
|
-
label?: string;
|
|
19
15
|
/**
|
|
20
16
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
21
17
|
*/
|
|
@@ -51,7 +47,7 @@ export declare interface CheckboxProps {
|
|
|
51
47
|
status?: typeof statusTypes[number];
|
|
52
48
|
}
|
|
53
49
|
|
|
54
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
50
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
55
51
|
|
|
56
52
|
export declare const defaultProps: DefaultProps;
|
|
57
53
|
|
|
@@ -59,6 +55,7 @@ export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProp
|
|
|
59
55
|
|
|
60
56
|
/**
|
|
61
57
|
* @tagname pie-checkbox
|
|
58
|
+
* @slot - Default slot
|
|
62
59
|
* @event {CustomEvent} change - when checked state is changed.
|
|
63
60
|
*/
|
|
64
61
|
declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
@@ -68,8 +65,8 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
68
65
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
69
66
|
};
|
|
70
67
|
private disabledByParent;
|
|
68
|
+
private visuallyHiddenError;
|
|
71
69
|
value: string;
|
|
72
|
-
label?: CheckboxProps['label'];
|
|
73
70
|
name?: CheckboxProps['name'];
|
|
74
71
|
checked: boolean;
|
|
75
72
|
defaultChecked: 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.10.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
|
@@ -134,6 +134,11 @@
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
+
&[data-pie-checked][data-is-rtl]:before {
|
|
138
|
+
left: unset;
|
|
139
|
+
right: 50%;
|
|
140
|
+
}
|
|
141
|
+
|
|
137
142
|
&[data-pie-indeterminate] {
|
|
138
143
|
&:not([data-pie-disabled]) {
|
|
139
144
|
--checkbox-bg-color: var(--dt-color-interactive-brand);
|
|
@@ -179,13 +184,18 @@
|
|
|
179
184
|
background-color: white;
|
|
180
185
|
}
|
|
181
186
|
|
|
187
|
+
.c-checkbox-tick[data-is-rtl]:after {
|
|
188
|
+
left: unset;
|
|
189
|
+
right: 14%;
|
|
190
|
+
}
|
|
191
|
+
|
|
182
192
|
.c-checkbox {
|
|
183
193
|
--checkbox-height: 24px;
|
|
184
194
|
--checkbox-width: 24px;
|
|
185
195
|
--checkbox-radius: var(--dt-radius-rounded-a);
|
|
186
196
|
--checkbox-margin: 1px;
|
|
187
197
|
--checkbox-gap: var(--dt-spacing-b);
|
|
188
|
-
--checkbox-font-size:
|
|
198
|
+
--checkbox-font-size: p.font-size(--dt-font-body-l-size);
|
|
189
199
|
--checkbox-font-weight: var(--dt-font-weight-regular);
|
|
190
200
|
--checkbox-bg-color: var(--dt-color-container-default);
|
|
191
201
|
--checkbox-border-color: var(--dt-color-interactive-form);
|
package/src/defs.ts
CHANGED
|
@@ -7,11 +7,6 @@ export interface CheckboxProps {
|
|
|
7
7
|
*/
|
|
8
8
|
value?: string;
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
* The label value of the component
|
|
12
|
-
*/
|
|
13
|
-
label?: string;
|
|
14
|
-
|
|
15
10
|
/**
|
|
16
11
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
17
12
|
*/
|
|
@@ -54,7 +49,7 @@ export interface CheckboxProps {
|
|
|
54
49
|
status?: typeof statusTypes[number];
|
|
55
50
|
}
|
|
56
51
|
|
|
57
|
-
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
52
|
+
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
58
53
|
|
|
59
54
|
export const defaultProps: DefaultProps = {
|
|
60
55
|
// a default value for the html <input type="checkbox" /> value attribute.
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
LitElement, html, unsafeCSS,
|
|
2
|
+
LitElement, html, unsafeCSS, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property, query, state } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -21,10 +21,11 @@ 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
|
|
28
|
+
* @slot - Default slot
|
|
28
29
|
* @event {CustomEvent} change - when checked state is changed.
|
|
29
30
|
*/
|
|
30
31
|
export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
|
|
@@ -33,11 +34,11 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
33
34
|
@state()
|
|
34
35
|
private disabledByParent = false;
|
|
35
36
|
|
|
36
|
-
@
|
|
37
|
-
|
|
37
|
+
@state()
|
|
38
|
+
private visuallyHiddenError = false;
|
|
38
39
|
|
|
39
40
|
@property({ type: String })
|
|
40
|
-
public
|
|
41
|
+
public value = defaultProps.value;
|
|
41
42
|
|
|
42
43
|
@property({ type: String })
|
|
43
44
|
public name?: CheckboxProps['name'];
|
|
@@ -71,12 +72,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
71
72
|
super.connectedCallback();
|
|
72
73
|
|
|
73
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; });
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
disconnectedCallback () : void {
|
|
77
79
|
super.disconnectedCallback();
|
|
78
80
|
|
|
79
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; });
|
|
80
83
|
}
|
|
81
84
|
|
|
82
85
|
/**
|
|
@@ -149,13 +152,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
149
152
|
checked,
|
|
150
153
|
value,
|
|
151
154
|
name,
|
|
152
|
-
label,
|
|
153
155
|
disabled,
|
|
154
156
|
disabledByParent,
|
|
157
|
+
visuallyHiddenError,
|
|
155
158
|
required,
|
|
156
159
|
indeterminate,
|
|
157
160
|
assistiveText,
|
|
158
161
|
status,
|
|
162
|
+
isRTL,
|
|
159
163
|
} = this;
|
|
160
164
|
|
|
161
165
|
const componentDisabled = disabled || disabledByParent;
|
|
@@ -176,23 +180,28 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
176
180
|
?disabled=${componentDisabled}
|
|
177
181
|
?required=${required}
|
|
178
182
|
.indeterminate=${indeterminate}
|
|
179
|
-
aria-
|
|
183
|
+
aria-invalid=${status === 'error' ? 'true' : 'false'}
|
|
184
|
+
aria-describedby=${ifDefined(assistiveText ? assistiveTextId : undefined)}
|
|
180
185
|
@change=${this.handleChange}
|
|
181
186
|
data-test-id="checkbox-input"
|
|
182
187
|
/>
|
|
183
188
|
<label for="inputId" data-test-id="checkbox-component">
|
|
184
189
|
<span
|
|
185
190
|
class="c-checkbox-tick"
|
|
191
|
+
?data-is-rtl=${isRTL}
|
|
186
192
|
?data-pie-checked=${checked}
|
|
187
193
|
?data-pie-disabled=${componentDisabled}
|
|
188
194
|
data-pie-status=${!componentDisabled && status}
|
|
189
195
|
?data-pie-indeterminate=${indeterminate && !checked}></span>
|
|
190
|
-
<span class="c-checkbox-text"
|
|
196
|
+
<span class="c-checkbox-text">
|
|
197
|
+
<slot></slot>
|
|
198
|
+
</span>
|
|
191
199
|
</label>
|
|
192
200
|
${assistiveText ? html`
|
|
193
201
|
<pie-assistive-text
|
|
194
|
-
id="${
|
|
202
|
+
id="${assistiveTextId}"
|
|
195
203
|
variant=${status}
|
|
204
|
+
?isVisuallyHidden=${visuallyHiddenError}
|
|
196
205
|
data-test-id="pie-checkbox-assistive-text">
|
|
197
206
|
${assistiveText}
|
|
198
207
|
</pie-assistive-text>` : nothing}
|