@repobit/dex-system-design 0.24.3 → 0.24.5

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

@@ -1,319 +0,0 @@
-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.' } } }
-};