@repobit/dex-system-design 0.21.1 → 0.22.0

package/src/components/header/header.css.js

@@ -224,7 +224,7 @@ export default css`
     }
 
     .bd-cta {
-      flex-direction: column;
+      // flex-direction: column;
       align-items: flex-start;
     }
 

package/src/components/header/header.js

@@ -1,84 +1,109 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../Button/Button.js";
 import headerCSS from "../header/header.css.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 
 class Header extends LitElement {
   static properties = {
-    productName: { type: String },
-    valueProp  : { type: String },
-    description: { type: String },
-    fullPrice  : { type: String },
-    discount   : { type: String },
-    finalPrice : { type: String }
+    title         : { type: String },
+    subtitle      : { type: String },
+    description   : { type: String },
+    fullPrice     : { type: String },
+    discount      : { type: String },
+    finalPrice    : { type: String },
+    productId     : { type: String },
+    devices       : { type: String },
+    subscription  : { type: String },
+    shadow        : { type: Boolean, reflect: true },
+    dataLayerEvent: { type: String }
   };
 
   constructor() {
     super();
+    this.title = "";
+    this.subtitle = "";
+    this.description = "";
+    this.productId = "vsb";
+    this.devices = "5";
+    this.subscription = "1";
+    this.shadow = true;
+    this.dataLayerEvent = "info";
   }
 
-  attributeChangedCallback(name, oldVal, newVal) {
-    super.attributeChangedCallback(name, oldVal, newVal);
-  }
+  // attributeChangedCallback(name, oldVal, newVal) {
+  //   super.attributeChangedCallback(name, oldVal, newVal);
+  // }
 
   render() {
     return html`
-      <div class="bd-container">
-        <div class="bd-header-left">
-          <bd-h as="h2" class="bd-product-name">${this.productName}</bd-h>
-          <bd-h as="h4" class="bd-value-prop">${this.valueProp}</bd-h>
-          <bd-p kind="regular" class="bd-description">${this.description}</bd-p>
+      <bd-context ignore-events-parent>
+        <bd-product product-id="${this.productId}">
+        <bd-option 
+          devices="${this.devices}" 
+          subscription="${this.subscription}" 
+          data-layer-event="${this.dataLayerEvent}">
 
-          <div class="bd-price-zone-top">
-            <span class="bd-full-price">${this.fullPrice}</span>
-            <span class="bd-discount">${this.discount}</span>
-          </div>
+        <div class="bd-container">
+          <div class="bd-header-left">
+            <bd-h as="h2" class="bd-product-name">${this.title}</bd-h>
+            <bd-h as="h4" class="bd-value-prop">${this.subtitle}</bd-h>
+            <bd-p kind="regular" class="bd-description">${this.description}</bd-p>
 
-          <span class="bd-price-zone-final">${this.finalPrice}</span>
+            <div class="bd-price-zone-top" data-store-hide="!it.option.price.discounted">
+              <span class="bd-full-price" data-store-render data-store-price="full"></span>
+              <span class="bd-discount" data-store-render data-store-discount="percentage"></span>
+            </div>
 
-          <div class="bd-cta">
-            <bd-button
-              label="Buy now"
-              kind="danger"
-              size="md"
-              part="buy-button"
-              font-size="18px"
-              font-weight="600"
-              >Buy now</bd-button
-            >
-            <bd-button
-              label="View more plans"
-              kind="primary-outline"
-              size="md"
-              font-size="18px"
-              font-weight="600"
-            >
-              View more plans
-            </bd-button>
-          </div>
+            <span class="bd-price-zone-final" data-store-render data-store-price="discounted||full"></span>
 
-          <bd-p kind="small" class="bd-disclaimer-top">
-            <slot name="disclaimer-top">
-              Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
-              Windows® | macOS® | Android™ | iOS®
-            </slot>
-          </bd-p>
+            <div class="bd-cta">
+              <bd-button-link
+                label="Buy now"
+                kind="danger"
+                size="md"
+                part="buy-button"
+                font-size="18px"
+                font-weight="600"
+                buyLink
+                >Buy now</bd-button-link
+              >
+              <bd-button-link
+                label="View more plans"
+                kind="primary-outline"
+                size="md"
+                font-size="18px"
+                font-weight="600"
+              >
+                View more plans
+              </bd-button-link>
+            </div>
 
-          <bd-p kind="small" class="bd-disclaimer-bottom">
-            <slot name="disclaimer-bottom-text-start"></slot>
-            <slot name="disclaimer-bottom-link"></slot>
-            <slot name="disclaimer-bottom-text-end"></slot>
-          </bd-p>
-        </div>
+            <bd-p kind="small" class="bd-disclaimer-top">
+              <slot name="disclaimer-top">
+                Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
+                Windows® | macOS® | Android™ | iOS®
+              </slot>
+            </bd-p>
+
+            <bd-p kind="small" class="bd-disclaimer-bottom">
+              <slot name="disclaimer-bottom-text-start"></slot>
+              <slot name="disclaimer-bottom-link"></slot>
+              <slot name="disclaimer-bottom-text-end"></slot>
+            </bd-p>
+          </div>
 
-        <div class="bd-header-right">
-          <div class="bd-header-image-wrapper">
-            <slot name="header-picture"></slot>
-            <div class="bd-header-watermark"><span>Trusted. Always.</span></div>
+          <div class="bd-header-right">
+            <div class="bd-header-image-wrapper">
+              <slot name="header-picture"></slot>
+              <div class="bd-header-watermark"><span>Trusted. Always.</span></div>
+            </div>
           </div>
         </div>
-      </div>
+        </bd-option>
+        </bd-product>
+      </bd-context>
     `;
   }
 }

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

@@ -5,29 +5,150 @@ import './header.js';
 export default {
   title    : 'Sections/Header',
   component: 'bd-header',
+  tags     : ['autodocs'],
   argTypes : {
-    productName          : { control: 'text' },
-    valueProp            : { control: 'text' },
-    description          : { control: 'text' },
-    fullPrice            : { control: 'text' },
-    discount             : { control: 'text' },
-    finalPrice           : { control: 'text' },
-    headerImage          : { control: 'text' },
-    disclaimerTop        : { control: 'text' },
-    disclaimerBottomStart: { control: 'text' },
-    disclaimerBottomLink : { control: 'text' },
-    disclaimerBottomEnd  : { control: 'text' }
+    title: {
+      control    : 'text',
+      description: 'Main product title',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    subtitle: {
+      control    : 'text',
+      description: 'Product subtitle or value proposition',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' }
+      }
+    },
+    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: '' }
+      }
+    },
+    productId: {
+      control    : 'text',
+      description: 'Product ID for bd-product component',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'vsb' }
+      }
+    },
+    devices: {
+      control    : 'text',
+      description: 'Number of devices for bd-option component',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '5' }
+      }
+    },
+    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: '' }
+      }
+    },
+    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®' }
+      }
+    },
+    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: {
+      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.'
+      }
+    }
   }
 };
 
 const Template = (args) => html`
   <bd-header
-    .productName=${args.productName}
-    .valueProp=${args.valueProp}
-    .description=${args.description}
-    .fullPrice=${args.fullPrice}
-    .discount=${args.discount}
-    .finalPrice=${args.finalPrice}
+    title="${args.title}"
+    subtitle="${args.subtitle}"
+    description="${args.description}"
+    fullPrice="${args.fullPrice}"
+    discount="${args.discount}"
+    finalPrice="${args.finalPrice}"
+    productId="${args.productId}"
+    devices="${args.devices}"
+    subscription="${args.subscription}"
+    dataLayerEvent="${args.dataLayerEvent}"
   >
     ${args.headerImage
       ? html`
@@ -74,42 +195,197 @@ const Template = (args) => html`
 
 export const Default = Template.bind({});
 Default.args = {
-  productName          : 'Bitdefender Ultimate Security',
-  valueProp            : 'Complete Security, Advanced Privacy, and Identity Protection',
+  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.'
+    }
+  }
+};
 
 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.'
+    }
+  }
+};
 
 export const WithDiscountedPrice = Template.bind({});
 WithDiscountedPrice.args = {
-  productName          : 'Bitdefender Premium Security',
-  valueProp            : 'Advanced Security, Privacy & Identity Protection',
+  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.'
+  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 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 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 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 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 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.'
+    }
+  }
 };

package/src/components/heading/heading.css.js

@@ -5,7 +5,7 @@ export default css`
     .bd-heading {
       margin: 0;
       padding: 0;
-      color: var(--color-neutral-900);
+      // color: var(--color-neutral-900);
     }
 
     /* h1 */