1566 storybook consistency and UI enhancement

examples/wrapper-components/react-javascript/src/components/Accordion/Accordion.js

@@ -18,17 +18,17 @@ function Accordion() {
     console.log("accordion item: ", accordionItem)
   }
 
-  const updateContent = () => { 
+  const updateContent = () => {
     setContent(`Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.`)
   }
 
   return (
     <div>
-      <IfxAccordion auto-collapse={true} onIfxItemOpen={handleItems}>
+      <IfxAccordion auto-collapse={true} onIfxOpen={handleItems}>
         <IfxAccordionItem initial-collapse={false} open={false} key={content} caption="Label" ref={accordionItemRef}>
-         <div>{content}</div>
+          <div>{content}</div>
         </IfxAccordionItem>
         <IfxAccordionItem open={false} caption="Label">
           Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

examples/wrapper-components/react-javascript/src/components/Breadcrumbs/Breadcrumbs.js

@@ -8,25 +8,25 @@ function Breadcrumbs() {
         <IfxBreadcrumbItem>
           <IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 1</IfxBreadcrumbItemLabel>
           <IfxDropdownMenu>
-            <IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
-            <IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
-            <IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
-            <IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
+            <IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
+            <IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
+            <IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
+            <IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
           </IfxDropdownMenu>
         </IfxBreadcrumbItem>
 
         <IfxBreadcrumbItem>
           <IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 2</IfxBreadcrumbItemLabel>
           <IfxDropdownMenu>
-          <IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
-          <IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
-          <IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
-          <IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
+            <IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
+            <IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
+            <IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
+            <IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
           </IfxDropdownMenu>
         </IfxBreadcrumbItem>
 
         <IfxBreadcrumbItem>
-          <IfxBreadcrumbItemLabel slot="label" icon="" url="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
+          <IfxBreadcrumbItemLabel slot="label" icon="" href="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
         </IfxBreadcrumbItem>
       </IfxBreadcrumb>
     </div>

examples/wrapper-components/react-javascript/src/components/Tabs/Tabs.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { IfxTabs, IfxTab } from '@infineon/infineon-design-system-react';
 
 function Tabs() {
-  
+
   const tabIndex = useRef(0);
   const INTERVAL = 20000;
 
@@ -26,7 +26,7 @@ function Tabs() {
   }
 
   return (
-    <IfxTabs onIfxTabChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
+    <IfxTabs onIfxChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
       <IfxTab header="tab header a" disabled={false} icon='c-check-16'>
         Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec

examples/wrapper-components/react-vite-js/package.json

@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-react": "30.9.3--canary.1640.cca6b3e0f7f750f15c51f9cb6eb2c66789549fb3.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/wrapper-components/react-vite-js/src/components/Accordion/Accordion.jsx

@@ -1,4 +1,4 @@
-import  { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { IfxAccordion, IfxAccordionItem, IfxButton } from '@infineon/infineon-design-system-react';
 
 function Accordion() {
@@ -18,17 +18,17 @@ function Accordion() {
     console.log("accordion item: ", accordionItem)
   }
 
-  const updateContent = () => { 
+  const updateContent = () => {
     setContent(`Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.`)
   }
 
   return (
     <div>
-      <IfxAccordion auto-collapse={true} onIfxItemOpen={handleItems}>
+      <IfxAccordion auto-collapse={true} onIfxOpen={handleItems}>
         <IfxAccordionItem initial-collapse={false} open={false} key={content} caption="Label" ref={accordionItemRef}>
-         <div>{content}</div>
+          <div>{content}</div>
         </IfxAccordionItem>
         <IfxAccordionItem open={false} caption="Label">
           Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.

examples/wrapper-components/react-vite-js/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,4 +1,4 @@
- import { IfxBreadcrumb, IfxBreadcrumbItem, IfxBreadcrumbItemLabel, IfxDropdownMenu, IfxDropdownItem } from '@infineon/infineon-design-system-react';
+import { IfxBreadcrumb, IfxBreadcrumbItem, IfxBreadcrumbItemLabel, IfxDropdownMenu, IfxDropdownItem } from '@infineon/infineon-design-system-react';
 
 function Breadcrumbs() {
   return (
@@ -7,25 +7,25 @@ function Breadcrumbs() {
         <IfxBreadcrumbItem>
           <IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 1</IfxBreadcrumbItemLabel>
           <IfxDropdownMenu>
-            <IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
-            <IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
-            <IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
-            <IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
+            <IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
+            <IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
+            <IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
+            <IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
           </IfxDropdownMenu>
         </IfxBreadcrumbItem>
 
         <IfxBreadcrumbItem>
           <IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 2</IfxBreadcrumbItemLabel>
           <IfxDropdownMenu>
-          <IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
-          <IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
-          <IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
-          <IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
+            <IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
+            <IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
+            <IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
+            <IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
           </IfxDropdownMenu>
         </IfxBreadcrumbItem>
 
         <IfxBreadcrumbItem>
-          <IfxBreadcrumbItemLabel slot="label" icon="" url="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
+          <IfxBreadcrumbItemLabel slot="label" icon="" href="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
         </IfxBreadcrumbItem>
       </IfxBreadcrumb>
     </div>

examples/wrapper-components/react-vite-js/src/components/Tabs/Tabs.jsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { IfxTabs, IfxTab } from '@infineon/infineon-design-system-react';
 
 function Tabs() {
-  
-  const [tabIndex, setTabIndex]= useState(0);
+
+  const [tabIndex, setTabIndex] = useState(0);
   const INTERVAL = 20000;
 
   useEffect(() => {
@@ -26,7 +26,7 @@ function Tabs() {
   }
 
   return (
-    <IfxTabs onIfxTabChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
+    <IfxTabs onIfxChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
       <IfxTab header="tab header a" disabled={false} icon='c-check-16'>
         Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec

examples/wrapper-components/vue-javascript/package.json

@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "30.9.2--canary.1673.aae465494350113a03d5687dfe66c3823dc98f42.0",
+    "@infineon/infineon-design-system-vue": "30.9.3--canary.1640.cca6b3e0f7f750f15c51f9cb6eb2c66789549fb3.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

examples/wrapper-components/vue-javascript/src/components/Accordion.vue

@@ -1,38 +1,46 @@
-
-
 <template>
   <div>
     <h2>Accordion</h2>
-    <ifx-accordion @ifxItemOpen="handleItems" auto-collapse="true">
-      <ifx-accordion-item ref="accordionItemRef" initial-collapse="false" open="false" caption="Label">
-        <div>{{ content }}</div>
-      </ifx-accordion-item><ifx-accordion-item caption="Label">
-        Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam
-        bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
-        cursus ipsum, nec egestas odio sapien eget neque.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
-        cursus ipsum, nec egestas odio sapien eget neque.
-      </ifx-accordion-item><ifx-accordion-item caption="Label">
-        Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam
-        bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
-        cursus ipsum, nec egestas odio sapien eget neque.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
-        cursus ipsum, nec egestas odio sapien eget neque.
-      </ifx-accordion-item></ifx-accordion>
+    <ifx-accordion @ifxOpen="handleItems" auto-collapse="true">
+      <ifx-accordion-item
+        ref="accordionItemRef"
+        initial-collapse="false"
+        open="false"
+        caption="Label"
+      >
+        <div>{{ content }}</div> </ifx-accordion-item
+      ><ifx-accordion-item caption="Label">
+        Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
+        odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
+        odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
+        odio sapien eget neque. </ifx-accordion-item
+      ><ifx-accordion-item caption="Label">
+        Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
+        odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
+        odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
+        odio sapien eget neque.
+      </ifx-accordion-item></ifx-accordion
+    >
     <br />
-    <ifx-button @click="handleButtonClick">Open/Close the first accordion item</ifx-button>
+    <ifx-button @click="handleButtonClick"
+      >Open/Close the first accordion item</ifx-button
+    >
     <ifx-button @click="updateContent">Change Content dynamically</ifx-button>
     <br />
     <br />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 const accordionItemRef = ref();
-const content = ref('Short content')
+const content = ref("Short content");
 
 function handleItems(event) {
   console.log("An accordion item was opened. Event details:", event);
@@ -44,16 +52,12 @@ async function handleButtonClick() {
   console.log("accordion item: ", accordionItem);
 }
 
-async function updateContent() { 
+async function updateContent() {
   content.value = `   Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam
         bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
         cursus ipsum, nec egestas odio sapien eget neque.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
-        cursus ipsum, nec egestas odio sapien eget neque.`
+        cursus ipsum, nec egestas odio sapien eget neque.`;
 }
-
 </script>
-
-
-

examples/wrapper-components/vue-javascript/src/components/Breadcrumbs.vue

@@ -1,32 +1,36 @@
-
-
 <template>
   <div>
     <h2>Breadcrumbs</h2>
     <div>
       <ifx-breadcrumb>
         <ifx-breadcrumb-item>
-          <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 1</ifx-breadcrumb-item-label>
+          <ifx-breadcrumb-item-label slot="label" icon=""
+            >Breadcrumb 1</ifx-breadcrumb-item-label
+          >
           <ifx-dropdown-menu>
-            <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
-            <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-            <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-            <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://google.com">Google</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
           </ifx-dropdown-menu>
         </ifx-breadcrumb-item>
 
         <ifx-breadcrumb-item>
-          <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
+          <ifx-breadcrumb-item-label slot="label" icon=""
+            >Breadcrumb 2</ifx-breadcrumb-item-label
+          >
           <ifx-dropdown-menu>
-          <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
-          <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-          <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-          <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://google.com">Google</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
+            <ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
           </ifx-dropdown-menu>
         </ifx-breadcrumb-item>
 
         <ifx-breadcrumb-item>
-          <ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+          <ifx-breadcrumb-item-label slot="label" icon="" href="http://google.com"
+            >Breadcrumb 3</ifx-breadcrumb-item-label
+          >
         </ifx-breadcrumb-item>
       </ifx-breadcrumb>
     </div>
@@ -35,10 +39,4 @@
   </div>
 </template>
 
-<script setup>
-
-
-</script>
-
-
-
+<script setup></script>

examples/wrapper-components/vue-javascript/src/components/Pagination.vue

@@ -1,13 +1,16 @@
 <template>
   <div>
     <h2>Pagination</h2>
-    <ifx-pagination @ifxPageChange="handleChange" @ifxPrevPage="handleChange" @ifxNextPage="handleChange" total="500"
-      :current-page="current"></ifx-pagination>
+    <ifx-pagination
+      @ifxPageChange="handleChange"
+      total="500"
+      :current-page="current"
+    ></ifx-pagination>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from "vue";
 
 const currentPage = ref(1);
 
@@ -18,19 +21,14 @@ const current = computed(() => {
 onMounted(() => {
   updatePage();
   setInterval(updatePage, 100000);
-})
+});
 
 function handleChange() {
   console.log("page value changed");
 }
 
 function updatePage() {
-  console.log("updating page value")
-  currentPage.value < 500 ? currentPage.value += 1 : currentPage.value = 1;
-
+  console.log("updating page value");
+  currentPage.value < 500 ? (currentPage.value += 1) : (currentPage.value = 1);
 }
 </script>
-
-
-
-