@justeattakeaway/pie-switch 0.16.0 → 0.17.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 +9 -2
- 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
|
|
|
@@ -74,6 +75,12 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
74
75
|
<PieSwitch></PieSwitch>
|
|
75
76
|
```
|
|
76
77
|
|
|
78
|
+
## Events
|
|
79
|
+
|
|
80
|
+
| Event | Payload | Description |
|
|
81
|
+
| ----- |-----| ----- |
|
|
82
|
+
| `pie-switch-changed` | `this.isChecked` | Custom event to indicate a switch change. The event's detail contains the value of this.isChecked. |
|
|
83
|
+
|
|
77
84
|
## Contributing
|
|
78
85
|
|
|
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).
|
|
86
|
+
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] {
|