Merge pull request #309 from Infineon/233-review-switch

233 review switch
Infineon · Jul 27, 2023 · a16004f · a16004f
2 parents 48b781c + 92887af
commit a16004f
Show file tree

Hide file tree

Showing 23 changed files with 276 additions and 309 deletions.
diff --git a/examples/stencil-components/angular/src/app/app.component.html b/examples/stencil-components/angular/src/app/app.component.html
@@ -125,4 +125,9 @@ <h2>Sidebar</h2>
     <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Four</ifx-sidebar-item>
   </ifx-sidebar>
   <br />
+
+  <h2>Switch</h2>
+  <ifx-switch [disabled]="switchDisabled" [value]="switchChecked" (ifxChange)="toggleSwitchValue()"></ifx-switch>
+  <br />
+
 </div>
diff --git a/examples/stencil-components/angular/src/app/app.component.ts b/examples/stencil-components/angular/src/app/app.component.ts
@@ -10,6 +10,8 @@ export class AppComponent {
   checkboxChecked = false;
   checkboxError = false;
   checkboxDisabled = false;
+  switchChecked = false;
+  switchDisabled = false;
   radioError = false;
   radioDisabled = false;
   radioChecked = false;
@@ -45,6 +47,13 @@ export class AppComponent {
     this.checkboxChecked = !this.checkboxChecked;
   }
 
+  toggleSwitchValue() {
+    console.log("switch value change")
+    this.switchChecked = !this.switchChecked;
+  }
+  toggleSwitchDisabled() {
+    this.switchDisabled = !this.switchDisabled;
+  }
   toggleRadioBtnDisabled() {
     this.radioDisabled = !this.radioDisabled;
   }

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -130,6 +130,9 @@ <h2>Sidebar</h2>
     </ifx-sidebar>
     <br />
 
+    <h2>Switch</h2>
+    <ifx-switch id="switch" disabled="false" value="false"></ifx-switch>
+    <br />
   </div>
 
 </body>
@@ -141,6 +144,7 @@ <h2>Sidebar</h2>
   let textInputValue = "";
   let radioChecked = false;
   let number = 1;
+  let switchChecked = false;
 
   const form = document.querySelector("#form");
   const anotherForm = document.querySelector("#another-form");
@@ -150,6 +154,7 @@ <h2>Sidebar</h2>
   const textInput = document.querySelector('#text-input');
   const radioBtn = document.querySelector('#radio-btn');
   const numberIndicator = document.querySelector('#number-indicator');
+  const switchToggle = document.querySelector('#switch');
 
 
   const toggleDisabledButton = document.querySelector("#toggleDisabled");
@@ -168,6 +173,7 @@ <h2>Sidebar</h2>
     errorSpan.textContent = `Error: ${error}`;
     valueSpan.textContent = `Value: ${checked}`;
     textInputSpan.textContent = `Text field: ${textInputValue}`;
+    switchToggle.setAttribute('value', switchChecked);
   }
 
   function increaseNumber() {
@@ -187,7 +193,7 @@ <h2>Sidebar</h2>
   document.addEventListener('DOMContentLoaded', (event) => {
     form.addEventListener('submit', () => {
       event.preventDefault();
-      console.log('Form submitted. Checkbox value:', checked);
+      console.log('Form submitted. \nCheckbox value:', checked, '\nSwitchToggle value', switchChecked);
     });
 
 
@@ -197,6 +203,12 @@ <h2>Sidebar</h2>
       updateValues();
     });
 
+    switchToggle.addEventListener('ifxChange', (event) => {
+      console.log("switchToggle value change", event.detail);
+      switchChecked = !switchChecked;
+      updateValues();
+    });
+
     toggleDisabledButton.addEventListener('click', () => {
       disabled = !disabled;
       updateValues();
@@ -223,6 +235,8 @@ <h2>Sidebar</h2>
       console.log("radio btn value change", event.detail);
       radioChecked = !radioChecked;
     });
+
+
   });
 
 

diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -15,6 +15,7 @@ import Navbar from './components/Navbar/Navbar';
 import IconButton from './components/IconButton/IconButton';
 import Tab from './components/Tab/Tab';
 import Tag from './components/Tag/Tag';
+import Switch from './components/Switch/Switch';
 
 function App() {
       return (
@@ -87,6 +88,10 @@ function App() {
                   <IconButton />
                   <br />
 
+                  <h2>Switch</h2>
+                  <Switch />
+                  <br />
+
             </div>
 
       )

diff --git a/examples/wrapper-components/react-javascript/src/components/Switch/Switch.js b/examples/wrapper-components/react-javascript/src/components/Switch/Switch.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { IfxSwitch, IfxButton } from '@infineon/infineon-design-system-react';
+
+function Switch() {
+  const [disabled, setDisabled] = useState(false);
+  const [switchChecked, setSwitchChecked] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Form submitted. Switch value:', switchChecked);
+  };
+
+  const handleChange = (event) => {
+    console.log("Updating switch value: ", event.detail);
+    setSwitchChecked(event.detail);
+  };
+
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <IfxSwitch disabled={disabled} onIfxChange={handleChange} value={switchChecked}>
+          label
+        </IfxSwitch>
+        <br />
+
+        <IfxButton type="submit">Submit</IfxButton>
+      </form>
+      <br />
+      <div>
+        <IfxButton variant="outline" onClick={() => setDisabled(!disabled)}>Toggle Disabled</IfxButton>
+
+
+        <IfxButton variant="outline" onClick={() => setSwitchChecked(!switchChecked)}>Toggle Value</IfxButton>
+
+      </div>
+      <br />
+      <span>Disabled: {String(disabled)} </span>
+      <br />
+
+      <span>Value: {String(switchChecked)}</span>
+      <br />
+      <br />
+    </div>
+  );
+}
+
+export default Switch;
diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -16,6 +16,7 @@
   <NumberIndicator />
   <Sidebar />
   <IconButton />
+  <Switch />
 </template>
 
 
@@ -35,6 +36,7 @@ import Tabs from './components/Tabs.vue'
 import Sidebar from './components/Sidebar.vue'
 import Navbar from './components/Navbar.vue'
 import IconButton from './components/IconButton.vue'
+import Switch from './components/Switch.vue'
 
 </script>
 
diff --git a/examples/wrapper-components/vue-javascript/src/components/Switch.vue b/examples/wrapper-components/vue-javascript/src/components/Switch.vue
@@ -0,0 +1,16 @@
+
+
+<template>
+  <div>
+    <h2>Switch</h2>
+    <ifx-switch disabled="false" value="false" @ifxChange="console.log('switch changed')"></ifx-switch>
+    <br />
+    <br />
+  </div>
+</template>
+
+
+
+
+
+
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "build:storybook": "lerna run build:storybook --scope @infineon/infineon-design-system-stencil",
     "build:components-react": "lerna run build --scope @infineon/infineon-design-system-react",
     "build:components-vue": "lerna run build --scope @infineon/infineon-design-system-vue",
+    "test": "lerna run test --scope @infineon/infineon-design-system-stencil",
     "graph": "nx graph"
   },
   "workspaces": [