Nojs behavior for the component previews

Author: pangolingo

11tyconfig/previewMarkdownDirective.js

@@ -136,7 +136,6 @@ function generatePreviewHtml(id, title, htmlContent, pathPrefix, isTall) {
     role="tabpanel"
     tabindex="0"
     aria-labelledby="${ID.TAB.CODE}"
-    class="is-hidden"
   >
     <div class="component-example__code">
       ${eleventyPrism(htmlContent, "html")}

site/assets/css/_tabs-automatic.css

@@ -13,6 +13,11 @@ This software or document includes material copied from or derived from https://
 
 [role="tablist"] {
   min-width: 100%;
+  display: none;
+}
+
+[role="tablist"].tabs-automatic--active {
+  display: block;
 }
 
 [role="tab"],
@@ -52,6 +57,10 @@ This software or document includes material copied from or derived from https://
   background: var(--tabpanel-background);
 }
 
+[role="tabpanel"] + [role="tabpanel"]:not(.tabs-automatic--active) {
+  margin-top: var(--space--small);
+}
+
 [role="tabpanel"].is-hidden {
   display: none;
 }

site/assets/js/TabsAutomatic.mjs

@@ -28,12 +28,16 @@ export default class TabsAutomatic {
     this.tabs = Array.from(this.tablistNode.querySelectorAll("[role=tab]"));
     this.tabpanels = [];
 
+    // active the UI
+    this.tablistNode.classList.add("tabs-automatic--active");
+
     for (var i = 0; i < this.tabs.length; i += 1) {
       var tab = this.tabs[i];
       var tabpanel = document.getElementById(tab.getAttribute("aria-controls"));
 
       tab.tabIndex = -1;
       tab.setAttribute("aria-selected", "false");
+      tabpanel.classList.add("tabs-automatic--active");
       this.tabpanels.push(tabpanel);
 
       tab.addEventListener("keydown", this.onKeydown.bind(this));