@repobit/dex-system-design 0.9.0 → 0.10.0

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

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import pricingCardsCSS from "../pricing-cards/pricing-card.css.js";
 
 import "/src/components/Button/Button.js";
@@ -6,8 +7,8 @@ import "/src/components/Button/Button.js";
 class PricingContainer extends LitElement {
   static properties = {
     planType: { type: String },
-    locale: { type: String },
-    currency: { type: String },
+    locale  : { type: String },
+    currency: { type: String }
   };
 
   constructor() {
@@ -31,10 +32,10 @@ class PricingContainer extends LitElement {
     if (isNaN(numericValue)) return "";
 
     const formattedValue = new Intl.NumberFormat(this.locale, {
-      style: "currency",
-      currency: this.currency,
+      style                : "currency",
+      currency             : this.currency,
       minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
+      maximumFractionDigits: 2
     }).format(numericValue);
 
     return formattedValue;
@@ -113,19 +114,19 @@ class PricingContainer extends LitElement {
 
 class PricingCard extends LitElement {
   static properties = {
-    title: { type: String },
-    price: { type: String },
-    discount: { type: String },
-    originalPrice: { type: String },
-    features: { type: Boolean },
-    privacy: { type: Boolean },
-    highlight: { type: Boolean },
-    identity: { type: Boolean },
+    title           : { type: String },
+    price           : { type: String },
+    discount        : { type: String },
+    originalPrice   : { type: String },
+    features        : { type: Boolean },
+    privacy         : { type: Boolean },
+    highlight       : { type: Boolean },
+    identity        : { type: Boolean },
     identityExtended: { type: Boolean },
-    parentalControl: { type: Boolean },
-    planType: { type: String },
-    locale: { type: String },
-    currency: { type: String },
+    parentalControl : { type: Boolean },
+    planType        : { type: String },
+    locale          : { type: String },
+    currency        : { type: String }
   };
 
   constructor() {
@@ -151,8 +152,8 @@ class PricingCard extends LitElement {
     if (isNaN(numberValue)) return value;
 
     return new Intl.NumberFormat(this.locale, {
-      style: "currency",
-      currency: this.currency,
+      style   : "currency",
+      currency: this.currency
     }).format(numberValue);
   }
   render() {
@@ -205,23 +206,23 @@ class PricingCard extends LitElement {
       </div>
     `;
   }
-  
+
 }
 class PricingCardFamily extends LitElement {
   static properties = {
-    title: { type: String },
-    price: { type: String },
-    discount: { type: String },
-    originalPrice: { type: String },
-    features: { type: Boolean },
-    privacy: { type: Boolean },
-    highlight: { type: Boolean },
-    identity: { type: Boolean },
+    title           : { type: String },
+    price           : { type: String },
+    discount        : { type: String },
+    originalPrice   : { type: String },
+    features        : { type: Boolean },
+    privacy         : { type: Boolean },
+    highlight       : { type: Boolean },
+    identity        : { type: Boolean },
     identityExtended: { type: Boolean },
-    parentalControl: { type: Boolean },
-    planType: { type: String },
-    locale: { type: String },
-    currency: { type: String },
+    parentalControl : { type: Boolean },
+    planType        : { type: String },
+    locale          : { type: String },
+    currency        : { type: String }
   };
 
   constructor() {
@@ -247,8 +248,8 @@ class PricingCardFamily extends LitElement {
     if (isNaN(numberValue)) return value;
 
     return new Intl.NumberFormat(this.locale, {
-      style: "currency",
-      currency: this.currency,
+      style   : "currency",
+      currency: this.currency
     }).format(numberValue);
   }
   render() {
@@ -327,7 +328,7 @@ class PricingCardFamily extends LitElement {
 
 class PricingSwitch extends LitElement {
   static properties = {
-    planType: { type: String },
+    planType: { type: String }
   };
 
   constructor() {
@@ -342,9 +343,9 @@ class PricingSwitch extends LitElement {
 
     this.dispatchEvent(
       new CustomEvent("plan-switch", {
-        detail: { planType: this.planType },
-        bubbles: true,
-        composed: true,
+        detail  : { planType: this.planType },
+        bubbles : true,
+        composed: true
       })
     );
   }
@@ -392,39 +393,39 @@ class PricingSwitch extends LitElement {
 
 class PricingCardFeatures extends LitElement {
   static properties = {
-    features: { type: Array },
+    features: { type: Array }
   };
 
   constructor() {
     super();
     this.features = [
       {
-        name: "Multiplatform Windows®, macOS®, Android™, iOS®",
+        name: "Multiplatform Windows®, macOS®, Android™, iOS®"
       },
       {
-        name: "Multi-Awarded Antivirus, Malware, Ransomware Protection",
-        description: "Consistent results in independent tests for 10+ years",
+        name       : "Multi-Awarded Antivirus, Malware, Ransomware Protection",
+        description: "Consistent results in independent tests for 10+ years"
       },
       {
         name: "Scam Prevention & Detection",
         description:
-          "Outsmart scammers and keep your money, your credentials, identity, and digital assets",
+          "Outsmart scammers and keep your money, your credentials, identity, and digital assets"
       },
       {
         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",
         description:
-          "Scam Copilot: Get protection against online scams with AI-powered anti-scam features.",
-      },
+          "Scam Copilot: Get protection against online scams with AI-powered anti-scam features."
+      }
     ];
   }
 
@@ -455,7 +456,7 @@ class PricingCardFeatures extends LitElement {
 
 class PricingCardPrivacy extends LitElement {
   static properties = {
-    privacy: { type: Array },
+    privacy: { type: Array }
   };
 
   constructor() {
@@ -465,24 +466,24 @@ class PricingCardPrivacy extends LitElement {
         name: "Password Manager 1x",
         description:
           "Ultra-secure, feature-rich password manager. The last password you will ever need for hundreds of online accounts",
-        badge: "1x",
+        badge: "1x"
       },
       {
         name: "Unlimited VPN traffic 1x",
         description:
           "Keep your internet connections private & secure with VPN. Enjoy total anonymity on public & shared WI-FIs",
-        badge: "1x",
+        badge: "1x"
       },
       {
         name: "Choose from 4000+ VPN servers in 50+ countries",
         description:
-          "Our entire fleet of servers uses the latest available hardware, high-speed 10Gbps connections, and dedicated DNS servers.",
+          "Our entire fleet of servers uses the latest available hardware, high-speed 10Gbps connections, and dedicated DNS servers."
       },
       {
         name: "System-wide Ad blocker & Anti-tracker",
         description:
-          "Blocks ads, hinders ad targeting, and prevents online behavior profiling.",
-      },
+          "Blocks ads, hinders ad targeting, and prevents online behavior profiling."
+      }
     ];
   }
 
@@ -522,7 +523,7 @@ class PricingCardPrivacy extends LitElement {
 
 class PricingCardIdentify extends LitElement {
   static properties = {
-    identity: { type: Array },
+    identity: { type: Array }
   };
 
   constructor() {
@@ -532,8 +533,8 @@ class PricingCardIdentify extends LitElement {
         name: "Data Breach Detection",
         description:
           "Ultra-secure, feature-rich password manager. The last password you will ever need for hundreds of online accounts",
-        badge: "1x",
-      },
+        badge: "1x"
+      }
     ];
   }
 
@@ -573,7 +574,7 @@ class PricingCardIdentify extends LitElement {
 
 class PricingCardIdentityExtend extends LitElement {
   static properties = {
-    identity: { type: Array },
+    identity: { type: Array }
   };
 
   constructor() {
@@ -583,28 +584,28 @@ class PricingCardIdentityExtend extends LitElement {
         name: "Digital Identity Protection",
         description:
           "Don't get caught off guard by future data leaks. Every time your personal information ends up in a breach, Bitdefender Digital Identity Protection notifies you so you can act quickly and minimize the impact.",
-        badge: "1x",
+        badge: "1x"
       },
       {
         name: "Data Breach Detection",
         description:
-          "Access a comprehensive list detailing organizations that exposed your personal information and get actionable tips to address each breach and fortify your online security.",
+          "Access a comprehensive list detailing organizations that exposed your personal information and get actionable tips to address each breach and fortify your online security."
       },
       {
         name: "Dark Web Monitoring",
         description:
-          "We constantly scan the web (including dark web) for unauthorized leaks of personal data and give real-time alerts so you can act quickly by changing passwords, deleting accounts, or freezing credit cards before a serious incident occurs.",
+          "We constantly scan the web (including dark web) for unauthorized leaks of personal data and give real-time alerts so you can act quickly by changing passwords, deleting accounts, or freezing credit cards before a serious incident occurs."
       },
       {
         name: "Digital Footprint Visualization",
         description:
-          "Identify precisely which websites or services have compromised your sensitive information, and see how you can undo the damage.",
+          "Identify precisely which websites or services have compromised your sensitive information, and see how you can undo the damage."
       },
       {
         name: "Real Time Breach Notifications",
         description:
-          "Stay one step ahead with our real-time breach notification feature. Instant alerts empower you to take immediate action, protecting your sensitive information and maintaining peace of mind effortlessly.",
-      },
+          "Stay one step ahead with our real-time breach notification feature. Instant alerts empower you to take immediate action, protecting your sensitive information and maintaining peace of mind effortlessly."
+      }
     ];
   }
 
@@ -644,7 +645,7 @@ class PricingCardIdentityExtend extends LitElement {
 
 class PricingCardParentalControl extends LitElement {
   static properties = {
-    parentalControl: { type: Array },
+    parentalControl: { type: Array }
   };
 
   constructor() {
@@ -653,32 +654,32 @@ class PricingCardParentalControl extends LitElement {
       {
         name: "Internet time limit",
         description:
-          "Set healthy limits on the time your child can spend online on a certain device.",
+          "Set healthy limits on the time your child can spend online on a certain device."
       },
       {
         name: "Content filtering",
         description:
-          "Select the content categories you want to keep away from your child.",
+          "Select the content categories you want to keep away from your child."
       },
       {
         name: "Routines/Schedules",
         description:
-          "Manage your child's internet time with customizable daily limits, structured routines like Focus time, Family time and Bedtime",
+          "Manage your child's internet time with customizable daily limits, structured routines like Focus time, Family time and Bedtime"
       },
       {
-        name: "Location",
-        description: "Track child location.",
+        name       : "Location",
+        description: "Track child location."
       },
       {
         name: "Rewards",
         description:
-          "Interact with children by responding to their requests for extending daily internet time.",
+          "Interact with children by responding to their requests for extending daily internet time."
       },
       {
         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."
+      }
     ];
   }
 
@@ -716,16 +717,16 @@ class PricingCardParentalControl extends LitElement {
   }
 }
 
-PricingCardIdentify.styles = [pricingCardsCSS];
-PricingCardIdentityExtend.styles = [pricingCardsCSS];
-PricingCardParentalControl.styles = [pricingCardsCSS];
+PricingCardIdentify.styles = [tokens, pricingCardsCSS];
+PricingCardIdentityExtend.styles = [tokens, pricingCardsCSS];
+PricingCardParentalControl.styles = [tokens, pricingCardsCSS];
 
-PricingCardPrivacy.styles = [pricingCardsCSS];
-PricingCardFeatures.styles = [pricingCardsCSS];
-PricingCard.styles = [pricingCardsCSS];
-PricingCardFamily.styles = [pricingCardsCSS];
-PricingContainer.styles = [pricingCardsCSS];
-PricingSwitch.styles = [pricingCardsCSS];
+PricingCardPrivacy.styles = [tokens, pricingCardsCSS];
+PricingCardFeatures.styles = [tokens, pricingCardsCSS];
+PricingCard.styles = [tokens, pricingCardsCSS];
+PricingCardFamily.styles = [tokens, pricingCardsCSS];
+PricingContainer.styles = [tokens, pricingCardsCSS];
+PricingSwitch.styles = [tokens, pricingCardsCSS];
 
 customElements.define("pricing-card-identity", PricingCardIdentify);
 customElements.define(

package/src/components/radio/radio.js

@@ -1,16 +1,17 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 import radioCSS from "./radio.css.js";
 
 class BdRadio extends LitElement {
   static properties = {
-    name: { type: String },
-    value: { type: String },
-    checked: { type: Boolean, reflect: true },
+    name    : { type: String },
+    value   : { type: String },
+    checked : { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    label: { type: String },
+    label   : { type: String }
   };
 
-  static styles = [radioCSS];
+  static styles = [tokens, radioCSS];
 
   constructor() {
     super();
@@ -78,9 +79,9 @@ class BdRadio extends LitElement {
 
     this.dispatchEvent(
       new CustomEvent("change", {
-        detail: { value: this.value },
-        bubbles: true,
-        composed: true,
+        detail  : { value: this.value },
+        bubbles : true,
+        composed: true
       })
     );
   }
@@ -108,14 +109,14 @@ class BdRadio extends LitElement {
 }
 
 class BdToggleRadio extends LitElement {
-  static styles = [radioCSS];
+  static styles = [tokens, radioCSS];
 
   static properties = {
-    name: { type: String },
-    value: { type: String },
-    checked: { type: Boolean, reflect: true },
+    name    : { type: String },
+    value   : { type: String },
+    checked : { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    label: { type: String },
+    label   : { type: String }
   };
 
   constructor() {
@@ -157,9 +158,9 @@ class BdToggleRadio extends LitElement {
 
     this.dispatchEvent(
       new CustomEvent("change", {
-        detail: { value: this.checked ? this.value : null },
-        bubbles: true,
-        composed: true,
+        detail  : { value: this.checked ? this.value : null },
+        bubbles : true,
+        composed: true
       })
     );
   }
@@ -182,18 +183,6 @@ class BdToggleRadio extends LitElement {
     }
   }
 
-  handleClick() {
-    if (this.disabled) return;
-    this.checked = !this.checked;
-
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { value: this.checked ? this.value : null },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
   render() {
     return html`
       <label class="bd-radio ${this.disabled ? "disabled" : ""}">
@@ -215,8 +204,8 @@ class BdToggleRadio extends LitElement {
     `;
   }
 }
-BdRadio.styles = [radioCSS];
-BdToggleRadio.styles = [radioCSS];
+BdRadio.styles = [tokens, radioCSS];
+BdToggleRadio.styles = [tokens, radioCSS];
 
 customElements.define("bd-toggle-radio", BdToggleRadio);
 customElements.define("bd-radio", BdRadio);

package/src/components/tabs/tabs.js

@@ -1,11 +1,11 @@
-import { LitElement, html, css } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 
 import tabsCSS from "../tabs/tabs.css.js";
 
 class TabsComponent extends LitElement {
   static properties = {
-    selectedTab: { type: Number },
+    selectedTab: { type: Number }
   };
 
   constructor() {
@@ -22,30 +22,30 @@ class TabsComponent extends LitElement {
   render() {
     const tabs = [
       {
-        title: "Privacy Protection",
+        title    : "Privacy Protection",
         imageBase: "images/tabs-img1.png",
-        icon: "icons/pic1.png",
+        icon     : "icons/pic1.png"
       },
       {
-        title: "Identity Protection",
+        title    : "Identity Protection",
         imageBase: "images/tabs-img2.png",
-        icon: "icons/pic2.png",
+        icon     : "icons/pic2.png"
       },
       {
-        title: "Device Protection",
+        title    : "Device Protection",
         imageBase: "images/tabs-img3.png",
-        icon: "icons/pic3.png",
+        icon     : "icons/pic3.png"
       },
       {
-        title: "Financial Insurance",
+        title    : "Financial Insurance",
         imageBase: "images/tabs-img3.png",
-        icon: "icons/pic3.png",
-      },
+        icon     : "icons/pic3.png"
+      }
     ];
 
     const content = [
       {
-        heading: "Take back your family’s digital privacy",
+        heading    : "Take back your family’s digital privacy",
         description: () => html`<ul class="ul-privacy">
           <li>
             Enjoy complete data privacy with
@@ -61,10 +61,10 @@ class TabsComponent extends LitElement {
             <strong>Webcam and Microphone Protection</strong>.
           </li>
         </ul>`,
-        href: "#1",
+        href: "#1"
       },
       {
-        heading: "Safe data. Safe you.",
+        heading    : "Safe data. Safe you.",
         description: () => html`<p>
             Get instant alerts for potential threats to your personal data and
             finances.
@@ -74,10 +74,10 @@ class TabsComponent extends LitElement {
             Reduce the risk of online ID theft by scanning your digital
             footprint.
           </p>`,
-        href: "#2",
+        href: "#2"
       },
       {
-        heading: "We secure what you hold dear",
+        heading    : "We secure what you hold dear",
         description: () => html`<p>
             Enjoy seamless security across all devices.
           </p>
@@ -86,10 +86,10 @@ class TabsComponent extends LitElement {
             attempts.
           </p>
           <p>Lightweight performance ensures smooth device operation.</p>`,
-        href: "#3",
+        href: "#3"
       },
       {
-        heading: "Financial Insurance",
+        heading    : "Financial Insurance",
         description: () => html`<p>
             Enjoy seamless security across all devices.
           </p>
@@ -98,8 +98,8 @@ class TabsComponent extends LitElement {
             attempts.
           </p>
           <p>Lightweight performance ensures smooth device operation.</p>`,
-        href: "#4",
-      },
+        href: "#4"
+      }
     ];
 
     const selectedTabData = tabs[this.selectedTab];
@@ -185,6 +185,6 @@ class TabsComponent extends LitElement {
   }
 }
 
-TabsComponent.styles = [tabsCSS];
+TabsComponent.styles = [tokens, tabsCSS];
 
 customElements.define("bd-tabs-component", TabsComponent);

package/src/components/termsOfUse/terms.js

@@ -1,11 +1,11 @@
-import { LitElement, html, css } from "lit";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
 
 import termsCSS from "../termsOfUse/terms.css.js";
 
 class TermsSection extends LitElement {
   static properties = {
-    faqs: { type: Array },
+    faqs: { type: Array }
   };
 
   constructor() {
@@ -13,7 +13,7 @@ class TermsSection extends LitElement {
     this.faqs = [
       {
         question: "Auto renewal terms",
-        answer: `
+        answer  : `
 <p>
               <ul>
                 <li>Your subscription automatically begins at the purchase date;</li>
@@ -21,7 +21,7 @@ class TermsSection extends LitElement {
                 <li>The Bitdefender Auto Renewal Plan is designed to save you time, effort, and minimize your vulnerability risk by extending your subscription automatically before you run out of protection.</li>
               </ul>
             </p>        `,
-        open: false,
+        open: false
       },
       {
         question:
@@ -39,30 +39,30 @@ class TermsSection extends LitElement {
                 <li>If a discount is presented, it describes the difference between the first term and renewal term subscription prices (e.g., first year price vs. each year thereafter). The prices are subject to change, but Bitdefender will send a prior notification by email, before the automatic renewal takes place. You will receive an email notification before you will be billed, along with information regarding pricing and the extension of your subscription duration.</li>
               </ul>
             </p>        `,
-        open: false,
+        open: false
       },
       {
         question: "Affirmative consent",
-        answer: `
+        answer  : `
 <p>
               <ul>
                 <li>Your subscription automatically begins at the purchase date;</li>
                 <li>By subscribing, you are purchasing a recurring subscription which will automatically renew.</li>
               </ul>
             </p>        `,
-        open: false,
+        open: false
       },
       {
         question: "How to cancel + email address cancelation support",
-        answer: `
+        answer  : `
 <p>
               <ul>
                 <li>You can cancel your automatically subscription from Bitdefender Central or by contacting Customer Support at: <a href="mailto:cancel@bitdefender.com" title="cancel@bitdefender.com">cancel@bitdefender.com</a></li>
                 <li>You can refund by contacting <a href="mailto:refunds@bitdefender.com" title="refunds@bitdefender.com">refunds@bitdefender.com</a> within 30 days of your initial purchase or of the automatic renewal date.</li>
               </ul>
             </p>        `,
-        open: false,
-      },
+        open: false
+      }
     ];
   }
 
@@ -219,8 +219,8 @@ class TermsSection extends LitElement {
       </div>
     `;
   }
-  
+
 }
 
-TermsSection.styles = [termsCSS];
+TermsSection.styles = [tokens, termsCSS];
 customElements.define("bd-terms-section", TermsSection);

package/src/tokens/layout.css

@@ -1,4 +1,3 @@
-@import './tokens.css';
 .bd-button-container {
     display: flex;
     flex-direction: column; 

package/src/tokens/tokens.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 export const tokens = css`
-    :root {
+    :host {
 
         /* =====================
             COLORS