@justeattakeaway/pie-checkbox 0.10.0 → 0.12.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 +4 -71
- package/dist/index.js +7 -7
- package/package.json +4 -3
- package/src/checkbox.scss +17 -10
package/README.md
CHANGED
|
@@ -8,16 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-checkbox)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Events](#events)
|
|
19
|
-
7. [Contributing](#contributing)
|
|
20
|
-
|
|
21
11
|
## pie-checkbox
|
|
22
12
|
|
|
23
13
|
`pie-checkbox` is a Web Component built using the Lit library.
|
|
@@ -38,70 +28,13 @@ $ yarn add @justeattakeaway/pie-checkbox
|
|
|
38
28
|
|
|
39
29
|
For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
|
|
40
30
|
|
|
31
|
+
## Documentation
|
|
41
32
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
#### JavaScript
|
|
45
|
-
```js
|
|
46
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
|
-
import { PieCheckbox } from '@justeattakeaway/pie-checkbox';
|
|
48
|
-
|
|
49
|
-
// If you don't need to reference the imported object, you can simply
|
|
50
|
-
// import the module which registers the component as a custom element.
|
|
51
|
-
import '@justeattakeaway/pie-checkbox';
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
#### React
|
|
55
|
-
```js
|
|
56
|
-
// React
|
|
57
|
-
// For React, you will need to import our React-specific component build
|
|
58
|
-
// which wraps the web component using @lit/react
|
|
59
|
-
import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
> [!NOTE]
|
|
63
|
-
> When using the React version of the component, please make sure to also
|
|
64
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
65
|
-
|
|
33
|
+
Visit [Checkbox | PIE Design System](https://pie.design/components/checkbox/code) to view more information on this component.
|
|
66
34
|
|
|
67
|
-
##
|
|
68
|
-
|
|
69
|
-
> [!IMPORTANT]
|
|
70
|
-
> When using `pie-checkbox`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
## Props
|
|
74
|
-
|
|
75
|
-
| Property | Type | Default | Description |
|
|
76
|
-
|---|---|---|---|
|
|
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
|
-
| `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
|
-
| `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
|
-
| `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
|
|
81
|
-
| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
|
|
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`. |
|
|
83
|
-
| `indeterminate` | `boolean` | `false` | Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick. It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state. |
|
|
84
|
-
| `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox element. |
|
|
85
|
-
| `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
|
|
86
|
-
|
|
87
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<!-- Native HTML -->
|
|
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>
|
|
95
|
-
|
|
96
|
-
<!-- JSX -->
|
|
97
|
-
<PieCheckbox name="mycheckbox">Label</PieCheckbox>
|
|
98
|
-
<PieCheckbox name="mycheckbox" aria-label="Label"></PieCheckbox>
|
|
99
|
-
```
|
|
35
|
+
## Questions
|
|
100
36
|
|
|
101
|
-
|
|
102
|
-
| Event | Type | Description |
|
|
103
|
-
|-------|------|-------------|
|
|
104
|
-
| `change` | `CustomEvent` | Triggered after the checked state of a checkbox changes. |
|
|
37
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
105
38
|
|
|
106
39
|
## Contributing
|
|
107
40
|
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
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
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 _ = `*,*: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,
|
|
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
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
|
|
@@ -22,7 +22,7 @@ var A = Object.defineProperty, H = Object.getOwnPropertyDescriptor, o = (b, e, d
|
|
|
22
22
|
return a && r && A(e, d, r), r;
|
|
23
23
|
};
|
|
24
24
|
const g = "pie-checkbox", u = "assistive-text";
|
|
25
|
-
class t extends B(F(
|
|
25
|
+
class t extends B(F(m)) {
|
|
26
26
|
constructor() {
|
|
27
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
|
}
|
|
@@ -145,13 +145,13 @@ class t extends B(F(f)) {
|
|
|
145
145
|
</div>`;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
-
t.shadowRootOptions = { ...
|
|
148
|
+
t.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
|
|
149
149
|
t.styles = C(_);
|
|
150
150
|
o([
|
|
151
|
-
|
|
151
|
+
f()
|
|
152
152
|
], t.prototype, "disabledByParent", 2);
|
|
153
153
|
o([
|
|
154
|
-
|
|
154
|
+
f()
|
|
155
155
|
], t.prototype, "visuallyHiddenError", 2);
|
|
156
156
|
o([
|
|
157
157
|
c({ type: String })
|
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.12.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -36,11 +36,12 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
39
|
+
"@justeattakeaway/pie-components-config": "0.17.0",
|
|
40
|
+
"@justeattakeaway/pie-css": "0.12.1",
|
|
40
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-assistive-text": "0.6.
|
|
44
|
+
"@justeattakeaway/pie-assistive-text": "0.6.1",
|
|
44
45
|
"@justeattakeaway/pie-webc-core": "0.24.0"
|
|
45
46
|
},
|
|
46
47
|
"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
|
|