Skip to content

Commit 66d8f5f

Browse files
ArinzeJeffrey-droidArinzeJeffrey-droid
committed
Update Notification center.
1 parent 4a1bd08 commit 66d8f5f

File tree

5 files changed

+114
-21
lines changed

5 files changed

+114
-21
lines changed

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import icons from '../../../../assets/images/icons.svg';
2+
3+
export function NotificationWrapper(children) {
4+
const contentWrapper = document.createElement('div');
5+
contentWrapper.style.position = 'relative';
6+
contentWrapper.style.zIndex = 0;
7+
contentWrapper.style.transform = 'translate3d(0,0,0)';
8+
contentWrapper.style.minHeight = '15rem';
9+
10+
const notificationWrapper = document.createElement('div');
11+
notificationWrapper.classList.add(
12+
'o-notification-center',
13+
'a-content',
14+
'a-content--s',
15+
'u-margin-0'
16+
);
17+
notificationWrapper.setAttribute('aria-live', 'polite');
18+
notificationWrapper.innerHTML = children;
19+
20+
contentWrapper.appendChild(notificationWrapper);
21+
22+
return contentWrapper;
23+
}
24+
25+
export default ({ title, subtitle }) => {
26+
const article = document.createElement('article');
27+
const iconWrapperStart = document.createElement('div');
28+
const contentWrapper = document.createElement('div');
29+
const iconWrapperEnd = document.createElement('div');
30+
const heading = document.createElement('h2');
31+
const subtitleElement = document.createElement('p');
32+
33+
article.classList.add(
34+
'a-card',
35+
'u-padding-0',
36+
'u-border-radius-s2',
37+
'u-flex'
38+
);
39+
40+
iconWrapperStart.classList.add(
41+
'u-flex-shrink-0',
42+
'u-flex',
43+
'u-items-center',
44+
'u-padding-s2',
45+
'u-bg-brand-2-light-4'
46+
);
47+
iconWrapperStart.innerHTML = `
48+
<svg class="a-icon a-icon--l3" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
49+
<use xlink:href="${icons}#icon-mail"></use>
50+
</svg>
51+
`;
52+
53+
contentWrapper.classList.add('u-margin-l2');
54+
55+
heading.classList.add(
56+
'u-h4',
57+
'u-margin-0',
58+
'u-margin-s6-bottom',
59+
'u-white-space-nowrap'
60+
);
61+
heading.textContent = title;
62+
63+
subtitleElement.classList.add('u-margin-0', 'u-font-light');
64+
subtitleElement.textContent = subtitle;
65+
66+
iconWrapperEnd.classList.add(
67+
'u-flex-shrink-0',
68+
'u-flex',
69+
'u-items-center',
70+
'u-padding-s2',
71+
'u-bg-grayscale-light-3'
72+
);
73+
iconWrapperEnd.innerHTML = `
74+
<svg class="a-icon a-icon--l3" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
75+
<use xlink:href="${icons}#icon-mail"></use>
76+
</svg>
77+
`;
78+
79+
article.appendChild(iconWrapperStart);
80+
contentWrapper.appendChild(heading);
81+
contentWrapper.appendChild(subtitleElement);
82+
article.appendChild(contentWrapper);
83+
article.appendChild(iconWrapperEnd);
84+
85+
return article;
86+
};

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import NotificationCenter, { NotificationWrapper } from './NotificationCenter';
2+
3+
export default {
4+
title: 'Organisms/Notification center',
5+
component: NotificationCenter,
6+
argTypes: {},
7+
};
8+
9+
const Template = (args) => NotificationCenter(args);
10+
11+
export const Base = Template.bind({});
12+
const baseDecorator = (story) => {
13+
return NotificationWrapper(story().outerHTML);
14+
};
15+
16+
Base.args = {
17+
title: 'Password update request confirmed',
18+
subtitle: 'Thank you for updating your details.',
19+
};
20+
Base.decorators = [baseDecorator];
21+
Base.parameters = {
22+
zeplinLink: 'https://zpl.io/WQKegrn',
23+
};

‎scss/bitstyles/organisms/notification-center/notification-center.stories.mdx‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Canvas, Meta, Story } from '@storybook/addon-docs';
2-
import icons from '../../../../assets/images/icons.svg';
2+
import NotificationCenter from './NotificationCenter';
33

4-
<Meta title="Organisms/Notification center" />
4+
<Meta title="Organisms/Notification center" component={NotificationCenter} />
55

66
# Notification center
77

@@ -10,23 +10,5 @@ A collection of interactive elements that are closely-related can be visually bo
1010
Commonly, this layout is used for buttons.
1111

1212
<Canvas>
13-
<Story name="Notification center">
14-
{`
15-
<div style="position: relative; z-index:0; transform: translate3d(0,0,0); min-height: 15rem">
16-
<div class="o-notification-center a-content a-content--s u-margin-0" aria-live="polite">
17-
<article class="a-card u-padding-l2 u-flex u-items-start">
18-
<div class="u-flex-shrink-0 a-badge a-badge--positive u-padding-s2 u-margin-m-right">
19-
<svg class="a-icon a-icon--l3" viewBox="0 0 100 100" width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
20-
<use xlink:href="${icons}#icon-mail"></use>
21-
</svg>
22-
</div>
23-
<div>
24-
<h2 class="u-h5 u-margin-0">Password update request sent</h2>
25-
<p class="u-h6 u-margin-0">We sent an email to [email protected]. Please click the link inside to confirm your password change</p>
26-
</div>
27-
</article>
28-
</div>
29-
</div>
30-
`}
31-
</Story>
13+
<Story id="organisms-notification-center--base" />
3214
</Canvas>

‎scss/bitstyles/utilities/bg/_settings.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
$values: (
44
'brand-2': var(design-token.get('color', 'brand-2')),
5+
'brand-2-light-4': var(design-token.get('color', 'brand-2', 'light-4')),
56
'black': var(design-token.get('color', 'grayscale', 'black')),
67
'grayscale-dark-2': var(design-token.get('color', 'grayscale', 'dark-2')),
78
'grayscale-dark-1': var(design-token.get('color', 'grayscale', 'dark-1')),

‎scss/bitstyles/utilities/border-radius/_settings.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
$values: (
44
'0': 0,
55
's7': var(design-token.get('size', 's7')),
6+
's2': var(design-token.get('size', 's2')),
67
) !default;
78
$breakpoints: () !default;
89
$directions: (

0 commit comments

Comments
 (0)