@repobit/dex-system-design 0.19.2 → 0.21.0

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
@@ -360,25 +361,12 @@ class PricingSwitch extends LitElement {
           <span class="slider round"></span>
           <span class="label right">
             <span class="icon icon-user-sharp-regular">
-              <img
-                src="/assets/bd-icon-user.png"
-                alt="icon"
-                class="badge-icon-user"
-                height="22"
-                width="22"
-              />
             </span>
             Individual
           </span>
           <span class="label left">
             <span class="icon icon-family-pants-sharp-regular">
-              <img
-                src="/assets/bd-icon-family.png"
-                alt="icon"
-                class="badge-icon-family"
-                height="24"
-                width="24"
-              />
+           
             </span>
             Family
           </span>
@@ -411,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",
@@ -430,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">
@@ -439,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>`
           )}
@@ -488,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">
@@ -497,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}
@@ -508,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>`
           )}
@@ -539,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">
@@ -548,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}
@@ -559,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>`
           )}
@@ -610,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">
@@ -619,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}
@@ -630,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>`
           )}
@@ -675,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."
       }
     ];
   }
@@ -684,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">
@@ -693,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}
@@ -704,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>`
           )}
@@ -740,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);