💄(banner) add banner component

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

@@ -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
 

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`.

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';

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

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,