feat(notification-banner): release first beta (#704)

* feat: adding first working banner * feat: adding text and link slot * feat: stories for link and text * refactor: adding readme update * fix: close button alignment * feat: visual testing * refactor: positioning success icon * feat: beta usage text * feat: adding usage files to usage addon * refactor: visual test snapshot update * refactor: renaming timeout to autoHide * fix: icon type and text spacing * refactor: adding close button wrapper * refactor: banner shadow to shadow token * refactor: english and german usage text * refactor: deleting banner svg component * feat: unit testing * refactor: remove non breaking spaces * refactor: visual testing snapshots * refactor: updating readme * refactor: removing unnecessary margin * fix: readme * fix: readme * fix: readme * refactor: updatingvisual testing snapshots * refactor: change lifecycle methods Co-authored-by: Daniel Beck <[email protected]>
telekom · Dec 15, 2021 · 8e607cf · 8e607cf
1 parent d373bf9
commit 8e607cf
Show file tree

Hide file tree

Showing 25 changed files with 1,002 additions and 3 deletions.
diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md
@@ -106,11 +106,13 @@ Type: `Promise<void>`
 ### Used by
 
  - [scale-data-grid](../data-grid)
+ - [scale-notification-banner](../notification-banner)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-data-grid --> scale-link
+  scale-notification-banner --> scale-link
   style scale-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/...ponents/src/components/notification-banner/__snapshots__/notification-banner.spec.ts.snap b/...ponents/src/components/notification-banner/__snapshots__/notification-banner.spec.ts.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationBanner handle variant prop 1`] = `
+<scale-notification-banner opened="">
+  <mock:shadow-root>
+    <div class="notification-banner notification-banner--has-no-text notification-banner--variant-error" part="notification-banner variant-error has-no-text" tabindex="0">
+      <div class="notification-banner__container" part="container">
+        <scale-icon-alert-error accessibility-title="error" class="notification-banner__icon-error"></scale-icon-alert-error>
+        <div class="notification-banner__heading" part="heading">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </mock:shadow-root>
+  Label
+</scale-notification-banner>
+`;
+
+exports[`NotificationBanner handle variant prop 2`] = `
+<scale-notification-banner opened="">
+  <mock:shadow-root>
+    <div class="notification-banner notification-banner--has-no-text notification-banner--variant-warning" part="notification-banner variant-warning has-no-text" tabindex="0">
+      <div class="notification-banner__container" part="container">
+        <scale-icon-alert-error accessibility-title="information" class="notification-banner__icon-information" color="#AE461C"></scale-icon-alert-error>
+        <div class="notification-banner__heading" part="heading">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </mock:shadow-root>
+  Label
+</scale-notification-banner>
+`;
+
+exports[`NotificationBanner handle variant prop 3`] = `
+<scale-notification-banner opened="">
+  <mock:shadow-root>
+    <div class="notification-banner notification-banner--has-no-text notification-banner--variant-informational" part="notification-banner variant-informational has-no-text" tabindex="0">
+      <div class="notification-banner__container" part="container">
+        <scale-icon-alert-information accessibility-title="information" class="notification-banner__icon-information"></scale-icon-alert-information>
+        <div class="notification-banner__heading" part="heading">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </mock:shadow-root>
+  Label
+</scale-notification-banner>
+`;
+
+exports[`NotificationBanner handle variant prop 4`] = `
+<scale-notification-banner opened="">
+  <mock:shadow-root>
+    <div class="notification-banner notification-banner--has-no-text notification-banner--variant-success" part="notification-banner variant-success has-no-text" tabindex="0">
+      <div class="notification-banner__container" part="container">
+        <scale-notification-message-svg accessibility-title="success" class="notification-banner__icon-success"></scale-notification-message-svg>
+        <div class="notification-banner__heading" part="heading">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </mock:shadow-root>
+  Label
+</scale-notification-banner>
+`;
+
+exports[`NotificationBanner should match snapshot 1`] = `
+<scale-notification-banner opened="">
+  <mock:shadow-root>
+    <div class="notification-banner notification-banner--has-no-text notification-banner--variant-informational" part="notification-banner variant-informational has-no-text" tabindex="0">
+      <div class="notification-banner__container" part="container">
+        <scale-icon-alert-information accessibility-title="information" class="notification-banner__icon-information"></scale-icon-alert-information>
+        <div class="notification-banner__heading" part="heading">
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+  </mock:shadow-root>
+</scale-notification-banner>
+`;
diff --git a/packages/components/src/components/notification-banner/notification-banner.css b/packages/components/src/components/notification-banner/notification-banner.css
@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+:host {
+  --width: 100%;
+  --radius: var(--scl-radius-8);
+
+  /* Token not available, up for discussion */
+  --background-error: hsla(353.79999999999995, 100%, 88.6%, 0.35);
+  --background-warning: hsla(33.5, 100%, 75.1%, 0.3);
+  --background-informational: hsla(190.20000000000005, 100%, 92%, 0.75);
+  --background-success: hsl(98.80000000000001, 49.7%, 61%, 0.2);
+}
+
+.notification-banner {
+  border-radius: var(--radius);
+  width: var(--width);
+  position: relative;
+  box-shadow: var(--scl-shadow-level-1);
+  min-height: 48px;
+}
+
+.notification-banner--variant-error {
+  background-color: var(--background-error);
+}
+.notification-banner--variant-warning {
+  background-color: var(--background-warning);
+}
+.notification-banner--variant-informational {
+  background-color: var(--background-informational);
+}
+.notification-banner--variant-success {
+  background-color: var(--background-success);
+}
+
+.notification-banner__heading {
+  margin: 14px 48px 14px 48px;
+  font-weight: var(--scl-font-weight-bold);
+  line-height: 48px;
+}
+
+.notification-banner__text ::slotted(*) {
+  margin: -10px 0px -25px 0px;
+  line-height: 16px;
+  padding-bottom: 15px;
+}
+
+.notification-banner--has-no-text .notification-banner__link ::slotted(*) {
+  margin: 0;
+  padding: 0px 0px 0px 16px;
+}
+
+.notification-banner--has-text .notification-banner__link ::slotted(*) {
+  margin: 20px 0 0 0;
+  padding-bottom: 15px;
+  line-height: 20px;
+}
+
+::slotted(*) {
+  font-weight: var(--scl-font-weight-regular);
+}
+
+.notification-banner__button-close {
+  position: absolute;
+  top: 8px;
+  right: 13.5px;
+  color: #191919;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.notification-banner__button-close svg {
+  height: 19px;
+  width: 19px;
+  padding: 6.5px;
+  border-radius: 20%;
+}
+
+.notification-banner__button-close:hover svg {
+  background-color: white;
+  color: var(--scl-color-primary-hover);
+}
+
+.notification-banner__icon-success {
+  position: absolute;
+  top: 14px;
+  left: 17px;
+  height: 20px;
+  width: 20px;
+  color: var(--scl-color-background-success);
+}
+
+.notification-banner__icon-error {
+  position: absolute;
+  top: 12px;
+  left: 17px;
+  height: 20px;
+  width: 20px;
+  color: var(--scl-color-background-error);
+}
+
+.notification-banner__icon-information {
+  position: absolute;
+  top: 12px;
+  left: 17px;
+  height: 20px;
+  width: 20px;
+  color: var(--scl-color-text-info);
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .notification-banner__icon-close {
+    color: white;
+  }
+}
diff --git a/packages/components/src/components/notification-banner/notification-banner.spec.ts b/packages/components/src/components/notification-banner/notification-banner.spec.ts
@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { newSpecPage } from '@stencil/core/testing';
+// import { remove } from 'lodash';
+import { NotificationBanner } from './notification-banner';
+
+describe('NotificationBanner', () => {
+  let element;
+
+  beforeEach(async () => {
+    element = new NotificationBanner();
+  });
+
+  it('should match snapshot', async () => {
+    const page = await newSpecPage({
+      components: [NotificationBanner],
+      html: `<scale-notification-banner opened="true"></scale-notification-banner>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should handle css classes', () => {
+    element.variant = 'warning';
+    expect(element.getCssClassMap()).toContain('variant-warning');
+  });
+
+  it('should test the close() fucntion', () => {
+    expect(element.opened).toBe(undefined);
+    element.close();
+    expect(element.opened).toBe(false);
+  });
+
+  it('handle variant prop', async () => {
+    const page = await newSpecPage({
+      components: [NotificationBanner],
+      html: `<scale-notification-banner opened="true">Label</scale-notification-banner>`,
+    });
+    page.root.variant = 'error';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+    page.root.variant = 'warning';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+    page.root.variant = 'informational';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+    page.root.variant = 'success';
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should emit onClick and set opened to false', async () => {
+    const page = await newSpecPage({
+      components: [NotificationBanner],
+      html: `<scale-notification-banner opened="true" dismissible="true">Label</scale-notification-banner>`,
+    });
+    const closeButton = page.root.shadowRoot.querySelector(
+      '.notification-banner__button-close'
+    );
+    await page.waitForChanges();
+    closeButton.dispatchEvent(new Event('click'));
+    await page.waitForChanges();
+    expect(page.rootInstance.opened).toBe(false);
+  });
+});