Skip to content

Commit

Permalink
feat(comparision-table): add error state (#851)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vt-allianz
vt-allianz authored and GitHub Enterprise committed Mar 14, 2023
1 parent 95daf0c commit 521bf44
Show file tree
Hide file tree
Showing 12 changed files with 371 additions and 4 deletions.
168 changes: 168 additions & 0 deletions ...tion/examples/comparison-table/comparison-table-error/comparison-table-error-example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<div class="container">
<nx-comparison-table
(selectedIndexChange)="select($event)"
[isError]="control.value === null"
>
<ng-container nxComparisonTableRow type="header">
<nx-comparison-table-popular-cell forColumn="2">
<div class="popular-cell__content-wrapper">
<p class="popular-cell__title">Most popular</p>
<button
nxPlainButton
class="popular-info-icon"
#popoverTrigger="nxPopoverTrigger"
[nxPopoverTriggerFor]="popover"
nxPopoverTrigger="click"
aria-label="More information"
type="button"
>
<nx-icon name="info-circle-o"></nx-icon>
</button>
<nx-popover #popover>
<span
>This product was chosen by most of the users</span
>
</nx-popover>
</div>
</nx-comparison-table-popular-cell>
<nx-comparison-table-cell type="header">
<div class="header-container">
<p class="product-title">Product 1</p>
<p class="product-price-dynamic">105,99 €</p>
<button
nxComparisonTableSelectButton
unselectedLabel="Select"
selectedLabel="Selected"
type="button"
></button>
</div>
</nx-comparison-table-cell>
<nx-comparison-table-cell type="header">
<div class="header-container">
<p class="product-title">Product 2 with a very long name</p>
<p class="product-price-dynamic">110,99 €</p>
<button
nxComparisonTableSelectButton
unselectedLabel="Select"
selectedLabel="Selected"
type="button"
></button>
</div>
</nx-comparison-table-cell>
<nx-comparison-table-cell type="header">
<div class="header-container">
<p class="product-title">Product 3</p>
<p class="product-price-dynamic">115,99 €</p>
<button
nxComparisonTableSelectButton
unselectedLabel="Select"
selectedLabel="Selected"
type="button"
></button>
</div>
</nx-comparison-table-cell>
</ng-container>

<ng-container nxComparisonTableRow>
<nx-comparison-table-description-cell>
<div class="has-popover">
<span>Service headline</span>
<button
nxPlainButton
class="info-icon"
aria-label="More information"
[nxPopoverTriggerFor]="popoverContent1"
nxPopoverTrigger="click"
type="button"
>
<nx-icon name="info-circle-o"></nx-icon>
</button>
<nx-popover #popoverContent1>
<span>Service headline popover content</span>
</nx-popover>
</div>
</nx-comparison-table-description-cell>
<nx-comparison-table-cell>100 Mio. Euro</nx-comparison-table-cell>
<nx-comparison-table-cell>150 Mio. Euro</nx-comparison-table-cell>
<nx-comparison-table-cell>200 Mio. Euro</nx-comparison-table-cell>
</ng-container>

<ng-container nxComparisonTableRow>
<nx-comparison-table-description-cell>
<div class="has-popover">
<span>Service headline</span>
<button
nxPlainButton
class="info-icon"
aria-label="More information"
[nxPopoverTriggerFor]="popoverContent2"
nxPopoverTrigger="click"
type="button"
>
<nx-icon name="info-circle-o"></nx-icon>
</button>
<nx-popover #popoverContent2>
<span>Service headline popover content</span>
</nx-popover>
</div>
</nx-comparison-table-description-cell>
<nx-comparison-table-cell>
<nx-icon
name="minus"
size="s"
aria-label="Not included"
class="minus-icon"
></nx-icon>
</nx-comparison-table-cell>
<nx-comparison-table-cell>
<nx-icon
name="check"
size="s"
aria-label="Included"
class="check-icon"
></nx-icon>
</nx-comparison-table-cell>
<nx-comparison-table-cell>
<nx-icon
name="check"
size="s"
aria-label="Included"
class="check-icon"
></nx-icon>
</nx-comparison-table-cell>
</ng-container>

<ng-container nxComparisonTableRow type="footer">
<nx-comparison-table-cell>
<button
nxComparisonTableSelectButton
unselectedLabel="Select"
selectedLabel="Selected"
class="nx-margin-bottom-s"
type="button"
></button>
<p class="product-underline">Some short information</p>
</nx-comparison-table-cell>
<nx-comparison-table-cell>
<button
nxComparisonTableSelectButton
unselectedLabel="Select"
selectedLabel="Selected"
class="nx-margin-bottom-s"
type="button"
></button>
<p class="product-underline">Some short information</p>
</nx-comparison-table-cell>
<nx-comparison-table-cell>
<button
nxComparisonTableSelectButton
unselectedLabel="Select"
selectedLabel="Selected"
class="nx-margin-bottom-s"
type="button"
></button>
<p class="product-underline">Some short information</p>
</nx-comparison-table-cell>
</ng-container>
</nx-comparison-table>
</div>
97 changes: 97 additions & 0 deletions ...tion/examples/comparison-table/comparison-table-error/comparison-table-error-example.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
.container {
padding: 12px;
background: var(
--documentation-comparison-table-example-background-color,
#0f2a3d
);
}

.product-title {
font-weight: 600;
margin: 0 0 12px 0;
}

.product-price-dynamic {
font-weight: 600;
font-size: 24px;
letter-spacing: 0.2px;
margin-top: auto;
margin-bottom: 16px;
/* use fixed height to avoid CLS issues */
height: 32px;
line-height: 32px;
}

.product-underline {
font-size: 14px;
line-height: 16px;
letter-spacing: 0.2px;
font-weight: 400;
margin: 0;
}

.header-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.header-container button {
margin: 0 auto;
}

.has-popover {
display: flex;
flex-direction: row;
}

.info-icon {
margin-left: auto;
}

@media only screen and (max-width: 703px) {
.has-popover {
text-align: left;
}
}

.popular-cell__content-wrapper {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}

.popular-cell__title {
width: 100%;
text-align: center;
margin: 0;
}

.info-icon,
.popular-info-icon {
align-self: flex-start;
}

@media only screen and (min-width: 704px) and (max-width: 991px) {
.info-icon {
margin-left: 8px;
}

.has-popover {
align-items: center;
}
}

.minus-icon {
color: var(--documentation-comparison-table-example-minus-color);
}

.check-icon {
color: var(--success);
}

::ng-deep .is-selected .check-icon {
color: var(--success-02, --success);
}
17 changes: 17 additions & 0 deletions ...tation/examples/comparison-table/comparison-table-error/comparison-table-error-example.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
selector: 'comparison-table-error-example',
templateUrl: './comparison-table-error-example.html',
styleUrls: ['./comparison-table-error-example.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ComparisonTableErrorExample {
constructor() {}
control = new FormControl(null);

select(v: any) {
this.control.setValue(v);
}
}
3 changes: 3 additions & 0 deletions ...cts/ng-aquila/documentation/examples/comparison-table/comparison-table-examples.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { BreakdownTableExpertExampleComponent } from './breakdown-table-expert/b
import { ComparisonTableExampleComponent } from './comparison-table/comparison-table-example';
import { ComparisonTableDisabledColumnsExampleComponent } from './comparison-table-disabled-columns/comparison-table-disabled-columns-example';
import { ComparisonTableDynamicExampleComponent } from './comparison-table-dynamic/comparison-table-dynamic-example';
import { ComparisonTableErrorExample } from './comparison-table-error/comparison-table-error-example';
import { ComparisonTableExpandableAreaExampleComponent } from './comparison-table-expandable-area/comparison-table-expandable-area-example';
import { ComparisonTableFormElementsExampleComponent } from './comparison-table-form-elements/comparison-table-form-elements-example';
import { ComparisonTableHiddenColumnsExampleComponent } from './comparison-table-hidden-columns/comparison-table-hidden-columns-example';
Expand All @@ -32,6 +33,7 @@ import { RecommendationTableExampleComponent } from './recommendation-table/reco
import { RecommendationTableExpertExampleComponent } from './recommendation-table-expert/recommendation-table-expert-example';

const EXAMPLES = [
ComparisonTableErrorExample,
ComparisonTableExampleComponent,
ComparisonTableStaticExampleComponent,
ComparisonTableDisabledColumnsExampleComponent,
Expand Down Expand Up @@ -73,6 +75,7 @@ const EXAMPLES = [
export class ComparisonExamplesModule {
static components() {
return {
'comparison-table-error': ComparisonTableErrorExample,
'comparison-table': ComparisonTableExampleComponent,
'comparison-table-static': ComparisonTableStaticExampleComponent,
'comparison-table-disabled-columns':
Expand Down
3 changes: 2 additions & 1 deletion projects/ng-aquila/src/comparison-table/cell/cell.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
[attr.id]="id"
[attr.headers]="_getHeaderIds()"
>
<div class="nx-comparison-table__cell-content">
<div class="nx-comparison-table__cell-content" [ngClass]="_getErrorClass()">
<ng-container *ngTemplateOutlet="ngContent"></ng-container>
</div>
</div>
Expand All @@ -23,6 +23,7 @@
[attr.scope]="type === 'header' ? 'row' : ''"
[attr.id]="id"
[attr.headers]="_getHeaderIds()"
[ngClass]="_getErrorClass()"
>
<ng-container *ngTemplateOutlet="ngContent"></ng-container>
</td>
Expand Down
26 changes: 26 additions & 0 deletions projects/ng-aquila/src/comparison-table/cell/cell.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,29 @@
.nx-comparison-table__cell.is-hidden {
display: none;
}

.nx-comparison-table__cell-content {
&.is-error {
border-top: 1px solid var(--danger) !important;
border-bottom: 1px solid var(--danger) !important;
}
&.is-error-first {
border-left: 1px solid var(--danger) !important;
}
&.is-error-last {
border-right: 1px solid var(--danger) !important;
}
}

.nx-comparison-table__mobile-header-cell {
&.is-error {
border-left: 1px solid var(--danger) !important;
border-right: 1px solid var(--danger) !important;
}
&.is-error-first {
border-top: 1px solid var(--danger) !important;
}
&.is-error-last {
border-bottom: 1px solid var(--danger) !important;
}
}
Loading

0 comments on commit 521bf44

Please sign in to comment.