@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/picture/picture.js

@@ -0,0 +1,46 @@
+import { LitElement, html } from "lit";
+
+export class BdPicture extends LitElement {
+  static properties = {
+    sources    : { type: Array },
+    alt        : { type: String },
+    fallbackSrc: { type: String },
+    width      : { type: Number },
+    height     : { type: Number },
+    loading    : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.sources = [];
+    this.alt = "";
+    this.fallbackSrc = "";
+    this.width = null;
+    this.height = null;
+    this.loading = "lazy";
+  }
+
+  render() {
+    return html`
+      <picture>
+        ${this.sources.map(source => html`
+          <source 
+            type="${source.type}" 
+            srcset="${source.srcset}"
+            media="${source.media || ''}"
+            sizes="${source.sizes || ''}"
+          >
+        `)}
+        <img 
+          loading="${this.loading}" 
+          alt="${this.alt}" 
+          src="${this.fallbackSrc}"
+          width="${this.width}"
+          height="${this.height}"
+        >
+      </picture>
+    `;
+  }
+}
+
+customElements.define("bd-picture", BdPicture);

package/src/components/picture/picture.stories.js

@@ -0,0 +1,275 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import './picture.js';
+
+export default {
+  title    : 'Atoms/Picture',
+  component: 'bd-picture',
+  argTypes : {
+    sources: {
+      control    : 'object',
+      description: 'Array of source objects for responsive images'
+    },
+    alt: {
+      control    : 'text',
+      description: 'Alt text for accessibility'
+    },
+    fallbackSrc: {
+      control    : 'text',
+      description: 'Fallback image source for older browsers'
+    },
+    width: {
+      control    : 'number',
+      description: 'Image width attribute'
+    },
+    height: {
+      control    : 'number',
+      description: 'Image height attribute'
+    },
+    loading: {
+      control    : { type: 'select' },
+      options    : ['lazy', 'eager'],
+      description: 'Image loading strategy'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A responsive picture component that supports multiple image formats and breakpoints.'
+      }
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-picture
+    .sources="${args.sources}"
+    alt="${args.alt}"
+    fallback-src="${args.fallbackSrc}"
+    width="${args.width}"
+    height="${args.height}"
+    loading="${args.loading}"
+  ></bd-picture>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  sources: [
+    {
+      type  : 'image/webp',
+      srcset: '/assets/bd-header-us-2000.webp',
+      media : '(min-width: 1200px)'
+    },
+    {
+      type  : 'image/webp',
+      srcset: '/assets/bd-header-us-1000.webp',
+      media : '(min-width: 768px)'
+    },
+    {
+      type  : 'image/webp',
+      srcset: '/assets/bd-header-us-750.webp'
+    }
+  ],
+  alt        : 'Bitdefender Security Illustration',
+  fallbackSrc: '/assets/bd-header-us.jpg',
+  width      : 750,
+  height     : 500,
+  loading    : 'lazy'
+};
+
+export const SimplePicture = Template.bind({});
+SimplePicture.args = {
+  sources: [
+    {
+      type  : 'image/jpeg',
+      srcset: '/assets/bd-header-us.jpg'
+    }
+  ],
+  alt        : 'Simple Bitdefender Security Image',
+  fallbackSrc: '/assets/bd-header-us.jpg',
+  width      : 750,
+  height     : 500,
+  loading    : 'eager'
+};
+
+export const WebPWithJPEGFallback = () => html`
+  <div style="max-width: 800px; margin: 0 auto;">
+    <bd-h as="h4">WebP with JPEG Fallback</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-2000.webp',
+          media : '(min-width: 1200px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-1000.webp',
+          media : '(min-width: 768px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-750.webp'
+        },
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us-2000.jpg',
+          media : '(min-width: 1200px)'
+        },
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us-1000.jpg',
+          media : '(min-width: 768px)'
+        }
+      ]}"
+      alt="Bitdefender Security with WebP and JPEG fallback"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="750"
+      height="500"
+      loading="eager"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Modern WebP format with JPEG fallback for maximum browser compatibility.
+    </p>
+  </div>
+`;
+
+export const DifferentBreakpoints = () => html`
+  <div style="max-width: 1000px; margin: 0 auto;">
+    <bd-h as="h4">Multiple Breakpoints</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-2000.webp',
+          media : '(min-width: 1440px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-1200.webp',
+          media : '(min-width: 1024px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-800.webp',
+          media : '(min-width: 768px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-600.webp',
+          media : '(min-width: 480px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-400.webp'
+        }
+      ]}"
+      alt="Bitdefender Security with multiple breakpoints"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="750"
+      height="500"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      This image loads different sizes at: 1440px+, 1024px+, 768px+, 480px+, and mobile.
+    </p>
+  </div>
+`;
+
+export const HeaderImageExample = () => html`
+  <div style="background: #f8fafc; padding: 2rem; border-radius: 8px; border: 1px solid #e2e8f0;">
+    <bd-h as="h4">Header Image Example</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-2000.webp',
+          media : '(min-width: 1200px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-1000.webp',
+          media : '(min-width: 768px)'
+        },
+        {
+          type  : 'image/webp',
+          srcset: '/assets/bd-header-us-750.webp'
+        }
+      ]}"
+      alt="Bitdefender Security Header Illustration"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="800"
+      height="400"
+      loading="eager"
+    ></bd-picture>
+    <div style="margin-top: 1rem; padding: 1rem; background: white; border-radius: 4px;">
+      <bd-h as="h4" style="margin: 0 0 0.5rem 0;">Bitdefender Ultimate Security</bd-h>
+      <p style="margin: 0; color: #666;">Complete protection for your digital life</p>
+    </div>
+  </div>
+`;
+
+export const SingleSourceExample = () => html`
+  <div style="max-width: 600px; margin: 0 auto;">
+    <bd-h as="h4">Single Source Picture</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us.jpg'
+        }
+      ]}"
+      alt="Simple Bitdefender Security Image"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="600"
+      height="400"
+      loading="lazy"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Simple picture with single JPEG source - perfect when you don't need multiple formats.
+    </p>
+  </div>
+`;
+
+export const WithFixedDimensions = () => html`
+  <div>
+    <bd-h as="h4">Fixed Dimensions</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us.jpg'
+        }
+      ]}"
+      alt="Bitdefender Security with fixed dimensions"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="400"
+      height="300"
+      loading="lazy"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Fixed 400x300 dimensions prevent layout shifts during loading.
+    </p>
+  </div>
+`;
+
+export const AccessibilityExample = () => html`
+  <div style="max-width: 600px; margin: 0 auto;">
+    <bd-h as="h4">Accessible Picture</bd-h>
+    <bd-picture
+      .sources="${[
+        {
+          type  : 'image/jpeg',
+          srcset: '/assets/bd-header-us.jpg'
+        }
+      ]}"
+      alt="Bitdefender Security Suite showing advanced protection features including real-time scanning, firewall protection, and privacy tools for comprehensive digital security"
+      fallback-src="/assets/bd-header-us.jpg"
+      width="600"
+      height="400"
+      loading="lazy"
+    ></bd-picture>
+    <p style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
+      Always provide meaningful alt text for screen readers and SEO.
+    </p>
+  </div>
+`;

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

@@ -8,7 +8,7 @@ class PricingCardActions extends LitElement {
   render() {
     return html`
       <div class="actions">
-        <bd-button label="Buy Now" kind="danger" size="md" fullWidth strong>
+        <bd-button kind="danger" size="md" fullWidth strong>
           Buy Now
         </bd-button>
       </div>

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

@@ -1,5 +1,7 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 import newHeaderPricingCSS from "../pricing-cards/pricing-card-header.css.js";
 
 class PricingCardHeader extends LitElement {
@@ -10,7 +12,6 @@ class PricingCardHeader extends LitElement {
     plus    : { type: Boolean }
   };
 
-
   get parsedBadges() {
     return this.badges ? this.badges.split("|").map((b) => b.trim()) : [];
   }
@@ -21,13 +22,13 @@ class PricingCardHeader extends LitElement {
 
     return html`
       <div class="card-header">
-        <p class="card-title">
+        <bd-h as="h4" class="card-title">
           <span class="card-title-brand">${brand}</span>
-        </p>
-        <p class="card-title">
+        </bd-h>
+        <bd-h as="h4" class="card-title">
           ${restOfTitle}
           ${this.plus ? html` <span class="plus">Plus</span>` : ""}
-        </p>
+        </bd-h>
         ${this.parsedBadges.length
           ? html`
               <div class="badge-wrapper multiple">
@@ -35,12 +36,13 @@ class PricingCardHeader extends LitElement {
               </div>
             `
           : ""}
-        <p class="badge-subtitle">${this.subtitle}</p>
+        <bd-p kind="small" class="badge-subtitle">${this.subtitle}</bd-p>
         <bd-divider-horizontal></bd-divider-horizontal>
       </div>
     `;
   }
 }
+
 PricingCardHeader.styles = [tokens, newHeaderPricingCSS];
 
-customElements.define("pricing-card-header", PricingCardHeader);
+customElements.define("pricing-card-header", PricingCardHeader);

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

@@ -1,5 +1,7 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 import newPricingPricingCSS from "../pricing-cards/pricing-card-pricing.css.js";
 
 class PricingCardPricing extends LitElement {
@@ -15,18 +17,15 @@ class PricingCardPricing extends LitElement {
     this.billingPeriod = "monthly";
   }
 
-
   formatCurrency(value) {
     if (!value || isNaN(value)) return "";
     return `$${parseFloat(value).toFixed(2)}`;
   }
 
-  // Calculează valorile pentru yearly
   get yearlyPrice() {
-    // Exemplu: 12 luni * price lunar cu 10% discount anual dummy
     const monthlyPrice = parseFloat(this.price);
     if (isNaN(monthlyPrice)) return "";
-    const yearly = monthlyPrice * 12 * 0.9; // 10% discount la anual
+    const yearly = monthlyPrice * 12 * 0.9;
     return yearly.toFixed(2);
   }
 
@@ -38,7 +37,6 @@ class PricingCardPricing extends LitElement {
   }
 
   get yearlyDiscount() {
-    // Exemplu text dummy pentru anual
     return "Save 25%";
   }
 
@@ -72,19 +70,19 @@ class PricingCardPricing extends LitElement {
 
         <div class="pricing-info">
           ${originalPrice
-            ? html`<p class="original-price">
+            ? html`<bd-p kind="small" class="original-price">
                 ${this.formatCurrency(originalPrice)}
-              </p>`
+              </bd-p>`
             : null}
-          <p class="discount">${discount}</p>
+          <bd-p kind="small" class="discount">${discount}</bd-p>
         </div>
 
-        <p class="price">${this.formatCurrency(price)}</p>
+        <bd-h as="h3" class="price">${this.formatCurrency(price)}</bd-h>
 
-        <p class="terms">
+        <bd-p kind="small" class="terms">
           First year price. Plus applicable sales tax. See
           <a href="#">terms of use</a> below.
-        </p>
+        </bd-p>
       </div>
     `;
   }
@@ -96,6 +94,7 @@ class PricingCardPricing extends LitElement {
     }
   }
 }
+
 PricingCardPricing.styles = [tokens, newPricingPricingCSS];
 
-customElements.define("pricing-card-pricing", PricingCardPricing);
+customElements.define("pricing-card-pricing", PricingCardPricing);

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

@@ -41,6 +41,22 @@ export default css`
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-semibold);
   }
+.icon-user-sharp-regular {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'><path d='M11 11C13.2091 11 15 9.20914 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 9.20914 8.79086 11 11 11Z' fill='%23000'/><path d='M4 19C4 15.6863 6.68629 13 10 13H12C15.3137 13 18 15.6863 18 19V20H4V19Z' fill='%23000'/></svg>")
+    no-repeat center center;
+  background-size: contain;
+}
+.icon-family-pants-sharp-regular {
+  display: inline-block;
+  width: 24px; /* dimensiunea dorită */
+  height: 24px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M24 25.1591V27H8V25.1591C8 23.3048 9.20796 21.6667 10.9795 21.1187L11.8455 20.8509C12.2644 20.7213 12.55 20.334 12.55 19.8955V19.7449C10.8538 18.295 10.1 16.0583 10.1 13.2778C10.1 10.8447 11.1289 9.23277 12.423 8.25708C13.6668 7.3193 15.1097 7 16 7C16.8903 7 18.3332 7.3193 19.577 8.25708C20.8711 9.23277 21.9 10.8447 21.9 13.2778C21.9 16.0583 21.1462 18.295 19.45 19.7449V19.8955C19.45 20.334 19.7356 20.7213 20.1545 20.8509L21.0205 21.1187C22.792 21.6667 24 23.3048 24 25.1591Z' fill='%23000'/><path d='M7.4663 23C8.03861 21.7386 9.10189 20.7276 10.4549 20.2401C10.103 19.7558 9.59938 19.382 8.99905 19.1939L8.86534 19.152C8.71342 19.1044 8.58812 19.0057 8.50596 18.8783C9.41844 17.937 9.8 16.5994 9.8 15.0556C9.8 13.5167 9.1507 12.4609 8.30704 11.8164C7.51308 11.2099 6.59336 11 6 11C5.40664 11 4.48692 11.2099 3.69296 11.8164C2.8493 12.4609 2.2 13.5167 2.2 15.0556C2.2 16.5845 2.57424 17.9112 3.46779 18.851L3.46121 18.8574L3.48918 18.8858C3.40698 19.0095 3.28362 19.1053 3.13466 19.152L3.00095 19.1939C1.81034 19.567 1 20.6702 1 21.9179V23C3.57036 23 7.4663 23 7.4663 23Z' fill='%23000'/><path d='M21.5451 20.2401C22.8981 20.7276 23.9614 21.7386 24.5337 23C24.5337 23 28.2313 23 31 23V21.9179C31 20.6702 30.1897 19.567 28.9991 19.1939L28.8653 19.152C28.7134 19.1044 28.5881 19.0057 28.506 18.8783C29.4184 17.937 29.8 16.5994 29.8 15.0556C29.8 13.5167 29.1507 12.4609 28.307 11.8164C27.5131 11.2099 26.5934 11 26 11C25.4066 11 24.4869 11.2099 23.693 11.8164C22.8493 12.4609 22.2 13.5167 22.2 15.0556C22.2 16.5845 22.5742 17.9112 23.4678 18.851L23.4612 18.8574L23.4892 18.8858C23.407 19.0095 23.2836 19.1053 23.1347 19.152L23.0009 19.1939C22.4006 19.382 21.897 19.7558 21.5451 20.2401Z' fill='%23000'/></svg>") no-repeat center center;
+  background-size: contain;
+}
+
 
   .highlight {
     border: var(--spacing-2) solid var(--border-card-green);
@@ -309,7 +325,17 @@ export default css`
     transition: color 0.4s;
     cursor: pointer;
   }
-
+.switchBox .label .icon {
+  vertical-align: middle;
+  position: relative;
+}
+
+.icon-user-sharp-regular,
+.icon-family-pants-sharp-regular {
+  vertical-align: middle;
+  position: relative;
+  top: -2px;
+}
   .switchBox .label.right {
     z-index: 10;
     color: black;
@@ -327,8 +353,7 @@ export default css`
   .switchBox .switch input ~ .label .icon {
     position: relative;
     margin-right: var(--spacing-10);
-    top: var(--spacing-2);
-  }
+   }
 
   .switchBox .switch input ~ .label .icon svg {
     width: var(--spacing-24);