@repobit/dex-system-design 0.24.4 → 0.24.6

package/src/components/tabsComponent/tabsComponent.stories.js

@@ -1,134 +0,0 @@
-import { html } from 'lit';
-import './tabsComponent.js';
-
-export default {
-  title     : 'Components/TabsComponent',
-  tags      : ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-**TabsComponent** is a Lit component that renders a four-tab feature showcase with image, heading, description, and a "Find out more" link.
-
-### Usage
-\`\`\`html
-<bd-tabs-component></bd-tabs-component>
-\`\`\`
-
-### Tabs
-| Index | Title |
-|---|---|
-| 0 | Privacy Protection |
-| 1 | Identity Protection |
-| 2 | Device Protection |
-| 3 | Financial Insurance |
-
-### Structure
-- A \`<bd-highlight>\` heading with subtitle
-- A row of tab buttons (icon + label), each with \`role="tab"\` and \`aria-selected\`
-- A card with left image (\`<picture>\` with WebP/PNG sources) and right content (heading + description + link)
-
-### Behavior
-- Clicking a tab updates \`selectedTab\` and re-renders the card content
-- Image sources include width/format/optimize query params for responsive loading
-- Active tab has \`bd-selected\` class and \`aria-selected="true"\`
-
-### Accessibility
-- Tab buttons have \`role="tab"\`, \`aria-selected\`, \`aria-controls\`, and \`id\` attributes
-- Content panel has \`aria-labelledby\` linked to the heading
-        `
-      }
-    }
-  },
-  argTypes: {
-    selectedTab: {
-      control    : { type: 'select' },
-      options    : [0, 1, 2, 3],
-      description: 'Index of the initially selected tab (0–3)',
-      table      : { type: { summary: 'number' }, defaultValue: { summary: '0' }, category: 'State' }
-    }
-  }
-};
-
-// ─── Stories ───────────────────────────────────────────────────────────────
-
-export const Default = {
-  name      : 'Default (Tab 0 — Privacy Protection)',
-  render    : () => html`<bd-tabs-component></bd-tabs-component>`,
-  parameters: { docs: { description: { story: 'Default state with the first tab (Privacy Protection) selected.' } } }
-};
-
-export const Tab1Selected = {
-  name  : 'Tab 1 — Identity Protection',
-  render: () => {
-    const el = document.createElement('bd-tabs-component');
-    el.selectedTab = 1;
-    return el;
-  },
-  parameters: { docs: { description: { story: 'Component initialized with the Identity Protection tab selected.' } } }
-};
-
-export const Tab2Selected = {
-  name  : 'Tab 2 — Device Protection',
-  render: () => {
-    const el = document.createElement('bd-tabs-component');
-    el.selectedTab = 2;
-    return el;
-  },
-  parameters: { docs: { description: { story: 'Component initialized with the Device Protection tab selected.' } } }
-};
-
-export const Tab3Selected = {
-  name  : 'Tab 3 — Financial Insurance',
-  render: () => {
-    const el = document.createElement('bd-tabs-component');
-    el.selectedTab = 3;
-    return el;
-  },
-  parameters: { docs: { description: { story: 'Component initialized with the Financial Insurance tab selected.' } } }
-};
-
-export const AllTabsOverview = {
-  name  : 'All Tabs Overview',
-  render: () => html`
-    <div style="display:flex; flex-direction:column; gap:64px;">
-      <div>
-        <p style="font-weight:600; margin-bottom:8px;">Tab 0 — Privacy Protection</p>
-        <bd-tabs-component></bd-tabs-component>
-      </div>
-    </div>
-    <p style="font-size:14px; margin-top:16px; color:#666;">
-      Click the tab buttons above to switch between Privacy, Identity, Device, and Financial Insurance tabs.
-    </p>
-  `,
-  parameters: { docs: { description: { story: 'Full interactive component. Click each tab to see the content switch between the four protection categories.' } } }
-};
-
-export const MobileView = {
-  name      : 'Mobile View (375px)',
-  render    : () => html`<bd-tabs-component></bd-tabs-component>`,
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-    docs    : { description: { story: 'Tabs component at 375px. Tests tab button layout, image sizing, and content reflow on small screens.' } }
-  }
-};
-
-export const TabletView = {
-  name      : 'Tablet View (768px)',
-  render    : () => html`<bd-tabs-component></bd-tabs-component>`,
-  parameters: {
-    viewport: { defaultViewport: 'tablet' },
-    docs    : { description: { story: 'Tabs component at 768px tablet width.' } }
-  }
-};
-
-export const Playground = {
-  name  : '🛝 Playground',
-  args  : { selectedTab: 0 },
-  render: (args) => {
-    const el = document.createElement('bd-tabs-component');
-    el.selectedTab = args.selectedTab;
-    return el;
-  },
-  parameters: { docs: { description: { story: 'Interactive playground. Use the Controls panel to select which tab is initially active (0–3).' } } }
-};

package/src/components/tabsComponentFamily/tabsComponentFamily.css.js

@@ -1,181 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    --bd-accessibility-focus: var(--color-blue-500);
-    display: block;
-    font-family: var(--typography-fontFamily-sans);
-    font-size: 100%;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-  }
-
-  bd-highlight {
-    max-width: 660px;
-    padding-top: var(--spacing-32);
-  }
-
-  .bd-tabs-component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 990px;
-    margin-inline: auto;
-    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
-    box-sizing: border-box;
-  }
-
-  .bd-tabs-subtitle {
-    font-size: var(--typography-body-regular-fontSize);
-    max-width: 560px;
-    text-align: center;
-    margin-top: var(--spacing-32);
-    margin-bottom: var(--spacing-32);
-  }
-
-  .bd-tabs-container {
-    display: inline-flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    border-bottom: 1px solid var(--color-neutral-100);
-    width: 100%;
-    margin-bottom: var(--spacing-32);
-  }
-
-  .bd-tab-button {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-8);
-    background: none;
-    border: none;
-    padding: var(--spacing-10) var(--spacing-32);
-    cursor: pointer;
-    color: var(--color-blue-500);
-    position: relative;
-    font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-body-large-fontSize);
-    font-weight: var(--typography-fontWeight-semibold);
-    transition: color var(--transition-duration-fast, 150ms) ease;
-  }
-
-  .bd-tab-button::after {
-    content: "";
-    height: 3px;
-    background: var(--color-blue-500);
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 0;
-    transition: width var(--transition-duration-slow, 300ms) ease;
-  }
-
-  .bd-tab-button.bd-selected::after {
-    width: 100%;
-  }
-
-  .bd-tab-button.bd-selected {
-    color: var(--color-neutral-900);
-  }
-
-  .bd-tab-button:focus-visible {
-    outline: 2px solid var(--bd-accessibility-focus);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-  }
-
-  .bd-tab-icon {
-    width: 28px;
-    height: 28px;
-    object-fit: contain;
-  }
-
-  .bd-tab-label {
-    pointer-events: none;
-  }
-
-  .bd-panel-wrapper {
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .bd-card-container {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-64);
-    width: 100%;
-    animation: bd-fade-slide-right 350ms ease forwards;
-  }
-
-  .bd-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-24);
-  }
-
-  .bd-panel-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-8);
-  }
-
-  .bd-right {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .bd-panel-image {
-    width: 100%;
-    max-width: 520px;
-    height: auto;
-    border-radius: var(--radius-lg, 16px);
-    object-fit: cover;
-    display: block;
-  }
-
-  @keyframes bd-fade-slide-right {
-    from {
-      opacity: 0;
-      transform: translateX(24px);
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-    }
-  }
-
-  @media (max-width: 992px) {
-    .bd-card-container {
-      flex-direction: column-reverse;
-      gap: var(--spacing-32);
-    }
-
-    .bd-left {
-      align-items: center;
-      text-align: center;
-    }
-
-    .bd-panel-image {
-      max-width: 100%;
-    }
-  }
-
-  @media (max-width: 600px) {
-    .bd-tabs-container {
-      gap: var(--spacing-4);
-    }
-
-    .bd-tab-button {
-      padding: var(--spacing-8) var(--spacing-12);
-      font-size: var(--typography-fontSize-sm);
-    }
-
-    .bd-tab-icon {
-      width: 20px;
-      height: 20px;
-    }
-  }
-`;

package/src/components/tabsComponentFamily/tabsComponentFamily.js

@@ -1,180 +0,0 @@
-import { LitElement, html } from "lit";
-import { keyed } from "lit/directives/keyed.js";
-import { tokens } from "../../tokens/tokens.js";
-import "../button/button.js";
-import "../heading/heading.js";
-import "../highlight/highlight.js";
-import "../paragraph/paragraph.js";
-import tabsChildCSS from "./tabsComponentFamily.css.js";
-
-class BdTabContentPanelFamily extends HTMLElement {
-  connectedCallback() {
-    this.style.display = "none";
-  }
-}
-customElements.define("bd-tab-content-panel-family", BdTabContentPanelFamily);
-
-class TabsComponentFamily extends LitElement {
-  static properties = {
-    title          : { type: String },
-    subtitle       : { type: String },
-    highlightText  : { type: String, attribute: "highlight-text" },
-    selectedTab    : { type: Number, state: true },
-    _panelMinHeight: { type: Number, state: true }
-  };
-
-  static styles = [tokens, tabsChildCSS];
-
-  constructor() {
-    super();
-    this.title           = "";
-    this.subtitle        = "";
-    this.highlightText   = "";
-    this.selectedTab     = 0;
-    this._panelMinHeight = 0;
-  }
-
-  _getPanels() {
-    return Array.from(this.querySelectorAll(":scope > bd-tab-content-panel-family"));
-  }
-
-  selectTab(index) {
-    this.selectedTab = index;
-  }
-
-  async firstUpdated() {
-    await this.updateComplete;
-    await this._measureAllPanels();
-  }
-
-  async _measureAllPanels() {
-    const panels  = this._getPanels();
-    const wrapper = this.renderRoot.querySelector(".bd-panel-wrapper");
-    if (!wrapper || !panels.length) return;
-
-    const originalTab = this.selectedTab;
-    let maxHeight     = 0;
-
-    for (let i = 0; i < panels.length; i++) {
-      this.selectedTab = i;
-      await this.updateComplete;
-      await new Promise(r => requestAnimationFrame(r));
-      await new Promise(r => requestAnimationFrame(r));
-
-      const h = wrapper.scrollHeight;
-      if (h > maxHeight) maxHeight = h;
-    }
-
-    this.selectedTab     = originalTab;
-    await this.updateComplete;
-    this._panelMinHeight = maxHeight;
-  }
-
-  _renderPanel(panel) {
-    const headingEl = panel.querySelector("[slot='heading']");
-    const contentEl = panel.querySelector("[slot='content']");
-    const imageEl   = panel.querySelector("[slot='image']");
-    const ctaEl     = panel.querySelector("[slot='cta']");
-
-    const heading  = panel.getAttribute("heading");
-    const imageSrc = panel.getAttribute("image-src");
-    const imageAlt = panel.getAttribute("image-alt") || "";
-    const ctaLabel = panel.getAttribute("cta-label");
-    const ctaHref  = panel.getAttribute("cta-href") || "#";
-    const ctaKind  = panel.getAttribute("cta-kind") || "danger";
-    const ctaSize  = panel.getAttribute("cta-size") || "md";
-
-    return html`
-      <div class="bd-card-container">
-
-        <div class="bd-left">
-          ${headingEl
-            ? headingEl.cloneNode(true)
-            : heading
-              ? html`<bd-h as="h3" color="var(--color-blue-600)">${heading}</bd-h>`
-              : ""}
-
-          ${contentEl
-            ? html`<div class="bd-panel-content">${contentEl.cloneNode(true)}</div>`
-            : ""}
-
-          ${ctaEl
-            ? ctaEl.cloneNode(true)
-            : ctaLabel
-              ? html`
-                  <bd-button-link
-                    href="${ctaHref}"
-                    kind="${ctaKind}"
-                    size="${ctaSize}"
-                    label="${ctaLabel}"
-                    strong="true"
-                  >
-                    ${ctaLabel}
-                  </bd-button-link>`
-              : ""}
-        </div>
-
-        <div class="bd-right">
-          ${imageEl
-            ? imageEl.cloneNode(true)
-            : imageSrc
-              ? html`<img src="${imageSrc}" alt="${imageAlt}" class="bd-panel-image" loading="lazy" />`
-              : ""}
-        </div>
-
-      </div>
-    `;
-  }
-
-  render() {
-    const panels      = this._getPanels();
-    const activePanel = panels[this.selectedTab];
-
-    return html`
-      <div class="bd-tabs-component">
-
-        ${this.title
-          ? html`<bd-highlight highlight-text="${this.highlightText}">${this.title}</bd-highlight>`
-          : ""}
-
-        ${this.subtitle
-          ? html`<bd-p kind="regular" class="bd-tabs-subtitle">${this.subtitle}</bd-p>`
-          : ""}
-
-        <div class="bd-tabs-container" role="tablist">
-          ${panels.map((panel, index) => {
-            const icon = panel.getAttribute("icon");
-            return html`
-              <button
-                role="tab"
-                aria-selected="${this.selectedTab === index ? "true" : "false"}"
-                aria-controls="tab-panel-${index}"
-                id="tab-btn-${index}"
-                class="bd-tab-button ${this.selectedTab === index ? "bd-selected" : ""}"
-                @click=${() => this.selectTab(index)}
-              >
-                ${icon ? html`<img src="${icon}" alt="" class="bd-tab-icon" />` : ""}
-                <span class="bd-tab-label">${panel.getAttribute("title")}</span>
-              </button>
-            `;
-          })}
-        </div>
-
-        <div
-          id="tab-panel-${this.selectedTab}"
-          role="tabpanel"
-          aria-labelledby="tab-btn-${this.selectedTab}"
-          class="bd-panel-wrapper"
-          style="${this._panelMinHeight ? `min-height: ${this._panelMinHeight}px;` : ""}"
-        >
-          ${activePanel
-            ? keyed(this.selectedTab, this._renderPanel(activePanel))
-            : ""}
-        </div>
-
-      </div>
-    `;
-  }
-}
-
-customElements.define("bd-tabs-component-family", TabsComponentFamily);