Implement Pattern Library alerts in Discussions

TNL-5164

common/static/common/js/discussion/utils.js

@@ -252,33 +252,36 @@
         };
 
         DiscussionUtil.formErrorHandler = function(errorsField) {
-            return function(xhr, textStatus, error) {
-                var makeErrorElem, response, _i, _len, _ref, _results, $errorItem;
-                makeErrorElem = function(message) {
-                    return edx.HtmlUtils.setHtml(
-                        $('<li>').addClass('post-error'),
-                        message
+            return function(xhr) {
+                var makeErrorElem, response, i, $errorItem;
+                makeErrorElem = function(message, alertId) {
+                    return edx.HtmlUtils.joinHtml(
+                        edx.HtmlUtils.HTML('<li>'),
+                        edx.HtmlUtils.template(
+                            $('#new-post-alert-template').html()
+                        )({
+                            message: message,
+                            alertId: alertId
+                        }),
+                        edx.HtmlUtils.HTML('</li>')
                     );
                 };
                 errorsField.empty().show();
                 if (xhr.status === 400) {
                     response = JSON.parse(xhr.responseText);
                     if (response.errors) {
-                        _ref = response.errors;
-                        _results = [];
-                        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-                            error = _ref[_i];
-                            $errorItem = makeErrorElem(error);
-                            _results.push(errorsField.append($errorItem));
+                        for (i = 0; i < response.errors.length; i++) {
+                            $errorItem = makeErrorElem(response.errors[i], i);
+                            edx.HtmlUtils.append(errorsField, $errorItem);
                         }
-                        return _results;
                     }
                 } else {
-                    $errorItem = makeErrorElem(
-                        gettext('We had some trouble processing your request. Please try again.')
-                    );
-                    return errorsField.append($errorItem);
+                    $errorItem = makeErrorElem('We had some trouble processing your request. Please try again.', 0);
+                    edx.HtmlUtils.append(errorsField, $errorItem);
                 }
+
+                // Set focus on the first error displayed
+                $('div[role="alert"]', errorsField).first().focus();
             };
         };
 

common/static/common/js/spec/discussion/view/response_comment_view_spec.js

@@ -195,7 +195,7 @@
                     expect($.ajax.calls.mostRecent().args[0].data.body).toEqual(this.updatedBody);
                     expect(this.view.model.get('body')).toEqual(originalBody);
                     expect(this.view.cancelEdit).not.toHaveBeenCalled();
-                    return expect(this.view.$('.edit-comment-form-errors *').length).toEqual(1);
+                    return expect(this.view.$('.edit-comment-form-errors > *').length).toEqual(1);
                 });
             });
         });

common/static/common/js/spec_helpers/discussion_spec_helper.js

@@ -74,7 +74,7 @@
             templateNames = [
                 'thread', 'thread-show', 'thread-edit', 'thread-response', 'thread-response-show',
                 'thread-response-edit', 'response-comment-show', 'response-comment-edit', 'thread-list-item',
-                'discussion-home', 'search-alert', 'new-post', 'thread-type', 'new-post-menu-entry',
+                'discussion-home', 'search-alert', 'new-post', 'thread-type', 'new-post-menu-entry', 'new-post-alert',
                 'new-post-menu-category', 'topic', 'post-user-display', 'inline-discussion', 'pagination',
                 'profile-thread', 'customwmd-prompt', 'nav-loading'
             ];

common/static/common/templates/discussion/new-post-alert.underscore

+<div class="alert alert-error pattern-library-shim" role="alert" aria-labelledby="alert-title-error-<%- alertId %>" tabindex="-1">
+    <span class="icon alert-icon fa fa-warning" aria-hidden="true"></span>
+
+    <div class="alert-message">
+        <h3 class="sr-only alert-title" id="alert-title-error-<%- alertId %>">
+            <%- gettext("Error posting your message.") %>
+        </h3>
+
+        <p class="alert-copy">
+            <%- gettext(message) %>
+        </p>
+    </div>
+</div>

lms/static/sass/discussion/views/_create-edit-post.scss

@@ -11,6 +11,11 @@
   padding: $baseline;
   max-width: 1180px;
 
+  .post-errors {
+    padding: 0 !important;
+    list-style: none !important;
+  }
+
   .post-field {
     margin-bottom: $baseline;
 
@@ -183,23 +188,9 @@
 .forum-new-post-form,
 .edit-post-form {
   .post-errors {
-    margin-bottom: $baseline;
-    border-radius: $forum-border-radius;
     padding: 0;
-    background: $error-color;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, .2);
-    color: $white;
+    margin: 0 0 $baseline 0;
     list-style: none;
-
-    .post-error {
-      padding: ($baseline/2) $baseline 12px 45px;
-      border-bottom: 1px solid $forum-color-error;
-      background: url('#{$static-path}/images/white-error-icon.png') no-repeat 15px 14px;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
   }
 }
 

lms/static/sass/shared/_alerts_pattern_library_shim.scss

@@ -19,38 +19,49 @@
 // #CONFIG
 // ----------------------------
 
-// alert colors
-$alert-information-color: #6fa0ba;
-$alert-warning-color: #fdbc56;
-$alert-error-color: #b20610;
-$alert-success-color: #25b85a;
-$alert-background-color: #fcfcfc;
-$alert-icon-color: #fcfcfc;
-$alert-border-grey: #cdd7db;
-$alert-shadow-grey: #eef1f2;
-
-// alert borders
-$alert-border-radius: 0.3125rem;
-$alert-border: 0.0625rem solid $alert-border-grey;
+// Overrides for other things available in the UXPL but not here
+// This is super gross. Don't do this in other places if you can avoid it.
+$palette-brand-accent: #2991c3;
+$palette-brand-back: #cce3f0;
+$palette-warning-accent: #ffc01f;
+$palette-warning-back: #fff9eb;
+$palette-error-accent: #cb0712;
+$palette-error-back: #feeced;
+$palette-success-accent: #009b00;
+$palette-success-back: #ecfaec;
+$palette-grey-accent: #a0a0a0;
+$palette-grey-back: #d9d9d9;
+$spacing-vertical-xx-small: ($baseline / 4);
+$spacing-vertical-x-small: ($baseline / 2);
+$spacing-vertical-small: $baseline;
+$spacing-horizontal-small: ($baseline / 2);
+$spacing-horizontal-base: $baseline;
+$font-size-small: 14px;
+$bp-screen-md: 768px !default;
 
 // ----------------------------
 // #UTILITIES
 // ----------------------------
-@mixin alert($alert-color) {
-    border-top:  rem(2) solid $alert-color;
+@mixin alert($shim-alert-color, $shim-alert-color-glow) {
+    border: 1px solid $shim-alert-color;
+    box-shadow: inset 0 0 0 4px $shim-alert-color-glow;
 
     .alert-icon {
-        color: $alert-icon-color;
-        background-color: $alert-color;
+        color: $white;
+        background-color: $shim-alert-color;
     }
 }
 
 @mixin alert-message($width) {
+    box-sizing: border-box;
+
+    @media (min-width: $bp-screen-md) {
         @include float(left);
         width: $width;
-    padding: 1.25rem;
+        padding: $spacing-vertical-small;
         padding-top: 0;
         padding-bottom: 0;
+    }
 
     :last-child {
         // keeps the message compact
@@ -60,23 +71,53 @@ $alert-border: 0.0625rem solid $alert-border-grey;
 
 // everything below here gets added specificity pattern-library-shim
 .pattern-library-shim {
-
     // ----------------------------
     // #GENERAL
     // ----------------------------
-
     &.alert {
-        background-color: $alert-background-color;
-        border: $alert-border;
-        border-radius: $alert-border-radius;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        padding: 1.25rem;
+        background-color: $white;
+        border: 1px solid $palette-grey-accent;
+        padding: $spacing-vertical-small $spacing-horizontal-base;
+        box-shadow: inset 0 0 0 4px $palette-grey-back;
         overflow: auto;
-        box-shadow: 0 rem(2) rem(2) 0 $alert-shadow-grey;
+
+        &.alert-slim {
+            padding: $spacing-vertical-x-small;
+
+            .alert-message {
+                padding: $spacing-vertical-small $spacing-horizontal-base;
+                font-size: $font-size-small;
+
+                .copy {
+                    margin-bottom: 0;
                 }
+            }
+        }
+
+        &.alert-tiny {
+            padding: $spacing-vertical-x-small;
+
+            .alert-message {
+                padding: $spacing-vertical-x-small $spacing-horizontal-small;
+                font-size: $font-size-small;
 
-    &.alert-icon {
+                .copy {
+                    margin-bottom: 0;
+
+                    .icon {
+                        display: inline-block;
+                        margin-right: $baseline;
+                    }
+                }
+            }
+        }
+    }
+
+    .alert-icon {
+        // hide icons on small screens
+        display: none;
+
+        @media (min-width: $bp-screen-md) {
             @include float(left);
             display: block;
 
@@ -84,42 +125,51 @@ $alert-border: 0.0625rem solid $alert-border-grey;
             border-radius: 50%;
 
             // create room around the icon for the circle
-        padding: 0.625rem;
+            padding: $spacing-vertical-x-small;
+        }
     }
 
-    &.alert-message-with-action {
+    .alert-message-with-action {
         // provide room for the action to be displayed next to the alert message
         @include alert-message(70%);
     }
 
-    &.alert-message {
+    .alert-message {
         @include alert-message(90%);
     }
 
-    &.alert-title {
+    .alert-title {
         @extend %hd-5;
         @extend %headings-emphasized;
 
+        @media (min-width: $bp-screen-md) {
             // shift the section up to make the alert more compact
-        margin-top: -0.625rem;
+            margin-top: - $spacing-vertical-x-small;
+        }
 
     }
 
-    &.alert-copy {
+    .alert-copy {
         @extend %copy-base;
 
+        @media (min-width: $bp-screen-md) {
             // shift the message down to be in line with the icon
-        margin-top: 0.3125rem;
+            margin-top: $spacing-vertical-xx-small;
+        }
     }
 
-    &.alert-copy-with-title {
+    .alert-copy-with-title {
         @extend %copy-base;
     }
 
-    &.alert-action {
+    .alert-action {
+        width: 100%;
+
+        @media (min-width: $bp-screen-md) {
             @include float(right);
             width: inherit;
         }
+    }
 
     // ----------------------------
     // #INDIVIDUAL CASES
@@ -127,46 +177,21 @@ $alert-border: 0.0625rem solid $alert-border-grey;
 
     // information-based alert
     &.alert-information {
-        @include alert($alert-information-color);
+        @include alert($palette-brand-accent, $palette-brand-back);
     }
 
     // warning-based alert
     &.alert-warning {
-        @include alert($alert-warning-color);
+        @include alert($palette-warning-accent, $palette-warning-back);
     }
 
     // error-based alert
     &.alert-error {
-        @include alert($alert-error-color);
+        @include alert($palette-error-accent, $palette-error-back);
     }
 
     // success-based alert
     &.alert-success {
-        @include alert($alert-success-color);
-    }
-
-    // added from _icons.scss
-    &.icon {
-        display: inline-block;
-        height: auto;
-        width: auto;
-        font-family: FontAwesome;
-        speak: none;
-        font-style: normal;
-        font-weight: normal;
-        font-variant: normal;
-        text-transform: none;
-        line-height: 1;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-    &.icon-bullhorn:before {
-        content: "\f0a1";
-    }
-
-    // handles negative margin on navigation bar
-    &.subsection-header {
-        margin-top: -4px;
-        margin-bottom: 14px;
+        @include alert($palette-success-accent, $palette-success-back);
     }
 }

lms/templates/discussion/_underscore_templates.html

@@ -15,8 +15,8 @@
 template_names = [
     'thread', 'thread-show', 'thread-edit', 'thread-response', 'thread-response-show', 'thread-response-edit',
     'response-comment-show', 'response-comment-edit', 'thread-list-item', 'discussion-home', 'search-alert',
-    'new-post', 'thread-type', 'new-post-menu-entry', 'new-post-menu-category', 'topic', 'post-user-display',
-    'inline-discussion', 'pagination', 'profile-thread', 'customwmd-prompt', 'nav-loading'
+    'new-post', 'new-post-menu-entry', 'new-post-menu-category', 'new-post-alert', 'topic', 'post-user-display',
+    'inline-discussion', 'pagination', 'profile-thread', 'customwmd-prompt', 'nav-loading', 'thread-type'
 ]
 
 ## same, but without trailing "-template" in script ID - these templates does not contain any free variables