From 37e79952570fa5fac41d0bfa9e69850a7c644916 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Fri, 12 Feb 2021 19:16:29 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(banner)=20add=20banner=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a banner component which can have 4 states (error, warning, success and
info). This component aims to display brief messages to confirm action or alert
the user.
---
 CHANGELOG.md                            |  1 +
 UPGRADE.md                              |  7 +++++
 src/frontend/scss/_main.scss            |  1 +
 src/frontend/scss/objects/_banner.scss  | 42 +++++++++++++++++++++++++
 src/frontend/scss/settings/_colors.scss | 38 ++++++++++++----------
 5 files changed, 73 insertions(+), 16 deletions(-)
 create mode 100644 src/frontend/scss/objects/_banner.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6439c84b40..3c690566d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 - Add new state for courses archived yet open for enrollment and position them
   well in search results
+- Add a banner component to display brief messages to the user
 
 ### Fixed
 
diff --git a/UPGRADE.md b/UPGRADE.md
index 98f3dcd394..78f0358382 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -16,7 +16,13 @@ $ make migrate
 
 ## Unreleased
 
+## 2.1.x to 2.2.x
+
+- A css `.banner` component has been created. You may have to import the component style
+  `objects/_banner.scss` into your main stylesheet to be able to use it.
+
 ## 2.0.x to 2.1.x
+
 - `RICHIE_AUTHENTICATION_DELEGATION["PROFILE_URLS"]` setting is now a dictionary : a key has been
   added to each url, permitting to get one easily.
 - Richie has now its own error templates. You can use them by setting `handler400`, `handler403`,
@@ -32,6 +38,7 @@ $ make migrate
     ```
 
 ## 1.17.x to 2.0.x
+
 - Richie version 2 introduces a new `AUTHENTICATION_BACKEND` setting used to get session information
   from OpenEdX through CORS requests. So login, register and logout routes are constructed from
   the BASE_URL of this setting. Furthermore it takes an extra property `PROFILE_URLS`.
diff --git a/src/frontend/scss/_main.scss b/src/frontend/scss/_main.scss
index f4463f829e..a81dafb005 100644
--- a/src/frontend/scss/_main.scss
+++ b/src/frontend/scss/_main.scss
@@ -54,6 +54,7 @@
 @import './generic/icons';
 
 // Shared object styles
+@import './objects/banner';
 @import './objects/breadcrumbs';
 @import './objects/course_glimpses';
 @import './objects/blogpost_glimpses';
diff --git a/src/frontend/scss/objects/_banner.scss b/src/frontend/scss/objects/_banner.scss
new file mode 100644
index 0000000000..a0de3b6bcd
--- /dev/null
+++ b/src/frontend/scss/objects/_banner.scss
@@ -0,0 +1,42 @@
+// Banner
+//
+// A Row to display an inlined message
+
+.banner {
+  @include make-container();
+  @include make-container-max-widths();
+  display: flex;
+  padding: 1.4rem 1rem;
+  margin: 1rem auto;
+
+  &--error {
+    @include r-scheme-colors(r-theme-val(banner, error));
+  }
+
+  &--success {
+    @include r-scheme-colors(r-theme-val(banner, success));
+  }
+
+  &--info {
+    @include r-scheme-colors(r-theme-val(banner, info));
+  }
+
+  &--warning {
+    @include r-scheme-colors(r-theme-val(banner, warning));
+  }
+
+  &--rounded {
+    border-radius: 6px;
+  }
+
+  &__icon {
+    height: 1rem;
+    margin-right: 1rem;
+    width: 1rem;
+  }
+
+  &__message {
+    font-size: 1em;
+    margin-bottom: 0;
+  }
+}
diff --git a/src/frontend/scss/settings/_colors.scss b/src/frontend/scss/settings/_colors.scss
index 1bb2a63efc..b68812cb1b 100644
--- a/src/frontend/scss/settings/_colors.scss
+++ b/src/frontend/scss/settings/_colors.scss
@@ -184,24 +184,30 @@ $white-mask-gradient-scheme: (
 // Theme schemes
 $r-theme: (
   // Used from styleguide to build available scheme to demonstrate, used to create button variant
-  base-schemes:
+  banner:
     (
-      primary: $firebrick6-scheme,
-      secondary: $indianred3-scheme,
-      tertiary: $smoke-scheme,
-      clear: $white-scheme,
-      light: $light-grey-scheme,
-      lightest: $azure2,
-      neutral-gradient: $neutral-gradient-scheme,
-      middle-gradient: $middle-gradient-scheme,
-      dark-gradient: $dark-gradient-scheme,
-      white-mask-gradient: $white-mask-gradient-scheme,
-      transparent-darkest: $transparent-dark-scheme,
-      clouds: $clouds-scheme,
-      waves: $waves-scheme,
-      purplish-grey: $purplish-grey-scheme,
-      battleship-grey: $battleship-grey-scheme,
+      error: $firebrick6-scheme,
+      warning: $indianred3-scheme,
+      success: $azure2,
+      info: $battleship-grey-scheme,
     ),
+  base-schemes: (
+    primary: $firebrick6-scheme,
+    secondary: $indianred3-scheme,
+    tertiary: $smoke-scheme,
+    clear: $white-scheme,
+    light: $light-grey-scheme,
+    lightest: $azure2,
+    neutral-gradient: $neutral-gradient-scheme,
+    middle-gradient: $middle-gradient-scheme,
+    dark-gradient: $dark-gradient-scheme,
+    white-mask-gradient: $white-mask-gradient-scheme,
+    transparent-darkest: $transparent-dark-scheme,
+    clouds: $clouds-scheme,
+    waves: $waves-scheme,
+    purplish-grey: $purplish-grey-scheme,
+    battleship-grey: $battleship-grey-scheme,
+  ),
   base-gradients: (
     neutral-gradient: $neutral-gradient,
     middle-gradient: $middle-gradient,