Merge branch 'master' into 1416-new-component-segmented-controls

Infineon · Oct 22, 2024 · 59250ca · 59250ca
2 parents c39fca1 + 31d1b2c
commit 59250ca
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 13,791 deletions.
diff --git a/examples/wrapper-components/react-vite-js/package-lock.json b/examples/wrapper-components/react-vite-js/package-lock.json
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,8 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+    "@infineon/infineon-design-system-react": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
+    "@infineon/infineon-design-system-stencil": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

diff --git a/examples/wrapper-components/vue-javascript/package.json b/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": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+    "@infineon/infineon-design-system-vue": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "vite": "^5.0.12",

diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "command": {
     "publish": {
       "verifyAccess": false

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+    "@infineon/infineon-design-system-angular": "^25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0"
+    "@infineon/infineon-design-system-stencil": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,12 +28,11 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+    "@infineon/infineon-design-system-stencil": "^25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "resolutions": {
-    "@infineon/infineon-design-system-stencil": "25.12.0--canary.1425.878b53492c57674e9ee5bdcd868461f3213f7d6e.0",
-    "@stencil/react-output-target": "0.7.1"
+    "@infineon/infineon-design-system-stencil": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0"
   },
   "auto": {
     "plugins": [

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.3",
-    "@infineon/infineon-design-system-stencil": "^25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0"
+    "@infineon/infineon-design-system-stencil": "^25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0"
   },
   "auto": {
     "plugins": [

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "25.12.0--canary.1425.3c83e25071fab55aa7d76c4748457beea628609d.0",
+  "version": "25.12.0--canary.1503.ad49b651a076acc83c8b6857c553d2c0bb92cb49.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

diff --git a/packages/components/src/components/accordion/accordion.stories.tsx b/packages/components/src/components/accordion/accordion.stories.tsx
@@ -7,10 +7,17 @@ export default {
 
   args: {
     autoCollapse: false,
+    AriaLevel: 3,
   },
 
   argTypes: {
     amountOfItems: { control: 'number' },
+    AriaLevel: { 
+      control: 'number', 
+      min: 1, 
+      max: 6, 
+      description: 'The aria-level attribute for the accordion item header.' 
+    },
   },
 };
 
@@ -19,6 +26,7 @@ const Template = args => {
   const initialItem = document.createElement('ifx-accordion-item');
   initialItem.setAttribute('caption', `Label`);
   initialItem.setAttribute('open', `true`);
+  initialItem.setAttribute('aria-level', args.AriaLevel);
 
   initialItem.innerHTML = `
   Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
@@ -35,9 +43,12 @@ const Template = args => {
     const item = document.createElement('ifx-accordion-item');
     item.setAttribute('caption', `Label`);
     item.setAttribute('open', `false`);
+    item.setAttribute('aria-level', args.AriaLevel);
 
     item.innerHTML = `
-        Content for Item #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
+        Content for Item #${
+          i + 1
+        }. 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.
     `;

diff --git a/packages/components/src/components/accordion/accordion.tsx b/packages/components/src/components/accordion/accordion.tsx
@@ -4,7 +4,7 @@ import { Component, h, Listen, Element, Prop } from '@stencil/core';
 @Component({
   tag: 'ifx-accordion',
   styleUrl: 'accordion.scss',
-  shadow: true,
+  shadow: { delegatesFocus: true },
 })
 export class Accordion {
   @Element() el: HTMLElement;

diff --git a/packages/components/src/components/accordion/accordionItem.scss b/packages/components/src/components/accordion/accordionItem.scss
@@ -11,6 +11,24 @@
 
 }
 
+.accordion-title:focus {
+  outline: none;
+}
+
+// workaround to add corner radius to outline
+.accordion-title:focus::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border-radius: 5px;
+  border: 2px solid tokens.$ifxColorOcean500;
+  box-sizing: border-box;
+}
+
 .accordion-title:hover {
   border: 1px solid tokens.$ifxColorEngineering200;
   color: tokens.$ifxColorOcean600;
@@ -19,12 +37,14 @@
 .accordion-title {
   display: flex;
   align-items: center;
+  position: relative;
   padding: tokens.$ifxSpace150 tokens.$ifxSpace200;
   gap: tokens.$ifxSpace150;
   color: tokens.$ifxColorOcean500;
   background-color: tokens.$ifxColorBaseWhite;
   border: 1px solid tokens.$ifxColorEngineering200;
   cursor: pointer;
+  margin: 4px;
 }
 
 .accordion-caption {