fix(1476): align switch to web standards

Infineon · Sep 19, 2024 · 42abf6d · 42abf6d
1 parent 67374ed
commit 42abf6d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 19 deletions.
diff --git a/packages/components/src/components/switch/readme.md b/packages/components/src/components/switch/readme.md
@@ -9,9 +9,9 @@
 
 | Property   | Attribute  | Description | Type      | Default |
 | ---------- | ---------- | ----------- | --------- | ------- |
+| `checked`  | `checked`  |             | `boolean` | `false` |
 | `disabled` | `disabled` |             | `boolean` | `false` |
 | `name`     | `name`     |             | `string`  | `''`    |
-| `value`    | `value`    |             | `boolean` | `false` |
 
 
 ## Events

diff --git a/packages/components/src/components/switch/switch.e2e.ts b/packages/components/src/components/switch/switch.e2e.ts
@@ -62,12 +62,12 @@ describe('ifx-switch', () => {
 
 
 
-  it('updates the visual state when value prop changes', async () => {
+  it('updates the visual state when checked prop changes', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-switch value="false"></ifx-switch>');
+    await page.setContent('<ifx-switch checked="false"></ifx-switch>');
 
     const component = await page.find('ifx-switch');
-    component.setProperty('value', true);
+    component.setProperty('checked', true);
     await page.waitForChanges();
 
     const container = await page.find('ifx-switch >>> .switch__checkbox-container');

diff --git a/packages/components/src/components/switch/switch.stories.ts b/packages/components/src/components/switch/switch.stories.ts
@@ -5,7 +5,7 @@ export default {
   tags: ['autodocs'],
 
   args: {
-    value: false,
+    checked: false,
     disabled: false,
     label: 'Switch',
     name: 'switch'
@@ -33,7 +33,7 @@ const DefaultTemplate = args => {
 
   // Set the attributes
   element.setAttribute('disabled', args.disabled);
-  element.setAttribute('value', args.value);
+  element.setAttribute('checked', args.checked);
   element.setAttribute('name', args.name);
 
   // Add the event listener

diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
@@ -1,4 +1,4 @@
-import { AttachInternals } from '@stencil/core';
+import { AttachInternals, Method } from '@stencil/core';
 import { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';
 
 
@@ -9,19 +9,24 @@ import { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '
   formAssociated: true
 })
 export class Switch {
-  @Prop() value: boolean = false;
+  @Prop() checked: boolean = false;
   @Prop() name: string = '';
   @Prop() disabled: boolean = false;
-  @State() internalValue: boolean = false;
+  @State() internalChecked: boolean = false;
 
   @AttachInternals() internals: ElementInternals;
 
   @Element() el: HTMLIfxSwitchElement;
 
   @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;
 
+  @Method()
+  async isChecked(): Promise<boolean> {
+    return this.internalChecked;
+  }
+
   componentWillLoad() {
-    this.internalValue = this.value;
+    this.internalChecked = this.checked;
   }
 
 
@@ -40,18 +45,18 @@ export class Switch {
 
   }
 
-  @Watch('value')
+  @Watch('checked')
   valueChanged(newValue: boolean, oldValue: boolean) {
     if (newValue !== oldValue) {
-      this.internalValue = newValue;
+      this.internalChecked = newValue;
     }
   }
 
   toggleSwitch() {
     if (this.disabled) return;
-    this.internalValue = !this.internalValue;
-    this.internals.setFormValue(this.internalValue ? 'on' : null);
-    this.ifxChange.emit(this.internalValue);
+    this.internalChecked = !this.internalChecked;
+    this.internals.setFormValue(this.internalChecked ? 'on' : null);
+    this.ifxChange.emit(this.internalChecked);
   }
 
   handleKeyDown(event: KeyboardEvent) {
@@ -75,22 +80,22 @@ export class Switch {
       <div
         class="container"
         role="switch"
-        aria-checked={this.internalValue ? 'true' : 'false'}
+        aria-checked={this.internalChecked ? 'true' : 'false'}
         aria-label={this.name}
         onClick={() => this.toggleSwitch()}
         onKeyDown={(event) => this.handleKeyDown(event)}
         >
         {/* Checkbox */}
         <div 
-          class={`switch__checkbox-container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}
+          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}
           tabindex="0"
         >
           <div class="switch__checkbox-wrapper">
             <input type="checkbox" hidden
               name={this.name}
               disabled={this.disabled}
-              value={`${this.internalValue}`} />
-            <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />
+              value={`${this.internalChecked}`} />
+            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />
           </div>
         </div >