[#INTERNAL-32] update notification centre components

scss/bitstyles.scss

@@ -15,6 +15,7 @@
 @forward 'bitstyles/generic/';
 @forward 'bitstyles/base/';
 @forward 'bitstyles/atoms/';
+@forward 'bitstyles/molecules/';
 @forward 'bitstyles/organisms/';
 
 //

scss/bitstyles/atoms/dropdown/Dropdown.js

@@ -11,7 +11,7 @@ export default ({ alignment = [], children }) => {
   });
   wrapper.appendChild(button);
   const dropdown = document.createElement('div');
-  dropdown.innerHTML = children || 'Dropdown';
+  dropdown.appendChild(children);
   dropdown.classList.add('a-dropdown', 'u-overflow-y-auto');
   alignment.forEach((variant) => {
     dropdown.classList.add(`a-dropdown--${variant}`);

scss/bitstyles/design-tokens/_typography.scss

@@ -1,5 +1,6 @@
 @use '../tools/custom-property';
 @use 'sass:list';
+@use 'sass:map';
 
 //
 // Font-weights /////////////////////////////////////////
@@ -26,37 +27,37 @@ $webfont-variants: (
   'normal': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'normal')),
+    'font-weight': map.get($font-weights, 'normal'),
     'filename': 'poppins-v20-latin-400',
   ),
   'italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'normal')),
+    'font-weight': map.get($font-weights, 'normal'),
     'filename': 'poppins-v20-latin-400italic',
   ),
   'medium': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'medium')),
+    'font-weight': map.get($font-weights, 'medium'),
     'filename': 'poppins-v20-latin-500',
   ),
   'medium-italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'medium')),
+    'font-weight': map.get($font-weights, 'medium'),
     'filename': 'poppins-v20-latin-500italic',
   ),
   'semibold': (
     'font-family': $webfont-family-name,
     'font-style': normal,
-    'font-weight': var(custom-property.name('font-weight', 'semibold')),
+    'font-weight': map.get($font-weights, 'semibold'),
     'filename': 'poppins-v20-latin-600',
   ),
   'semibold-italic': (
     'font-family': $webfont-family-name,
     'font-style': italic,
-    'font-weight': var(custom-property.name('font-weight', 'semibold')),
+    'font-weight': map.get($font-weights, 'semibold'),
     'filename': 'poppins-v20-latin-600italic',
   ),
 ) !default;

scss/bitstyles/molecules/_index.scss

@@ -0,0 +1 @@
+@forward './notification' as notification-*;

scss/bitstyles/molecules/notification/Notification.js

@@ -0,0 +1,46 @@
+import icons from '../../../../assets/images/icons.svg';
+import Button from '../../atoms/button/Button';
+
+const CloseButton = () => {
+  return Button({
+    colorVariant: ['secondary'],
+    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">
+      <use xlink:href="${icons}#icon-cross"></use>
+    </svg><span class="u-sr-only">Remove notification</span>`,
+    classname: ['m-notification__button'],
+  });
+};
+
+export default ({ title, subtitle, theme = 'default' }) => {
+  const notification = document.createElement('article');
+  const iconWrapperStart = document.createElement('div');
+  const contentWrapper = document.createElement('div');
+  const heading = document.createElement('h2');
+  const subtitleElement = document.createElement('p');
+
+  notification.classList.add('m-notification');
+  notification.setAttribute('data-theme', theme);
+
+  iconWrapperStart.classList.add('m-notification__highlight');
+  iconWrapperStart.innerHTML = `
+    <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">
+      <use xlink:href="${icons}#icon-mail"></use>
+    </svg>
+  `;
+
+  contentWrapper.classList.add('m-notification__content');
+
+  heading.classList.add('u-h4', 'u-margin-s6-bottom');
+  heading.textContent = title;
+
+  subtitleElement.classList.add('u-margin-0', 'u-font-light');
+  subtitleElement.textContent = subtitle;
+
+  notification.appendChild(iconWrapperStart);
+  contentWrapper.appendChild(heading);
+  contentWrapper.appendChild(subtitleElement);
+  notification.appendChild(contentWrapper);
+  notification.appendChild(CloseButton());
+
+  return notification;
+};

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

@@ -0,0 +1,20 @@
+import Notification from './Notification';
+
+export default {
+  title: 'Molecules/Notification',
+  component: Notification,
+  argTypes: {},
+};
+
+const Template = (args) => Notification(args);
+
+export const Base = Template.bind({});
+Base.args = {
+  title: 'Password update request sent',
+  subtitle:
+    'We sent an email to [email protected]. Please click the link inside to confirm your password change',
+  theme: 'positive',
+};
+Base.parameters = {
+  zeplinLink: 'https://zpl.io/WQKegrn',
+};

scss/bitstyles/molecules/notification/_index.scss

@@ -0,0 +1,73 @@
+@forward "./settings";
+@use "./settings";
+@use '../../tools/classname';
+@use '../../tools/design-token';
+@use '../../tools/themes';
+@use 'sass:map';
+
+/* prettier-ignore */
+$highlight-color-property: design-token.get('notification', 'highlight-color');
+$highlight-background-color-property: design-token.get('notification', 'highlight-background-color');
+$button-border-top-right-radius-property: design-token.get(
+  'button',
+  'border',
+  'top',
+  'right',
+  'radius'
+);
+$button-border-bottom-right-radius-property: design-token.get(
+  'button',
+  'border',
+  'bottom',
+  'right',
+  'radius'
+);
+$button-border-bottom-left-radius-property: design-token.get(
+  'button',
+  'border',
+  'bottom',
+  'left',
+  'radius'
+);
+$button-border-top-left-radius-property: design-token.get(
+  'button',
+  'border',
+  'top',
+  'left',
+  'radius'
+);
+
+#{classname.get($classname-items: 'notification', $layer: 'molecule')} {
+  display: flex;
+  background-color: var(design-token.get("color", "grayscale", "white"));
+  color: var(design-token.get("color", "grayscale", "dark-3"));
+}
+
+#{classname.get($classname-items: 'notification__button', $layer: 'molecule')} {
+  #{$button-border-top-right-radius-property}: 0;
+  #{$button-border-bottom-right-radius-property}: 0;
+  #{$button-border-bottom-left-radius-property}: 0;
+  #{$button-border-top-left-radius-property}: 0;
+}
+
+#{classname.get($classname-items: 'notification__highlight', $layer: 'molecule')} {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 var(design-token.get("size", "s1"));
+  color: var($highlight-color-property, var(design-token.get("color", "brand-1", "dark-1")));
+  background-color: var($highlight-background-color-property, var(design-token.get("color", "brand-1", "light-4")));
+}
+
+#{classname.get($classname-items: 'notification__content', $layer: 'molecule')} {
+  flex: 1;
+  min-width: 0;
+  padding: var(design-token.get("size", "l2")) 0 var(design-token.get("size", "l2")) var(design-token.get("size", "l2"));
+}
+
+@each $theme-name, $theme in settings.$theme-variants {
+  @include themes.get($theme-name) {
+    #{$highlight-color-property}: map.get($theme, 'highlight-color');
+    #{$highlight-background-color-property}: map.get($theme, 'highlight-background-color');
+  }
+}

scss/bitstyles/molecules/notification/_settings.scss

@@ -0,0 +1,28 @@
+@use '../../tools/design-token';
+
+$theme-variants: (
+  'default': (
+    'highlight-background-color': var(design-token.get('color', 'grayscale', 'light-4')),
+    'highlight-color': var(design-token.get('color', 'grayscale', 'dark-3')),
+  ),
+  'brand-1': (
+    'highlight-background-color': var(design-token.get('color', 'brand-1', 'light-4')),
+    'highlight-color': var(design-token.get('color', 'brand-1', 'dark-1')),
+  ),
+  'brand-2': (
+    'highlight-background-color': var(design-token.get('color', 'brand-2', 'light-4')),
+    'highlight-color': var(design-token.get('color', 'brand-2', 'dark-1')),
+  ),
+  'positive': (
+    'highlight-background-color': var(design-token.get('color', 'positive', 'light-4')),
+    'highlight-color': var(design-token.get('color', 'positive', 'dark-1')),
+  ),
+  'warning': (
+    'highlight-background-color': var(design-token.get('color', 'warning', 'light-4')),
+    'highlight-color': var(design-token.get('color', 'warning', 'dark-1')),
+  ),
+  'danger': (
+    'highlight-background-color': var(design-token.get('color', 'danger', 'light-4')),
+    'highlight-color': var(design-token.get('color', 'danger', 'dark-1')),
+  ),
+) !default;

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

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Notification from './Notification';
+
+<Meta title="Molecules/Notification/Overview" component={Notification} />
+
+# Notification
+
+A collection of interactive elements that are closely-related can be visually bound together.
+
+Commonly, this layout is used for buttons.
+
+<Canvas>
+  <Story id="molecules-notification--base" />
+</Canvas>

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

@@ -0,0 +1,27 @@
+import Dropdown from '../../atoms/dropdown/Dropdown';
+
+export default ({ children = [], isGlobal = true }) => {
+  const notificationCenter = document.createElement('ul');
+
+  if (isGlobal) {
+    notificationCenter.setAttribute('aria-live', 'polite');
+    notificationCenter.classList.add(
+      'o-notification-center',
+      'a-content',
+      'a-content--s'
+    );
+  }
+
+  children.forEach((child) => {
+    const listItem = document.createElement('li');
+    listItem.classList.add('o-notification-center__item');
+    listItem.appendChild(child);
+    notificationCenter.appendChild(listItem);
+  });
+
+  if (isGlobal) {
+    return notificationCenter;
+  }
+
+  return Dropdown({ children: notificationCenter, alignment: ['right'] });
+};

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

@@ -0,0 +1,68 @@
+import Notification from '../../molecules/notification/Notification';
+import NotificationCenter from './NotificationCenter';
+
+export default {
+  title: 'Organisms/Notification center',
+  component: NotificationCenter,
+  argTypes: {},
+};
+
+const Template = (args) => NotificationCenter(args);
+
+export const Base = Template.bind({});
+const baseDecorator = (story) => {
+  const decorator = document.createElement('div');
+  decorator.style.height = '20rem';
+  decorator.appendChild(story());
+  return decorator;
+};
+
+const notifications = [
+  Notification({
+    title: 'Password update request sent',
+    subtitle:
+      'We sent an email to [email protected]. Please click the link inside to confirm your password change',
+    theme: 'positive',
+  }),
+  Notification({
+    title: 'Well Done!',
+    subtitle: 'You did something good',
+    theme: 'brand-1',
+  }),
+  Notification({
+    title: 'Oops! That wasn’t good',
+    subtitle: 'Maybe that was a mistake?',
+    theme: 'danger',
+  }),
+];
+
+Base.args = {
+  children: notifications,
+};
+Base.decorators = [baseDecorator];
+Base.parameters = {
+  zeplinLink: 'https://zpl.io/WQKegrn',
+};
+
+// export const InDropdown = Template.bind({});
+// const dropdownDecorator = (story) => {
+//   const decorator = document.createElement('div');
+//   decorator.style.height = '30rem';
+//   const children = `<ul class="u-list-none">
+//   <li class="u-border-brand-1-dark-2-bottom">${story().outerHTML}</li>
+//   <li class="u-border-brand-1-dark-2-bottom">${story().outerHTML}</li>
+//   <li class="u-border-brand-1-dark-2-bottom">${story().outerHTML}</li>
+//   <li>${story().outerHTML}</li>
+//   </ul>`;
+//   decorator.appendChild(Dropdown({ alignment: ['right'], children }));
+//   return decorator;
+// };
+
+// InDropdown.args = {
+//   title: 'Password update request confirmed',
+//   subtitle: 'Thank you for updating your details.',
+// };
+// InDropdown.decorators = [dropdownDecorator];
+// InDropdown.parameters = {
+//   zeplinLink: 'https://zpl.io/Gn7L1d3',
+// };

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

@@ -1,12 +1,37 @@
+@forward "./settings";
+@use "./settings";
 @use '../../tools/classname';
+@use '../../tools/design-token';
+
+/* prettier-ignore */
+$border-radius-property: design-token.get('notification-center', 'border-radius');
+$shadow-property: design-token.get('notification-center', 'shadow');
+$border-bottom-property: design-token.get('notification-center-item', 'border-bottom');
 
 #{classname.get($classname-items: 'notification-center', $layer: 'organism')} {
+  #{$border-radius-property}: settings.$border-radius;
+  #{$shadow-property}: settings.$shadow;
+
   position: fixed;
   top: 0;
   right: 0;
   pointer-events: none;
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  z-index: var(design-token.get("z-index", 'top'));
+  border-radius: var($border-radius-property);
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: 80vh;
+  box-shadow: var(#{$shadow-property});
 
   > * {
     pointer-events: auto;
   }
 }
+
+#{classname.get($classname-items: 'notification-center__item', $layer: 'organism')} {
+  #{$border-bottom-property}: settings.$item-border-bottom;
+  border-bottom: var(#{$border-bottom-property});
+}

scss/bitstyles/organisms/notification-center/_settings.scss

@@ -0,0 +1,5 @@
+@use '../../tools/design-token';
+
+$border-radius: var(design-token.get("size", "m")) !default;
+$shadow: var(design-token.get("shadow", "brand-1", "center", "box")) !default;
+$item-border-bottom: 2px solid var(design-token.get("color", "brand-1", "light-2")) !default;