feat(core/cards): add card related components

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 PageHeader from 'src/preview-examples/page-header';
 import PageHeaderNoBack from 'src/preview-examples/page-header-no-back';
 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 },

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 PageHeader from 'src/preview-examples/page-header';
 import PageHeaderNoBack from 'src/preview-examples/page-header-no-back';
 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,6 +196,9 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     TooltipTitle,
     ModalByInstance,
     ModalByInstanceExample,
+    PushCard,
+    ActionCard,
+    CardList,
     PageHeader,
     EmptyState,
     EmptyStateCompact,

packages/angular-test-app/src/preview-examples/action-card.html

@@ -0,0 +1,7 @@
+<ix-action-card
+  icon="refresh"
+  heading="Scan for new devices"
+  subheading="Secondary text"
+  variant="insight"
+  (click)="onClick($event)"
+></ix-action-card>

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);
+  }
+}

packages/angular-test-app/src/preview-examples/card-list.html

@@ -0,0 +1,69 @@
+<!--
+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.
+-->
+<ix-card-list label="Layout Stack" show-all-count="12" list-style="stack">
+  <ix-push-card
+    icon="rocket"
+    notification="3"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="notification"
+  ></ix-push-card>
+  <ix-push-card
+    icon="bulb"
+    notification="1"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="warning"
+  ></ix-push-card>
+  <ix-push-card
+    icon="rocket"
+    notification="3"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="success"
+  ></ix-push-card>
+</ix-card-list>
+
+<ix-card-list label="Layout Flow" show-all-count="12" list-style="scroll">
+  <ix-push-card
+    icon="rocket"
+    notification="3"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="notification"
+  ></ix-push-card>
+  <ix-push-card
+    icon="bulb"
+    notification="1"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="warning"
+  ></ix-push-card>
+  <ix-push-card
+    icon="rocket"
+    notification="3"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="notification"
+  ></ix-push-card>
+  <ix-push-card
+    icon="rocket"
+    notification="3"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="notification"
+  ></ix-push-card>
+  <ix-push-card
+    icon="rocket"
+    notification="3"
+    heading="Heading content"
+    subheading="Subheading"
+    variant="notification"
+  ></ix-push-card>
+</ix-card-list>

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 {}

packages/angular-test-app/src/preview-examples/push-card.html

@@ -0,0 +1,38 @@
+<ix-push-card
+  icon="bulb"
+  notification="99"
+  heading="Heading content"
+  subheading="Subheading"
+  variant="insight"
+>
+  <!-- Just example content -->
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td colspan="2">Larry the Bird</td>
+        <td>@twitter</td>
+      </tr>
+    </tbody>
+  </table>
+</ix-push-card>

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 {}