@repobit/dex-system-design 0.11.0 → 0.14.0

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

@@ -18,47 +18,47 @@ export default css`
   }
 
   button:focus-visible {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-2);
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
   }
   a:focus-visible {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-2);
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
     border-radius: var(--space-2xs);
   }
   .card {
     padding-top: 2em;
     background: var(--background-card-grey);
-    border: var(--size-2) solid var(--border-card-grey);
-    border-radius: var(--size-20);
-    padding: var(--size-32);
+    border: var(--spacing-2) solid var(--border-card-grey);
+    border-radius: var(--spacing-20);
+    padding: var(--spacing-32);
     text-align: center;
     max-width: 360px;
     position: relative;
     height: 100%;
   }
   .bd-section-title {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
   }
 
   .highlight {
-    border: var(--size-2) solid var(--border-card-green);
+    border: var(--spacing-2) solid var(--border-card-green);
   }
 
   .highlight-banner {
     background: var(--border-card-green);
     color: white;
     font-size: 18px;
-    padding: var(--size-16) var(--size-8);
-    border-top-left-radius: var(--size-20);
-    border-top-right-radius: var(--size-20);
+    padding: var(--spacing-16) var(--spacing-8);
+    border-top-left-radius: var(--spacing-20);
+    border-top-right-radius: var(--spacing-20);
     position: absolute;
     top: -2.67em; /* echivalent cu -3rem */
     left: 50%;
     transform: translateX(-50%);
     width: 85%;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     font-weight: 600;
     line-height: 14px;
     z-index: 1;
@@ -73,7 +73,7 @@ export default css`
   .card-title {
     font-size: 2em;
     font-weight: 700;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     line-height: 34px;
     text-align: start;
     margin: 0px;
@@ -86,35 +86,35 @@ export default css`
   .pricing-info {
     display: inline-flex;
     align-items: center;
-    gap: var(--size-8);
+    gap: var(--spacing-8);
   }
   .badge-subtitle {
     font-size: 16px !important;
     font-weight: 500;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     color: var(--color-neutral-950);
-    margin: var(--size-0);
-    margin-top: var(--size-8);
+    margin: var(--spacing-0);
+    margin-top: var(--spacing-8);
   }
   .badge {
     display: inline-block;
     background: var(--badge-background);
     color: var(--text-color-white);
     font-size: 14px;
-    padding: var(--size-6) 9px var(--size-6) var(--size-8);
-    border-radius: var(--size-16);
-    margin: var(--size-20) var(--size-0) 5px var(--size-0);
+    padding: var(--spacing-6) 9px var(--spacing-6) var(--spacing-8);
+    border-radius: var(--spacing-16);
+    margin: var(--spacing-20) var(--spacing-0) 5px var(--spacing-0);
     text-align: left;
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     font-weight: 500;
-    line-height: var(--size-14);
-    gap: var(--size-10);
+    line-height: var(--spacing-14);
+    gap: var(--spacing-10);
   }
   .badge img {
     position: relative;
-    top: var(--size-1);
+    top: var(--spacing-1);
     width: 11px;
-    height: var(--size-14);
+    height: var(--spacing-14);
   }
 
   .badge p {
@@ -125,15 +125,15 @@ export default css`
     flex-direction: column;
     align-items: start;
     text-align: start;
-    margin: var(--size-16) 0;
+    margin: var(--spacing-16) 0;
   }
   .pricing > * {
     margin: 0;
   }
   .original-price {
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     font-weight: 500;
-    line-height: var(--size-18);
+    line-height: var(--spacing-18);
     font-size: 16px;
     text-decoration: line-through;
     color: var(--color-neutral-950);
@@ -141,31 +141,31 @@ export default css`
 
   .discount {
     background: var(--color-green-100);
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     font-weight: 600;
     font-size: 16px;
     font-weight: bold;
     border-radius: 22px;
-    padding: var(--size-6) var(--size-12) var(--size-8) var(--size-12);
-    gap: var(--size-10);
+    padding: var(--spacing-6) var(--spacing-12) var(--spacing-8) var(--spacing-12);
+    gap: var(--spacing-10);
     color: var(--color-green-800);
-    margin: var(--size-0);
+    margin: var(--spacing-0);
   }
 
   .price {
     font-size: 40px;
     font-weight: 700;
     color: var(--color-neutral-950);
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     line-height: 34px;
   }
 
   .terms {
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     font-weight: 400;
     font-size: 12px;
     color: var(--color-neutral-950);
-    line-height: var(--size-14);
+    line-height: var(--spacing-14);
     margin-top: 15px;
     max-width: 80%;
   }
@@ -177,9 +177,9 @@ export default css`
   .actions {
     display: flex;
     flex-direction: column;
-    gap: var(--size-12);
+    gap: var(--spacing-12);
     align-items: stretch;
-    margin-bottom: var(--size-20);
+    margin-bottom: var(--spacing-20);
     width: 100%;
   }
 
@@ -187,12 +187,12 @@ export default css`
     font-size: 16px;
     font-weight: 700;
     color: var(--color-neutral-900);
-    font-family: var(--font-family-sans);
-    line-height: var(--size-18);
+    font-family: var(--typography-fontFamily-sans);
+    line-height: var(--spacing-18);
   }
 
   .features ul {
-    padding-left: var(--size-0);
+    padding-left: var(--spacing-0);
   }
 
   .pricing-card {
@@ -205,14 +205,14 @@ export default css`
     text-align: start;
   }
   .additional-info li {
-    font-family: var(--font-family-sans);
+    font-family: var(--typography-fontFamily-sans);
     font-weight: 400;
     font-size: 14px;
     color: var(--color-neutral-950);
-    margin-bottom: var(--size-10);
+    margin-bottom: var(--spacing-10);
     display: flex;
     align-items: center;
-    gap: var(--size-8);
+    gap: var(--spacing-8);
     white-space: normal;
     overflow: visible;
   }
@@ -221,11 +221,11 @@ export default css`
     max-width: 400px !important;
   }
   .features {
-    padding: var(--size-10);
+    padding: var(--spacing-10);
   }
 
   .badge-icon {
-    margin-right: var(--size-8);
+    margin-right: var(--spacing-8);
   }
   .features h4 {
     text-align: start;
@@ -235,26 +235,26 @@ export default css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--size-16);
+    gap: var(--spacing-16);
     margin-bottom: 100px;
   }
 
   .plan-switch {
-    margin-bottom: var(--size-24);
+    margin-bottom: var(--spacing-24);
   }
 
   .pricing-cards {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    gap: var(--size-24);
+    gap: var(--spacing-24);
     align-items: stretch;
   }
 
   .pricing-card {
     display: flex;
     flex-direction: column;
-    flex: 1 1 calc(33.333% - var(--size-16));
+    flex: 1 1 calc(33.333% - var(--spacing-16));
     max-width: 300px;
     min-height: 100%;
   }
@@ -263,7 +263,9 @@ export default css`
   }
   .switchBox {
     text-align: center;
-    padding-bottom: 60px;
+    margin-bottom: var(--spacing-32);
+    margin-top: var(--spacing-32);
+    padding-bottom: var(--spacing-32);
   }
 
   .switchBox .switch {
@@ -283,12 +285,12 @@ export default css`
   .switchBox .slider {
     position: absolute;
     content: "";
-    height: var(--size-40);
+    height: var(--spacing-40);
     width: 150px;
-    left: var(--size-2);
-    bottom: var(--size-2);
+    left: var(--spacing-2);
+    bottom: var(--spacing-2);
     background-color: white;
-    border-radius: var(--size-20);
+    border-radius: var(--spacing-20);
     transition: all 0.4s;
   }
 
@@ -302,7 +304,7 @@ export default css`
     text-align: center;
     font-weight: bold;
     line-height: 34px;
-    font-size: var(--size-16);
+    font-size: var(--spacing-16);
     color: white;
     transition: color 0.4s;
     cursor: pointer;
@@ -324,20 +326,20 @@ export default css`
 
   .switchBox .switch input ~ .label .icon {
     position: relative;
-    margin-right: var(--size-10);
-    top: var(--size-2);
+    margin-right: var(--spacing-10);
+    top: var(--spacing-2);
   }
 
   .switchBox .switch input ~ .label .icon svg {
-    width: var(--size-24);
-    height: var(--size-20);
+    width: var(--spacing-24);
+    height: var(--spacing-20);
   }
   .badge-icon-family {
-    top: var(--size-4) !important;
+    top: var(--spacing-4) !important;
     position: relative;
   }
   .badge-icon-user {
-    top: var(--size-4) !important;
+    top: var(--spacing-4) !important;
     position: relative;
   }
   .switchBox .switch input ~ .label.right .icon svg {
@@ -379,12 +381,12 @@ export default css`
     left: 0;
     background-color: #f8f8f8;
     color: #333;
-    padding: var(--size-8) var(--size-12);
+    padding: var(--spacing-8) var(--spacing-12);
     border-radius: 5px;
     font-size: 12px;
     max-width: 250px;
-    border: var(--size-1) solid #ccc;
-    box-shadow: 0 0 var(--size-10) rgba(0, 0, 0, 0.1);
+    border: var(--spacing-1) solid #ccc;
+    box-shadow: 0 0 var(--spacing-10) rgba(0, 0, 0, 0.1);
     z-index: 10;
   }
 
@@ -394,9 +396,9 @@ export default css`
     bottom: -8px;
     left: 20%;
     transform: translateX(-50%);
-    border-left: var(--size-8) solid transparent;
-    border-right: var(--size-8) solid transparent;
-    border-top: var(--size-8) solid #ccc;
+    border-left: var(--spacing-8) solid transparent;
+    border-right: var(--spacing-8) solid transparent;
+    border-top: var(--spacing-8) solid #ccc;
   }
 
   .feature-item:hover .tooltip {
@@ -405,37 +407,37 @@ export default css`
   .badge-feature {
     background-color: #007bff;
     color: white;
-    border-radius: var(--size-16);
-    width: var(--size-36);
-    height: var(--size-20);
+    border-radius: var(--spacing-16);
+    width: var(--spacing-36);
+    height: var(--spacing-20);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
-    margin-left: var(--size-8);
+    margin-left: var(--spacing-8);
     text-align: center;
-    padding: var(--size-2);
+    padding: var(--spacing-2);
   }
   .badge-feature-icon {
-    height: var(--size-14);
-    padding: var(--size-2);
+    height: var(--spacing-14);
+    padding: var(--spacing-2);
   }
   .badge-icon-family-subtitle {
-    width: var(--size-20) !important;
-    height: var(--size-20) !important;
-    top: var(--size-2);
-    padding-right: var(--size-4);
+    width: var(--spacing-20) !important;
+    height: var(--spacing-20) !important;
+    top: var(--spacing-2);
+    padding-right: var(--spacing-4);
   }
   .family-text {
     position: relative;
-    bottom: var(--size-4);
+    bottom: var(--spacing-4);
   }
 
   @media (max-width: 1024px) {
     .pricing-cards {
       flex-direction: column;
       align-items: center;
-      gap: var(--size-52);
+      gap: var(--spacing-52);
     }
 
     .pricing-card {
@@ -460,7 +462,7 @@ export default css`
   @media (max-width: 768px) {
     .pricing-card {
       max-width: 90%;
-      padding: var(--size-24);
+      padding: var(--spacing-24);
     }
     .switchBox {
       text-align: center;
@@ -488,24 +490,24 @@ export default css`
 
     .pricing-info {
       flex-direction: column;
-      gap: var(--size-4);
+      gap: var(--spacing-4);
     }
 
     .highlight-banner {
       font-size: 14px;
-      padding: var(--size-8);
+      padding: var(--spacing-8);
     }
 
     .actions {
       flex-direction: column;
-      gap: var(--size-8);
+      gap: var(--spacing-8);
     }
   }
 
   @media (max-width: 480px) {
     .pricing-card {
       max-width: 100%;
-      padding: var(--size-16);
+      padding: var(--spacing-16);
     }
 
     .card-title {
@@ -529,11 +531,11 @@ export default css`
 
     .badge {
       font-size: 12px;
-      padding: var(--size-4) var(--size-6);
+      padding: var(--spacing-4) var(--spacing-6);
     }
 
     .actions {
-      gap: var(--size-6);
+      gap: var(--spacing-6);
     }
   }
   @media (min-width: 768px) and (max-width: 1024px) {

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

@@ -44,9 +44,6 @@ class PricingContainer extends LitElement {
   render() {
     return html`
       <div class="pricing-container">
-        <h1 class="bd-section-title">
-          Pricing Cards
-        </h1>
         <pricing-switch
           .planType=${this.planType}
           @plan-switch=${this.handleSwitch}
@@ -166,7 +163,7 @@ class PricingCard extends LitElement {
           <p class="card-title">${this.title}</p>
           <span class="badge">
             <img
-              src="icons/badge-icon-individual.png"
+              src="/assets/badge-icon-individual.png"
               alt="icon"
               class="badge-icon"
             />
@@ -264,7 +261,7 @@ class PricingCardFamily extends LitElement {
                 <p class="card-title">${this.title}</p>
                 <span class="badge">
                   <img
-                    src="icons/bd-icon-family-white.png"
+                    src="/assets/bd-icon-family-white.png"
                     alt="icon"
                     class="badge-icon-family-subtitle"
                   />
@@ -364,7 +361,7 @@ class PricingSwitch extends LitElement {
           <span class="label right">
             <span class="icon icon-user-sharp-regular">
               <img
-                src="icons/bd-icon-user.png"
+                src="/assets/bd-icon-user.png"
                 alt="icon"
                 class="badge-icon-user"
                 height="22"
@@ -376,7 +373,7 @@ class PricingSwitch extends LitElement {
           <span class="label left">
             <span class="icon icon-family-pants-sharp-regular">
               <img
-                src="icons/bd-icon-family.png"
+                src="/assets/bd-icon-family.png"
                 alt="icon"
                 class="badge-icon-family"
                 height="24"
@@ -438,7 +435,7 @@ class PricingCardFeatures extends LitElement {
           ${features.map(
             (feature) => html` <li class="feature-item">
               <img
-                src="icons/verified_arrow.png"
+                src="/assets/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -496,7 +493,7 @@ class PricingCardPrivacy extends LitElement {
           ${privacy.map(
             (priv) => html` <li class="feature-item">
               <img
-                src="icons/verified_arrow.png"
+                src="/assets/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -505,7 +502,7 @@ class PricingCardPrivacy extends LitElement {
                 ? html`<span class="badge-feature"
                     >${priv.badge}
                     <img
-                      src="icons/badge-icon-individual.png"
+                      src="/assets/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`
@@ -547,7 +544,7 @@ class PricingCardIdentify extends LitElement {
           ${identity.map(
             (ident) => html` <li class="feature-item">
               <img
-                src="icons/verified_arrow.png"
+                src="/assets/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -556,7 +553,7 @@ class PricingCardIdentify extends LitElement {
                 ? html`<span class="badge-feature"
                     >${ident.badge}
                     <img
-                      src="icons/badge-icon-individual.png"
+                      src="/assets/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`
@@ -618,7 +615,7 @@ class PricingCardIdentityExtend extends LitElement {
           ${identity.map(
             (ident) => html` <li class="feature-item">
               <img
-                src="icons/verified_arrow.png"
+                src="/assets/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -627,7 +624,7 @@ class PricingCardIdentityExtend extends LitElement {
                 ? html`<span class="badge-feature"
                     >${ident.badge}
                     <img
-                      src="icons/badge-icon-individual.png"
+                      src="/assets/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`
@@ -692,7 +689,7 @@ class PricingCardParentalControl extends LitElement {
           ${parentalControl.map(
             (parental) => html` <li class="feature-item">
               <img
-                src="icons/verified_arrow.png"
+                src="/assets/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -701,7 +698,7 @@ class PricingCardParentalControl extends LitElement {
                 ? html`<span class="badge-feature"
                     >${parental.badge}
                     <img
-                      src="icons/badge-icon-individual.png"
+                      src="/assets/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`

package/src/components/pricing-cards/pricing-feature-item.css.js

@@ -0,0 +1,18 @@
+import { css } from "lit";
+
+export default css`
+.feature {
+      font-family: var(--typography-fontFamily-sans);
+      font-size: var(--typography-label-small-fontSize);
+      color: #000000;
+      padding-left: 1.25rem;
+      position: relative;
+    }
+
+    .feature::before {
+      content: "✓";
+      position: absolute;
+      left: 0;
+      color: green;
+    }
+`;

package/src/components/pricing-cards/pricing-feature-item.js

@@ -0,0 +1,14 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import newFeaturePricingCSS from "../pricing-cards/pricing-feature-item.css.js";
+
+class PricingFeatureItem extends LitElement {
+
+
+  render() {
+    return html`<div class="feature"><slot></slot></div>`;
+  }
+}
+PricingFeatureItem.styles = [tokens, newFeaturePricingCSS];
+
+customElements.define("pricing-feature-item", PricingFeatureItem);