diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 77671339..78f9e5ca 100644 --- a/atst/ui_modules.py +++ b/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: diff --git a/scss/atat.scss b/scss/atat.scss index bc0fc120..082fbab2 100644 --- a/scss/atat.scss +++ b/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'; \ No newline at end of file +@import 'sections/login'; +@import 'sections/progress_menu.scss'; diff --git a/scss/components/_alerts.scss b/scss/components/_alerts.scss new file mode 100644 index 00000000..a0030547 --- /dev/null +++ b/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'); + } +} diff --git a/scss/elements/_icons.scss b/scss/elements/_icons.scss index 0379154d..34b35a8c 100644 --- a/scss/elements/_icons.scss +++ b/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); + } } diff --git a/scss/elements/_sidenav.scss b/scss/elements/_sidenav.scss index 7fa92cf6..6f94f6ca 100644 --- a/scss/elements/_sidenav.scss +++ b/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; diff --git a/templates/components/alert.html.to b/templates/components/alert.html.to new file mode 100644 index 00000000..05cac613 --- /dev/null +++ b/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' + } +} %} + +
+ {% module Icon(levels.get(level).get('icon'), classes='alert__icon icon--large') %} + +
+

{{title}}

+ + {% if message %} +
{% raw message %}
+ {% end %} + + {% if actions %} +
{% raw actions %}
+ {% end %} +
+
diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 739c7151..38c042b2 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -1,6 +1,30 @@ {% extends "base.html.to" %} -{% block sidenav %} +{% block content %} + +{% module Alert('A Warning Alert', + message="\ +

This is a message. It is a very important message. Please note, proper semantic markup is required here, such as paragraph tags. Don't omit paragraph tags!

\ +

Also note the same for actions below. You'll need to include the full link markup.

\ + ", + actions="Do something", + level='warning' +) %} + +{% module Alert('A Success Alert', + message="

Congratulations! You did a thing.

", + level='success' +) %} + +{% module Alert('An Error Alert', + message="

Booooo. You're the worst.

", + level='error' +) %} + +{% module Alert('An Info Alert', + message="

The more you know.

" +) %} + -{% end %} - -{% block content %}