Skip to content

Commit db481e5

Browse files
tishoyanchevtishoyanchev
authored
Merge pull request #1640 from Infineon/1566-storybook-consistency-and-ui-enhancement
1566 storybook consistency and UI enhancement
2 parents e0aae4a + 61d9c28 commit db481e5

File tree

87 files changed

+5955
-6131
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+5955
-6131
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ function Accordion() {
1818
console.log("accordion item: ", accordionItem)
1919
}
2020

21-
const updateContent = () => {
21+
const updateContent = () => {
2222
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.
2323
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
2424
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.`)
2525
}
2626

2727
return (
2828
<div>
29-
<IfxAccordion auto-collapse={true} onIfxItemOpen={handleItems}>
29+
<IfxAccordion auto-collapse={true} onIfxOpen={handleItems}>
3030
<IfxAccordionItem initial-collapse={false} open={false} key={content} caption="Label" ref={accordionItemRef}>
31-
<div>{content}</div>
31+
<div>{content}</div>
3232
</IfxAccordionItem>
3333
<IfxAccordionItem open={false} caption="Label">
3434
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‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@ function Breadcrumbs() {
88
<IfxBreadcrumbItem>
99
<IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 1</IfxBreadcrumbItemLabel>
1010
<IfxDropdownMenu>
11-
<IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
12-
<IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
13-
<IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
14-
<IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
11+
<IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
12+
<IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
13+
<IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
14+
<IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
1515
</IfxDropdownMenu>
1616
</IfxBreadcrumbItem>
1717

1818
<IfxBreadcrumbItem>
1919
<IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 2</IfxBreadcrumbItemLabel>
2020
<IfxDropdownMenu>
21-
<IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
22-
<IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
23-
<IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
24-
<IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
21+
<IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
22+
<IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
23+
<IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
24+
<IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
2525
</IfxDropdownMenu>
2626
</IfxBreadcrumbItem>
2727

2828
<IfxBreadcrumbItem>
29-
<IfxBreadcrumbItemLabel slot="label" icon="" url="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
29+
<IfxBreadcrumbItemLabel slot="label" icon="" href="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
3030
</IfxBreadcrumbItem>
3131
</IfxBreadcrumb>
3232
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
22
import { IfxTabs, IfxTab } from '@infineon/infineon-design-system-react';
33

44
function Tabs() {
5-
5+
66
const tabIndex = useRef(0);
77
const INTERVAL = 20000;
88

@@ -26,7 +26,7 @@ function Tabs() {
2626
}
2727

2828
return (
29-
<IfxTabs onIfxTabChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
29+
<IfxTabs onIfxChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
3030
<IfxTab header="tab header a" disabled={false} icon='c-check-16'>
3131
Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3232
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"test:local": "run-p preview:link watch:library"
1919
},
2020
"dependencies": {
21-
"@infineon/infineon-design-system-react": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
21+
"@infineon/infineon-design-system-react": "31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.0",
2222
"path": "^0.12.7",
2323
"react": "^18.3.1",
2424
"react-dom": "^18.3.1"

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef, useState } from 'react';
1+
import { useRef, useState } from 'react';
22
import { IfxAccordion, IfxAccordionItem, IfxButton } from '@infineon/infineon-design-system-react';
33

44
function Accordion() {
@@ -18,17 +18,17 @@ function Accordion() {
1818
console.log("accordion item: ", accordionItem)
1919
}
2020

21-
const updateContent = () => {
21+
const updateContent = () => {
2222
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.
2323
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
2424
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.`)
2525
}
2626

2727
return (
2828
<div>
29-
<IfxAccordion auto-collapse={true} onIfxItemOpen={handleItems}>
29+
<IfxAccordion auto-collapse={true} onIfxOpen={handleItems}>
3030
<IfxAccordionItem initial-collapse={false} open={false} key={content} caption="Label" ref={accordionItemRef}>
31-
<div>{content}</div>
31+
<div>{content}</div>
3232
</IfxAccordionItem>
3333
<IfxAccordionItem open={false} caption="Label">
3434
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‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IfxBreadcrumb, IfxBreadcrumbItem, IfxBreadcrumbItemLabel, IfxDropdownMenu, IfxDropdownItem } from '@infineon/infineon-design-system-react';
1+
import { IfxBreadcrumb, IfxBreadcrumbItem, IfxBreadcrumbItemLabel, IfxDropdownMenu, IfxDropdownItem } from '@infineon/infineon-design-system-react';
22

33
function Breadcrumbs() {
44
return (
@@ -7,25 +7,25 @@ function Breadcrumbs() {
77
<IfxBreadcrumbItem>
88
<IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 1</IfxBreadcrumbItemLabel>
99
<IfxDropdownMenu>
10-
<IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
11-
<IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
12-
<IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
13-
<IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
10+
<IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
11+
<IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
12+
<IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
13+
<IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
1414
</IfxDropdownMenu>
1515
</IfxBreadcrumbItem>
1616

1717
<IfxBreadcrumbItem>
1818
<IfxBreadcrumbItemLabel slot="label" icon="">Breadcrumb 2</IfxBreadcrumbItemLabel>
1919
<IfxDropdownMenu>
20-
<IfxDropdownItem url="http://google.com">Google</IfxDropdownItem>
21-
<IfxDropdownItem url="http://bing.com">Bing</IfxDropdownItem>
22-
<IfxDropdownItem url="http://yahoo.com">Yahoo</IfxDropdownItem>
23-
<IfxDropdownItem url="http://naver.com">Naver</IfxDropdownItem>
20+
<IfxDropdownItem href="http://google.com">Google</IfxDropdownItem>
21+
<IfxDropdownItem href="http://bing.com">Bing</IfxDropdownItem>
22+
<IfxDropdownItem href="http://yahoo.com">Yahoo</IfxDropdownItem>
23+
<IfxDropdownItem href="http://naver.com">Naver</IfxDropdownItem>
2424
</IfxDropdownMenu>
2525
</IfxBreadcrumbItem>
2626

2727
<IfxBreadcrumbItem>
28-
<IfxBreadcrumbItemLabel slot="label" icon="" url="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
28+
<IfxBreadcrumbItemLabel slot="label" icon="" href="http://google.com">Breadcrumb 3</IfxBreadcrumbItemLabel>
2929
</IfxBreadcrumbItem>
3030
</IfxBreadcrumb>
3131
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
22
import { IfxTabs, IfxTab } from '@infineon/infineon-design-system-react';
33

44
function Tabs() {
5-
6-
const [tabIndex, setTabIndex]= useState(0);
5+
6+
const [tabIndex, setTabIndex] = useState(0);
77
const INTERVAL = 20000;
88

99
useEffect(() => {
@@ -26,7 +26,7 @@ function Tabs() {
2626
}
2727

2828
return (
29-
<IfxTabs onIfxTabChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
29+
<IfxTabs onIfxChange={handleChange} active-tab-index={tabIndex} orientation="horizontal">
3030
<IfxTab header="tab header a" disabled={false} icon='c-check-16'>
3131
Content for Tab #1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3232
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"test:local": "run-p preview:link watch:library"
1616
},
1717
"dependencies": {
18-
"@infineon/infineon-design-system-vue": "30.15.0--canary.1696.ee2669aa2956c69a4c62caa9bb614b523153e291.0",
18+
"@infineon/infineon-design-system-vue": "31.0.0--canary.1640.e80c846ce332e4ddd95d97b8ad01c8da2d639e74.0",
1919
"@vitejs/plugin-vue": "^4.0.0",
2020
"@vitejs/plugin-vue-jsx": "^4.0.0",
2121
"vite": "^5.0.12",

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

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,46 @@
1-
2-
31
<template>
42
<div>
53
<h2>Accordion</h2>
6-
<ifx-accordion @ifxItemOpen="handleItems" auto-collapse="true">
7-
<ifx-accordion-item ref="accordionItemRef" initial-collapse="false" open="false" caption="Label">
8-
<div>{{ content }}</div>
9-
</ifx-accordion-item><ifx-accordion-item caption="Label">
10-
Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam
11-
bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
12-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
13-
cursus ipsum, nec egestas odio sapien eget neque.
14-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
15-
cursus ipsum, nec egestas odio sapien eget neque.
16-
</ifx-accordion-item><ifx-accordion-item caption="Label">
17-
Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam
18-
bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
19-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
20-
cursus ipsum, nec egestas odio sapien eget neque.
21-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
22-
cursus ipsum, nec egestas odio sapien eget neque.
23-
</ifx-accordion-item></ifx-accordion>
4+
<ifx-accordion @ifxOpen="handleItems" auto-collapse="true">
5+
<ifx-accordion-item
6+
ref="accordionItemRef"
7+
initial-collapse="false"
8+
open="false"
9+
caption="Label"
10+
>
11+
<div>{{ content }}</div> </ifx-accordion-item
12+
><ifx-accordion-item caption="Label">
13+
Content for Item #2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
14+
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
15+
odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
16+
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
17+
odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
18+
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
19+
odio sapien eget neque. </ifx-accordion-item
20+
><ifx-accordion-item caption="Label">
21+
Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
22+
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
23+
odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
24+
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
25+
odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
26+
Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas
27+
odio sapien eget neque.
28+
</ifx-accordion-item></ifx-accordion
29+
>
2430
<br />
25-
<ifx-button @click="handleButtonClick">Open/Close the first accordion item</ifx-button>
31+
<ifx-button @click="handleButtonClick"
32+
>Open/Close the first accordion item</ifx-button
33+
>
2634
<ifx-button @click="updateContent">Change Content dynamically</ifx-button>
2735
<br />
2836
<br />
2937
</div>
3038
</template>
3139

3240
<script setup>
33-
import { ref } from 'vue';
41+
import { ref } from "vue";
3442
const accordionItemRef = ref();
35-
const content = ref('Short content')
43+
const content = ref("Short content");
3644
3745
function handleItems(event) {
3846
console.log("An accordion item was opened. Event details:", event);
@@ -44,16 +52,12 @@ async function handleButtonClick() {
4452
console.log("accordion item: ", accordionItem);
4553
}
4654
47-
async function updateContent() {
55+
async function updateContent() {
4856
content.value = ` Content for Item #3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam
4957
bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
5058
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
5159
cursus ipsum, nec egestas odio sapien eget neque.
5260
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl
53-
cursus ipsum, nec egestas odio sapien eget neque.`
61+
cursus ipsum, nec egestas odio sapien eget neque.`;
5462
}
55-
5663
</script>
57-
58-
59-

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

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
1-
2-
31
<template>
42
<div>
53
<h2>Breadcrumbs</h2>
64
<div>
75
<ifx-breadcrumb>
86
<ifx-breadcrumb-item>
9-
<ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 1</ifx-breadcrumb-item-label>
7+
<ifx-breadcrumb-item-label slot="label" icon=""
8+
>Breadcrumb 1</ifx-breadcrumb-item-label
9+
>
1010
<ifx-dropdown-menu>
11-
<ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
12-
<ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
13-
<ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
14-
<ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
11+
<ifx-dropdown-item href="http://google.com">Google</ifx-dropdown-item>
12+
<ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
13+
<ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
14+
<ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
1515
</ifx-dropdown-menu>
1616
</ifx-breadcrumb-item>
1717

1818
<ifx-breadcrumb-item>
19-
<ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
19+
<ifx-breadcrumb-item-label slot="label" icon=""
20+
>Breadcrumb 2</ifx-breadcrumb-item-label
21+
>
2022
<ifx-dropdown-menu>
21-
<ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
22-
<ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
23-
<ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
24-
<ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
23+
<ifx-dropdown-item href="http://google.com">Google</ifx-dropdown-item>
24+
<ifx-dropdown-item href="http://bing.com">Bing</ifx-dropdown-item>
25+
<ifx-dropdown-item href="http://yahoo.com">Yahoo</ifx-dropdown-item>
26+
<ifx-dropdown-item href="http://naver.com">Naver</ifx-dropdown-item>
2527
</ifx-dropdown-menu>
2628
</ifx-breadcrumb-item>
2729

2830
<ifx-breadcrumb-item>
29-
<ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
31+
<ifx-breadcrumb-item-label slot="label" icon="" href="http://google.com"
32+
>Breadcrumb 3</ifx-breadcrumb-item-label
33+
>
3034
</ifx-breadcrumb-item>
3135
</ifx-breadcrumb>
3236
</div>
@@ -35,10 +39,4 @@
3539
</div>
3640
</template>
3741

38-
<script setup>
39-
40-
41-
</script>
42-
43-
44-
42+
<script setup></script>

0 commit comments

Comments
 (0)