@repobit/dex-system-design 0.21.1 → 0.22.0

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

@@ -1,70 +1,80 @@
 import { css } from "lit";
 
 export default css`
- .card-header {
-      text-align: center;
-    }
+  :host {
+    font-family: var(--typography-fontFamily-sans);
+  }
 
-    .card-title {
-      font-size: var(--typography-heading-h4-fontSize);
-      font-family: var(--typography-fontFamily-sans);
-      font-weight: var(--typography-fontWeight-bold);
-      margin: 0;
-      text-align: left;
-      color: #000000;
-    }
-    .card-title-brand {
-      display: inline;
-      font-family: var(--typography-fontFamily-sans);
-      font-weight: var(--typography-fontWeight-bold);
-      color: #000000;
-    }
-    .plus {
-      color: var(--color-blue-600);
-      font-weight: var(--typography-fontWeight-bold);
-      font-family: var(--typography-fontFamily-sans);
-    }
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.25rem;
-      font-weight: bold;
-      background: #e8f0fe;
-      padding: 0.25rem 0.5rem;
-      border-radius: 4px;
-      margin: 0.5rem 0;
-      font-size: 0.875rem;
-    }
+  .card-header {
+    text-align: center;
+  }
 
-    .badge-icon {
-      height: 1rem;
-    }
+  .card-title {
+    font-size: var(--typography-heading-h4-fontSize);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
+    margin: 0;
+    text-align: left;
+    color: #000000;
+  }
 
-    .badge-subtitle {
-      font-size: var(--typography-body-regular-fontSize);
-      text-align: left;
-      font-family: var(--typography-fontFamily-sans);
-      color: #000000;
-      margin: 0;
-      margin-bottom: var(--spacing-16);
-      margin-top: -8px;
-    }
+  .card-title-brand {
+    display: inline;
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
+    color: #000000;
+  }
 
-    .hr-line {
-      border: none;
-      border-top: 1px solid #ccc;
-      margin: 1rem 0;
-    }
-    .badge-wrapper {
-      text-align: left;
-      margin-top: var(--spacing-8);
-      margin-bottom: var(--spacing-8);
-    }
-    .badge-wrapper.multiple {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--spacing-8);
-      margin-top: var(--spacing-8);
-      margin-bottom: var(--spacing-8);
-    }
-`;
+  /* Stil pentru cuvântul "Plus" evidențiat */
+  .plus-text {
+    color: var(--color-blue-600);
+    font-weight: var(--typography-fontWeight-bold);
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: bold;
+    background: #e8f0fe;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+  }
+
+  .badge-icon {
+    height: 1rem;
+  }
+
+  .badge-subtitle {
+    font-size: var(--typography-body-regular-fontSize);
+    text-align: left;
+    font-family: var(--typography-fontFamily-sans);
+    color: #000000;
+    margin: 0;
+    margin-bottom: var(--spacing-16);
+    margin-top: -8px;
+  }
+
+  .hr-line {
+    border: none;
+    border-top: 1px solid #ccc;
+    margin: 1rem 0;
+  }
+
+  .badge-wrapper {
+    text-align: left;
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+  }
+
+  .badge-wrapper.multiple {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+  }
+`;

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

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../badge/badge.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import newHeaderPricingCSS from "../pricing-cards/pricing-card-header.css.js";
@@ -16,19 +17,52 @@ class PricingCardHeader extends LitElement {
     return this.badges ? this.badges.split("|").map((b) => b.trim()) : [];
   }
 
-  render() {
-    const [brand, ...rest] = this.title ? this.title.split(" ") : ["", ""];
-    const restOfTitle = rest.join(" ");
+  // Funcție pentru a evidenția "Plus" în titlu
+  renderTitleWithHighlightedPlus() {
+    if (!this.title) return "";
+
+    const title = this.title;
+    const plusIndex = title.toLowerCase().indexOf("plus");
+
+    if (plusIndex === -1) {
+      const [brand, ...rest] = title.split(" ");
+      const restOfTitle = rest.join(" ");
+
+      return html`
+          <bd-h as="h4" class="card-title">
+        <template shadowrootmode="open">
+            <h4 class="bd-heading h4"><slot></slot></h4>
+        </template>
+        <span class="card-title-brand">Internet Security</span>
+    </bd-h>
+      `;
+    }
+
+    // Conține "Plus" - evidențiază-l
+    const beforePlus = title.substring(0, plusIndex);
+    const plusWord = title.substring(plusIndex, plusIndex + 4); // "Plus" are 4 caractere
+    const afterPlus = title.substring(plusIndex + 4);
+
+    const [brand, ...restBefore] = beforePlus.split(" ");
+    const restOfBeforePlus = restBefore.join(" ");
 
+    return html`
+      <bd-h as="h4" class="card-title">
+        <span class="card-title-brand">${brand}</span>
+      </bd-h>
+      <bd-h as="h4" class="card-title">
+        ${restOfBeforePlus}
+        <span class="plus-text">${plusWord}</span>
+        ${afterPlus}
+      </bd-h>
+    `;
+  }
+
+  render() {
     return html`
       <div class="card-header">
-        <bd-h as="h4" class="card-title">
-          <span class="card-title-brand">${brand}</span>
-        </bd-h>
-        <bd-h as="h4" class="card-title">
-          ${restOfTitle}
-          ${this.plus ? html` <span class="plus">Plus</span>` : ""}
-        </bd-h>
+        ${this.renderTitleWithHighlightedPlus()}
+        
         ${this.parsedBadges.length
           ? html`
               <div class="badge-wrapper multiple">

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

@@ -1,89 +1,90 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../badge/badge.js";
 import "../heading/heading.js";
 import "../paragraph/paragraph.js";
 import newPricingPricingCSS from "../pricing-cards/pricing-card-pricing.css.js";
 
 class PricingCardPricing extends LitElement {
   static properties = {
-    price        : { type: String }, // monthly price
-    originalPrice: { type: String, attribute: "original-price" }, // monthly original price
-    discount     : { type: String }, // monthly discount text
-    billingPeriod: { type: String, state: true } // "monthly" or "yearly"
+    productId     : { type: String, attribute: "product-id" },
+    devices       : { type: String },
+    subscription  : { type: String },
+    billingPeriod : { type: String, state: true },
+    dataLayerEvent: { type: String }
   };
 
   constructor() {
     super();
     this.billingPeriod = "monthly";
+    this.productId = "vsb";
+    this.devices = "5";
+    this.subscription = "1";
+    this.dataLayerEvent = "info";
   }
 
-  formatCurrency(value) {
-    if (!value || isNaN(value)) return "";
-    return `$${parseFloat(value).toFixed(2)}`;
-  }
-
-  get yearlyPrice() {
-    const monthlyPrice = parseFloat(this.price);
-    if (isNaN(monthlyPrice)) return "";
-    const yearly = monthlyPrice * 12 * 0.9;
-    return yearly.toFixed(2);
-  }
-
-  get yearlyOriginalPrice() {
-    const monthlyOriginal = parseFloat(this.originalPrice);
-    if (isNaN(monthlyOriginal)) return "";
-    const yearlyOriginal = monthlyOriginal * 12;
-    return yearlyOriginal.toFixed(2);
-  }
-
-  get yearlyDiscount() {
-    return "Save 25%";
+  // FOLOSEȘTE LIGHT DOM
+  createRenderRoot() {
+    return this;
   }
 
   render() {
     const isMonthly = this.billingPeriod === "monthly";
 
-    const originalPrice = isMonthly
-      ? this.originalPrice
-      : this.yearlyOriginalPrice;
-    const discount = isMonthly ? this.discount : this.yearlyDiscount;
-    const price = isMonthly ? this.price : this.yearlyPrice;
-
     return html`
-      <div class="pricing">
-        <div class="toggle-group">
-          <bd-radio
-            name="billing"
-            value="monthly"
-            label="Monthly"
-            ?checked=${isMonthly}
-            @change=${this.onBillingChange}
-          ></bd-radio>
-          <bd-radio
-            name="billing"
-            value="yearly"
-            label="Yearly"
-            ?checked=${!isMonthly}
-            @change=${this.onBillingChange}
-          ></bd-radio>
-        </div>
+      <style>
+        ${tokens}
+        ${newPricingPricingCSS}
+      </style>
+      
+      <bd-context ignore-events-parent>
+        <bd-product product-id="${this.productId}">
+          <bd-option 
+            devices="${this.devices}" 
+            subscription="${this.subscription}" 
+            data-layer-event="${this.dataLayerEvent}">
+            
+            <div class="pricing">
+              <div class="toggle-group">
+                <bd-radio
+                  name="billing"
+                  value="monthly"
+                  label="Monthly"
+                  ?checked=${isMonthly}
+                  @change=${this.onBillingChange}
+                ></bd-radio>
+                <bd-radio
+                  name="billing"
+                  value="yearly"
+                  label="Yearly"
+                  ?checked=${!isMonthly}
+                  @change=${this.onBillingChange}
+                ></bd-radio>
+              </div>
 
-        <div class="pricing-info">
-          ${originalPrice
-            ? html`<bd-p kind="small" class="original-price">
-                ${this.formatCurrency(originalPrice)}
-              </bd-p>`
-            : null}
-          <bd-p kind="small" class="discount">${discount}</bd-p>
-        </div>
+           <div class="pricing-info" data-store-hide="!it.option.price.discounted">
+  <bd-p kind="small" class="original-price">
+    <s data-store-render data-store-price="full"></s>
+  </bd-p>
+  
+  <bd-badge variant="bd-light-green">
+    Save <span data-store-render data-store-discount="percentage"></span>
+  </bd-badge>
+</div>
 
-        <bd-h as="h3" class="price">${this.formatCurrency(price)}</bd-h>
+              <bd-h as="h3" class="price">
+                <span data-store-render data-store-price="discounted||full"></span>/month
+              </bd-h>
 
-        <bd-p kind="small" class="terms">
-          First year price. Plus applicable sales tax. See
-          <a href="#">terms of use</a> below.
-        </bd-p>
-      </div>
+              <bd-p kind="small" class="terms">
+                First year price. Plus applicable sales tax. See
+                <a href="#">terms of use</a> below.
+              </bd-p>
+            </div>
+            
+          </bd-option>
+        </bd-product>
+      </bd-context>
     `;
   }
 
@@ -95,6 +96,4 @@ class PricingCardPricing extends LitElement {
   }
 }
 
-PricingCardPricing.styles = [tokens, newPricingPricingCSS];
-
 customElements.define("pricing-card-pricing", PricingCardPricing);

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

@@ -112,20 +112,7 @@ export default css`
     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(--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(--typography-fontFamily-sans);
-    font-weight: 500;
-    line-height: var(--spacing-14);
-    gap: var(--spacing-10);
-  }
+ 
   .badge img {
     position: relative;
     top: var(--spacing-1);
@@ -162,7 +149,7 @@ export default css`
     font-size: 16px;
     font-weight: bold;
     border-radius: 22px;
-    padding: var(--spacing-6) var(--spacing-12) var(--spacing-8) var(--spacing-12);
+    // padding: var(--spacing-6) var(--spacing-12) var(--spacing-8) var(--spacing-12);
     gap: var(--spacing-10);
     color: var(--color-green-800);
     margin: var(--spacing-0);
@@ -209,6 +196,7 @@ export default css`
 
   .features ul {
     padding-left: var(--spacing-0);
+    padding-top: var(--spacing-16);
   }
 
   .pricing-card {
@@ -568,4 +556,8 @@ export default css`
       margin-bottom: 100px;
     }
   }
+ .text-left {
+  text-align: left !important;
+  padding-bottom: 15px;
+}
 `;