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