Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/notification toast #714

Merged
merged 26 commits into from
Jan 3, 2022
Merged

Feat/notification toast #714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
6e22829
feat: first working toast
marvinLaubenstein Nov 17, 2021
f18f845
feat: finished design
marvinLaubenstein Nov 18, 2021
39e2cb6
refactor: success svg coloring and selected state
marvinLaubenstein Nov 22, 2021
d06e39a
feat: init basic stories
marvinLaubenstein Nov 22, 2021
85ebdc5
feat: story html
marvinLaubenstein Nov 22, 2021
81d9bab
feat: new stories, usage text and alignment bottom
marvinLaubenstein Nov 23, 2021
f77c56b
feat: adding left and right alignments
marvinLaubenstein Nov 26, 2021
fdc24ca
refactor: storybook after alignment changes
marvinLaubenstein Nov 26, 2021
2b72579
refactor: kick out story prop from stories
marvinLaubenstein Nov 26, 2021
2cc179a
refactor: remove story prop from storybook
marvinLaubenstein Dec 1, 2021
3c909cb
refactor: color hex values to tokens
marvinLaubenstein Dec 1, 2021
bbaad75
fix: visual testing and storybook issues
marvinLaubenstein Dec 3, 2021
282d4af
feat: adding visual testing snapshots
marvinLaubenstein Dec 3, 2021
61183c1
refactor: updating visual snapshots
marvinLaubenstein Dec 3, 2021
756321f
feat: unit tests
marvinLaubenstein Dec 3, 2021
6eabd8b
fix: linting
marvinLaubenstein Dec 6, 2021
866a2a6
feat: adding usage text files
marvinLaubenstein Dec 6, 2021
c102437
refactor: css host
marvinLaubenstein Dec 6, 2021
ca495a8
Merge branch 'main' of https://github.com/telekom/scale into feat/not…
marvinLaubenstein Dec 15, 2021
a134a69
refactor: updating visual snapshots
marvinLaubenstein Dec 15, 2021
c063f79
refactor: success icon
marvinLaubenstein Dec 16, 2021
2885758
Merge branch 'main' into feat/notification-toast
marvinLaubenstein Dec 16, 2021
78ff6e5
fix: all pull request issues
marvinLaubenstein Dec 16, 2021
5ccf92a
fix: visual testing issues
marvinLaubenstein Dec 16, 2021
5b5e635
Merge branch 'main' into feat/notification-toast
marvinLaubenstein Jan 3, 2022
5130c06
fix: visual testing
marvinLaubenstein Jan 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/components/src/components/link/readme.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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