Merge pull request #86 from dod-ccpo/ui/alerts

Ui/alerts

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,8 @@
 @import 'components/global_navigation';
 @import 'components/site_action';
 @import 'components/empty_state';
+@import 'components/alerts';
 
 @import 'sections/footer';
 @import 'sections/login';
+@import 'sections/progress_menu.scss';

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');
+  }
+}

scss/elements/_icons.scss

@@ -17,16 +17,18 @@
   margin: $icon-size / 4;
 }
 
-@mixin icon-style-default {
+@mixin icon-color($color) {
   > svg * {
-    fill: $color-black;
+    fill: $color;
   }
 }
 
+@mixin icon-style-default {
+  @include icon-color($color-black);
+}
+
 @mixin icon-style-active {
-  > svg * {
-    fill: $color-primary;
-  }
+  @include icon-color($color-primary);
 }
 
 @mixin icon-style-inverted {
@@ -43,4 +45,8 @@
   &.icon--tiny {
     @include icon-size(10);
   }
+
+  &.icon--large {
+    @include icon-size(24);
+  }
 }

scss/elements/_sidenav.scss

@@ -31,7 +31,7 @@
       @include h4;
       background-color: $color-white;
       color: $color-primary;
-      box-shadow: inset .4rem 0 0 0 $color-primary;
+      box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
 
       .sidenav__link-icon {
         @include icon-style-active;

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>

templates/styleguide.html.to

@@ -1,6 +1,30 @@
 {% extends "base.html.to" %}
 
-{% block sidenav %}
+{% block content %}
+
+{% module Alert('A Warning Alert',
+  message="\
+    <p>This is a message. It is a very important message. Please note, <strong>proper semantic markup is required</strong> here, such as paragraph tags. Don't omit paragraph tags!</p>\
+    <p>Also note the same for actions below. You'll need to include the full link markup.</p>\
+  ",
+  actions="<a href='/styleguide'>Do something</a>",
+  level='warning'
+) %}
+
+{% module Alert('A Success Alert',
+  message="<p>Congratulations! You did a thing.</p>",
+  level='success'
+) %}
+
+{% module Alert('An Error Alert',
+  message="<p>Booooo. You're the worst.</p>",
+  level='error'
+) %}
+
+{% module Alert('An Info Alert',
+  message="<p>The more you know.</p>"
+) %}
+
 <nav class='sidenav'>
   <ul>
     <li>
@@ -21,9 +45,6 @@
     <li><a href='/' class='sidenav__link sidenav__link--disabled' aria-disabled='true'>Navigation Item</a></li>
   </ul>
 </nav>
-{% end %}
-
-{% block content %}
 
 <div class='col col--grow'>