feat(Clockface 4): Notifications

src/Components/FunnelPage/Documentation/FunnelPage.stories.tsx

@@ -31,7 +31,6 @@ import {
   ComponentSize,
   Columns,
   HeadingElement,
-  Gradients,
 } from '../../../Types'
 
 // Notes
@@ -224,7 +223,6 @@ funnelPageExampleStories.add(
                 size={ComponentSize.Small}
                 visible={notificationState}
                 icon={IconFont.Zap}
-                gradient={Gradients.KawaiiDesu}
                 onDismiss={handleDismissNotification}
               >
                 Yeehaw I'm a notification

src/Components/Notification/Documentation/Notification.stories.tsx

@@ -10,7 +10,6 @@ import {
   text,
   select,
   boolean,
-  color,
   number,
   object,
 } from '@storybook/addon-knobs'
@@ -31,7 +30,6 @@ import {Notification, NotificationDialog, NotificationDialogRef} from '../index'
 import {
   IconFont,
   Gradients,
-  InfluxColors,
   Alignment,
   VerticalAlignment,
   ComponentSize,
@@ -231,7 +229,6 @@ notificationStories.add(
             id={notification.id}
             visible={notification.visible}
             icon={notification.icon}
-            gradient={notification.gradient}
             onDismiss={handleDismiss}
             size={ComponentSize.Small}
             horizontalAlignment={notification.horizontalAlign}
@@ -285,15 +282,6 @@ notificationStories.add(
               )
             ]
           }
-          gradient={
-            Gradients[
-              select(
-                'gradient',
-                {None: 'none', ...mapEnumKeys(Gradients)},
-                'GarageBand'
-              )
-            ]
-          }
           color={
             ComponentColor[
               select(
@@ -303,7 +291,6 @@ notificationStories.add(
               )
             ]
           }
-          backgroundColor={color('backgroundColor', `${InfluxColors.Castle}`)}
           onDismiss={boolean('dismissable', true) ? handleClose : undefined}
         >
           <span>{text('text', 'Congrats! The thing has happened!')}</span>

src/Components/Notification/Notification.scss

@@ -9,12 +9,11 @@ $cf-notification-screen-margin: $cf-space-s;
 
 .cf-notification {
   margin-bottom: $cf-space-3xs;
-  color: $g18-cloud;
+  color: $cf-white;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  border-radius: $cf-radius;
-  font-weight: $cf-font-weight--medium;
+  border-radius: $cf-radius * 2;
 
   .cf-notification--contents {
     display: inline-flex;
@@ -30,7 +29,7 @@ $cf-notification-screen-margin: $cf-space-s;
   }
 
   .cf-notification--icon {
-    font-size: 1.125em;
+    font-size: 1.5em;
     margin-right: $cf-space-s;
     display: inline-flex;
     flex-shrink: 0;
@@ -44,8 +43,8 @@ $cf-notification-screen-margin: $cf-space-s;
     background-color: transparent;
     background-image: none;
     border: none;
-    color: $g18-cloud;
-    opacity: 0.6;
+    color: $cf-white;
+    font-size: 1.5em;
     transition: opacity $cf-transition-default, transform $cf-transition-default;
 
     &:active,
@@ -145,17 +144,17 @@ $cf-notification-screen-margin: $cf-space-s;
 */
 
 .cf-notification__dark-text {
-  color: rgba($g2-kevlar, 0.85);
+  color: $cf-grey-1;
 
   .cf-notification--dismiss {
-    color: rgba($g2-kevlar, 0.85);
+    color: $cf-grey-1;
   }
 }
 
 .cf-notification__light-text {
-  color: rgba($g20-white, 0.85);
+  color: $cf-white;
 
   .cf-notification--dismiss {
-    color: rgba($g20-white, 0.85);
+    color: $cf-white;
   }
 }

src/Components/Notification/Notification.tsx

@@ -7,12 +7,7 @@ import * as easings from 'd3-ease'
 import {NotificationDialog} from './NotificationDialog'
 
 // Types
-import {
-  Alignment,
-  InfluxColors,
-  VerticalAlignment,
-  ComponentSize,
-} from '../../Types'
+import {Alignment, VerticalAlignment, ComponentSize} from '../../Types'
 import {
   NotificationDialogProps,
   NotificationDialogRef,
@@ -52,11 +47,9 @@ export const NotificationRoot = forwardRef<NotificationRef, NotificationProps>(
       visible = true,
       duration = Infinity,
       children,
-      gradient,
       onDismiss,
       className,
       onTimeout,
-      backgroundColor = InfluxColors.Castle,
       verticalAlignment = VerticalAlignment.Top,
       horizontalAlignment = Alignment.Right,
     },
@@ -115,10 +108,8 @@ export const NotificationRoot = forwardRef<NotificationRef, NotificationProps>(
           visible &&
           (props => (
             <NotificationDialog
-              backgroundColor={backgroundColor}
               className={className}
               onDismiss={onDismiss}
-              gradient={gradient}
               testID={testID}
               style={{...style, ...props}}
               size={size}

src/Components/Notification/NotificationDialog.tsx

@@ -8,18 +8,14 @@ import {Icon} from '../Icon/Base/Icon'
 // Types
 import {
   IconFont,
-  Gradients,
-  InfluxColors,
   ComponentSize,
   StandardFunctionProps,
   ComponentColor,
+  InfluxColors,
 } from '../../Types'
 
 // Utils
-import {
-  generateBackgroundStyle,
-  calculateTextColorFromBackground,
-} from '../../Utils'
+import {calculateTextColorFromBackground} from '../../Utils'
 
 // Styles
 import './Notification.scss'
@@ -30,10 +26,6 @@ export interface NotificationDialogProps extends StandardFunctionProps {
   icon?: IconFont
   /** Controls if the notification is showing or hidden */
   visible?: boolean
-  /** Optional gradient theme of panel, supercedes backgroundColor prop */
-  gradient?: Gradients
-  /** Notification color */
-  backgroundColor?: InfluxColors | string
   /** If a function is passed in a dismiss button will appear on the notification */
   onDismiss?: (id?: string) => void
   /** Controls padding and font size of the notification */
@@ -54,31 +46,30 @@ export const NotificationDialog = forwardRef<
       size,
       icon,
       style,
-      color = '',
+      color = ComponentColor.Primary,
       testID = 'notification',
       children,
-      gradient,
       onDismiss,
       className,
-      backgroundColor = InfluxColors.Castle,
     },
     ref
   ) => {
-    let internalGradient = gradient
-    if (color) {
-      const notificationThemes = {
-        [ComponentColor.Primary]: Gradients.Info,
-        [ComponentColor.Success]: Gradients.Success,
-        [ComponentColor.Danger]: Gradients.Danger,
-      }
+    const backgroundColorMap = {
+      [ComponentColor.Primary]: InfluxColors.DarkTurquoise,
+      [ComponentColor.Success]: InfluxColors.DarkGreen,
+      [ComponentColor.Danger]: InfluxColors.DarkRed,
+    }
 
-      internalGradient = notificationThemes[color] || Gradients.Info
+    const highlightColorMap = {
+      [ComponentColor.Primary]: InfluxColors.Turquoise,
+      [ComponentColor.Success]: InfluxColors.Green,
+      [ComponentColor.Danger]: InfluxColors.Red,
     }
+    const backgroundColor = backgroundColorMap[color]
+    const borderColor = highlightColorMap[color]
+    const iconColor = highlightColorMap[color]
 
-    const textColor = calculateTextColorFromBackground(
-      backgroundColor,
-      internalGradient
-    )
+    const textColor = calculateTextColorFromBackground(backgroundColor)
 
     const notificationDialogClassName = classnames(
       `cf-notification cf-notification__${color || 'default'}`,
@@ -91,12 +82,11 @@ export const NotificationDialog = forwardRef<
       }
     )
 
-    const notificationDialogStyle = generateBackgroundStyle(
+    const notificationDialogStyle = {
       backgroundColor,
-      internalGradient,
-      false,
-      style
-    )
+      border: `solid 1px ${borderColor}`,
+      ...style,
+    }
 
     const handleDismiss = () => {
       if (onDismiss) {
@@ -112,7 +102,13 @@ export const NotificationDialog = forwardRef<
         style={notificationDialogStyle}
         ref={ref}
       >
-        {!!icon && <Icon glyph={icon} className="cf-notification--icon" />}
+        {!!icon && (
+          <Icon
+            glyph={icon}
+            className="cf-notification--icon"
+            style={{color: iconColor}}
+          />
+        )}
         <div className="cf-notification--contents">
           <div
             className="cf-notification--children"
@@ -127,7 +123,7 @@ export const NotificationDialog = forwardRef<
             onClick={handleDismiss}
             className="cf-notification--dismiss"
             testID={`${testID}--dismiss`}
-            size={ComponentSize.ExtraSmall}
+            size={size}
           />
         )}
       </div>

src/Sandbox/Portals.stories.tsx

@@ -20,13 +20,7 @@ import {InfluxDBCloudLogo} from '../Components/Logo'
 import {AppWrapper} from '../Components/AppWrapper/AppWrapper'
 
 // Types
-import {
-  ComponentColor,
-  IconFont,
-  ComponentSize,
-  Gradients,
-  Appearance,
-} from '../Types'
+import {ComponentColor, IconFont, ComponentSize, Appearance} from '../Types'
 
 // Notes
 import PortalsReadme from './Portals.md'
@@ -322,7 +316,6 @@ alertStories.add(
                 <Notification
                   icon={IconFont.CrownSolid_New}
                   size={ComponentSize.Small}
-                  gradient={Gradients.PolarExpress}
                 >
                   I am notifying you!
                 </Notification>

src/Types/index.tsx

@@ -179,9 +179,26 @@ export enum ButtonType {
 }
 
 export enum InfluxColors {
+  // Brand Colors
+  Turquoise = '#5ee4e4',
+  Pink = '#f863b0',
+  Chartreuse = '#d6f622',
+
+  DarkTurquoise = '#1e3a46',
+  DarkLavender = '#2a2649',
+  DarkPink = '#482543',
+  DarkChartreuse = '#546120',
+
+  // Utility Colors
+  Green = '#53e51a',
+  Red = '#e65b5b',
+
+  DarkGreen = '#1b381f',
+  DarkRed = '#311c29',
   Lavender = '#9394FF',
-  Grey1 = '#0e101f',
+
   // Grey
+  Grey1 = '#0e101f',
   Grey5 = '#07070e',
   Grey15 = '#1a1a2a',
   Grey25 = '#333346',
@@ -267,7 +284,6 @@ export enum InfluxColors {
   Flan = '#FFF7F4',
 
   // Brand Colors
-  Chartreuse = '#D6F622',
   DeepPurple = '#13002D',
   Magenta = '#BF2FE5',
   Galaxy = '#9394FF',