diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts index cf63e3acd45..8cc00b76283 100644 --- a/packages/angular-test-app/src/app/app-routing.module.ts +++ b/packages/angular-test-app/src/app/app-routing.module.ts @@ -10,6 +10,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import AboutAndLegal from 'src/preview-examples/about-and-legal'; +import ActionCard from 'src/preview-examples/action-card'; import AGGrid from 'src/preview-examples/aggrid'; import BasicNavigation from 'src/preview-examples/basic-navigation'; import BasicNavigationWithOutHeader from 'src/preview-examples/basic-navigation-without-header'; @@ -21,6 +22,7 @@ import ButtonGroup from 'src/preview-examples/button-group'; import ButtonSelected from 'src/preview-examples/button-selected'; import ButtonWithIcon from 'src/preview-examples/button-with-icon'; import Buttons from 'src/preview-examples/buttons'; +import CardList from 'src/preview-examples/card-list'; import CategoryFilter from 'src/preview-examples/category-filter'; import CategoryFilterSuggestions from 'src/preview-examples/category-filter-suggestions'; import Checkbox from 'src/preview-examples/checkbox'; @@ -68,6 +70,7 @@ import Modal from 'src/preview-examples/modal'; import ModalByInstance from 'src/preview-examples/modal-by-instance'; import Pill from 'src/preview-examples/pill'; import PopoverNews from 'src/preview-examples/popover-news'; +import PushCard from 'src/preview-examples/push-card'; import Radiobutton from 'src/preview-examples/radio-button'; import Select from 'src/preview-examples/select'; import SelectEditable from 'src/preview-examples/select-editable'; @@ -278,6 +281,9 @@ const routes: Routes = [ { path: 'tooltip', component: Tooltip }, { path: 'tooltip-title', component: TooltipTitle }, { path: 'modal-by-instance', component: ModalByInstance }, + { path: 'push-card', component: PushCard }, + { path: 'action-card', component: ActionCard }, + { path: 'card-list', component: CardList }, { path: 'page-header', component: PageHeader }, { path: 'page-header-no-back', component: PageHeaderNoBack }, { path: 'empty-state', component: EmptyState }, diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts index 68623c3de87..caf81a64497 100644 --- a/packages/angular-test-app/src/app/app.module.ts +++ b/packages/angular-test-app/src/app/app.module.ts @@ -17,6 +17,7 @@ import { FormsModule } from '@angular/forms'; import { IxModule } from '@siemens/ix-angular'; import { AgGridModule } from 'ag-grid-angular'; import AboutAndLegal from 'src/preview-examples/about-and-legal'; +import ActionCard from 'src/preview-examples/action-card'; import AGGrid from 'src/preview-examples/aggrid'; import BasicNavigation from 'src/preview-examples/basic-navigation'; import BasicNavigationWithOutHeader from 'src/preview-examples/basic-navigation-without-header'; @@ -28,6 +29,7 @@ import ButtonGroup from 'src/preview-examples/button-group'; import ButtonSelected from 'src/preview-examples/button-selected'; import ButtonWithIcon from 'src/preview-examples/button-with-icon'; import Buttons from 'src/preview-examples/buttons'; +import CardList from 'src/preview-examples/card-list'; import CategoryFilter from 'src/preview-examples/category-filter'; import CategoryFilterSuggestions from 'src/preview-examples/category-filter-suggestions'; import Checkbox from 'src/preview-examples/checkbox'; @@ -76,6 +78,7 @@ import ModalByInstance from 'src/preview-examples/modal-by-instance'; import ModalByInstanceExample from 'src/preview-examples/modal-by-instance-content'; import Pill from 'src/preview-examples/pill'; import PopoverNews from 'src/preview-examples/popover-news'; +import PushCard from 'src/preview-examples/push-card'; import Radiobutton from 'src/preview-examples/radio-button'; import Select from 'src/preview-examples/select'; import SelectEditable from 'src/preview-examples/select-editable'; @@ -193,7 +196,9 @@ import { NavigationTestComponent } from './components/navigation-test.component' TooltipTitle, ModalByInstance, ModalByInstanceExample, - ContentHeader, + PushCard, + ActionCard, + CardList, EmptyState, EmptyStateCompact, EmptyStateCompactBreak, @@ -205,6 +210,7 @@ import { NavigationTestComponent } from './components/navigation-test.component' KeyValueListWithCustomValue, KeyValueListWithIcon, KeyValueListStriped, + ContentHeader, ContentHeaderNoBack, ], imports: [ diff --git a/packages/angular-test-app/src/preview-examples/action-card.html b/packages/angular-test-app/src/preview-examples/action-card.html new file mode 100644 index 00000000000..632602dbbb2 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/action-card.html @@ -0,0 +1,7 @@ + diff --git a/packages/angular-test-app/src/preview-examples/action-card.ts b/packages/angular-test-app/src/preview-examples/action-card.ts new file mode 100644 index 00000000000..9fb0e19f536 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/action-card.ts @@ -0,0 +1,20 @@ +/* + * 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 } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './action-card.html', +}) +export default class ActionCard { + onClick(event: Event) { + console.log(event); + } +} diff --git a/packages/angular-test-app/src/preview-examples/card-list.html b/packages/angular-test-app/src/preview-examples/card-list.html new file mode 100644 index 00000000000..2d38a5f97e0 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/card-list.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + diff --git a/packages/angular-test-app/src/preview-examples/card-list.ts b/packages/angular-test-app/src/preview-examples/card-list.ts new file mode 100644 index 00000000000..126e38c71f4 --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/card-list.ts @@ -0,0 +1,16 @@ +/* + * 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 } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './card-list.html', +}) +export default class CardList {} diff --git a/packages/angular-test-app/src/preview-examples/push-card.html b/packages/angular-test-app/src/preview-examples/push-card.html new file mode 100644 index 00000000000..5dd4bb6c0ef --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/push-card.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ diff --git a/packages/angular-test-app/src/preview-examples/push-card.ts b/packages/angular-test-app/src/preview-examples/push-card.ts new file mode 100644 index 00000000000..ab4c8bf69bc --- /dev/null +++ b/packages/angular-test-app/src/preview-examples/push-card.ts @@ -0,0 +1,16 @@ +/* + * 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 } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: './push-card.html', +}) +export default class PushCard {} diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index b80e3c0e082..4f333ab3e66 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -7,6 +7,28 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils'; import { Components } from '@siemens/ix'; +@ProxyCmp({ + inputs: ['heading', 'icon', 'selected', 'subheading', 'variant'] +}) +@Component({ + selector: 'ix-action-card', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['heading', 'icon', 'selected', 'subheading', 'variant'], +}) +export class IxActionCard { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxActionCard extends Components.IxActionCard {} + + @ProxyCmp({ inputs: ['count', 'icon'] }) @@ -205,6 +227,127 @@ export class IxButton { export declare interface IxButton extends Components.IxButton {} +@ProxyCmp({ + inputs: ['variant'] +}) +@Component({ + selector: 'ix-card', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['variant'], +}) +export class IxCard { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxCard extends Components.IxCard {} + + +@ProxyCmp({ +}) +@Component({ + selector: 'ix-card-accordion', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: [], +}) +export class IxCardAccordion { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxCardAccordion extends Components.IxCardAccordion {} + + +@ProxyCmp({ +}) +@Component({ + selector: 'ix-card-content', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: [], +}) +export class IxCardContent { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxCardContent extends Components.IxCardContent {} + + +@ProxyCmp({ + inputs: ['collapse', 'i18nMoreCards', 'i18nShowAll', 'label', 'listStyle', 'showAllCount', 'suppressOverflowHandling'] +}) +@Component({ + selector: 'ix-card-list', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['collapse', 'i18nMoreCards', 'i18nShowAll', 'label', 'listStyle', 'showAllCount', 'suppressOverflowHandling'], +}) +export class IxCardList { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['collapseChanged', 'showAllClick', 'showMoreCardClick']); + } +} + + +export declare interface IxCardList extends Components.IxCardList { + /** + * Fire event when the collapse state is changed by the user + */ + collapseChanged: EventEmitter>; + /** + * Fire event when the collapse state is changed by the user + */ + showAllClick: EventEmitter>; + /** + * Fire event when the show more card is clicked. + */ + showMoreCardClick: EventEmitter>; +} + + +@ProxyCmp({ +}) +@Component({ + selector: 'ix-card-title', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: [], +}) +export class IxCardTitle { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxCardTitle extends Components.IxCardTitle {} + + @ProxyCmp({ inputs: ['categories', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions'] }) @@ -1447,6 +1590,28 @@ export class IxPill { export declare interface IxPill extends Components.IxPill {} +@ProxyCmp({ + inputs: ['heading', 'icon', 'notification', 'subheading', 'variant'] +}) +@Component({ + selector: 'ix-push-card', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['heading', 'icon', 'notification', 'subheading', 'variant'], +}) +export class IxPushCard { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + + +export declare interface IxPushCard extends Components.IxPushCard {} + + @ProxyCmp({ inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices'] }) diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts index 253d68db620..2efa6c58b74 100644 --- a/packages/angular/src/declare-components.ts +++ b/packages/angular/src/declare-components.ts @@ -2,6 +2,7 @@ import * as d from './components'; export const DIRECTIVES = [ + d.IxActionCard, d.IxAnimatedTab, d.IxAnimatedTabs, d.IxApplicationHeader, @@ -10,6 +11,11 @@ export const DIRECTIVES = [ d.IxBreadcrumb, d.IxBreadcrumbItem, d.IxButton, + d.IxCard, + d.IxCardAccordion, + d.IxCardContent, + d.IxCardList, + d.IxCardTitle, d.IxCategoryFilter, d.IxChip, d.IxContentHeader, @@ -56,6 +62,7 @@ export const DIRECTIVES = [ d.IxModalExample, d.IxPagination, d.IxPill, + d.IxPushCard, d.IxSelect, d.IxSelectItem, d.IxSpinner, diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 72d1094c950..cf7899eb4fe 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -6,6 +6,159 @@ "typescriptVersion": "4.9.5" }, "components": [ + { + "dirPath": "./src/components/action-card", + "filePath": "./src/components/action-card/action-card.tsx", + "fileName": "action-card.tsx", + "readmePath": "./src/components/action-card/readme.md", + "usagesDir": "./src/components/action-card/usage", + "tag": "ix-action-card", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-card", + "ix-card-content", + "ix-icon", + "ix-typography" + ], + "dependencyGraph": { + "ix-action-card": [ + "ix-card", + "ix-card-content", + "ix-icon", + "ix-typography" + ] + }, + "props": [ + { + "name": "heading", + "type": "string", + "mutable": false, + "attr": "heading", + "reflectToAttr": false, + "docs": "Card heading", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "icon", + "type": "string", + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Card icon", + "docsTags": [], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "selected", + "type": "boolean", + "mutable": false, + "attr": "selected", + "reflectToAttr": false, + "docs": "Card selection", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "subheading", + "type": "string", + "mutable": false, + "attr": "subheading", + "reflectToAttr": false, + "docs": "Card subheading", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"", + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Card variant", + "docsTags": [], + "default": "'insight'", + "values": [ + { + "value": "alarm", + "type": "string" + }, + { + "value": "critical", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "insight", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "notification", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, { "dirPath": "./src/components/animated-tab", "filePath": "./src/components/animated-tab/animated-tab.tsx", @@ -537,6 +690,7 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [ + "ix-card-list", "ix-date-picker", "ix-datetime-picker", "ix-dropdown-button", @@ -547,6 +701,9 @@ ], "dependencies": [], "dependencyGraph": { + "ix-card-list": [ + "ix-button" + ], "ix-date-picker": [ "ix-button" ], @@ -593,7 +750,343 @@ "mutable": false, "attr": "ghost", "reflectToAttr": false, - "docs": "Button with no background or outline", + "docs": "Button with no background or outline", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "invisible", + "type": "boolean", + "mutable": false, + "attr": "invisible", + "reflectToAttr": false, + "docs": "Invisible button", + "docsTags": [ + { + "name": "deprecated", + "text": "use ghost property" + } + ], + "default": "false", + "deprecation": "use ghost property", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "outline", + "type": "boolean", + "mutable": false, + "attr": "outline", + "reflectToAttr": false, + "docs": "Outline button", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "selected", + "type": "boolean", + "mutable": false, + "attr": "selected", + "reflectToAttr": false, + "docs": "Show button as selected. Should be used with outline or ghost", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, + { + "name": "type", + "type": "\"button\" | \"submit\"", + "mutable": false, + "attr": "type", + "reflectToAttr": false, + "docs": "Type of the button", + "docsTags": [], + "default": "'button'", + "values": [ + { + "value": "button", + "type": "string" + }, + { + "value": "submit", + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "variant", + "type": "\"Primary\" | \"Secondary\"", + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Button variant", + "docsTags": [], + "default": "'Primary'", + "values": [ + { + "value": "Primary", + "type": "string" + }, + { + "value": "Secondary", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "./src/components/card", + "filePath": "./src/components/card/card.tsx", + "fileName": "card.tsx", + "readmePath": "./src/components/card/readme.md", + "usagesDir": "./src/components/card/usage", + "tag": "ix-card", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-action-card", + "ix-card-list", + "ix-push-card" + ], + "dependencies": [], + "dependencyGraph": { + "ix-action-card": [ + "ix-card" + ], + "ix-card-list": [ + "ix-card" + ], + "ix-push-card": [ + "ix-card" + ] + }, + "props": [ + { + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"", + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Card variant", + "docsTags": [], + "default": "'insight'", + "values": [ + { + "value": "alarm", + "type": "string" + }, + { + "value": "critical", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "insight", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "notification", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "./src/components/card-accordion", + "filePath": "./src/components/card-accordion/card-accordion.tsx", + "fileName": "card-accordion.tsx", + "readmePath": "./src/components/card-accordion/readme.md", + "usagesDir": "./src/components/card-accordion/usage", + "tag": "ix-card-accordion", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-push-card" + ], + "dependencies": [ + "ix-icon" + ], + "dependencyGraph": { + "ix-card-accordion": [ + "ix-icon" + ], + "ix-push-card": [ + "ix-card-accordion" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "./src/components/card-content", + "filePath": "./src/components/card-content/card-content.tsx", + "fileName": "card-content.tsx", + "readmePath": "./src/components/card-content/readme.md", + "usagesDir": "./src/components/card-content/usage", + "tag": "ix-card-content", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-action-card", + "ix-card-list", + "ix-push-card" + ], + "dependencies": [], + "dependencyGraph": { + "ix-action-card": [ + "ix-card-content" + ], + "ix-card-list": [ + "ix-card-content" + ], + "ix-push-card": [ + "ix-card-content" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, + { + "dirPath": "./src/components/card-list", + "filePath": "./src/components/card-list/card-list.tsx", + "fileName": "card-list.tsx", + "readmePath": "./src/components/card-list/readme.md", + "usagesDir": "./src/components/card-list/usage", + "tag": "ix-card-list", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-card", + "ix-card-content", + "ix-icon", + "ix-icon-button", + "ix-typography", + "ix-button" + ], + "dependencyGraph": { + "ix-card-list": [ + "ix-card", + "ix-card-content", + "ix-icon", + "ix-icon-button", + "ix-typography", + "ix-button" + ], + "ix-icon-button": [ + "ix-icon" + ] + }, + "props": [ + { + "name": "collapse", + "type": "boolean", + "mutable": true, + "attr": "collapse", + "reflectToAttr": false, + "docs": "Collapse the list", "docsTags": [], "default": "false", "values": [ @@ -605,78 +1098,71 @@ "required": false }, { - "name": "invisible", - "type": "boolean", + "name": "i18nMoreCards", + "type": "string", "mutable": false, - "attr": "invisible", + "attr": "i-1-8n-more-cards", "reflectToAttr": false, - "docs": "Invisible button", - "docsTags": [ - { - "name": "deprecated", - "text": "use ghost property" - } - ], - "default": "false", - "deprecation": "use ghost property", + "docs": "i18n More cards available", + "docsTags": [], + "default": "'There are more cards available'", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "outline", - "type": "boolean", + "name": "i18nShowAll", + "type": "string", "mutable": false, - "attr": "outline", + "attr": "i-1-8n-show-all", "reflectToAttr": false, - "docs": "Outline button", + "docs": "i18n Show all button", "docsTags": [], - "default": "false", + "default": "'Show all'", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "selected", - "type": "boolean", + "name": "label", + "type": "string", "mutable": false, - "attr": "selected", + "attr": "label", "reflectToAttr": false, - "docs": "Show button as selected. Should be used with outline or ghost", + "docs": "Name the card list", "docsTags": [], - "default": "false", "values": [ { - "type": "boolean" + "type": "string" } ], "optional": false, "required": false }, { - "name": "type", - "type": "\"button\" | \"submit\"", + "name": "listStyle", + "type": "\"scroll\" | \"stack\"", "mutable": false, - "attr": "type", + "attr": "list-style", "reflectToAttr": false, - "docs": "Type of the button", + "docs": "List style", "docsTags": [], - "default": "'button'", + "default": "'stack'", "values": [ { - "value": "button", + "value": "scroll", "type": "string" }, { - "value": "submit", + "value": "stack", "type": "string" } ], @@ -684,22 +1170,33 @@ "required": false }, { - "name": "variant", - "type": "\"Primary\" | \"Secondary\"", + "name": "showAllCount", + "type": "number", "mutable": false, - "attr": "variant", + "attr": "show-all-count", "reflectToAttr": false, - "docs": "Button varaint", + "docs": "Overwrite the default show all count.", "docsTags": [], - "default": "'Primary'", "values": [ { - "value": "Primary", - "type": "string" - }, + "type": "number" + } + ], + "optional": false, + "required": false + }, + { + "name": "suppressOverflowHandling", + "type": "boolean", + "mutable": false, + "attr": "suppress-overflow-handling", + "reflectToAttr": false, + "docs": "Suppress the overflow handling of child elements", + "docsTags": [], + "default": "false", + "values": [ { - "value": "Secondary", - "type": "string" + "type": "boolean" } ], "optional": false, @@ -707,10 +1204,88 @@ } ], "methods": [], - "events": [], + "events": [ + { + "event": "collapseChanged", + "detail": "boolean", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Fire event when the collapse state is changed by the user", + "docsTags": [] + }, + { + "event": "showAllClick", + "detail": "{ nativeEvent: MouseEvent; }", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Fire event when the collapse state is changed by the user", + "docsTags": [] + }, + { + "event": "showMoreCardClick", + "detail": "{ nativeEvent: MouseEvent; }", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Fire event when the show more card is clicked.", + "docsTags": [] + } + ], "styles": [], "slots": [], "parts": [], + "listeners": [ + { + "event": "resize", + "target": "window", + "capture": false, + "passive": true + } + ] + }, + { + "dirPath": "./src/components/card-title", + "filePath": "./src/components/card-title/card-title.tsx", + "fileName": "card-title.tsx", + "readmePath": "./src/components/card-title/readme.md", + "usagesDir": "./src/components/card-title/usage", + "tag": "ix-card-title", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "slot", + "text": "title-actions - Place additional actions inside title" + }, + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [ + "ix-push-card" + ], + "dependencies": [], + "dependencyGraph": { + "ix-push-card": [ + "ix-card-title" + ] + }, + "props": [], + "methods": [], + "events": [], + "styles": [], + "slots": [ + { + "name": "title-actions", + "docs": "Place additional actions inside title" + } + ], + "parts": [], "listeners": [] }, { @@ -4217,6 +4792,7 @@ "docsTags": [], "encapsulation": "shadow", "dependents": [ + "ix-card-list", "ix-category-filter", "ix-content-header", "ix-date-picker", @@ -4244,6 +4820,9 @@ "ix-icon-button": [ "ix-icon" ], + "ix-card-list": [ + "ix-icon-button" + ], "ix-category-filter": [ "ix-icon-button" ], @@ -7224,6 +7803,165 @@ "parts": [], "listeners": [] }, + { + "dirPath": "./src/components/push-card", + "filePath": "./src/components/push-card/push-card.tsx", + "fileName": "push-card.tsx", + "readmePath": "./src/components/push-card/readme.md", + "usagesDir": "./src/components/push-card/usage", + "tag": "ix-push-card", + "overview": "", + "usage": {}, + "docs": "", + "docsTags": [ + { + "name": "since", + "text": "1.6.0" + } + ], + "encapsulation": "shadow", + "dependents": [], + "dependencies": [ + "ix-card", + "ix-card-title", + "ix-icon", + "ix-card-content", + "ix-typography", + "ix-card-accordion" + ], + "dependencyGraph": { + "ix-push-card": [ + "ix-card", + "ix-card-title", + "ix-icon", + "ix-card-content", + "ix-typography", + "ix-card-accordion" + ], + "ix-card-accordion": [ + "ix-icon" + ] + }, + "props": [ + { + "name": "heading", + "type": "string", + "mutable": false, + "attr": "heading", + "reflectToAttr": false, + "docs": "Card heading", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "icon", + "type": "string", + "mutable": false, + "attr": "icon", + "reflectToAttr": false, + "docs": "Card icon", + "docsTags": [], + "default": "undefined", + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "notification", + "type": "string", + "mutable": false, + "attr": "notification", + "reflectToAttr": false, + "docs": "Card KPI value", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "subheading", + "type": "string", + "mutable": false, + "attr": "subheading", + "reflectToAttr": false, + "docs": "Card subheading", + "docsTags": [], + "values": [ + { + "type": "string" + } + ], + "optional": false, + "required": false + }, + { + "name": "variant", + "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"", + "mutable": false, + "attr": "variant", + "reflectToAttr": false, + "docs": "Card variant", + "docsTags": [], + "default": "'insight'", + "values": [ + { + "value": "alarm", + "type": "string" + }, + { + "value": "critical", + "type": "string" + }, + { + "value": "info", + "type": "string" + }, + { + "value": "insight", + "type": "string" + }, + { + "value": "neutral", + "type": "string" + }, + { + "value": "notification", + "type": "string" + }, + { + "value": "success", + "type": "string" + }, + { + "value": "warning", + "type": "string" + } + ], + "optional": false, + "required": false + } + ], + "methods": [], + "events": [], + "styles": [], + "slots": [], + "parts": [], + "listeners": [] + }, { "dirPath": "./src/components/select", "filePath": "./src/components/select/select.tsx", diff --git a/packages/core/scss/theme/classic-dark/_borderRadius.scss b/packages/core/scss/theme/classic-dark/_borderRadius.scss index fc79b775cf3..f9d3ab29303 100644 --- a/packages/core/scss/theme/classic-dark/_borderRadius.scss +++ b/packages/core/scss/theme/classic-dark/_borderRadius.scss @@ -21,4 +21,4 @@ --theme-upload--border-radius: var(--theme-default-border-radius); --theme-workflow--border-radius: var(--theme-default-border-radius); } -} \ No newline at end of file +} diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 2f8bdd3774f..1e473517d54 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -5,10 +5,14 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +import { ActionCardVariant } from "./components/action-card/action-card"; import { ButtonVariant } from "./components/button/button"; +import { CardVariant } from "./components/card/card"; +import { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion"; import { FilterState } from "./components/category-filter/filter-state"; import { InputState } from "./components/category-filter/input-state"; import { ContentHeaderVariant } from "./components/content-header/content-header"; +import { CssGridTemplateType } from "./components/layout/css-grid/css-grid"; import { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; @@ -23,6 +27,7 @@ import { IndexButtonVariant } from "./components/index-button/index-button"; import { KeyValueLabelPosition } from "./components/key-value/key-value"; import { NotificationColor } from "./components/utils/notification-color"; import { ModalConfig, ModalInstance } from "./components/modal/modal-utils"; +import { PushCardVariant } from "./components/push-card/push-card"; import { SplitButtonVariant } from "./components/split-button/split-button"; import { TimePickerCorners } from "./components/time-picker/time-picker"; import { ToastConfig, ToastType } from "./components/toast/toast-utils"; @@ -30,10 +35,14 @@ import { TypedEvent } from "./components/utils/typed-event"; import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model"; import { TypographyColors, TypographyVariants } from "./components/typography/typography"; import { UploadFileState } from "./components/upload/upload-file-state"; +export { ActionCardVariant } from "./components/action-card/action-card"; export { ButtonVariant } from "./components/button/button"; +export { CardVariant } from "./components/card/card"; +export { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion"; export { FilterState } from "./components/category-filter/filter-state"; export { InputState } from "./components/category-filter/input-state"; export { ContentHeaderVariant } from "./components/content-header/content-header"; +export { CssGridTemplateType } from "./components/layout/css-grid/css-grid"; export { DateTimeCardCorners } from "./components/date-time-card/date-time-card"; export { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/date-picker"; export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card"; @@ -48,6 +57,7 @@ export { IndexButtonVariant } from "./components/index-button/index-button"; export { KeyValueLabelPosition } from "./components/key-value/key-value"; export { NotificationColor } from "./components/utils/notification-color"; export { ModalConfig, ModalInstance } from "./components/modal/modal-utils"; +export { PushCardVariant } from "./components/push-card/push-card"; export { SplitButtonVariant } from "./components/split-button/split-button"; export { TimePickerCorners } from "./components/time-picker/time-picker"; export { ToastConfig, ToastType } from "./components/toast/toast-utils"; @@ -56,6 +66,31 @@ export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./compo export { TypographyColors, TypographyVariants } from "./components/typography/typography"; export { UploadFileState } from "./components/upload/upload-file-state"; export namespace Components { + /** + * @since 1.6.0 + */ + interface IxActionCard { + /** + * Card heading + */ + "heading": string; + /** + * Card icon + */ + "icon": string | undefined; + /** + * Card selection + */ + "selected": boolean; + /** + * Card subheading + */ + "subheading": string; + /** + * Card variant + */ + "variant": ActionCardVariant; + } interface IxAnimatedTab { /** * Show notification number @@ -165,10 +200,71 @@ export namespace Components { */ "type": 'button' | 'submit'; /** - * Button varaint + * Button variant */ "variant": ButtonVariant; } + /** + * @since 1.6.0 + */ + interface IxCard { + /** + * Card variant + */ + "variant": CardVariant; + } + /** + * @since 1.6.0 + */ + interface IxCardAccordion { + } + /** + * @since 1.6.0 + */ + interface IxCardContent { + } + /** + * @since 1.6.0 + */ + interface IxCardList { + /** + * Collapse the list + */ + "collapse": boolean; + /** + * i18n More cards available + */ + "i18nMoreCards": string; + /** + * i18n Show all button + */ + "i18nShowAll": string; + /** + * Name the card list + */ + "label": string; + /** + * List style + */ + "listStyle": 'stack' | 'scroll'; + /** + * Maximal visible cards + */ + "maxVisibleCards": number; + /** + * Overwrite the default show all count. + */ + "showAllCount": number | undefined; + /** + * Suppress the overflow handling of child elements + */ + "suppressOverflowHandling": boolean; + } + /** + * @since 1.6.0 + */ + interface IxCardTitle { + } interface IxCategoryFilter { /** * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. @@ -308,6 +404,18 @@ export namespace Components { | 'success' | 'custom'; } + interface IxCssGrid { + /** + * Define css grid template + */ + "templates": Partial>; + } + interface IxCssGridItem { + /** + * Grid item name + */ + "itemName": string; + } interface IxDatePicker { /** * Corner style @@ -1279,6 +1387,31 @@ export namespace Components { | 'success' | 'custom'; } + /** + * @since 1.6.0 + */ + interface IxPushCard { + /** + * Card heading + */ + "heading": string; + /** + * Card icon + */ + "icon": string | undefined; + /** + * Card KPI value + */ + "notification": string; + /** + * Card subheading + */ + "subheading": string; + /** + * Card variant + */ + "variant": PushCardVariant; + } interface IxSelect { /** * Show clear button @@ -1781,6 +1914,14 @@ export interface IxBreadcrumbCustomEvent extends CustomEvent { detail: T; target: HTMLIxBreadcrumbElement; } +export interface IxCardAccordionCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxCardAccordionElement; +} +export interface IxCardListCustomEvent extends CustomEvent { + detail: T; + target: HTMLIxCardListElement; +} export interface IxCategoryFilterCustomEvent extends CustomEvent { detail: T; target: HTMLIxCategoryFilterElement; @@ -1930,6 +2071,15 @@ export interface IxWorkflowStepsCustomEvent extends CustomEvent { target: HTMLIxWorkflowStepsElement; } declare global { + /** + * @since 1.6.0 + */ + interface HTMLIxActionCardElement extends Components.IxActionCard, HTMLStencilElement { + } + var HTMLIxActionCardElement: { + prototype: HTMLIxActionCardElement; + new (): HTMLIxActionCardElement; + }; interface HTMLIxAnimatedTabElement extends Components.IxAnimatedTab, HTMLStencilElement { } var HTMLIxAnimatedTabElement: { @@ -1984,6 +2134,51 @@ declare global { prototype: HTMLIxButtonElement; new (): HTMLIxButtonElement; }; + /** + * @since 1.6.0 + */ + interface HTMLIxCardElement extends Components.IxCard, HTMLStencilElement { + } + var HTMLIxCardElement: { + prototype: HTMLIxCardElement; + new (): HTMLIxCardElement; + }; + /** + * @since 1.6.0 + */ + interface HTMLIxCardAccordionElement extends Components.IxCardAccordion, HTMLStencilElement { + } + var HTMLIxCardAccordionElement: { + prototype: HTMLIxCardAccordionElement; + new (): HTMLIxCardAccordionElement; + }; + /** + * @since 1.6.0 + */ + interface HTMLIxCardContentElement extends Components.IxCardContent, HTMLStencilElement { + } + var HTMLIxCardContentElement: { + prototype: HTMLIxCardContentElement; + new (): HTMLIxCardContentElement; + }; + /** + * @since 1.6.0 + */ + interface HTMLIxCardListElement extends Components.IxCardList, HTMLStencilElement { + } + var HTMLIxCardListElement: { + prototype: HTMLIxCardListElement; + new (): HTMLIxCardListElement; + }; + /** + * @since 1.6.0 + */ + interface HTMLIxCardTitleElement extends Components.IxCardTitle, HTMLStencilElement { + } + var HTMLIxCardTitleElement: { + prototype: HTMLIxCardTitleElement; + new (): HTMLIxCardTitleElement; + }; interface HTMLIxCategoryFilterElement extends Components.IxCategoryFilter, HTMLStencilElement { } var HTMLIxCategoryFilterElement: { @@ -2008,6 +2203,18 @@ declare global { prototype: HTMLIxCounterPillElement; new (): HTMLIxCounterPillElement; }; + interface HTMLIxCssGridElement extends Components.IxCssGrid, HTMLStencilElement { + } + var HTMLIxCssGridElement: { + prototype: HTMLIxCssGridElement; + new (): HTMLIxCssGridElement; + }; + interface HTMLIxCssGridItemElement extends Components.IxCssGridItem, HTMLStencilElement { + } + var HTMLIxCssGridItemElement: { + prototype: HTMLIxCssGridItemElement; + new (): HTMLIxCssGridItemElement; + }; interface HTMLIxDatePickerElement extends Components.IxDatePicker, HTMLStencilElement { } var HTMLIxDatePickerElement: { @@ -2287,6 +2494,15 @@ declare global { prototype: HTMLIxPillElement; new (): HTMLIxPillElement; }; + /** + * @since 1.6.0 + */ + interface HTMLIxPushCardElement extends Components.IxPushCard, HTMLStencilElement { + } + var HTMLIxPushCardElement: { + prototype: HTMLIxPushCardElement; + new (): HTMLIxPushCardElement; + }; interface HTMLIxSelectElement extends Components.IxSelect, HTMLStencilElement { } var HTMLIxSelectElement: { @@ -2417,6 +2633,7 @@ declare global { new (): HTMLMyComponentElement; }; interface HTMLElementTagNameMap { + "ix-action-card": HTMLIxActionCardElement; "ix-animated-tab": HTMLIxAnimatedTabElement; "ix-animated-tabs": HTMLIxAnimatedTabsElement; "ix-application-header": HTMLIxApplicationHeaderElement; @@ -2426,10 +2643,17 @@ declare global { "ix-breadcrumb-item": HTMLIxBreadcrumbItemElement; "ix-burger-menu": HTMLIxBurgerMenuElement; "ix-button": HTMLIxButtonElement; + "ix-card": HTMLIxCardElement; + "ix-card-accordion": HTMLIxCardAccordionElement; + "ix-card-content": HTMLIxCardContentElement; + "ix-card-list": HTMLIxCardListElement; + "ix-card-title": HTMLIxCardTitleElement; "ix-category-filter": HTMLIxCategoryFilterElement; "ix-chip": HTMLIxChipElement; "ix-content-header": HTMLIxContentHeaderElement; "ix-counter-pill": HTMLIxCounterPillElement; + "ix-css-grid": HTMLIxCssGridElement; + "ix-css-grid-item": HTMLIxCssGridItemElement; "ix-date-picker": HTMLIxDatePickerElement; "ix-date-time-card": HTMLIxDateTimeCardElement; "ix-datetime-picker": HTMLIxDatetimePickerElement; @@ -2473,6 +2697,7 @@ declare global { "ix-modal-example": HTMLIxModalExampleElement; "ix-pagination": HTMLIxPaginationElement; "ix-pill": HTMLIxPillElement; + "ix-push-card": HTMLIxPushCardElement; "ix-select": HTMLIxSelectElement; "ix-select-item": HTMLIxSelectItemElement; "ix-spinner": HTMLIxSpinnerElement; @@ -2497,6 +2722,31 @@ declare global { } } declare namespace LocalJSX { + /** + * @since 1.6.0 + */ + interface IxActionCard { + /** + * Card heading + */ + "heading"?: string; + /** + * Card icon + */ + "icon"?: string | undefined; + /** + * Card selection + */ + "selected"?: boolean; + /** + * Card subheading + */ + "subheading"?: string; + /** + * Card variant + */ + "variant"?: ActionCardVariant; + } interface IxAnimatedTab { /** * Show notification number @@ -2622,10 +2872,88 @@ declare namespace LocalJSX { */ "type"?: 'button' | 'submit'; /** - * Button varaint + * Button variant */ "variant"?: ButtonVariant; } + /** + * @since 1.6.0 + */ + interface IxCard { + /** + * Card variant + */ + "variant"?: CardVariant; + } + /** + * @since 1.6.0 + */ + interface IxCardAccordion { + "onAccordionExpand"?: (event: IxCardAccordionCustomEvent) => void; + } + /** + * @since 1.6.0 + */ + interface IxCardContent { + } + /** + * @since 1.6.0 + */ + interface IxCardList { + /** + * Collapse the list + */ + "collapse"?: boolean; + /** + * i18n More cards available + */ + "i18nMoreCards"?: string; + /** + * i18n Show all button + */ + "i18nShowAll"?: string; + /** + * Name the card list + */ + "label"?: string; + /** + * List style + */ + "listStyle"?: 'stack' | 'scroll'; + /** + * Maximal visible cards + */ + "maxVisibleCards"?: number; + /** + * Fire event when the collapse state is changed by the user + */ + "onCollapseChanged"?: (event: IxCardListCustomEvent) => void; + /** + * Fire event when the collapse state is changed by the user + */ + "onShowAllClick"?: (event: IxCardListCustomEvent<{ + nativeEvent: MouseEvent; + }>) => void; + /** + * Fire event when the show more card is clicked. + */ + "onShowMoreCardClick"?: (event: IxCardListCustomEvent<{ + nativeEvent: MouseEvent; + }>) => void; + /** + * Overwrite the default show all count. + */ + "showAllCount"?: number | undefined; + /** + * Suppress the overflow handling of child elements + */ + "suppressOverflowHandling"?: boolean; + } + /** + * @since 1.6.0 + */ + interface IxCardTitle { + } interface IxCategoryFilter { /** * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from. @@ -2787,6 +3115,18 @@ declare namespace LocalJSX { | 'success' | 'custom'; } + interface IxCssGrid { + /** + * Define css grid template + */ + "templates"?: Partial>; + } + interface IxCssGridItem { + /** + * Grid item name + */ + "itemName"?: string; + } interface IxDatePicker { /** * Corner style @@ -3837,6 +4177,31 @@ declare namespace LocalJSX { | 'success' | 'custom'; } + /** + * @since 1.6.0 + */ + interface IxPushCard { + /** + * Card heading + */ + "heading"?: string; + /** + * Card icon + */ + "icon"?: string | undefined; + /** + * Card KPI value + */ + "notification"?: string; + /** + * Card subheading + */ + "subheading"?: string; + /** + * Card variant + */ + "variant"?: PushCardVariant; + } interface IxSelect { /** * Show clear button @@ -4380,6 +4745,7 @@ declare namespace LocalJSX { interface MyComponent { } interface IntrinsicElements { + "ix-action-card": IxActionCard; "ix-animated-tab": IxAnimatedTab; "ix-animated-tabs": IxAnimatedTabs; "ix-application-header": IxApplicationHeader; @@ -4389,10 +4755,17 @@ declare namespace LocalJSX { "ix-breadcrumb-item": IxBreadcrumbItem; "ix-burger-menu": IxBurgerMenu; "ix-button": IxButton; + "ix-card": IxCard; + "ix-card-accordion": IxCardAccordion; + "ix-card-content": IxCardContent; + "ix-card-list": IxCardList; + "ix-card-title": IxCardTitle; "ix-category-filter": IxCategoryFilter; "ix-chip": IxChip; "ix-content-header": IxContentHeader; "ix-counter-pill": IxCounterPill; + "ix-css-grid": IxCssGrid; + "ix-css-grid-item": IxCssGridItem; "ix-date-picker": IxDatePicker; "ix-date-time-card": IxDateTimeCard; "ix-datetime-picker": IxDatetimePicker; @@ -4436,6 +4809,7 @@ declare namespace LocalJSX { "ix-modal-example": IxModalExample; "ix-pagination": IxPagination; "ix-pill": IxPill; + "ix-push-card": IxPushCard; "ix-select": IxSelect; "ix-select-item": IxSelectItem; "ix-spinner": IxSpinner; @@ -4463,6 +4837,10 @@ export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { + /** + * @since 1.6.0 + */ + "ix-action-card": LocalJSX.IxActionCard & JSXBase.HTMLAttributes; "ix-animated-tab": LocalJSX.IxAnimatedTab & JSXBase.HTMLAttributes; "ix-animated-tabs": LocalJSX.IxAnimatedTabs & JSXBase.HTMLAttributes; "ix-application-header": LocalJSX.IxApplicationHeader & JSXBase.HTMLAttributes; @@ -4472,10 +4850,32 @@ declare module "@stencil/core" { "ix-breadcrumb-item": LocalJSX.IxBreadcrumbItem & JSXBase.HTMLAttributes; "ix-burger-menu": LocalJSX.IxBurgerMenu & JSXBase.HTMLAttributes; "ix-button": LocalJSX.IxButton & JSXBase.HTMLAttributes; + /** + * @since 1.6.0 + */ + "ix-card": LocalJSX.IxCard & JSXBase.HTMLAttributes; + /** + * @since 1.6.0 + */ + "ix-card-accordion": LocalJSX.IxCardAccordion & JSXBase.HTMLAttributes; + /** + * @since 1.6.0 + */ + "ix-card-content": LocalJSX.IxCardContent & JSXBase.HTMLAttributes; + /** + * @since 1.6.0 + */ + "ix-card-list": LocalJSX.IxCardList & JSXBase.HTMLAttributes; + /** + * @since 1.6.0 + */ + "ix-card-title": LocalJSX.IxCardTitle & JSXBase.HTMLAttributes; "ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes; "ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes; "ix-content-header": LocalJSX.IxContentHeader & JSXBase.HTMLAttributes; "ix-counter-pill": LocalJSX.IxCounterPill & JSXBase.HTMLAttributes; + "ix-css-grid": LocalJSX.IxCssGrid & JSXBase.HTMLAttributes; + "ix-css-grid-item": LocalJSX.IxCssGridItem & JSXBase.HTMLAttributes; "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes; "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes; "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes; @@ -4540,6 +4940,10 @@ declare module "@stencil/core" { */ "ix-pagination": LocalJSX.IxPagination & JSXBase.HTMLAttributes; "ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes; + /** + * @since 1.6.0 + */ + "ix-push-card": LocalJSX.IxPushCard & JSXBase.HTMLAttributes; "ix-select": LocalJSX.IxSelect & JSXBase.HTMLAttributes; "ix-select-item": LocalJSX.IxSelectItem & JSXBase.HTMLAttributes; "ix-spinner": LocalJSX.IxSpinner & JSXBase.HTMLAttributes; diff --git a/packages/core/src/components/action-card/action-card.scss b/packages/core/src/components/action-card/action-card.scss new file mode 100644 index 00000000000..65b56fb27e4 --- /dev/null +++ b/packages/core/src/components/action-card/action-card.scss @@ -0,0 +1,197 @@ +/* + * 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 'mixins/shadow-dom/component'; + +:host { + @include ix-component; + display: block; + position: relative; + min-width: 13.375rem; + width: 13.375rem; + height: 7.5rem; + min-height: 7.5rem; + cursor: pointer; + + margin: 0.25rem 0; + + ix-card { + width: 100%; + height: 100%; + } + + ix-card.card-insight:hover { + --ix-card-background: var(--theme-color-ghost--hover); + } + + ix-card.card-insight:active { + --ix-card-background: var(--theme-color-ghost--active); + } + + ix-card.card-notification:hover { + --ix-card-background: var(--theme-color-component-1--hover); + } + + ix-card.card-notification:active { + --ix-card-background: var(--theme-color-component-1--active); + } + + ix-card.card-alarm:hover { + --ix-card-background: var(--theme-color-alarm--hover); + } + + ix-card.card-alarm:active { + --ix-card-background: var(--theme-color-alarm--active); + } + + ix-card.card-critical:hover { + --ix-card-background: var(--theme-color-critical--hover); + } + + ix-card.card-critical:active { + --ix-card-background: var(--theme-color-critical--active); + } + + ix-card.card-warning:hover { + --ix-card-background: var(--theme-color-warning--hover); + } + + ix-card.card-warning:active { + --ix-card-background: var(--theme-color-warning--active); + } + + ix-card.card-success:hover { + --ix-card-background: var(--theme-color-success--hover); + } + + ix-card.card-success:active { + --ix-card-background: var(--theme-color-success--active); + } + + ix-card.card-info:hover { + --ix-card-background: var(--theme-color-info--hover); + } + + ix-card.card-info:active { + --ix-card-background: var(--theme-color-info--active); + } + + ix-card.card-neutral:hover { + --ix-card-background: var(--theme-color-neutral--hover); + } + + ix-card.card-neutral:active { + --ix-card-background: var(--theme-color-neutral--active); + } +} + +:host(:hover) { + ix-card.card-insight:hover { + --ix-card-background: var(--theme-color-ghost--hover); + } + + ix-card.card-notification:hover { + --ix-card-background: var(--theme-color-component-1--hover); + } + + ix-card.card-alarm:hover { + --ix-card-background: var(--theme-color-alarm--hover); + } + + ix-card.card-critical:hover { + --ix-card-background: var(--theme-color-critical--hover); + } + + ix-card.card-warning:hover { + --ix-card-background: var(--theme-color-warning--hover); + } + + ix-card.card-success:hover { + --ix-card-background: var(--theme-color-success--hover); + } + + ix-card.card-info:hover { + --ix-card-background: var(--theme-color-info--hover); + } + + ix-card.card-neutral:hover { + --ix-card-background: var(--theme-color-neutral--hover); + } +} + +:host(:active) { + ix-card.card-insight:active { + --ix-card-background: var(--theme-color-ghost--active); + } + + ix-card.card-notification:active { + --ix-card-background: var(--theme-color-component-1--active); + } + + ix-card.card-alarm:active { + --ix-card-background: var(--theme-color-alarm--active); + } + + ix-card.card-critical:active { + --ix-card-background: var(--theme-color-critical--active); + } + + ix-card.card-warning:active { + --ix-card-background: var(--theme-color-warning--active); + } + + ix-card.card-success:active { + --ix-card-background: var(--theme-color-success--active); + } + + ix-card.card-info:active { + --ix-card-background: var(--theme-color-info--active); + } + + ix-card.card-neutral:active { + --ix-card-background: var(--theme-color-neutral--active); + } +} + +:host(.selected) { + ix-card { + --ix-card-border-color: var(--theme-color-dynamic); + } + + ix-card.card-insight { + --ix-card-background: var(--theme-color-ghost--selected); + } + + ix-card.card-notification { + --ix-card-background: var(--theme-color-ghost--selected); + } + + ix-card.card-alarm { + --ix-card-background: var(--theme-color-alarm--active); + } + + ix-card.card-critical { + --ix-card-background: var(--theme-color-critical--active); + } + + ix-card.card-warning { + --ix-card-background: var(--theme-color-warning--active); + } + + ix-card.card-success { + --ix-card-background: var(--theme-color-success--active); + } + + ix-card.card-info { + --ix-card-background: var(--theme-color-info--active); + } + + ix-card.card-neutral { + --ix-card-background: var(--theme-color-neutral--active); + } +} diff --git a/packages/core/src/components/action-card/action-card.tsx b/packages/core/src/components/action-card/action-card.tsx new file mode 100644 index 00000000000..d9298d6438a --- /dev/null +++ b/packages/core/src/components/action-card/action-card.tsx @@ -0,0 +1,84 @@ +/* + * 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'; +import { CardVariant } from '../card/card'; + +export type ActionCardVariant = CardVariant; + +/** + * @since 1.6.0 + */ +@Component({ + tag: 'ix-action-card', + styleUrl: 'action-card.scss', + shadow: true, +}) +export class IxActionCard { + /** + * Card variant + */ + @Prop() variant: ActionCardVariant = 'insight'; + + /** + * Card icon + */ + @Prop() icon: string | undefined = undefined; + + /** + * Card heading + */ + @Prop() heading: string; + + /** + * Card subheading + */ + @Prop() subheading: string; + + /** + * Card selection + */ + @Prop() selected = false; + + render() { + return ( + + + + {this.icon ? ( + + ) : ( + '' + )} + {this.heading ? ( + + {this.heading} + + ) : ( + '' + )} + {this.subheading ? ( + + {this.subheading} + + ) : null} + + + + + ); + } +} diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 70b1400a38e..5507ab5fba4 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -19,7 +19,7 @@ export type ButtonVariant = 'Primary' | 'Secondary'; }) export class Button { /** - * Button varaint + * Button variant */ @Prop() variant: ButtonVariant = 'Primary'; diff --git a/packages/core/src/components/card-accordion/card-accordion.scss b/packages/core/src/components/card-accordion/card-accordion.scss new file mode 100644 index 00000000000..dea868cc65b --- /dev/null +++ b/packages/core/src/components/card-accordion/card-accordion.scss @@ -0,0 +1,116 @@ +/* + * 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 'mixins/hover'; +@import 'mixins/shadow-dom/component'; + +$action-height: 2.5rem; +$expand-content-height: 15rem; + +:host { + @include ix-component; + display: flex; + position: relative; + flex-direction: column; + width: 100%; + height: $action-height; + max-height: $action-height; + transition: var(--theme-default-time) ease-in-out; + + .expand-action { + all: unset; + display: flex; + position: relative; + + appearance: button; + + height: $action-height; + width: 100%; + + background-color: var(--theme-color-component-1); + align-items: center; + justify-content: flex-start; + @include ghost-hover-pressed(); + + @include focus-visible { + outline: 1px solid var(--theme-color-focus-bdr); + outline-offset: var(--theme-btn--focus--outline-offset); + } + } + + .expand-action::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--ix-card-background); + z-index: -1; + } + + .expand-action:not(.show), + .expand-action:not(.show)::before { + border-bottom-left-radius: var(--theme-default-border-radius); + border-bottom-right-radius: var(--theme-default-border-radius); + } + + .expand-icon { + margin-left: 0.5rem; + transition: var(--theme-default-time) transform ease-in-out; + } + + .expand-icon.show { + transform: rotate(90deg); + } + + .expand-content { + display: flex; + flex-direction: column; + opacity: 0; + position: absolute; + top: $action-height; + transition: var(--theme-default-time) ease-in-out; + width: 100%; + height: 0; + max-height: 20rem; + background-color: var(--theme-color-component-1); + } + + .expand-content.show { + height: $expand-content-height; + opacity: 1; + } + + .expand-content.show .expand-content-body { + display: none; + overflow: hidden; + } + + .expand-content.show .expand-content-body { + display: block; + overflow: auto; + } + + .expand-content-footer { + display: block; + position: relative; + width: 100%; + height: 1rem; + + margin-top: auto; + margin-bottom: 0px; + + background-color: var(--theme-color-component-1); + border-bottom-left-radius: var(--theme-default-border-radius); + border-bottom-right-radius: var(--theme-default-border-radius); + } +} + +:host(.show) { + height: calc(#{$expand-content-height} + #{$action-height}); + max-height: calc(#{$expand-content-height} + #{$action-height}); +} diff --git a/packages/core/src/components/card-accordion/card-accordion.tsx b/packages/core/src/components/card-accordion/card-accordion.tsx new file mode 100644 index 00000000000..fc8c218521c --- /dev/null +++ b/packages/core/src/components/card-accordion/card-accordion.tsx @@ -0,0 +1,107 @@ +import { + Component, + Element, + Event, + EventEmitter, + h, + Host, + State, +} from '@stencil/core'; + +let accordionControlId = 0; +const getAriaControlsId = (prefix: string = 'expand-content') => { + return [prefix, accordionControlId++].join('-'); +}; + +export type CardAccordionExpandChangeEvent = { + expand: boolean; + nativeEvent: Event; +}; + +/** + * @since 1.6.0 + */ +@Component({ + tag: 'ix-card-accordion', + styleUrl: 'card-accordion.scss', + shadow: true, +}) +export class CardAccordion { + @Element() hostElement: HTMLIxCardAccordionElement; + + /** + * @internal + */ + @Event() accordionExpand: EventEmitter; + + @State() expandContent = false; + + get expandedContent() { + return this.hostElement.shadowRoot.querySelector('.expand-content'); + } + + onExpandActionClick(event: Event) { + event.preventDefault(); + event.stopPropagation(); + this.expandContent = !this.expandContent; + this.accordionExpand.emit({ + expand: this.expandContent, + nativeEvent: event, + }); + + if (this.expandContent) { + this.scrollExpandedContentIntoView(); + } + } + + private scrollExpandedContentIntoView() { + setTimeout(() => { + const rect = this.expandedContent.getBoundingClientRect(); + if (rect.bottom > window.innerHeight) { + this.hostElement.shadowRoot + .querySelector('.expand-content') + .scrollIntoView(false); + } + }, 150); + } + + render() { + return ( + + +
+
+ +
+
+
+ + ); + } +} diff --git a/packages/core/src/components/card-content/card-content.scss b/packages/core/src/components/card-content/card-content.scss new file mode 100644 index 00000000000..3b6ba7d5731 --- /dev/null +++ b/packages/core/src/components/card-content/card-content.scss @@ -0,0 +1,21 @@ +/* + * 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 'mixins/shadow-dom/component'; + +:host { + @include ix-component; + + display: flex; + position: relative; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + // min-height: 8rem; + height: 100%; +} diff --git a/packages/core/src/components/card-content/card-content.tsx b/packages/core/src/components/card-content/card-content.tsx new file mode 100644 index 00000000000..817b7491d86 --- /dev/null +++ b/packages/core/src/components/card-content/card-content.tsx @@ -0,0 +1,19 @@ +import { Component, h, Host } from '@stencil/core'; + +/** + * @since 1.6.0 + */ +@Component({ + tag: 'ix-card-content', + styleUrl: 'card-content.scss', + shadow: true, +}) +export class CardContent { + render() { + return ( + + + + ); + } +} diff --git a/packages/core/src/components/card-list/card-list.scss b/packages/core/src/components/card-list/card-list.scss new file mode 100644 index 00000000000..ab6978be515 --- /dev/null +++ b/packages/core/src/components/card-list/card-list.scss @@ -0,0 +1,142 @@ +/* + * 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 'mixins/shadow-dom/component'; + +$CardList__Title__Height: 1.5rem; + +:host { + @include ix-component; + + display: flex; + position: relative; + flex-direction: column; + align-items: flex-start; + margin: 0.5rem; + + .CardList_Title { + display: flex; + position: relative; + height: $CardList__Title__Height; + align-items: center; + width: 100%; + margin-bottom: 0.5rem; + } + + .CardList__Title__Button { + margin-right: 1rem; + transition: var(--theme-default-time) transform ease-in-out; + } + + .CardList__Title__Button__Collapsed { + transform: rotate(-90deg); + } + + .CardList__Title__Show__All { + align-self: center; + margin-left: auto; + margin-right: 0px; + } + + .CardList__Content { + display: flex; + position: relative; + height: calc(100% - #{$CardList__Title__Height}); + width: 100%; + gap: 1.5rem; + transition: var(--theme-default-time) ease-in-out; + overflow: auto; + } + + .CardList__Content__Collapsed { + min-height: 0px; + max-height: 0px; + overflow: hidden; + opacity: 0; + } + + .CardList__Style__Flexbox__Scroll { + flex-wrap: wrap; + } + + .CardList__Style__Infinite__Scroll { + flex-wrap: nowrap; + + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + .CardList__Overflow { + display: block; + position: relative; + height: 100%; + width: 100%; + pointer-events: all; + mask-image: var(--ix-card-list-overflow, none); + } + + .Show__All__Card { + display: flex; + position: relative; + + align-self: flex-start; + justify-self: center; + + max-width: 11.25rem; + min-width: 11.25rem; + width: 11.25rem; + + min-height: 11.25rem; + max-height: 11.25rem; + height: 11.25rem; + + --ix-card-border-color: var(--theme-color-primary); + color: var(--theme-color-primary); + } + + .CardList__Style__Infinite__Scroll .Show__All__Card { + margin-top: 2.375rem; + } + + .CardList__Style__Flexbox__Scroll .Show__All__Card { + margin-bottom: 2.375rem; + } + + .Show__All__Card:hover { + background-color: var(--theme-color-ghost--hover); + } + + .Show__All__Card:active { + background-color: var(--theme-color-ghost--active); + } + + .Show__All__Card__Content { + display: flex; + justify-content: center; + align-items: center; + } + + .Show__All__Card__Icon { + display: flex; + position: absolute; + height: 4rem; + width: 4rem; + justify-content: center; + align-items: center; + transform: scale(2); + } + + .Show__All__Card__Text { + margin-bottom: 0px; + margin-top: auto; + } +} diff --git a/packages/core/src/components/card-list/card-list.tsx b/packages/core/src/components/card-list/card-list.tsx new file mode 100644 index 00000000000..f7f8fc2cc6b --- /dev/null +++ b/packages/core/src/components/card-list/card-list.tsx @@ -0,0 +1,330 @@ +import { + Component, + Element, + Event, + EventEmitter, + h, + Host, + Listen, + Prop, + State, +} from '@stencil/core'; +import { createMutationObserver } from '../utils/mutation-observer'; + +function CardListTitle(props: { + label: string; + isCollapsed: boolean; + onClick: (e: MouseEvent) => void; + onShowAllClick: (e: MouseEvent) => void; + showAllLabel: string; + showAllCounter: number; +}) { + if (props.label === '') { + return null; + } + + return ( +
+ + {props.label} + + {props.showAllLabel} + + {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null} + + +
+ ); +} + +/** + * @since 1.6.0 + */ +@Component({ + tag: 'ix-card-list', + styleUrl: 'card-list.scss', + shadow: true, +}) +export class CardList { + /** + * Name the card list + */ + @Prop() label: string; + + /** + * Collapse the list + */ + @Prop({ mutable: true }) collapse = false; + + /** + * List style + */ + @Prop() listStyle: 'stack' | 'scroll' = 'stack'; + + /** + * Maximal visible cards + * + * @internal + */ + @Prop() maxVisibleCards = 12; + + /** + * Overwrite the default show all count. + * */ + @Prop() showAllCount: number | undefined; + + /** + * Suppress the overflow handling of child elements + */ + @Prop() suppressOverflowHandling = false; + + /** + * i18n Show all button + */ + @Prop() i18nShowAll = 'Show all'; + + /** + * i18n More cards available + */ + @Prop() i18nMoreCards = 'There are more cards available'; + + /** + * Fire event when the collapse state is changed by the user + */ + @Event() collapseChanged: EventEmitter; + + /** + * Fire event when the collapse state is changed by the user + */ + @Event() showAllClick: EventEmitter<{ + nativeEvent: MouseEvent; + }>; + + /** + * Fire event when the show more card is clicked. + */ + @Event() showMoreCardClick: EventEmitter<{ + nativeEvent: MouseEvent; + }>; + + @Element() hostElement: HTMLIxCardListElement; + + @State() private hasOverflowingElements = false; + @State() private numberOfOverflowingElements = 0; + @State() private numberOfAllChildElements = 0; + @State() private leftScrollDistance = 0; + @State() private rightScrollDistance = 0; + + private observer: MutationObserver; + + private onCardListVisibilityToggle() { + this.collapse = !this.collapse; + this.collapseChanged.emit(this.collapse); + } + + private onShowAllClick(event: MouseEvent) { + this.showAllClick.emit({ + nativeEvent: event, + }); + } + + private getListChildren() { + const slot = this.hostElement.shadowRoot.querySelector( + '.CardList__Content > slot' + ) as HTMLSlotElement; + return slot.assignedElements({ flatten: true }); + } + + private changeVisibilityOfSlotChildren() { + const childElements = this.getListChildren(); + childElements.forEach((element, index) => { + if (element instanceof HTMLElement) { + if (index > this.maxVisibleCards - 1) { + element.classList.add('d-none'); + return; + } + element.classList.remove('d-none'); + } + }); + this.hasOverflowingElements = childElements.length > this.maxVisibleCards; + this.numberOfOverflowingElements = + childElements.length - this.maxVisibleCards; + + this.numberOfAllChildElements = childElements.length; + this.detectOverflow(); + } + + private registerOverflowHandler() { + this.observer = createMutationObserver(() => { + this.changeVisibilityOfSlotChildren(); + }); + + this.observer.observe( + this.hostElement.shadowRoot.querySelector('.CardList__Content'), + { + childList: true, + subtree: true, + } + ); + + requestAnimationFrame(() => { + this.changeVisibilityOfSlotChildren(); + }); + } + + private shouldHandleOverflow() { + if (this.suppressOverflowHandling) { + return false; + } + if (this.listStyle === 'stack' || this.listStyle === 'scroll') { + return true; + } + } + + private get listElement() { + return this.hostElement.shadowRoot.querySelector('.CardList__Content'); + } + + private onCardListScroll() { + this.detectOverflow(); + } + + private isShowMoreCardVisible() { + return ( + this.suppressOverflowHandling === false && this.hasOverflowingElements + ); + } + + private getOpacityFromScrollDistance(distance: number) { + if (!this.listElement) { + return 0; + } + + if (distance === 0) { + return 0; + } + + if (distance > 100) { + return 1; + } + + return distance / 100; + } + + private computeMaskLayer() { + const maxOverflowWidth = 80; + const maskLayer = `linear-gradient( + 90deg, + transparent 0px, + black ${ + maxOverflowWidth * + (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0) + }px, + black calc(100% - ${ + maxOverflowWidth * + (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0 + ? 1 + : 0) + }px), + transparent 100% + )`; + return { + '--ix-card-list-overflow': maskLayer, + }; + } + + @Listen('resize', { target: 'window' }) + private detectOverflow() { + const { clientWidth, scrollWidth, scrollLeft } = this.listElement; + + this.leftScrollDistance = scrollLeft; + this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth; + } + + componentDidLoad() { + if (this.shouldHandleOverflow()) { + this.registerOverflowHandler(); + } + } + + disconnectedCallback() { + if (this.observer) { + this.observer.disconnect(); + } + } + + render() { + return ( + + this.onCardListVisibilityToggle()} + onShowAllClick={(e) => this.onShowAllClick(e)} + > +
+
this.onCardListScroll()} + > + this.changeVisibilityOfSlotChildren()} + > + {this.isShowMoreCardVisible() ? ( + + this.showMoreCardClick.emit({ + nativeEvent: event, + }) + } + > + + + + {this.i18nMoreCards} ({this.numberOfOverflowingElements}) + + + + ) : null} +
+
+ + ); + } +} diff --git a/packages/core/src/components/card-title/card-title.scss b/packages/core/src/components/card-title/card-title.scss new file mode 100644 index 00000000000..e7a6e26394a --- /dev/null +++ b/packages/core/src/components/card-title/card-title.scss @@ -0,0 +1,22 @@ +@import 'common-variables'; + +:host { + display: flex; + position: relative; + flex-direction: row; + align-items: center; + padding: 0px; + margin-bottom: $small-space; + gap: $default-space; + + width: 100%; + + .title-actions { + display: flex; + position: relative; + flex-direction: row; + gap: 0.25rem; + margin-left: auto; + margin-right: 0px; + } +} diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx new file mode 100644 index 00000000000..5697c2f5e9e --- /dev/null +++ b/packages/core/src/components/card-title/card-title.tsx @@ -0,0 +1,24 @@ +import { Component, h, Host } from '@stencil/core'; + +/** + * @slot title-actions - Place additional actions inside title + * + * @since 1.6.0 + */ +@Component({ + tag: 'ix-card-title', + styleUrl: 'card-title.scss', + shadow: true, +}) +export class CardHeader { + render() { + return ( + + +
+ +
+ + ); + } +} diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss new file mode 100644 index 00000000000..f4e2da25368 --- /dev/null +++ b/packages/core/src/components/card/card.scss @@ -0,0 +1,89 @@ +/* + * 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 'mixins/shadow-dom/component'; + +$paddingContentLeftRight: 1rem; + +:host { + @include ix-component; + display: flex; + position: relative; + flex-direction: column; + align-items: flex-start; + align-self: flex-start; + overflow: hidden; + + width: 20rem; + + border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr)); + border-radius: var(--theme-default-border-radius); + + .card-content { + display: block; + position: relative; + flex-shrink: 0; + flex-grow: 1; + width: 100%; + padding: 1rem $paddingContentLeftRight; + // min-height: calc(13.5rem - 2.5rem); + height: calc(100% - 2rem); + background-color: var(--ix-card-background, transparent); + border-top-left-radius: var(--theme-default-border-radius); + border-top-right-radius: var(--theme-default-border-radius); + } + + .card-footer { + display: flex; + position: relative; + width: 100%; + } +} + +:host(.card-insight) { + --ix-card-background: transparent; + --ix-card-border-color: var(--theme-color-soft-bdr); +} + +:host(.card-notification) { + --ix-card-background: var(--theme-color-component-1); +} + +:host(.card-alarm) { + --ix-card-background: var(--theme-color-alarm); + color: var(--theme-color-alarm--contrast); +} + +:host(.card-critical) { + --ix-card-background: var(--theme-color-critical); + color: var(--theme-color-critical--contrast); +} + +:host(.card-warning) { + --ix-card-background: var(--theme-color-warning); + color: var(--theme-color-warning--contrast); +} + +:host(.card-success) { + --ix-card-background: var(--theme-color-success); + color: var(--theme-color-success--contrast); +} + +:host(.card-info) { + --ix-card-background: var(--theme-color-info); + color: var(--theme-color-info--contrast); +} + +:host(.card-neutral) { + --ix-card-background: var(--theme-color-neutral); + color: var(--theme-color-neutral--contrast); +} + +:host(:not(.card-insight)) { + --ix-card-border-color: transparent; +} diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx new file mode 100644 index 00000000000..c4dadadeac5 --- /dev/null +++ b/packages/core/src/components/card/card.tsx @@ -0,0 +1,41 @@ +import { Component, Element, h, Host, Prop } from '@stencil/core'; + +export type CardVariant = + | 'insight' + | 'notification' + | 'alarm' + | 'critical' + | 'warning' + | 'info' + | 'neutral' + | 'success'; + +/** + * @since 1.6.0 + */ +@Component({ + tag: 'ix-card', + styleUrl: 'card.scss', + shadow: true, +}) +export class Card { + @Element() hostElement: HTMLIxCardElement; + + /** + * Card variant + */ + @Prop() variant: CardVariant = 'insight'; + + render() { + return ( + +
+ +
+
+ +
+ + ); + } +} diff --git a/packages/core/src/components/layout/css-grid/builder.ts b/packages/core/src/components/layout/css-grid/builder.ts new file mode 100644 index 00000000000..3504fe56441 --- /dev/null +++ b/packages/core/src/components/layout/css-grid/builder.ts @@ -0,0 +1,21 @@ +/* + * 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. + */ +export function templateBuilder(inputTemplate: string[][]) { + let templateString = ''; + + inputTemplate.forEach((row) => { + templateString += '"'; + templateString = row.reduce((pV, cV) => { + return `${pV} ${cV}`; + }, templateString); + templateString += '"\n'; + }); + + return templateString; +} diff --git a/packages/core/src/components/layout/css-grid/css-grid-item.scss b/packages/core/src/components/layout/css-grid/css-grid-item.scss new file mode 100644 index 00000000000..aba54ccff7a --- /dev/null +++ b/packages/core/src/components/layout/css-grid/css-grid-item.scss @@ -0,0 +1,17 @@ +/* + * 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. + */ +:host { + display: block; + position: relative; + + ::slotted(*) { + height: 100%; + width: 100%; + } +} diff --git a/packages/core/src/components/layout/css-grid/css-grid-item.tsx b/packages/core/src/components/layout/css-grid/css-grid-item.tsx new file mode 100644 index 00000000000..b0c43179db1 --- /dev/null +++ b/packages/core/src/components/layout/css-grid/css-grid-item.tsx @@ -0,0 +1,36 @@ +/* + * 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'; + +/** + * @internal + */ +@Component({ + tag: 'ix-css-grid-item', + styleUrl: 'css-grid-item.scss', + shadow: true, +}) +export class CssGridItem { + /** + * Grid item name + */ + @Prop() itemName: string; + + render() { + const style = {}; + style['grid-area'] = this.itemName; + + return ( + + + + ); + } +} diff --git a/packages/core/src/components/layout/css-grid/css-grid.scss b/packages/core/src/components/layout/css-grid/css-grid.scss new file mode 100644 index 00000000000..f6ff859d0ba --- /dev/null +++ b/packages/core/src/components/layout/css-grid/css-grid.scss @@ -0,0 +1,17 @@ +/* + * 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: grid; + position: relative; + row-gap: $large-space; + column-gap: $large-space; +} diff --git a/packages/core/src/components/layout/css-grid/css-grid.tsx b/packages/core/src/components/layout/css-grid/css-grid.tsx new file mode 100644 index 00000000000..de0e6b72ed6 --- /dev/null +++ b/packages/core/src/components/layout/css-grid/css-grid.tsx @@ -0,0 +1,116 @@ +/* + * 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, State } from '@stencil/core'; +import { templateBuilder } from './builder'; + +const smQuery = 'only screen and (max-width: 576px)'; +const mdQuery = 'only screen and (max-width: 768px)'; +const lgQuery = 'only screen and (max-width: 992px)'; + +export type CssGridTemplateType = 'sm' | 'md' | 'lg'; + +const mediaQueryCollection: Array<{ + name: CssGridTemplateType; + query: string; +}> = [ + { name: 'sm', query: smQuery }, + { name: 'md', query: mdQuery }, + { name: 'lg', query: lgQuery }, +]; + +/** + * @internal + */ +@Component({ + tag: 'ix-css-grid', + styleUrl: 'css-grid.scss', + shadow: true, +}) +export class CssGrid { + /** + * Define css grid template + */ + @Prop() templates: Partial>; + + @State() currentTemplate: string[][]; + + private disposeMediaQueryListener: ((event: MediaQueryListEvent) => void)[] = + []; + private mediaQueries: { + mediaQuery: MediaQueryList; + name: CssGridTemplateType; + query: string; + }[] = []; + + componentWillRender() { + this.mediaQueries = mediaQueryCollection.map((query) => { + const mediaQuery = window.matchMedia(query.query); + + const callback = () => { + this.applyTemplate(); + }; + this.disposeMediaQueryListener.push(callback); + mediaQuery.addEventListener('change', callback); + + return { + ...query, + mediaQuery, + }; + }); + + this.applyTemplate(); + } + + disconnectedCallback() { + this.mediaQueries.forEach((mq, index) => { + mq.mediaQuery.removeEventListener( + 'change', + this.disposeMediaQueryListener[index] + ); + }); + } + + private findNextTemplate(type: CssGridTemplateType) { + const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type); + const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name]; + if (!nextTemplate) { + return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name); + } + return nextTemplate; + } + + private applyTemplate() { + let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches); + + if (!active) { + active = this.mediaQueries[this.mediaQueries.length - 1]; + } + + const template = this.templates[active.name]; + + if (template) { + this.currentTemplate = template; + } else { + this.currentTemplate = this.findNextTemplate(active.name); + } + } + + render() { + const style = {}; + if (this.currentTemplate?.length !== 0) { + style['grid-template-areas'] = templateBuilder(this.currentTemplate); + } + return ( + + + + ); + } +} diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss index 310abcff059..936f147c1c1 100644 --- a/packages/core/src/components/my-component/my-component.scss +++ b/packages/core/src/components/my-component/my-component.scss @@ -14,4 +14,5 @@ position: relative; width: 100vw; height: 100vh; + padding: 1rem 0rem 0rem 1rem; } diff --git a/packages/core/src/components/push-card/push-card.scss b/packages/core/src/components/push-card/push-card.scss new file mode 100644 index 00000000000..5c6b280ac32 --- /dev/null +++ b/packages/core/src/components/push-card/push-card.scss @@ -0,0 +1,97 @@ +/* + * 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. + */ + +:host { + display: block; + position: relative; + + .icon { + transform: scale(1.25); + } + + .notification { + font-size: 40px; + } + + ix-card-title { + height: 3rem; + } + + ix-card-content { + height: 7.875rem; + } +} + +:host(:hover) { + ix-card.card-insight:hover { + --ix-card-background: var(--theme-color-ghost--hover); + } + + ix-card.card-notification:hover { + --ix-card-background: var(--theme-color-component-1--hover); + } + + ix-card.card-alarm:hover { + --ix-card-background: var(--theme-color-alarm--hover); + } + + ix-card.card-critical:hover { + --ix-card-background: var(--theme-color-critical--hover); + } + + ix-card.card-warning:hover { + --ix-card-background: var(--theme-color-warning--hover); + } + + ix-card.card-success:hover { + --ix-card-background: var(--theme-color-success--hover); + } + + ix-card.card-info:hover { + --ix-card-background: var(--theme-color-info--hover); + } + + ix-card.card-neutral:hover { + --ix-card-background: var(--theme-color-neutral--hover); + } +} + +:host(:active) { + ix-card.card-insight:active { + --ix-card-background: var(--theme-color-ghost--active); + } + + ix-card.card-notification:active { + --ix-card-background: var(--theme-color-component-1--active); + } + + ix-card.card-alarm:active { + --ix-card-background: var(--theme-color-alarm--active); + } + + ix-card.card-critical:active { + --ix-card-background: var(--theme-color-critical--active); + } + + ix-card.card-warning:active { + --ix-card-background: var(--theme-color-warning--active); + } + + ix-card.card-success:active { + --ix-card-background: var(--theme-color-success--active); + } + + ix-card.card-info:active { + --ix-card-background: var(--theme-color-info--active); + } + + ix-card.card-neutral:active { + --ix-card-background: var(--theme-color-neutral--active); + } +} diff --git a/packages/core/src/components/push-card/push-card.tsx b/packages/core/src/components/push-card/push-card.tsx new file mode 100644 index 00000000000..109cf94ba8f --- /dev/null +++ b/packages/core/src/components/push-card/push-card.tsx @@ -0,0 +1,73 @@ +/* + * 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'; +import { CardVariant } from '../card/card'; + +export type PushCardVariant = CardVariant; + +/** + * @since 1.6.0 + */ +@Component({ + tag: 'ix-push-card', + styleUrl: 'push-card.scss', + shadow: true, +}) +export class PushCard { + /** + * Card icon + */ + @Prop() icon: string | undefined = undefined; + + /** + * Card KPI value + */ + @Prop() notification: string; + + /** + * Card heading + */ + @Prop() heading: string; + + /** + * Card subheading + */ + @Prop() subheading: string; + + /** + * Card variant + */ + @Prop() variant: PushCardVariant = 'insight'; + + render() { + return ( + + + + {this.icon ? ( + + ) : null} + {this.notification ?? 0} + + + + + {this.heading} + + {this.subheading} + + + + + + + ); + } +} diff --git a/packages/core/src/components/typography/types.ts b/packages/core/src/components/typography/type-mapping.ts similarity index 73% rename from packages/core/src/components/typography/types.ts rename to packages/core/src/components/typography/type-mapping.ts index 9fd81310124..a78c7b6c1b1 100644 --- a/packages/core/src/components/typography/types.ts +++ b/packages/core/src/components/typography/type-mapping.ts @@ -6,7 +6,19 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import { TypographyVariants } from './typography'; +export type TypographyVariants = + | 'x-small' + | 'small' + | 'caption' + | 'caption-single' + | 'default' + | 'default-single' + | 'default-title' + | 'default-title-single' + | 'large' + | 'large-single' + | 'h2' + | 'display-large'; export const VariantsMapping: Record = { 'x-small': 'text-xs', @@ -17,8 +29,6 @@ export const VariantsMapping: Record = { 'default-single': 'text-default-single', large: 'text-l', 'large-single': 'text-l-single', - 'large-title': 'text-l-title', - 'large-title-single': 'text-l-title-single', h2: 'text-h2', 'display-large': 'text-xl', 'default-title': 'text-default-title', diff --git a/packages/core/src/components/typography/typography.tsx b/packages/core/src/components/typography/typography.tsx index fa62c2afb4c..0483d583be2 100644 --- a/packages/core/src/components/typography/typography.tsx +++ b/packages/core/src/components/typography/typography.tsx @@ -8,7 +8,7 @@ */ import { Component, h, Prop } from '@stencil/core'; -import { VariantsMapping } from './types'; +import { VariantsMapping } from './type-mapping'; export type TypographyVariants = | 'x-small' diff --git a/packages/core/src/tests/action-card/action-card.e2e.ts b/packages/core/src/tests/action-card/action-card.e2e.ts new file mode 100644 index 00000000000..376c7f99610 --- /dev/null +++ b/packages/core/src/tests/action-card/action-card.e2e.ts @@ -0,0 +1,23 @@ +/* + * 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 { expect } from '@playwright/test'; +import { regressionTest } from '@utils/test'; + +regressionTest.describe('action card: basic', () => { + regressionTest('should not have visual regressions', async ({ page }) => { + await page.goto('action-card/basic'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('should have selected state', async ({ page }) => { + await page.goto('action-card/selected'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..042a5f63415 Binary files /dev/null and b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..9ed820d928c Binary files /dev/null and b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..4ae7cca9479 Binary files /dev/null and b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..51bb143dba2 Binary files /dev/null and b/packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/action-card/basic/index.html b/packages/core/src/tests/action-card/basic/index.html new file mode 100644 index 00000000000..cd9d6bb079c --- /dev/null +++ b/packages/core/src/tests/action-card/basic/index.html @@ -0,0 +1,77 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + +
+ + Use Swap Instance to replace content +
+ + + + diff --git a/packages/core/src/tests/action-card/selected/index.html b/packages/core/src/tests/action-card/selected/index.html new file mode 100644 index 00000000000..92ab399c37d --- /dev/null +++ b/packages/core/src/tests/action-card/selected/index.html @@ -0,0 +1,85 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + +
+ + Use Swap Instance to replace content +
+ + + + diff --git a/packages/core/src/tests/card-list/basic/index.html b/packages/core/src/tests/card-list/basic/index.html new file mode 100644 index 00000000000..d859e9ecc9f --- /dev/null +++ b/packages/core/src/tests/card-list/basic/index.html @@ -0,0 +1,88 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + + + + + + diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts b/packages/core/src/tests/card-list/card-list.e2e.ts new file mode 100644 index 00000000000..4101f02b2a8 --- /dev/null +++ b/packages/core/src/tests/card-list/card-list.e2e.ts @@ -0,0 +1,33 @@ +/* + * 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 { expect } from '@playwright/test'; +import { regressionTest } from '@utils/test'; + +regressionTest.describe('card-list: basic', () => { + regressionTest('should not have visual regressions', async ({ page }) => { + await page.goto('card-list/basic'); + await page.waitForTimeout(1000); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('layout scrolling', async ({ page }) => { + await page.goto('card-list/layout-scroll'); + await page.waitForTimeout(1000); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('layout scrolling end', async ({ page }) => { + await page.goto('card-list/layout-scroll'); + + await page.locator('#end').scrollIntoViewIfNeeded(); + await page.waitForTimeout(1000); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..f6a9fe027b2 Binary files /dev/null and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..2dda77c3907 Binary files /dev/null and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..375ce92ce25 Binary files /dev/null and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..cd690c58551 Binary files /dev/null and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..f6e23b77839 Binary files /dev/null and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..4302ddcbb2c Binary files /dev/null and b/packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/card-list/layout-scroll/index.html b/packages/core/src/tests/card-list/layout-scroll/index.html new file mode 100644 index 00000000000..4e3f9a7abf3 --- /dev/null +++ b/packages/core/src/tests/card-list/layout-scroll/index.html @@ -0,0 +1,117 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/core/src/tests/push-card/basic/index.html b/packages/core/src/tests/push-card/basic/index.html new file mode 100644 index 00000000000..45cc38b6236 --- /dev/null +++ b/packages/core/src/tests/push-card/basic/index.html @@ -0,0 +1,81 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + + + diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts b/packages/core/src/tests/push-card/push-card.e2e.ts new file mode 100644 index 00000000000..06057a7f890 --- /dev/null +++ b/packages/core/src/tests/push-card/push-card.e2e.ts @@ -0,0 +1,32 @@ +/* + * 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 { expect } from '@playwright/test'; +import { regressionTest } from '@utils/test'; + +regressionTest.describe('push-card: basic', () => { + regressionTest('should not have visual regressions', async ({ page }) => { + await page.goto('push-card/basic'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + + regressionTest('should click accordion', async ({ page }) => { + await page.goto('push-card/basic'); + + for (const element of await page.locator('ix-card-accordion').all()) { + const button = element.locator('button'); + await button.click(); + } + + // Animation time + await page.waitForTimeout(500); + + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); +}); diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..47cc1c6fe86 Binary files /dev/null and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..b178044bed3 Binary files /dev/null and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..6d8ef88e4fe Binary files /dev/null and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..1980ea4d1b9 Binary files /dev/null and b/packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/documentation/docs/controls/card.md b/packages/documentation/docs/controls/card.md new file mode 100644 index 00000000000..3de15912ed2 --- /dev/null +++ b/packages/documentation/docs/controls/card.md @@ -0,0 +1,118 @@ +--- +title: Cards +--- +import Playground from '@site/src/components/Playground'; + +import CardListTags from './../auto-generated/ix-card-list/tags.md'; +import CardListProps from './../auto-generated/ix-card-list/props.md'; +import CardListEvents from './../auto-generated/ix-card-list/events.md'; + +import PushCardTags from './../auto-generated/ix-push-card/tags.md'; +import PushCardProps from './../auto-generated/ix-push-card/props.md'; +import PushCardEvents from './../auto-generated/ix-push-card/events.md'; + +import ActionCardTags from './../auto-generated/ix-action-card/tags.md'; +import ActionCardProps from './../auto-generated/ix-action-card/props.md'; +import ActionCardEvents from './../auto-generated/ix-action-card/events.md'; + +import WebComponentCardList from './../auto-generated/previews/web-component/card-list.md' +import ReactCardList from './../auto-generated/previews/react/card-list.md' +import VueCardList from './../auto-generated/previews/vue/card-list.md' +import AngularTsCardList from './../auto-generated/previews/angular/card-list.ts.md' +import AngularHtmlCardList from './../auto-generated/previews/angular/card-list.html.md' + +import WebComponentPushCard from './../auto-generated/previews/web-component/push-card.md' +import ReactPushCard from './../auto-generated/previews/react/push-card.md' +import VuePushCard from './../auto-generated/previews/vue/push-card.md' +import AngularTsPushCard from './../auto-generated/previews/angular/push-card.ts.md' +import AngularHtmlPushCard from './../auto-generated/previews/angular/push-card.html.md' + +import WebComponentActionCard from './../auto-generated/previews/web-component/action-card.md' +import ReactActionCard from './../auto-generated/previews/react/action-card.md' +import VueActionCard from './../auto-generated/previews/vue/action-card.md' +import AngularTsActionCard from './../auto-generated/previews/angular/action-card.ts.md' +import AngularHtmlActionCard from './../auto-generated/previews/angular/action-card.html.md' + +## Push Card + + + + + + +## Action Card + + + + + + +## Card List + + + + + + +## Properties (ix-card-list) + +### Props + + + +### Events + + + +## Properties (ix-push-card) + +### Props + + + +### Events + + + +## Properties (ix-action-card) + +### Props + + + +### Events + + diff --git a/packages/html-test-app/src/preview-examples/action-card.html b/packages/html-test-app/src/preview-examples/action-card.html new file mode 100644 index 00000000000..4776c1d9962 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/action-card.html @@ -0,0 +1,34 @@ + + + + + + + Vite App + + + + + + + + + diff --git a/packages/html-test-app/src/preview-examples/card-list.html b/packages/html-test-app/src/preview-examples/card-list.html new file mode 100644 index 00000000000..45ab7a16570 --- /dev/null +++ b/packages/html-test-app/src/preview-examples/card-list.html @@ -0,0 +1,82 @@ + + + + + + + Vite App + + + + + + + + + + + + + + + + + + + + diff --git a/packages/html-test-app/src/preview-examples/push-card.html b/packages/html-test-app/src/preview-examples/push-card.html new file mode 100644 index 00000000000..e0806e24a7e --- /dev/null +++ b/packages/html-test-app/src/preview-examples/push-card.html @@ -0,0 +1,59 @@ + + + + + + + Vite App + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ + + + + diff --git a/packages/react-test-app/src/main.tsx b/packages/react-test-app/src/main.tsx index 61aed620818..5b44b035c8e 100644 --- a/packages/react-test-app/src/main.tsx +++ b/packages/react-test-app/src/main.tsx @@ -20,6 +20,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import App from './App'; import './index.css'; import AboutAndLegal from './preview-examples/about-and-legal'; +import ActionCard from './preview-examples/action-card'; import AGGrid from './preview-examples/aggrid'; import BasicNavigation from './preview-examples/basic-navigation'; import BasicNavigationWithoutHeader from './preview-examples/basic-navigation-without-header'; @@ -31,6 +32,7 @@ import ButtonGroup from './preview-examples/button-group'; import ButtonSelected from './preview-examples/button-selected'; import ButtonWithIcon from './preview-examples/button-with-icon'; import Buttons from './preview-examples/buttons'; +import CardList from './preview-examples/card-list'; import Checkbox from './preview-examples/checkbox'; import CheckboxIndeterminate from './preview-examples/checkbox-indeterminate'; import Chip from './preview-examples/chip'; @@ -62,6 +64,7 @@ import MessageBar from './preview-examples/message-bar'; import ModalExample from './preview-examples/modal'; import Pill from './preview-examples/pill'; import PopoverNews from './preview-examples/popover-news'; +import PushCard from './preview-examples/push-card'; import RadioButton from './preview-examples/radio-button'; import Select from './preview-examples/select'; import SelectEditable from './preview-examples/select-editable'; @@ -230,6 +233,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( /> } /> } /> + } /> + } /> + } /> }> { + return ( + + ); +}; diff --git a/packages/react-test-app/src/preview-examples/card-list.tsx b/packages/react-test-app/src/preview-examples/card-list.tsx new file mode 100644 index 00000000000..96cc3e22d46 --- /dev/null +++ b/packages/react-test-app/src/preview-examples/card-list.tsx @@ -0,0 +1,79 @@ +/* + * 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 { IxCardList, IxPushCard } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( + <> + + + + + + + + + + + + + + + ); +}; diff --git a/packages/react-test-app/src/preview-examples/push-card.tsx b/packages/react-test-app/src/preview-examples/push-card.tsx new file mode 100644 index 00000000000..ea05c056f6d --- /dev/null +++ b/packages/react-test-app/src/preview-examples/push-card.tsx @@ -0,0 +1,53 @@ +/* + * 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 { IxPushCard } from '@siemens/ix-react'; +import React from 'react'; + +export default () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ + ); +}; diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts index fdfacd092e3..895c9ff275f 100644 --- a/packages/react/src/components.ts +++ b/packages/react/src/components.ts @@ -8,6 +8,7 @@ import type { JSX } from '@siemens/ix'; import { defineCustomElements } from '@siemens/ix/loader'; defineCustomElements(); +export const IxActionCard = /*@__PURE__*/createReactComponent('ix-action-card'); export const IxAnimatedTab = /*@__PURE__*/createReactComponent('ix-animated-tab'); export const IxAnimatedTabs = /*@__PURE__*/createReactComponent('ix-animated-tabs'); export const IxApplicationHeader = /*@__PURE__*/createReactComponent('ix-application-header'); @@ -16,6 +17,11 @@ export const IxBlind = /*@__PURE__*/createReactComponent('ix-breadcrumb'); export const IxBreadcrumbItem = /*@__PURE__*/createReactComponent('ix-breadcrumb-item'); export const IxButton = /*@__PURE__*/createReactComponent('ix-button'); +export const IxCard = /*@__PURE__*/createReactComponent('ix-card'); +export const IxCardAccordion = /*@__PURE__*/createReactComponent('ix-card-accordion'); +export const IxCardContent = /*@__PURE__*/createReactComponent('ix-card-content'); +export const IxCardList = /*@__PURE__*/createReactComponent('ix-card-list'); +export const IxCardTitle = /*@__PURE__*/createReactComponent('ix-card-title'); export const IxCategoryFilter = /*@__PURE__*/createReactComponent('ix-category-filter'); export const IxChip = /*@__PURE__*/createReactComponent('ix-chip'); export const IxContentHeader = /*@__PURE__*/createReactComponent('ix-content-header'); @@ -62,6 +68,7 @@ export const IxModalContainer = /*@__PURE__*/createReactComponent('ix-modal-example'); export const IxPagination = /*@__PURE__*/createReactComponent('ix-pagination'); export const IxPill = /*@__PURE__*/createReactComponent('ix-pill'); +export const IxPushCard = /*@__PURE__*/createReactComponent('ix-push-card'); export const IxSelect = /*@__PURE__*/createReactComponent('ix-select'); export const IxSelectItem = /*@__PURE__*/createReactComponent('ix-select-item'); export const IxSpinner = /*@__PURE__*/createReactComponent('ix-spinner'); diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue index 4853c06ac15..657f67cba4e 100644 --- a/packages/vue-test-app/src/Root.vue +++ b/packages/vue-test-app/src/Root.vue @@ -12,6 +12,7 @@ import { computed, ref } from 'vue'; import App from './App.vue'; import AboutAndLegal from './preview-examples/about-and-legal.vue'; +import ActionCard from './preview-examples/action-card.vue'; import AGGrid from './preview-examples/aggrid.vue'; import BasicNavigationWithoutHeader from './preview-examples/basic-navigation-without-header.vue'; import BasicNavigation from './preview-examples/basic-navigation.vue'; @@ -66,6 +67,7 @@ import MessageBar from './preview-examples/message-bar.vue'; import ModalExample from './preview-examples/modal.vue'; import Pill from './preview-examples/pill.vue'; import PopoverNews from './preview-examples/popover-news.vue'; +import PushCard from './preview-examples/push-card.vue'; import RadioButton from './preview-examples/radio-button.vue'; import SelectEditable from './preview-examples/select-editable.vue'; import SelectMultiple from './preview-examples/select-multiple.vue'; @@ -168,6 +170,8 @@ const routes: any = { '/preview/map-navigation': MapNavigation, '/preview/map-navigation-overlay': MapNavigationOverlay, '/preview/tooltip': Tooltip, + '/preview/push-card': PushCard, + '/preview/action-card': ActionCard, '/preview/page-header': ContentHeader, '/preview/page-header-no-back': ContentHeaderNoBack, '/preview/empty-state': EmptyState, diff --git a/packages/vue-test-app/src/preview-examples/action-card.vue b/packages/vue-test-app/src/preview-examples/action-card.vue new file mode 100644 index 00000000000..03d1004f0a6 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/action-card.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/card-list.vue b/packages/vue-test-app/src/preview-examples/card-list.vue new file mode 100644 index 00000000000..c9329ae05f3 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/card-list.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/push-card.vue b/packages/vue-test-app/src/preview-examples/push-card.vue new file mode 100644 index 00000000000..ee0db555d73 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/push-card.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index 17f1149b58c..6dbc8b9aeb5 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -9,6 +9,15 @@ import { defineCustomElements } from '@siemens/ix/loader'; defineCustomElements(); +export const IxActionCard = /*@__PURE__*/ defineContainer('ix-action-card', undefined, [ + 'variant', + 'icon', + 'heading', + 'subheading', + 'selected' +]); + + export const IxAnimatedTab = /*@__PURE__*/ defineContainer('ix-animated-tab', undefined, [ 'icon', 'count' @@ -68,6 +77,37 @@ export const IxButton = /*@__PURE__*/ defineContainer('ix-button', ]); +export const IxCard = /*@__PURE__*/ defineContainer('ix-card', undefined, [ + 'variant' +]); + + +export const IxCardAccordion = /*@__PURE__*/ defineContainer('ix-card-accordion', undefined, [ + 'accordionExpand' +]); + + +export const IxCardContent = /*@__PURE__*/ defineContainer('ix-card-content', undefined); + + +export const IxCardList = /*@__PURE__*/ defineContainer('ix-card-list', undefined, [ + 'label', + 'collapse', + 'listStyle', + 'maxVisibleCards', + 'showAllCount', + 'suppressOverflowHandling', + 'i18nShowAll', + 'i18nMoreCards', + 'collapseChanged', + 'showAllClick', + 'showMoreCardClick' +]); + + +export const IxCardTitle = /*@__PURE__*/ defineContainer('ix-card-title', undefined); + + export const IxCategoryFilter = /*@__PURE__*/ defineContainer('ix-category-filter', undefined, [ 'initialState', 'filterState', @@ -513,6 +553,15 @@ export const IxPill = /*@__PURE__*/ defineContainer('ix-pill', undef ]); +export const IxPushCard = /*@__PURE__*/ defineContainer('ix-push-card', undefined, [ + 'icon', + 'notification', + 'heading', + 'subheading', + 'variant' +]); + + export const IxSelect = /*@__PURE__*/ defineContainer('ix-select', undefined, [ 'selectedIndices', 'allowClear',