2.0.2 release

config/install/localgov_base.settings.yml

@@ -7,3 +7,4 @@ localgov_base_header_behaviour: 'default'
 localgov_base_localgov_guides_stacked_heading: FALSE
 localgov_base_localgov_guides_vertical_navigation: TRUE
 localgov_base_mobile_breakpoint_js: '768'
+localgov_base_responsive_wysiwyg_tables: TRUE

config/schema/localgov_base.schema.yml

@@ -36,3 +36,8 @@ localgov_base.settings:
       label: 'Mobile breakpoint for JS'
       description: 'The mobile breakpoint for JS. This is used to determine when to apply mobile styles.'
       default_value: '768'
+    localgov_base_responsive_wysiwyg_tables:
+      type: boolean
+      label: 'Responsive WYSIWYG tables'
+      description: 'Choose whether to make WYSIWYG tables responsive or not.'
+      default_value: TRUE

css/components/responsive-tables.css

@@ -0,0 +1,3 @@
+.lgd-responsive-table {
+  overflow-y: auto;
+}

js/responsive-tables.js

@@ -0,0 +1,35 @@
+/**
+ * @file JS file for the responsive tables component.
+ */
+
+(function responsiveTablesScript(Drupal, once) {
+  Drupal.behaviors.responsiveTables = {
+    attach(context) {
+      const tables = [];
+      const tablesInTextWithSummaryFields = once(
+        'allResponsiveTables',
+        '.field--type-text-with-summary table',
+        context,
+      );
+      const tablesInTextLongFields = once(
+        'responsiveTables',
+        '.field--type-text-long table',
+        context,
+      );
+
+      // Push all tables into the tables array.
+      tables.push(...tablesInTextWithSummaryFields);
+      tables.push(...tablesInTextLongFields);
+      tables.forEach((table) => {
+        // Clone the table to avoid modifying the original.
+        const clonedTable = table.cloneNode(true);
+        // Add a div around the cloned table.
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('lgd-responsive-table');
+        wrapper.appendChild(clonedTable);
+        // Replace the original table with the wrapper.
+        table.parentNode.replaceChild(wrapper, table);
+      });
+    },
+  };
+})(Drupal, once);

js/subsites-menu.js

@@ -11,10 +11,12 @@
 
       const { mobileBreakpointJS } = drupalSettings.localgov_base;
 
-      const subsitesMenuToggle = document.querySelector(
-        '.subsite-extra__header-toggle-button',
-      );
-      const subsitesMenu = document.querySelector('.subsite-extra-menu');
+      const [subsitesMenuToggle] = once('allSubsitesMenuToggles', '.subsite-extra__header-toggle-button', context);
+      const [subsitesMenu] = once('allSubsitesMenuToggles', '.subsite-extra-menu', context);
+
+      if (!subsitesMenuToggle || !subsitesMenu) {
+        return;
+      }
 
       subsitesMenuToggle.addEventListener('click', () => {
         subsitesMenuToggle.setAttribute(
@@ -54,7 +56,7 @@
       });
 
       // Close the menu when a click is made outside of it.
-      document.addEventListener('click', (e) => {
+      context.addEventListener('click', (e) => {
         if (!e.target.closest('#lgd-header__nav--subsites-menu')) {
           handleReset();
         }

localgov_base.libraries.yml

@@ -365,9 +365,17 @@ accordion:
     theme:
       css/components/accordion.css: {}
 
+responsive-tables:
+  css:
+    theme:
+      css/components/responsive-tables.css: {}
+  js:
+    js/responsive-tables.js: {}
+
 images:
   js:
     js/images.js: {}
+
   dependencies:
     - core/drupal
     - core/once

localgov_base.theme

@@ -99,6 +99,13 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa
     ],
   ];
 
+  $form['localgov_base_responsive_wysiwyg_tables'] = [
+    '#type'          => 'checkbox',
+    '#title'         => t('Make WYSIWYG tables responsive.'),
+    '#description'   => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'),
+    '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE,
+  ];
+
   $form['#validate'][] = 'localgov_base_theme_settings_validate';
 }
 
@@ -147,6 +154,13 @@ function localgov_base_preprocess_html(&$variables): void {
       }
     }
   }
+
+  // Add the 'localgov_base_responsive_wysiwyg_tables' value to drupalSettings.
+  if (!empty(theme_get_setting('localgov_base_responsive_wysiwyg_tables'))) {
+    if (theme_get_setting('localgov_base_responsive_wysiwyg_tables') === TRUE || 1) {
+      $variables['#attached']['library'][] = 'localgov_base/responsive-tables';
+    }
+  }
 }
 
 /**