Update Notification center.

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

@@ -0,0 +1,86 @@
+import icons from '../../../../assets/images/icons.svg';
+
+export function NotificationWrapper(children) {
+  const contentWrapper = document.createElement('div');
+  contentWrapper.style.position = 'relative';
+  contentWrapper.style.zIndex = 0;
+  contentWrapper.style.transform = 'translate3d(0,0,0)';
+  contentWrapper.style.minHeight = '15rem';
+
+  const notificationWrapper = document.createElement('div');
+  notificationWrapper.classList.add(
+    'o-notification-center',
+    'a-content',
+    'a-content--s',
+    'u-margin-0'
+  );
+  notificationWrapper.setAttribute('aria-live', 'polite');
+  notificationWrapper.innerHTML = children;
+
+  contentWrapper.appendChild(notificationWrapper);
+
+  return contentWrapper;
+}
+
+export default ({ title, subtitle }) => {
+  const article = document.createElement('article');
+  const iconWrapperStart = document.createElement('div');
+  const contentWrapper = document.createElement('div');
+  const iconWrapperEnd = document.createElement('div');
+  const heading = document.createElement('h2');
+  const subtitleElement = document.createElement('p');
+
+  article.classList.add(
+    'a-card',
+    'u-padding-0',
+    'u-border-radius-s2',
+    'u-flex'
+  );
+
+  iconWrapperStart.classList.add(
+    'u-flex-shrink-0',
+    'u-flex',
+    'u-items-center',
+    'u-padding-s2',
+    'u-bg-brand-2-light-4'
+  );
+  iconWrapperStart.innerHTML = `
+    <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">
+      <use xlink:href="${icons}#icon-mail"></use>
+    </svg>
+  `;
+
+  contentWrapper.classList.add('u-margin-l2');
+
+  heading.classList.add(
+    'u-h4',
+    'u-margin-0',
+    'u-margin-s6-bottom',
+    'u-white-space-nowrap'
+  );
+  heading.textContent = title;
+
+  subtitleElement.classList.add('u-margin-0', 'u-font-light');
+  subtitleElement.textContent = subtitle;
+
+  iconWrapperEnd.classList.add(
+    'u-flex-shrink-0',
+    'u-flex',
+    'u-items-center',
+    'u-padding-s2',
+    'u-bg-grayscale-light-3'
+  );
+  iconWrapperEnd.innerHTML = `
+    <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">
+      <use xlink:href="${icons}#icon-mail"></use>
+    </svg>
+  `;
+
+  article.appendChild(iconWrapperStart);
+  contentWrapper.appendChild(heading);
+  contentWrapper.appendChild(subtitleElement);
+  article.appendChild(contentWrapper);
+  article.appendChild(iconWrapperEnd);
+
+  return article;
+};

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

@@ -0,0 +1,23 @@
+import NotificationCenter, { NotificationWrapper } from './NotificationCenter';
+
+export default {
+  title: 'Organisms/Notification center',
+  component: NotificationCenter,
+  argTypes: {},
+};
+
+const Template = (args) => NotificationCenter(args);
+
+export const Base = Template.bind({});
+const baseDecorator = (story) => {
+  return NotificationWrapper(story().outerHTML);
+};
+
+Base.args = {
+  title: 'Password update request confirmed',
+  subtitle: 'Thank you for updating your details.',
+};
+Base.decorators = [baseDecorator];
+Base.parameters = {
+  zeplinLink: 'https://zpl.io/WQKegrn',
+};

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

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import icons from '../../../../assets/images/icons.svg';
+import NotificationCenter from './NotificationCenter';
 
-<Meta title="Organisms/Notification center" />
+<Meta title="Organisms/Notification center" component={NotificationCenter} />
 
 # Notification center
 
@@ -10,23 +10,5 @@ A collection of interactive elements that are closely-related can be visually bo
 Commonly, this layout is used for buttons.
 
 <Canvas>
-  <Story name="Notification center">
-    {`
-      <div style="position: relative; z-index:0; transform: translate3d(0,0,0); min-height: 15rem">
-        <div class="o-notification-center a-content a-content--s u-margin-0" aria-live="polite">
-          <article class="a-card u-padding-l2 u-flex u-items-start">
-            <div class="u-flex-shrink-0 a-badge a-badge--positive u-padding-s2 u-margin-m-right">
-              <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">
-                <use xlink:href="${icons}#icon-mail"></use>
-              </svg>
-            </div>
-            <div>
-              <h2 class="u-h5 u-margin-0">Password update request sent</h2>
-              <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>
-            </div>
-          </article>
-        </div>
-      </div>
-    `}
-  </Story>
+  <Story id="organisms-notification-center--base" />
 </Canvas>

scss/bitstyles/utilities/bg/_settings.scss

@@ -2,6 +2,7 @@
 
 $values: (
   'brand-2': var(design-token.get('color', 'brand-2')),
+  'brand-2-light-4': var(design-token.get('color', 'brand-2', 'light-4')),
   'black': var(design-token.get('color', 'grayscale', 'black')),
   'grayscale-dark-2': var(design-token.get('color', 'grayscale', 'dark-2')),
   'grayscale-dark-1': var(design-token.get('color', 'grayscale', 'dark-1')),

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

@@ -3,6 +3,7 @@
 $values: (
   '0': 0,
   's7': var(design-token.get('size', 's7')),
+  's2': var(design-token.get('size', 's2')),
 ) !default;
 $breakpoints: () !default;
 $directions: (