From b52263ff6343c5585296a2ec88540bfc51ff6ae4 Mon Sep 17 00:00:00 2001
From: Boris Diakur <borisdiakur@gmail.com>
Date: Wed, 8 Dec 2021 15:11:01 +0100
Subject: [PATCH] fix(ld-tabs): show tabpanel according to preselected tab

Resolves #179
---
 src/liquid/components/ld-tabs/ld-tabs.tsx     |   7 +-
 .../test/__snapshots__/ld-tabs.spec.ts.snap   | 110 ++++++++++++++++++
 .../components/ld-tabs/test/ld-tabs.spec.ts   |  25 +++-
 3 files changed, 139 insertions(+), 3 deletions(-)

diff --git a/src/liquid/components/ld-tabs/ld-tabs.tsx b/src/liquid/components/ld-tabs/ld-tabs.tsx
index f62f1058e9..e17c27fe71 100644
--- a/src/liquid/components/ld-tabs/ld-tabs.tsx
+++ b/src/liquid/components/ld-tabs/ld-tabs.tsx
@@ -81,7 +81,7 @@ export class LdTabs {
       )
     }
 
-    ;((newActiveTab as unknown) as LdTab).select()
+    ;(newActiveTab as unknown as LdTab).select()
   }
 
   componentDidRender() {
@@ -90,7 +90,10 @@ export class LdTabs {
     let selectedIndex
     this.el.querySelectorAll('ld-tab').forEach((tab, index) => {
       tab.id = `${this.idDescriber}-tab-${index}`
-      if (tab.hasAttribute('selected')) {
+      if (
+        tab.hasAttribute('selected') &&
+        tab.getAttribute('selected') !== 'false'
+      ) {
         selectedIndex = index
       }
     })
diff --git a/src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap b/src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap
index 31212009a3..1f99884681 100644
--- a/src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap
+++ b/src/liquid/components/ld-tabs/test/__snapshots__/ld-tabs.spec.ts.snap
@@ -109,3 +109,113 @@ exports[`ld-tabs renders 1`] = `
   </ld-tabpanellist>
 </ld-tabs>
 `;
+
+exports[`ld-tabs shows tabpanel according to the preselected tab 1`] = `
+<ld-tabs class="ld-tabs">
+  <mock:shadow-root>
+    <slot></slot>
+  </mock:shadow-root>
+  <ld-tablist role="tablist">
+    <mock:shadow-root>
+      <div class="ld-tablist" part="wrapper">
+        <button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--left" hidden="" part="arrow arrow-left" tabindex="-1">
+          <svg fill="none" height="16" part="arrow-icon arrow-icon-left" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <title>
+              Scroll left
+            </title>
+            <path d="M10 13L6 8L10 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+          </svg>
+        </button>
+        <div class="ld-tablist__scroll-container" part="scroll-container">
+          <slot></slot>
+        </div>
+        <button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--right" hidden="" part="arrow arrow-right" tabindex="-1">
+          <svg fill="none" height="16" part="arrow-icon arrow-icon-right" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <title>
+              Scroll right
+            </title>
+            <path d="M6 13L10 8L6 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+          </svg>
+        </button>
+      </div>
+    </mock:shadow-root>
+    <ld-tab id="ld-tabs-1-tab-0">
+      <mock:shadow-root>
+        <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
+          <span class="ld-tab__spacer" part="spacer spacer-left"></span>
+          <span class="ld-tab__content" part="content">
+            <slot></slot>
+          </span>
+          <span class="ld-tab__spacer" part="spacer spacer-right"></span>
+        </button>
+      </mock:shadow-root>
+      Fruits
+    </ld-tab>
+    <ld-tab id="ld-tabs-1-tab-1" selected="">
+      <mock:shadow-root>
+        <button aria-selected="true" class="ld-tab" part="button focusable" role="tab">
+          <span class="ld-tab__spacer" part="spacer spacer-left"></span>
+          <span class="ld-tab__content" part="content">
+            <slot></slot>
+          </span>
+          <span class="ld-tab__spacer" part="spacer spacer-right"></span>
+        </button>
+      </mock:shadow-root>
+      Vegetables
+    </ld-tab>
+    <ld-tab id="ld-tabs-1-tab-2" selected="false">
+      <mock:shadow-root>
+        <button class="ld-tab" part="button focusable" role="tab" tabindex="-1">
+          <span class="ld-tab__spacer" part="spacer spacer-left"></span>
+          <span class="ld-tab__content" part="content">
+            <slot></slot>
+          </span>
+          <span class="ld-tab__spacer" part="spacer spacer-right"></span>
+        </button>
+      </mock:shadow-root>
+      Nuts
+    </ld-tab>
+    <ld-tab disabled="" id="ld-tabs-1-tab-3">
+      <mock:shadow-root>
+        <button aria-disabled="true" class="ld-tab" part="button focusable" role="tab" tabindex="-1">
+          <span class="ld-tab__spacer" part="spacer spacer-left"></span>
+          <span class="ld-tab__content" part="content">
+            <slot></slot>
+          </span>
+          <span class="ld-tab__spacer" part="spacer spacer-right"></span>
+        </button>
+      </mock:shadow-root>
+      Grain
+    </ld-tab>
+  </ld-tablist>
+  <ld-tabpanellist class="ld-tabpanellist">
+    <mock:shadow-root>
+      <slot></slot>
+    </mock:shadow-root>
+    <ld-tabpanel aria-labelledby="ld-tabs-1-tab-0" class="ld-tabpanel" hidden="true" role="tabpanel" tabindex="-1">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      Apple, orange, banana
+    </ld-tabpanel>
+    <ld-tabpanel aria-labelledby="ld-tabs-1-tab-1" class="ld-tabpanel" role="tabpanel" tabindex="-1">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      Potato, cucumber, tomato
+    </ld-tabpanel>
+    <ld-tabpanel aria-labelledby="ld-tabs-1-tab-2" class="ld-tabpanel" hidden="true" role="tabpanel" tabindex="-1">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      Walnut, chestnut, strawberry
+    </ld-tabpanel>
+    <ld-tabpanel aria-labelledby="ld-tabs-1-tab-3" class="ld-tabpanel" hidden="true" role="tabpanel" tabindex="-1">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      Maize, rice, soybeans, wheat
+    </ld-tabpanel>
+  </ld-tabpanellist>
+</ld-tabs>
+`;
diff --git a/src/liquid/components/ld-tabs/test/ld-tabs.spec.ts b/src/liquid/components/ld-tabs/test/ld-tabs.spec.ts
index 7a17fd36d5..ddb1183005 100644
--- a/src/liquid/components/ld-tabs/test/ld-tabs.spec.ts
+++ b/src/liquid/components/ld-tabs/test/ld-tabs.spec.ts
@@ -7,7 +7,7 @@ import { LdTabpanel } from '../ld-tabpanel/ld-tabpanel'
 
 class FocusManager {
   focus(el) {
-    const doc = (document as unknown) as { activeElement: Element }
+    const doc = document as unknown as { activeElement: Element }
     doc.activeElement = el
   }
 }
@@ -39,6 +39,29 @@ describe('ld-tabs', () => {
     expect(page.root).toMatchSnapshot()
   })
 
+  it('shows tabpanel according to the preselected tab', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `
+        <ld-tabs>
+          <ld-tablist>
+            <ld-tab>Fruits</ld-tab>
+            <ld-tab selected>Vegetables</ld-tab>
+            <ld-tab selected="false">Nuts</ld-tab>
+            <ld-tab disabled>Grain</ld-tab>
+          </ld-tablist>
+          <ld-tabpanellist>
+            <ld-tabpanel>Apple, orange, banana</ld-tabpanel>
+            <ld-tabpanel>Potato, cucumber, tomato</ld-tabpanel>
+            <ld-tabpanel>Walnut, chestnut, strawberry</ld-tabpanel>
+            <ld-tabpanel>Maize, rice, soybeans, wheat</ld-tabpanel>
+          </ld-tabpanellist>
+        </ld-tabs>
+      `,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
   describe('mouse interactions', () => {
     it('changes tab via click with preselected tab', async () => {
       const page = await newSpecPage({