feat(theme): add alert component

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": {

docs/app/blocks/components/live-example-block/live-example-block.component.scss

@@ -86,6 +86,7 @@
  }
 
  select {
+ font-size: 0.875rem;
  appearance: none;
  }
  }

docs/structure.ts

@@ -187,6 +187,14 @@ export const structure = [
  'NbCardBackComponent',
  ],
  },
+ {
+ type: 'tabs',
+ name: 'Alert',
+ icon: 'alert.svg',
+ source: [
+ 'NbAlertComponent',
+ ],
+ },
  {
  type: 'tabs',
  name: 'Search',

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

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[] = [];

e2e/cards-shared.ts → 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') },

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;
 

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

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

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