feat(components): add Nested Tabs (#1017)

Co-authored-by: Isabelle Chanclou <isabelle.chanclou@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com> Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Orange-OpenSource · Mar 3, 2022 · 4c57693 · 4c57693
1 parent 7cc4953
commit 4c57693
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 7 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "30.1 kB"
+      "maxSize": "30.2 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "28.0 kB"
+      "maxSize": "28.1 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/build/.pa11yci.json b/build/.pa11yci.json
@@ -5,7 +5,7 @@
     "runners": [
       "axe"
     ],
-    "hideElements": ".bd-search, [id*='tarteaucitron'], #TableOfContents, .text-primary, .accordion-button:not(.collapsed), .active, [aria-current], select:disabled, [disabled] label, [disabled] + label, .modal, .bd-example nav, .badge.rounded-pill.bg-info.text-white, .exclude-from-pa11y-analysis, a.disabled, .form-check.form-switch",
+    "hideElements": ".bd-search, [id*='tarteaucitron'], #TableOfContents, .text-primary, .accordion-button:not(.collapsed), .active, [aria-current], select:disabled, [disabled] label, [disabled] + label, .modal, .bd-example nav, .badge.rounded-pill.bg-info.text-white, .exclude-from-pa11y-analysis, a.disabled, .form-check.form-switch, .nav-tabs .nav-item .nav-link.disabled",
     "ignore": [
       "heading-order",
       "scrollable-region-focusable"

diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -52,7 +52,7 @@
   // End mod
 
   .nav-link {
-    padding: subtract(1rem, $nav-tabs-border-width) map-get($spacers, 4); // Boosted mod
+    padding: subtract(1rem, $nav-tabs-border-width) subtract($nav-tabs-link-padding-x, $nav-tabs-border-width); // Boosted mod
     // stylelint-disable-next-line function-disallowed-list
     margin-bottom: calc(var(--#{$variable-prefix}tabs-spacing) * -1);
     background: none;
@@ -98,7 +98,7 @@
 // Boosted mod
 .nav-tabs-light {
   --#{$variable-prefix}tabs-spacing: #{$nav-tabs-border-width * .5};
-  border-color: $gray-600;
+  border-color: $gray-500;
 
   .nav-link {
     // stylelint-disable-next-line function-disallowed-list
@@ -125,6 +125,8 @@
 
 .nav-pills {
   .nav-link {
+    padding-right: $nav-tabs-link-padding-x;
+    padding-left: $nav-tabs-link-padding-x;
     background: none;
     border: 0;
     @include border-radius($nav-pills-border-radius);
@@ -180,14 +182,22 @@
 
 .tab-content {
   // Boosted mod
-  padding: subtract($spacer, $nav-tabs-border-width);
+  padding: $spacer subtract($nav-tabs-link-padding-x, $nav-tabs-border-width);
   border: $nav-tabs-border-width solid;
   border-top: 0;
   // End mod
 
   > .tab-pane {
     display: none;
   }
+
+  // Boosted mod
+  > .tab-pane-with-nested-tab {
+    display: none;
+    margin: $spacer * -1 subtract($nav-tabs-link-padding-x, $nav-tabs-border-width) * -1;
+  }
+  // End mod
+
   > .active {
     display: block;
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1199,6 +1199,7 @@ $nav-link-disabled-color:           $gray-500 !default;
 $nav-tabs-border-color:             $black !default;
 $nav-tabs-border-width:             $border-width !default;
 $nav-tabs-border-radius:            $border-radius !default;
+$nav-tabs-link-padding-x:           1.8125rem !default; // Boosted mod
 $nav-tabs-link-hover-border-color:  $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        $black !default;
 $nav-tabs-link-active-bg:           $body-bg !default;

diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
@@ -151,7 +151,6 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 <!-- Boosted mod -->
 ### Tabs light
 
-
 Nav tabs light only differ visually, with a full width bottom border and a different active state.
 
 {{< example >}}
@@ -170,6 +169,58 @@ Nav tabs light only differ visually, with a full width bottom border and a diffe
   </li>
 </ul>
 {{< /example >}}
+
+### Nested tabs
+
+Nav tabs light is nested in a tab for adding a level of depth in information organization.
+
+{{< example >}}
+<div role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4">
+  <ul class="nav nav-tabs" id="nav-tab-with-nested-tabs">
+    <li class="nav-item">
+      <a class="nav-link active" aria-current="page" id="nav-tab1" href="#tab1-content" data-bs-toggle="tab" data-bs-target="#tab1-content" role="tab" aria-controls="tab1-content" aria-selected="true">Tab 1</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" id="nav-tab2" data-bs-toggle="tab" href="#tab2-content" data-bs-target="#tab2-content" role="tab" aria-controls="tab2-content" aria-selected="false">Tab 2</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" id="nav-tab3" data-bs-toggle="tab" href="#tab3-content" data-bs-target="#tab3-content" role="tab" aria-controls="tab3-content" aria-selected="false">Tab 3</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link disabled" id="nav-tab4" role="tab" aria-selected="false">Tab 4</a>
+    </li>
+  </ul>
+</div>
+
+<div class="tab-content" id="nav-tabs-content">
+  <div class="tab-pane-with-nested-tab fade show active" id="tab1-content" role="tablist" aria-labelledby="nav-tab1">
+    <ul class="nav nav-tabs nav-tabs-light mt-0">
+      <li class="nav-item">
+        <a class="nav-link active" id="nav-linkA" href="#linkA" data-bs-toggle="tab" data-bs-target="#linkA" role="tab" aria-current="page">Link A</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="nav-linkB" href="#linkB" data-bs-toggle="tab" data-bs-target="#linkB" role="tab">Link B</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="nav-linkC" href="#linkC" data-bs-toggle="tab" data-bs-target="#linkC" role="tab">Link C</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" id="nav-linkD" role="tab">Link D</a>
+      </li>
+    </ul>
+    <div class="tab-content border-0" id="nav-tabs-light-content">
+      <div class="tab-pane fade show active" id="linkA" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
+      <div class="tab-pane" id="linkB" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
+      <div class="tab-pane" id="linkC" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
+      <div class="tab-pane" id="linkD" role="tabpanel" aria-labelledby="nav-linkD">Content of Link D</div>
+    </div>
+  </div>
+  <div class="tab-pane" id="tab2-content" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
+  <div class="tab-pane" id="tab3-content" role="tabpanel" aria-labelledby="nav-tab3">Content of Tab 3</div>
+  <div class="tab-pane" id="tab4-content" role="tabpanel" aria-labelledby="nav-tab4">Content of Tab 4</div>
+</div>
+{{< /example >}}
+
 <!-- End mod -->
 
 ### Pills