-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(selectable-card): add retail selectable card (#298)
- Loading branch information
1 parent
ef5713f
commit b55c00a
Showing
31 changed files
with
564 additions
and
327 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 0 additions & 32 deletions
32
projects/ng-aquila/documentation/examples/card/card-footer/card-footer-example.html
This file was deleted.
Oops, something went wrong.
12 changes: 0 additions & 12 deletions
12
projects/ng-aquila/documentation/examples/card/card-footer/card-footer-example.ts
This file was deleted.
Oops, something went wrong.
Empty file.
12 changes: 6 additions & 6 deletions
12
...uila/documentation/examples/card/selectable-card-basic/selectable-card-basic-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| <nx-selectable-card> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p> | ||
| <nx-selectable-card class="nx-margin-bottom-2m"> | ||
| <div class="content"></div> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card checked> | ||
| <div class="content"></div> | ||
| </nx-selectable-card> |
3 changes: 3 additions & 0 deletions
3
...uila/documentation/examples/card/selectable-card-basic/selectable-card-basic-example.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .content { | ||
| height: 100px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
34 changes: 34 additions & 0 deletions
34
...la/documentation/examples/card/selectable-card-expert/selectable-card-expert-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <nx-selectable-card class="nx-margin-bottom-2m" appearance="expert"> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| <p nxCopytext>Default selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card class="nx-margin-bottom-2m" checked appearance="expert"> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| <p nxCopytext>Checked selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card class="nx-margin-bottom-2m" appearance="expert" disabled> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| <p nxCopytext>Disabled selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card class="nx-margin-bottom-2m" checked appearance="expert" disabled> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| <p nxCopytext>Disabled checked selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <form [formGroup]="formGroup"> | ||
| <nx-selectable-card formControlName="card" appearance="expert"> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| <p nxCopytext>Required selectable card</p> | ||
| <nx-error appearance="text"> | ||
| This card must be selected. | ||
| </nx-error> | ||
| </nx-selectable-card> | ||
| </form> |
25 changes: 25 additions & 0 deletions
25
...uila/documentation/examples/card/selectable-card-expert/selectable-card-expert-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Component } from '@angular/core'; | ||
| import { FormBuilder, FormGroup, Validators } from '@angular/forms'; | ||
|
|
||
| /** | ||
| * @title Selectable cards expert example | ||
| */ | ||
| @Component({ | ||
| selector: 'selectable-card-expert-example', | ||
| templateUrl: './selectable-card-expert-example.html', | ||
| styleUrls: ['./selectable-card-expert-example.css'] | ||
| }) | ||
| export class SelectableCardExpertExampleComponent { | ||
| formGroup: FormGroup; | ||
|
|
||
| constructor(private fb: FormBuilder) { | ||
| this.createForm(); | ||
| } | ||
|
|
||
| createForm() { | ||
| this.formGroup = this.fb.group({ | ||
| card: [false, Validators.requiredTrue] | ||
| }); | ||
| this.formGroup.markAllAsTouched(); | ||
| } | ||
| } |
22 changes: 22 additions & 0 deletions
22
.../documentation/examples/card/selectable-card-product/selectable-card-product-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <nx-selectable-card> | ||
| <div class="card"> | ||
| <img height="56" src="/assets/images/selectable-card.svg" alt="product image" /> | ||
| <div class="content"> | ||
| <div> | ||
| <h3 nxCopytext class="nx-font-weight-semibold nx-margin-bottom-2xs"> | ||
| Card headline | ||
| </h3> | ||
| <p nxCopytext="medium" class="nx-margin-bottom-2xs"> | ||
| Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,<br/> consectetur, adipisci velit | ||
| </p> | ||
| <span nxCopytext>$ 10 /monthly</span> | ||
| </div> | ||
| <button nxPlainButton class="nx-margin-left-xs" [nxPopoverTriggerFor]="popover" nxPopoverTrigger="click"> | ||
| <nx-icon size="s" name="info-circle-o"></nx-icon> | ||
| <nx-popover #popover> | ||
| <span nxCopytext>Trigger by click</span> | ||
| </nx-popover> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </nx-selectable-card> |
26 changes: 26 additions & 0 deletions
26
.../documentation/examples/card/selectable-card-product/selectable-card-product-example.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .card { | ||
| display: flex; | ||
| } | ||
|
|
||
| img { | ||
| flex: 0 0 auto; | ||
| margin-right: 16px; | ||
| } | ||
|
|
||
| .content { | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: space-between; | ||
| flex-basis: 100%; | ||
| } | ||
|
|
||
| @media (max-width: 703px) { | ||
| .card { | ||
| display: block; | ||
| } | ||
|
|
||
| img { | ||
| margin-right: 0; | ||
| margin-bottom: 8px; | ||
| } | ||
| } |
12 changes: 12 additions & 0 deletions
12
...la/documentation/examples/card/selectable-card-product/selectable-card-product-example.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| /** | ||
| * @title Selectable cards product example | ||
| */ | ||
| @Component({ | ||
| selector: 'selectable-card-product-example', | ||
| templateUrl: './selectable-card-product-example.html', | ||
| styleUrls: ['./selectable-card-product-example.scss'] | ||
| }) | ||
| export class SelectableCardProductExampleComponent { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .content { | ||
| height: 100px; | ||
| } |
8 changes: 2 additions & 6 deletions
8
...ocumentation/examples/card/selectable-card-reactive/selectable-card-reactive-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .content { | ||
| height: 124px; | ||
| } |
93 changes: 39 additions & 54 deletions
93
...la/documentation/examples/card/selectable-card-states/selectable-card-states-example.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,40 @@ | ||
| <nx-selectable-card class="nx-margin-bottom-xs"> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Default selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card checked class="nx-margin-bottom-xs"> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Checked selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card disabled class="nx-margin-bottom-xs"> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Disabled selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card disabled checked class="nx-margin-bottom-xs"> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Disabled and checked selectable card</p> | ||
| </nx-selectable-card> | ||
|
|
||
| <form [formGroup]="formGroup"> | ||
| <nx-selectable-card required formControlName="errorCard" class="nx-margin-bottom-xs"> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Selectable card with error</p> | ||
| <nx-error appearance="text"> | ||
| This card must be selected. | ||
| </nx-error> | ||
| </nx-selectable-card> | ||
|
|
||
| <nx-selectable-card required formControlName="errorCard2" class="nx-margin-bottom-xs"> | ||
| <nx-card-header> | ||
| <h3 nxHeadline="subsection-small">Card headline</h3> | ||
| <hr> | ||
| </nx-card-header> | ||
| <p>Checked selectable card with error</p> | ||
| <nx-error appearance="text"> | ||
| This card must not be selected. | ||
| </nx-error> | ||
| </nx-selectable-card> | ||
| <form [formGroup]="formGroup" nxLayout="grid"> | ||
| <div nxRow> | ||
| <div nxCol="12,12,6,6"> | ||
| <nx-selectable-card class="nx-margin-bottom-2m"> | ||
| <h3 nxCopytext class="content">Default selectable card</h3> | ||
| </nx-selectable-card> | ||
| </div> | ||
| <div nxCol="12,12,6,6"> | ||
| <nx-selectable-card checked class="nx-margin-bottom-2m"> | ||
| <h3 nxCopytext class="content">Checked selectable card</h3> | ||
| </nx-selectable-card> | ||
| </div> | ||
| <div nxCol="12,12,6,6"> | ||
| <nx-selectable-card disabled class="nx-margin-bottom-2m"> | ||
| <h3 nxCopytext class="content">Disabled selectable card</h3> | ||
| </nx-selectable-card> | ||
| </div> | ||
| <div nxCol="12,12,6,6"> | ||
| <nx-selectable-card disabled checked class="nx-margin-bottom-2m"> | ||
| <h3 nxCopytext class="content">Disabled and checked selectable card</h3> | ||
| </nx-selectable-card> | ||
| </div> | ||
| <div nxCol="12,12,6,6"> | ||
| <nx-selectable-card formControlName="errorCard" class="nx-margin-bottom-2m"> | ||
| <h3 nxCopytext class="content">Selectable card with error</h3> | ||
| <nx-error> | ||
| This card must be selected. | ||
| </nx-error> | ||
| </nx-selectable-card> | ||
| </div> | ||
| <div nxCol="12,12,6,6"> | ||
| <nx-selectable-card formControlName="errorCard2"> | ||
| <h3 nxCopytext class="content">This card must not be selected.</h3> | ||
| <nx-error> | ||
| This card must not be selected. | ||
| </nx-error> | ||
| </nx-selectable-card> | ||
| </div> | ||
| </div> | ||
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.