From 502fc16f8242a1bac936fc4924fe4ba41a18203c Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 20 Jul 2018 15:15:30 -0400 Subject: [PATCH 1/5] Alert module --- atst/ui_modules.py | 9 ++++ scss/atat.scss | 1 + scss/components/_alerts.scss | 75 ++++++++++++++++++++++++++++++ templates/components/alert.html.to | 35 ++++++++++++++ 4 files changed, 120 insertions(+) create mode 100644 scss/components/_alerts.scss create mode 100644 templates/components/alert.html.to 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..5c42eb7e 100644 --- a/scss/atat.scss +++ b/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'; \ No newline at end of file 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/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 %} +
+
From 3ae969271ae362ffac76de11ed4077c90ef9c493 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 20 Jul 2018 15:15:40 -0400 Subject: [PATCH 2/5] Add alert samples to styleguide --- templates/styleguide.html.to | 29 +++++++++++++++++++++++++---- 1 file changed, 25 insertions(+), 4 deletions(-) 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 %}
From 0b2d99addcdcac703d875639cb3badea320eb58a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 20 Jul 2018 15:15:57 -0400 Subject: [PATCH 3/5] Some more icon stuff --- scss/elements/_icons.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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); + } } From 68297ad222bd9d43d6eecfa19ec392da7567ced0 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 20 Jul 2018 15:16:11 -0400 Subject: [PATCH 4/5] Use gap for border width --- scss/elements/_sidenav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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; From 9a6a7cfe702b2a775436b91490f30fa68c6590c5 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 20 Jul 2018 15:19:50 -0400 Subject: [PATCH 5/5] Add import for progress menu --- scss/atat.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/atat.scss b/scss/atat.scss index 5c42eb7e..082fbab2 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -21,4 +21,5 @@ @import 'components/alerts'; @import 'sections/footer'; -@import 'sections/login'; \ No newline at end of file +@import 'sections/login'; +@import 'sections/progress_menu.scss';