@justeattakeaway/pie-switch 0.16.0 → 0.17.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.
- package/README.md +25 -4
- package/dist/index.js +1 -1
- package/dist/react.js +38 -37
- package/package.json +1 -1
- package/src/switch.scss +3 -9
package/README.md
CHANGED
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
3. [Importing the component](#importing-the-component)
|
|
16
16
|
4. [Peer Dependencies](#peer-dependencies)
|
|
17
17
|
5. [Props](#props)
|
|
18
|
-
6. [
|
|
18
|
+
6. [Events](#Events)
|
|
19
|
+
7. [Contributing](#contributing)
|
|
19
20
|
|
|
20
21
|
## pie-switch
|
|
21
22
|
|
|
@@ -41,14 +42,28 @@ For full information on using PIE components as part of an application, check ou
|
|
|
41
42
|
|
|
42
43
|
### Importing the component
|
|
43
44
|
|
|
45
|
+
#### JavaScript
|
|
44
46
|
```js
|
|
45
|
-
//
|
|
47
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
46
48
|
import { PieSwitch } from '@justeattakeaway/pie-switch';
|
|
47
49
|
|
|
48
|
-
//
|
|
50
|
+
// If you don't need to reference the imported object, you can simply
|
|
51
|
+
// import the module which registers the component as a custom element.
|
|
52
|
+
import '@justeattakeaway/pie-switch';
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
#### React
|
|
56
|
+
```js
|
|
57
|
+
// React
|
|
58
|
+
// For React, you will need to import our React-specific component build
|
|
59
|
+
// which wraps the web component using @lit-labs/react
|
|
49
60
|
import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
|
|
50
61
|
```
|
|
51
62
|
|
|
63
|
+
> [!NOTE]
|
|
64
|
+
> When using the React version of the component, please make sure to also
|
|
65
|
+
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
66
|
+
|
|
52
67
|
|
|
53
68
|
## Peer Dependencies
|
|
54
69
|
|
|
@@ -74,6 +89,12 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
74
89
|
<PieSwitch></PieSwitch>
|
|
75
90
|
```
|
|
76
91
|
|
|
92
|
+
## Events
|
|
93
|
+
|
|
94
|
+
| Event | Payload | Description |
|
|
95
|
+
| ----- |-----| ----- |
|
|
96
|
+
| `pie-switch-changed` | `this.isChecked` | Custom event to indicate a switch change. The event's detail contains the value of this.isChecked. |
|
|
97
|
+
|
|
77
98
|
## Contributing
|
|
78
99
|
|
|
79
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
100
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/dist/index.js
CHANGED
|
@@ -35,7 +35,7 @@ const _ = (c) => {
|
|
|
35
35
|
function S(c, e) {
|
|
36
36
|
customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, e);
|
|
37
37
|
}
|
|
38
|
-
const T = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{
|
|
38
|
+
const T = `*,*:before,*:after{box-sizing:border-box;cursor:inherit}.c-switch-wrapper{display:inline-flex;align-items:center;gap:var(--dt-spacing-b);font-family:var(--dt-font-body-l-family);cursor:pointer}.c-switch-wrapper[isDisabled]{cursor:not-allowed}.c-switch{--switch-bg-color: var(--dt-color-interactive-form);--switch-bg-color--checked: var(--dt-color-interactive-brand);--switch-bg-color--disabled: var(--dt-color-disabled-01);--switch-width: 48px;--switch-height: 24px;--switch-control-size: 20px;--switch-padding: 2px;--switch-radius: var(--dt-radius-rounded-e);--switch-translation: calc(var(--switch-width) - var(--switch-control-size) - 2 * var(--switch-padding));position:relative;display:flex;width:var(--switch-width);height:var(--switch-height);flex-shrink:0;padding:var(--switch-padding);border-radius:var(--switch-radius);background-color:var(--switch-bg-color)}@media (prefers-reduced-motion: no-preference){.c-switch{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch:hover{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-hover-01)))}.c-switch:focus,.c-switch:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-switch:active{background-color:hsl(var(--dt-color-interactive-form-h),var(--dt-color-interactive-form-s),calc(var(--dt-color-interactive-form-l) - var(--dt-color-active-01)))}.c-switch[isChecked]{background-color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch[isChecked]{transition:background-color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch[isChecked]:hover{background-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-switch[isChecked]:focus,.c-switch[isChecked]:focus-within{background-color:var(--switch-bg-color--checked)}.c-switch[isChecked]:active{background-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)))}[isDisabled] .c-switch{background-color:var(--switch-bg-color--disabled);pointer-events:none}.c-switch-input{appearance:none;margin:0}.c-switch-input:disabled{background-color:transparent}.c-switch-control{position:absolute;left:2px;width:var(--switch-control-size);height:var(--switch-control-size);border-radius:var(--switch-radius);background-color:var(--dt-color-interactive-light);padding:var(--switch-padding)}@media (prefers-reduced-motion: no-preference){.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control{transform:translate(var(--switch-translation))}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:checked+.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--checked)}@media (prefers-reduced-motion: no-preference){.c-switch-input:checked+.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-input:disabled~.c-switch-control{color:var(--switch-bg-color--disabled)}.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{color:var(--switch-bg-color--disabled)}@media (prefers-reduced-motion: no-preference){.c-switch-input:disabled~.c-switch-control .c-pieIcon--check{transition:color .15s cubic-bezier(.4,0,.9,1) 0s}}.c-switch-description{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}.c-switch-wrapper[isRTL] .c-switch-control{position:absolute;left:initial;right:2px}.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transform:translate(calc(-1 * var(--switch-translation)))}@media (prefers-reduced-motion: no-preference){.c-switch-wrapper[isRTL] .c-switch-input:checked+.c-switch-control{transition:transform .15s cubic-bezier(.4,0,.9,1) 0s}}
|
|
39
39
|
`, O = ["leading", "trailing"], j = "pie-switch-changed";
|
|
40
40
|
function D(c, e) {
|
|
41
41
|
customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, e);
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as E from "react";
|
|
2
2
|
import { PieSwitch as g } from "./index.js";
|
|
3
|
-
import { ON_SWITCH_CHANGED_EVENT as
|
|
3
|
+
import { ON_SWITCH_CHANGED_EVENT as G, labelPlacements as L } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
6
|
/**
|
|
@@ -8,59 +8,60 @@ import "lit/decorators.js";
|
|
|
8
8
|
* Copyright 2018 Google LLC
|
|
9
9
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
10
|
*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
})(
|
|
11
|
+
const S = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), y = /* @__PURE__ */ new WeakMap(), C = (t, i, h, d, m) => {
|
|
12
|
+
const o = m == null ? void 0 : m[i];
|
|
13
|
+
o === void 0 || h === d ? h == null && i in HTMLElement.prototype ? t.removeAttribute(i) : t[i] = h : ((a, n, p) => {
|
|
14
|
+
let r = y.get(a);
|
|
15
|
+
r === void 0 && y.set(a, r = /* @__PURE__ */ new Map());
|
|
16
|
+
let l = r.get(n);
|
|
17
|
+
p !== void 0 ? l === void 0 ? (r.set(n, l = { handleEvent: p }), a.addEventListener(n, l)) : l.handleEvent = p : l !== void 0 && (r.delete(n), a.removeEventListener(n, l));
|
|
18
|
+
})(t, o, h);
|
|
19
|
+
}, P = (t, i) => {
|
|
20
|
+
typeof t == "function" ? t(i) : t.current = i;
|
|
19
21
|
};
|
|
20
|
-
function
|
|
21
|
-
let
|
|
22
|
-
if (
|
|
23
|
-
const
|
|
24
|
-
({ tagName:
|
|
22
|
+
function b(t = window.React, i, h, d, m) {
|
|
23
|
+
let o, a, n;
|
|
24
|
+
if (i === void 0) {
|
|
25
|
+
const c = t;
|
|
26
|
+
({ tagName: a, elementClass: n, events: d, displayName: m } = c), o = c.react;
|
|
25
27
|
} else
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
class f extends
|
|
28
|
+
o = t, n = h, a = i;
|
|
29
|
+
const p = o.Component, r = o.createElement, l = new Set(Object.keys(d ?? {}));
|
|
30
|
+
class f extends p {
|
|
29
31
|
constructor() {
|
|
30
32
|
super(...arguments), this.o = null;
|
|
31
33
|
}
|
|
32
34
|
t(e) {
|
|
33
35
|
if (this.o !== null)
|
|
34
|
-
for (const
|
|
35
|
-
|
|
36
|
+
for (const u in this.i)
|
|
37
|
+
C(this.o, u, this.props[u], e ? e[u] : void 0, d);
|
|
36
38
|
}
|
|
37
39
|
componentDidMount() {
|
|
38
|
-
|
|
40
|
+
var e;
|
|
41
|
+
this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
|
|
39
42
|
}
|
|
40
43
|
componentDidUpdate(e) {
|
|
41
44
|
this.t(e);
|
|
42
45
|
}
|
|
43
46
|
render() {
|
|
44
|
-
const { _$Gl: e, ...
|
|
45
|
-
this.h !== e && (this.u = (
|
|
46
|
-
e !== null && (
|
|
47
|
-
typeof c == "function" ? c(y) : c.current = y;
|
|
48
|
-
})(e, i), this.o = i, this.h = e;
|
|
47
|
+
const { _$Gl: e, ...u } = this.props;
|
|
48
|
+
this.h !== e && (this.u = (s) => {
|
|
49
|
+
e !== null && P(e, s), this.o = s, this.h = e;
|
|
49
50
|
}), this.i = {};
|
|
50
|
-
const
|
|
51
|
-
for (const [
|
|
52
|
-
|
|
53
|
-
return
|
|
51
|
+
const v = { ref: this.u };
|
|
52
|
+
for (const [s, w] of Object.entries(u))
|
|
53
|
+
S.has(s) ? v[s === "className" ? "class" : s] = w : l.has(s) || s in n.prototype ? this.i[s] = w : v[s] = w;
|
|
54
|
+
return v.suppressHydrationWarning = !0, r(a, v);
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
|
-
f.displayName =
|
|
57
|
-
const N =
|
|
57
|
+
f.displayName = m ?? n.name;
|
|
58
|
+
const N = o.forwardRef((c, e) => r(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
58
59
|
return N.displayName = f.displayName, N;
|
|
59
60
|
}
|
|
60
|
-
const
|
|
61
|
+
const x = b({
|
|
61
62
|
displayName: "PieSwitch",
|
|
62
63
|
elementClass: g,
|
|
63
|
-
react:
|
|
64
|
+
react: E,
|
|
64
65
|
tagName: "pie-switch",
|
|
65
66
|
events: {
|
|
66
67
|
onPieSwitchChanged: "pie-switch-changed"
|
|
@@ -68,7 +69,7 @@ const D = _({
|
|
|
68
69
|
}
|
|
69
70
|
});
|
|
70
71
|
export {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
G as ON_SWITCH_CHANGED_EVENT,
|
|
73
|
+
x as PieSwitch,
|
|
74
|
+
L as labelPlacements
|
|
74
75
|
};
|
package/package.json
CHANGED
package/src/switch.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use '@
|
|
1
|
+
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
2
|
|
|
3
3
|
@mixin switch-transition($property) {
|
|
4
4
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -53,8 +53,7 @@
|
|
|
53
53
|
|
|
54
54
|
&:focus,
|
|
55
55
|
&:focus-within {
|
|
56
|
-
|
|
57
|
-
box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
|
|
56
|
+
@include p.focus;
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
&:active {
|
|
@@ -126,12 +125,7 @@
|
|
|
126
125
|
|
|
127
126
|
// The description is only required for screen readers so we need to visually hide the description
|
|
128
127
|
.c-switch-description {
|
|
129
|
-
|
|
130
|
-
left: -9999px;
|
|
131
|
-
top: auto;
|
|
132
|
-
width: 1px;
|
|
133
|
-
height: 1px;
|
|
134
|
-
overflow: hidden;
|
|
128
|
+
@include p.visually-hidden;
|
|
135
129
|
}
|
|
136
130
|
|
|
137
131
|
.c-switch-wrapper[isRTL] {
|