@repobit/dex-system-design 0.22.12 → 0.23.2

package/src/components/header/header.stories.js

@@ -1,391 +1,183 @@
 import { html } from 'lit';
-import '../picture/picture.js';
 import './header.js';
 
 export default {
-  title    : 'Sections/Header',
-  component: 'bd-header',
-  tags     : ['autodocs'],
-  argTypes : {
+  title     : 'Components/Header',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**Header** is a Lit product header component with pricing integration via \`<bd-context>\`, \`<bd-product>\`, and \`<bd-option>\` store components.
+
+### Usage
+\`\`\`html
+<bd-header
+  title="Bitdefender Total Security"
+  subtitle="Complete protection for all devices"
+  description="Award-winning security for Windows, macOS, Android & iOS."
+  product-id="ts"
+  devices="5"
+  subscription="1"
+>
+  <img slot="header-picture" src="/assets/product.png" alt="Product" />
+  <span slot="disclaimer-top">Protection for 5 devices.</span>
+</bd-header>
+\`\`\`
+
+### Slots
+| Slot | Description |
+|---|---|
+| \`header-picture\` | Product image rendered in the right column |
+| \`disclaimer-top\` | Small text below the Buy/View plans buttons |
+| \`disclaimer-bottom-text-start\` | Start of the bottom disclaimer line |
+| \`disclaimer-bottom-link\` | Link in the bottom disclaimer |
+| \`disclaimer-bottom-text-end\` | End of the bottom disclaimer line |
+
+### Notes
+- Pricing zones use \`data-store-render\` and \`data-store-price\` attributes for store integration
+- \`shadow\` prop reflects as an attribute and defaults to \`true\`
+        `
+      }
+    }
+  },
+  argTypes: {
     title: {
       control    : 'text',
-      description: 'Main product title',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
+      description: 'Product name rendered as `<bd-h as="h2">`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
     },
     subtitle: {
       control    : 'text',
-      description: 'Product subtitle or value proposition',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
+      description: 'Value proposition rendered as `<bd-h as="h4">`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
     },
     description: {
       control    : 'text',
-      description: 'Product description',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    fullPrice: {
-      control    : 'text',
-      description: 'Original price before discount',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    discount: {
-      control    : 'text',
-      description: 'Discount text or percentage',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    finalPrice: {
-      control    : 'text',
-      description: 'Final price after discount',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
+      description: 'Description paragraph rendered as `<bd-p kind="regular">`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
     },
     productId: {
       control    : 'text',
-      description: 'Product ID for bd-product component',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'vsb' }
-      }
+      description: 'Product ID passed to `<bd-product>` for store price lookup',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'vsb' }, category: 'Store' }
     },
     devices: {
       control    : 'text',
-      description: 'Number of devices for bd-option component',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '5' }
-      }
+      description: 'Number of devices for `<bd-option>`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '5' }, category: 'Store' }
     },
     subscription: {
       control    : 'text',
-      description: 'Subscription duration for bd-option component',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '1' }
-      }
-    },
-    dataLayerEvent: {
-      control    : 'text',
-      description: 'Data layer event name for analytics',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'info' }
-      }
-    },
-    headerImage: {
-      control    : 'text',
-      description: 'URL for the header image',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
+      description: 'Subscription duration in years for `<bd-option>`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '1' }, category: 'Store' }
     },
-    disclaimerTop: {
-      control    : 'text',
-      description: 'Top disclaimer text',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: 'Protection for 1 account & 5 PCs, Macs, tablets, or smartphones. Windows® | macOS® | Android™ | iOS®' }
-      }
+    shadow: {
+      control    : 'boolean',
+      description: 'Reflected attribute for shadow styling',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'true' }, category: 'Appearance' }
     },
-    disclaimerBottomStart: {
-      control    : 'text',
-      description: 'Start text for bottom disclaimer',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    disclaimerBottomLink: {
-      control    : 'text',
-      description: 'Link text for bottom disclaimer',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    },
-    disclaimerBottomEnd: {
+    dataLayerEvent: {
       control    : 'text',
-      description: 'End text for bottom disclaimer',
-      table      : {
-        type        : { summary: 'string' },
-        defaultValue: { summary: '' }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'A comprehensive header section for product pages featuring product information, pricing, call-to-action buttons, and visual elements. Perfect for security product landing pages and e-commerce sections.'
-      }
+      description: 'Data layer event name passed to `<bd-option>`',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'info' }, category: 'Analytics' }
     }
   }
 };
 
-const Template = (args) => html`
+const render = (args) => html`
   <bd-header
     title="${args.title}"
     subtitle="${args.subtitle}"
     description="${args.description}"
-    fullPrice="${args.fullPrice}"
-    discount="${args.discount}"
-    finalPrice="${args.finalPrice}"
-    productId="${args.productId}"
+    product-id="${args.productId}"
     devices="${args.devices}"
     subscription="${args.subscription}"
-    dataLayerEvent="${args.dataLayerEvent}"
+    ?shadow="${args.shadow}"
+    data-layer-event="${args.dataLayerEvent}"
   >
-    ${args.headerImage
-      ? html`
-          <bd-picture 
-            slot="header-picture"
-            .sources=${[
-              {
-                type  : 'image/webp',
-                srcset: args.headerImage,
-                media : '(min-width: 1200px)'
-              },
-              {
-                type  : 'image/webp',
-                srcset: args.headerImage,
-                media : '(min-width: 768px)'
-              },
-              {
-                type  : 'image/webp',
-                srcset: args.headerImage
-              }
-            ]}
-            alt="Security illustration"
-            fallback-src="${args.headerImage}"
-            loading="eager"
-            width="750"
-            height="500"
-          ></bd-picture>
-        `
-      : ''}
-
-    ${args.disclaimerTop
-      ? html`<span slot="disclaimer-top">${args.disclaimerTop}</span>`
-      : ''}
-
-    ${args.disclaimerBottomStart || args.disclaimerBottomLink || args.disclaimerBottomEnd
-      ? html`
-          <span slot="disclaimer-bottom-text-start">${args.disclaimerBottomStart || ''}</span>
-          <a slot="disclaimer-bottom-link" href="#">${args.disclaimerBottomLink || ''}</a>
-          <span slot="disclaimer-bottom-text-end">${args.disclaimerBottomEnd || ''}</span>
-        `
-      : ''}
+    <img slot="header-picture" src="/assets/product-header.png" alt="Product screenshot" />
+    <span slot="disclaimer-top">
+      Protection for 1 account & ${args.devices} PCs, Macs, tablets, or smartphones.
+      Windows® | macOS® | Android™ | iOS®
+    </span>
   </bd-header>
 `;
 
-export const Default = Template.bind({});
-Default.args = {
-  title                : 'Bitdefender Ultimate Security',
-  subtitle             : 'Complete Security, Advanced Privacy, and Identity Protection',
-  description          : 'All in one plan to incorporate multi-awarded device protection, solid password management, unlimited VPN traffic & personalized protection for your online identity.',
-  fullPrice            : '$139.99',
-  discount             : 'Save 44%',
-  finalPrice           : '$79.99*',
-  productId            : 'vsb',
-  devices              : '5',
-  subscription         : '1',
-  dataLayerEvent       : 'info',
-  headerImage          : 'https://picsum.photos/750/500',
-  disclaimerTop        : 'Protection for 1 account & 5 PCs, Macs, tablets, or smartphones. Windows® | macOS® | Android™ | iOS®',
-  disclaimerBottomStart: 'Learn more about',
-  disclaimerBottomLink : 'Terms & Conditions',
-  disclaimerBottomEnd  : 'before purchasing.'
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default header section for security products. Features product information, pricing with discount, call-to-action buttons, and device compatibility disclaimers. Includes bd-product and bd-option components.'
-    }
-  }
+const defaultArgs = {
+  title         : 'Bitdefender Total Security',
+  subtitle      : 'Complete real-time data protection',
+  description   : 'Award-winning cybersecurity for all your devices. Protection against viruses, malware, ransomware, and more.',
+  productId     : 'ts', devices       : '5', subscription  : '1',
+  shadow        : true, dataLayerEvent: 'info'
 };
 
-export const WithCustomImage = Template.bind({});
-WithCustomImage.args = {
-  ...Default.args,
-  headerImage: 'https://picsum.photos/750/500?random=1'
-};
-WithCustomImage.parameters = {
-  docs: {
-    description: {
-      story: 'Header with custom product image. Demonstrates how to integrate different visual assets while maintaining the same layout structure and content organization.'
-    }
-  }
-};
+// ─── Stories ───────────────────────────────────────────────────────────────
 
-export const WithDiscountedPrice = Template.bind({});
-WithDiscountedPrice.args = {
-  title                : 'Bitdefender Premium Security',
-  subtitle             : 'Advanced Security, Privacy & Identity Protection',
-  description          : 'Comprehensive security for all your devices with enhanced features and privacy options.',
-  fullPrice            : '$199.99',
-  discount             : 'Save 35%',
-  finalPrice           : '$129.99*',
-  productId            : 'ps_i',
-  devices              : '5',
-  subscription         : '1',
-  dataLayerEvent       : 'info',
-  headerImage          : 'https://picsum.photos/750/500?random=2',
-  disclaimerTop        : 'Protection for 1 account & 5 devices.',
-  disclaimerBottomStart: 'See',
-  disclaimerBottomLink : 'Details',
-  disclaimerBottomEnd  : 'for more info.',
-  shadow               : true
-};
-WithDiscountedPrice.parameters = {
-  docs: {
-    description: {
-      story: 'Header showcasing a different pricing structure with significant discount. Highlights how the component handles various discount scenarios and pricing strategies.'
-    }
-  }
+export const Default = {
+  name      : 'Default',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Full header with title, subtitle, description, and a product image slot.' } } }
 };
 
-export const WithLocalImage = Template.bind({});
-WithLocalImage.args = {
-  ...Default.args,
-  headerImage: '/assets/bd-header-us.jpg'
-};
-WithLocalImage.parameters = {
-  docs: {
-    description: {
-      story: 'Header using local image assets. Demonstrates integration with project-specific images and optimized loading with responsive picture element.'
-    }
-  }
+export const NoImage = {
+  name  : 'No Product Image',
+  render: () => html`
+    <bd-header
+      title="Bitdefender Antivirus Plus"
+      subtitle="Essential antivirus protection"
+      description="Fast, lightweight virus protection for Windows."
+      product-id="av" devices="3" subscription="1"
+    ></bd-header>
+  `,
+  parameters: { docs: { description: { story: 'Header without a `header-picture` slot — right column is empty.' } } }
 };
 
-export const MinimalHeader = Template.bind({});
-MinimalHeader.args = {
-  title         : 'Bitdefender Basic Security',
-  subtitle      : 'Essential Protection for Your Devices',
-  description   : 'Core security features to keep your devices safe from threats with minimal system impact.',
-  finalPrice    : '$49.99/year',
-  productId     : 'ts_i',
-  devices       : '5',
-  subscription  : '1',
-  dataLayerEvent: 'info',
-  headerImage   : 'https://picsum.photos/750/500?random=3'
-};
-MinimalHeader.parameters = {
-  docs: {
-    description: {
-      story: 'Minimal header variant without discount pricing. Shows a cleaner layout suitable for simpler product offerings or basic security packages.'
-    }
-  }
+export const WithDisclaimers = {
+  name  : 'With All Disclaimer Slots',
+  render: () => html`
+    <bd-header
+      title="Bitdefender Premium Security"
+      subtitle="Ultimate protection for all devices"
+      description="Unlimited devices, unlimited VPN, identity theft protection."
+      product-id="ps" devices="unlimited" subscription="1"
+    >
+      <img slot="header-picture" src="/assets/premium.png" alt="Premium Security" />
+      <span slot="disclaimer-top">Protects unlimited devices.</span>
+      <span slot="disclaimer-bottom-text-start">By purchasing you agree to our </span>
+      <a slot="disclaimer-bottom-link" href="/terms">Terms of Service</a>
+      <span slot="disclaimer-bottom-text-end"> and Privacy Policy.</span>
+    </bd-header>
+  `,
+  parameters: { docs: { description: { story: 'All disclaimer slots filled: top, bottom-text-start, bottom-link, and bottom-text-end.' } } }
 };
 
-export const NoImageHeader = Template.bind({});
-NoImageHeader.args = {
-  title         : 'Bitdefender Mobile Security',
-  subtitle      : 'Protection for Your Smartphone and Tablet',
-  description   : 'Comprehensive mobile security with anti-theft, web protection, and app lock features designed specifically for mobile devices.',
-  fullPrice     : '$29.99',
-  discount      : 'Save 20%',
-  finalPrice    : '$23.99*',
-  productId     : 'mobile',
-  devices       : '1',
-  subscription  : '1',
-  dataLayerEvent: 'info',
-  disclaimerTop : 'Protection for 1 Android or iOS device. 30-day money-back guarantee.'
-};
-NoImageHeader.parameters = {
-  docs: {
-    description: {
-      story: 'Header without product image. Useful for text-focused layouts or when visual assets are not available, while maintaining all other functionality.'
-    }
-  }
-};
-
-export const LongContentHeader = Template.bind({});
-LongContentHeader.args = {
-  title                : 'Bitdefender Total Security Ultimate Plus Premium Edition',
-  subtitle             : 'Comprehensive Multi-Layer Protection with Advanced AI Threat Detection and Real-Time Behavioral Analysis',
-  description          : 'Our most advanced security solution combines machine learning algorithms with cloud-based threat intelligence to provide unparalleled protection against emerging cyber threats, zero-day attacks, and sophisticated malware while maintaining optimal system performance and user privacy across all your connected devices.',
-  fullPrice            : '$299.99',
-  discount             : 'Limited Time Offer - Save 50%',
-  finalPrice           : '$149.99*',
-  productId            : 'ts_i',
-  devices              : '5',
-  subscription         : '2',
-  dataLayerEvent       : 'info',
-  headerImage          : 'https://picsum.photos/750/500?random=4',
-  disclaimerTop        : 'Comprehensive protection for up to 10 devices including Windows PCs, macOS computers, Android smartphones, iOS devices, and tablets. Includes 24/7 premium support and identity theft protection services.',
-  disclaimerBottomStart: 'This offer includes our',
-  disclaimerBottomLink : 'premium features bundle',
-  disclaimerBottomEnd  : 'with additional cloud storage and priority customer support. Subscription automatically renews unless canceled.'
-};
-LongContentHeader.parameters = {
-  docs: {
-    description: {
-      story: 'Header with extensive content including long titles, detailed descriptions, and comprehensive disclaimers. Demonstrates how the component handles text-heavy scenarios while maintaining readability and visual balance.'
-    }
-  }
+export const DifferentProducts = {
+  name  : 'Different Product IDs',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:40px;">
+      <bd-header title="Antivirus Plus"     subtitle="Basic protection" description="Core antivirus for Windows."                    product-id="av"  devices="1" subscription="1"></bd-header>
+      <bd-header title="Total Security"     subtitle="Complete coverage" description="Full-suite protection for all your devices."    product-id="ts"  devices="5" subscription="1"></bd-header>
+      <bd-header title="Premium Security"   subtitle="Ultimate defense"  description="Everything you need plus unlimited VPN."        product-id="ps"  devices="10" subscription="1"></bd-header>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Three headers with different `product-id`, `devices`, and content values.' } } }
 };
 
-export const BusinessProductHeader = Template.bind({});
-BusinessProductHeader.args = {
-  title                : 'Bitdefender GravityZone Business Security',
-  subtitle             : 'Enterprise-Grade Protection for Your Organization',
-  description          : 'Centralized security management with advanced threat prevention, endpoint detection and response, and risk analytics for businesses of all sizes.',
-  finalPrice           : 'Contact for Pricing',
-  productId            : 'ts_i',
-  devices              : '5',
-  subscription         : '1',
-  dataLayerEvent       : 'info',
-  headerImage          : 'https://picsum.photos/750/500?random=6',
-  disclaimerTop        : 'Scalable protection from 10 to 10,000+ endpoints. Includes centralized management console and 24/7 business support.',
-  disclaimerBottomStart: 'Request a',
-  disclaimerBottomLink : 'free business trial',
-  disclaimerBottomEnd  : 'or schedule a demo with our experts.'
-};
-BusinessProductHeader.parameters = {
-  docs: {
-    description: {
-      story: 'Business product header with enterprise-focused messaging. Features contact-based pricing instead of direct purchase, tailored for B2B sales cycles and enterprise customers.'
-    }
+export const MobileView = {
+  name      : 'Mobile View (375px)',
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Header at 375px mobile viewport. Tests two-column to single-column layout reflow.' } }
   }
 };
 
-export const DifferentProductConfigurations = Template.bind({});
-DifferentProductConfigurations.args = {
-  title                : 'Bitdefender Family Pack',
-  subtitle             : 'Complete Protection for Your Entire Household',
-  description          : 'Secure all family devices with comprehensive protection that grows with your needs.',
-  fullPrice            : '$249.99',
-  discount             : 'Save 40%',
-  finalPrice           : '$149.99*',
-  productId            : 'us_i',
-  devices              : '5',
-  subscription         : '1',
-  dataLayerEvent       : 'info',
-  headerImage          : 'https://picsum.photos/750/500?random=7',
-  disclaimerTop        : 'Protection for up to 15 devices across multiple family members. Includes parental controls and family privacy features.',
-  disclaimerBottomStart: 'Family plans include',
-  disclaimerBottomLink : 'additional features',
-  disclaimerBottomEnd  : 'for comprehensive household protection.'
-};
-DifferentProductConfigurations.parameters = {
-  docs: {
-    description: {
-      story: 'Header with different product configuration showcasing family pack options. Demonstrates how the component adapts to various product types and device counts.'
-    }
-  }
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Interactive playground. Adjust title, subtitle, description, product-id, devices, and subscription via Controls.' } } }
 };

package/src/components/heading/heading.js

@@ -4,11 +4,12 @@ import headingCSS from "./heading.css.js";
 
 export class BdH extends LitElement {
   static properties = {
-    as        : { type: String, reflect: true },
-    ariaLevel : { type: Number, attribute: "aria-level" },
-    padding   : { type: String },
-    fontWeight: { type: String },
-    color     : { type: String }
+    as           : { type: String, reflect: true },
+    ariaLevel    : { type: Number, attribute: "aria-level" },
+    padding      : { type: String },
+    paddingBottom: { type: String },
+    fontWeight   : { type: String },
+    color        : { type: String }
   };
 
   constructor() {
@@ -16,6 +17,7 @@ export class BdH extends LitElement {
     this.as = "h1";
     this.ariaLevel = null;
     this.padding = "";
+    this.paddingBottom = "";
     this.fontWeight = "";
     this.color = "";
   }
@@ -52,6 +54,7 @@ export class BdH extends LitElement {
     const validColor = this._getValidColor(this.color);
 
     if (this.padding) styles.push(`padding: ${this.padding};`);
+    if (this.paddingBottom) styles.push(`padding-bottom: ${this.paddingBottom};`);
     if (validFontWeight) styles.push(`font-weight: ${validFontWeight};`);
     if (validColor) styles.push(`color: ${validColor};`);