From ee27fda69c5e1d10cd045ad1be9465923ab49bb0 Mon Sep 17 00:00:00 2001 From: Dmitry Nehaychik <4dmitr@gmail.com> Date: Thu, 7 Jun 2018 21:05:52 +0300 Subject: [PATCH] feat(theme): add alert component --- angular.json | 3 +- .../live-example-block.component.scss | 1 + docs/assets/images/components/alert.svg | 36 +++ docs/structure.ts | 8 + e2e/alert.e2e-spec.ts | 94 ++++++ e2e/card.e2e-spec.ts | 2 +- e2e/{cards-shared.ts => component-shared.ts} | 12 +- e2e/flip-card.e2e-spec.ts | 2 +- e2e/reveal-card.e2e-spec.ts | 2 +- .../alert/_alert.component.theme.scss | 127 ++++++++ .../components/alert/alert.component.scss | 21 ++ .../theme/components/alert/alert.component.ts | 273 ++++++++++++++++++ .../theme/components/alert/alert.module.ts | 25 ++ src/framework/theme/index.ts | 2 + .../theme/styles/global/_components.scss | 2 + .../theme/styles/themes/_default.scss | 26 ++ .../alert/alert-accents.component.html | 11 + .../alert/alert-accents.component.ts | 15 + .../alert/alert-colors.component.html | 11 + .../alert/alert-colors.component.ts | 15 + .../alert/alert-showcase.component.html | 5 + .../alert/alert-showcase.component.ts | 15 + .../alert/alert-sizes.component.html | 8 + src/playground/alert/alert-sizes.component.ts | 15 + src/playground/alert/alert-test.component.ts | 82 ++++++ src/playground/playground-routing.module.ts | 30 ++ src/playground/playground.module.ts | 12 + 27 files changed, 849 insertions(+), 6 deletions(-) create mode 100644 docs/assets/images/components/alert.svg create mode 100644 e2e/alert.e2e-spec.ts rename e2e/{cards-shared.ts => component-shared.ts} (68%) create mode 100644 src/framework/theme/components/alert/_alert.component.theme.scss create mode 100644 src/framework/theme/components/alert/alert.component.scss create mode 100644 src/framework/theme/components/alert/alert.component.ts create mode 100644 src/framework/theme/components/alert/alert.module.ts create mode 100644 src/playground/alert/alert-accents.component.html create mode 100644 src/playground/alert/alert-accents.component.ts create mode 100644 src/playground/alert/alert-colors.component.html create mode 100644 src/playground/alert/alert-colors.component.ts create mode 100644 src/playground/alert/alert-showcase.component.html create mode 100644 src/playground/alert/alert-showcase.component.ts create mode 100644 src/playground/alert/alert-sizes.component.html create mode 100644 src/playground/alert/alert-sizes.component.ts create mode 100644 src/playground/alert/alert-test.component.ts diff --git a/angular.json b/angular.json index 18f38c693c..d927a8f5d2 100644 --- a/angular.json +++ b/angular.json @@ -109,8 +109,7 @@ "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { - "protractorConfig": "./protractor.conf.js", - "devServerTarget": "playground:serve" + "protractorConfig": "./protractor.conf.js" } }, "lint": { diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss index 093b97ba62..655aff9fb6 100644 --- a/docs/app/blocks/components/live-example-block/live-example-block.component.scss +++ b/docs/app/blocks/components/live-example-block/live-example-block.component.scss @@ -86,6 +86,7 @@ } select { + font-size: 0.875rem; appearance: none; } } diff --git a/docs/assets/images/components/alert.svg b/docs/assets/images/components/alert.svg new file mode 100644 index 0000000000..dc762fb304 --- /dev/null +++ b/docs/assets/images/components/alert.svg @@ -0,0 +1,36 @@ + + + + A45E55D3-01AB-41B0-9176-AEC0BB5E6D00 + Created with sketchtool. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/structure.ts b/docs/structure.ts index f45e1015e0..754116b01b 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -187,6 +187,14 @@ export const structure = [ 'NbCardBackComponent', ], }, + { + type: 'tabs', + name: 'Alert', + icon: 'alert.svg', + source: [ + 'NbAlertComponent', + ], + }, { type: 'tabs', name: 'Search', diff --git a/e2e/alert.e2e-spec.ts b/e2e/alert.e2e-spec.ts new file mode 100644 index 0000000000..d059d70aeb --- /dev/null +++ b/e2e/alert.e2e-spec.ts @@ -0,0 +1,94 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { browser, element, by } from 'protractor'; +import { colors, alertSizes as sizes } from './component-shared'; +import { waitFor } from './e2e-helper'; + +let alerts: any[] = []; + +function prepareAlerts() { + const result: any[] = []; + + let elementNumber: number = 1; + for (const { colorKey, color } of colors) { + for (const { sizeKey, height } of sizes) { + result.push({ + size: sizeKey, + height: height, + colorKey, + color, + elementNumber, + }); + elementNumber++; + } + } + + return result; +} + +function prepareAccentAlerts(regularCardsOffset) { + function generateAccentAlerts(accentCardsOffset, colorKey, color) { + return colors.map((c, i) => ({ + name: colorKey, + colorKey, + color, + accentColor: c.color, + accentKey: c.colorKey, + elementNumber: regularCardsOffset + accentCardsOffset + i, + })); + } + + return colors.reduce((accentCards, { colorKey, color }) => { + return accentCards.concat(generateAccentAlerts(accentCards.length, colorKey, color)); + }, []); +} + +describe('nb-alert', () => { + + alerts = prepareAlerts(); + + beforeEach((done) => { + browser.get('#/alert/alert-test.component').then(() => done()); + }); + + alerts.forEach(c => { + + it(`should display ${c.colorKey} alert with ${c.size} size`, () => { + waitFor(`nb-alert:nth-child(${c.elementNumber})`); + expect(element(by.css(`nb-alert:nth-child(${c.elementNumber})`)) + .getText()).toContain('Success message!'); + + element(by.css(`nb-alert:nth-child(${c.elementNumber})`)).getCssValue('height').then(height => { + expect(height).toEqual(c.height); + }); + + element(by.css(`nb-alert:nth-child(${c.elementNumber})`)) + .getCssValue('background-color').then(bgColor => { + expect(bgColor).toEqual(c.color); + }); + }); + }); + + const accentAlerts = prepareAccentAlerts(alerts.length); + accentAlerts.forEach(c => { + it(`should display ${c.colorKey} alert with ${c.accentKey} accent`, () => { + element.all(by.css(`nb-alert`)) + .get(c.elementNumber) + .getCssValue('border-top-color').then(borderColor => { + expect(borderColor).toEqual(c.accentColor, 'Accent is not correct'); + }); + }); + }); + + it('should react on close click', () => { + const all: any = element.all(by.css('nb-alert')); + all.count().then(allCount => { + element(by.css('nb-alert:nth-child(1) > .close')).click(); + expect(all.count()).toEqual(allCount - 1); + }); + }); +}); diff --git a/e2e/card.e2e-spec.ts b/e2e/card.e2e-spec.ts index 329c519b68..e2c6415959 100644 --- a/e2e/card.e2e-spec.ts +++ b/e2e/card.e2e-spec.ts @@ -5,7 +5,7 @@ */ import { browser, element, by } from 'protractor'; -import { colors, sizes } from './cards-shared'; +import { colors, cardSizes as sizes } from './component-shared'; import { waitFor } from './e2e-helper'; let cards: any[] = []; diff --git a/e2e/cards-shared.ts b/e2e/component-shared.ts similarity index 68% rename from e2e/cards-shared.ts rename to e2e/component-shared.ts index fa1e929283..d4219ed931 100644 --- a/e2e/cards-shared.ts +++ b/e2e/component-shared.ts @@ -1,6 +1,6 @@ import { hexToRgbA } from './e2e-helper'; -export const sizes = [ +export const cardSizes = [ { sizeKey: 'xxsmall', height: '96px' }, { sizeKey: 'xsmall', height: '216px' }, { sizeKey: 'small', height: '336px' }, @@ -10,6 +10,16 @@ export const sizes = [ { sizeKey: 'xxlarge', height: '816px' }, ]; +export const alertSizes = [ + { sizeKey: 'xxsmall', height: '52px' }, + { sizeKey: 'xsmall', height: '72px' }, + { sizeKey: 'small', height: '92px' }, + { sizeKey: 'medium', height: '112px' }, + { sizeKey: 'large', height: '132px' }, + { sizeKey: 'xlarge', height: '152px' }, + { sizeKey: 'xxlarge', height: '172px' }, +]; + export const colors = [ { colorKey: 'primary', color: hexToRgbA('#8a7fff') }, { colorKey: 'success', color: hexToRgbA('#40dc7e') }, diff --git a/e2e/flip-card.e2e-spec.ts b/e2e/flip-card.e2e-spec.ts index 4537099f87..a704fb44b9 100644 --- a/e2e/flip-card.e2e-spec.ts +++ b/e2e/flip-card.e2e-spec.ts @@ -5,7 +5,7 @@ */ import { browser, element, by } from 'protractor'; -import { sizes } from './cards-shared'; +import { cardSizes as sizes } from './component-shared'; const waitTime = 500; diff --git a/e2e/reveal-card.e2e-spec.ts b/e2e/reveal-card.e2e-spec.ts index 8fa52aa8cc..4f077c6127 100644 --- a/e2e/reveal-card.e2e-spec.ts +++ b/e2e/reveal-card.e2e-spec.ts @@ -5,7 +5,7 @@ */ import { browser, element, by } from 'protractor'; -import { sizes } from './cards-shared'; +import { cardSizes as sizes } from './component-shared'; import { protractor } from 'protractor/built/ptor'; function toInt(cssValue) { diff --git a/src/framework/theme/components/alert/_alert.component.theme.scss b/src/framework/theme/components/alert/_alert.component.theme.scss new file mode 100644 index 0000000000..ec5507d909 --- /dev/null +++ b/src/framework/theme/components/alert/_alert.component.theme.scss @@ -0,0 +1,127 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin nb-alert-header() { + padding: nb-theme(alert-padding); + border-bottom: 1px solid nb-theme(alert-separator); + border-top-left-radius: nb-theme(alert-border-radius); + border-top-right-radius: nb-theme(alert-border-radius); + color: nb-theme(alert-fg-heading); + + + + @include nb-headings(); +} + +@mixin nb-alert-theme() { + nb-alert { + font-size: nb-theme(alert-font-size); + line-height: nb-theme(alert-line-height); + font-weight: nb-theme(alert-font-weight); + + background: nb-theme(alert-bg); + color: nb-theme(alert-fg); + // TODO: move alert margin style to layout + margin-bottom: nb-theme(alert-margin); + border-radius: nb-theme(alert-border-radius); + box-shadow: nb-theme(alert-shadow); + padding: nb-theme(alert-padding); + + @include nb-scrollbars( + nb-theme(scrollbar-fg), + nb-theme(scrollbar-bg), + nb-theme(scrollbar-width)); + + &.xxsmall-alert { + height: nb-theme(alert-height-xxsmall); + } + &.xsmall-alert { + height: nb-theme(alert-height-xsmall); + } + &.small-alert { + height: nb-theme(alert-height-small); + } + &.medium-alert { + height: nb-theme(alert-height-medium); + } + &.large-alert { + height: nb-theme(alert-height-large); + } + &.xlarge-alert { + height: nb-theme(alert-height-xlarge); + } + &.xxlarge-alert { + height: nb-theme(alert-height-xxlarge); + } + + &.active-alert { + background-color: nb-theme(alert-active-bg); + } + &.disabled-alert { + background-color: nb-theme(alert-disabled-bg); + color: nb-theme(alert-disabled-fg); + } + &.primary-alert { + background-color: nb-theme(alert-primary-bg); + } + &.info-alert { + background-color: nb-theme(alert-info-bg); + } + &.success-alert { + background-color: nb-theme(alert-success-bg); + } + &.warning-alert { + background-color: nb-theme(alert-warning-bg); + } + &.danger-alert { + background-color: nb-theme(alert-danger-bg); + } + + &.accent { + border-top-style: solid; + border-top-width: nb-theme(alert-border-radius); + + & nb-alert-header { + border-radius: 0; + } + } + + &.accent-active { + border-top-color: nb-theme(alert-active-bg); + } + &.accent-disabled { + border-top-color: nb-theme(alert-disabled-bg); + } + &.accent-primary { + border-top-color: nb-theme(alert-primary-bg); + } + &.accent-success { + border-top-color: nb-theme(alert-success-bg); + } + &.accent-info { + border-top-color: nb-theme(alert-info-bg); + } + &.accent-warning { + border-top-color: nb-theme(alert-warning-bg); + } + &.accent-danger { + border-top-color: nb-theme(alert-danger-bg); + } + + .close { + padding: nb-theme(alert-padding); + font-size: 1.5rem; + line-height: 1; + cursor: pointer; + font-family: monospace; + } + + &.closable { + padding-right: nb-theme(alert-closable-padding); + } + } +} + diff --git a/src/framework/theme/components/alert/alert.component.scss b/src/framework/theme/components/alert/alert.component.scss new file mode 100644 index 0000000000..72a40f1f47 --- /dev/null +++ b/src/framework/theme/components/alert/alert.component.scss @@ -0,0 +1,21 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +:host { + display: flex; + flex-direction: column; + position: relative; +} + +.close { + position: absolute; + top: 0; + right: 0; + color: inherit; + background-color: transparent; + border: 0; + -webkit-appearance: none; +} diff --git a/src/framework/theme/components/alert/alert.component.ts b/src/framework/theme/components/alert/alert.component.ts new file mode 100644 index 0000000000..9e6bff2407 --- /dev/null +++ b/src/framework/theme/components/alert/alert.component.ts @@ -0,0 +1,273 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core'; +import { convertToBoolProperty } from '../helpers'; + + +/** + * Alert component. + * + * Basic alert example: + * @stacked-example(Showcase, alert/alert-showcase.component) + * + * Alert configuration: + * + * ```html + * + * You have been successfully authenticated! + * + * ``` + * + * Alert could additionally have a `close` button when `closable` property is set: + * ```html + * + * You have been successfully authenticated! + * + * ``` + * + * Colored alerts could be simply configured by providing a `status` property: + * @stacked-example(Colored Alert, alert/alert-colors.component) + * + * It is also possible to assign an `accent` property for a slight card highlight + * as well as combine it with `status`: + * @stacked-example(Accent Alert, alert/alert-accents.component) + * + * @additional-example(Multiple Sizes, alert/alert-sizes.component) + * + * @styles + * + * alert-font-size: + * alert-line-height: + * alert-font-weight: + * alert-fg: + * alert-bg: + * alert-active-bg: + * alert-disabled-bg: + * alert-disabled-fg: + * alert-primary-bg: + * alert-info-bg: + * alert-success-bg: + * alert-warning-bg: + * alert-danger-bg: + * alert-height-xxsmall: + * alert-height-xsmall: + * alert-height-small: + * alert-height-medium: + * alert-height-large: + * alert-height-xlarge: + * alert-height-xxlarge: + * alert-shadow: + * alert-border-radius: + * alert-padding: + * alert-closable-padding: + * alert-button-padding: + * alert-margin: + */ +@Component({ + selector: 'nb-alert', + styleUrls: ['./alert.component.scss'], + template: ` + + + `, +}) +export class NbAlertComponent { + + static readonly SIZE_XXSMALL = 'xxsmall'; + static readonly SIZE_XSMALL = 'xsmall'; + static readonly SIZE_SMALL = 'small'; + static readonly SIZE_MEDIUM = 'medium'; + static readonly SIZE_LARGE = 'large'; + static readonly SIZE_XLARGE = 'xlarge'; + static readonly SIZE_XXLARGE = 'xxlarge'; + + static readonly STATUS_ACTIVE = 'active'; + static readonly STATUS_DISABLED = 'disabled'; + static readonly STATUS_PRIMARY = 'primary'; + static readonly STATUS_INFO = 'info'; + static readonly STATUS_SUCCESS = 'success'; + static readonly STATUS_WARNING = 'warning'; + static readonly STATUS_DANGER = 'danger'; + + static readonly ACCENT_ACTIVE = 'active'; + static readonly ACCENT_DISABLED = 'disabled'; + static readonly ACCENT_PRIMARY = 'primary'; + static readonly ACCENT_INFO = 'info'; + static readonly ACCENT_SUCCESS = 'success'; + static readonly ACCENT_WARNING = 'warning'; + static readonly ACCENT_DANGER = 'danger'; + + size: string; + status: string = NbAlertComponent.STATUS_SUCCESS; + accent: string; + + @HostBinding('class.closable') + closableValue: boolean = false; + + /** + * Shows `close` icon + */ + @Input() + set closable(val: boolean) { + this.closableValue = convertToBoolProperty(val); + } + + @HostBinding('class.xxsmall-alert') + get xxsmall() { + return this.size === NbAlertComponent.SIZE_XXSMALL; + } + + @HostBinding('class.xsmall-alert') + get xsmall() { + return this.size === NbAlertComponent.SIZE_XSMALL; + } + + @HostBinding('class.small-alert') + get small() { + return this.size === NbAlertComponent.SIZE_SMALL; + } + + @HostBinding('class.medium-alert') + get medium() { + return this.size === NbAlertComponent.SIZE_MEDIUM; + } + + @HostBinding('class.large-alert') + get large() { + return this.size === NbAlertComponent.SIZE_LARGE; + } + + @HostBinding('class.xlarge-alert') + get xlarge() { + return this.size === NbAlertComponent.SIZE_XLARGE; + } + + @HostBinding('class.xxlarge-alert') + get xxlarge() { + return this.size === NbAlertComponent.SIZE_XXLARGE; + } + + @HostBinding('class.active-alert') + get active() { + return this.status === NbAlertComponent.STATUS_ACTIVE; + } + + @HostBinding('class.disabled-alert') + get disabled() { + return this.status === NbAlertComponent.STATUS_DISABLED; + } + + @HostBinding('class.primary-alert') + get primary() { + return this.status === NbAlertComponent.STATUS_PRIMARY; + } + + @HostBinding('class.info-alert') + get info() { + return this.status === NbAlertComponent.STATUS_INFO; + } + + @HostBinding('class.success-alert') + get success() { + return this.status === NbAlertComponent.STATUS_SUCCESS; + } + + @HostBinding('class.warning-alert') + get warning() { + return this.status === NbAlertComponent.STATUS_WARNING; + } + + @HostBinding('class.danger-alert') + get danger() { + return this.status === NbAlertComponent.STATUS_DANGER; + } + + @HostBinding('class.accent') + get hasAccent() { + return this.accent; + } + + @HostBinding('class.accent-primary') + get primaryAccent() { + return this.accent === NbAlertComponent.ACCENT_PRIMARY; + } + + @HostBinding('class.accent-info') + get infoAccent() { + return this.accent === NbAlertComponent.ACCENT_INFO; + } + + @HostBinding('class.accent-success') + get successAccent() { + return this.accent === NbAlertComponent.ACCENT_SUCCESS; + } + + @HostBinding('class.accent-warning') + get warningAccent() { + return this.accent === NbAlertComponent.ACCENT_WARNING; + } + + @HostBinding('class.accent-danger') + get dangerAccent() { + return this.accent === NbAlertComponent.ACCENT_DANGER; + } + + @HostBinding('class.accent-active') + get activeAccent() { + return this.accent === NbAlertComponent.ACCENT_ACTIVE; + } + + @HostBinding('class.accent-disabled') + get disabledAccent() { + return this.accent === NbAlertComponent.ACCENT_DISABLED; + } + + /** + * Alert size, available sizes: + * xxsmall, xsmall, small, medium, large, xlarge, xxlarge + * @param {string} val + */ + @Input('size') + private set setSize(val: string) { + this.size = val; + } + + /** + * Alert status (adds specific styles): + * active, disabled, primary, info, success, warning, danger + * @param {string} val + */ + @Input('status') + private set setStatus(val: string) { + this.status = val; + } + + /** + * Alert accent (color of the top border): + * active, disabled, primary, info, success, warning, danger + * @param {string} val + */ + @Input('accent') + private set setAccent(val: string) { + this.accent = val; + } + + /** + * Emits when chip is removed + * @type EventEmitter + */ + @Output() close = new EventEmitter(); + + /** + * Emits the removed chip event + */ + onClose() { + this.close.emit(); + } +} diff --git a/src/framework/theme/components/alert/alert.module.ts b/src/framework/theme/components/alert/alert.module.ts new file mode 100644 index 0000000000..ffef97afe7 --- /dev/null +++ b/src/framework/theme/components/alert/alert.module.ts @@ -0,0 +1,25 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { NgModule } from '@angular/core'; + +import { NbSharedModule } from '../shared/shared.module'; + +import { NbAlertComponent } from './alert.component'; + +@NgModule({ + imports: [ + NbSharedModule, + ], + declarations: [ + NbAlertComponent, + ], + exports: [ + NbAlertComponent, + ], +}) +export class NbAlertModule { +} diff --git a/src/framework/theme/index.ts b/src/framework/theme/index.ts index 34d96b0a3f..d328206cda 100644 --- a/src/framework/theme/index.ts +++ b/src/framework/theme/index.ts @@ -33,3 +33,5 @@ export * from './components/context-menu/context-menu.directive'; export * from './components/context-menu/context-menu.module'; export * from './components/progress-bar/progress-bar.component'; export * from './components/progress-bar/progress-bar.module'; +export * from './components/alert/alert.component'; +export * from './components/alert/alert.module'; diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss index f7e98e0408..9ecc359fe4 100644 --- a/src/framework/theme/styles/global/_components.scss +++ b/src/framework/theme/styles/global/_components.scss @@ -20,6 +20,7 @@ @import '../../components/badge/badge.component.theme'; @import '../../components/popover/popover.component.theme'; @import '../../components/context-menu/context-menu.component.theme'; +@import '../../components/alert/alert.component.theme'; @mixin nb-theme-components() { @@ -39,4 +40,5 @@ @include nb-badge-theme(); @include nb-popover-theme(); @include nb-context-menu-theme(); + @include nb-alert-theme(); } diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 21a2696a0a..b0d87c99e5 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -445,6 +445,32 @@ $theme: ( progress-bar-warning-bg: color-warning, progress-bar-danger-bg: color-danger, + alert-font-size: font-size, + alert-line-height: line-height, + alert-font-weight: font-weight-bold, + alert-fg: color-white, + alert-bg: color-bg, + alert-active-bg: color-fg, + alert-disabled-bg: color-disabled, + alert-disabled-fg: color-fg, + alert-primary-bg: color-primary, + alert-info-bg: color-info, + alert-success-bg: color-success, + alert-warning-bg: color-warning, + alert-danger-bg: color-danger, + alert-height-xxsmall: 52px, + alert-height-xsmall: 72px, + alert-height-small: 92px, + alert-height-medium: 112px, + alert-height-large: 132px, + alert-height-xlarge: 152px, + alert-height-xxlarge: 172px, + alert-shadow: none, + alert-border-radius: radius, + alert-padding: 1rem 1.125rem, + alert-closable-padding: 3rem, + alert-button-padding: 3rem, + alert-margin: margin, ); // register the theme diff --git a/src/playground/alert/alert-accents.component.html b/src/playground/alert/alert-accents.component.html new file mode 100644 index 0000000000..7bd184223f --- /dev/null +++ b/src/playground/alert/alert-accents.component.html @@ -0,0 +1,11 @@ + + + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + + diff --git a/src/playground/alert/alert-accents.component.ts b/src/playground/alert/alert-accents.component.ts new file mode 100644 index 0000000000..f1522ef9a2 --- /dev/null +++ b/src/playground/alert/alert-accents.component.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-card-accents', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './alert-accents.component.html', +}) +export class NbAlertAccentsComponent { +} diff --git a/src/playground/alert/alert-colors.component.html b/src/playground/alert/alert-colors.component.html new file mode 100644 index 0000000000..29a0a6ec77 --- /dev/null +++ b/src/playground/alert/alert-colors.component.html @@ -0,0 +1,11 @@ + + + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + You have been successfully authenticated! + + diff --git a/src/playground/alert/alert-colors.component.ts b/src/playground/alert/alert-colors.component.ts new file mode 100644 index 0000000000..92fecce206 --- /dev/null +++ b/src/playground/alert/alert-colors.component.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-card-colors', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './alert-colors.component.html', +}) +export class NbAlertColorsComponent { +} diff --git a/src/playground/alert/alert-showcase.component.html b/src/playground/alert/alert-showcase.component.html new file mode 100644 index 0000000000..fff247868e --- /dev/null +++ b/src/playground/alert/alert-showcase.component.html @@ -0,0 +1,5 @@ + + + You have been successfully authenticated! + + diff --git a/src/playground/alert/alert-showcase.component.ts b/src/playground/alert/alert-showcase.component.ts new file mode 100644 index 0000000000..d9a401a78b --- /dev/null +++ b/src/playground/alert/alert-showcase.component.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-card-showcase', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './alert-showcase.component.html', +}) +export class NbAlertShowcaseComponent { +} diff --git a/src/playground/alert/alert-sizes.component.html b/src/playground/alert/alert-sizes.component.html new file mode 100644 index 0000000000..36e08797d0 --- /dev/null +++ b/src/playground/alert/alert-sizes.component.html @@ -0,0 +1,8 @@ + + + You have been successfully authenticated! + You have been successfully authenticated! + + You have been successfully authenticated! + + diff --git a/src/playground/alert/alert-sizes.component.ts b/src/playground/alert/alert-sizes.component.ts new file mode 100644 index 0000000000..8aa7c71d03 --- /dev/null +++ b/src/playground/alert/alert-sizes.component.ts @@ -0,0 +1,15 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'nb-card-sizes', + changeDetection: ChangeDetectionStrategy.OnPush, + templateUrl: './alert-sizes.component.html', +}) +export class NbAlertSizesComponent { +} diff --git a/src/playground/alert/alert-test.component.ts b/src/playground/alert/alert-test.component.ts new file mode 100644 index 0000000000..315f634149 --- /dev/null +++ b/src/playground/alert/alert-test.component.ts @@ -0,0 +1,82 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component } from '@angular/core'; + +@Component({ + selector: 'nb-alert-test', + template: ` + + Success message! + + + + Success message! + + `, +}) +export class NbAlertTestComponent { + + sizes = ['xxsmall', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge']; + statuses = ['primary', 'success', 'info', 'warning', 'danger', 'active', 'disabled']; + accents = ['primary', 'success', 'info', 'warning', 'danger', 'active', 'disabled']; + + alerts: any[]; + accentAlerts: any; + + constructor() { + this.alerts = this.prepareAlerts(); + this.accentAlerts = this.prepareAccentAlerts(); + } + + onClose(alert: any) { + const index = this.alerts.indexOf(alert); + if (index >= 0) { + this.alerts.splice(index, 1); + } + } + + private prepareAlerts(): any[] { + const result = []; + + this.statuses.forEach(status => { + this.sizes.forEach(size => { + result.push({ + size, + status, + }); + }); + }); + + return result; + } + + private prepareAccentAlerts() { + const { statuses, accents } = this; + const accentAlerts = []; + + statuses.forEach(status => { + accents.forEach(accent => { + accentAlerts.push({ + size: 'small', + status, + accent, + }); + }); + }); + + return accentAlerts; + } +} diff --git a/src/playground/playground-routing.module.ts b/src/playground/playground-routing.module.ts index 22330dfaea..c005ba4be5 100644 --- a/src/playground/playground-routing.module.ts +++ b/src/playground/playground-routing.module.ts @@ -98,6 +98,11 @@ import { NbProgressBarStatusComponent } from './progress-bar/progress-bar-status import { NbProgressBarValueComponent } from './progress-bar/progress-bar-value.component'; import { NbProgressBarSizeComponent } from './progress-bar/progress-bar-size.component'; import { NbProgressBarInteractiveComponent } from './progress-bar/progress-bar-interactive.component'; +import { NbAlertTestComponent } from './alert/alert-test.component'; +import { NbAlertShowcaseComponent } from './alert/alert-showcase.component'; +import { NbAlertColorsComponent } from './alert/alert-colors.component'; +import { NbAlertAccentsComponent } from './alert/alert-accents.component'; +import { NbAlertSizesComponent } from './alert/alert-sizes.component'; export const routes: Routes = [ { @@ -237,6 +242,31 @@ export const routes: Routes = [ }, ], }, + { + path: 'alert', + children: [ + { + path: 'alert-test.component', + component: NbAlertTestComponent, + }, + { + path: 'alert-showcase.component', + component: NbAlertShowcaseComponent, + }, + { + path: 'alert-colors.component', + component: NbAlertColorsComponent, + }, + { + path: 'alert-accents.component', + component: NbAlertAccentsComponent, + }, + { + path: 'alert-sizes.component', + component: NbAlertSizesComponent, + }, + ], + }, { path: 'menu', children: [ diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts index da374b9c68..36c78d47be 100644 --- a/src/playground/playground.module.ts +++ b/src/playground/playground.module.ts @@ -23,6 +23,7 @@ import { NbContextMenuModule, NbRouteTabsetModule, NbProgressBarModule, + NbAlertModule, } from '@nebular/theme'; import { NbPlaygroundRoutingModule } from './playground-routing.module'; @@ -120,6 +121,11 @@ import { NbProgressBarStatusComponent } from './progress-bar/progress-bar-status import { NbProgressBarValueComponent } from './progress-bar/progress-bar-value.component'; import { NbProgressBarSizeComponent } from './progress-bar/progress-bar-size.component'; import { NbProgressBarInteractiveComponent } from './progress-bar/progress-bar-interactive.component'; +import { NbAlertShowcaseComponent } from './alert/alert-showcase.component'; +import { NbAlertColorsComponent } from './alert/alert-colors.component'; +import { NbAlertAccentsComponent } from './alert/alert-accents.component'; +import { NbAlertSizesComponent } from './alert/alert-sizes.component'; +import { NbAlertTestComponent } from './alert/alert-test.component'; export const NB_MODULES = [ NbCardModule, @@ -138,6 +144,7 @@ export const NB_MODULES = [ NbUserModule, NbBadgeModule, NbContextMenuModule, + NbAlertModule, NbPlaygroundSharedModule, NbProgressBarModule, ]; @@ -229,6 +236,11 @@ export const NB_EXAMPLE_COMPONENTS = [ NbContextMenuClickComponent, NbContextMenuTestComponent, NbBootstrapTestComponent, + NbAlertShowcaseComponent, + NbAlertColorsComponent, + NbAlertAccentsComponent, + NbAlertSizesComponent, + NbAlertTestComponent, ];