@repobit/dex-system-design 0.20.0 → 0.21.1

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.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 import pricingCardsCSS from "../pricing-cards/pricing-card.css.js";
-
 import "/src/components/Button/Button.js";
 
 class PricingContainer extends LitElement {
@@ -160,7 +161,7 @@ class PricingCard extends LitElement {
           ? html`<div class="highlight-banner">Best value</div>`
           : ""}
         <div class="card-header">
-          <p class="card-title">${this.title}</p>
+          <bd-h as="h4" class="card-title">${this.title}</bd-h>
           <span class="badge">
             <img
               src="/assets/badge-icon-individual.png"
@@ -169,21 +170,21 @@ class PricingCard extends LitElement {
             />
             Individual
           </span>
-          <p class="badge-subtitle">1 account & 5 devices</p>
+          <bd-p kind="small" class="badge-subtitle">1 account & 5 devices</bd-p>
           <hr class="hr-line" />
         </div>
         <div class="pricing">
           <div class="pricing-info">
-            <p class="original-price">
+            <bd-p kind="small" class="original-price">
               ${this.formatCurrency(this.originalPrice)}
-            </p>
-            <p class="discount">${this.discount}</p>
+            </bd-p>
+            <bd-p kind="small" class="discount">${this.discount}</bd-p>
           </div>
-          <p class="price">${this.formatCurrency(this.price)}</p>
-          <p class="terms">
+          <bd-h as="h3" class="price">${this.formatCurrency(this.price)}</bd-h>
+          <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>
         <div class="actions">
           <bd-button label="Buy Now" kind="danger" size="md" fullWidth strong>
@@ -258,7 +259,7 @@ class PricingCardFamily extends LitElement {
                 ? html`<div class="highlight-banner">Best value</div>`
                 : ""}
               <div class="card-header">
-                <p class="card-title">${this.title}</p>
+                <bd-h as="h4" class="card-title">${this.title}</bd-h>
                 <span class="badge">
                   <img
                     src="/assets/bd-icon-family-white.png"
@@ -267,21 +268,21 @@ class PricingCardFamily extends LitElement {
                   />
                   <span class="family-text"> Family</span></span
                 >
-                <p class="badge-subtitle">5 accounts & 25 devices</p>
+                <bd-p kind="small" class="badge-subtitle">5 accounts & 25 devices</bd-p>
                 <hr class="hr-line" />
               </div>
               <div class="pricing">
                 <div class="pricing-info">
-                  <p class="original-price">
+                  <bd-p kind="small" class="original-price">
                     ${this.formatCurrency(this.originalPrice)}
-                  </p>
-                  <p class="discount">${this.discount}</p>
+                  </bd-p>
+                  <bd-p kind="small" class="discount">${this.discount}</bd-p>
                 </div>
-                <p class="price">${this.formatCurrency(this.price)}</p>
-                <p class="terms">
+                <bd-h as="h3" class="price">${this.formatCurrency(this.price)}</bd-h>
+                <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>
               <div class="actions">
                 <bd-button
@@ -398,12 +399,12 @@ class PricingCardFeatures extends LitElement {
       {
         name: "Cryptomining Protection",
         description:
-          "Bad actors can make money using your hardware and power connection without your consent. Protect yourself against “leech” software!"
+          "Bad actors can make money using your hardware and power connection without your consent. Protect yourself against \"leech\" software!"
       },
       {
         name: "Innovative Email Protection",
         description:
-          "Scans all incoming email and marks them as “safe” or “unsafe”"
+          "Scans all incoming email and marks them as \"safe\" or \"unsafe\""
       },
       {
         name: "Scam Copilot",
@@ -417,7 +418,7 @@ class PricingCardFeatures extends LitElement {
     const features = this.features || [];
     return html`
       <div class="features">
-        <h4>Device Security</h4>
+        <bd-h as="h4">Device Security</bd-h>
         <ul class="additional-info">
           ${features.map(
             (feature) => html` <li class="feature-item">
@@ -426,9 +427,9 @@ class PricingCardFeatures extends LitElement {
                 alt="icon"
                 class="badge-icon"
               />
-              ${feature.name}
+              <bd-p kind="regular">${feature.name}</bd-p>
               ${feature.description
-                ? html`<div class="tooltip">${feature.description}</div>`
+                ? html`<div class="tooltip"><bd-p kind="small">${feature.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -475,7 +476,7 @@ class PricingCardPrivacy extends LitElement {
     const privacy = this.privacy || [];
     return html`
       <div class="features">
-        <h4>Privacy</h4>
+        <bd-h as="h4">Privacy</bd-h>
         <ul class="additional-info">
           ${privacy.map(
             (priv) => html` <li class="feature-item">
@@ -484,7 +485,7 @@ class PricingCardPrivacy extends LitElement {
                 alt="icon"
                 class="badge-icon"
               />
-              ${priv.name.replace(" 1x", "")}
+              <bd-p kind="regular">${priv.name.replace(" 1x", "")}</bd-p>
               ${priv.badge
                 ? html`<span class="badge-feature"
                     >${priv.badge}
@@ -495,7 +496,7 @@ class PricingCardPrivacy extends LitElement {
                   /></span>`
                 : ""}
               ${priv.description
-                ? html`<div class="tooltip">${priv.description}</div>`
+                ? html`<div class="tooltip"><bd-p kind="small">${priv.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -526,7 +527,7 @@ class PricingCardIdentify extends LitElement {
     const identity = this.identity || [];
     return html`
       <div class="features">
-        <h4>Identity Protection</h4>
+        <bd-h as="h4">Identity Protection</bd-h>
         <ul class="additional-info">
           ${identity.map(
             (ident) => html` <li class="feature-item">
@@ -535,7 +536,7 @@ class PricingCardIdentify extends LitElement {
                 alt="icon"
                 class="badge-icon"
               />
-              ${ident.name}
+              <bd-p kind="regular">${ident.name}</bd-p>
               ${ident.badge
                 ? html`<span class="badge-feature"
                     >${ident.badge}
@@ -546,7 +547,7 @@ class PricingCardIdentify extends LitElement {
                   /></span>`
                 : ""}
               ${ident.description
-                ? html`<div class="tooltip">${ident.description}</div>`
+                ? html`<div class="tooltip"><bd-p kind="small">${ident.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -597,7 +598,7 @@ class PricingCardIdentityExtend extends LitElement {
     const identity = this.identity || [];
     return html`
       <div class="features">
-        <h4>Identity Protection</h4>
+        <bd-h as="h4">Identity Protection</bd-h>
         <ul class="additional-info">
           ${identity.map(
             (ident) => html` <li class="feature-item">
@@ -606,7 +607,7 @@ class PricingCardIdentityExtend extends LitElement {
                 alt="icon"
                 class="badge-icon"
               />
-              ${ident.name}
+              <bd-p kind="regular">${ident.name}</bd-p>
               ${ident.badge
                 ? html`<span class="badge-feature"
                     >${ident.badge}
@@ -617,7 +618,7 @@ class PricingCardIdentityExtend extends LitElement {
                   /></span>`
                 : ""}
               ${ident.description
-                ? html`<div class="tooltip">${ident.description}</div>`
+                ? html`<div class="tooltip"><bd-p kind="small">${ident.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -662,7 +663,7 @@ class PricingCardParentalControl extends LitElement {
       {
         name: "Activity reports",
         description:
-          "Unified reporting and easier management across all devices, providing you with a better overview of your child’s online activities."
+          "Unified reporting and easier management across all devices, providing you with a better overview of your child's online activities."
       }
     ];
   }
@@ -671,7 +672,7 @@ class PricingCardParentalControl extends LitElement {
     const parentalControl = this.parentalControl || [];
     return html`
       <div class="features">
-        <h4>Parental Control</h4>
+        <bd-h as="h4">Parental Control</bd-h>
         <ul class="additional-info">
           ${parentalControl.map(
             (parental) => html` <li class="feature-item">
@@ -680,7 +681,7 @@ class PricingCardParentalControl extends LitElement {
                 alt="icon"
                 class="badge-icon"
               />
-              ${parental.name}
+              <bd-p kind="regular">${parental.name}</bd-p>
               ${parental.badge
                 ? html`<span class="badge-feature"
                     >${parental.badge}
@@ -691,7 +692,7 @@ class PricingCardParentalControl extends LitElement {
                   /></span>`
                 : ""}
               ${parental.description
-                ? html`<div class="tooltip">${parental.description}</div>`
+                ? html`<div class="tooltip"><bd-p kind="small">${parental.description}</bd-p></div>`
                 : ""}
             </li>`
           )}
@@ -727,4 +728,4 @@ customElements.define("pricing-card-features", PricingCardFeatures);
 customElements.define("pricing-card", PricingCard);
 customElements.define("pricing-card-family", PricingCardFamily);
 customElements.define("bd-pricing-container", PricingContainer);
-customElements.define("pricing-switch", PricingSwitch);
+customElements.define("pricing-switch", PricingSwitch);

package/src/components/tabs/tabs.js

@@ -1,5 +1,10 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import "../highlight/highlight.js";
+import "../list/list-item/list-item.js";
+import "../list/list.js";
+import "../paragraph/paragraph.js";
 import tabsCSS from "../tabs/tabs.css.js";
 
 class TabsComponent extends LitElement {
@@ -43,59 +48,51 @@ class TabsComponent extends LitElement {
 
     const content = [
       {
-        heading    : "Take back your family’s digital privacy",
-        description: () => html`<ul class="ul-privacy">
-          <li>
-            Enjoy complete data privacy with
-            <strong>Bitdefender Premium VPN</strong>.
-          </li>
-          <li>
-            Escape intrusive ads and trackers with our advanced
-            <strong>Ad-Blocker</strong> and
-            <strong>Anti-Tracker</strong> features.
-          </li>
-          <li>
-            Shield yourself with robust
-            <strong>Webcam and Microphone Protection</strong>.
-          </li>
-        </ul>`,
+        heading    : "Take back your family's digital privacy",
+        description: () => html`
+          <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+            <bd-li kind="bullet" size="md">
+              <bd-p kind="small">Enjoy complete data privacy with
+              <strong>Bitdefender Premium VPN</strong>.</bd-p>
+            </bd-li>
+            <bd-li kind="bullet" size="md">
+              <bd-p kind="small">Escape intrusive ads and trackers with our advanced
+              <strong>Ad-Blocker</strong> and
+              <strong>Anti-Tracker</strong> features.</bd-p>
+            </bd-li>
+            <bd-li kind="bullet" size="md">
+              <bd-p kind="small">Shield yourself with robust
+              <strong>Webcam and Microphone Protection</strong>.</bd-p>
+            </bd-li>
+          </bd-list>`,
         href: "#1"
       },
       {
         heading    : "Safe data. Safe you.",
-        description: () => html`<p>
-            Get instant alerts for potential threats to your personal data and
-            finances.
-          </p>
-          <p>Receive clear and concise advice on handling data breaches.</p>
-          <p>
-            Reduce the risk of online ID theft by scanning your digital
-            footprint.
-          </p>`,
+        description: () => html`
+          <bd-p kind="small">Get instant alerts for potential threats to your personal data and
+            finances.</bd-p>
+          <bd-p kind="small">Receive clear and concise advice on handling data breaches.</bd-p>
+          <bd-p kind="small">Reduce the risk of online ID theft by scanning your digital
+            footprint.</bd-p>`,
         href: "#2"
       },
       {
         heading    : "We secure what you hold dear",
-        description: () => html`<p>
-            Enjoy seamless security across all devices.
-          </p>
-          <p>
-            Protection from corrupt websites, risky downloads, and phishing
-            attempts.
-          </p>
-          <p>Lightweight performance ensures smooth device operation.</p>`,
+        description: () => html`
+          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
+          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
+            attempts.</bd-p>
+          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
         href: "#3"
       },
       {
         heading    : "Financial Insurance",
-        description: () => html`<p>
-            Enjoy seamless security across all devices.
-          </p>
-          <p>
-            Protection from corrupt websites, risky downloads, and phishing
-            attempts.
-          </p>
-          <p>Lightweight performance ensures smooth device operation.</p>`,
+        description: () => html`
+          <bd-p kind="small">Enjoy seamless security across all devices.</bd-p>
+          <bd-p kind="small">Protection from corrupt websites, risky downloads, and phishing
+            attempts.</bd-p>
+          <bd-p kind="small">Lightweight performance ensures smooth device operation.</bd-p>`,
         href: "#4"
       }
     ];
@@ -108,7 +105,7 @@ class TabsComponent extends LitElement {
           Customized online protection for each family member - Smart, Private &
           Safe
         </bd-highlight>
-        <p class="bd-tabs-subtitle">Your family is unique and so should be your online security. Our family protection plan adapts to each member’s needs, offering the ideal mix of privacy, freedom, and safety.</p>
+        <bd-p kind="regular" class="bd-tabs-subtitle">Your family is unique and so should be your online security. Our family protection plan adapts to each member's needs, offering the ideal mix of privacy, freedom, and safety.</bd-p>
         <div class="bd-tabs-container">
           ${tabs.map(
             (tab, index) => html`
@@ -123,7 +120,7 @@ class TabsComponent extends LitElement {
                 id="tab-${index}"
               >
                 <img src="${tab.icon}" alt="${tab.title} Icon" />
-                <p><strong>${tab.title}</strong></p>
+                <bd-p kind="small"><strong>${tab.title}</strong></bd-p>
               </button>
             `
           )}
@@ -152,9 +149,9 @@ class TabsComponent extends LitElement {
             </picture>
           </div>
           <div class="bd-right">
-            <h3 id="tab-content-heading-${this.selectedTab}">
+            <bd-h as="h3" id="tab-content-heading-${this.selectedTab}">
               ${content[this.selectedTab].heading}
-            </h3>
+            </bd-h>
             <div
               id="tab-content-${this.selectedTab}"
               aria-labelledby="tab-content-heading-${this.selectedTab}"
@@ -167,7 +164,7 @@ class TabsComponent extends LitElement {
               aria-label="Find out more about ${content[this.selectedTab]
                 .heading}"
             >
-              Find out more
+              <bd-p kind="small">Find out more</bd-p>
               <span class="bd-arrow">
                 <svg
                   width="14"
@@ -193,4 +190,4 @@ class TabsComponent extends LitElement {
 
 TabsComponent.styles = [tokens, tabsCSS];
 
-customElements.define("bd-tabs-component", TabsComponent);
+customElements.define("bd-tabs-component", TabsComponent);