From 7a545c227092e461325971a657941d2bd9324e38 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 12 May 2023 13:23:13 +0200 Subject: [PATCH] feat(core): integrate @siemens/ix-icons web components (#524) --- .gitignore | 5 + packages/angular-test-app/package.json | 2 +- packages/angular/package.json | 2 +- packages/core/component-doc.json | 183 ------------------ packages/core/package.json | 2 +- packages/core/src/components.d.ts | 37 ---- packages/core/src/components/icon/icon.scss | 38 ---- packages/core/src/components/icon/icon.tsx | 61 ------ .../src/components/icon/test/cw-icon.spec.tsx | 41 ---- .../components/my-component/my-component.tsx | 1 + packages/core/src/index.ts | 18 +- packages/documentation/package.json | 2 +- .../src/components/Card.module.css | 39 ++-- .../documentation/src/components/Card.tsx | 9 +- packages/documentation/src/css/custom.css | 4 + packages/html-test-app/package.json | 2 +- packages/react-test-app/package.json | 2 +- packages/react/package.json | 2 +- packages/vue-test-app/package.json | 2 +- packages/vue/package.json | 2 +- packages/vue/src/components.ts | 3 +- yarn.lock | 12 +- 22 files changed, 64 insertions(+), 405 deletions(-) delete mode 100644 packages/core/src/components/icon/icon.scss delete mode 100644 packages/core/src/components/icon/icon.tsx delete mode 100644 packages/core/src/components/icon/test/cw-icon.spec.tsx diff --git a/.gitignore b/.gitignore index 4804430bbd7..ae7186c03c3 100644 --- a/.gitignore +++ b/.gitignore @@ -167,3 +167,8 @@ packages/documentation/docs/auto-generated/ packages/documentation/static/auto-generated/ packages/documentation/static/webcomponent-examples/* !packages/documentation/static/versioned_examples/*/webcomponent-examples + +### +# artifact from bundle @siemens/ix-icons +### +ix-icons/dist/collection/components/icon/icon.css diff --git a/packages/angular-test-app/package.json b/packages/angular-test-app/package.json index 388761aafb5..c3cbf53bcf9 100644 --- a/packages/angular-test-app/package.json +++ b/packages/angular-test-app/package.json @@ -18,7 +18,7 @@ "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", - "@siemens/ix-icons": "~1.0.0", + "@siemens/ix-icons": "1.1.0-beta.1", "@siemens/ix": "~1.5.0", "@siemens/ix-aggrid": "~1.5.0", "@siemens/ix-angular": "~1.5.0", diff --git a/packages/angular/package.json b/packages/angular/package.json index baeff6006a1..99327e3b245 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -17,7 +17,7 @@ "license": "MIT", "dependencies": { "@siemens/ix": "~1.5.0", - "@siemens/ix-icons": "~1.0.0" + "@siemens/ix-icons": "1.1.0-beta.1" }, "peerDependencies": { "@angular/core": ">=13.3.12" diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 0f9abb975c7..55dffbc42be 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -3922,189 +3922,6 @@ } ] }, - { - "dirPath": "./src/components/icon", - "filePath": "./src/components/icon/icon.tsx", - "fileName": "icon.tsx", - "readmePath": "./src/components/icon/readme.md", - "usagesDir": "./src/components/icon/usage", - "tag": "ix-icon", - "overview": "", - "usage": {}, - "docs": "", - "docsTags": [], - "encapsulation": "scoped", - "dependents": [ - "ix-animated-tabs", - "ix-blind", - "ix-breadcrumb", - "ix-category-filter", - "ix-chip", - "ix-date-picker", - "ix-dropdown-button", - "ix-dropdown-item", - "ix-expanding-search", - "ix-filter-chip", - "ix-group", - "ix-group-item", - "ix-icon-button", - "ix-kpi", - "ix-map-navigation-overlay", - "ix-menu-about-news", - "ix-message-bar", - "ix-modal", - "ix-pill", - "ix-select", - "ix-split-button", - "ix-toast", - "ix-tree-item", - "ix-workflow-step" - ], - "dependencies": [], - "dependencyGraph": { - "ix-animated-tabs": [ - "ix-icon" - ], - "ix-blind": [ - "ix-icon" - ], - "ix-breadcrumb": [ - "ix-icon" - ], - "ix-category-filter": [ - "ix-icon" - ], - "ix-chip": [ - "ix-icon" - ], - "ix-date-picker": [ - "ix-icon" - ], - "ix-dropdown-button": [ - "ix-icon" - ], - "ix-dropdown-item": [ - "ix-icon" - ], - "ix-expanding-search": [ - "ix-icon" - ], - "ix-filter-chip": [ - "ix-icon" - ], - "ix-group": [ - "ix-icon" - ], - "ix-group-item": [ - "ix-icon" - ], - "ix-icon-button": [ - "ix-icon" - ], - "ix-kpi": [ - "ix-icon" - ], - "ix-map-navigation-overlay": [ - "ix-icon" - ], - "ix-menu-about-news": [ - "ix-icon" - ], - "ix-message-bar": [ - "ix-icon" - ], - "ix-modal": [ - "ix-icon" - ], - "ix-pill": [ - "ix-icon" - ], - "ix-select": [ - "ix-icon" - ], - "ix-split-button": [ - "ix-icon" - ], - "ix-toast": [ - "ix-icon" - ], - "ix-tree-item": [ - "ix-icon" - ], - "ix-workflow-step": [ - "ix-icon" - ] - }, - "props": [ - { - "name": "color", - "type": "string", - "mutable": false, - "attr": "color", - "reflectToAttr": false, - "docs": "Color of the icon", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "name", - "type": "string", - "mutable": false, - "attr": "name", - "reflectToAttr": true, - "docs": "Use one of our defined icon names e.g. `copy`.", - "docsTags": [], - "values": [ - { - "type": "string" - } - ], - "optional": false, - "required": false - }, - { - "name": "size", - "type": "\"12\" | \"16\" | \"24\" | \"32\"", - "mutable": false, - "attr": "size", - "reflectToAttr": false, - "docs": "Size of the icon", - "docsTags": [], - "values": [ - { - "value": "12", - "type": "string" - }, - { - "value": "16", - "type": "string" - }, - { - "value": "24", - "type": "string" - }, - { - "value": "32", - "type": "string" - } - ], - "optional": false, - "required": false - } - ], - "methods": [], - "events": [], - "styles": [], - "slots": [], - "parts": [], - "listeners": [] - }, { "dirPath": "./src/components/icon-button", "filePath": "./src/components/icon-button/icon-button.tsx", diff --git a/packages/core/package.json b/packages/core/package.json index 9acff27a9c9..6ab7a1ce32a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -51,7 +51,7 @@ }, "devDependencies": { "@playwright/test": "^1.32.1", - "@siemens/ix-icons": "~1.0.0", + "@siemens/ix-icons": "1.1.0-beta.1", "@stencil/vue-output-target": "^0.7.0", "@stencil-community/eslint-plugin": "^0.5.0", "@stencil-community/postcss": "^2.1.0", diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index a05bb510c6e..2259a19deac 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -734,20 +734,6 @@ export namespace Components { */ "text": string; } - interface IxIcon { - /** - * Color of the icon - */ - "color": string; - /** - * Use one of our defined icon names e.g. `copy`. - */ - "name": string; - /** - * Size of the icon - */ - "size": '12' | '16' | '24' | '32'; - } interface IxIconButton { /** * Color of icon in button @@ -2041,12 +2027,6 @@ declare global { prototype: HTMLIxGroupItemElement; new (): HTMLIxGroupItemElement; }; - interface HTMLIxIconElement extends Components.IxIcon, HTMLStencilElement { - } - var HTMLIxIconElement: { - prototype: HTMLIxIconElement; - new (): HTMLIxIconElement; - }; interface HTMLIxIconButtonElement extends Components.IxIconButton, HTMLStencilElement { } var HTMLIxIconButtonElement: { @@ -2337,7 +2317,6 @@ declare global { "ix-group-context-menu": HTMLIxGroupContextMenuElement; "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement; "ix-group-item": HTMLIxGroupItemElement; - "ix-icon": HTMLIxIconElement; "ix-icon-button": HTMLIxIconButtonElement; "ix-index-button": HTMLIxIndexButtonElement; "ix-input-group": HTMLIxInputGroupElement; @@ -3167,20 +3146,6 @@ declare namespace LocalJSX { */ "text"?: string; } - interface IxIcon { - /** - * Color of the icon - */ - "color"?: string; - /** - * Use one of our defined icon names e.g. `copy`. - */ - "name"?: string; - /** - * Size of the icon - */ - "size"?: '12' | '16' | '24' | '32'; - } interface IxIconButton { /** * Color of icon in button @@ -4225,7 +4190,6 @@ declare namespace LocalJSX { "ix-group-context-menu": IxGroupContextMenu; "ix-group-dropdown-item": IxGroupDropdownItem; "ix-group-item": IxGroupItem; - "ix-icon": IxIcon; "ix-icon-button": IxIconButton; "ix-index-button": IxIndexButton; "ix-input-group": IxInputGroup; @@ -4314,7 +4278,6 @@ declare module "@stencil/core" { "ix-group-context-menu": LocalJSX.IxGroupContextMenu & JSXBase.HTMLAttributes; "ix-group-dropdown-item": LocalJSX.IxGroupDropdownItem & JSXBase.HTMLAttributes; "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes; - "ix-icon": LocalJSX.IxIcon & JSXBase.HTMLAttributes; "ix-icon-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes; "ix-index-button": LocalJSX.IxIndexButton & JSXBase.HTMLAttributes; "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/icon/icon.scss b/packages/core/src/components/icon/icon.scss deleted file mode 100644 index 116aef6a76d..00000000000 --- a/packages/core/src/components/icon/icon.scss +++ /dev/null @@ -1,38 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -@import 'common-variables'; - -:host { - display: inline-flex; - height: $large-space; - width: $large-space; - - color: var(--theme-color-std-text); - - i { - color: inherit; - transition: color $default-time; - } -} - -:host(.size-12) { - height: $medium-space; - width: $medium-space; -} - -:host(.size-16) { - height: $default-space; - width: $default-space; -} - -:host(.size-32) { - height: $x-large-space; - width: $x-large-space; -} diff --git a/packages/core/src/components/icon/icon.tsx b/packages/core/src/components/icon/icon.tsx deleted file mode 100644 index c4d2902ecfe..00000000000 --- a/packages/core/src/components/icon/icon.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { Component, h, Host, Prop } from '@stencil/core'; - -@Component({ - tag: 'ix-icon', - styleUrl: 'icon.scss', - scoped: true, -}) -export class Icon { - /** - * Size of the icon - */ - @Prop() size: '12' | '16' | '24' | '32'; - - /** - * Color of the icon - */ - @Prop() color: string; - - /** - * Use one of our defined icon names e.g. `copy`. - */ - @Prop({ reflect: true }) name: string; - - render() { - return ( - - - - - - ); - } -} diff --git a/packages/core/src/components/icon/test/cw-icon.spec.tsx b/packages/core/src/components/icon/test/cw-icon.spec.tsx deleted file mode 100644 index 1b5dd7489c5..00000000000 --- a/packages/core/src/components/icon/test/cw-icon.spec.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2023 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { newSpecPage } from '@stencil/core/testing'; -import { Icon } from '../icon'; - -describe('ix-icon', () => { - it('renders', async () => { - const page = await newSpecPage({ - components: [Icon], - html: '', - }); - - expect(page.root).toEqualHtml(` - - - - `); - }); - - it('renders different sizes', async () => { - const page = await newSpecPage({ - components: [Icon], - html: '', - }); - - expect(page.root).toEqualHtml( - ` - - - - ` - ); - }); -}); diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx index 1d000b75d17..2dbca57482c 100644 --- a/packages/core/src/components/my-component/my-component.tsx +++ b/packages/core/src/components/my-component/my-component.tsx @@ -8,6 +8,7 @@ */ import { Component, h, Host } from '@stencil/core'; + @Component({ tag: 'my-component', styleUrl: 'my-component.scss', diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index dd3fde05ba2..32f2e5f71f7 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -6,7 +6,11 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ - +import '@siemens/ix-icons'; +import type { + Components as IxIconsComponents, + JSX as IxIconsJSX, +} from '@siemens/ix-icons'; export * from './components'; export * from './components/category-filter/filter-state'; export * from './components/category-filter/input-state'; @@ -23,3 +27,15 @@ export { convertToRemString, } from './components/utils/rwd.util'; export * from './components/utils/theme-switcher'; + +declare module './components' { + export namespace Components { + export type IxIcon = IxIconsComponents.IxIcon; + } +} + +declare module './components' { + export namespace JSX { + export type IxIcon = IxIconsJSX.IxIcon; + } +} diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 3b6063793fe..07836e1d20e 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -26,7 +26,7 @@ "@siemens/html-test-app": "~1.5.0", "@siemens/ix": "~1.5.0", "@siemens/ix-echarts": "~1.5.0", - "@siemens/ix-icons": "~1.0.0", + "@siemens/ix-icons": "1.1.0-beta.1", "@siemens/ix-react": "~1.5.0", "@stackblitz/sdk": "^1.8.1", "@stencil/postcss": "^2.1.0", diff --git a/packages/documentation/src/components/Card.module.css b/packages/documentation/src/components/Card.module.css index 3f998bfe410..d39f4389190 100644 --- a/packages/documentation/src/components/Card.module.css +++ b/packages/documentation/src/components/Card.module.css @@ -64,29 +64,6 @@ height: 100%; } -.Icon { - display: flex; - position: relative; - align-items: center; - justify-content: center; - height: 100%; -} - -.Icon ix-icon { - width: 100%; - height: 100%; -} - -.Icon ix-icon i { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: 9rem; - color: var(--theme-color-std-text) !important; -} - .Card__Primary { background-color: var(--theme-color-primary); } @@ -95,6 +72,20 @@ color: var(--theme-color-inv-std-text); } -.Card__Primary .Icon ix-icon i { +.Card__Primary .Icon ix-icon { color: var(--theme-color-inv-std-text) !important; } + +.Icon { + display: flex; + position: relative; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; + color: var(--theme-color-std-text); +} + +.Icon ix-icon { + transform: scale(4.5); +} diff --git a/packages/documentation/src/components/Card.tsx b/packages/documentation/src/components/Card.tsx index 00a9809e1db..969c7c839a9 100644 --- a/packages/documentation/src/components/Card.tsx +++ b/packages/documentation/src/components/Card.tsx @@ -10,6 +10,7 @@ import Link from '@docusaurus/Link'; import { useDocsPreferredVersion } from '@docusaurus/theme-common'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import { IxIcon } from '@siemens/ix-react'; import clsx from 'clsx'; import React, { CSSProperties } from 'react'; import styles from './Card.module.css'; @@ -40,10 +41,6 @@ export function Card( return useBaseUrl(`${path}/${props.link}`); } - function getIcon() { - //@ts-ignore - return ; - } return (
-
{getIcon()}
+
+ +
) : null} diff --git a/packages/documentation/src/css/custom.css b/packages/documentation/src/css/custom.css index d252a0c4f58..8a0df98ecd7 100644 --- a/packages/documentation/src/css/custom.css +++ b/packages/documentation/src/css/custom.css @@ -177,6 +177,10 @@ aside { text-decoration: auto; } +.menu__link--sublist-caret { + text-decoration: none !important; +} + .menu__link--sublist::after { display: none !important; } diff --git a/packages/html-test-app/package.json b/packages/html-test-app/package.json index c6fa23865c4..2a48a161ead 100644 --- a/packages/html-test-app/package.json +++ b/packages/html-test-app/package.json @@ -18,6 +18,6 @@ "@siemens/ix": "~1.5.0", "@siemens/ix-aggrid": "~1.5.0", "@siemens/ix-echarts": "~1.5.0", - "@siemens/ix-icons": "~1.0.0" + "@siemens/ix-icons": "1.1.0-beta.1" } } diff --git a/packages/react-test-app/package.json b/packages/react-test-app/package.json index 5d25953ad5f..020d29b9b2e 100644 --- a/packages/react-test-app/package.json +++ b/packages/react-test-app/package.json @@ -12,7 +12,7 @@ "dependencies": { "@siemens/ix": "~1.5.0", "@siemens/ix-aggrid": "~1.5.0", - "@siemens/ix-icons": "~1.0.0", + "@siemens/ix-icons": "1.1.0-beta.1", "@siemens/ix-react": "~1.5.0", "ag-grid-community": "^29.1.0", "ag-grid-react": "^29.1.0", diff --git a/packages/react/package.json b/packages/react/package.json index 0fb02bdec0d..dde50d33714 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -52,6 +52,6 @@ }, "dependencies": { "@siemens/ix": "~1.5.0", - "@siemens/ix-icons": "~1.0.0" + "@siemens/ix-icons": "1.1.0-beta.1" } } diff --git a/packages/vue-test-app/package.json b/packages/vue-test-app/package.json index 147405f76f2..b348a2fb8b3 100644 --- a/packages/vue-test-app/package.json +++ b/packages/vue-test-app/package.json @@ -12,7 +12,7 @@ "dependencies": { "ag-grid-community": "^28.2.1", "@siemens/ix-vue": "~1.5.0", - "@siemens/ix-icons": "~1.0.0", + "@siemens/ix-icons": "1.1.0-beta.1", "@siemens/ix-aggrid": "~1.5.0", "ag-grid-vue3": "^28.2.1", "vue": "^3.2.45", diff --git a/packages/vue/package.json b/packages/vue/package.json index 9422c2c6e96..7d04b81d17b 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -32,7 +32,7 @@ }, "dependencies": { "@siemens/ix": "~1.5.0", - "@siemens/ix-icons": "~1.0.0" + "@siemens/ix-icons": "1.1.0-beta.1" }, "devDependencies": { "rimraf": "^3.0.2", diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index d9157237b2f..c8bf1e9a712 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -286,7 +286,8 @@ export const IxGroupItem = /*@__PURE__*/ defineContainer('ix-gr export const IxIcon = /*@__PURE__*/ defineContainer('ix-icon', undefined, [ 'size', 'color', - 'name' + 'name', + 'src' ]); diff --git a/yarn.lock b/yarn.lock index c32a856a9ab..cb23f4a9d55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3374,10 +3374,12 @@ resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df" integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ== -"@siemens/ix-icons@~1.0.0": - version "1.0.4" - resolved "https://registry.npmjs.org/@siemens/ix-icons/-/ix-icons-1.0.4.tgz#12d28ce7b594a4f669f00bf0be3274d660c8f700" - integrity sha512-A3odcGEdf1N4lYuXE8NcqrtJ7w1ijlClnLaHXa3xvAFyUHl+HL39GaMgxOUBuBJ7k+LiaY3wwFQnX+AotlXm+Q== +"@siemens/ix-icons@1.1.0-beta.1": + version "1.1.0-beta.1" + resolved "https://registry.npmjs.org/@siemens/ix-icons/-/ix-icons-1.1.0-beta.1.tgz#8b38e2f2ed6db46720237b2da9cc2a60089675e1" + integrity sha512-Z5om9JVUkHLhHvmDCo6OpRFqZNu6PlK0Gxblunx+ErzvGWzzruB3UXEgTlUYp84VHVw3/I5oLa5+p3nVG3ydug== + dependencies: + "@stencil/core" "^3.0.0" "@sinclair/typebox@^0.24.1": version "0.24.44" @@ -3450,7 +3452,7 @@ resolved "https://registry.yarnpkg.com/@stencil/angular-output-target/-/angular-output-target-0.5.0.tgz#5fd70c80ed12f9f67c2ceb2d03267602c76dadef" integrity sha512-U2I6dZdL8hvnogafG9IwtYRaAns5fQMacjee/3WNMRMYagrpz7R6cDdX4O0U8q6jks1ej91GchgZsQOVE9UcKg== -"@stencil/core@^3.2.1": +"@stencil/core@^3.0.0", "@stencil/core@^3.2.1": version "3.2.2" resolved "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz#cf3b4ffb7992d0197aa1987dbc5236c4eb98cb6b" integrity sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==