feat(pie-checkbox-group): DSW-2182 name attribute + connected and dis…

…conncted callbacks changes
justeattakeaway · Jul 17, 2024 · db19067 · db19067
1 parent 6913aab
commit db19067
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 6 deletions.
diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts
@@ -21,8 +21,12 @@ const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = {
     title: 'Checkbox Group',
     component: 'pie-checkbox-group',
     argTypes: {
+        name: {
+            description: 'The name associated with the group.',
+            control: 'text',
+        },
         label: {
-            description: 'The visible label for the checkbox group',
+            description: 'The visible label for the checkbox group.',
             control: 'text',
         },
         status: {
@@ -60,6 +64,7 @@ const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = {
 export default checkboxGroupStoryMeta;
 
 const Template = ({
+    name,
     label,
     assistiveText,
     status,
@@ -68,6 +73,7 @@ const Template = ({
     <p>Please note, the checkboxes are separate components. See
     <pie-link href="/?path=/story/checkbox--default">pie-checkbox</pie-link>.</p>
     <pie-checkbox-group
+        name="${ifDefined(name)}"
         label="${ifDefined(label)}"
         assistiveText="${ifDefined(assistiveText)}"
         status=${ifDefined(status)}

diff --git a/packages/components/pie-checkbox-group/README.md b/packages/components/pie-checkbox-group/README.md
@@ -21,6 +21,8 @@
 
 `pie-checkbox-group` is a Web Component built using the Lit library.
 
+It is a helper component that groups PieCheckbox components into a visual and functional group.
+
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 
@@ -73,6 +75,7 @@ import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react
 
 | Property | Type | Default | Description |
 |---|---|---|---|
+| `name` | string | - | The name associated with the group.
 | `label` | string | - | The label value of the component |
 | assistiveText | string | - | An optional assistive text to display below the checkbox group. |
 | `disabled` | boolean | - | Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. |
@@ -84,12 +87,43 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 
 ```html
 <!-- Native HTML -->
-<pie-checkbox-group></pie-checkbox-group>
+<pie-checkbox-group name="TESTNAME">
+  <pie-checkbox
+    name="my-checkbox-one"
+    label="Checkbox Label 1">
+  </pie-checkbox>
+  <pie-checkbox
+      name="my-checkbox-two"
+      label="Checkbox Label 2">
+  </pie-checkbox>
+  <pie-checkbox
+      name="my-checkbox-three"
+      label="Checkbox Label 3">
+  </pie-checkbox>
+</pie-checkbox-group>
 
 <!-- JSX -->
-<PieCheckboxGroup></PieCheckboxGroup>
+<PieCheckboxGroup name="TESTNAME">
+  <PieCheckbox
+    name="my-checkbox-one"
+    label="Checkbox Label 1">
+  </PieCheckbox>
+  <PieCheckbox
+      name="my-checkbox-two"
+      label="Checkbox Label 2">
+  </PieCheckbox>
+  <PieCheckbox
+      name="my-checkbox-three"
+      label="Checkbox Label 3">
+  </PieCheckbox>
+</PieCheckboxGroup>
 ```
 
+## Events
+| Event | Type | Description |
+|-------|------|-------------|
+| `pie-checkbox-group-disabled` | `CustomEvent` | Triggered after the disabled state of the checkbox group changes. |
+
 ## Contributing
 
 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).
diff --git a/packages/components/pie-checkbox-group/src/defs.ts b/packages/components/pie-checkbox-group/src/defs.ts
@@ -3,6 +3,11 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export const statusTypes = ['default', 'success', 'error'] as const;
 
 export interface CheckboxGroupProps {
+    /**
+    * The name associated with the group.
+    */
+    name?: string;
+
     /**
      * The label value of the component
      */

diff --git a/packages/components/pie-checkbox-group/src/index.ts b/packages/components/pie-checkbox-group/src/index.ts
@@ -26,9 +26,12 @@ const assistiveTextId = 'assistive-text';
 
 /**
  * @tagname pie-checkbox-group
- * @event {CustomEvent} pie-checkbox-group-disabled - when the checkbox group disabled state changes.
+ * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
+    @property({ type: String })
+    public name?: CheckboxGroupProps['name'];
+
     @property({ type: String })
     public label?: CheckboxGroupProps['label'];
 
@@ -81,13 +84,15 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
 
     render () {
         const {
+            name,
             label,
             assistiveText,
             status,
             disabled,
         } = this;
         return html`
             <fieldset
+                name=${ifDefined(name)}
                 ?disabled=${disabled}
                 aria-describedby="${ifDefined(assistiveText ? assistiveTextId : undefined)}"
                 data-test-id="pie-checkbox-group"

diff --git a/packages/components/pie-checkbox/src/index.ts b/packages/components/pie-checkbox/src/index.ts
@@ -67,11 +67,18 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
     public status = defaultProps.status;
 
-    constructor () {
-        super();
+    connectedCallback () : void {
+        super.connectedCallback();
+
         this.addEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
     }
 
+    disconnectedCallback () : void {
+        super.disconnectedCallback();
+
+        this.removeEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
+    }
+
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity