Skip to content

Commit

Permalink
feat(core/cards): add card related components (#542)
Browse files Browse the repository at this point in the history
Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
  • Loading branch information
danielleroux and nuke-ellington authored May 30, 2023
1 parent b0bb9e2 commit 510b131
Show file tree
Hide file tree
Showing 72 changed files with 4,330 additions and 53 deletions.
6 changes: 6 additions & 0 deletions packages/angular-test-app/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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 },
Expand Down
8 changes: 7 additions & 1 deletion packages/angular-test-app/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -193,7 +196,9 @@ import { NavigationTestComponent } from './components/navigation-test.component'
TooltipTitle,
ModalByInstance,
ModalByInstanceExample,
ContentHeader,
PushCard,
ActionCard,
CardList,
EmptyState,
EmptyStateCompact,
EmptyStateCompactBreak,
Expand All @@ -205,6 +210,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
KeyValueListWithCustomValue,
KeyValueListWithIcon,
KeyValueListStriped,
ContentHeader,
ContentHeaderNoBack,
],
imports: [
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions packages/angular-test-app/src/preview-examples/action-card.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
69 changes: 69 additions & 0 deletions packages/angular-test-app/src/preview-examples/card-list.html
Original file line number Diff line number Diff line change
@@ -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="Stack Layout" 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="Flow Layout" 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>
16 changes: 16 additions & 0 deletions packages/angular-test-app/src/preview-examples/card-list.ts
Original file line number Diff line number Diff line change
@@ -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 {}
38 changes: 38 additions & 0 deletions packages/angular-test-app/src/preview-examples/push-card.html
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 16 additions & 0 deletions packages/angular-test-app/src/preview-examples/push-card.ts
Original file line number Diff line number Diff line change
@@ -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 {}
Loading

0 comments on commit 510b131

Please sign in to comment.