Skip to content

Commit 31c9c9a

Browse files
planktonicplanktonic
committed
- Moves Notification into its own component files in Molecules layer
1 parent a5d329c commit 31c9c9a

File tree

11 files changed

+166
-114
lines changed

11 files changed

+166
-114
lines changed

‎scss/bitstyles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@forward 'bitstyles/generic/';
1616
@forward 'bitstyles/base/';
1717
@forward 'bitstyles/atoms/';
18+
@forward 'bitstyles/molecules/';
1819
@forward 'bitstyles/organisms/';
1920

2021
//

‎scss/bitstyles/molecules/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward './notification' as notification-*;

‎scss/bitstyles/molecules/notification/Notification.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import icons from '../../../../assets/images/icons.svg';
2+
import Button from '../../atoms/button/Button';
3+
4+
const CloseButton = () => {
5+
return Button({
6+
colorVariant: ['transparent'],
7+
children: `<svg class="a-icon a-icon--xl" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
8+
<use xlink:href="${icons}#icon-cross"></use>
9+
</svg><span class="u-sr-only">Remove notification</span>`,
10+
classname: ['u-self-start'],
11+
});
12+
};
13+
14+
export default ({ title, subtitle, theme = 'default' }) => {
15+
const notification = document.createElement('article');
16+
const iconWrapperStart = document.createElement('div');
17+
const contentWrapper = document.createElement('div');
18+
const heading = document.createElement('h2');
19+
const subtitleElement = document.createElement('p');
20+
21+
notification.classList.add('m-notification');
22+
notification.setAttribute('data-theme', theme);
23+
24+
iconWrapperStart.classList.add('m-notification__highlight');
25+
iconWrapperStart.innerHTML = `
26+
<svg class="a-icon a-icon--xl" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
27+
<use xlink:href="${icons}#icon-mail"></use>
28+
</svg>
29+
`;
30+
31+
contentWrapper.classList.add('m-notification__content');
32+
33+
heading.classList.add('u-h4', 'u-margin-s6-bottom');
34+
heading.textContent = title;
35+
36+
subtitleElement.classList.add('u-margin-0', 'u-font-light');
37+
subtitleElement.textContent = subtitle;
38+
39+
notification.appendChild(iconWrapperStart);
40+
contentWrapper.appendChild(heading);
41+
contentWrapper.appendChild(subtitleElement);
42+
notification.appendChild(contentWrapper);
43+
notification.appendChild(CloseButton());
44+
45+
return notification;
46+
};

‎scss/bitstyles/molecules/notification/Notification.stories.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Notification from './Notification';
2+
3+
export default {
4+
title: 'Molecules/Notification',
5+
component: Notification,
6+
argTypes: {},
7+
};
8+
9+
const Template = (args) => Notification(args);
10+
11+
export const Base = Template.bind({});
12+
Base.args = {
13+
title: 'Password update request sent',
14+
subtitle:
15+
'We sent an email to [email protected]. Please click the link inside to confirm your password change',
16+
theme: 'positive',
17+
};
18+
Base.parameters = {
19+
zeplinLink: 'https://zpl.io/WQKegrn',
20+
};

‎scss/bitstyles/molecules/notification/_index.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@forward "./settings";
2+
@use "./settings";
3+
@use '../../tools/classname';
4+
@use '../../tools/design-token';
5+
@use '../../tools/themes';
6+
@use 'sass:map';
7+
8+
/* prettier-ignore */
9+
$highlight-color-property: design-token.get('notification', 'highlight-color');
10+
$highlight-background-color-property: design-token.get('notification', 'highlight-background-color');
11+
12+
#{classname.get($classname-items: 'notification', $layer: 'molecule')} {
13+
display: flex;
14+
background-color: var(design-token.get("color", "grayscale", "white"));
15+
color: var(design-token.get("color", "grayscale", "dark-3"));
16+
}
17+
18+
#{classname.get($classname-items: 'notification__content', $layer: 'molecule')} {
19+
flex: 1;
20+
min-width: 0;
21+
padding: var(design-token.get("size", "l2")) 0 var(design-token.get("size", "l2")) var(design-token.get("size", "l2"));
22+
}
23+
24+
#{classname.get($classname-items: 'notification__highlight', $layer: 'molecule')} {
25+
flex-shrink: 0;
26+
display: flex;
27+
align-items: center;
28+
padding: var(design-token.get("size", "s2"));
29+
color: var($highlight-color-property, var(design-token.get("color", "brand-1", "dark-1")));
30+
background-color: var($highlight-background-color-property, var(design-token.get("color", "brand-1", "light-4")));
31+
}
32+
33+
@each $theme-name, $theme in settings.$theme-variants {
34+
@include themes.get($theme-name) {
35+
#{$highlight-color-property}: map.get($theme, 'highlight-color');
36+
#{$highlight-background-color-property}: map.get($theme, 'highlight-background-color');
37+
}
38+
}

‎scss/bitstyles/molecules/notification/_settings.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@use '../../tools/design-token';
2+
3+
$theme-variants: (
4+
'default': (
5+
'highlight-background-color': var(design-token.get('color', 'grayscale', 'light-4')),
6+
'highlight-color': var(design-token.get('color', 'grayscale', 'dark-3')),
7+
),
8+
'brand-1': (
9+
'highlight-background-color': var(design-token.get('color', 'brand-1', 'light-4')),
10+
'highlight-color': var(design-token.get('color', 'brand-1', 'dark-1')),
11+
),
12+
'brand-2': (
13+
'highlight-background-color': var(design-token.get('color', 'brand-2', 'light-4')),
14+
'highlight-color': var(design-token.get('color', 'brand-2', 'dark-1')),
15+
),
16+
'positive': (
17+
'highlight-background-color': var(design-token.get('color', 'positive', 'light-4')),
18+
'highlight-color': var(design-token.get('color', 'positive', 'dark-1')),
19+
),
20+
'warning': (
21+
'highlight-background-color': var(design-token.get('color', 'warning', 'light-4')),
22+
'highlight-color': var(design-token.get('color', 'warning', 'dark-1')),
23+
),
24+
'danger': (
25+
'highlight-background-color': var(design-token.get('color', 'danger', 'light-4')),
26+
'highlight-color': var(design-token.get('color', 'danger', 'dark-1')),
27+
),
28+
) !default;

‎scss/bitstyles/molecules/notification/notification.stories.mdx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Canvas, Meta, Story } from '@storybook/addon-docs';
2+
import Notification from './Notification';
3+
4+
<Meta title="Molecules/Notification/Overview" component={Notification} />
5+
6+
# Notification
7+
8+
A collection of interactive elements that are closely-related can be visually bound together.
9+
10+
Commonly, this layout is used for buttons.
11+
12+
<Canvas>
13+
<Story id="molecules-notification--base" />
14+
</Canvas>

‎scss/bitstyles/organisms/notification-center/NotificationCenter.js‎

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,6 @@
1-
import icons from '../../../../assets/images/icons.svg';
2-
import Button from '../../atoms/button/Button';
31
import Dropdown from '../../atoms/dropdown/Dropdown';
42

5-
const CloseButton = () => {
6-
return Button({
7-
colorVariant: ['transparent'],
8-
children: `<svg class="a-icon a-icon--xl" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
9-
<use xlink:href="${icons}#icon-cross"></use>
10-
</svg><span class="u-sr-only">Remove notification</span>`,
11-
classname: ['u-self-start'],
12-
});
13-
};
14-
15-
const Notification = ({ title, subtitle, theme = 'default' }) => {
16-
const notification = document.createElement('article');
17-
const iconWrapperStart = document.createElement('div');
18-
const contentWrapper = document.createElement('div');
19-
const heading = document.createElement('h2');
20-
const subtitleElement = document.createElement('p');
21-
22-
notification.classList.add('m-notification');
23-
notification.setAttribute('data-theme', theme);
24-
25-
iconWrapperStart.classList.add('m-notification__highlight');
26-
iconWrapperStart.innerHTML = `
27-
<svg class="a-icon a-icon--xl" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
28-
<use xlink:href="${icons}#icon-mail"></use>
29-
</svg>
30-
`;
31-
32-
contentWrapper.classList.add('m-notification__content');
33-
34-
heading.classList.add('u-h4', 'u-margin-s6-bottom');
35-
heading.textContent = title;
36-
37-
subtitleElement.classList.add('u-margin-0', 'u-font-light');
38-
subtitleElement.textContent = subtitle;
39-
40-
notification.appendChild(iconWrapperStart);
41-
contentWrapper.appendChild(heading);
42-
contentWrapper.appendChild(subtitleElement);
43-
notification.appendChild(contentWrapper);
44-
notification.appendChild(CloseButton());
45-
46-
return notification;
47-
};
48-
49-
const NotificationCenter = ({ children = [], isGlobal = true }) => {
3+
export default ({ children = [], isGlobal = true }) => {
504
const notificationCenter = document.createElement('ul');
515

526
if (isGlobal) {
@@ -71,5 +25,3 @@ const NotificationCenter = ({ children = [], isGlobal = true }) => {
7125

7226
return Dropdown({ children: notificationCenter, alignment: ['right'] });
7327
};
74-
75-
export { Notification, NotificationCenter };

‎scss/bitstyles/organisms/notification-center/NotificationCenter.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Notification, NotificationCenter } from './NotificationCenter';
1+
import Notification from '../../molecules/notification/Notification';
2+
import NotificationCenter from './NotificationCenter';
23

34
export default {
45
title: 'Organisms/Notification center',
56
component: NotificationCenter,
6-
subcomponents: Notification,
77
argTypes: {},
88
};
99

‎scss/bitstyles/organisms/notification-center/_index.scss‎

Lines changed: 12 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@
22
@use "./settings";
33
@use '../../tools/classname';
44
@use '../../tools/design-token';
5-
@use '../../tools/themes';
6-
@use 'sass:map';
5+
6+
/* prettier-ignore */
7+
$border-radius-property: design-token.get('notification-center', 'border-radius');
8+
$shadow-property: design-token.get('notification-center', 'shadow');
9+
$border-bottom-property: design-token.get('notification-center-item', 'border-bottom');
710

811
#{classname.get($classname-items: 'notification-center', $layer: 'organism')} {
12+
#{$border-radius-property}: settings.$border-radius;
13+
#{$shadow-property}: settings.$shadow;
14+
915
position: fixed;
1016
top: 0;
1117
right: 0;
@@ -14,49 +20,18 @@
1420
list-style: none;
1521
padding: 0;
1622
z-index: var(design-token.get("z-index", 'top'));
17-
border-radius: var(design-token.get("size", "m"));
23+
border-radius: var($border-radius-property);
1824
overflow-x: hidden;
1925
overflow-y: auto;
2026
max-height: 80vh;
21-
box-shadow: var(design-token.get("shadow", "brand-1", "center", "box"));
27+
box-shadow: var(#{$shadow-property});
2228

2329
> * {
2430
pointer-events: auto;
2531
}
2632
}
2733

2834
#{classname.get($classname-items: 'notification-center__item', $layer: 'organism')} {
29-
border-bottom: 2px solid var(design-token.get("color", "brand-1", "light-2"));
30-
}
31-
32-
/* prettier-ignore */
33-
$highlight-color-property: design-token.get('notification', 'highlight-color');
34-
$highlight-background-color-property: design-token.get('notification', 'highlight-background-color');
35-
36-
#{classname.get($classname-items: 'notification', $layer: 'molecule')} {
37-
display: flex;
38-
background-color: var(design-token.get("color", "grayscale", "white"));
39-
color: var(design-token.get("color", "grayscale", "dark-3"));
40-
}
41-
42-
#{classname.get($classname-items: 'notification__content', $layer: 'molecule')} {
43-
flex: 1;
44-
min-width: 0;
45-
padding: var(design-token.get("size", "l2")) 0 var(design-token.get("size", "l2")) var(design-token.get("size", "l2"));
46-
}
47-
48-
#{classname.get($classname-items: 'notification__highlight', $layer: 'molecule')} {
49-
flex-shrink: 0;
50-
display: flex;
51-
align-items: center;
52-
padding: var(design-token.get("size", "s2"));
53-
color: var($highlight-color-property, var(design-token.get("color", "brand-1", "dark-1")));
54-
background-color: var($highlight-background-color-property, var(design-token.get("color", "brand-1", "light-4")));
55-
}
56-
57-
@each $theme-name, $theme in settings.$theme-variants {
58-
@include themes.get($theme-name) {
59-
#{$highlight-color-property}: map.get($theme, 'highlight-color');
60-
#{$highlight-background-color-property}: map.get($theme, 'highlight-background-color');
61-
}
35+
#{$border-bottom-property}: settings.$item-border-bottom;
36+
border-bottom: var(#{$border-bottom-property});
6237
}

0 commit comments

Comments
 (0)