Use new icon set in alerts

thisisdano · thisisdano · commit 92c7be5bc54f · 2020-12-03T22:48:02.000-08:00
diff --git a/src/stylesheets/components/_alerts.scss b/src/stylesheets/components/_alerts.scss
@@ -1,27 +1,13 @@
 // Alert variables ---------- //
-// TODO: Custom alerts are effectively hidden and not well supported
-// Consider removing or rebuilding
-$usa-custom-alerts: () !default;
-$usa-custom-alerts-bar: () !default;
-
-$usa-alerts: (
-  success: "success-lighter",
-  warning: "warning-lighter",
-  error: "error-lighter",
-  info: "info-lighter",
-  emergency: "emergency",
-);
 
-$usa-alerts-bar: (
-  success: "success",
+$usa-alert-icons: (
+  success: "check_circle",
   warning: "warning",
   error: "error",
   info: "info",
-  emergency: "emergency-dark",
+  emergency: "warning",
 );
 
-$alerts: map-merge($usa-alerts, $usa-custom-alerts);
-$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
 $alert-padding-left: units($theme-alert-padding-x) +
   units($theme-alert-bar-width);
 
@@ -31,7 +17,7 @@ $alert-padding-left: units($theme-alert-padding-x) +
   background-color: color("base-lightest");
   background-position: $alert-padding-left units($theme-alert-padding-x);
   background-repeat: no-repeat;
-  background-size: units(4);
+  background-size: units(5);
   padding-bottom: units(2);
   padding-left: $alert-padding-left;
   padding-right: units($theme-alert-padding-x);
@@ -92,9 +78,9 @@ $alert-padding-left: units($theme-alert-padding-x) +
   padding-top: units(0.5);
 }
 
-@each $name, $bgcolor in $alerts {
+@each $name, $icon in $usa-alert-icons {
   .usa-alert--#{$name} {
-    @include alert-status-styles($name, $bgcolor);
+    @include alert-status-styles($name, $icon);
   }
 }
 
diff --git a/src/stylesheets/core/mixins/_alert-status-styles.scss b/src/stylesheets/core/mixins/_alert-status-styles.scss
@@ -1,11 +1,12 @@
-@mixin alert-status-styles($name, $bgcolor) {
-  @include add-background-svg("alerts/#{$name}");
-  background-color: color($bgcolor);
+@mixin alert-status-styles($name, $icon) {
+  @include add-background-svg("usa-icons/#{$icon}");
+  $bgcolor: if($name != "emergency", "#{$name}-lighter", $name);
   $banner-text-color-token: get-token-from-bg($bgcolor);
+  background-color: color($bgcolor);
   color: color($banner-text-color-token);
 
   &::before {
-    background-color: color(map-get($alerts-bar, $name));
+    background-color: color($name);
   }
 
   .usa-alert__body {
