Skip to content

Commit

Permalink
feat(notification-toast): add new beta component (#714)
Browse files Browse the repository at this point in the history 
* feat: first working toast

* feat: finished design

* refactor: success svg coloring and selected state

* feat: init basic stories

* feat: story html

* feat: new stories, usage text and alignment bottom

* feat: adding left and right alignments

* refactor: storybook after alignment changes

* refactor: kick out story prop from stories

* refactor: remove story prop from storybook

* refactor: color hex values to tokens

* fix: visual testing and storybook issues

* feat: adding visual testing snapshots

* refactor: updating visual snapshots

* feat: unit tests

* fix: linting

* feat: adding usage text files

* refactor: css host

* refactor: updating visual snapshots

* refactor: success icon

* fix: all pull request issues

* fix: visual testing issues

* fix: visual testing
  • Loading branch information
@marvinLaubenstein
marvinLaubenstein authored Jan 3, 2022
1 parent cbf00d5 commit 1a9abb5
Show file tree
Hide file tree
Showing 20 changed files with 1,114 additions and 1 deletion.
2 changes: 2 additions & 0 deletions packages/components/src/components/link/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,12 +107,14 @@ Type: `Promise<void>`

- [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
```

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/notification-message/notification-message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ export class NotificationMessage {
return (
<scale-icon-alert-success
class="notification-message__icon-success"
accessibility-title="success"
color="#187431"
accessibility-title="success"
/>
);
case 'informational':
Expand Down
290 changes: 290 additions & 0 deletions ...s/components/src/components/notification-toast/__snapshots__/notificat-toast.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,290 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`NotificationToast handle variant prop 1`] = `
<scale-notification-toast opened="">
<mock:shadow-root>
<style>
@keyframes fadeIn {
from {
opacity: 0;
top: -0px;
}
to {
opacity: 1;
top: 12px;
}
}
@keyframes fadeOut {
from {
opacity: 1;
top: 12px;
}
to {
opacity: 0;
top: -0px;
}
}
</style>
<style>
.notification-toast--show {
right: 12px;
animation: fadeIn 0.5s ease-in-out;
top: 12px;
opacity: 1;
},
.notification-toast--show {
right: 12px;
animation: fadeOut 0.5s ease-in-out;
top: -0px;
opacity: 0;
}
</style>
<div class="notification-toast notification-toast--opened notification-toast--show notification-toast--variant-error" part="base --variant-error --opened --show">
<div class="notification-toast__icon-container">
<scale-icon-alert-error accessibility-title="error" class="notification-toast__icon" color="#ffffff" selected="" size="20"></scale-icon-alert-error>
</div>
<div class="notification-toast__text-container">
<slot name="header"></slot>
<slot name="body"></slot>
<scale-link>
<slot name="link"></slot>
</scale-link>
</div>
<scale-icon-action-circle-close accessibility-title="close" class="notification-message__icon-close" size="20" tabindex="0"></scale-icon-action-circle-close>
</div>
</mock:shadow-root>
Label
</scale-notification-toast>
`;

exports[`NotificationToast handle variant prop 2`] = `
<scale-notification-toast opened="">
<mock:shadow-root>
<style>
@keyframes fadeIn {
from {
opacity: 0;
top: -0px;
}
to {
opacity: 1;
top: 12px;
}
}
@keyframes fadeOut {
from {
opacity: 1;
top: 12px;
}
to {
opacity: 0;
top: -0px;
}
}
</style>
<style>
.notification-toast--show {
right: 12px;
animation: fadeIn 0.5s ease-in-out;
top: 12px;
opacity: 1;
},
.notification-toast--show {
right: 12px;
animation: fadeOut 0.5s ease-in-out;
top: -0px;
opacity: 0;
}
</style>
<div class="notification-toast notification-toast--opened notification-toast--show notification-toast--variant-warning" part="base --variant-warning --opened --show">
<div class="notification-toast__icon-container">
<scale-icon-alert-error accessibility-title="information" class="notification-toast__icon" color="#ffff" selected="" size="20"></scale-icon-alert-error>
</div>
<div class="notification-toast__text-container">
<slot name="header"></slot>
<slot name="body"></slot>
<scale-link>
<slot name="link"></slot>
</scale-link>
</div>
<scale-icon-action-circle-close accessibility-title="close" class="notification-message__icon-close" size="20" tabindex="0"></scale-icon-action-circle-close>
</div>
</mock:shadow-root>
Label
</scale-notification-toast>
`;

exports[`NotificationToast handle variant prop 3`] = `
<scale-notification-toast opened="">
<mock:shadow-root>
<style>
@keyframes fadeIn {
from {
opacity: 0;
top: -0px;
}
to {
opacity: 1;
top: 12px;
}
}
@keyframes fadeOut {
from {
opacity: 1;
top: 12px;
}
to {
opacity: 0;
top: -0px;
}
}
</style>
<style>
.notification-toast--show {
right: 12px;
animation: fadeIn 0.5s ease-in-out;
top: 12px;
opacity: 1;
},
.notification-toast--show {
right: 12px;
animation: fadeOut 0.5s ease-in-out;
top: -0px;
opacity: 0;
}
</style>
<div class="notification-toast notification-toast--opened notification-toast--show notification-toast--variant-informational" part="base --variant-informational --opened --show">
<div class="notification-toast__icon-container">
<scale-icon-alert-information accessibility-title="information" class="notification-toast__icon" color="#ffffff" selected="" size="20"></scale-icon-alert-information>
</div>
<div class="notification-toast__text-container">
<slot name="header"></slot>
<slot name="body"></slot>
<scale-link>
<slot name="link"></slot>
</scale-link>
</div>
<scale-icon-action-circle-close accessibility-title="close" class="notification-message__icon-close" size="20" tabindex="0"></scale-icon-action-circle-close>
</div>
</mock:shadow-root>
Label
</scale-notification-toast>
`;

exports[`NotificationToast handle variant prop 4`] = `
<scale-notification-toast opened="">
<mock:shadow-root>
<style>
@keyframes fadeIn {
from {
opacity: 0;
top: -0px;
}
to {
opacity: 1;
top: 12px;
}
}
@keyframes fadeOut {
from {
opacity: 1;
top: 12px;
}
to {
opacity: 0;
top: -0px;
}
}
</style>
<style>
.notification-toast--show {
right: 12px;
animation: fadeIn 0.5s ease-in-out;
top: 12px;
opacity: 1;
},
.notification-toast--show {
right: 12px;
animation: fadeOut 0.5s ease-in-out;
top: -0px;
opacity: 0;
}
</style>
<div class="notification-toast notification-toast--opened notification-toast--show notification-toast--variant-success" part="base --variant-success --opened --show">
<div class="notification-toast__icon-container">
<scale-icon-alert-success accessibility-title="success" class="notification-toast__icon" color="#ffffff" selected="" size="20"></scale-icon-alert-success>
</div>
<div class="notification-toast__text-container">
<slot name="header"></slot>
<slot name="body"></slot>
<scale-link>
<slot name="link"></slot>
</scale-link>
</div>
<scale-icon-action-circle-close accessibility-title="close" class="notification-message__icon-close" size="20" tabindex="0"></scale-icon-action-circle-close>
</div>
</mock:shadow-root>
Label
</scale-notification-toast>
`;

exports[`NotificationToast should match snapshot 1`] = `
<scale-notification-toast opened="">
<mock:shadow-root>
<style>
@keyframes fadeIn {
from {
opacity: 0;
top: -0px;
}
to {
opacity: 1;
top: 12px;
}
}
@keyframes fadeOut {
from {
opacity: 1;
top: 12px;
}
to {
opacity: 0;
top: -0px;
}
}
</style>
<style>
.notification-toast--show {
right: 12px;
animation: fadeIn 0.5s ease-in-out;
top: 12px;
opacity: 1;
},
.notification-toast--show {
right: 12px;
animation: fadeOut 0.5s ease-in-out;
top: -0px;
opacity: 0;
}
</style>
<div class="notification-toast notification-toast--opened notification-toast--show notification-toast--variant-informational" part="base --variant-informational --opened --show">
<div class="notification-toast__icon-container">
<scale-icon-alert-information accessibility-title="information" class="notification-toast__icon" color="#ffffff" selected="" size="20"></scale-icon-alert-information>
</div>
<div class="notification-toast__text-container">
<slot name="header"></slot>
<slot name="body"></slot>
<scale-link>
<slot name="link"></slot>
</scale-link>
</div>
<scale-icon-action-circle-close accessibility-title="close" class="notification-message__icon-close" size="20" tabindex="0"></scale-icon-action-circle-close>
</div>
</mock:shadow-root>
</scale-notification-toast>
`;
54 changes: 54 additions & 0 deletions packages/components/src/components/notification-toast/notificat-toast.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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: `<scale-notification-toast opened="true"></scale-notification-toast>`,
});
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: `<scale-notification-toast opened="true">Label</scale-notification-toast>`,
});
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();
});
});
Loading

0 comments on commit 1a9abb5

Please sign in to comment.