@repobit/dex-system-design 0.11.0 → 0.12.0

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

@@ -0,0 +1,30 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import newPricingCSS from "../pricing-cards/new-pricing.css";
+
+class PricingCard extends LitElement {
+  static properties = {
+    highlight: { type: Boolean }
+  };
+
+
+
+  render() {
+    return html`
+      <div class="card-wrapper">
+        ${this.highlight
+          ? html`<div class="highlight-banner">Best Value</div>`
+          : ""}
+        <div class="card ${this.highlight ? "highlight" : ""}">
+          <slot name="header"></slot>
+          <slot name="pricing"></slot>
+          <slot name="actions"></slot>
+          <slot name="features"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+PricingCard.styles = [tokens, newPricingCSS];
+
+customElements.define("new-pricing-card", PricingCard);

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

@@ -0,0 +1,58 @@
+import { css } from "lit";
+
+export default css`
+ .card {
+      background: white;
+      border-radius: var(--spacing-20);
+      padding: var(--spacing-32);
+      background: #fafafa;
+    }
+
+    .highlight {
+      border: 2px solid #1d7928;
+    }
+
+    .highlight-wrapper {
+      position: relative;
+    }
+
+   .card-wrapper {
+  position: relative;
+  padding-top: 2.5rem;
+}
+
+.highlight-banner {
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #1d7928;
+  color: white;
+  font-weight: bold;
+  font-size: var(--typography-body-regular-fontSize);
+  text-align: center;
+  border-radius: 1rem 1rem 0 0;
+  z-index: 2;
+  height: 48px;
+  width: 85%;
+  max-width: 360px;
+  min-width: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--typography-fontFamily-sans);
+  box-sizing: border-box;
+}
+   .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+
+    .hr-line {
+      border: none;
+      border-top: 1px solid #ccc;
+      margin: 1.5rem 0;
+    }
+`;

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

@@ -0,0 +1,16 @@
+import { css } from "lit";
+
+export default css`
+ .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+
+    .hr-line {
+      border: none;
+      border-top: 1px solid #ccc;
+      margin: 1.5rem 0;
+    }
+`;

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

@@ -0,0 +1,20 @@
+import { LitElement, html } from 'lit';
+import { tokens } from "../../tokens/tokens.js";
+import newActionsPricingCSS from "../pricing-cards/pricing-card-actions.css.js";
+
+class PricingCardActions extends LitElement {
+
+
+  render() {
+    return html`
+      <div class="actions">
+        <bd-button label="Buy Now" kind="danger" size="md" fullWidth strong>
+          Buy Now
+        </bd-button>
+      </div>
+    `;
+  }
+}
+PricingCardActions.styles = [tokens, newActionsPricingCSS];
+
+customElements.define('pricing-card-actions', PricingCardActions);

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

@@ -0,0 +1,41 @@
+import { css } from "lit";
+
+export default css`
+ :host {
+      display: block;
+      padding: 0px 240px;
+    }
+
+    .cards-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+
+    ::slotted(new-pricing-card) {
+      flex: 1 1 100%;
+    }
+
+    /* 2 cards */
+    :host([count="2"]) ::slotted(new-pricing-card) {
+      flex: 1 1 calc(50% - 1rem);
+    }
+
+    /* 3 cards */
+    :host([count="3"]) ::slotted(new-pricing-card) {
+      flex: 1 1 calc(33.333% - 1rem);
+    }
+
+    /* 4+ cards */
+    :host([count="4"]),
+    :host([count="5"]),
+    :host([count="6"]) ::slotted(new-pricing-card) {
+      flex: 1 1 calc(25% - 1rem);
+    }
+
+    @media (max-width: 768px) {
+      ::slotted(new-pricing-card) {
+        flex: 1 1 100%;
+      }
+    }
+`;

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

@@ -0,0 +1,31 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import newCardsContainerPricingCSS from "../pricing-cards/pricing-card-container.css.js";
+
+export class PricingCardsContainer extends LitElement {
+
+  static properties = {
+    count: { type: Number, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.count = 0;
+  }
+
+  firstUpdated() {
+    const cards = this.querySelectorAll("new-pricing-card");
+    this.count = cards.length;
+  }
+
+  render() {
+    return html`
+      <div class="cards-row">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+PricingCardsContainer.styles = [tokens, newCardsContainerPricingCSS];
+
+customElements.define("pricing-cards-container", PricingCardsContainer);

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

@@ -0,0 +1,70 @@
+import { css } from "lit";
+
+export default css`
+ .card-header {
+      text-align: center;
+    }
+
+    .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;
+    }
+
+    .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

@@ -0,0 +1,46 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import newHeaderPricingCSS from "../pricing-cards/pricing-card-header.css.js";
+
+class PricingCardHeader extends LitElement {
+  static properties = {
+    title   : { type: String },
+    subtitle: { type: String },
+    badges  : { type: String },
+    plus    : { type: Boolean }
+  };
+
+
+  get parsedBadges() {
+    return this.badges ? this.badges.split("|").map((b) => b.trim()) : [];
+  }
+
+  render() {
+    const [brand, ...rest] = this.title ? this.title.split(" ") : ["", ""];
+    const restOfTitle = rest.join(" ");
+
+    return html`
+      <div class="card-header">
+        <p class="card-title">
+          <span class="card-title-brand">${brand}</span>
+        </p>
+        <p class="card-title">
+          ${restOfTitle}
+          ${this.plus ? html` <span class="plus">Plus</span>` : ""}
+        </p>
+        ${this.parsedBadges.length
+          ? html`
+              <div class="badge-wrapper multiple">
+                ${this.parsedBadges.map((b) => html`<bd-badge>${b}</bd-badge>`)}
+              </div>
+            `
+          : ""}
+        <p class="badge-subtitle">${this.subtitle}</p>
+        <bd-divider-horizontal></bd-divider-horizontal>
+      </div>
+    `;
+  }
+}
+PricingCardHeader.styles = [tokens, newHeaderPricingCSS];
+
+customElements.define("pricing-card-header", PricingCardHeader);

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

@@ -0,0 +1,63 @@
+import { css } from "lit";
+
+export default css`
+ .pricing {
+      text-align: left;
+      margin-top: var(--spacing-16);
+    }
+    .pricing-info {
+      display: flex;
+      gap: var(--spacing-8);
+      align-items: baseline;
+      margin-top: var(--spacing-16);
+    }
+
+    .original-price {
+      text-decoration: line-through;
+      font-family: var(--typography-fontFamily-sans);
+      color: #000000;
+      font-size: var(--typography-body-regular-fontSize);
+      margin: 0;
+    }
+
+    .discount {
+      color: #0b6a26;
+      font-weight: bold;
+      background: #d1fadc;
+      font-size: var(--typography-body-regular-fontSize);
+      padding: 5px;
+      border-radius: 20px;
+      font-family: var(--typography-fontFamily-sans);
+      margin: 0;
+    }
+
+    .price {
+      font-size: var(--heading-xxlarge);
+      font-weight: var(--typography-fontWeight-bold);
+      text-align: left;
+      font-family: var(--typography-fontFamily-sans);
+      color: #000000;
+      margin: 0;
+    }
+
+    .terms {
+      font-family: var(--typography-fontFamily-sans);
+      font-size: var(--typography-label-small-fontSize);
+      color: #000000;
+      text-align: left;
+      margin: 0;
+      margin-top: var(--spacing-8);
+      margin-bottom: var(--spacing-16);
+    }
+
+    .terms a {
+      font-family: var(--typography-fontFamily-sans);
+      font-size: var(--typography-label-small-fontSize);
+      color: #000000;
+      text-decoration: underline;
+    }
+    .toggle-group {
+      gap: var(--spacing-16);
+      display: flex;
+    }
+`;

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

@@ -0,0 +1,101 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.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"
+  };
+
+  constructor() {
+    super();
+    this.billingPeriod = "monthly";
+  }
+
+
+  formatCurrency(value) {
+    if (!value || isNaN(value)) return "";
+    return `$${parseFloat(value).toFixed(2)}`;
+  }
+
+  // Calculează valorile pentru yearly
+  get yearlyPrice() {
+    // Exemplu: 12 luni * price lunar cu 10% discount anual dummy
+    const monthlyPrice = parseFloat(this.price);
+    if (isNaN(monthlyPrice)) return "";
+    const yearly = monthlyPrice * 12 * 0.9; // 10% discount la anual
+    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() {
+    // Exemplu text dummy pentru anual
+    return "Save 25%";
+  }
+
+  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>
+
+        <div class="pricing-info">
+          ${originalPrice
+            ? html`<p class="original-price">
+                ${this.formatCurrency(originalPrice)}
+              </p>`
+            : null}
+          <p class="discount">${discount}</p>
+        </div>
+
+        <p class="price">${this.formatCurrency(price)}</p>
+
+        <p class="terms">
+          First year price. Plus applicable sales tax. See
+          <a href="#">terms of use</a> below.
+        </p>
+      </div>
+    `;
+  }
+
+  onBillingChange(e) {
+    const value = e.target.value;
+    if (value === "monthly" || value === "yearly") {
+      this.billingPeriod = value;
+    }
+  }
+}
+PricingCardPricing.styles = [tokens, newPricingPricingCSS];
+
+customElements.define("pricing-card-pricing", PricingCardPricing);

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

@@ -0,0 +1,22 @@
+import { css } from "lit";
+
+export default css`
+ .show-more-toggle {
+      display: block;
+      background: none;
+      border: none;
+      color: var(--color-blue-600);
+      cursor: pointer;
+      font-size: var(--body-xlarge);
+      text-align: center;
+      margin: 1rem auto;
+       font-family: var(--typography-fontFamily-sans);
+      font-weight: var(--typography-fontWeight-semibold);
+    }
+
+    .feature-items {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+`;

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

@@ -0,0 +1,33 @@
+import { LitElement, html } from 'lit';
+import { tokens } from "../../tokens/tokens.js";
+import newShowMorePricingCSS from "../pricing-cards/pricing-card-show-more.css.js";
+
+class PricingCardShowMore extends LitElement {
+  static properties = {
+    expanded: { type: Boolean }
+  };
+
+  constructor() {
+    super();
+    this.expanded = false;
+  }
+
+
+  toggleFeatures() {
+    this.expanded = !this.expanded;
+  }
+
+  render() {
+    return html`
+      <button @click="${this.toggleFeatures}" class="show-more-toggle">
+        ${this.expanded ? '− Hide features' : '+ Show more features'}
+      </button>
+      ${this.expanded
+        ? html`<div class="feature-items"><slot></slot></div>`
+        : ''}
+    `;
+  }
+}
+PricingCardShowMore.styles = [tokens, newShowMorePricingCSS];
+
+customElements.define('pricing-card-show-more', PricingCardShowMore);