@repobit/dex-system-design 0.22.11 → 0.23.1

package/src/components/anchor/anchor.stories.js

@@ -1,191 +1,192 @@
 import { html } from 'lit';
-import '../accordion/accordion-bg.js';
-import '../anchor/anchor-nav.js';
-import '../carousel/carousel.js';
-import '../heading/heading.js';
-import '../pricing-cards/pricing-card.js';
-import '../tabs/tabs.js';
+import './anchor-nav.js';
 
 export default {
-  title        : 'Navigation/Anchor - Navbar',
-  component    : 'bd-anchor-nav',
-  subcomponents: {
-    'bd-anchor-nav-item': 'bd-anchor-nav-item'
-  },
-  tags: ['autodocs'],
-
-  argTypes: {
-    // Proprietăți pentru bd-anchor-nav
-    position: {
-      control    : { type: 'select' },
-      options    : ['fixed', 'sticky', 'relative'],
-      description: 'Position of the navigation bar',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'fixed' },
-        category    : 'bd-anchor-nav'
-      }
-    },
-    theme: {
-      control    : { type: 'select' },
-      options    : ['light', 'dark'],
-      description: 'Color theme of the navigation bar',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'light' },
-        category    : 'bd-anchor-nav'
-      }
-    },
-    offset: {
-      control    : { type: 'number', min: 0, max: 200, step: 10 },
-      description: 'Offset in pixels from the top when scrolling',
-      table      : {
-        type        : { summary: 'number' },
-        defaultValue: { summary: '0' },
-        category    : 'bd-anchor-nav'
-      }
-    }
-  },
-
+  title     : 'Components/AnchorNav',
+  tags      : ['autodocs'],
   parameters: {
     docs: {
       description: {
         component: `
-# bd-anchor-nav & bd-anchor-nav-item
-
-Navigation component for smooth scrolling to page sections.
+**BdAnchorNav** is a Lit web component that renders a sticky navigation bar with anchor links and a "Buy now" CTA button.
 
-## Usage
+It consists of two elements:
+- \`<bd-anchor-nav>\` — the nav container with auto-generated anchor links and a Buy button
+- \`<bd-anchor-nav-item>\` — declarative items that define the link labels via their \`title\` attribute
 
+### Usage
 \`\`\`html
 <bd-anchor-nav>
-  <bd-anchor-nav-item title="Features" id="features"></bd-anchor-nav-item>
-  <bd-anchor-nav-item title="Pricing" id="pricing"></bd-anchor-nav-item>
-  <bd-anchor-nav-item title="FAQ" id="faq"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Overview"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Features"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Reviews"></bd-anchor-nav-item>
+  <bd-anchor-nav-item title="Pricing"></bd-anchor-nav-item>
 </bd-anchor-nav>
 \`\`\`
 
-## Properties
-
-### bd-anchor-nav
-| Attribute | Type | Default | Description |
-|-----------|------|---------|-------------|
-| \`position\` | 'fixed' \| 'sticky' \| 'relative' | \`fixed\` | CSS position |
-| \`theme\` | 'light' \| 'dark' | \`light\` | Color theme |
-| \`offset\` | number | \`0\` | Scroll offset from top |
-
-### bd-anchor-nav-item
-| Attribute | Type | Required | Description |
-|-----------|------|----------|-------------|
-| \`title\` | string | Yes | Navigation link text |
-| \`id\` | string | Yes | Target section ID |
-
-## Features
-- Smooth scrolling to sections
-- Active state highlighting
-- Responsive design
-- Keyboard navigation support
+### Behavior
+- Links are auto-indexed as \`anchor-1\`, \`anchor-2\`, etc.
+- Clicking a link sets it as active and smooth-scrolls to \`#anchor-N-section\` with a 120px offset
+- The Buy now button smooth-scrolls to \`#section-pricing\`
+- Active state is tracked internally via \`this.activeId\`
+
+### Notes
+- \`bd-anchor-nav-item\` is a plain \`HTMLElement\` (not LitElement) — it is used only as a declarative data source
+- The nav renders all links dynamically from its children
         `
       }
     }
+  },
+  argTypes: {
+    items: {
+      control    : 'object',
+      description: 'Array of nav item labels rendered as anchor links',
+      table      : {
+        type        : { summary: 'string[]' },
+        defaultValue: { summary: "['Overview', 'Features', 'Reviews', 'Pricing']" },
+        category    : 'Content'
+      }
+    }
   }
 };
 
-const Template = (args) => html`
-  <bd-anchor-nav 
-    position="${args.position}" 
-    theme="${args.theme}" 
-    offset="${args.offset}"
-  >
-    <bd-anchor-nav-item title="Anchor 1" id="anchor-1"></bd-anchor-nav-item>
-    <bd-anchor-nav-item title="Anchor 2" id="anchor-2"></bd-anchor-nav-item>
-    <bd-anchor-nav-item title="Anchor 3" id="anchor-3"></bd-anchor-nav-item>
+const renderNav = (items) => html`
+  <bd-anchor-nav>
+    ${items.map(label => html`
+      <bd-anchor-nav-item title="${label}"></bd-anchor-nav-item>
+    `)}
   </bd-anchor-nav>
-
-  <bd-container>
-    <section id="anchor-1" style="height: 800px; padding-top: 80px;">
-      <hr />
-      <bd-accordion-bg title="Questions? Answers.">
-        <bd-accordion-bg-item title="How does Bitdefender Internet Security protect me?">
-          <bd-p kind="small">Provides comprehensive protection against online threats.</bd-p>
-        </bd-accordion-bg-item>
-        <bd-accordion-bg-item title="Does Bitdefender protect against ransomware?">
-          <bd-p kind="small">Yes, with multi-layered defense mechanisms.</bd-p>
-        </bd-accordion-bg-item>
-      </bd-accordion-bg>
-    </section>
-
-    <section id="anchor-2" style="height: 800px; padding-top: 80px;">
-      <hr />
-      <bd-tabs-component></bd-tabs-component>
-    </section>
-
-    <section id="anchor-3" style="height: 800px; padding-top: 80px;">
-      <hr />
-      <bd-carousel-section title="Need help? We've got answers!">
-        <bd-carousel-item
-          title="Scam Copilot Bot"
-          subTitle="AI chatbot for suspicious interaction detection"
-          icon="/assets/light-carousel-img1.png"
-        >
-          <bd-h as="h4">Scam Copilot Bot</bd-h>
-          <bd-p kind="small">Helps identify suspicious online interactions.</bd-p>
-        </bd-carousel-item>
-      </bd-carousel-section>
-    </section>
-
-    <section id="section-pricing" style="height: 800px; padding-top: 80px;">
-      <bd-pricing-container></bd-pricing-container>
-    </section>
-  </bd-container>
 `;
 
-export const Default = Template.bind({});
-Default.args = {
-  position: 'fixed',
-  theme   : 'light',
-  offset  : 0
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name      : 'Default (4 items)',
+  render    : () => renderNav(['Overview', 'Features', 'Reviews', 'Pricing']),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default nav with four anchor links and the Buy now button. The first link is active on mount.'
+      }
+    }
+  }
 };
 
-export const Sticky = Template.bind({});
-Sticky.args = {
-  ...Default.args,
-  position: 'sticky'
+export const TwoItems = {
+  name      : 'Two Items',
+  render    : () => renderNav(['Overview', 'Pricing']),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Minimal nav with only two items. Verifies layout and active state with a small item count.'
+      }
+    }
+  }
 };
 
-export const DarkTheme = Template.bind({});
-DarkTheme.args = {
-  ...Default.args,
-  theme: 'dark'
+export const ManyItems = {
+  name      : 'Many Items (7)',
+  render    : () => renderNav(['Overview', 'Features', 'Security', 'Performance', 'Reviews', 'FAQ', 'Pricing']),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Nav with 7 items. Useful for testing overflow behavior and link truncation on smaller viewports.'
+      }
+    }
+  }
 };
 
-export const WithOffset = Template.bind({});
-WithOffset.args = {
-  ...Default.args,
-  offset: 80
+export const SingleItem = {
+  name      : 'Single Item (edge case)',
+  render    : () => renderNav(['Pricing']),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Edge case: only one anchor item. The single link should be active by default.'
+      }
+    }
+  }
 };
 
-export const MinimalExample = () => html`
-  <bd-anchor-nav>
-    <bd-anchor-nav-item title="Home" id="home"></bd-anchor-nav-item>
-    <bd-anchor-nav-item title="About" id="about"></bd-anchor-nav-item>
-    <bd-anchor-nav-item title="Contact" id="contact"></bd-anchor-nav-item>
-  </bd-anchor-nav>
+export const LongLabels = {
+  name  : 'Long Item Labels',
+  render: () => renderNav([
+    'Product Overview',
+    'Advanced Security Features',
+    'Performance Benchmarks',
+    'Customer Reviews & Ratings',
+    'Plans & Pricing'
+  ]),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Items with longer label strings. Tests whether the nav handles text overflow or wrapping gracefully.'
+      }
+    }
+  }
+};
+
+export const WithScrollTargets = {
+  name  : 'With Scroll Targets',
+  render: () => html`
+    <div style="position: sticky; top: 0; z-index: 100;">
+      <bd-anchor-nav>
+        <bd-anchor-nav-item title="Overview"></bd-anchor-nav-item>
+        <bd-anchor-nav-item title="Features"></bd-anchor-nav-item>
+        <bd-anchor-nav-item title="Pricing"></bd-anchor-nav-item>
+      </bd-anchor-nav>
+    </div>
+
+    <div id="anchor-1-section" style="padding: 80px 24px; background: #EDF9FF;">
+      <h2>Overview Section</h2>
+      <p>This is the overview content area. The nav scrolls here when "Overview" is clicked.</p>
+    </div>
+    <div id="anchor-2-section" style="padding: 80px 24px; background: #fff;">
+      <h2>Features Section</h2>
+      <p>This is the features content area.</p>
+    </div>
+    <div id="anchor-3-section" style="padding: 80px 24px; background: #EDF9FF;">
+      <h2>Pricing Section</h2>
+      <p>This is the pricing content area.</p>
+    </div>
+    <div id="section-pricing" style="padding: 80px 24px; background: #fff;">
+      <h2>Buy Now Target</h2>
+      <p>The "Buy now" button scrolls to this element (#section-pricing).</p>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full scroll demo with actual target sections in the DOM. Click nav links or the Buy now button to trigger smooth scroll behavior.'
+      }
+    }
+  }
+};
 
-  <bd-container>
-    <section id="home" style="height: 400px; padding-top: 80px;">
-      <bd-h as="h2">Home</bd-h>
-      <bd-p>Home section content.</bd-p>
-    </section>
-    
-    <section id="about" style="height: 400px;">
-      <bd-h as="h2">About</bd-h>
-      <bd-p>About section content.</bd-p>
-    </section>
-    
-    <section id="contact" style="height: 400px;">
-      <bd-h as="h2">Contact</bd-h>
-      <bd-p>Contact section content.</bd-p>
-    </section>
-  </bd-container>
-`;
+export const MobileView = {
+  name      : 'Mobile View',
+  render    : () => renderNav(['Overview', 'Features', 'Reviews', 'Pricing']),
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : {
+      description: {
+        story: 'Nav rendered at 375px mobile width. Tests horizontal overflow and Buy now button layout at small viewports.'
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: '🛝 Playground',
+  args: {
+    items: ['Overview', 'Features', 'Reviews', 'Pricing']
+  },
+  render    : (args) => renderNav(args.items),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive playground. Edit the `items` array in Controls to add, remove, or rename nav links.'
+      }
+    }
+  }
+};

package/src/components/awards/awards-icon.js

@@ -0,0 +1,44 @@
+import { LitElement, html } from 'lit';
+
+export class BdIcon extends LitElement {
+  static properties = {
+    src   : { type: String },
+    label : { type: String },
+    width : { type: String },
+    height: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.width = '100%';
+    this.height = '100%';
+  }
+
+  render() {
+    const ariaLabel = this.label || null;
+
+    const commonStyles = `
+      display: block;
+      width: 100%;
+      height: 100%;
+    `;
+
+    return html`
+      ${this.src
+          ? html`<img 
+            src="${this.src}" 
+            alt="${ariaLabel}"
+            aria-label="${ariaLabel}"
+            width="${this.width}" 
+            height="${this.height}"
+            style="${commonStyles} object-fit: contain;"
+          >`
+          : html`<div style="${commonStyles}">
+            <slot></slot>
+          </div>`
+      }
+    `;
+  }
+}
+
+customElements.define('bd-icon', BdIcon);