@repobit/dex-system-design 0.23.41 → 0.23.43

package/src/components/tabsComponent/tabsComponent.css.js

@@ -0,0 +1,267 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    --border-card-green: var(--color-green-700);
+    --badge-background: var(--color-blue-700);
+    --bd-accesibility-focus: var(--color-blue-500);
+
+    --text-color-white: var(--color-neutral-0);
+    font-size: 100%;
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+    padding-top: var(--spacing-64);
+    padding-bottom: var(--spacing-64);
+  }
+.bd-tabs-subtitle{
+font-size: var(--typography-body-regular-fontSize);
+max-width: 500px;
+text-align: center;
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: var(--spacing-32);
+    margin-bottom: var(--spacing-32);
+
+}
+  .bd-tab-button p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  .bd-tab-button:focus-visible,
+  .bd-find-out-more:focus-visible {
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
+    border-radius: var(--space-2xs);
+  }
+  .bd-tabs-component .bd-left img {
+    max-width: 90%;
+  }
+
+  .bd-card-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 36px 0px;
+    border-radius: 5px;
+    margin-top: 10px;
+    margin: auto;
+    width: 50%;
+  }
+
+  .bd-card-container .bd-left {
+    flex: 1;
+    padding-right: 20px;
+  }
+
+  .bd-card-container .bd-right {
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+    padding: var(--spacing-0) var(--spacing-24);
+  }
+
+  .bd-tabs-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 40px;
+    flex-wrap: wrap;
+    border-bottom: 1px solid #e4f2ff;
+    margin: 0 auto;
+    margin-bottom: var(--spacing-32);
+  }
+
+  .bd-tabs-container button {
+    color: #006eff;
+    border: 0;
+    padding: 9px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    font-size: 1.125em;
+    max-height: 55px;
+  }
+
+  .bd-tabs-container button::after {
+    background: #006eff;
+    content: "";
+    height: 4px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    transition: width 1s ease;
+  }
+
+  .bd-tabs-container button.bd-selected::after {
+    width: 100%;
+  }
+
+  .bd-tabs-container button.bd-selected {
+    color: black;
+  }
+
+  .bd-tab-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+   <!-- font-weight: bold; -->
+  }
+
+  .bd-tab-button img {
+    margin-right: 8px;
+    height: 30px;
+    width: 30px;
+  }
+
+  .bd-tabs-component h2 {
+    margin-bottom: 75px;
+    max-width: 630px;
+    text-align: center;
+  }
+
+  .bd-tabs-component {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .bd-ul-privacy {
+    list-style: none;
+    padding-inline-start: 0px;
+  }
+
+  .bd-find-out-more {
+    text-decoration: none;
+    background-color: white;
+    color: #006eff;
+    border: 0;
+    display: flex;
+    gap: 10px;
+    align-items: start;
+    position: relative;
+    cursor: pointer;
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  .bd-find-out-more .bd-arrow svg {
+    width: 12px;
+    height: 12px;
+    position: relative;
+    top: 1.5px;
+  }
+
+  .bd-right h3 {
+    font-size: var(--typography-heading-h4-fontSize);
+  }
+
+  .bd-section-title {
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+  }
+
+  /* ✅ Responsive Design */
+  @media (max-width: 1200px) {
+    .bd-tabs-component.bd-we-container {
+      max-width: 100%;
+      padding: 0 20px;
+    }
+  }
+
+  @media (max-width: 992px) {
+    .bd-tabs-component .bd-card-container {
+      flex-direction: column;
+      width: 90%;
+    }
+
+    .bd-tabs-component .bd-tabs-container {
+      flex-wrap: wrap;
+    }
+
+    .bd-tabs-component .bd-tabs-container button picture img {
+      width: 24px;
+    }
+
+    .bd-tabs-component .bd-card-container {
+      align-items: center;
+      text-align: center;
+    }
+
+    .bd-tabs-component .bd-left {
+      width: 100%;
+      padding: 10px;
+    }
+
+    .bd-tabs-component .bd-left img {
+      max-width: 50%;
+    }
+
+    .bd-tabs-component .bd-right {
+      width: 100%;
+      padding: 10px;
+    }
+
+    .bd-tabs-component.bd-we-container {
+      max-width: 100%;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bd-card-container {
+      flex-direction: column;
+      width: 100%;
+      padding: 20px;
+    }
+
+    .bd-section-title {
+      text-align: center;
+      font-size: 1.6em;
+      margin-bottom: 30px;
+      padding: 10px;
+    }
+
+    .bd-right h3 {
+      text-align: center;
+    }
+
+    .bd-tabs-component {
+      margin-top: 24px;
+    }
+
+    .bd-tabs-container {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+    }
+
+    .bd-tabs-container button {
+      font-size: 1.2em;
+      padding: 6px;
+    }
+
+    .bd-tabs-component .bd-left img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .bd-tabs-component .bd-right {
+      text-align: center;
+      padding: 10px;
+      text-align: left;
+    }
+
+    .bd-find-out-more {
+      justify-content: center;
+    }
+  }
+`;

package/src/components/tabsComponent/tabsComponent.js

@@ -0,0 +1,193 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../highlight/highlight.js";
+import "../list/list-item/list-item.js";
+import "../list/list.js";
+import "../paragraph/paragraph.js";
+import tabsCSS from "./tabsComponent.css.js";
+
+class TabsComponent extends LitElement {
+  static properties = {
+    selectedTab: { type: Number }
+  };
+
+  constructor() {
+    super();
+    this.selectedTab = 0;
+  }
+
+  selectTab(index) {
+    this.selectedTab = index;
+    this.requestUpdate();
+  }
+
+  render() {
+    const tabs = [
+      {
+        title    : "Privacy Protection",
+        imageBase: "/assets/tabs-img1.png",
+        icon     : "/assets/pic1.png"
+      },
+      {
+        title    : "Identity Protection",
+        imageBase: "/assets/tabs-img2.png",
+        icon     : "/assets/pic2.png"
+      },
+      {
+        title    : "Device Protection",
+        imageBase: "/assets/tabs-img3.png",
+        icon     : "/assets/pic3.png"
+      },
+      {
+        title    : "Financial Insurance",
+        imageBase: "/assets/tabs-img3.png",
+        icon     : "/assets/pic3.png"
+      }
+    ];
+
+    const content = [
+      {
+        heading    : "Take back your family's digital privacy",
+        description: () => html`
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md">
+              <bd-p kind="small">Enjoy complete data privacy with
+              <strong>Bitdefender Premium VPN</strong>.</bd-p>
+            </bd-li>
+            <bd-li kind="bullet" size="md">
+              <bd-p kind="small">Escape intrusive ads and trackers with our advanced
+              <strong>Ad-Blocker</strong> and
+              <strong>Anti-Tracker</strong> features.</bd-p>
+            </bd-li>
+            <bd-li kind="bullet" size="md">
+              <bd-p kind="small">Shield yourself with robust
+              <strong>Webcam and Microphone Protection</strong>.</bd-p>
+            </bd-li>
+          </bd-list>`,
+        href: "#1"
+      },
+      {
+        heading    : "Safe data. Safe you.",
+        description: () => html`
+          <bd-p kind="small">Get instant alerts for potential threats to your personal data and
+            finances.</bd-p>
+          <bd-p kind="small">Receive clear and concise advice on handling data breaches.</bd-p>
+          <bd-p kind="small">Reduce the risk of online ID theft by scanning your digital
+            footprint.</bd-p>`,
+        href: "#2"
+      },
+      {
+        heading    : "We secure what you hold dear",
+        description: () => html`
+          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
+          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
+            attempts.</bd-p>
+          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
+        href: "#3"
+      },
+      {
+        heading    : "Financial Insurance",
+        description: () => html`
+          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
+          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
+            attempts.</bd-p>
+          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
+        href: "#4"
+      }
+    ];
+
+    const selectedTabData = tabs[this.selectedTab];
+
+    return html`
+      <div class="bd-tabs-component">
+        <bd-highlight highlight-text="family member">
+          Customized online protection for each family member - Smart, Private &
+          Safe
+        </bd-highlight>
+        <bd-p kind="regular" class="bd-tabs-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.</bd-p>
+        <div class="bd-tabs-container">
+          ${tabs.map(
+            (tab, index) => html`
+              <button
+                role="tab"
+                aria-selected="${this.selectedTab === index ? "true" : "false"}"
+                class=${this.selectedTab === index
+                  ? "bd-selected bd-tab-button"
+                  : "bd-tab-button"}
+                @click=${() => this.selectTab(index)}
+                aria-controls="tab-content-${index}"
+                id="tab-${index}"
+              >
+                <img src="${tab.icon}" alt="${tab.title} Icon" />
+                <bd-p kind="small"><strong>${tab.title}</strong></bd-p>
+              </button>
+            `
+          )}
+        </div>
+        <div class="bd-card-container">
+          <div class="bd-left">
+            <picture>
+              ${["webp", "png"].map((format) =>
+                ["2000", "750"].map(
+                  (width) => html`
+                    <source
+                      type="image/${format}"
+                      srcset="
+                        ${selectedTabData.imageBase}?width=${width}&format=${format}&optimize=medium
+                      "
+                      media="${width === "2000" ? "(min-width: 600px)" : ""}"
+                    />
+                  `
+                )
+              )}
+              <img
+                loading="lazy"
+                alt="${selectedTabData.title} Image"
+                src="${selectedTabData.imageBase}?width=750&format=png&optimize=medium"
+              />
+            </picture>
+          </div>
+          <div class="bd-right">
+            <bd-h as="h3" id="tab-content-heading-${this.selectedTab}">
+              ${content[this.selectedTab].heading}
+            </bd-h>
+            <div
+              id="tab-content-${this.selectedTab}"
+              aria-labelledby="tab-content-heading-${this.selectedTab}"
+            >
+              ${content[this.selectedTab].description()}
+            </div>
+            <a
+              href="${content[this.selectedTab].href}"
+              class="bd-find-out-more"
+              aria-label="Find out more about ${content[this.selectedTab]
+                .heading}"
+            >
+              <bd-p kind="small">Find out more</bd-p>
+              <span class="bd-arrow">
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14"></path>
+                  <path d="M12 5l7 7-7 7"></path>
+                </svg>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+TabsComponent.styles = [tokens, tabsCSS];
+
+customElements.define("bd-tabs-component", TabsComponent);

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

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