Merge pull request #542 from localgovdrupal/feature/1.x/526-new-region

Added subsites_menu region.

css/components/subsites-menu.css

@@ -0,0 +1,155 @@
+/**
+ * @file CSS for the subsites extras functionality.
+ */
+
+/*
+  The variables set here are defaults we can use for the subsites extras
+  features. We should have a good amount here, and their names should be
+  self-explanatory.
+
+  To use them, you can add more classes in your theme's CSS file, and set
+  your variables accordingly. You can see examples at the bottom of this file.
+
+  .subsite-extra--color-yellow {
+    --subsite-extra-color: yellow;
+    --subsite-extra-color-contrast: black;
+    --subsite-extra-region-bg-color: black;
+    --image-with-caption-bg-color: yellow;
+    --button-text-color: black;
+    --button-bg-color: yellow;
+    --button-border-color: black;
+  }
+
+  Remember, the .subsite-extra class is on the body element, so you can override
+  any variables that are set in variables.css (e.g. --color-accent).
+
+  Also, you can use this class to override any CSS for components on the page.
+  For example:
+  .subsite-extra--color-yellow .lgd-image--has-caption {
+    padding: var(--spacing-large);
+    background-color: yellow;
+    border: 0;
+  }
+*/
+
+.subsite-extra {
+  --subsite-extra-color: var(--color-accent);
+  --subsite-extra-color-contrast: var(--color-white);
+  --subsite-extra-link-color: var(--subsite-extra-color-contrast);
+  --subsite-extra-link-color-hover: var(--subsite-extra-color);
+  --subsite-extra-link-color-active-trail: var(--subsite-extra-color);
+  --subsite-extra-link-bg-color: var(--subsite-extra-color);
+  --subsite-extra-link-bg-color-hover: var(--subsite-extra-color-contrast);
+  --subsite-extra-menu-title-color: var(--subsite-extra-color);
+  --subsite-extra-region-bg-color: var(--color-white);
+  --subsite-extra-region-padding-horizontal: var(--spacing);
+  --subsite-extra-region-padding-vertical: var(--spacing);
+  --subsite-extra-menu-items-gap: var(--spacing);
+  --subsite-extra-menu-title-font-family: var(--font-primary);
+}
+
+/* This would be changed in the menu-subsites.css */
+.lgd-region--subsites-menu {
+  padding-block: var(--subsite-extra-region-padding-vertical);
+  padding-inline: var(--subsite-extra-region-padding-horizontal);
+  background-color: var(--subsite-extra-region-bg-color);
+}
+
+.lgd-region--subsites-menu .subsite-extra__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing);
+}
+
+@media screen and (min-width: 48rem) {
+  .lgd-region--subsites-menu .subsite-extra__header-toggle {
+    display: none;
+  }
+}
+
+.lgd-region--subsites-menu .subsite-extra__title {
+  margin-bottom: 0;
+}
+
+.lgd-region--subsites-menu .subsite-extra__title > a {
+  color: var(--subsite-extra-menu-title-color);
+  font-family: var(--subsite-extra-menu-title-font-family);
+}
+
+.lgd-region--subsites-menu .menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--subsite-extra-menu-items-gap);
+  margin-top: var(--spacing);
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.lgd-region--subsites-menu .menu.subsite-extra-menu {
+  display: none;
+}
+.lgd-region--subsites-menu .menu.subsite-extra-menu--active {
+  display: flex;
+}
+
+.lgd-region--subsites-menu .menu > .menu-item {
+  width: 100%;
+}
+
+@media screen and (min-width: 48rem) {
+  .lgd-region--subsites-menu .menu.subsite-extra-menu {
+    display: flex;
+  }
+  .lgd-region--subsites-menu .menu > .menu-item {
+    width: auto;
+  }
+}
+
+.lgd-region--subsites-menu .menu > .menu-item a {
+  display: block;
+  padding-inline: var(--spacing);
+  padding-block: var(--spacing);
+  color: var(--subsite-extra-link-color);
+  background-color: var(--subsite-extra-link-bg-color);
+}
+
+.lgd-region--subsites-menu .menu > .menu-item--active-trail a,
+.lgd-region--subsites-menu .menu > .menu-item a:focus,
+.lgd-region--subsites-menu .menu > .menu-item a:hover {
+  color: var(--subsite-extra-link-color-hover);
+  background-color: var(--subsite-extra-link-bg-color-hover);
+}
+
+/*
+  Set your custom colours.
+  The class comes from values in the field localgov_subsites_theme
+   - be sure to set an accessible contrast color.
+
+  Here are some samples (they won't work unless you have the field set up).
+*/
+.subsite-extra--color-yellow {
+  --subsite-extra-color: yellow;
+  --subsite-extra-color-contrast: black;
+  --subsite-extra-region-bg-color: black;
+  --image-with-caption-bg-color: yellow;
+  --button-text-color: black;
+  --button-bg-color: yellow;
+  --button-border-color: black;
+}
+
+.subsite-extra--color-hot_pink {
+  --subsite-extra-color: hotpink;
+  --subsite-extra-color-contrast: black;
+}
+
+.subsite-extra--color-cool_cucumber {
+  --subsite-extra-color: #01642b;
+  --subsite-extra-color-contrast: #8af670;
+}
+
+.subsite-extra--color-theme_b {
+  --subsite-extra-color: #000cb6;
+  --subsite-extra-color-contrast: var(--color-white);
+}

js/subsites-menu.js

@@ -0,0 +1,66 @@
+/**
+ * @file JS file for the subsites-menu component.
+ */
+
+(function subsitesMenuScript(Drupal) {
+  Drupal.behaviors.subsitesMenu = {
+    attach: function (context) {
+      // This variable will be used later to make sure that the window
+      // was actually resized.
+      let windowWidth = window.innerWidth;
+
+      const subsitesMenuToggle = document.querySelector(
+        ".subsite-extra__header-toggle-button"
+      );
+      const subsitesMenu = document.querySelector(".subsite-extra-menu");
+
+      subsitesMenuToggle.addEventListener("click", function () {
+        subsitesMenuToggle.setAttribute(
+          "aria-expanded",
+          subsitesMenuToggle.getAttribute("aria-expanded") === "true"
+            ? "false"
+            : "true"
+        );
+        subsitesMenu.classList.toggle("subsite-extra-menu--active");
+      });
+
+      function handleReset() {
+        subsitesMenuToggle.setAttribute("aria-expanded", "false");
+        subsitesMenu.classList.remove("subsite-extra-menu--active");
+      }
+
+      // If the window is resized to more than 768px, reset the menu.
+      function handleWindowResized() {
+        if (window.innerWidth === windowWidth) {
+          return;
+        } else {
+          windowWidth = window.innerWidth;
+        }
+        if (windowWidth > 768) {
+          handleReset();
+        }
+      }
+
+      // Close the menu when the escape key is pressed.
+      context.addEventListener("keydown", function (e) {
+        if (e.key == "Escape") {
+          e.preventDefault();
+          handleReset();
+          subsitesMenuToggle.focus();
+        }
+      });
+
+      // Close the menu when a click is made outside of it.
+      document.addEventListener("click", function (e) {
+        if (!e.target.closest("#lgd-header__nav--subsites-menu")) {
+          handleReset();
+        }
+      });
+
+      window.addEventListener(
+        "resize",
+        Drupal.debounce(handleWindowResized, 50, false)
+      );
+    },
+  };
+})(Drupal);

localgov_base.info.yml

@@ -15,6 +15,7 @@ regions:
   mobile_search: "Mobile search"
   primary_menu: "Primary menu"
   secondary_menu: "Secondary menu"
+  subsites_menu: "Subsites menu"
   banner: "Banner"
   breadcrumb: "Breadcrumb"
   messages: "Messages"

localgov_base.libraries.yml

@@ -291,6 +291,16 @@ embedded-views:
     theme:
       css/components/embedded-views.css: {}
 
+subsites-menu:
+  css:
+    theme:
+      css/components/subsites-menu.css: {}
+  js:
+    js/subsites-menu.js: {}
+  dependencies:
+    - core/drupal
+    - core/drupal.debounce
+
 localgov_eu_cookie_compliance:
   css:
     theme:

templates/block/block--system-menu-block.html.twig

@@ -40,7 +40,7 @@
   ]
 %}
 
-{# 
+{#
   We add libraries here for specific menus.
 #}
 {% if not localgov_base_remove_css %}
@@ -49,6 +49,7 @@
   {% endif %}
 {% endif %}
 
+
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
 <nav aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
   {# Label. If not displayed, we still provide it for screen readers. #}

templates/layout/header.html.twig

@@ -69,4 +69,9 @@
       </div>
     </div>
   </div>
+  {% if has_subsites_menu %}
+    <div id="lgd-header__nav--subsites-menu" class="lgd-header__nav lgd-header__nav--subsites-menu">
+      {{ page.subsites_menu }}
+    </div>
+  {% endif %}
 </header>

templates/layout/region.html.twig

@@ -21,36 +21,40 @@
   ]
 %}
 
-{# 
-  If we need to create a new template just to add a library to it, 
+{#
+  If we need to create a new template just to add a library to it,
   let's do that here instead. We could do this in hook_preprocess_region()
-  but I prefer to keep as much as I can in these templates so we don't 
+  but I prefer to keep as much as I can in these templates so we don't
   have to go hunting so much.
 #}
 {% if not localgov_base_remove_css %}
   {% if region == 'tabs' %}
     {{ attach_library('localgov_base/region-tabs') }}
-  {% endif %} 
+  {% endif %}
+
+  {% if region == 'subsites_menu' %}
+    {{ attach_library('localgov_base/subsites-menu') }}
+  {% endif %}
 
   {% if region == 'sidebar_first' or region == 'sidebar_second' %}
     {{ attach_library('localgov_base/sidebar') }}
   {% endif %}
 {% endif %}
 
-{# 
+{#
   Often if we need a custom region template, it's because that region
-  needs to be full-width. Let's (at least for now), create an 
+  needs to be full-width. Let's (at least for now), create an
   array of regions that might need that, and then not print the container
   class for those regions.
 
   If it comes to an issue later, we can easily create a region template
   for each of these.
 
   The reason the header regions are listed here is because we want them to
-  take up 100% of their container, rather than the screen. We will take care 
+  take up 100% of their container, rather than the screen. We will take care
   of their layout via CSS in the header.css file.
 #}
-{% 
+{%
   set full_width_regions = [
     'banner',
     'header',
@@ -60,22 +64,22 @@
     'sidebar_first',
     'sidebar_second',
     'content'
-  ] 
+  ]
 %}
 
 {% if content %}
   <div{{ attributes.addClass(classes) }}>
-    
+
     {% if region not in full_width_regions %}
       <div class="lgd-container padding-horizontal">
     {% endif %}
 
     <div class="lgd-region__inner lgd-region__inner--{{ region|clean_class }}">
       {{ content }}
     </div>
-    
+
     {% if region not in full_width_regions %}
-      </div> 
+      </div>
     {% endif %}
 
   </div>