@repobit/dex-system-design 0.21.2 → 0.22.1

package/src/components/pricing-cards/new-pricing-card.js

@@ -1,16 +1,32 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../badge/badge.js";
 import newPricingCSS from "../pricing-cards/new-pricing.css";
 
 class PricingCard extends LitElement {
   static properties = {
-    highlight: { type: Boolean }
+    highlight   : { type: Boolean },
+    productId   : { type: String },
+    devices     : { type: String },
+    subscription: { type: String },
+    shadow      : { type: Boolean, reflect: true }
   };
 
-
+  constructor() {
+    super();
+    this.productId = "vsb";
+    this.devices = "5";
+    this.subscription = "1";
+    this.shadow = true;
+  }
 
   render() {
     return html`
+      <style>
+        ${tokens}
+        ${newPricingCSS}
+      </style>
+      
       <div class="card-wrapper">
         ${this.highlight
           ? html`<div class="highlight-banner">Best Value</div>`
@@ -25,6 +41,5 @@ class PricingCard extends LitElement {
     `;
   }
 }
-PricingCard.styles = [tokens, newPricingCSS];
 
-customElements.define("new-pricing-card", PricingCard);
+customElements.define("new-pricing-card", PricingCard);

package/src/components/pricing-cards/new-pricing-card.stories.js

@@ -0,0 +1,422 @@
+import { html } from 'lit';
+import './new-pricing-card.js';
+import './pricing-card-actions.js';
+import './pricing-card-container.js';
+import './pricing-card-header.js';
+import './pricing-card-pricing.js';
+import './pricing-card-show-more.js';
+import './pricing-feature-item.js';
+
+export default {
+  title     : 'Components/Pricing Cards[v2]',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Store-integrated pricing cards with bd-context, bd-product, and bd-option wrappers in each component.'
+      }
+    }
+  },
+  argTypes: {
+    productId: {
+      control    : 'text',
+      description: 'Product ID for store integration',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'vsb' }
+      }
+    },
+    devices: {
+      control    : 'text',
+      description: 'Number of devices',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '5' }
+      }
+    },
+    subscription: {
+      control    : 'text',
+      description: 'Subscription type',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '1' }
+      }
+    },
+    dataLayerEvent: {
+      control    : 'text',
+      description: 'Data layer event name',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'info' }
+      }
+    }
+  }
+};
+
+// ============ TEMPLATE DE BAZĂ ============
+
+const PricingCardTemplate = (args) => html`
+  <new-pricing-card 
+    ?highlight="${args.highlight}"
+    product-id="${args.productId}"
+    devices="${args.devices}"
+    subscription="${args.subscription}"
+    data-layer-event="${args.dataLayerEvent}"
+  >
+    <pricing-card-header 
+      slot="header" 
+      title="${args.title}" 
+      subtitle="${args.subtitle}"
+      badges="${args.badges}"
+    ></pricing-card-header>
+    
+    <pricing-card-pricing 
+      slot="pricing"
+      product-id="${args.productId}"
+      devices="${args.devices}"
+      subscription="${args.subscription}"
+      data-layer-event="${args.dataLayerEvent}"
+    ></pricing-card-pricing>
+    
+    <pricing-card-actions 
+      slot="actions"
+      product-id="${args.productId}"
+      devices="${args.devices}"
+      subscription="${args.subscription}"
+      data-layer-event="${args.dataLayerEvent}"
+    ></pricing-card-actions>
+    
+    <pricing-card-show-more slot="features">
+      ${args.features?.map(feature =>
+        html`<pricing-feature-item>${feature}</pricing-feature-item>`
+      )}
+    </pricing-card-show-more>
+  </new-pricing-card>
+`;
+
+// ============ STORY-URI INDIVIDUALE ============
+
+export const VSBCard = PricingCardTemplate.bind({});
+VSBCard.args = {
+  productId     : 'vsb',
+  devices       : '5',
+  subscription  : '1',
+  dataLayerEvent: 'info',
+  title         : 'Bitdefender Total Security',
+  subtitle      : '1 account – 5 devices',
+  badges        : 'Premium',
+  features      : [
+    'Antivirus & malware protection',
+    'Unlimited VPN',
+    'Identity Theft Protection',
+    'Advanced Threat Defense',
+    'Parental Controls',
+    'Webcam Protection'
+  ],
+  highlight: true,
+  shadow   : true
+};
+VSBCard.parameters = {
+  docs: {
+    description: {
+      story: 'Premium security card with product ID "vsb" (Bitdefender Total Security). Includes all advanced features.'
+    }
+  }
+};
+
+export const TSI_Card = PricingCardTemplate.bind({});
+TSI_Card.args = {
+  productId     : 'ts_i',
+  devices       : '5',
+  subscription  : '1',
+  dataLayerEvent: 'info',
+  title         : 'Bitdefender Internet Security',
+  subtitle      : '1 account – 5 devices',
+  badges        : 'Most Popular',
+  features      : [
+    'Antivirus & antimalware',
+    'Two-way firewall',
+    'Anti-phishing',
+    'Anti-fraud',
+    'Web Protection',
+    'Vulnerability Scan'
+  ],
+  highlight: false,
+  shadow   : true
+};
+TSI_Card.parameters = {
+  docs: {
+    description: {
+      story: 'Internet Security card with product ID "ts_i". Balanced protection for everyday use.'
+    }
+  }
+};
+
+export const PSI_Card = PricingCardTemplate.bind({});
+PSI_Card.args = {
+  productId     : 'ps_i',
+  devices       : '5',
+  subscription  : '1',
+  dataLayerEvent: 'info',
+  title         : 'Bitdefender Antivirus Plus',
+  subtitle      : 'Basic protection for your devices',
+  badges        : '1 account – 5 devices',
+  features      : [
+    'Antivirus protection',
+    'Real-time scanning',
+    'Automatic updates',
+    'Quick scan mode',
+    'Rescue mode'
+  ],
+  highlight: false,
+  shadow   : true
+};
+PSI_Card.parameters = {
+  docs: {
+    description: {
+      story: 'Basic antivirus card with product ID "ps_i". Lightweight protection for fewer devices.'
+    }
+  }
+};
+
+// ============ EXEMPLU CU DIFERITE DATA LAYER EVENTS ============
+
+export const WithCustomDataLayerEvents = () => html`
+  <div style="padding: 20px;">
+    <h2 style="text-align: center; margin-bottom: 20px;">Pricing Cards with Custom Data Layer Events</h2>
+    <p style="text-align: center; color: #6c757d; margin-bottom: 30px;">Each card has different analytics events for tracking</p>
+    
+    <pricing-cards-container count="3">
+      <!-- Card with click event -->
+      ${PricingCardTemplate({
+        productId     : 'ps_i',
+        devices       : '5',
+        subscription  : '1',
+        dataLayerEvent: 'info',
+        title         : 'Basic Plan',
+        subtitle      : 'For personal use',
+        badges        : 'Click Tracked',
+        features      : [
+          'Basic protection',
+          'Real-time scanning',
+          '3 devices'
+        ],
+        highlight: false,
+        shadow   : true
+      })}
+      
+      <!-- Card with view event -->
+      ${PricingCardTemplate({
+        productId     : 'ts_i',
+        devices       : '5',
+        subscription  : '1',
+        dataLayerEvent: 'info',
+        title         : 'Family Plan',
+        subtitle      : 'For families',
+        badges        : 'View Tracked',
+        features      : [
+          'Family protection',
+          'Parental controls',
+          '5 devices',
+          'Password manager'
+        ],
+        highlight: true,
+        shadow   : true
+      })}
+      
+      <!-- Card with purchase intent event -->
+      ${PricingCardTemplate({
+        productId     : 'vsb',
+        devices       : '10',
+        subscription  : '1',
+        dataLayerEvent: 'info',
+        title         : 'Business Plan',
+        subtitle      : 'For small businesses',
+        badges        : 'Purchase Tracked',
+        features      : [
+          'Advanced protection',
+          'Unlimited devices',
+          'Priority support',
+          'System optimization',
+          'Identity protection'
+        ],
+        highlight: false,
+        shadow   : true
+      })}
+    </pricing-cards-container>
+    
+    <div style="margin-top: 30px; padding: 15px; background: #f8f9fa; border-radius: 8px;">
+      <h4 style="margin-top: 0;">Data Layer Events Explanation:</h4>
+      <ul style="margin-bottom: 0;">
+        <li><strong>pricing_card_click</strong>: Tracks when user clicks on the card</li>
+        <li><strong>pricing_card_view</strong>: Tracks when card becomes visible in viewport</li>
+        <li><strong>purchase_intent</strong>: Tracks when user shows purchase intent</li>
+        <li><strong>info</strong>: Default event for general information</li>
+      </ul>
+    </div>
+  </div>
+`;
+WithCustomDataLayerEvents.parameters = {
+  docs: {
+    description: {
+      story: 'Cards with different data layer events for analytics tracking. Each event triggers different analytics data.'
+    }
+  }
+};
+
+// ============ GRID CU 3 CARD-URI DIFFERITE ============
+
+export const ThreeProductGrid = () => html`
+  <div style="padding: 20px; min-height: 100vh;">
+    <h2 style="text-align: center; margin-bottom: 30px; color: #212529;">Compare Security Plans</h2>
+    
+    <pricing-cards-container count="3">
+      <!-- Card 1: PSI - Basic -->
+      ${PricingCardTemplate({
+        productId     : 'ps_i',
+        devices       : '5',
+        subscription  : '1',
+        dataLayerEvent: 'info',
+        title         : 'Bitdefender Antivirus Plus',
+        subtitle      : '1 account – 5 devices',
+        badges        : 'Basic',
+        features      : [
+          'Real-time antivirus',
+          'Web protection',
+          'Automatic updates',
+          'Quick scan'
+        ],
+        highlight: false,
+        shadow   : true
+      })}
+      
+      <!-- Card 2: TSI - Standard (Highlighted) -->
+      ${PricingCardTemplate({
+        productId     : 'ts_i',
+        devices       : '5',
+        subscription  : '1',
+        dataLayerEvent: 'info',
+        title         : 'Bitdefender Internet Security',
+        subtitle      : '1 account – 5 devices',
+        badges        : 'Most Popular',
+        features      : [
+          'All Antivirus Plus features',
+          'Two-way firewall',
+          'Anti-phishing',
+          'Parental controls',
+          'Webcam protection',
+          'File encryption'
+        ],
+        highlight: true,
+        shadow   : true
+      })}
+      
+      <!-- Card 3: VSB - Premium -->
+      ${PricingCardTemplate({
+        productId     : 'vsb',
+        devices       : '10',
+        subscription  : '1',
+        dataLayerEvent: 'info',
+        title         : 'Bitdefender Total Security',
+        subtitle      : '1 account – 5 devices',
+        badges        : 'Premium',
+        features      : [
+          'All Internet Security features',
+          'Unlimited VPN traffic',
+          'Password manager',
+          'System optimizer',
+          'Identity protection',
+          'Priority support'
+        ],
+        highlight: false,
+        shadow   : true
+      })}
+    </pricing-cards-container>
+    
+    <div style="margin-top: 30px; text-align: center; color: #6c757d; font-size: 14px;">
+      <p>Each card has its own bd-context, bd-product, and bd-option wrappers for store integration.</p>
+      <p>Inspect each component to see the BrightData structure.</p>
+    </div>
+  </div>
+`;
+ThreeProductGrid.parameters = {
+  docs: {
+    description: {
+      story: 'Grid comparing three different security products: Basic (ps_i), Standard (ts_i), and Premium (vsb). Each card has independent store integration.'
+    }
+  }
+};
+
+// ============ STORY CU YEARLY SUBSCRIPTION ============
+
+export const YearlySubscriptionCards = () => html`
+  <div style="padding: 20px;">
+    <h2 style="text-align: center; margin-bottom: 20px;">Yearly Subscription Plans</h2>
+    <p style="text-align: center; color: #6c757d; margin-bottom: 30px;">All plans with 1-year subscription for maximum savings</p>
+    
+    <pricing-cards-container count="3">
+      <!-- Monthly vs Yearly comparison -->
+      ${PricingCardTemplate({
+        productId     : 'ps_i',
+        devices       : '5',
+        subscription  : '12',
+        dataLayerEvent: 'info',
+        title         : 'Bitdefender Monthly Plan',
+        subtitle      : '1 account – 5 devices',
+        badges        : 'Monthly',
+        features      : [
+          'Cancel anytime',
+          'Monthly billing',
+          'Standard price',
+          '3 devices'
+        ],
+        highlight: false,
+        shadow   : true
+      })}
+      
+      ${PricingCardTemplate({
+        productId     : 'ts_i',
+        devices       : '5',
+        subscription  : '12',
+        dataLayerEvent: 'info',
+        title         : 'Bitdefender Yearly Plan',
+        subtitle      : '1 account – 5 devices',
+        badges        : 'Save 25%',
+        features      : [
+          'Annual billing',
+          '25% discount',
+          '5 devices',
+          'Priority support'
+        ],
+        highlight: true,
+        shadow   : true
+      })}
+      
+      ${PricingCardTemplate({
+        productId     : 'vsb',
+        devices       : '5',
+        subscription  : '12',
+        dataLayerEvent: 'info',
+        title         : 'Bitdefender 1-Year Plan',
+        subtitle      : '1 account – 5 devices',
+        badges        : 'Save 40%',
+        features      : [
+          '2-year commitment',
+          '40% discount',
+          '10 devices',
+          'Premium support',
+          'Free 3 months'
+        ],
+        highlight: false,
+        shadow   : true
+      })}
+    </pricing-cards-container>
+  </div>
+`;
+YearlySubscriptionCards.parameters = {
+  docs: {
+    description: {
+      story: 'Cards showing different subscription durations. Each card has store integration for its specific subscription period.'
+    }
+  }
+};

package/src/components/pricing-cards/new-pricing.css.js

@@ -1,11 +1,17 @@
 import { css } from "lit";
 
 export default css`
+  :host {
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+  }
+
  .card {
       background: white;
       border-radius: var(--spacing-20);
       padding: var(--spacing-32);
       background: #fafafa;
+      border: 1px solid var(--border-card-grey);
     }
 
     .highlight {
@@ -19,6 +25,8 @@ export default css`
    .card-wrapper {
   position: relative;
   padding-top: 2.5rem;
+  max-width: 400px;
+  margin: 0 auto;
 }
 
 .highlight-banner {

package/src/components/pricing-cards/pricing-card-actions.js

@@ -1,21 +1,61 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import "../Button/Button.js";
-import newActionsPricingCSS from "../pricing-cards/pricing-card-actions.css.js";
+import newPricingActionsCSS from "../pricing-cards/pricing-card-actions.css.js";
 
 class PricingCardActions extends LitElement {
+  static properties = {
+    productId     : { type: String, attribute: "product-id" }, // <- aici e corect
+    devices       : { type: String },
+    subscription  : { type: String },
+    dataLayerEvent: { type: String }
+  };
 
+  constructor() {
+    super();
+    this.productId = "vsb";
+    this.devices = "5";
+    this.subscription = "1";
+    this.dataLayerEvent = "info";
+  }
+
+  createRenderRoot() {
+    return this;
+  }
 
   render() {
     return html`
-      <div class="actions">
-        <bd-button kind="danger" size="md" fullWidth strong>
-          Buy Now
-        </bd-button>
-      </div>
+      <style>
+        ${tokens}
+        ${newPricingActionsCSS}
+      </style>
+      
+      <bd-context ignore-events-parent>
+        <!-- AICI TREBUIE product-id CU CRATIMĂ! -->
+        <bd-product product-id="${this.productId}"> 
+          <bd-option 
+            devices="${this.devices}" 
+            subscription="${this.subscription}" 
+            data-layer-event="${this.dataLayerEvent}">
+            
+            <div class="actions">
+              <bd-button-link
+                label="Buy now"
+                kind="danger"
+                size="md"
+                fullwidth
+                strong
+                buyLink
+              >
+                Buy Now
+              </bd-button-link>
+            </div>
+            
+          </bd-option>
+        </bd-product>
+      </bd-context>
     `;
   }
 }
-PricingCardActions.styles = [tokens, newActionsPricingCSS];
 
-customElements.define('pricing-card-actions', PricingCardActions);
+customElements.define("pricing-card-actions", PricingCardActions);

package/src/components/pricing-cards/pricing-card-container.css.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 
 export default css`
  :host {
-      display: block;
+      // display: block;
       padding: 0px 240px;
     }