@repobit/dex-system-design 0.19.2 → 0.20.0

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);

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

@@ -360,25 +360,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>

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/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);