UHF-10239: Fixed conflicts

src/js/tabs.js

@@ -1,5 +1,9 @@
 // eslint-disable-next-line func-names
 (function ($, drupalSettings) {
+  // Module-level variables to store active tab state
+  let activeTabId = null;
+  let activeContentId = null;
+
   // Helper function to hide all tabbed content.
   function hideEverything(tabbedContent) {
     const allTabs = tabbedContent.querySelectorAll('.tab');
@@ -15,7 +19,8 @@
   function toggleTabs(tab) {
     const tabParent = tab.closest('[data-drupal-selector="tabbed-content"]');
     const tabsContentId = tab.getAttribute('aria-controls');
-    const tabsContent = document.querySelector(`[data-drupal-selector=${tabsContentId}]`);
+    if (!tabsContentId) return;
+    const tabsContent = document.querySelector(`[data-drupal-selector="${tabsContentId}"]`);
 
     // First hide all tabs.
     hideEverything(tabParent);
@@ -27,24 +32,29 @@
     // Refresh the map view by submitting the search/filter form.
     if (tabsContentId.startsWith('tab-2')) {
       const filterForm = $('[id^=views-exposed-form-high-school-search-block]');
-      $('.form-submit', filterForm).trigger('click');
+      if (filterForm.length) {
+        $('.form-submit', filterForm).trigger('click');
+      }
     }
   }
 
-  // Save the active tab and its content to session storage.
-  function addToActiveTabStorage(activeTab) {
+  // Save the active tab and its content to variables
+  function updateActiveTab(activeTab) {
     const tabId = activeTab.dataset.drupalSelector;
     const contentId = activeTab.getAttribute('aria-controls');
 
     if (tabId && contentId) {
-      window.sessionStorage.setItem('activeTab', tabId);
-      window.sessionStorage.setItem('activeContent', contentId);
+      activeTabId = tabId;
+      activeContentId = contentId;
     }
   }
 
   function initiateTabs(activeTab, activeContent) {
     const containers = document.querySelectorAll('[data-drupal-selector="tabbed-content"]');
 
+    // Guard clause if no containers found
+    if (!containers.length) return;
+
     // Loop through tabbed content containers.
     for (let i = 0; i < containers.length; i++) {
       const instance = containers[i];
@@ -58,8 +68,14 @@
       }
 
       // Find the active tab elements.
-      const activeTabElement = document.querySelector(`[data-drupal-selector=${activeTab}]`);
-      const activeContentElement = document.querySelector(`[data-drupal-selector=${activeContent}]`);
+      const activeTabElement = document.querySelector(`[data-drupal-selector="${activeTab}"]`);
+      const activeContentElement = document.querySelector(`[data-drupal-selector="${activeContent}"]`);
+
+      // Guard clause if elements not found
+      if (!activeTabElement || !activeContentElement) {
+        console.warn('Tab elements not found:', { activeTab, activeContent });
+        return;
+      }
 
       // Set them active with aria-attributes.
       activeTabElement.setAttribute('aria-selected', 'true');
@@ -74,12 +90,12 @@
         tab.addEventListener('click', function onTabClick() {
           // Toggle function.
           toggleTabs(this);
-          addToActiveTabStorage(this);
+          updateActiveTab(this);
         });
         tab.addEventListener('keydown', function onTabEnter(event) {
           if (event.which === 13) {
             toggleTabs(this);
-            addToActiveTabStorage(this);
+            updateActiveTab(this);
           }
         });
       }
@@ -89,18 +105,16 @@
   // Run after each ajax submit on the element that has tabs.
   $(document).ajaxComplete(function onDataLoaded(e, xhr, settings) {
     if (settings.extraData.view_name === drupalSettings.tabsParent) {
-      const activeTab = window.sessionStorage.getItem('activeTab');
-      const activeContent = window.sessionStorage.getItem('activeContent');
-      initiateTabs(activeTab, activeContent);
+      initiateTabs(activeTabId, activeContentId);
     }
   });
 
   // Run after page is ready.
   // eslint-disable-next-line func-names
   $(document).ready(function () {
-    // Clear the session storage on page reload.
-    window.sessionStorage.removeItem('activeTab');
-    window.sessionStorage.removeItem('activeContent');
+    // Reset the active tab variables
+    activeTabId = null;
+    activeContentId = null;
     initiateTabs();
   });
 })(jQuery, drupalSettings);

src/scss/06_components/forms/__index.scss

@@ -6,3 +6,4 @@
 @import 'react-forms';
 @import 'select';
 @import 'text-input';
+@import 'tfa-form';

src/scss/06_components/forms/_tfa-form.scss

@@ -0,0 +1,10 @@
+.tfa-entry-form {
+  max-width: $content-width-max;
+
+  .form-actions input {
+    margin-bottom: $spacing-double;
+    margin-top: $spacing;
+    max-width: 280px;
+    width: 100%;
+  }
+}

src/scss/06_components/layout/_component.scss

@@ -7,7 +7,8 @@
 // When components are full width and do not contain liftup-with-img-bg or content-cards,
 // they should have padding that keeps them from touching side.
 .components--lower > .component:not(.component--liftup-with-image-bg, .component--content-cards-grey),
-.page-type--landing-page.no-sidebar .components--upper > .component:not(.component--liftup-with-image-bg, .component--content-cards-grey) {
+.page-type--landing-page.no-sidebar .components--upper > .component:not(.component--liftup-with-image-bg, .component--content-cards-grey),
+.components--computed > .component {
   @include component-side-padding;
 }
 
@@ -83,7 +84,7 @@
 
 // Components on other pages than landing-page
 // need to be limited to content max-width to maintain readability.
-:not(.page-type--landing-page).wrapper .components:not(.components--lower) {
+.wrapper:not(.page-type--landing-page) .components:not(.components--lower, .components--computed) {
   @include components-container-max-width;
   margin-left: auto;
   margin-right: auto;

templates/form/form--openid-connect-accounts-form.html.twig

@@ -0,0 +1,15 @@
+<div class="components components--computed">
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+      'component--connected-accounts-form-container',
+    ],
+    }
+  %}
+    {% block component_content %}
+      <form{{ attributes }}>
+        {{ children }}
+      </form>
+    {% endblock component_content %}
+  {% endembed %}
+</div>

templates/form/form--tfa-entry-form.html.twig

@@ -0,0 +1,15 @@
+<div class="components components--computed">
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+        'component--tfa-form-container',
+      ],
+    }
+  %}
+    {% block component_content %}
+      <form{{ attributes }}>
+        {{ children }}
+      </form>
+    {% endblock component_content %}
+  {% endembed %}
+</div>

templates/layout/user.html.twig

@@ -0,0 +1,18 @@
+<article{{ attributes }}>
+  {% if content %}
+    <div class="components components--computed">
+      {% embed "@hdbt/misc/component.twig" with { component_classes: ['component--user-info-container'] } %}
+        {% block component_content %}
+          {% set link_title = "Hel.fi content producer's guide (in Finnish)"|t({}, {'context': 'User info page'}) %}
+          {% set link_url = 'https://www.hel.fi/fi/paatoksenteko-ja-hallinto/sisallonhallinta' %}
+          {% embed "@hdbt/misc/component.twig" with { component_classes: ['component--paragraph-text'] } %}
+            {% block component_content %}
+              <p>{{ "Welcome to the content management of hel.fi Drupal. You will find instructions in the"|t({}, {'context': 'User info page'}) }} {{ link(link_title, link_url) }}.</p>
+            {% endblock component_content %}
+          {% endembed %}
+          {{- content -}}
+        {% endblock component_content %}
+      {% endembed %}
+    </div>
+  {% endif %}
+</article>

translations/fi.po

@@ -1331,3 +1331,11 @@ msgstr "Haluatko antaa meille palautetta tästä sivusta?"
 msgctxt "React & Share cookie compliance"
 msgid "Enabling cookies that collect statistics will allow you to share your input."
 msgstr "Pääset antamaan palautetta, jos sallit evästeasetuksista tilastointiin liittyvät evästeet."
+
+msgctxt "User info page"
+msgid "Welcome to the content management of hel.fi Drupal. You will find instructions in the"
+msgstr "Tervetuloa hel.fin Drupalin sisällönhallintaan. Ohjeet löydät"
+
+msgctxt "User info page"
+msgid "Hel.fi content producer's guide (in Finnish)"
+msgstr "Hel.fin sisällöntuottajan oppaasta"

translations/sv.po

@@ -1325,3 +1325,11 @@ msgstr "Vill du ge oss feedback om denna sida?"
 msgctxt "React & Share cookie compliance"
 msgid "Enabling cookies that collect statistics will allow you to share your input."
 msgstr "Du kan ge oss feedback genom att aktivera statistikrelaterade cookies."
+
+msgctxt "User info page"
+msgid "Welcome to the content management of hel.fi Drupal. You will find instructions in the"
+msgstr "Välkommen till innehållshanteringen av hel.fi Drupal. Du hittar instruktioner i"
+
+msgctxt "User info page"
+msgid "Hel.fi content producer's guide (in Finnish)"
+msgstr "Hel.fi innehållsproducentens guide (på finska)"