From 8474d7c57620257996ef1c2bf579bff158683064 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 28 Jan 2020 15:47:04 -0800
Subject: [PATCH 1/2] feat(notification): add information icon to notifications

---
 .../notification/_inline-notification.scss    |  4 -
 .../notification/_toast-notification.scss     |  6 +-
 .../components/notification/notification.hbs  | 90 ++++++++++---------
 3 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
index 757f715899a4..43d067aac8ed 100644
--- a/packages/components/src/components/notification/_inline-notification.scss
+++ b/packages/components/src/components/notification/_inline-notification.scss
@@ -132,10 +132,6 @@
     }
   }
 
-  .#{$prefix}--inline-notification--info .bx--inline-notification__icon {
-    display: none;
-  }
-
   .#{$prefix}--inline-notification--warning {
     @include notification--experimental($inverse-support-03, $inverse-02);
   }
diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
index dea871f671c3..12c727b30cde 100644
--- a/packages/components/src/components/notification/_toast-notification.scss
+++ b/packages/components/src/components/notification/_toast-notification.scss
@@ -26,7 +26,7 @@
     display: flex;
     width: rem(288px);
     height: auto;
-    padding-left: $carbon--spacing-05;
+    padding-left: rem(14px);
     color: $inverse-01;
     margin-top: $carbon--spacing-03;
     margin-bottom: $carbon--spacing-03;
@@ -122,8 +122,8 @@
 
   .#{$prefix}--toast-notification__icon {
     flex-shrink: 0;
-    margin-right: $carbon--spacing-05;
-    margin-top: $carbon--spacing-04;
+    margin-right: rem(14px);
+    margin-top: rem(14px);
   }
 
   .#{$prefix}--toast-notification__details {
diff --git a/packages/components/src/components/notification/notification.hbs b/packages/components/src/components/notification/notification.hbs
index c9acbee78b61..1be055e09500 100644
--- a/packages/components/src/components/notification/notification.hbs
+++ b/packages/components/src/components/notification/notification.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -6,48 +6,56 @@
 -->
 
 {{#each items}}
-  <div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}" role="alert">
-    {{#is ../variant "toast"}}
-      {{#is type "error"}}
-        {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-      {{/is}}
-      {{#is type "success"}}
-        {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-      {{/is}}
-      {{#is type "warning"}}
-        {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-      {{/is}}
+<div data-notification
+  class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}"
+  role="alert">
+  {{#is ../variant "toast"}}
+  {{#is type "error"}}
+  {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{#is type "success"}}
+  {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{#is type "warning"}}
+  {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{#is type "info"}}
+  {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{/is}}
+  <div class="{{@root.prefix}}--{{../variant}}-notification__details">
+    {{#is ../variant "inline"}}
+    {{#is type "error"}}
+    {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+    {{/is}}
+    {{#is type "info"}}
+    {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+    {{/is}}
+    {{#is type "success"}}
+    {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
     {{/is}}
-    <div class="{{@root.prefix}}--{{../variant}}-notification__details">
-      {{#is ../variant "inline"}}
-        {{#is type "error"}}
-          {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        {{#is type "info"}}
-          {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        {{#is type "success"}}
-          {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        {{#is type "warning"}}
-          {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        <div class="{{@root.prefix}}--{{../variant}}-notification__text-wrapper">
-          <p class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</p>
-          <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
-        </div>
-      {{/is}}
-      {{#is ../variant "toast"}}
-        <h3 class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</h3>
-        <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
-        <p class="{{@root.prefix}}--{{../variant}}-notification__caption">{{timestamp}}</p>
-      {{/is}}
+    {{#is type "warning"}}
+    {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+    {{/is}}
+    <div class="{{@root.prefix}}--{{../variant}}-notification__text-wrapper">
+      <p class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</p>
+      <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
     </div>
-    {{#is ../variant "inline"}}
-      <button tabindex="0" class="{{@root.prefix}}--inline-notification__action-button {{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--ghost" type="button">Action</button>
     {{/is}}
-    <button data-notification-btn class="{{@root.prefix}}--{{../variant}}-notification__close-button" type="button" aria-label="close">
-      {{ carbon-icon 'Close20' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
-    </button>
+    {{#is ../variant "toast"}}
+    <h3 class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</h3>
+    <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
+    <p class="{{@root.prefix}}--{{../variant}}-notification__caption">{{timestamp}}</p>
+    {{/is}}
   </div>
+  {{#is ../variant "inline"}}
+  <button tabindex="0"
+    class="{{@root.prefix}}--inline-notification__action-button {{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--ghost"
+    type="button">Action</button>
+  {{/is}}
+  <button data-notification-btn class="{{@root.prefix}}--{{../variant}}-notification__close-button" type="button"
+    aria-label="close">
+    {{ carbon-icon 'Close20' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
+  </button>
+</div>
 {{/each}}

From fcfa3fe0a7d8b80b75eae7822b94997041a1e0a4 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 28 Jan 2020 15:51:16 -0800
Subject: [PATCH 2/2] feat(notification): update react component

---
 packages/react/src/components/Notification/Notification.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js
index fb890fcf44e8..75b5eb6f75da 100644
--- a/packages/react/src/components/Notification/Notification.js
+++ b/packages/react/src/components/Notification/Notification.js
@@ -14,6 +14,7 @@ import {
   ErrorFilled20,
   CheckmarkFilled20,
   WarningFilled20,
+  InformationFilled20,
 } from '@carbon/icons-react';
 
 import Button from '../Button';
@@ -212,6 +213,7 @@ const iconTypes = {
   error: ErrorFilled20,
   success: CheckmarkFilled20,
   warning: WarningFilled20,
+  info: InformationFilled20,
 };
 
 function NotificationIcon({ iconDescription, kind, notificationType }) {