Skip to content

Commit 191e899

Browse files
ArinzeJeffrey-droidArinzeJeffrey-droid
committed
Create stories for notifications.
1 parent d077924 commit 191e899

File tree

3 files changed

+138
-13
lines changed

3 files changed

+138
-13
lines changed

‎scss/bitstyles/ui/notification.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import icons from '../../../assets/images/icons.svg';
2+
3+
const LiveRegion = ({ children }) => {
4+
const liveRegion = document.createElement('div');
5+
liveRegion.setAttribute('aria-live', 'polite');
6+
liveRegion.appendChild(children);
7+
return liveRegion;
8+
};
9+
10+
export default ({ heading, text }) => {
11+
const article = document.createElement('article');
12+
article.style.width = 'max-content';
13+
article.classList.add('u-flex', 'u-shadow-brand-1');
14+
15+
// Hardcoded icon for the mail
16+
const mailIcon = `<svg width="18" height="18" class="a-icon a-icon--l3" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><use xlink:href="${icons}#icon-mail"></use></svg>`;
17+
18+
// Hardcoded icon for the check mark
19+
const checkIcon = `<svg width="18" height="18" class="a-icon a-icon--l3" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><use xlink:href="${icons}#icon-check"></use></svg>`;
20+
21+
// First div with mail icon
22+
const iconDiv1 = document.createElement('div');
23+
iconDiv1.classList.add(
24+
'u-flex-shrink-0',
25+
'a-badge',
26+
'u-border-radius-0',
27+
'u-padding-s2',
28+
'u-margin-m-right'
29+
);
30+
iconDiv1.setAttribute('data-theme', 'positive');
31+
iconDiv1.innerHTML = mailIcon;
32+
article.appendChild(iconDiv1);
33+
34+
// Second div with heading and text
35+
const contentDiv = document.createElement('div');
36+
contentDiv.classList.add('u-padding-s3');
37+
article.appendChild(contentDiv);
38+
39+
const headingElement = document.createElement('h3');
40+
headingElement.classList.add('u-h4', 'u-margin-s6-bottom');
41+
headingElement.textContent = heading;
42+
contentDiv.appendChild(headingElement);
43+
44+
const textElement = document.createElement('p');
45+
textElement.classList.add('u-fg-grayscale-dark-2');
46+
textElement.textContent = text;
47+
contentDiv.appendChild(textElement);
48+
49+
// Third div with check mark icon
50+
const iconDiv2 = document.createElement('div');
51+
iconDiv2.classList.add(
52+
'u-flex-shrink-0',
53+
'a-badge',
54+
'a-badge--positive',
55+
'u-border-radius-0',
56+
'u-padding-s2'
57+
);
58+
iconDiv2.setAttribute('data-theme', 'brand-1');
59+
iconDiv2.innerHTML = checkIcon;
60+
article.appendChild(iconDiv2);
61+
62+
return LiveRegion({ children: article });
63+
};

‎scss/bitstyles/ui/notifications.stories.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Dropdown from '../atoms/dropdown/Dropdown';
2+
import Notification from './notification';
3+
4+
export default {
5+
title: 'UI/Notifications',
6+
component: Notification,
7+
argTypes: {
8+
heading: {
9+
description: 'Specifies the heading of the notification',
10+
control: {
11+
type: 'input',
12+
},
13+
},
14+
text: {
15+
description: 'Specifies the description of the notification',
16+
control: {
17+
type: 'input',
18+
},
19+
},
20+
},
21+
};
22+
23+
const Template = (args) => Notification(args);
24+
const dropdownDecorator = (story) => {
25+
const render = `
26+
<ul class="u-list-none">
27+
<li>${story().outerHTML}</li>
28+
<li>${
29+
story({
30+
args: {
31+
heading: 'Password update request sent',
32+
text: 'We sent you an email. Please click the link inside to confirm your new password',
33+
},
34+
}).outerHTML
35+
}</li>
36+
<li>${
37+
story({
38+
args: {
39+
heading: 'Password update request sent',
40+
text: 'We sent you an email. Please click the link inside to confirm your new password',
41+
},
42+
}).outerHTML
43+
}</li>
44+
<li>${
45+
story({
46+
args: {
47+
heading: 'Password update request sent',
48+
text: 'We sent you an email. Please click the link inside to confirm your new password',
49+
},
50+
}).outerHTML
51+
}</li>
52+
</ul>
53+
`;
54+
return Dropdown({ children: render });
55+
};
56+
57+
export const Base = Template.bind({});
58+
Base.args = {
59+
heading: 'Bring Me The Horizon',
60+
text: 'Strangers',
61+
};
62+
Base.parameters = {
63+
zeplinLink: 'https://zpl.io/8lBBP44',
64+
};
65+
Base.decorators = [dropdownDecorator];

‎scss/bitstyles/ui/notifications.stories.mdx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -65,23 +65,20 @@ Some notifications may require or enable further actions by the user — add but
6565
{`
6666
<div style="position: relative; z-index:0; transform: translate3d(0,0,0); min-height: 15rem">
6767
<div class="o-notification-center a-content a-content--s u-margin-0" aria-live="polite">
68-
<article class="a-card u-padding-l2 u-flex u-items-start">
69-
<div class="u-flex-shrink-0 a-badge a-badge--positive u-padding-s2 u-margin-m-right">
68+
<article class="u-flex a-card u-border-radius-0">
69+
<div class="u-flex-shrink-0 a-badge u-border-radius-0 u-padding-s2 u-margin-m-right" data-theme="positive">
7070
<svg width="18" height="18" class="a-icon a-icon--l3" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
7171
<use xlink:href="${icons}#icon-mail"></use>
7272
</svg>
7373
</div>
74-
<div>
75-
<h2 class="u-h5 u-margin-0">Password update request sent</h2>
76-
<p class="u-h6">We sent you an email. Please click the link inside to confirm your new password</p>
77-
<ul class="u-list-none u-flex">
78-
<li class="u-margin-s2-right">
79-
<button type="button" class="a-button">OK</button>
80-
</li>
81-
<li>
82-
<button type="button" class="a-button a-button--secondary">Cancel request</button>
83-
</li>
84-
</ul>
74+
<div class="u-padding-s3">
75+
<h2 class="u-h4 u-margin-s6-bottom">Password update request sent</h2>
76+
<p class="u-fg-grayscale-dark-2">We sent you an email. Please click the link inside to confirm your new password</p>
77+
</div>
78+
<div class="u-flex-shrink-0 a-badge a-badge--positive u-border-radius-0 u-padding-s2" data-theme="brand-1">
79+
<svg width="18" height="18" class="a-icon a-icon--l3" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
80+
<use xlink:href="${icons}#icon-check"></use>
81+
</svg>
8582
</div>
8683
</article>
8784
</div>

0 commit comments

Comments
 (0)