diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md index a033b9eebe..cc1a3199dd 100644 --- a/packages/components/src/components/link/readme.md +++ b/packages/components/src/components/link/readme.md @@ -107,12 +107,14 @@ Type: `Promise` - [scale-data-grid](../data-grid) - [scale-notification-banner](../notification-banner) + - [scale-notification-toast](../notification-toast) ### Graph ```mermaid graph TD; scale-data-grid --> scale-link scale-notification-banner --> scale-link + scale-notification-toast --> scale-link style scale-link fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/components/src/components/notification-message/notification-message.tsx b/packages/components/src/components/notification-message/notification-message.tsx index 03ccff18de..da20573b91 100644 --- a/packages/components/src/components/notification-message/notification-message.tsx +++ b/packages/components/src/components/notification-message/notification-message.tsx @@ -56,8 +56,8 @@ export class NotificationMessage { return ( ); case 'informational': diff --git a/packages/components/src/components/notification-toast/__snapshots__/notificat-toast.spec.ts.snap b/packages/components/src/components/notification-toast/__snapshots__/notificat-toast.spec.ts.snap new file mode 100644 index 0000000000..f5e1641788 --- /dev/null +++ b/packages/components/src/components/notification-toast/__snapshots__/notificat-toast.spec.ts.snap @@ -0,0 +1,290 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NotificationToast handle variant prop 1`] = ` + + + + +
+
+ +
+
+ + + + + +
+ +
+ + Label + +`; + +exports[`NotificationToast handle variant prop 2`] = ` + + + + +
+
+ +
+
+ + + + + +
+ +
+ + Label + +`; + +exports[`NotificationToast handle variant prop 3`] = ` + + + + +
+
+ +
+
+ + + + + +
+ +
+ + Label + +`; + +exports[`NotificationToast handle variant prop 4`] = ` + + + + +
+
+ +
+
+ + + + + +
+ +
+ + Label + +`; + +exports[`NotificationToast should match snapshot 1`] = ` + + + + +
+
+ +
+
+ + + + + +
+ +
+ + +`; diff --git a/packages/components/src/components/notification-toast/notificat-toast.spec.ts b/packages/components/src/components/notification-toast/notificat-toast.spec.ts new file mode 100644 index 0000000000..e3460e6ce0 --- /dev/null +++ b/packages/components/src/components/notification-toast/notificat-toast.spec.ts @@ -0,0 +1,54 @@ +/** + * @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 { NotificationToast } from './notification-toast'; + +describe('NotificationToast ', () => { + let element; + + beforeEach(async () => { + element = new NotificationToast(); + }); + + it('should match snapshot', async () => { + const page = await newSpecPage({ + components: [NotificationToast], + html: ``, + }); + expect(page.root).toMatchSnapshot(); + }); + + it('should handle css classes', () => { + element.variant = 'warning'; + expect(element.getCssClassMap()).toContain('variant-warning'); + }); + + it('handle variant prop', async () => { + const page = await newSpecPage({ + components: [NotificationToast], + html: `Label`, + }); + 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(); + }); +}); diff --git a/packages/components/src/components/notification-toast/notification-toast.css b/packages/components/src/components/notification-toast/notification-toast.css new file mode 100644 index 0000000000..49f503b92c --- /dev/null +++ b/packages/components/src/components/notification-toast/notification-toast.css @@ -0,0 +1,150 @@ +/** + * @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 { + /* toast */ + + --width: 367px; + --radius: var(--scl-radius-8); + --background: var(--scl-color-background-standard); + --box-shadow: var(--scl-shadow-level-0); + + /* icon container colors */ + + --background-success-icon-container: var(--scl-color-text-success); + --background-warning-icon-container: var(--scl-color-orange-70); + --background-error-icon-container: var(--scl-color-red-70); + --background-informational-icon-container: var(--scl-color-blue-60); + + /* icon container colors */ + + --background-success-text-container: #f2f7ef; + --background-warning-text-container: #fbf4eb; + --background-error-text-container: #fbf3f4; + --background-informational-text-container: #eff9fb; +} +.notification-toast { + width: var(--width); + opacity: 0; + z-index: 1; + position: fixed; + background: var(--background); + box-shadow: var(--box-shadow); + box-sizing: border-box; + border-radius: var(--radius); + flex-direction: column; + justify-content: space-between; +} + +.notification-toast.notification-toast--story { + opacity: 1; + position: absolute; +} + +.notification-toast.notification-toast--story.notification-toast--hide { + opacity: 0; +} + +.notification-toast.notification-toast--variant-success { + background: var(--background-success-text-container); +} + +.notification-toast.notification-toast--variant-warning { + background: var(--background-warning-text-container); +} + +.notification-toast.notification-toast--variant-error { + background: var(--background-error-text-container); +} + +.notification-toast.notification-toast--variant-informational { + background: var(--background-informational-text-container); +} + +/* + variant icon part +*/ + +.notification-toast__icon { + position: absolute; + top: 50%; + left: 50%; + margin: -10px 0 0 -10px; +} + +.notification-toast__icon-container { + height: 100%; + width: 48px; + position: absolute; + left: 0; + top: 0; + float: left; + border-radius: 10px 0 0 10px; +} + +.notification-toast.notification-toast--variant-success + .notification-toast__icon-container { + background: var(--background-success-icon-container); +} + +.notification-toast.notification-toast--variant-warning + .notification-toast__icon-container { + background: var(--background-warning-icon-container); +} + +.notification-toast.notification-toast--variant-error + .notification-toast__icon-container { + background: var(--background-error-icon-container); +} + +.notification-toast.notification-toast--variant-informational + .notification-toast__icon-container { + background: var(--background-informational-icon-container); +} + +/* + text part +*/ + +::slotted([slot='header']) { + margin: 0; + padding: 3px 0 0 10px; + font-weight: bold; + font-size: 16px; +} +::slotted([slot='body']) { + padding: 3px 0 0 10px; + margin: 0; +} +::slotted([slot='link']) { + padding: 10px 0 15px 10px; + margin: 0; +} + +.notification-toast__text-container { + width: var(--width); + min-height: 33px; + float: left; + position: relative; + margin: 0 0 0 48px; + padding: 15px 0 0 0; +} + +/* + close icon part +*/ + +.notification-message__icon-close { + cursor: pointer; + position: absolute; + top: 14px; + right: 14px; +} diff --git a/packages/components/src/components/notification-toast/notification-toast.tsx b/packages/components/src/components/notification-toast/notification-toast.tsx new file mode 100644 index 0000000000..1b13750a25 --- /dev/null +++ b/packages/components/src/components/notification-toast/notification-toast.tsx @@ -0,0 +1,256 @@ +/** + * @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 { + Component, + Prop, + Method, + h, + State, + Element, + Host, +} from '@stencil/core'; +import classNames from 'classnames'; +import statusNote from '../../utils/status-note'; + +@Component({ + tag: 'scale-notification-toast', + styleUrl: './notification-toast.css', + shadow: true, +}) +export class NotificationToast { + /** (optional) Toast variant */ + @Prop() variant?: 'error' | 'warning' | 'success' | 'informational' = + 'informational'; + /** (optional) Toast opened */ + @Prop({ reflect: true }) opened?: boolean; + /** (optional) Animated toast */ + @Prop() animated?: boolean = true; + /** (optional) Alignment choose for top and bottom */ + @Prop() alignment?: + | 'bottom-right' + | 'bottom-left' + | 'top-right' + | 'top-left' = 'top-right'; + /** (optional) Toast position at the top */ + @Prop() positionVertical?: number = 12; + /** (optional) Toast position right */ + @Prop() positionHorizontal?: number = 12; + /** (optional) Toast fade duration */ + @Prop() fadeDuration?: number = 500; + /** (optional) Injected CSS styles */ + @Prop({ reflect: true }) styles?: string; + /** (do not use) it is a helper prop for storybook */ + @Prop() story?: boolean; + /** (optional) Toast state height with offset */ + @State() toastHeightWithOffset: number = 0; + + @Element() element: HTMLElement; + + hideToast: boolean = false; + alignmentVertical: string; + alignmentHorizontal: string; + + connectedCallback() { + statusNote({ source: this.element, type: 'warn' }); + } + + componentWillLoad() { + const alignmentParts = this.alignment.split('-'); + this.alignmentVertical = alignmentParts[0]; + this.alignmentHorizontal = alignmentParts[1]; + } + + close = () => { + this.hideToast = true; + setTimeout(() => { + this.opened = false; + }, this.fadeDuration); + }; + + handleIcons() { + if (this.variant) { + switch (this.variant) { + case 'success': + return ( + + ); + case 'informational': + return ( + + ); + case 'error': + return ( + + ); + case 'warning': + return ( + + ); + } + } + return; + } + + /** Toast method: open() */ + @Method() + async open() { + this.opened = true; + this.hideToast = false; + } + + render() { + if (this.opened) { + return ( + + {this.styles && } + + + +
+
+ {this.handleIcons()} +
+
+ + + + + +
+ + { + this.close(); + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + this.close(); + } + }} + accessibility-title="close" + /> +
+ + ); + } + } + + transitions = (offset) => ` + @keyframes fadeIn { + from { + opacity: 0; + ${this.alignmentVertical}: -${offset}px; + } + to { + opacity: 1; + ${this.alignmentVertical}: ${this.positionVertical}px; + } + } + + @keyframes fadeOut { + from { + opacity: 1; + ${this.alignmentVertical}: ${this.positionVertical}px; + } + to { + opacity: 0; + ${this.alignmentVertical}: -${offset}px; + } + } + `; + + animationStyle = (offset) => { + if (this.animated) { + return ` + .notification-toast--show { + ${this.alignmentHorizontal}: ${this.positionHorizontal}px; + animation: fadeIn ${this.fadeDuration / 1000}s ease-in-out; + ${this.alignmentVertical}: ${this.positionVertical}px; + opacity: 1; + }, + .notification-toast--show { + ${this.alignmentHorizontal}: ${this.positionHorizontal}px; + animation: fadeOut ${this.fadeDuration / 1000}s ease-in-out; + ${this.alignmentVertical}: -${offset}px; + opacity: 0; + } + `; + } + return ` + .notification-toast--show { + ${this.alignmentHorizontal}: ${this.positionHorizontal}px; + ${this.alignmentVertical}: ${this.positionVertical}px; + opacity: 1; + }, + .notification-toast--show { + ${this.alignmentHorizontal}: ${this.positionHorizontal}px; + ${this.alignmentVertical}: -${offset}px; + opacity: 0; + } + `; + }; + + getToastHeightWithOffset() { + const toastHeight = this.element.shadowRoot.querySelector('.toast') + .scrollHeight; + this.toastHeightWithOffset = toastHeight + this.positionVertical; + } + + getBasePartMap() { + return this.getCssOrBasePartMap('basePart'); + } + + getCssClassMap() { + return this.getCssOrBasePartMap('css'); + } + + getCssOrBasePartMap(mode: 'basePart' | 'css') { + const component = 'notification-toast'; + const prefix = mode === 'basePart' ? '' : `${component}`; + + return classNames( + mode === 'basePart' ? 'base' : component, + this.variant && `${prefix}--variant-${this.variant}`, + !!this.opened && `${prefix}--opened`, + !!!this.hideToast && `${prefix}--show`, + !!this.hideToast && `${prefix}--hide`, + this.story && `${prefix}--story` + ); + } +} diff --git a/packages/components/src/components/notification-toast/readme.md b/packages/components/src/components/notification-toast/readme.md new file mode 100644 index 0000000000..f4f100ed9b --- /dev/null +++ b/packages/components/src/components/notification-toast/readme.md @@ -0,0 +1,59 @@ +# scale-notification-toast + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------------- | ---------------------------------------------- | -------------------------------------------------------------- | ----------------- | +| `alignment` | `alignment` | (optional) Alignment choose for top and bottom | `"bottom-left" \| "bottom-right" \| "top-left" \| "top-right"` | `'top-right'` | +| `animated` | `animated` | (optional) Animated toast | `boolean` | `true` | +| `fadeDuration` | `fade-duration` | (optional) Toast fade duration | `number` | `500` | +| `opened` | `opened` | (optional) Toast opened | `boolean` | `undefined` | +| `positionHorizontal` | `position-horizontal` | (optional) Toast position right | `number` | `12` | +| `positionVertical` | `position-vertical` | (optional) Toast position at the top | `number` | `12` | +| `story` | `story` | (do not use) it is a helper prop for storybook | `boolean` | `undefined` | +| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` | +| `variant` | `variant` | (optional) Toast variant | `"error" \| "informational" \| "success" \| "warning"` | `'informational'` | + + +## Methods + +### `open() => Promise` + +Toast method: open() + +#### Returns + +Type: `Promise` + + + + +## Dependencies + +### Depends on + +- [scale-icon-alert-success](../icons/alert-success) +- [scale-icon-alert-information](../icons/alert-information) +- [scale-icon-alert-error](../icons/alert-error) +- [scale-link](../link) +- [scale-icon-action-circle-close](../icons/action-circle-close) + +### Graph +```mermaid +graph TD; + scale-notification-toast --> scale-icon-alert-success + scale-notification-toast --> scale-icon-alert-information + scale-notification-toast --> scale-icon-alert-error + scale-notification-toast --> scale-link + scale-notification-toast --> scale-icon-action-circle-close + style scale-notification-toast fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/components/src/components/svg-builder/svg-builder.css b/packages/components/src/components/svg-builder/svg-builder.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/storybook-vue/.storybook/usage-addon/usage.js b/packages/storybook-vue/.storybook/usage-addon/usage.js index d094e6ff46..e4415730af 100644 --- a/packages/storybook-vue/.storybook/usage-addon/usage.js +++ b/packages/storybook-vue/.storybook/usage-addon/usage.js @@ -53,6 +53,8 @@ import notificationBanner_de from 'raw-loader!../../stories/3_components/notific import notificationBanner_en from 'raw-loader!../../stories/3_components/notification-banner/notification-banner.md'; import notificationMessage_de from 'raw-loader!../../stories/3_components/notification-message/notification-message_de.md'; import notificationMessage_en from 'raw-loader!../../stories/3_components/notification-message/notification-message.md'; +import notificationToast_de from 'raw-loader!../../stories/3_components/notification-toast/notification-toast_de.md'; +import notificationToast_en from 'raw-loader!../../stories/3_components/notification-toast/notification-toast.md'; import pagination_en from 'raw-loader!../../stories/3_components/pagination/pagination.md'; import pagination_de from 'raw-loader!../../stories/3_components/pagination/pagination_de.md'; import progressBar_en from 'raw-loader!../../stories/3_components/progress-bar/progress-bar.md'; @@ -155,6 +157,8 @@ const Usage = (props) => { 'notification-banner_de': notificationBanner_de, 'notification-message_en': notificationMessage_en, 'notification-message_de': notificationMessage_de, + 'notification-toast_en': notificationToast_en, + 'notification-toast_de': notificationToast_de, pagination_en, pagination_de, 'progress-bar_en': progressBar_en, diff --git a/packages/storybook-vue/stories/3_components/notification-toast/NotificationToast.stories.mdx b/packages/storybook-vue/stories/3_components/notification-toast/NotificationToast.stories.mdx new file mode 100644 index 0000000000..391da84c30 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/notification-toast/NotificationToast.stories.mdx @@ -0,0 +1,232 @@ +import { + Meta, + Story, + ArgsTable, + Canvas, + Description, +} from '@storybook/addon-docs/blocks'; +import ScaleNotificationToast from './ScaleNotificationToast.vue'; + + + +export const Template = (args, { argTypes }) => ({ + props: { + ...ScaleNotificationToast.props, + }, + template: `
+

Informational toast headline

+ +
+ `, +}); + +export const TemplateText = (args, { argTypes }) => ({ + props: { + ...ScaleNotificationToast.props, + }, + template: `
+

Informational toast headline

+

Subheadline goes here.

+ +
+ `, +}); + +export const TemplateLink = (args, { argTypes }) => ({ + props: { + ...ScaleNotificationToast.props, + }, + template: `
+

Informational toast headline

+

Link Text

+ +
+ `, +}); + +
+

Notification Toast

+ Beta Component +
+ +## Standard + + + + {Template.bind({})} + + + + + +```html + +

Informational toast headline

+ +``` + +## Warning + + + + {Template.bind({})} + + + +```html + +

Informational toast headline

+ +``` + +## Error + + + + {Template.bind({})} + + + +```html + +

Informational toast headline

+ +``` + +## Success + + + + {Template.bind({})} + + + +```html + +

Informational toast headline

+ +``` + +## Informational + + + + {Template.bind({})} + + + +```html + +

Informational toast headline

+ +``` + +## With Text + + + + {TemplateText.bind({})} + + + +```html + +

Informational toast headline

+

Subheadline goes here.

+ +``` + +## With Link + + + + {TemplateLink.bind({})} + + + +```html + +

Informational toast headline

+

Link Text

+ +``` diff --git a/packages/storybook-vue/stories/3_components/notification-toast/ScaleNotificationToast.vue b/packages/storybook-vue/stories/3_components/notification-toast/ScaleNotificationToast.vue new file mode 100644 index 0000000000..e0d6257ac4 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/notification-toast/ScaleNotificationToast.vue @@ -0,0 +1,28 @@ + + + diff --git a/packages/storybook-vue/stories/3_components/notification-toast/notification-toast.md b/packages/storybook-vue/stories/3_components/notification-toast/notification-toast.md new file mode 100644 index 0000000000..bef4616525 --- /dev/null +++ b/packages/storybook-vue/stories/3_components/notification-toast/notification-toast.md @@ -0,0 +1,10 @@ +
+

Notification Toast

+ Beta Component +
+ +The standard Notification Toast component can be used to issue quick and non-disruptive feedback or notifications regarding an action. + +## Beta components + +This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. diff --git a/packages/storybook-vue/stories/3_components/notification-toast/notification-toast_de.md b/packages/storybook-vue/stories/3_components/notification-toast/notification-toast_de.md new file mode 100644 index 0000000000..718250ba8a --- /dev/null +++ b/packages/storybook-vue/stories/3_components/notification-toast/notification-toast_de.md @@ -0,0 +1,10 @@ +
+

Notification Toast

+ Beta Component +
+ +Die standardmäßige Notification Toast Komponente kann verwendet werden, um schnelle, nicht störende Rückmeldungen oder Hinweise bezüglich einer Aktion auszugeben. + +## Beta-Komponente + +Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. diff --git a/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-error-1-snap.png b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-error-1-snap.png new file mode 100644 index 0000000000..310c648519 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-error-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-standard-1-snap.png b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-standard-1-snap.png new file mode 100644 index 0000000000..3b08e010a1 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-standard-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-success-1-snap.png b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-success-1-snap.png new file mode 100644 index 0000000000..3766a66ff8 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-success-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-warning-1-snap.png b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-warning-1-snap.png new file mode 100644 index 0000000000..c6db92a18a Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-warning-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-with-link-1-snap.png b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-with-link-1-snap.png new file mode 100644 index 0000000000..666e82f09b Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-with-link-1-snap.png differ diff --git a/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-with-text-1-snap.png b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-with-text-1-snap.png new file mode 100644 index 0000000000..d4059fcc64 Binary files /dev/null and b/packages/visual-tests/src/__image_snapshots__/notification-toast-visual-spec-js-notification-toast-with-text-1-snap.png differ diff --git a/packages/visual-tests/src/notification-toast.visual.spec.js b/packages/visual-tests/src/notification-toast.visual.spec.js new file mode 100644 index 0000000000..e17d366bcf --- /dev/null +++ b/packages/visual-tests/src/notification-toast.visual.spec.js @@ -0,0 +1,18 @@ +describe('NotificationToast', () => { + test.each([ + ['standard'], + ['warning'], + ['error'], + ['success'], + ['with-text'], + ['with-link'], + ])('%p', async (variant) => { + await global.page.goto( + `http://host.docker.internal:3123/iframe.html?id=beta-components-notification-toast--${variant}&viewMode=story` + ); + await page.waitForSelector('html.hydrated'); + const previewHtml = await page.$('body'); + await page.waitFor(3000); + expect(await previewHtml.screenshot()).toMatchImageSnapshot(); + }); +});