testio-tailwind 3.26.1 → 3.27.0

package/.eleventy.js

@@ -45,7 +45,7 @@ module.exports = function (eleventyConfig) {
             includes: "_includes",
             layouts: "_layouts"
         },
-        templateFormats: ["html", "md", "njk", "pug", "haml"],
+        templateFormats: ["html", "md", "njk", "pug", "haml", "11ty.js"],
         htmlTemplateEngine: "njk",
 
         // 1.1 Enable eleventy to pass dirs specified above

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.26.1",
+	"version": "3.27.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/_includes/header.njk

@@ -61,6 +61,20 @@
   </details>
 
   <div class="navlinks right">
+    <details class="popover-wrapper dropright component-search">
+      <summary class="btn btn-square navlink">
+        <span class="icon icon-search" aria-hidden="true"></span>
+        <span class="sr-only">Search components</span>
+      </summary>
+      <div class="popover-menu search">
+        <form class="form-search inverted" role="search">
+          <input type="search" class="form-control" id="component-search-input" placeholder="Search components..." autocomplete="off" aria-label="Search components">
+          <button type="button" class="btn btn-clear" aria-label="Clear search"></button>
+          <button type="button" class="btn btn-submit" aria-label="Search"></button>
+        </form>
+        <div id="component-search-results" class="list-searchresults" role="listbox" aria-label="Search results" hidden></div>
+      </div>
+    </details>
     <button onclick="(() => document.body.classList.toggle('dark'))()" class="navlink">
           <svg class="w-icon h-icon fill-purple hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
               <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>

package/src/assets/scripts/app.js

@@ -1,3 +1,4 @@
+import "./modules/component_search.js";
 import autosize from "autosize";
 import Dropzone from "dropzone";
 import $ from "jquery";

package/src/assets/scripts/modules/component_search.js

@@ -0,0 +1,144 @@
+/**
+ * Component search - fetches search-index.json and filters results on input.
+ * Uses the search popover pattern from /forms/#Search.
+ * Shows popover with max 8 results, navigates on click.
+ */
+const MAX_RESULTS = 8;
+
+let searchIndex = [];
+
+async function loadSearchIndex() {
+  try {
+    const res = await fetch("/search-index.json");
+    if (res.ok) {
+      searchIndex = await res.json();
+    }
+  } catch (e) {
+    console.warn("Component search: could not load index", e);
+  }
+}
+
+function slugifySection(name) {
+  return name.charAt(0).toUpperCase() + name.slice(1).replace(/([A-Z])/g, " $1").trim();
+}
+
+function search(term) {
+  if (!term || term.length < 2) return [];
+  const lower = term.toLowerCase();
+  return searchIndex
+    .filter(
+      (item) =>
+        item.title.toLowerCase().includes(lower) ||
+        (item.section && slugifySection(item.section).toLowerCase().includes(lower))
+    )
+    .slice(0, MAX_RESULTS);
+}
+
+function showResults(results) {
+  const container = document.getElementById("component-search-results");
+  if (!container) return;
+
+  if (results.length === 0) {
+    container.innerHTML = '<div class="component-search-empty">No components found</div>';
+    container.hidden = false;
+    return;
+  }
+
+  container.innerHTML = results
+    .map(
+      (item) =>
+        `<a href="${escapeHtml(item.url)}" class="issue-item">
+          <span class="issue-title">${escapeHtml(item.title)}</span>
+          <span class="issue-info">${escapeHtml(slugifySection(item.section))}</span>
+        </a>`
+    )
+    .join("");
+  container.hidden = false;
+}
+
+function hideResults() {
+  const container = document.getElementById("component-search-results");
+  if (container) {
+    container.hidden = true;
+  }
+}
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function initComponentSearch() {
+  const componentSearch = document.querySelector(".component-search");
+  const input = document.getElementById("component-search-input");
+  const container = document.getElementById("component-search-results");
+  const details = componentSearch?.closest("details");
+  if (!input || !container) return;
+
+  let debounceTimer;
+
+  // Focus input when popover opens
+  details?.addEventListener("toggle", () => {
+    if (details.open) {
+      setTimeout(() => input.focus(), 0);
+      hideResults();
+    }
+  });
+
+  input.addEventListener("input", () => {
+    clearTimeout(debounceTimer);
+    const term = input.value.trim();
+    if (term.length < 2) {
+      hideResults();
+      return;
+    }
+    debounceTimer = setTimeout(() => {
+      showResults(search(term));
+    }, 150);
+  });
+
+  input.addEventListener("focus", () => {
+    const term = input.value.trim();
+    if (term.length >= 2) {
+      showResults(search(term));
+    }
+  });
+
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      hideResults();
+      if (details) {
+        details.removeAttribute("open");
+      }
+    }
+  });
+
+  // Clear button
+  const clearBtn = componentSearch?.querySelector(".btn-clear");
+  clearBtn?.addEventListener("click", (e) => {
+    e.preventDefault();
+    input.value = "";
+    hideResults();
+    input.focus();
+  });
+
+  // Prevent form submit
+  const form = componentSearch?.querySelector("form");
+  form?.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const term = input.value.trim();
+    if (term.length >= 2) {
+      showResults(search(term));
+    }
+  });
+}
+
+// Initialize when DOM ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => {
+    loadSearchIndex().then(initComponentSearch);
+  });
+} else {
+  loadSearchIndex().then(initComponentSearch);
+}

package/src/assets/stylesheets/app.css

@@ -60,6 +60,7 @@
 @import './components/scrollbars.css' layer(components);
 @import './components/search.css' layer(components);
 @import './components/sections.css' layer(components);
+@import './components/stepper.css' layer(components);
 @import './components/select.css' layer(components);
 @import './components/selectable_token.css' layer(components);
 @import './components/sidebar.css' layer(components);

package/src/assets/stylesheets/components/manager/manager_sidebar.css

@@ -13,11 +13,6 @@
   @apply text-black;
 }
 
-.sidebar.manager summary:after,
-.header.manager summary:after {
-  @apply bg-black;
-}
-
 .sidebar.manager .navlink.active,
 .header.manager .navlink.active {
   @apply text-black bg-navlink-manager-active-bg;

package/src/assets/stylesheets/components/radio_tabs.css

@@ -58,6 +58,6 @@
   @apply block; 
 }
 
-.radio-tab-form {
+.radio-tabs .radio-tab-form {
   @apply bg-transparent p-0 rounded-none;
 }

package/src/assets/stylesheets/components/search.css

@@ -116,3 +116,8 @@
 .dropdown-menu .issue-info {
   @apply text-label-inverted-color;
 }
+
+.popover-menu .task-item .task-title, .popover-menu .issue-item .issue-title, 
+.dropdown-menu .issue-title {
+  @apply text-white;
+}

package/src/assets/stylesheets/components/stepper.css

@@ -0,0 +1,116 @@
+/* Stepper - Multi-step wizard component (converted from testio-designsystem) */
+
+.stepper {
+  @apply flex flex-row items-center flex-wrap gap-0;
+}
+
+.stepper-step {
+  @apply flex flex-row items-center shrink-0;
+}
+
+.stepper-step .stepper-icon {
+  @apply flex items-center justify-center shrink-0 w-8 h-8 text-base font-semibold rounded-full border-2 border-gray-300 bg-white text-label-color;
+}
+
+.stepper-step .stepper-label {
+  @apply ml-xs font-semibold text-sm text-appbody-textcolor;
+}
+
+/* Connector line between steps */
+.stepper-step:not(:last-child)::after {
+  content: "";
+  @apply w-8 md:w-12 mx-xs h-px bg-bordercolor self-center;
+}
+
+/* Completed state */
+.stepper-step.completed .stepper-icon {
+  @apply border-success bg-success text-white;
+}
+
+.stepper-step.completed .stepper-icon .icon {
+  @apply text-white;
+}
+
+.stepper-step.completed .stepper-label {
+  @apply text-success;
+}
+
+/* Active state */
+.stepper-step.active .stepper-icon {
+  @apply border-none bg-primary text-white border-2;
+}
+
+.stepper-step.active .stepper-icon .icon {
+  @apply text-white;
+}
+
+.stepper-step.active .stepper-label {
+  @apply text-primary;
+}
+
+/* Pending state (default) */
+.stepper-step:not(.completed):not(.active) .stepper-icon {
+  @apply border-0 bg-gray-lighter text-label-color;
+}
+
+.stepper-step:not(.completed):not(.active) .stepper-label {
+  @apply text-label-color;
+}
+
+/* Dark mode */
+.dark .stepper-step .stepper-icon {
+  @apply border-bordercolor bg-gray-800 text-label-color;
+}
+
+.dark .stepper-step.completed .stepper-icon {
+  @apply border-success bg-success;
+}
+
+.dark .stepper-step.active .stepper-icon {
+  @apply border-primary bg-primary;
+}
+
+.dark .stepper-step:not(.completed):not(.active) .stepper-icon {
+  @apply bg-gray-800;
+}
+
+/* ===== Vertical stepper ===== */
+
+.stepper-vertical {
+  @apply flex flex-col items-stretch gap-0;
+}
+
+.stepper-vertical .stepper-label {
+  @apply ml-0 pt-2;
+}
+
+.stepper-vertical .stepper-step {
+  @apply flex flex-row items-start gap-0 pb-md last:pb-0;
+}
+
+.stepper-vertical .stepper-step .stepper-icon {
+  @apply shrink-0 relative z-10;
+}
+
+.stepper-vertical .stepper-step .stepper-container {
+  @apply flex flex-col flex-1 min-w-0 ml-xs gap-0;
+}
+
+.stepper-vertical .stepper-step .stepper-container .stepper-label {
+  @apply mb-xxs;
+}
+
+/* Hide horizontal connector for vertical layout */
+.stepper-vertical .stepper-step:not(:last-child)::after {
+  content: none;
+}
+
+/* Vertical connector line - runs from bottom of icon down to next step */
+.stepper-vertical .stepper-step:not(:last-child) {
+  @apply relative;
+}
+
+.stepper-vertical .stepper-step:not(:last-child)::before {
+  content: "";
+  @apply block absolute left-4 top-8 bottom-0 w-px bg-bordercolor -translate-x-1/2 z-0;
+}

package/src/pages/components/stepper.haml

@@ -0,0 +1,67 @@
+---
+tags: components
+title: Stepper
+---
+
+%p.mb-heading Stepper component for multi-step wizard flows. Use for checkout, onboarding, or any sequential process.
+%p.mb-sm
+  Completed steps show a check icon. The active step is highlighted. Pending steps are muted.
+.mb-md
+  .stepper
+    .stepper-step.completed
+      .stepper-icon
+        %span.icon.icon-check
+      .stepper-label Step 1
+    .stepper-step.active
+      .stepper-icon 2
+      .stepper-label Step 2
+    .stepper-step
+      .stepper-icon 3
+      .stepper-label Step 3
+    .stepper-step
+      .stepper-icon 4
+      .stepper-label Step 4
+
+%p.mb-heading.mt-lg Four-step wizard example with all completed except the last.
+.mb-md
+  .stepper
+    .stepper-step.completed
+      .stepper-icon
+        %span.icon.icon-check
+      .stepper-label Details
+    .stepper-step.completed
+      .stepper-icon
+        %span.icon.icon-check
+      .stepper-label Payment
+    .stepper-step.completed
+      .stepper-icon
+        %span.icon.icon-check
+      .stepper-label Review
+    .stepper-step.active
+      .stepper-icon 4
+      .stepper-label Confirm
+
+%p.mb-heading.mt-lg Vertical stepper variant. Add the .stepper-vertical class to the container. Use .stepper-container to wrap the label and content for each step.
+.mb-md
+  .stepper.stepper-vertical
+    .stepper-step.completed
+      .stepper-icon
+        %span.icon.icon-check
+      .stepper-container
+        .stepper-label Enter your details
+        %p.text-sm.text-label-color.mt-xxs Name, email, and shipping address.
+    .stepper-step.active
+      .stepper-icon 2
+      .stepper-container
+        .stepper-label Choose payment method
+        %p.text-sm.text-label-color.mt-xxs Credit card or PayPal.
+    .stepper-step
+      .stepper-icon 3
+      .stepper-container
+        .stepper-label Review order
+        %p.text-sm.text-label-color.mt-xxs Verify your order before confirming.
+    .stepper-step
+      .stepper-icon 4
+      .stepper-container
+        .stepper-label Confirmation
+        %p.text-sm.text-label-color.mt-xxs Order complete.

package/src/search-index.11ty.js

@@ -0,0 +1,57 @@
+module.exports = class {
+  data() {
+    return {
+      permalink: "/search-index.json",
+      eleventyExcludeFromCollections: true,
+    };
+  }
+
+  render(data) {
+    const collectionMap = {
+      components: "/components/",
+      button: "/buttons/",
+      forms: "/forms/",
+      tables: "/tables/",
+      charts: "/charts/",
+      layout: "/layout/",
+      navigation: "/navigation/",
+      typography: "/typography/",
+      agenticqa: "/agenticqa/",
+      icons: "/icons/",
+      issuing: "/issuing/",
+      layouts: null, // layouts have their own URLs
+    };
+
+    const items = [];
+
+    for (const [collName, baseUrl] of Object.entries(collectionMap)) {
+      if (!baseUrl || !data.collections[collName]) continue;
+      const collection = data.collections[collName];
+      for (const item of collection) {
+        if (item.data && item.data.title) {
+          const anchor = encodeURIComponent(item.data.title);
+          items.push({
+            title: item.data.title,
+            url: baseUrl + "#" + anchor,
+            section: collName,
+          });
+        }
+      }
+    }
+
+    // Add layout pages (standalone pages with their own URL)
+    if (data.collections.layouts) {
+      for (const item of data.collections.layouts) {
+        if (item.data && item.data.title && item.url) {
+          items.push({
+            title: item.data.title,
+            url: item.url.startsWith("/") ? item.url : "/" + item.url,
+            section: "layouts",
+          });
+        }
+      }
+    }
+
+    return JSON.stringify(items);
+  }
+};