fix(1479): add value property to checkbox and switch

Infineon · Sep 19, 2024 · ebdb361 · ebdb361
1 parent 846b069
commit ebdb361
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 21 deletions.
diff --git a/packages/components/src/components/checkbox/checkbox.e2e.ts b/packages/components/src/components/checkbox/checkbox.e2e.ts
@@ -70,7 +70,7 @@ describe('ifx-checkbox', () => {
     expect(value).toBeUndefined();
   })
 
-  it('should be on when form is submitted', async () => {
+  it('should be on when form is submitted when no value is given', async () => {
     const page = await newE2EPage();
     await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
       <ifx-checkbox name="checkbox"></ifx-checkbox>
@@ -85,6 +85,21 @@ describe('ifx-checkbox', () => {
     expect(value).toBe('on')
   });
 
+  it('should set value when form is submitted when value is given', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
+      <ifx-checkbox name="checkbox" value="check"></ifx-checkbox>
+      <button id="submit" type="submit">Submit</button>
+    </form>`);
+    await addHandleSubmitScript(page);
+    const checkbox = await page.find('ifx-checkbox');
+
+    await checkbox.click();
+
+    const value = await submitAndGetValue(page);
+    expect(value).toBe('check')
+  });
+
   it('should not change value when disabled attribute is present', async () => {
     const page = await newE2EPage();
     await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">

diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts
@@ -10,7 +10,7 @@ export default {
     label: 'Text',
     size: 's',
     indeterminate: false,
-    name: 'checkbox'
+    name: 'checkbox',
   },
 
   argTypes: {
@@ -32,6 +32,9 @@ export default {
     },
     name: {
       description: 'Name of the element, that is used as reference when a form is submitted.'
+    },
+    value: {
+      description: 'The value that gets submitted, when the checkbox is seleted'
     }
   },
 };

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
@@ -16,8 +16,9 @@ export class Checkbox {
   @Prop() checked: boolean = false;
   @Prop() error: boolean = false;
   @Prop() size: string = 'm';
-  @State() internalChecked: boolean;
   @Prop() indeterminate: boolean = false;
+  @Prop() value: string;
+  @State() internalChecked: boolean;
   @State() internalIndeterminate: boolean;
 
   @AttachInternals() internals: ElementInternals;
@@ -32,8 +33,16 @@ export class Checkbox {
       } else {
         this.internalChecked = !this.internalChecked;
       }
-      this.internals.setFormValue(this.internalChecked ? 'on' : null);
 
+      if (this.internalChecked) {
+        if (this.value !== undefined) {
+          this.internals.setFormValue(this.value);
+        } else {
+          this.internals.setFormValue("on")
+        }
+      } else {
+        this.internals.setFormValue(null)
+      }
       this.ifxChange.emit(this.internalChecked);
     }
   }
@@ -121,7 +130,7 @@ export class Checkbox {
           checked={this.internalChecked}
           onChange={this.handleCheckbox.bind(this)} // Listen for changes here
           id='checkbox'
-          value={`${this.internalChecked}`}
+          value={`${this.value}`}
         />
 
         <div

diff --git a/packages/components/src/components/checkbox/readme.md b/packages/components/src/components/checkbox/readme.md
@@ -7,13 +7,14 @@
 
 ## Properties
 
-| Property        | Attribute       | Description | Type      | Default |
-| --------------- | --------------- | ----------- | --------- | ------- |
-| `checked`       | `checked`       |             | `boolean` | `false` |
-| `disabled`      | `disabled`      |             | `boolean` | `false` |
-| `error`         | `error`         |             | `boolean` | `false` |
-| `indeterminate` | `indeterminate` |             | `boolean` | `false` |
-| `size`          | `size`          |             | `string`  | `'m'`   |
+| Property        | Attribute       | Description | Type      | Default     |
+| --------------- | --------------- | ----------- | --------- | ----------- |
+| `checked`       | `checked`       |             | `boolean` | `false`     |
+| `disabled`      | `disabled`      |             | `boolean` | `false`     |
+| `error`         | `error`         |             | `boolean` | `false`     |
+| `indeterminate` | `indeterminate` |             | `boolean` | `false`     |
+| `size`          | `size`          |             | `string`  | `'m'`       |
+| `value`         | `value`         |             | `string`  | `undefined` |
 
 
 ## Events

diff --git a/packages/components/src/components/switch/readme.md b/packages/components/src/components/switch/readme.md
@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type      | Default |
-| ---------- | ---------- | ----------- | --------- | ------- |
-| `checked`  | `checked`  |             | `boolean` | `false` |
-| `disabled` | `disabled` |             | `boolean` | `false` |
-| `name`     | `name`     |             | `string`  | `''`    |
+| Property   | Attribute  | Description | Type      | Default     |
+| ---------- | ---------- | ----------- | --------- | ----------- |
+| `checked`  | `checked`  |             | `boolean` | `false`     |
+| `disabled` | `disabled` |             | `boolean` | `false`     |
+| `name`     | `name`     |             | `string`  | `''`        |
+| `value`    | `value`    |             | `string`  | `undefined` |
 
 
 ## Events

diff --git a/packages/components/src/components/switch/switch.e2e.ts b/packages/components/src/components/switch/switch.e2e.ts
@@ -60,8 +60,6 @@ describe('ifx-switch', () => {
     expect(container).not.toHaveClass('checked');
   });
 
-
-
   it('updates the visual state when checked prop changes', async () => {
     const page = await newE2EPage();
     await page.setContent('<ifx-switch checked="false"></ifx-switch>');
@@ -101,6 +99,20 @@ describe('ifx-switch', () => {
     expect(value).toBe('on')
   });
 
+  it('should be value when form is submitted and value is set', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<form id="testForm" onSubmit="handleSubmit(event)">
+      <ifx-switch name="switch" value="val"></ifx-switch>
+      <button id="submit" type="submit">Submit</button>
+    </form>`);
+    await addHandleSubmitScript(page);
+    const switchEl = await page.find('ifx-switch');
+
+    await switchEl.click();
+
+    const value = await submitAndGetValue(page);
+    expect(value).toBe('val')
+  });
 
   it('should not change value when disabled attribute is present', async () => {
     const page = await newE2EPage();

diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
@@ -12,6 +12,7 @@ export class Switch {
   @Prop() checked: boolean = false;
   @Prop() name: string = '';
   @Prop() disabled: boolean = false;
+  @Prop() value: string;
   @State() internalChecked: boolean = false;
 
   @AttachInternals() internals: ElementInternals;
@@ -55,7 +56,17 @@ export class Switch {
   toggleSwitch() {
     if (this.disabled) return;
     this.internalChecked = !this.internalChecked;
-    this.internals.setFormValue(this.internalChecked ? 'on' : null);
+
+    if (this.internalChecked) {
+      if (this.value !== undefined) {
+        this.internals.setFormValue(this.value);
+      } else {
+        this.internals.setFormValue("on")
+      }
+    } else {
+      this.internals.setFormValue(null)
+    }
+
     this.ifxChange.emit(this.internalChecked);
   }
 
@@ -94,7 +105,8 @@ export class Switch {
             <input type="checkbox" hidden
               name={this.name}
               disabled={this.disabled}
-              value={`${this.internalChecked}`} />
+              checked={this.internalChecked}
+              value={`${this.value}`} />
             <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />
           </div>
         </div >