From b9de8168bf27f619a735184996ceab839698dba7 Mon Sep 17 00:00:00 2001 From: tishoyanchev Date: Tue, 27 Jun 2023 11:32:32 +0200 Subject: [PATCH 01/49] added semiconductor icon --- .../components/src/components/spinner/spinner.scss | 13 +++++++++++++ .../components/src/components/spinner/spinner.tsx | 14 +++++++++++--- packages/components/src/index.html | 2 +- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/spinner/spinner.scss b/packages/components/src/components/spinner/spinner.scss index c0c72289a9..89ed2cfa31 100644 --- a/packages/components/src/components/spinner/spinner.scss +++ b/packages/components/src/components/spinner/spinner.scss @@ -29,6 +29,19 @@ animation: spin 2s linear infinite; } +.semiconductor { + width: 100%; + height: 100%; + animation: spin 2s linear infinite; + + &.s { + & svg { + width: 24px; + height: 24px; + } + } +} + @keyframes spin { 0% { transform: rotate(0deg); diff --git a/packages/components/src/components/spinner/spinner.tsx b/packages/components/src/components/spinner/spinner.tsx index 46364b24b8..041bbc776d 100644 --- a/packages/components/src/components/spinner/spinner.tsx +++ b/packages/components/src/components/spinner/spinner.tsx @@ -8,12 +8,20 @@ import classNames from 'classnames'; }) export class Spinner { @Prop() size: string; + @Prop() variant: string; render() { return ( -
-
+
+
+ {this.variant === 'semiconductor' + &&
+ + + + + +
}
); } diff --git a/packages/components/src/index.html b/packages/components/src/index.html index 94b03321a6..d7f17c81ff 100644 --- a/packages/components/src/index.html +++ b/packages/components/src/index.html @@ -21,7 +21,7 @@ - + From 5f19342505df9f6c3bccb43f69f42641b4bfe01d Mon Sep 17 00:00:00 2001 From: tishoyanchev Date: Tue, 27 Jun 2023 11:37:23 +0200 Subject: [PATCH 02/49] added new icon to storybook --- packages/components-vue/lib/components.ts | 3 ++- packages/components/src/components/spinner/readme.md | 7 ++++--- .../components/src/components/spinner/spinner.stories.ts | 7 ++++++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts index 906b3651dc..f827eda2ab 100644 --- a/packages/components-vue/lib/components.ts +++ b/packages/components-vue/lib/components.ts @@ -306,7 +306,8 @@ export const IfxSidebarItem = /*@__PURE__*/ defineContainer( export const IfxSpinner = /*@__PURE__*/ defineContainer('ifx-spinner', undefined, [ - 'size' + 'size', + 'variant' ]); diff --git a/packages/components/src/components/spinner/readme.md b/packages/components/src/components/spinner/readme.md index 75c2d9b585..0aa0ef2661 100644 --- a/packages/components/src/components/spinner/readme.md +++ b/packages/components/src/components/spinner/readme.md @@ -7,9 +7,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | -------- | ----------- | -| `size` | `size` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ----------- | -------- | ----------- | +| `size` | `size` | | `string` | `undefined` | +| `variant` | `variant` | | `string` | `undefined` | ---------------------------------------------- diff --git a/packages/components/src/components/spinner/spinner.stories.ts b/packages/components/src/components/spinner/spinner.stories.ts index 13cb708066..3f5515350b 100644 --- a/packages/components/src/components/spinner/spinner.stories.ts +++ b/packages/components/src/components/spinner/spinner.stories.ts @@ -2,17 +2,22 @@ export default { title: 'Components/Spinner', args: { size: "m", + variant: 'border' }, argTypes: { size: { options: ['s', 'm'], control: { type: 'radio' }, }, + variant: { + options: ['border', 'semiconductor'], + control: { type: 'radio'} + } }, } const DefaultTemplate = (args) => - ``; + ``; export const Default = DefaultTemplate.bind({}); Default.argsTypes = { From 948ba31ca899b3fae7054a5901eae6fbca2235d5 Mon Sep 17 00:00:00 2001 From: tishoyanchev Date: Tue, 27 Jun 2023 11:56:29 +0200 Subject: [PATCH 03/49] added to example apps --- .../react-javascript/src/App.js | 33 +--------- .../src/components/Spinner/Spinner.js | 14 +++++ .../react-typescript/src/App.tsx | 63 ++----------------- .../src/Components/Spinner/Spinner.tsx | 12 ++++ .../vue-javascript/src/App.vue | 2 + .../vue-javascript/src/components/Spinner.vue | 24 +++++++ .../vue-typescript/src/App.vue | 3 + .../vue-typescript/src/components/Spinner.vue | 24 +++++++ 8 files changed, 86 insertions(+), 89 deletions(-) create mode 100644 examples/wrapper-components/react-javascript/src/components/Spinner/Spinner.js create mode 100644 examples/wrapper-components/react-typescript/src/Components/Spinner/Spinner.tsx create mode 100644 examples/wrapper-components/vue-javascript/src/components/Spinner.vue create mode 100644 examples/wrapper-components/vue-typescript/src/components/Spinner.vue diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js index d818cb50a8..635c59c975 100644 --- a/examples/wrapper-components/react-javascript/src/App.js +++ b/examples/wrapper-components/react-javascript/src/App.js @@ -1,14 +1,5 @@ import './App.css'; - -import Button from './components/Button/button'; - -import TextField from './components/TextFIeld/TextField'; - -import ProgressBar from './components/ProgressBar/ProgressBar'; - -import SearchBar from './components/SearchBar/SearchBar'; -import Accordion from './components/Accordion/Accordion'; - + import Spinner from './components/Spinner/Spinner'; function App() { @@ -17,27 +8,7 @@ function App() { return (
-

Stencil Framework integration - React + JS

- -

Search Bar

- -
- -

Button

-
) diff --git a/examples/wrapper-components/react-javascript/src/components/Spinner/Spinner.js b/examples/wrapper-components/react-javascript/src/components/Spinner/Spinner.js new file mode 100644 index 0000000000..2c77cff240 --- /dev/null +++ b/examples/wrapper-components/react-javascript/src/components/Spinner/Spinner.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { IfxSpinner } from '@infineon/infineon-design-system-react'; + +function Spinner() { + return ( +
+ +
+ ) +} + +export default Spinner; + + diff --git a/examples/wrapper-components/react-typescript/src/App.tsx b/examples/wrapper-components/react-typescript/src/App.tsx index 548563ed50..e4d9ed93d0 100644 --- a/examples/wrapper-components/react-typescript/src/App.tsx +++ b/examples/wrapper-components/react-typescript/src/App.tsx @@ -1,68 +1,15 @@ -import { useRef, useState } from 'react' + import './App.css' -import { IfxProgressBar, IfxSearchBar, IfxButton, IfxTextInput } from '@infineon/infineon-design-system-react'; +import Spinner from './Components/Spinner/Spinner' function App() { - const [progressValue, setProgressValue] = useState(25); // Add this line - const ifxButtonRef = useRef(null); - - const [input, setInput] = useState(''); - const handleIfxInput = (e: CustomEvent) => { - console.log('ifxInput event emitted with value:', e.detail); - setInput(e.detail); - } - - // Define your methods here - const updateProgressOnClick = () => { - setProgressValue((currentValue) => { - return currentValue < 100 ? currentValue += 10 : currentValue = 10; - }); - console.log("ifxButtonRef. ", ifxButtonRef.current) - }; - - const handleSearch = (event: CustomEvent) => { - console.log("handling search: ", event.detail?.detail) - }; - - - const handleMouseOver = () => { - console.log('Mouse over event detected'); - }; return ( - <> -
-

Stencil Framework integration - React + TS

-

Ifx-Search-Bar

- -
- -

Ifx-Progress-Bar

- -
- - - Increase by 10 - -

Text Input

-
- Label - -
-

Text field value: {input}

-
-
- - +
+ +
) } diff --git a/examples/wrapper-components/react-typescript/src/Components/Spinner/Spinner.tsx b/examples/wrapper-components/react-typescript/src/Components/Spinner/Spinner.tsx new file mode 100644 index 0000000000..c175b62ac9 --- /dev/null +++ b/examples/wrapper-components/react-typescript/src/Components/Spinner/Spinner.tsx @@ -0,0 +1,12 @@ +import { IfxSpinner } from '@infineon/infineon-design-system-react'; + +function Spinner() { + return ( +
+ +
+ ) +} + +export default Spinner; + diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue index b31c81dcb2..cc93c45d7f 100644 --- a/examples/wrapper-components/vue-javascript/src/App.vue +++ b/examples/wrapper-components/vue-javascript/src/App.vue @@ -7,6 +7,7 @@ + @@ -17,6 +18,7 @@ import Checkbox from './components/Checkbox.vue' import ProgressBar from './components/ProgressBar.vue' import Search from './components/Search.vue' import TextInput from './components/TextInput.vue' +import Spinner from './components/Spinner.vue' diff --git a/examples/wrapper-components/vue-javascript/src/components/Spinner.vue b/examples/wrapper-components/vue-javascript/src/components/Spinner.vue new file mode 100644 index 0000000000..998ebd2877 --- /dev/null +++ b/examples/wrapper-components/vue-javascript/src/components/Spinner.vue @@ -0,0 +1,24 @@ + + + + + + + + + \ No newline at end of file diff --git a/examples/wrapper-components/vue-typescript/src/App.vue b/examples/wrapper-components/vue-typescript/src/App.vue index f1d0d3b849..b7b5d3bc12 100644 --- a/examples/wrapper-components/vue-typescript/src/App.vue +++ b/examples/wrapper-components/vue-typescript/src/App.vue @@ -8,6 +8,7 @@ + @@ -18,6 +19,8 @@ import Checkbox from './components/Checkbox.vue' import ProgressBar from './components/ProgressBar.vue' import Search from './components/Search.vue' import TextInput from './components/TextInput.vue' +import Spinner from './components/Spinner.vue' + diff --git a/examples/wrapper-components/vue-typescript/src/components/Spinner.vue b/examples/wrapper-components/vue-typescript/src/components/Spinner.vue new file mode 100644 index 0000000000..998ebd2877 --- /dev/null +++ b/examples/wrapper-components/vue-typescript/src/components/Spinner.vue @@ -0,0 +1,24 @@ + + + + + + + + + \ No newline at end of file From 6af16886c37e385f4e89130908fa8dce3205ce02 Mon Sep 17 00:00:00 2001 From: tishoyanchev Date: Tue, 27 Jun 2023 12:56:02 +0200 Subject: [PATCH 04/49] no commit --- packages/components/src/index.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/components/src/index.html b/packages/components/src/index.html index 94b03321a6..c27c5cd522 100644 --- a/packages/components/src/index.html +++ b/packages/components/src/index.html @@ -21,8 +21,12 @@ - - + + Item One + Item Two + Item Three + Item Four + From bc5fcbb48a5334d92bdfc2fe4ed1b58d329edadb Mon Sep 17 00:00:00 2001 From: tishoyanchev Date: Tue, 27 Jun 2023 16:04:57 +0200 Subject: [PATCH 05/49] cleaned sidebar --- packages/components-vue/lib/components.ts | 11 +- .../components/icon/infineonIconStencil.tsx | 5 +- .../components/src/components/icon/readme.md | 7 ++ .../src/components/sidebar/readme.md | 8 +- .../src/components/sidebar/sidebar-item.scss | 15 +-- .../src/components/sidebar/sidebar-item.tsx | 23 ++-- .../src/components/sidebar/sidebar.scss | 119 ++++++++++-------- .../src/components/sidebar/sidebar.stories.ts | 13 +- .../src/components/sidebar/sidebar.tsx | 6 +- packages/components/src/index.html | 10 +- 10 files changed, 125 insertions(+), 92 deletions(-) diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts index 906b3651dc..8091712c0e 100644 --- a/packages/components-vue/lib/components.ts +++ b/packages/components-vue/lib/components.ts @@ -152,7 +152,8 @@ export const IfxFooterColumn = /*@__PURE__*/ defineContainer('ifx-icon', undefined, [ 'icon', - 'ifxIcon' + 'ifxIcon', + 'consoleError' ]); @@ -297,11 +298,15 @@ export const IfxSearchInput = /*@__PURE__*/ defineContainer('ifx-select-input', undefined); -export const IfxSidebar = /*@__PURE__*/ defineContainer('ifx-sidebar', undefined); +export const IfxSidebar = /*@__PURE__*/ defineContainer('ifx-sidebar', undefined, [ + 'applicationName' +]); export const IfxSidebarItem = /*@__PURE__*/ defineContainer('ifx-sidebar-item', undefined, [ - 'icon' + 'icon', + 'href', + 'target' ]); diff --git a/packages/components/src/components/icon/infineonIconStencil.tsx b/packages/components/src/components/icon/infineonIconStencil.tsx index 4631e15cf1..bd7f94b2b3 100644 --- a/packages/components/src/components/icon/infineonIconStencil.tsx +++ b/packages/components/src/components/icon/infineonIconStencil.tsx @@ -1,4 +1,4 @@ -import { Component, Prop, h, Host } from '@stencil/core'; +import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core'; import { getIcon } from '@infineon/infineon-icons' @@ -10,6 +10,7 @@ import { getIcon } from '@infineon/infineon-icons' export class InfineonIconStencil { @Prop({ mutable: true }) icon: string = "" @Prop({ mutable: true }) ifxIcon: any; + @Event() consoleError: EventEmitter; convertStringToHtml(htmlString) { const div = document.createElement('div') @@ -54,9 +55,11 @@ export class InfineonIconStencil { const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent) const svgPath = this.convertPathsToVnode(htmlPath) const SVG = this.getSVG(svgPath) + this.consoleError.emit(false) return SVG; } else { console.error('Icon not found!') + this.consoleError.emit(true) return "" } } diff --git a/packages/components/src/components/icon/readme.md b/packages/components/src/components/icon/readme.md index 9ea4e192eb..534a00fd21 100644 --- a/packages/components/src/components/icon/readme.md +++ b/packages/components/src/components/icon/readme.md @@ -13,6 +13,13 @@ | `ifxIcon` | `ifx-icon` | | `any` | `undefined` | +## Events + +| Event | Description | Type | +| -------------- | ----------- | ---------------------- | +| `consoleError` | | `CustomEvent` | + + ## Dependencies ### Used by diff --git a/packages/components/src/components/sidebar/readme.md b/packages/components/src/components/sidebar/readme.md index 84b4b1468c..c77279c420 100644 --- a/packages/components/src/components/sidebar/readme.md +++ b/packages/components/src/components/sidebar/readme.md @@ -7,9 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------- | -------- | ------- | -| `icon` | `icon` | | `string` | `""` | +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | --------- | +| `href` | `href` | | `string` | `""` | +| `icon` | `icon` | | `string` | `""` | +| `target` | `target` | | `string` | `"_self"` | ## Dependencies diff --git a/packages/components/src/components/sidebar/sidebar-item.scss b/packages/components/src/components/sidebar/sidebar-item.scss index d62467f4e5..f76bb3664b 100644 --- a/packages/components/src/components/sidebar/sidebar-item.scss +++ b/packages/components/src/components/sidebar/sidebar-item.scss @@ -5,22 +5,23 @@ flex-direction: row; align-items: center; width: 100%; - padding: 8px 4px 8px 0px; + //padding: 8px 4px 8px 0px; + padding: 0px 4px 0px 0px; gap: 4px; flex: none; order: 0; flex-grow: 0; + text-decoration: none; + color: #1D1D1D; & .sidebar__nav-item-icon-wrapper { - display: flex; //why is this causing a gap? - flex-direction: row; + display: flex; + width: 24px; + height: 24px; justify-content: center; align-items: center; - padding: 0px; gap: 8px; - flex: none; - order: 0; - flex-grow: 0; + flex-shrink: 0; &.noIcon { display: none; diff --git a/packages/components/src/components/sidebar/sidebar-item.tsx b/packages/components/src/components/sidebar/sidebar-item.tsx index b74be3b62d..7e41d98285 100644 --- a/packages/components/src/components/sidebar/sidebar-item.tsx +++ b/packages/components/src/components/sidebar/sidebar-item.tsx @@ -1,4 +1,4 @@ -import { Component, h, Prop, Element, State } from '@stencil/core'; +import { Component, h, Prop, Element, State, Listen } from '@stencil/core'; @Component({ tag: 'ifx-sidebar-item', @@ -9,21 +9,22 @@ export class SidebarItem { @Element() el; @Prop() icon: string = "" @State() hasIcon: boolean = false; + @State() hasIconWrapper: boolean = false; + @Prop() href: string = "" + @Prop() target: string = "_self" - componentDidLoad() { - //random change - const iconWrapper = this.el.shadowRoot.querySelector('ifx-icon') - if (iconWrapper) { - const icon = iconWrapper.querySelector('svg') - if (!icon) { - this.hasIcon = false; - } else this.hasIcon = true; + @Listen('consoleError') + handleConsoleError(event: CustomEvent) { + if(event.detail) { + this.hasIcon = false; + } else { + this.hasIcon = true; } } render() { return ( - - +