@justeattakeaway/pie-radio 0.2.2 → 0.3.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.
Files changed (4) hide show
  1. package/dist/index.js +65 -61
  2. package/package.json +1 -1
  3. package/src/index.ts +17 -11
  4. package/src/radio.scss +143 -0
package/dist/index.js CHANGED
@@ -1,20 +1,21 @@
1
- import { LitElement as u, html as f, unsafeCSS as m } from "lit";
2
- import { property as s, query as y } from "lit/decorators.js";
3
- import { ifDefined as k } from "lit/directives/if-defined.js";
4
- import { live as b } from "lit/directives/live.js";
5
- import { FormControlMixin as v, RtlMixin as C, wrapNativeEvent as g, requiredProperty as q, defineCustomElement as E } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as h, html as b, unsafeCSS as u } from "lit";
2
+ import { property as i, query as f } from "lit/decorators.js";
3
+ import { ifDefined as m } from "lit/directives/if-defined.js";
4
+ import { live as g } from "lit/directives/live.js";
5
+ import { classMap as k } from "lit/directives/class-map.js";
6
+ import { FormControlMixin as y, RtlMixin as z, wrapNativeEvent as x, requiredProperty as C, defineCustomElement as w } from "@justeattakeaway/pie-webc-core";
6
7
  const n = {
7
8
  checked: !1,
8
9
  defaultChecked: !1,
9
10
  disabled: !1,
10
11
  required: !1
11
- }, F = "*,*:after,*:before{box-sizing:inherit}";
12
- var $ = Object.defineProperty, i = (c, e, o, d) => {
13
- for (var r = void 0, a = c.length - 1, h; a >= 0; a--)
14
- (h = c[a]) && (r = h(e, o, r) || r);
15
- return r && $(e, o, r), r;
12
+ }, q = '*,*:after,*:before{box-sizing:inherit}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-interactive-form);--radio-font-size: p.font-size(--dt-font-body-l-size);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio.c-radio--disabled{--radio-cursor: not-allowed}.c-radio input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:transparent;transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing)}.c-radio input[type=radio]:focus{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-radio input[type=radio]:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}@media (prefers-reduced-motion: no-preference){.c-radio input[type=radio]:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.c-radio input[type=radio]:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio input[type=radio]:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio input[type=radio]:checked:before{transform:scale(1)}@media (prefers-reduced-motion: no-preference){.c-radio input[type=radio]:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio input[type=radio]:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.c-radio input[type=radio]:disabled{background-color:var(--dt-color-disabled-01);border-color:var(--dt-color-border-default)}.c-radio input[type=radio]:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}.c-radio input[type=radio]:hover:not(:checked,:disabled){background-color:hsl(var(--dt-color-black-h),var(--dt-color-black-s),var(--dt-color-black-l),var(--dt-color-hover-01))}.c-radio input[type=radio]:active:not(:checked,:disabled){background-color:hsl(var(--dt-color-black-h),var(--dt-color-black-s),var(--dt-color-black-l),var(--dt-color-active-01))}.c-radio input[type=radio]:hover:checked:not(:disabled):before{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)));border-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-radio input[type=radio]:active:checked:not(:disabled):before{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)));border-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)))}';
13
+ var E = Object.defineProperty, a = (p, r, t, c) => {
14
+ for (var e = void 0, d = p.length - 1, l; d >= 0; d--)
15
+ (l = p[d]) && (e = l(r, t, e) || e);
16
+ return e && E(r, t, e), e;
16
17
  };
17
- const p = "pie-radio", l = class l extends v(C(u)) {
18
+ const v = "pie-radio", s = class s extends y(z(h)) {
18
19
  constructor() {
19
20
  super(...arguments), this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.disabled = n.disabled, this.required = n.required;
20
21
  }
@@ -28,11 +29,11 @@ const p = "pie-radio", l = class l extends v(C(u)) {
28
29
  * Captures the native change event and wraps it in a custom event.
29
30
  * @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
30
31
  */
31
- handleChange(e) {
32
- const { checked: o } = e == null ? void 0 : e.currentTarget;
33
- this.checked = o;
34
- const d = g(e);
35
- this.dispatchEvent(d), this.handleFormAssociation();
32
+ handleChange(r) {
33
+ const { checked: t } = r == null ? void 0 : r.currentTarget;
34
+ this.checked = t;
35
+ const c = x(r);
36
+ this.dispatchEvent(c), this.handleFormAssociation();
36
37
  }
37
38
  /**
38
39
  * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -50,62 +51,65 @@ const p = "pie-radio", l = class l extends v(C(u)) {
50
51
  if (this.checked === this.defaultChecked)
51
52
  return;
52
53
  this.checked = this.defaultChecked;
53
- const e = new Event("change", { bubbles: !0, composed: !0 });
54
- this.dispatchEvent(e), this.handleFormAssociation();
54
+ const r = new Event("change", { bubbles: !0, composed: !0 });
55
+ this.dispatchEvent(r), this.handleFormAssociation();
55
56
  }
56
57
  updated() {
57
58
  this.handleFormAssociation();
58
59
  }
59
60
  render() {
60
61
  const {
61
- checked: e,
62
- disabled: o,
63
- name: d,
64
- required: r,
65
- value: a
62
+ checked: r,
63
+ disabled: t,
64
+ name: c,
65
+ required: e,
66
+ value: d
66
67
  } = this;
67
- return f`
68
- <input
69
- type="radio"
70
- id="radioId"
71
- data-test-id="pie-radio"
72
- .checked="${b(e)}"
73
- .value="${a}"
74
- name="${k(d)}"
75
- ?disabled="${o}"
76
- ?required="${r}"
77
- @change="${this.handleChange}">
78
- <label for="radioId">
68
+ return b`
69
+ <label class=${k({
70
+ "c-radio": !0,
71
+ "c-radio--disabled": t
72
+ })} for="radioId">
73
+ <input
74
+ type="radio"
75
+ id="radioId"
76
+ data-test-id="pie-radio"
77
+ .checked="${g(r)}"
78
+ .value="${d}"
79
+ name="${m(c)}"
80
+ ?disabled="${t}"
81
+ ?required="${e}"
82
+ @change="${this.handleChange}">
79
83
  <slot></slot>
80
84
  </label>`;
81
85
  }
82
86
  };
83
- l.styles = m(F);
84
- let t = l;
85
- i([
86
- s({ type: Boolean, reflect: !0 })
87
- ], t.prototype, "checked");
88
- i([
89
- s({ type: Boolean, reflect: !0 })
90
- ], t.prototype, "defaultChecked");
91
- i([
92
- s({ type: Boolean, reflect: !0 })
93
- ], t.prototype, "disabled");
94
- i([
95
- s({ type: String })
96
- ], t.prototype, "name");
97
- i([
98
- s({ type: Boolean, reflect: !0 })
99
- ], t.prototype, "required");
100
- i([
101
- s({ type: String }),
102
- q(p)
103
- ], t.prototype, "value");
104
- i([
105
- y('input[type="radio"]')
106
- ], t.prototype, "radio");
107
- E(p, t);
87
+ s.styles = u(q);
88
+ let o = s;
89
+ a([
90
+ i({ type: Boolean, reflect: !0 })
91
+ ], o.prototype, "checked");
92
+ a([
93
+ i({ type: Boolean, reflect: !0 })
94
+ ], o.prototype, "defaultChecked");
95
+ a([
96
+ i({ type: Boolean, reflect: !0 })
97
+ ], o.prototype, "disabled");
98
+ a([
99
+ i({ type: String })
100
+ ], o.prototype, "name");
101
+ a([
102
+ i({ type: Boolean, reflect: !0 })
103
+ ], o.prototype, "required");
104
+ a([
105
+ i({ type: String }),
106
+ C(v)
107
+ ], o.prototype, "value");
108
+ a([
109
+ f('input[type="radio"]')
110
+ ], o.prototype, "radio");
111
+ w(v, o);
108
112
  export {
109
- t as PieRadio,
113
+ o as PieRadio,
110
114
  n as defaultProps
111
115
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-radio",
3
3
  "description": "PIE Design System Radio built using Web Components",
4
- "version": "0.2.2",
4
+ "version": "0.3.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
package/src/index.ts CHANGED
@@ -2,6 +2,7 @@ import { LitElement, html, unsafeCSS } from 'lit';
2
2
  import { property, query } from 'lit/decorators.js';
3
3
  import { ifDefined } from 'lit/directives/if-defined.js';
4
4
  import { live } from 'lit/directives/live.js';
5
+ import { classMap } from 'lit/directives/class-map.js';
5
6
 
6
7
  import {
7
8
  defineCustomElement, FormControlMixin, requiredProperty, RtlMixin, wrapNativeEvent,
@@ -100,18 +101,23 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
100
101
  checked, disabled, name, required, value,
101
102
  } = this;
102
103
 
104
+ const classes = {
105
+ 'c-radio': true,
106
+ 'c-radio--disabled': disabled,
107
+ };
108
+
103
109
  return html`
104
- <input
105
- type="radio"
106
- id="radioId"
107
- data-test-id="pie-radio"
108
- .checked="${live(checked)}"
109
- .value="${value}"
110
- name="${ifDefined(name)}"
111
- ?disabled="${disabled}"
112
- ?required="${required}"
113
- @change="${this.handleChange}">
114
- <label for="radioId">
110
+ <label class=${classMap(classes)} for="radioId">
111
+ <input
112
+ type="radio"
113
+ id="radioId"
114
+ data-test-id="pie-radio"
115
+ .checked="${live(checked)}"
116
+ .value="${value}"
117
+ name="${ifDefined(name)}"
118
+ ?disabled="${disabled}"
119
+ ?required="${required}"
120
+ @change="${this.handleChange}">
115
121
  <slot></slot>
116
122
  </label>`;
117
123
  }
package/src/radio.scss CHANGED
@@ -1 +1,144 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
+
3
+ .c-radio {
4
+ --radio-dot-bg-color: var(--dt-color-content-interactive-primary);
5
+ --radio-bg-color: transparent;
6
+ --radio-bg-color--checked: var(--dt-color-interactive-brand);
7
+ --radio-border-color: var(--dt-color-interactive-form);
8
+ --radio-font-size: p.font-size(--dt-font-body-l-size);
9
+ --radio-font-weight: var(--dt-font-weight-regular);
10
+ --radio-text-color: var(--dt-color-content-default);
11
+ --radio-size: 24px;
12
+ --radio-dot-size: 8px;
13
+ --radio-cursor: pointer;
14
+ --radio-motion-easing: var(--dt-motion-easing-persistent-functional);
15
+ --radio-border-width: 1px;
16
+
17
+ display: flex;
18
+ align-items: center;
19
+ gap: var(--dt-spacing-b);
20
+ cursor: var(--radio-cursor);
21
+ font-size: var(--radio-font-size);
22
+ font-weight: var(--radio-font-weight);
23
+ color: var(--radio-text-color);
24
+
25
+ &.c-radio--disabled {
26
+ --radio-cursor: not-allowed;
27
+ }
28
+
29
+ input[type="radio"] {
30
+ appearance: none;
31
+ display: block;
32
+ position: relative;
33
+ inline-size: var(--radio-size);
34
+ block-size: var(--radio-size);
35
+ border: var(--radio-border-width) solid var(--radio-border-color);
36
+ border-radius: 50%;
37
+ margin: 0;
38
+ cursor: var(--radio-cursor);
39
+ background-color: transparent;
40
+ transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
41
+
42
+ &:focus {
43
+ @include p.focus;
44
+ }
45
+
46
+ // The filled circle before checking the radio
47
+ &:before {
48
+ --circle-size: calc(var(--radio-border-width) * -1);
49
+
50
+ content: '';
51
+ display: block;
52
+ inset: var(--circle-size);
53
+ border-radius: inherit;
54
+ background-color: var(--radio-bg-color--checked);
55
+ position: absolute;
56
+ transform: scale(0);
57
+ }
58
+
59
+ &:not(:disabled):before {
60
+ @media (prefers-reduced-motion: no-preference) {
61
+ transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
62
+ }
63
+ }
64
+
65
+ // The dot in the middle before checking the radio
66
+ &:after {
67
+ content: '';
68
+ position: absolute;
69
+ top: 50%;
70
+ left: 50%;
71
+ width: var(--radio-dot-size);
72
+ height: var(--radio-dot-size);
73
+ background-color: var(--radio-dot-bg-color);
74
+ border-radius: 50%;
75
+ transform: translate(-50%, -50%) scale(0);
76
+ }
77
+
78
+ &:checked {
79
+ // The dot in the middle after checking the radio
80
+ &:after {
81
+ transform: translate(-50%, -50%) scale(1);
82
+ }
83
+
84
+ // The filled circle after checking the radio
85
+ &:before {
86
+ transform: scale(1);
87
+ }
88
+ }
89
+
90
+ // Scales down at 100ms when unchecked
91
+ &:not(:disabled):after {
92
+ @media (prefers-reduced-motion: no-preference) {
93
+ transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
94
+ }
95
+ }
96
+
97
+ // Scales up at 150ms when checked
98
+ &:not(:disabled):checked:after {
99
+ @media (prefers-reduced-motion: no-preference) {
100
+ transition: all var(--dt-motion-timing-150) var(--radio-motion-easing);
101
+ }
102
+ }
103
+
104
+ &:disabled {
105
+ background-color: var(--dt-color-disabled-01);
106
+ border-color: var(--dt-color-border-default);
107
+ }
108
+
109
+ &:checked:disabled {
110
+ --radio-dot-bg-color: var(--dt-color-content-disabled);
111
+ --radio-bg-color--checked: var(--dt-color-disabled-01);
112
+ }
113
+
114
+ &:hover:not(:checked, :disabled) {
115
+ background-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
116
+ }
117
+
118
+ &:active:not(:checked, :disabled) {
119
+ background-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
120
+ }
121
+
122
+ &:hover:checked:not(:disabled) {
123
+ &:before {
124
+ background-color: hsl(var(--dt-color-interactive-brand-h),
125
+ var(--dt-color-interactive-brand-s),
126
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));
127
+ border-color: hsl(var(--dt-color-interactive-brand-h),
128
+ var(--dt-color-interactive-brand-s),
129
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));
130
+ }
131
+ }
132
+
133
+ &:active:checked:not(:disabled) {
134
+ &:before {
135
+ background-color: hsl(var(--dt-color-interactive-brand-h),
136
+ var(--dt-color-interactive-brand-s),
137
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));
138
+ border-color: hsl(var(--dt-color-interactive-brand-h),
139
+ var(--dt-color-interactive-brand-s),
140
+ calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));
141
+ }
142
+ }
143
+ }
144
+ }