Migrate /base to use @use (#10896) (#15973)

* Migrate /base to use @use (#10896)

NOTE: when a module is already loaded, it can not later be loaded
with configuration

* Removed outdated and used banner base includes

* Remove Monitor Plus banner

The original usage was removed almost a year ago in PR #14552.
We kept the banner code around in case it needed to be re-used but
it seems safe to clean at this time

* Fix docs link

* Remove unused basic banner includes

* Update banner docs

Author: maureenlholland

bedrock/base/templates/includes/banners/base.html

@@ -71,7 +71,7 @@ Traffic Cop
 
 Create a .js file where you initialize Traffic Cop and include that in the
 experiments block in the template that will be doing the redirection. Wrap the
-extra js include in a `switch <http://bedrock.readthedocs.io/en/latest/install.html#feature-flipping-aka-switches>`_.
+extra js include in a `switch <http://bedrock.readthedocs.io/en/latest/install.html#feature-flipping-aka-switches-or-waffle-switches>`_.
 
 .. code-block:: jinja
 

bedrock/base/templates/includes/banners/monitor-plus.html

@@ -26,26 +26,24 @@ block. Banners can also be toggled on and off using a switch:
       {% endif %}
     {% endblock %}
 
-Banner templates should extend the *base banner template*, and content can
-then be inserted using ``banner_title`` and  ``banner_content`` blocks:
+Banner templates should extend the *basic banner template*, which provides very
+unopinionated structure but includes several helpful features such as a close
+button with localized text and exclusion of banner content from search result
+snippets.
+
+Custom banner content can then be inserted using ``banner_title`` and ``banner_content``
+blocks:
 
 .. code-block:: jinja
 
-    {% extends 'includes/banners/base.html' %}
+    {% extends 'includes/banners/basic.html' %}
 
     {% block banner_title %}We all love the web. Join Mozilla in defending it.{% endblock %}
 
     {% block banner_content %}
         <!-- insert custom HTML here -->
     {% endblock %}
 
-CSS styles for banners should be located in ``media/css/base/banners/``, and
-should extend common base banner styles:
-
-.. code-block:: css
-
-    @import 'includes/base';
-
 To initiate a banner on a page, include ``js/base/banners/mozilla-banner.js`` in
 your page bundle and then initiate the banner using a unique ID. The ID will
 be used as a cookie identifier should someone dismiss a banner and not wish to

bedrock/mozorg/templates/mozorg/home/includes/monitor-mid-banner.html

@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
 
 #firefox-app-store-banner {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

docs/abtest.rst

@@ -2,10 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
 
 .page-header {
     .mzp-l-content {

docs/banners.rst

@@ -207,12 +207,6 @@
       ],
       "name": "fundraising-banner"
     },
-    {
-      "files": [
-        "css/mozorg/home/includes/monitor-banner.scss"
-      ],
-      "name": "monitor-banner"
-    },
     {
       "files": [
         "css/base/banners/firefox-newsletter.scss"
@@ -1843,12 +1837,6 @@
       ],
       "name": "firefox-nothing-personal"
     },
-    {
-      "files": [
-        "js/mozorg/home/monitor-banner.es6.js"
-      ],
-      "name": "monitor-banner"
-    },
     {
       "files": [
         "js/m24/animation-play-state.es6.js"