From 324bc1ce9975afb3dcf5b251d8ee6a443dcc2c80 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Wed, 27 Nov 2024 13:45:45 -0800 Subject: [PATCH 1/3] MWPW-162046 Tabs - Stacked Mobile --- libs/blocks/tabs/tabs.css | 39 ++++++++++++++++++++++++++++++++ libs/blocks/tabs/tabs.js | 14 +++++++++--- test/blocks/tabs/mocks/body.html | 33 +++++++++++++++++++++++++++ test/blocks/tabs/tabs.test.js | 13 +++++++++++ 4 files changed, 96 insertions(+), 3 deletions(-) diff --git a/libs/blocks/tabs/tabs.css b/libs/blocks/tabs/tabs.css index 0efb1d762f..ec0838335b 100644 --- a/libs/blocks/tabs/tabs.css +++ b/libs/blocks/tabs/tabs.css @@ -493,3 +493,42 @@ top: 24px; } } + +@media screen and (max-width: 599px) { + .tabs.stacked-mobile div[role="tablist"] { + margin: 0; + } + + .tabs.stacked-mobile div[role="tablist"] .tab-list-container { + flex-direction: column; + width: 100%; + margin: 30px; + } + + .tabs.stacked-mobile div[role="tablist"] button { + font-size: 20px; + white-space: unset; + word-wrap: break-word; + line-height: 25px; + padding: 8px; + border-radius: 0; + border: 0; + } + + .tabs.stacked-mobile div[role="tablist"] button[aria-selected="true"] { + background-color: #dadada; + } + + .tabs.stacked-mobile.dark div[role="tablist"] button[aria-selected="true"] { + background-color: #393939; + } + + .tabs.stacked-mobile.center div[role="tablist"] .tab-list-container { + width: 100%; + margin: 0 30px 30px; + } + + .tabs.stacked-mobile.quiet div[role="tablist"] button { + margin-inline-start: 0; + } +} diff --git a/libs/blocks/tabs/tabs.js b/libs/blocks/tabs/tabs.js index 8d3a11d457..3a5a2cfde5 100644 --- a/libs/blocks/tabs/tabs.js +++ b/libs/blocks/tabs/tabs.js @@ -34,10 +34,19 @@ const removeAttributes = (el, attrsKeys) => { attrsKeys.forEach((key) => el.removeAttribute(key)); }; +const scrollStackedMobile = (content) => { + if (!window.matchMedia('(max-width: 600px)').matches) return; + const rects = content.getBoundingClientRect(); + const navHeight = document.querySelector('.global-navigation, .gnav')?.scrollHeight || 0; + const topOffset = rects.top + window.scrollY - navHeight - 1; + window.scrollTo({ top: topOffset, behavior: 'smooth' }); +}; + function changeTabs(e) { const { target } = e; const parent = target.parentNode; const content = parent.parentNode.parentNode.lastElementChild; + const targetContent = content.querySelector(`#${target.getAttribute('aria-controls')}`); const blockId = target.closest('.tabs').id; parent .querySelectorAll(`[aria-selected="true"][data-block-id="${blockId}"]`) @@ -47,9 +56,8 @@ function changeTabs(e) { content .querySelectorAll(`[role="tabpanel"][data-block-id="${blockId}"]`) .forEach((p) => p.setAttribute('hidden', true)); - content - .querySelector(`#${target.getAttribute('aria-controls')}`) - .removeAttribute('hidden'); + targetContent.removeAttribute('hidden'); + scrollStackedMobile(targetContent); } function getStringKeyName(str) { diff --git a/test/blocks/tabs/mocks/body.html b/test/blocks/tabs/mocks/body.html index 2763172d12..9eb9c3f599 100644 --- a/test/blocks/tabs/mocks/body.html +++ b/test/blocks/tabs/mocks/body.html @@ -306,3 +306,36 @@

Tab by index label free

+ +
+

Stacked Mobile Tabs

+
+
+
+
    +
  • Tab, stacked-1
    • +
  • Tab, stacked-2
    • +
+
+
+
+
+
+

Here is Tab 1

+
+
+
tab
+
Tab, stacked-1
+
+
+
+
+

Here is Tab 2

+
+
+
tab
+
Tab, stacked-2
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere dignissim leo quis rhoncus. Suspendisse potenti. Nulla ac dolor dui. Vivamus posuere porttitor lectus, et vestibulum nisi varius cursus. Phasellus bibendum non lectus sit amet bibendum. Vivamus dapibus ultrices nisi. Praesent consequat lorem vitae gravida suscipit. Sed facilisis lacinia neque, ac tincidunt ex placerat a. Vivamus ultrices arcu sed laoreet tincidunt.

diff --git a/test/blocks/tabs/tabs.test.js b/test/blocks/tabs/tabs.test.js index 541db35ba5..0e063efd0c 100644 --- a/test/blocks/tabs/tabs.test.js +++ b/test/blocks/tabs/tabs.test.js @@ -4,6 +4,7 @@ import { delay } from '../../helpers/waitfor.js'; import { loadStyle } from '../../../libs/utils/utils.js'; const DESKTOP_WIDTH = 1200; +const TABLET_WIDTH = 768; const MOBILE_WIDTH = 375; const HEIGHT = 1500; @@ -94,4 +95,16 @@ describe('tabs', () => { expect(tabList.scrollLeft).to.equal(0); }); + + describe('stacked mobile variant', () => { + it('scrolls the window to the selected tab content', async () => { + setViewport({ width: MOBILE_WIDTH, height: HEIGHT }); + window.dispatchEvent(new Event('resize')); + const oldPosition = window.scrollY; + document.querySelector('#stacked-mobile .tabs button').click(); + await delay(50); + const newPosition = window.scrollY; + expect(newPosition).to.be.above(oldPosition); + }); + }); }); From 2f350236dc6b5fe22757e71f254522857d6d0fc8 Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Tue, 10 Dec 2024 14:40:28 -0800 Subject: [PATCH 2/3] figma review adjustments --- libs/blocks/tabs/tabs.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/libs/blocks/tabs/tabs.css b/libs/blocks/tabs/tabs.css index ec0838335b..889f517e9f 100644 --- a/libs/blocks/tabs/tabs.css +++ b/libs/blocks/tabs/tabs.css @@ -501,8 +501,7 @@ .tabs.stacked-mobile div[role="tablist"] .tab-list-container { flex-direction: column; - width: 100%; - margin: 30px; + margin: 30px auto; } .tabs.stacked-mobile div[role="tablist"] button { @@ -513,6 +512,11 @@ padding: 8px; border-radius: 0; border: 0; + margin-bottom: 8px; + } + + .tabs.stacked-mobile div[role="tablist"] button:last-of-type { + margin-bottom: 0; } .tabs.stacked-mobile div[role="tablist"] button[aria-selected="true"] { From 1fd61cfc00165fb9ff3fd99444213ba4e78a733d Mon Sep 17 00:00:00 2001 From: Megan Thomas Date: Tue, 10 Dec 2024 15:13:40 -0800 Subject: [PATCH 3/3] remove unused variable --- test/blocks/tabs/tabs.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/blocks/tabs/tabs.test.js b/test/blocks/tabs/tabs.test.js index 0e063efd0c..d01de3cb9c 100644 --- a/test/blocks/tabs/tabs.test.js +++ b/test/blocks/tabs/tabs.test.js @@ -4,7 +4,6 @@ import { delay } from '../../helpers/waitfor.js'; import { loadStyle } from '../../../libs/utils/utils.js'; const DESKTOP_WIDTH = 1200; -const TABLET_WIDTH = 768; const MOBILE_WIDTH = 375; const HEIGHT = 1500;