From fa3c5aa9a1fb835ee39278e7ae28dcf91a28688b Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sat, 16 Sep 2023 21:27:07 +0200
Subject: [PATCH] Docs(web): Add Tabs demo #DS-909

- Tabs demo in web is now same as demo-react in web and web-twig
---
 .../web/src/scss/components/Tabs/index.html   | 92 ++++++++++---------
 1 file changed, 51 insertions(+), 41 deletions(-)

diff --git a/packages/web/src/scss/components/Tabs/index.html b/packages/web/src/scss/components/Tabs/index.html
index b5326fda90..fa8bbbea03 100644
--- a/packages/web/src/scss/components/Tabs/index.html
+++ b/packages/web/src/scss/components/Tabs/index.html
@@ -1,48 +1,58 @@
 {{#> layout/plain }}
 
-  <ul class="Tabs" role="tablist">
-    <li class="Tabs__item">
-      <button
-        class="Tabs__link is-selected"
-        role="tab"
-        type="button"
-        aria-selected="true"
-        id="pane1-tab"
-        data-spirit-toggle="tabs"
-        data-spirit-target="#pane1"
-        aria-controls="pane1"
-      >
-        Item 1
-      </button>
-    </li>
-    <li class="Tabs__item">
-      <button
-        class="Tabs__link"
-        role="tab"
-        type="button"
-        aria-selected="false"
-        id="pane2-tab"
-        data-spirit-toggle="tabs"
-        data-spirit-target="#pane2"
-        aria-controls="pane2"
-      >
-        Item 2
-      </button>
-    </li>
-    <li class="Tabs__item">
-      <a href="https://www.example.com" class="Tabs__link">Item Link</a>
-    </li>
-    <li class="Tabs__item d-none d-desktop-block">
-      <a href="https://www.example.com" class="Tabs__link">Item Link, Desktop Only</a>
-    </li>
-  </ul>
+<section class="docs-Section">
+  
+  <h2 class="docs-Heading">Default</h2>
+          
+  <div class="docs-Stack docs-Stack--stretch">
 
-  <div id="pane1" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane1-tab">
-    Pane 1 content
-  </div>
+    <ul class="Tabs" role="tablist">
+      <li class="Tabs__item">
+        <button
+          class="Tabs__link is-selected"
+          role="tab"
+          type="button"
+          aria-selected="true"
+          id="pane1-tab"
+          data-spirit-toggle="tabs"
+          data-spirit-target="#pane1"
+          aria-controls="pane1"
+        >
+          Item 1
+        </button>
+      </li>
+      <li class="Tabs__item">
+        <button
+          class="Tabs__link"
+          role="tab"
+          type="button"
+          aria-selected="false"
+          id="pane2-tab"
+          data-spirit-toggle="tabs"
+          data-spirit-target="#pane2"
+          aria-controls="pane2"
+        >
+          Item 2
+        </button>
+      </li>
+      <li class="Tabs__item">
+        <a href="https://www.example.com" class="Tabs__link">Item link</a>
+      </li>
+      <li class="Tabs__item d-none d-desktop-block">
+        <a href="https://www.example.com" class="Tabs__link">Item link, desktop only</a>
+      </li>
+    </ul>
+
+    <div id="pane1" class="TabsPane is-selected" role="tabpanel" aria-labelledby="pane1-tab">
+      Pane 1 content
+    </div>
+
+    <div id="pane2" class="TabsPane" role="tabpanel" aria-labelledby="pane2-tab">
+      Pane 2 content
+    </div>
 
-  <div id="pane2" class="TabsPane" role="tabpanel" aria-labelledby="pane2-tab">
-    Pane 2 content
   </div>
 
+</section>
+
 {{/layout/plain }}