fix(notification): use new typography scss, px to rem, edit notificat…

…ionPage, deprecate --danger modifier
zepdev · Dec 14, 2020 · 6ed41d5 · 6ed41d5
1 parent 7cf46a7
commit 6ed41d5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 26 deletions.
diff --git a/src/elements/notification/NotificationPage.jsx b/src/elements/notification/NotificationPage.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
 function NotificationPage() {
-  const variants = ['danger', 'success', 'info', 'warning'];
+  const variants = ['default', 'alert', 'success', 'info', 'warning'];
   return (
     <>
-      {variants.map((elem) => (
-        <div style={{ marginBottom: 15 }} key={`notification${elem}`}>
-          <div className={`zep-notification zep-notification--${elem}`}>
-            Notification
+      {variants.map((variant) => (
+        <div style={{ marginBottom: 15 }} key={`notification${variant}`}>
+          <div className={`zep-notification zep-notification--${variant}`}>
+            Notification {variant}
           </div>
         </div>
       ))}

diff --git a/src/elements/notification/_notification.scss b/src/elements/notification/_notification.scss
@@ -1,36 +1,39 @@
 // notification - base style
 
 @mixin notification {
+  $color-default: map-deep-get($guidelines, 'color', black, 60);
+  $variants: 'alert', 'info', 'success', 'warning';
+
   .#{$prefix}notification {
-    @extend %typo-normal-body1;
-    color: map-deep-get($guidelines, 'color', 'global', lightGray);
+    @extend .#{$prefix}typo--body-default;
+    color: $color-default;
     padding: 0.625rem 1.5rem;
     text-align: center;
-    border: 2px solid map-deep-get($guidelines, 'color', 'global', lightGray);
+    border: 0.125rem solid $color-default;
   }
 
-  .#{$prefix}notification--danger {
-    border: 2px solid map-deep-get($guidelines, 'color', 'support', 'alert');
-    background: map-deep-get($guidelines, 'color', 'support', 'alertLighter');
-    color: map-deep-get($guidelines, 'color', 'support', 'alert');
-  }
+  @each $variant in $variants {
+    $color: map-deep-get($guidelines, 'color', 'support', $variant);
 
-  .#{$prefix}notification--warning {
-    border: 2px solid map-deep-get($guidelines, 'color', 'support', 'warning');
-    background: map-deep-get($guidelines, 'color', 'support', 'warningLighter');
-    color: map-deep-get($guidelines, 'color', 'support', 'warning');
+    .#{$prefix}notification--#{$variant} {
+      background: map-deep-get(
+        $guidelines,
+        'color',
+        'support',
+        '#{$variant}Lighter'
+      );
+      border-color: $color;
+      color: $color;
+    }
   }
 
-  .#{$prefix}notification--success {
-    border: 2px solid map-deep-get($guidelines, 'color', 'support', 'success');
-    background: map-deep-get($guidelines, 'color', 'support', 'successLighter');
-    color: map-deep-get($guidelines, 'color', 'support', 'success');
-  }
+  @warn ".#{$prefix}notification--danger is deprecated and will be removed in future versions, please use .#{$prefix}notification--alert instead";
+  .#{$prefix}notification--danger {
+    $color: map-deep-get($guidelines, 'color', 'support', 'alert');
 
-  .#{$prefix}notification--info {
-    border: 2px solid map-deep-get($guidelines, 'color', 'support', 'info');
-    background: map-deep-get($guidelines, 'color', 'support', 'infoLighter');
-    color: map-deep-get($guidelines, 'color', 'support', 'info');
+    background: map-deep-get($guidelines, 'color', 'support', 'alertLighter');
+    border-color: $color;
+    color: $color;
   }
 }