Alert module

atst/ui_modules.py

@@ -1,5 +1,14 @@
 from tornado.web import UIModule
 
+class Alert(UIModule):
+    def render(self, title, message=None, actions=None, level='info'):
+        return self.render_string(
+          "components/alert.html.to",
+          title=title,
+          message=message,
+          actions=actions,
+          level=level)
+
 class Icon(UIModule):
     def render(self, name, classes=''):
         with open('static/icons/%s.svg' % name) as svg:

scss/atat.scss

@@ -18,6 +18,7 @@
 @import 'components/global_navigation';
 @import 'components/site_action';
 @import 'components/empty_state';
+@import 'components/alerts';
 
 @import 'sections/footer';
 @import 'sections/login';

scss/components/_alerts.scss

@@ -0,0 +1,75 @@
+/*
+ * Alerts
+ * @see https://designsystem.digital.gov/components/alerts/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
+ */
+
+@mixin alert {
+  padding: $gap * 2;
+  border-left-width: $gap / 2;
+  border-left-style: solid;
+  @include panel-margin;
+}
+
+@mixin alert-level($level) {
+  $background-color: $color-aqua-lightest;
+  $border-color: $color-blue;
+
+  @if $level == 'success' {
+    $background-color: $color-green-lightest;
+    $border-color: $color-green;
+
+  } @else if $level == 'warning' {
+    $background-color: $color-gold-lightest;
+    $border-color: $color-gold;
+
+  } @else if $level == 'error' {
+    $background-color: $color-red-lightest;
+    $border-color: $color-red;
+  }
+
+  background-color: $background-color;
+  border-color: $border-color;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+
+  .alert__icon {
+    @include icon-color($border-color);
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-right: $gap * 2;
+    margin-left: 0;
+  }
+
+  .alert__title {
+    @include h3;
+  }
+
+  .alert__content {
+    .alert__message {
+      &:last-child {
+        > *:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.alert {
+  @include alert;
+  @include alert-level('info');
+
+  &.alert--success {
+    @include alert-level('success');
+  }
+
+  &.alert--warning {
+    @include alert-level('warning');
+  }
+
+  &.alert--error {
+    @include alert-level('error');
+  }
+}

templates/components/alert.html.to

@@ -0,0 +1,35 @@
+{% set role = 'alertdialog' if actions else 'alert' %}
+{% set levels = {
+  'warning': {
+    'icon': 'alert',
+    'tone': 'assertive'
+  },
+  'error': {
+    'icon': 'alert',
+    'tone': 'assertive'
+  },
+  'info': {
+    'icon': 'info',
+    'tone': 'polite'
+  },
+  'success': {
+    'icon': 'ok',
+    'tone': 'polite'
+  }
+} %}
+
+<div class='alert alert--{{level}}' role='{{role}}' aria-live='{{levels.get(level).get('tone')}}'>
+  {% module Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') %}
+
+  <div class='alert__content'>
+    <h2 class='alert__title'>{{title}}</h2>
+
+    {% if message %}
+      <div class='alert__message'>{% raw message %}</div>
+    {% end %}
+
+    {% if actions %}
+      <div class='alert__actions'>{% raw actions %}</div>
+    {% end %}
+  </div>
+</div>