@repobit/dex-system-design 0.23.71 → 0.23.73

package/src/components/tabsComponentFamily/tabsComponentFamily.js

@@ -0,0 +1,180 @@
+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);

package/src/components/tabsComponentFamily/tabsComponentFamily.stories.js

@@ -0,0 +1,319 @@
+import { html } from 'lit';
+import './tabsComponentFamily.js';
+
+export default {
+  title     : 'Components/TabsComponentFamily',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**TabsComponentFamily** is a fully slotted Lit component for a tab-based content showcase with left content and right image.
+
+### Usage
+\`\`\`html
+<bd-tabs-component-family
+  title="Customized online protection for each family member"
+  highlight-text="family member"
+  subtitle="Your subtitle here."
+>
+  <bd-tab-content-panel-family
+    title="Admin"
+    image-alt="Description"
+    cta-label="Stay worry free"
+    cta-href="#"
+  >
+    <bd-h as="h3" slot="heading">Your heading here.</bd-h>
+    <div slot="content">
+      <bd-p kind="small">Your content here.</bd-p>
+    </div>
+    <img slot="image" src="/assets/image.png" alt="Description" loading="lazy" />
+  </bd-tab-content-panel-family>
+</bd-tabs-component-family>
+\`\`\`
+
+### Atribute \`bd-tab-content-panel-family\`
+| Atribut | Tip | Descriere |
+|---|---|---|
+| \`title\` | String | Label-ul butonului de tab |
+| \`icon\` | String | Cale imagine icon lângă label (opțional) |
+| \`image-src\` | String | Imaginea din dreapta (fallback când nu există slot="image") |
+| \`image-alt\` | String | Alt text imagine |
+| \`cta-label\` | String | Text buton CTA (alternativă la slot) |
+| \`cta-href\` | String | Href buton CTA |
+| \`cta-kind\` | String | Kind buton CTA (default: danger) |
+| \`cta-size\` | String | Size buton CTA (default: md) |
+
+### Slot-uri \`bd-tab-content-panel-family\`
+| Slot | Descriere |
+|---|---|
+| \`heading\` | Heading custom |
+| \`content\` | Orice conținut: paragrafe, liste, etc. |
+| \`image\` | Imagine custom — suprascrie \`image-src\` |
+| \`cta\` | Buton/link custom — suprascrie \`cta-label\` |
+        `
+      }
+    }
+  },
+  argTypes: {
+    title: {
+      control    : 'text',
+      description: 'Titlul principal al componentei',
+      table      : { type: { summary: 'string' }, category: 'TabsComponentFamily' }
+    },
+    subtitle: {
+      control    : 'text',
+      description: 'Subtitlul componentei',
+      table      : { type: { summary: 'string' }, category: 'TabsComponentFamily' }
+    },
+    highlightText: {
+      control    : 'text',
+      description: 'Textul care se highlightează în titlu',
+      table      : { type: { summary: 'string' }, category: 'TabsComponentFamily' }
+    }
+  }
+};
+
+const panels = [
+  {
+    title   : 'Admin',
+    imageSrc: '/assets/tabs-img1.png',
+    imageAlt: 'Admin using laptop',
+    heading : 'Keep your loved ones protected.',
+    content : 'As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard. Effortlessly manage settings, monitor real-time alerts, and maintain control without compromising simplicity or security.',
+    ctaLabel: 'Stay worry free',
+    ctaHref : '#admin'
+  },
+  {
+    title   : 'Adult',
+    imageSrc: '/assets/tabs-img2.png',
+    imageAlt: 'Adult protection',
+    heading : 'Stay safe online, every day.',
+    content : 'Advanced privacy and security tools tailored for adults. Browse safely, protect your identity, and keep your data private at all times.',
+    ctaLabel: 'Learn more',
+    ctaHref : '#adult'
+  },
+  {
+    title   : 'Teen',
+    imageSrc: '/assets/tabs-img3.png',
+    imageAlt: 'Teen protection',
+    heading : 'Safe browsing for teens.',
+    content : 'Give teens the freedom to explore online while keeping them protected from inappropriate content, cyberbullying, and online threats.',
+    ctaLabel: 'Explore features',
+    ctaHref : '#teen'
+  },
+  {
+    title   : 'Child',
+    imageSrc: '/assets/tabs-img3.png',
+    imageAlt: 'Child protection',
+    heading : 'A safe digital world for children.',
+    content : 'Comprehensive parental controls and content filtering ensure your child has a safe, age-appropriate online experience every time they connect.',
+    ctaLabel: 'Protect your child',
+    ctaHref : '#child'
+  }
+];
+
+const renderPanels = () => panels.map(p => html`
+  <bd-tab-content-panel-family
+    title="${p.title}"
+    image-src="${p.imageSrc}"
+    image-alt="${p.imageAlt}"
+    cta-label="${p.ctaLabel}"
+    cta-href="${p.ctaHref}"
+  >
+    <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+    <div slot="content">
+      <bd-p kind="small">${p.content}</bd-p>
+    </div>
+  </bd-tab-content-panel-family>
+`);
+
+export const Default = {
+  name  : 'Default (4 tabs)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member – Smart, Private & Safe"
+      highlight-text="family member"
+      subtitle="Your family is unique and so should be your online security. Our family protection plan adapts to each member's needs, offering the ideal mix of privacy, freedom, and safety."
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Default cu 4 tab-uri și conținut complet.' } } }
+};
+
+export const WithImageSlot = {
+  name  : 'Cu slot="image" (picture element)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member – Smart, Private & Safe"
+      highlight-text="family member"
+      subtitle="Folosind slot='image' pentru control complet asupra imaginii."
+    >
+      ${panels.map(p => html`
+        <bd-tab-content-panel-family
+          title="${p.title}"
+          cta-label="${p.ctaLabel}"
+          cta-href="${p.ctaHref}"
+        >
+          <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+          <div slot="content">
+            <bd-p kind="small">${p.content}</bd-p>
+          </div>
+          <picture slot="image" style="display:block;">
+            <source type="image/webp" srcset="${p.imageSrc}?width=2000&format=webp&optimize=medium" media="(min-width: 600px)" />
+            <source type="image/webp" srcset="${p.imageSrc}?width=750&format=webp&optimize=medium" />
+            <img
+              src="${p.imageSrc}"
+              alt="${p.imageAlt}"
+              loading="lazy"
+              style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;"
+            />
+          </picture>
+        </bd-tab-content-panel-family>
+      `)}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Imaginea furnizată via slot="image" cu element picture complet.' } } }
+};
+
+export const NoTitleNoSubtitle = {
+  name  : 'No Title / No Subtitle',
+  render: () => html`
+    <bd-tabs-component-family>
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Fără titlu și subtitlu.' } } }
+};
+
+export const SingleTab = {
+  name  : 'Single Tab (edge case)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Protection for your family"
+      highlight-text="family"
+      subtitle="Stay protected."
+    >
+      <bd-tab-content-panel-family
+        title="Admin"
+        image-src="/assets/tabs-img1.png"
+        image-alt="Admin"
+        cta-label="Get started"
+        cta-href="#"
+      >
+        <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">Keep your loved ones protected.</bd-h>
+        <div slot="content">
+          <bd-p kind="small">Single tab edge case — only one panel available.</bd-p>
+        </div>
+      </bd-tab-content-panel-family>
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Edge case cu un singur tab.' } } }
+};
+
+export const NoCTA = {
+  name  : 'No CTA Button',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${panels.map(p => html`
+        <bd-tab-content-panel-family
+          title="${p.title}"
+          image-src="${p.imageSrc}"
+          image-alt="${p.imageAlt}"
+        >
+          <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+          <div slot="content">
+            <bd-p kind="small">${p.content}</bd-p>
+          </div>
+        </bd-tab-content-panel-family>
+      `)}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Fără buton CTA.' } } }
+};
+
+export const WithIcons = {
+  name  : 'With Tab Icons',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${panels.map((p, i) => html`
+        <bd-tab-content-panel-family
+          title="${p.title}"
+          icon="/assets/pic${i + 1}.png"
+          image-src="${p.imageSrc}"
+          image-alt="${p.imageAlt}"
+          cta-label="${p.ctaLabel}"
+          cta-href="${p.ctaHref}"
+        >
+          <bd-h as="h3" slot="heading" style="color: var(--color-blue-600);">${p.heading}</bd-h>
+          <div slot="content">
+            <bd-p kind="small">${p.content}</bd-p>
+          </div>
+        </bd-tab-content-panel-family>
+      `)}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Tab-uri cu iconiță lângă label.' } } }
+};
+
+export const MobileView = {
+  name  : 'Mobile View (375px)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Vedere mobilă la 375px.' } }
+  }
+};
+
+export const TabletView = {
+  name  : 'Tablet View (768px)',
+  render: () => html`
+    <bd-tabs-component-family
+      title="Customized online protection for each family member"
+      highlight-text="family member"
+      subtitle="Stay protected at all times."
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: {
+    viewport: { defaultViewport: 'tablet' },
+    docs    : { description: { story: 'Vedere tabletă la 768px.' } }
+  }
+};
+
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    title        : 'Customized online protection for each family member – Smart, Private & Safe',
+    subtitle     : 'Your family is unique and so should be your online security.',
+    highlightText: 'family member'
+  },
+  render: (args) => html`
+    <bd-tabs-component-family
+      title="${args.title}"
+      highlight-text="${args.highlightText}"
+      subtitle="${args.subtitle}"
+    >
+      ${renderPanels()}
+    </bd-tabs-component-family>
+  `,
+  parameters: { docs: { description: { story: 'Playground interactiv.' } } }
+};