@justeattakeaway/pie-checkbox-group 0.3.0 → 0.5.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 (11) hide show
  1. package/README.md +8 -2
  2. package/custom-elements.json +65 -14
  3. package/dist/index.d.ts +20 -7
  4. package/dist/index.js +88 -61
  5. package/dist/react.d.ts +21 -7
  6. package/dist/react.js +8 -5
  7. package/package.json +2 -2
  8. package/src/checkbox-group.scss +19 -18
  9. package/src/defs.ts +1 -5
  10. package/src/index.ts +43 -16
  11. package/src/react.ts +2 -0
package/README.md CHANGED
@@ -76,12 +76,10 @@ import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react
76
76
  | Property | Type | Default | Description |
77
77
  |---|---|---|---|
78
78
  | `name` | string | - | The name associated with the group. |
79
- | `label` | string | - | The label value of the component |
80
79
  | `disabled` | boolean | - | Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. |
81
80
  | `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox group. |
82
81
  | `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox group / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
83
82
 
84
-
85
83
  In your markup or JSX, you can then use these to set the properties for the `pie-checkbox-group` component:
86
84
 
87
85
  ```html
@@ -100,10 +98,18 @@ In your markup or JSX, you can then use these to set the properties for the `pie
100
98
  </PieCheckboxGroup>
101
99
  ```
102
100
 
101
+ ## Slots
102
+
103
+ | Slot | Description |
104
+ |---|---|
105
+ | `default` | Pass PieCheckbox components as direct children for the CheckboxGroup. |
106
+ | `label` | Pass PieFormLabel to render the checkbox group label. |
107
+
103
108
  ## Events
104
109
  | Event | Type | Description |
105
110
  |-------|------|-------------|
106
111
  | `pie-checkbox-group-disabled` | `CustomEvent` | Triggered after the disabled state of the checkbox group changes. |
112
+ | `pie-checkbox-group-error` | `CustomEvent` | Triggered after the state of the checkbox group changes to error. |
107
113
 
108
114
  ## Contributing
109
115
 
package/custom-elements.json CHANGED
@@ -29,6 +29,14 @@
29
29
  "default": "'pie-checkbox-group-disabled'",
30
30
  "description": "Event name for when checkbox group becomes disabled."
31
31
  },
32
+ {
33
+ "kind": "variable",
34
+ "name": "ON_CHECKBOX_GROUP_ERROR",
35
+ "type": {
36
+ "text": "string"
37
+ },
38
+ "default": "'pie-checkbox-group-error'"
39
+ },
32
40
  {
33
41
  "kind": "variable",
34
42
  "name": "defaultProps",
@@ -55,6 +63,14 @@
55
63
  "module": "src/defs.js"
56
64
  }
57
65
  },
66
+ {
67
+ "kind": "js",
68
+ "name": "ON_CHECKBOX_GROUP_ERROR",
69
+ "declaration": {
70
+ "name": "ON_CHECKBOX_GROUP_ERROR",
71
+ "module": "src/defs.js"
72
+ }
73
+ },
58
74
  {
59
75
  "kind": "js",
60
76
  "name": "defaultProps",
@@ -77,26 +93,29 @@
77
93
  {
78
94
  "description": "Default slot",
79
95
  "name": ""
96
+ },
97
+ {
98
+ "description": "The label slot",
99
+ "name": "label"
80
100
  }
81
101
  ],
82
102
  "members": [
83
103
  {
84
104
  "kind": "field",
85
- "name": "name",
105
+ "name": "hasLabel",
86
106
  "type": {
87
- "text": "CheckboxGroupProps['name'] | undefined"
107
+ "text": "boolean"
88
108
  },
89
- "privacy": "public",
90
- "attribute": "name"
109
+ "default": "false"
91
110
  },
92
111
  {
93
112
  "kind": "field",
94
- "name": "label",
113
+ "name": "name",
95
114
  "type": {
96
- "text": "CheckboxGroupProps['label'] | undefined"
115
+ "text": "CheckboxGroupProps['name'] | undefined"
97
116
  },
98
117
  "privacy": "public",
99
- "attribute": "label"
118
+ "attribute": "name"
100
119
  },
101
120
  {
102
121
  "kind": "field",
@@ -129,6 +148,13 @@
129
148
  {
130
149
  "kind": "field",
131
150
  "name": "_slottedChildren",
151
+ "type": {
152
+ "text": "Array<HTMLElement> | undefined"
153
+ }
154
+ },
155
+ {
156
+ "kind": "field",
157
+ "name": "_labelSlot",
132
158
  "type": {
133
159
  "text": "Array<HTMLElement>"
134
160
  }
@@ -152,6 +178,31 @@
152
178
  "text": "void"
153
179
  }
154
180
  }
181
+ },
182
+ {
183
+ "kind": "method",
184
+ "name": "handleSlotChange",
185
+ "privacy": "private",
186
+ "parameters": [
187
+ {
188
+ "name": "e",
189
+ "type": {
190
+ "text": "{ target: HTMLSlotElement; }"
191
+ }
192
+ }
193
+ ],
194
+ "description": "Function that updates the local `hasLabel` state in case\nwhen the label slot receives content."
195
+ },
196
+ {
197
+ "kind": "method",
198
+ "name": "renderWrappedLabel",
199
+ "privacy": "private",
200
+ "return": {
201
+ "type": {
202
+ "text": "TemplateResult | typeof nothing"
203
+ }
204
+ },
205
+ "description": "Template for the label slot to correctly wrap it into a legend element when it has content.\nCalled within the main render function."
155
206
  }
156
207
  ],
157
208
  "events": [
@@ -161,6 +212,13 @@
161
212
  },
162
213
  "description": "triggered after the disabled state of the checkbox group changes.",
163
214
  "name": "pie-checkbox-group-disabled"
215
+ },
216
+ {
217
+ "type": {
218
+ "text": "CustomEvent"
219
+ },
220
+ "description": "triggered after the state of the checkbox group changes to error.",
221
+ "name": "pie-checkbox-group-error"
164
222
  }
165
223
  ],
166
224
  "attributes": [
@@ -171,13 +229,6 @@
171
229
  },
172
230
  "fieldName": "name"
173
231
  },
174
- {
175
- "name": "label",
176
- "type": {
177
- "text": "CheckboxGroupProps['label'] | undefined"
178
- },
179
- "fieldName": "label"
180
- },
181
232
  {
182
233
  "name": "assistiveText",
183
234
  "type": {
package/dist/index.d.ts CHANGED
@@ -5,17 +5,13 @@ import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
5
5
  import type { LitElement } from 'lit';
6
6
  import type { PropertyValues } from 'lit';
7
7
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
8
- import type { TemplateResult } from 'lit-html';
8
+ import type { TemplateResult } from 'lit';
9
9
 
10
10
  export declare interface CheckboxGroupProps {
11
11
  /**
12
12
  * The name associated with the group.
13
13
  */
14
14
  name?: string;
15
- /**
16
- * The label value of the component
17
- */
18
- label?: string;
19
15
  /**
20
16
  * Inline (horizontal) positioning of checkbox items
21
17
  */
@@ -45,21 +41,38 @@ export declare const defaultProps: DefaultProps;
45
41
  */
46
42
  export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
47
43
 
44
+ export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
45
+
48
46
  /**
49
47
  * @tagname pie-checkbox-group
50
48
  * @slot - Default slot
49
+ * @slot label - The label slot
51
50
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
51
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
52
52
  */
53
53
  export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
54
+ hasLabel: boolean;
54
55
  name?: CheckboxGroupProps['name'];
55
- label?: CheckboxGroupProps['label'];
56
56
  assistiveText?: CheckboxGroupProps['assistiveText'];
57
57
  isInline: boolean;
58
58
  status: "default" | "error" | "success";
59
59
  disabled: boolean;
60
- _slottedChildren: Array<HTMLElement>;
60
+ _slottedChildren: Array<HTMLElement> | undefined;
61
+ _labelSlot: Array<HTMLElement>;
61
62
  private _handleDisabled;
62
63
  private _handleStatus;
64
+ /**
65
+ * Function that updates the local `hasLabel` state in case
66
+ * when the label slot receives content.
67
+ * @private
68
+ */
69
+ private handleSlotChange;
70
+ /**
71
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
72
+ * Called within the main render function.
73
+ * @private
74
+ */
75
+ private renderWrappedLabel;
63
76
  protected updated(_changedProperties: PropertyValues<this>): void;
64
77
  render(): TemplateResult<1>;
65
78
  static styles: CSSResult;
package/dist/index.js CHANGED
@@ -1,32 +1,55 @@
1
- import { LitElement as x, html as d, unsafeCSS as g } from "lit";
2
- import { property as r, queryAssignedElements as m } from "lit/decorators.js";
3
- import { FormControlMixin as v, RtlMixin as k, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
4
- import { ifDefined as h } from "lit/directives/if-defined.js";
1
+ import { LitElement as x, html as n, unsafeCSS as g } from "lit";
2
+ import { state as k, property as l, queryAssignedElements as u } from "lit/decorators.js";
3
+ import { FormControlMixin as v, RtlMixin as m, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
4
+ import { ifDefined as b } from "lit/directives/if-defined.js";
5
5
  import { classMap as _ } from "lit/directives/class-map.js";
6
6
  import "@justeattakeaway/pie-assistive-text";
7
- const C = `*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:first-child)){margin-block-start:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup-label{max-width:100%;white-space:normal;padding:0;font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);font-weight:var(--dt-font-body-strong-s-weight);color:var(--dt-color-content-default);margin-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline .c-checkboxGroup-label{margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)))}
8
- `, w = ["default", "success", "error"], S = "pie-checkbox-group-disabled", n = {
7
+ const C = `*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}
8
+ `, E = ["default", "success", "error"], S = "pie-checkbox-group-disabled", O = "pie-checkbox-group-error", p = {
9
9
  status: "default",
10
10
  disabled: !1,
11
11
  isInline: !1
12
12
  };
13
- var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, s = (p, e, i, c) => {
14
- for (var t = c > 1 ? void 0 : c ? E(e, i) : e, a = p.length - 1, l; a >= 0; a--)
15
- (l = p[a]) && (t = (c ? l(e, i, t) : l(t)) || t);
16
- return c && t && $(e, i, t), t;
13
+ var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, a = (d, e, t, i) => {
14
+ for (var o = i > 1 ? void 0 : i ? T(e, t) : e, c = d.length - 1, r; c >= 0; c--)
15
+ (r = d[c]) && (o = (i ? r(e, t, o) : r(o)) || o);
16
+ return i && o && $(e, t, o), o;
17
17
  };
18
- const f = "pie-checkbox-group", b = "assistive-text";
19
- class o extends v(k(x)) {
18
+ const f = "pie-checkbox-group", h = "assistive-text";
19
+ class s extends v(m(x)) {
20
20
  constructor() {
21
- super(...arguments), this.isInline = n.isInline, this.status = n.status, this.disabled = n.disabled;
21
+ super(...arguments), this.hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
22
22
  }
23
23
  _handleDisabled() {
24
- this._slottedChildren && this._slottedChildren.forEach((e) => {
25
- e.dispatchEvent(new CustomEvent(S, { bubbles: !1, composed: !1, detail: { disabled: this.disabled } }));
26
- });
24
+ var e;
25
+ (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(S, {
26
+ bubbles: !1,
27
+ composed: !1,
28
+ detail: { disabled: this.disabled }
29
+ })));
27
30
  }
28
31
  _handleStatus() {
29
- this._slottedChildren && this._slottedChildren.forEach((e) => e.setAttribute("status", this.status));
32
+ var e;
33
+ (e = this._slottedChildren) == null || e.forEach((t) => {
34
+ t.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (t.setAttribute("assistiveText", this.assistiveText), t.dispatchEvent(new CustomEvent(O, { bubbles: !1, composed: !1, detail: { error: !0 } })));
35
+ });
36
+ }
37
+ /**
38
+ * Function that updates the local `hasLabel` state in case
39
+ * when the label slot receives content.
40
+ * @private
41
+ */
42
+ handleSlotChange(e) {
43
+ const t = e.target.assignedNodes({ flatten: !0 });
44
+ this.hasLabel = t.length > 0;
45
+ }
46
+ /**
47
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
48
+ * Called within the main render function.
49
+ * @private
50
+ */
51
+ renderWrappedLabel() {
52
+ return this.hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
30
53
  }
31
54
  updated(e) {
32
55
  e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
@@ -34,63 +57,67 @@ class o extends v(k(x)) {
34
57
  render() {
35
58
  const {
36
59
  name: e,
37
- label: i,
38
- isInline: c,
39
- assistiveText: t,
40
- status: a,
41
- disabled: l
42
- } = this, u = {
60
+ isInline: t,
61
+ assistiveText: i,
62
+ status: o,
63
+ disabled: c
64
+ } = this, r = {
43
65
  "c-checkboxGroup": !0,
44
- "c-checkboxGroup--inline": c
66
+ "c-checkboxGroup--inline": t
45
67
  };
46
- return d`
68
+ return n`
47
69
  <fieldset
48
- name=${h(e)}
49
- ?disabled=${l}
50
- aria-describedby="${h(t ? b : void 0)}"
70
+ name=${b(e)}
71
+ ?disabled=${c}
72
+ aria-describedby="${b(i ? h : void 0)}"
51
73
  data-test-id="pie-checkbox-group"
52
- class="${_(u)}"
74
+ class="${_(r)}"
53
75
  >
54
- ${i && d`<legend class="c-checkboxGroup-label">${i}</legend>`}
76
+ ${this.renderWrappedLabel()}
55
77
  <slot></slot>
56
78
  </fieldset>
57
- ${t && d`
79
+ ${i && n`
58
80
  <pie-assistive-text
59
- id="${b}"
60
- variant=${a}
81
+ id="${h}"
82
+ variant=${o}
83
+ class="c-checkboxGroup-assistiveText"
61
84
  data-test-id="pie-checkbox-group-assistive-text">
62
- ${t}
85
+ ${i}
63
86
  </pie-assistive-text>`}
64
87
  `;
65
88
  }
66
89
  }
67
- o.styles = g(C);
68
- s([
69
- r({ type: String })
70
- ], o.prototype, "name", 2);
71
- s([
72
- r({ type: String })
73
- ], o.prototype, "label", 2);
74
- s([
75
- r({ type: String })
76
- ], o.prototype, "assistiveText", 2);
77
- s([
78
- r({ type: Boolean })
79
- ], o.prototype, "isInline", 2);
80
- s([
81
- r({ type: String }),
82
- y(f, w, n.status)
83
- ], o.prototype, "status", 2);
84
- s([
85
- r({ type: Boolean, reflect: !0 })
86
- ], o.prototype, "disabled", 2);
87
- s([
88
- m({})
89
- ], o.prototype, "_slottedChildren", 2);
90
- G(f, o);
90
+ s.styles = g(C);
91
+ a([
92
+ k()
93
+ ], s.prototype, "hasLabel", 2);
94
+ a([
95
+ l({ type: String })
96
+ ], s.prototype, "name", 2);
97
+ a([
98
+ l({ type: String })
99
+ ], s.prototype, "assistiveText", 2);
100
+ a([
101
+ l({ type: Boolean })
102
+ ], s.prototype, "isInline", 2);
103
+ a([
104
+ l({ type: String }),
105
+ y(f, E, p.status)
106
+ ], s.prototype, "status", 2);
107
+ a([
108
+ l({ type: Boolean, reflect: !0 })
109
+ ], s.prototype, "disabled", 2);
110
+ a([
111
+ u({ selector: "pie-checkbox" })
112
+ ], s.prototype, "_slottedChildren", 2);
113
+ a([
114
+ u({ slot: "label" })
115
+ ], s.prototype, "_labelSlot", 2);
116
+ G(f, s);
91
117
  export {
92
118
  S as ON_CHECKBOX_GROUP_DISABLED,
93
- o as PieCheckboxGroup,
94
- n as defaultProps,
95
- w as statusTypes
119
+ O as ON_CHECKBOX_GROUP_ERROR,
120
+ s as PieCheckboxGroup,
121
+ p as defaultProps,
122
+ E as statusTypes
96
123
  };
package/dist/react.d.ts CHANGED
@@ -6,17 +6,13 @@ import type { LitElement } from 'lit';
6
6
  import type { PropertyValues } from 'lit';
7
7
  import * as React_2 from 'react';
8
8
  import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
9
- import type { TemplateResult } from 'lit-html';
9
+ import type { TemplateResult } from 'lit';
10
10
 
11
11
  export declare interface CheckboxGroupProps {
12
12
  /**
13
13
  * The name associated with the group.
14
14
  */
15
15
  name?: string;
16
- /**
17
- * The label value of the component
18
- */
19
- label?: string;
20
16
  /**
21
17
  * Inline (horizontal) positioning of checkbox items
22
18
  */
@@ -46,23 +42,40 @@ export declare const defaultProps: DefaultProps;
46
42
  */
47
43
  export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
48
44
 
45
+ export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
46
+
49
47
  export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<CheckboxGroupProps & React_2.RefAttributes<PieCheckboxGroup_2> & PieCheckboxGroupEvents & ReactBaseType>;
50
48
 
51
49
  /**
52
50
  * @tagname pie-checkbox-group
53
51
  * @slot - Default slot
52
+ * @slot label - The label slot
54
53
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
54
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
55
55
  */
56
56
  declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
57
+ hasLabel: boolean;
57
58
  name?: CheckboxGroupProps['name'];
58
- label?: CheckboxGroupProps['label'];
59
59
  assistiveText?: CheckboxGroupProps['assistiveText'];
60
60
  isInline: boolean;
61
61
  status: "default" | "error" | "success";
62
62
  disabled: boolean;
63
- _slottedChildren: Array<HTMLElement>;
63
+ _slottedChildren: Array<HTMLElement> | undefined;
64
+ _labelSlot: Array<HTMLElement>;
64
65
  private _handleDisabled;
65
66
  private _handleStatus;
67
+ /**
68
+ * Function that updates the local `hasLabel` state in case
69
+ * when the label slot receives content.
70
+ * @private
71
+ */
72
+ private handleSlotChange;
73
+ /**
74
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
75
+ * Called within the main render function.
76
+ * @private
77
+ */
78
+ private renderWrappedLabel;
66
79
  protected updated(_changedProperties: PropertyValues<this>): void;
67
80
  render(): TemplateResult<1>;
68
81
  static styles: CSSResult;
@@ -72,6 +85,7 @@ declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> &
72
85
 
73
86
  declare type PieCheckboxGroupEvents = {
74
87
  onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
88
+ onPieCheckboxGroupError?: (event: CustomEvent) => void;
75
89
  };
76
90
 
77
91
  declare type ReactBaseType = React_2.FieldsetHTMLAttributes<HTMLFieldSetElement>;
package/dist/react.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as o from "react";
2
2
  import { createComponent as e } from "@lit/react";
3
3
  import { PieCheckboxGroup as r } from "./index.js";
4
- import { ON_CHECKBOX_GROUP_DISABLED as k, defaultProps as P, statusTypes as n } from "./index.js";
4
+ import { ON_CHECKBOX_GROUP_DISABLED as k, ON_CHECKBOX_GROUP_ERROR as P, defaultProps as G, statusTypes as n } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
7
  import "@justeattakeaway/pie-webc-core";
@@ -14,13 +14,16 @@ const p = e({
14
14
  react: o,
15
15
  tagName: "pie-checkbox-group",
16
16
  events: {
17
- onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled"
17
+ onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled",
18
18
  // triggered after the disabled state of the checkbox group changes.
19
+ onPieCheckboxGroupError: "pie-checkbox-group-error"
20
+ // triggered after the state of the checkbox group changes to error.
19
21
  }
20
- }), x = p;
22
+ }), u = p;
21
23
  export {
22
24
  k as ON_CHECKBOX_GROUP_DISABLED,
23
- x as PieCheckboxGroup,
24
- P as defaultProps,
25
+ P as ON_CHECKBOX_GROUP_ERROR,
26
+ u as PieCheckboxGroup,
27
+ G as defaultProps,
25
28
  n as statusTypes
26
29
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox-group",
3
3
  "description": "PIE Design System Checkbox Group built using Web Components",
4
- "version": "0.3.0",
4
+ "version": "0.5.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.5.1",
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-group.scss CHANGED
@@ -14,9 +14,14 @@
14
14
  display: flex;
15
15
  }
16
16
 
17
+ ::slotted(pie-form-label) {
18
+ display: block;
19
+ padding-block-end: var(--checkbox-group-label-offset);
20
+ }
21
+
17
22
  &:not(.c-checkboxGroup--inline) {
18
- ::slotted(pie-checkbox:not(:first-child)) {
19
- margin-block-start: var(--checkbox-group-offset);
23
+ ::slotted(pie-checkbox:not(:last-child)) {
24
+ margin-block-end: var(--checkbox-group-offset);
20
25
  }
21
26
  }
22
27
  }
@@ -28,26 +33,22 @@
28
33
  flex-wrap: wrap;
29
34
  }
30
35
 
31
- .c-checkboxGroup-label {
32
- max-width: 100%;
33
- white-space: normal;
34
- padding: 0;
35
- font-size: p.font-size(--dt-font-body-strong-s-size);
36
- line-height: p.line-height(--dt-font-body-strong-s-line-height);
37
- font-weight: var(--dt-font-body-strong-s-weight);
38
- color: var(--dt-color-content-default);
39
-
40
- margin-block-end: var(--checkbox-group-label-offset);
41
- }
42
-
43
36
  .c-checkboxGroup.c-checkboxGroup--inline {
44
- margin: calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2);
37
+ margin: calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2);
45
38
 
46
39
  ::slotted(pie-checkbox) {
47
- margin: calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2);
40
+ margin: calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2);
48
41
  }
49
42
 
50
- .c-checkboxGroup-label {
51
- margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)));
43
+ ::slotted(pie-form-label) {
44
+ margin: 0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));
45
+ padding-block-end: 0;
52
46
  }
53
47
  }
48
+
49
+ .c-checkboxGroup-assistiveText {
50
+ --checkbox-group-assistive-text-offset: var(--dt-spacing-a);
51
+
52
+ display: block;
53
+ margin-block-start: var(--checkbox-group-assistive-text-offset);
54
+ }
package/src/defs.ts CHANGED
@@ -8,11 +8,6 @@ export interface CheckboxGroupProps {
8
8
  */
9
9
  name?: string;
10
10
 
11
- /**
12
- * The label value of the component
13
- */
14
- label?: string;
15
-
16
11
  /**
17
12
  * Inline (horizontal) positioning of checkbox items
18
13
  */
@@ -40,6 +35,7 @@ export interface CheckboxGroupProps {
40
35
  * @constant
41
36
  */
42
37
  export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled';
38
+ export const ON_CHECKBOX_GROUP_ERROR = 'pie-checkbox-group-error';
43
39
 
44
40
  export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
45
41
 
package/src/index.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
- LitElement, html, unsafeCSS, PropertyValues,
2
+ LitElement, html, unsafeCSS, PropertyValues, nothing, type TemplateResult,
3
3
  } from 'lit';
4
- import { property, queryAssignedElements } from 'lit/decorators.js';
4
+ import { property, queryAssignedElements, state } from 'lit/decorators.js';
5
5
  import {
6
6
  RtlMixin,
7
7
  defineCustomElement,
@@ -13,6 +13,7 @@ import { classMap } from 'lit/directives/class-map.js';
13
13
  import styles from './checkbox-group.scss?inline';
14
14
  import {
15
15
  ON_CHECKBOX_GROUP_DISABLED,
16
+ ON_CHECKBOX_GROUP_ERROR,
16
17
  CheckboxGroupProps,
17
18
  defaultProps,
18
19
  statusTypes,
@@ -28,14 +29,16 @@ const assistiveTextId = 'assistive-text';
28
29
  /**
29
30
  * @tagname pie-checkbox-group
30
31
  * @slot - Default slot
32
+ * @slot label - The label slot
31
33
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
34
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
32
35
  */
33
36
  export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
34
- @property({ type: String })
35
- public name?: CheckboxGroupProps['name'];
37
+ @state()
38
+ hasLabel = false;
36
39
 
37
40
  @property({ type: String })
38
- public label?: CheckboxGroupProps['label'];
41
+ public name?: CheckboxGroupProps['name'];
39
42
 
40
43
  @property({ type: String })
41
44
  public assistiveText?: CheckboxGroupProps['assistiveText'];
@@ -50,20 +53,44 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
50
53
  @property({ type: Boolean, reflect: true })
51
54
  public disabled = defaultProps.disabled;
52
55
 
53
- @queryAssignedElements({}) _slottedChildren!: Array<HTMLElement>;
56
+ @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array<HTMLElement> | undefined;
57
+
58
+ @queryAssignedElements({ slot: 'label' }) _labelSlot!: Array<HTMLElement>;
54
59
 
55
60
  private _handleDisabled () : void {
56
- if (this._slottedChildren) {
57
- this._slottedChildren.forEach((child) => {
58
- child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, { bubbles: false, composed: false, detail: { disabled: this.disabled } }));
59
- });
60
- }
61
+ this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
62
+ bubbles: false, composed: false, detail: { disabled: this.disabled },
63
+ })));
61
64
  }
62
65
 
63
66
  private _handleStatus () : void {
64
- if (this._slottedChildren) {
65
- this._slottedChildren.forEach((child) => child.setAttribute('status', this.status));
66
- }
67
+ this._slottedChildren?.forEach((child) => {
68
+ child.setAttribute('status', this.status);
69
+
70
+ if (this.status === 'error' && this.assistiveText) {
71
+ child.setAttribute('assistiveText', this.assistiveText);
72
+ child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_ERROR, { bubbles: false, composed: false, detail: { error: true } }));
73
+ }
74
+ });
75
+ }
76
+
77
+ /**
78
+ * Function that updates the local `hasLabel` state in case
79
+ * when the label slot receives content.
80
+ * @private
81
+ */
82
+ private handleSlotChange (e: { target: HTMLSlotElement; }) {
83
+ const childNodes = e.target.assignedNodes({ flatten: true });
84
+ this.hasLabel = childNodes.length > 0;
85
+ }
86
+
87
+ /**
88
+ * Template for the label slot to correctly wrap it into a legend element when it has content.
89
+ * Called within the main render function.
90
+ * @private
91
+ */
92
+ private renderWrappedLabel (): TemplateResult | typeof nothing {
93
+ return this.hasLabel ? html`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : html`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
67
94
  }
68
95
 
69
96
  protected updated (_changedProperties: PropertyValues<this>): void {
@@ -79,7 +106,6 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
79
106
  render () {
80
107
  const {
81
108
  name,
82
- label,
83
109
  isInline,
84
110
  assistiveText,
85
111
  status,
@@ -99,13 +125,14 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
99
125
  data-test-id="pie-checkbox-group"
100
126
  class="${classMap(classes)}"
101
127
  >
102
- ${label && html`<legend class="c-checkboxGroup-label">${label}</legend>`}
128
+ ${this.renderWrappedLabel()}
103
129
  <slot></slot>
104
130
  </fieldset>
105
131
  ${assistiveText && html`
106
132
  <pie-assistive-text
107
133
  id="${assistiveTextId}"
108
134
  variant=${status}
135
+ class="c-checkboxGroup-assistiveText"
109
136
  data-test-id="pie-checkbox-group-assistive-text">
110
137
  ${assistiveText}
111
138
  </pie-assistive-text>`}
package/src/react.ts CHANGED
@@ -12,6 +12,7 @@ const PieCheckboxGroupReact = createComponent({
12
12
  tagName: 'pie-checkbox-group',
13
13
  events: {
14
14
  onPieCheckboxGroupDisabled: 'pie-checkbox-group-disabled' as EventName<CustomEvent>, // triggered after the disabled state of the checkbox group changes.
15
+ onPieCheckboxGroupError: 'pie-checkbox-group-error' as EventName<CustomEvent>, // triggered after the state of the checkbox group changes to error.
15
16
  },
16
17
  });
17
18
 
@@ -19,6 +20,7 @@ type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
19
20
 
20
21
  type PieCheckboxGroupEvents = {
21
22
  onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
23
+ onPieCheckboxGroupError?: (event: CustomEvent) => void;
22
24
  };
23
25
 
24
26
  export const PieCheckboxGroup = PieCheckboxGroupReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxGroupProps>