@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/termsOfUse/terms.js

@@ -1,5 +1,7 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import '../list/list-item/list-item.js';
+import '../list/list.js';
 import termsCSS from "../termsOfUse/terms.css.js";
 
 class TermsSection extends LitElement {
@@ -12,66 +14,61 @@ class TermsSection extends LitElement {
     this.faqs = [
       {
         question: "Auto renewal terms",
-        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>
-                <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
+        items   : [
+          "Your subscription automatically begins at the purchase date;",
+          "By subscribing, you are purchasing a recurring subscription which will automatically renew;",
+          "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."
+        ]
       },
       {
-        question:
-          "Here is what the Bitdefender Auto Renewal Plan means for you",
-        answer: `
-<p>
-              <ul>
-                <li>Continuous protection so that you never have to worry about your subscription running out before you renew manually;</li>
-                <li>Free upgrades whenever a new version of Bitdefender comes out;</li>
-                <li>Peace of mind that your devices are always protected;</li>
-                <li>Save time while we are taking care of the automatic renewal process;</li>
-                <li>Opt out at any time so that you are always in control of your renewal options;</li>
-                <li>24/7 security all-subscription long without interruption;</li>
-                <li>The price offered is valid for the first year of subscription. After that, your subscription will be billed at the applicable renewal price;</li>
-                <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
+        question: "Here is what the Bitdefender Auto Renewal Plan means for you",
+        items   : [
+          "Continuous protection so that you never have to worry about your subscription running out before you renew manually;",
+          "Free upgrades whenever a new version of Bitdefender comes out;",
+          "Peace of mind that your devices are always protected;",
+          "Save time while we are taking care of the automatic renewal process;",
+          "Opt out at any time so that you are always in control of your renewal options;",
+          "24/7 security all-subscription long without interruption;",
+          "The price offered is valid for the first year of subscription. After that, your subscription will be billed at the applicable renewal price;",
+          "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."
+        ]
       },
       {
         question: "Affirmative consent",
-        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
+        items   : [
+          "Your subscription automatically begins at the purchase date;",
+          "By subscribing, you are purchasing a recurring subscription which will automatically renew."
+        ]
       },
       {
         question: "How to cancel + email address cancelation support",
-        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
+        items   : [
+          html`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>`,
+          html`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.`
+        ]
       }
     ];
   }
 
-  toggleItem(index) {
-    this.faqs = this.faqs.map((faq, i) => {
-      if (i === index) {
-        return { ...faq, open: !faq.open };
-      }
-      return faq;
-    });
+  _renderFAQItem(faq) {
+    return html`
+      <div>
+        <div>
+          <bd-p kind="small" class="bd-terms-text-p"><strong>${faq.question}</strong></bd-p>
+          ${faq.items
+            ? html`
+            <bd-p kind="small">
+              <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
+                ${faq.items.map(item => html`
+                  <bd-li kind="bullet" size="md">${item}</bd-li>
+                `)}
+              </bd-list>
+            </bd-p>
+          `
+            : ''}
+        </div>
+      </div>
+    `;
   }
 
   render() {
@@ -93,124 +90,44 @@ class TermsSection extends LitElement {
                 <h5 id="bd-terms-of-use">Terms of use</h5>
               </div>
             </div>
+            
+            <!-- Render FAQ items -->
+            ${this.faqs.map((faq, index) => this._renderFAQItem(faq, index))}
+            
+            <!-- Additional content -->
             <div>
-              <div>
-                <p class="bd-terms-text-p"><strong>Auto renewal terms</strong></p>
-                <p class="bd-terms-text-p">
-                  Your subscription automatically begins at the purchase date;
-                </p>
-                <p class="bd-terms-text-p">
-                  By subscribing, you are purchasing a recurring subscription
-                  which will automatically renew;
-                </p>
-                <p class="bd-terms-text-p">
-                  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.
-                </p>
-              </div>
-            </div>
-            <div>
-              <div>
-                <p class="bd-terms-text-p">
-                  <strong
-                    >Here is what the Bitdefender Auto Renewal Plan means for
-                    you</strong
-                  >
-                </p>
-                <p class="bd-terms-text-p">
-                  Continuous protection so that you never have to worry about
-                  your subscription running out before you renew manually;
-                </p>
-                <p class="bd-terms-text-p">
-                  Free upgrades whenever a new version of Bitdefender comes out;
-                </p>
-                <p class="bd-terms-text-p">Peace of mind that your devices are always protected;</p>
-                <p class="bd-terms-text-p">
-                  Save time while we are taking care of the automatic renewal
-                  process;
-                </p>
-                <p class="bd-terms-text-p">
-                  Opt out at any time so that you are always in control of your
-                  renewal options;
-                </p>
-                <p class="bd-terms-text-p">24/7 security all-subscription long without interruption;</p>
-                <p class="bd-terms-text-p">
-                  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.
-                </p>
-              </div>
-            </div>
-            <div>
-              <div>
-                <p class="bd-terms-text-p"><strong>Affirmative consent</strong></p>
-                <p class="bd-terms-text-p">
-                  Your subscription automatically begins at the purchase
-                  date;<br />
-                  By subscribing, you are purchasing a recurring subscription
-                  which will automatically renew.
-                </p>
-              </div>
-            </div>
-            <div>
-              <div>
-                <p class="bd-terms-text-p">
-                  <strong
-                    >How to cancel + email address cancelation support</strong
-                  >
-                </p>
-                <p class="bd-terms-text-p">
-                  You can cancel your automatically subscription from
-                  Bitdefender Central or by contacting Customer Support at:
-                  <a class="bd-terms-text-a"
-                    href="mailto:cancel@bitdefender.com"
-                    title="cancel@bitdefender.com"
-                    >cancel@bitdefender.com</a
-                  ><br />
-                  You can refund by contacting
+              <div class="bd-terms-text-p">
+                <bd-p kind="small">
+                  Your subscription may include product, service and/or protection
+                  updates and features that may be added, modified or removed
+                  subject to
                   <a class="bd-terms-text-a"
-                    href="mailto:refunds@bitdefender.com"
-                    title="refunds@bitdefender.com"
-                    >refunds@bitdefender.com</a
+                    href="https://www.bitdefender.com/legal/?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1739263766"
+                    title="Bitdefender Subscription Agreement and Terms and Conditions for Home Users"
+                    >Bitdefender Subscription Agreement and Terms and Conditions
+                    for Home Users</a
                   >
-                  within 30 days of your initial purchase or of the automatic
-                  renewal date.
-                </p>
-              </div>
-            </div>
-            <div>
-              <div class="bd-terms-text-p">
-                Your subscription may include product, service and/or protection
-                updates and features that may be added, modified or removed
-                subject to
-                <a class="bd-terms-text-a"
-                  href="https://www.bitdefender.com/legal/?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1739263766"
-                  title="Bitdefender Subscription Agreement and Terms and Conditions for Home Users"
-                  >Bitdefender Subscription Agreement and Terms and Conditions
-                  for Home Users</a
-                >
-                and
-                <a class="bd-terms-text-a"
-                  href="https://www.bitdefender.com/site/view/legal-privacy-policy-for-home-users-solutions.html?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1739263766"
-                  title="Privacy Notice"
-                  >Privacy Notice</a
-                >.
+                  and
+                  <a class="bd-terms-text-a"
+                    href="https://www.bitdefender.com/site/view/legal-privacy-policy-for-home-users-solutions.html?adobe_mc=MCMID%3D63411747395182077784244429321314993670%7CMCORGID%3D0E920C0F53DA9E9B0A490D45%2540AdobeOrg%7CTS%3D1739263766"
+                    title="Privacy Notice"
+                    >Privacy Notice</a
+                  >.
+                </bd-p>
               </div>
             </div>
             <div>
               <div class="bd-terms-text-p">
-                By using the subscription, You acknowledge and agree that your
-                use of the product which integrates with YouTube API Services is
-                subject to
-                <a class="bd-terms-text-a"
-                  href="https://www.youtube.com/static?template=terms"
-                  title="YouTube’s Terms of Service"
-                  >YouTube’s Terms of Service</a
-                >.
+                <bd-p kind="small">
+                  By using the subscription, You acknowledge and agree that your
+                  use of the product which integrates with YouTube API Services is
+                  subject to
+                  <a class="bd-terms-text-a"
+                    href="https://www.youtube.com/static?template=terms"
+                    title="YouTube's Terms of Service"
+                    >YouTube's Terms of Service</a
+                  >.
+                </bd-p>
               </div>
             </div>
           </div>
@@ -218,8 +135,7 @@ class TermsSection extends LitElement {
       </div>
     `;
   }
-
 }
 
 TermsSection.styles = [tokens, termsCSS];
-customElements.define("bd-terms-section", TermsSection);
+customElements.define("bd-terms-section", TermsSection);

package/src/components/termsOfUse/terms.stories.js

@@ -1,10 +1,11 @@
 import { html } from 'lit';
-import './terms.js'; 
+
+import './terms.js';
 
 export default {
-  title: 'Components/TermsSection',
+  title    : 'Components/TermsSection',
   component: 'bd-terms-section',
-  tags: ['autodocs'],
+  tags     : ['autodocs']
 };
 
 const Template = () => html`

package/src/stories/Header.js

@@ -29,15 +29,15 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
         ${user
           ? Button({ size: 'small', onClick: onLogout, label: 'Log out' })
           : html`${Button({
-              size: 'small',
-              onClick: onLogin,
-              label: 'Log in',
-            })}
+            size   : 'small',
+            onClick: onLogin,
+            label  : 'Log in'
+          })}
             ${Button({
               primary: true,
-              size: 'small',
+              size   : 'small',
               onClick: onCreateAccount,
-              label: 'Sign up',
+              label  : 'Sign up'
             })}`}
       </div>
     </div>

package/src/tokens/layout.css

@@ -25,15 +25,15 @@
 .bd-container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: var(--size-16);
+    padding: var(--spacing-16);
     display: flex;
     flex-direction: column; 
-    gap: var(--size-8); 
+    gap: var(--spacing-8); 
   }
   
   .bd-container-fluid {
     width: 100%;
-    padding: var(--size-16);
+    padding: var(--spacing-16);
   }
 
   .pricing-container {

package/src/tokens/tokens.css

@@ -785,29 +785,6 @@
   /* Caption */
   --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
 
-  /* --spacing-0: 0;
-  --spacing-1: 1px;
-  --spacing-2: 2px;
-  --spacing-4: 4px;
-  --spacing-6: 6px;
-  --spacing-8: 8px;
-  --spacing-10: 10px;
-  --spacing-12: 12px;
-  --spacing-14: 14px;
-  --spacing-16: 16px;
-  --spacing-18: 18px;
-  --spacing-20: 20px;
-  --spacing-22: 22px;
-  --spacing-24: 24px;
-  --spacing-32: 32px;
-  --spacing-36: 36px;
-  --spacing-40: 40px;
-  --spacing-44: 44px;
-  --spacing-52: 52px;
-  --spacing-64: 64px;
-  --spacing-full: 99999999999999999999;
-   */
-
   /* Spacing Tokens
   -----------------------------------------------*/
   /* Base spacing tokens - Based on 4px grid */

package/src/tokens/tokens.stories.js

@@ -1,15 +1,16 @@
 import { html } from 'lit';
+import '../components/heading/heading.js';
 
 export default {
-  title: 'Design Tokens/Colors',
+  title: 'Design Tokens/Colors'
 };
 
 const colorGroups = {
-  blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
-  red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
-  green: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
-  yellow: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
-  neutral: ['0', '25', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950', '1000'],
+  blue   : ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  red    : ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  green  : ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  yellow : ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'],
+  neutral: ['0', '25', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950', '1000']
 };
 
 export const Colors = () => html`
@@ -52,7 +53,7 @@ export const Colors = () => html`
 
   ${Object.entries(colorGroups).map(([group, shades]) => html`
     <section class="color-group">
-      <h3 class="color-group-title">${group}</h3>
+      <bd-h as="h4" class="color-group-title">${group}</bd-h>
       ${shades.map(shade => {
         const varName = `--color-${group}-${shade}`;
         return html`
@@ -64,4 +65,4 @@ export const Colors = () => html`
       })}
     </section>
   `)}
-`;
+`;

package/src/components/accordion/accordion-no-bg.css.js

@@ -1,114 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
-    --bd-accesibility-focus: var(--color-blue-500);
-    display: block;
-  }
-
-  .bd-accordion-bg-item {
-    margin-bottom: var(--spacing-16);
-    border-radius: var(--spacing-8);
-    overflow: hidden;
-    transition: box-shadow 0.3s ease;
-  }
-
-  .bd-accordion-bg-item:hover {
-    .bd-accordion-bg-question-text {
-      text-decoration-line: underline;
-    }
-  }
-
-  .bd-accordion-bg-question {
-    cursor: pointer;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-10);
-    padding: var(--spacing-16);
-    font-weight: bold;
-    color: #333;
-    transition: background-color 0.3s ease, color 0.3s ease;
-  }
-
-  .bd-accordion-bg-header {
-    margin-bottom: var(--spacing-32);
-  }
-
-  .bd-accordion-bg-question:hover {
-    color: #0073e6;
-  }
-
-  .bd-accordion-bg-item:focus-visible {
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
-  }
-
-  .bd-accordion-bg-item:focus {
-    .bd-accordion-bg-question-text {
-      font-weight: 600;
-      text-decoration-line: underline;
-      color: var(--color-blue-600);
-      text-decoration-thickness: var(--spacing-2);
-    }
-  }
-
-  .bd-accordion-bg-question-text {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-  }
-
-  .bd-accordion-bg-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-  }
-
-  .bd-accordion-bg-icon {
-    transition: transform 0.3s ease;
-    width: var(--spacing-14);
-    height: var(--spacing-14);
-    color: var(--color-blue-500);
-    text-align: center;
-    position: relative;
-    bottom: 1px;
-  }
-
-  .bd-accordion-bg-answer {
-    overflow: hidden;
-    max-height: 0;
-    opacity: 0;
-    padding: 0 15px;
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--font-weight-sans-medium);
-  }
-
-  .bd-accordion-bg-item.open .bd-accordion-bg-answer {
-    max-height: 1000px;
-    opacity: 1;
-    padding: var(--spacing-0) var(--spacing-40);
-  }
-
-  .bd-accordion-bg-answer > div {
-    overflow: hidden;
-  }
-
-  .bd-accordion-bg-container {
-    width: 90%;
-    margin: auto;
-    padding-top: var(--spacing-64);
-    padding-bottom: var(--spacing-64);
-  }
-
-  .bd-accordion-bg-link-noline {
-    text-decoration: none;
-  }
-`;

package/src/components/accordion/accordion-no-bg.js

@@ -1,80 +0,0 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
-import accordionCSS from "./accordion-no-bg.css";
-
-class BdAccordionNoBg extends LitElement {
-  static properties = {
-    title: { type: String }
-  };
-
-  static styles = [tokens, accordionCSS];
-
-  render() {
-    return html`
-      <div class="bd-accordion-bg-container">
-        <div class="bd-accordion-bg-header">
-          <h1 class="bd-accordion-bg-title">${this.title}</h1>
-        </div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-class BdAccordionNoBgItem extends LitElement {
-  static properties = {
-    title: { type: String },
-    open : { type: Boolean, reflect: true }
-  };
-
-  constructor() {
-    super();
-    this.title = "";
-    this.open = false;
-    this.id = `accordion-${Math.random().toString(36)
-      .substr(2, 9)}`;
-  }
-
-  static styles = [tokens, accordionCSS];
-
-  toggleItem() {
-    this.open = !this.open;
-  }
-
-  handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this.toggleItem();
-    }
-  }
-
-  render() {
-    return html`
-      <div
-        class="bd-accordion-bg-item ${this.open ? "open" : ""}"
-        role="button"
-        aria-expanded="${this.open}"
-        aria-controls="${this.id}"
-        tabindex="0"
-        @click=${this.toggleItem}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="bd-accordion-bg-question">
-          <span class="bd-accordion-bg-icon">${this.open ? "−" : "+"}</span>
-          <span class="bd-accordion-bg-question-text">${this.title}</span>
-        </div>
-        <div
-          id="${this.id}"
-          class="bd-accordion-bg-answer"
-          role="region"
-          aria-labelledby="${this.id}"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-customElements.define("bd-accordion-no-bg", BdAccordionNoBg);
-customElements.define("bd-accordion-no-bg-item", BdAccordionNoBgItem);