@repobit/dex-system-design 0.5.0 → 0.6.0

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

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from "lit";
 import pricingCardsCSS from "../pricing-cards/pricing-card.css.js";
 
-import "/src/components/button/button.js";
+import "/src/components/Button/Button.js";
 
 class PricingContainer extends LitElement {
   static properties = {
@@ -30,7 +30,6 @@ class PricingContainer extends LitElement {
 
     if (isNaN(numericValue)) return "";
 
-    // Foloseste Intl fara separator de mii
     const formattedValue = new Intl.NumberFormat(this.locale, {
       style: "currency",
       currency: this.currency,
@@ -44,6 +43,9 @@ 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}
@@ -155,76 +157,55 @@ class PricingCard extends LitElement {
   }
   render() {
     return html`
-      ${this.planType === "individual"
-        ? html`
-            <div class="card ${this.highlight ? "highlight" : ""}">
-              ${this.highlight
-                ? html`<div class="highlight-banner">Best value</div>`
-                : ""}
-              <div class="card-header">
-                <p class="card-title">${this.title}</p>
-                <span class="badge">
-                  <img
-                    src="src/assets/icons/badge-icon-individual.png"
-                    alt="icon"
-                    class="badge-icon"
-                  />
-                  Individual</span
-                >
-                <p class="badge-subtitle">1 account & 5 devices</p>
-                <hr class="hr-line" />
-              </div>
-              <div class="pricing">
-                <div class="pricing-info">
-                  <p class="original-price">
-                    ${this.formatCurrency(this.originalPrice)}
-                  </p>
-                  <p class="discount">${this.discount}</p>
-                </div>
-                <p class="price">${this.formatCurrency(this.price)}</p>
-                <p class="terms">
-                  First year price. Plus applicable sales tax. See
-                  <a href="#">terms of use</a> below.
-                </p>
-              </div>
-              <div class="actions">
-                <bd-button
-                  label="Buy Now"
-                  kind="danger"
-                  size="md"
-                  fullWidth
-                  strong
-                >Buy Now</bd-button>
-
-                <bd-button
-                  label="Learn More"
-                  kind="outline"
-                  size="md"
-                  fullWidth
-                  strong
-                >Learn More</bd-button>
-              </div>
-              <hr class="hr-line" />
-              ${this.features
-                ? html`<pricing-card-features></pricing-card-features>`
-                : ""}
-              ${this.privacy
-                ? html`<pricing-card-privacy></pricing-card-privacy>`
-                : ""}
-              ${this.identity
-                ? html`<pricing-card-identity></pricing-card-identity>`
-                : ""}
-              ${this.identityExtended
-                ? html`<pricing-card-identity-extended></pricing-card-identity-extended>`
-                : ""}
-              ${this.parentalControl
-                ? html`<pricing-card-parental-control></pricing-card-parental-control>`
-                : ""}
-            </div>
-          `
-        : ""}
+      <div class="card ${this.highlight ? "highlight" : ""}">
+        ${this.highlight
+          ? html`<div class="highlight-banner">Best value</div>`
+          : ""}
+        <div class="card-header">
+          <p class="card-title">${this.title}</p>
+          <span class="badge">
+            <img
+              src="icons/badge-icon-individual.png"
+              alt="icon"
+              class="badge-icon"
+            />
+            Individual
+          </span>
+          <p class="badge-subtitle">1 account & 5 devices</p>
+          <hr class="hr-line" />
+        </div>
+        <div class="pricing">
+          <div class="pricing-info">
+            <p class="original-price">
+              ${this.formatCurrency(this.originalPrice)}
+            </p>
+            <p class="discount">${this.discount}</p>
+          </div>
+          <p class="price">${this.formatCurrency(this.price)}</p>
+          <p class="terms">
+            First year price. Plus applicable sales tax. See
+            <a href="#">terms of use</a> below.
+          </p>
+        </div>
+        <div class="actions">
+          <bd-button label="Buy Now" kind="danger" size="md" fullWidth strong>
+            Buy Now
+          </bd-button>
+  
+          <bd-button label="Learn More" kind="outline" size="md" fullWidth strong>
+            Learn More
+          </bd-button>
+        </div>
+        <hr class="hr-line" />
+        ${this.features ? html`<pricing-card-features></pricing-card-features>` : ""}
+        ${this.privacy ? html`<pricing-card-privacy></pricing-card-privacy>` : ""}
+        ${this.identity ? html`<pricing-card-identity></pricing-card-identity>` : ""}
+        ${this.identityExtended ? html`<pricing-card-identity-extended></pricing-card-identity-extended>` : ""}
+        ${this.parentalControl ? html`<pricing-card-parental-control></pricing-card-parental-control>` : ""}
+      </div>
     `;
   }
+  
 }
 class PricingCardFamily extends LitElement {
   static properties = {
@@ -282,7 +263,7 @@ class PricingCardFamily extends LitElement {
                 <p class="card-title">${this.title}</p>
                 <span class="badge">
                   <img
-                    src="src/assets/icons/bd-icon-family-white.png"
+                    src="icons/bd-icon-family-white.png"
                     alt="icon"
                     class="badge-icon-family-subtitle"
                   />
@@ -382,7 +363,7 @@ class PricingSwitch extends LitElement {
           <span class="label right">
             <span class="icon icon-user-sharp-regular">
               <img
-                src="src/assets/icons/bd-icon-user.png"
+                src="icons/bd-icon-user.png"
                 alt="icon"
                 class="badge-icon-user"
                 height="22"
@@ -394,7 +375,7 @@ class PricingSwitch extends LitElement {
           <span class="label left">
             <span class="icon icon-family-pants-sharp-regular">
               <img
-                src="src/assets/icons/bd-icon-family.png"
+                src="icons/bd-icon-family.png"
                 alt="icon"
                 class="badge-icon-family"
                 height="24"
@@ -456,7 +437,7 @@ class PricingCardFeatures extends LitElement {
           ${features.map(
             (feature) => html` <li class="feature-item">
               <img
-                src="src/assets/icons/verified_arrow.png"
+                src="icons/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -514,7 +495,7 @@ class PricingCardPrivacy extends LitElement {
           ${privacy.map(
             (priv) => html` <li class="feature-item">
               <img
-                src="src/assets/icons/verified_arrow.png"
+                src="icons/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -523,7 +504,7 @@ class PricingCardPrivacy extends LitElement {
                 ? html`<span class="badge-feature"
                     >${priv.badge}
                     <img
-                      src="src/assets/icons/badge-icon-individual.png"
+                      src="icons/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`
@@ -565,7 +546,7 @@ class PricingCardIdentify extends LitElement {
           ${identity.map(
             (ident) => html` <li class="feature-item">
               <img
-                src="src/assets/icons/verified_arrow.png"
+                src="icons/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -574,7 +555,7 @@ class PricingCardIdentify extends LitElement {
                 ? html`<span class="badge-feature"
                     >${ident.badge}
                     <img
-                      src="src/assets/icons/badge-icon-individual.png"
+                      src="icons/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`
@@ -636,7 +617,7 @@ class PricingCardIdentityExtend extends LitElement {
           ${identity.map(
             (ident) => html` <li class="feature-item">
               <img
-                src="src/assets/icons/verified_arrow.png"
+                src="icons/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -645,7 +626,7 @@ class PricingCardIdentityExtend extends LitElement {
                 ? html`<span class="badge-feature"
                     >${ident.badge}
                     <img
-                      src="src/assets/icons/badge-icon-individual.png"
+                      src="icons/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`
@@ -710,7 +691,7 @@ class PricingCardParentalControl extends LitElement {
           ${parentalControl.map(
             (parental) => html` <li class="feature-item">
               <img
-                src="src/assets/icons/verified_arrow.png"
+                src="icons/verified_arrow.png"
                 alt="icon"
                 class="badge-icon"
               />
@@ -719,7 +700,7 @@ class PricingCardParentalControl extends LitElement {
                 ? html`<span class="badge-feature"
                     >${parental.badge}
                     <img
-                      src="src/assets/icons/badge-icon-individual.png"
+                      src="icons/badge-icon-individual.png"
                       alt="icon"
                       class="badge-feature-icon"
                   /></span>`

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

@@ -4,6 +4,7 @@ import './pricing-card.js';
 export default {
   title: 'Components/Pricing Cards', 
   component: 'bd-pricing-container',
+   tags: ["autodocs"],
 };
 
 const Template = () => html`<bd-pricing-container></bd-pricing-container>`;

package/src/components/radio/radio.css.js

@@ -0,0 +1,168 @@
+import { css } from "../lit";
+
+export default css`
+  :host {
+    display: inline-block;
+  }
+
+  .bd-radio {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    gap: var(--size-8);
+    font-family: sans-serif;
+    font-size: 14px;
+    vertical-align: middle;
+  }
+
+  .bd-radio.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .radio-label {
+    font-size: 14px;
+    color: black;
+  }
+
+  .bd-outer,
+  .custom-radio {
+    width: var(--size-22);
+    height: var(--size-22);
+    border:var(--size-2) solid var(--color-blue-500);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease;
+  }
+
+  .bd-inner {
+    width: var(--size-12);
+    height: var(--size-12);
+    background-color: var(--color-blue-500);
+    border-radius: 50%;
+    transform: scale(0);
+    transition: transform 0.2s ease, background-color 0.2s ease;
+  }
+
+  .bd-inner.visible {
+    transform: scale(1);
+  }
+
+  .bd-outer:hover {
+    border-color: var(--color-blue-700);
+  }
+
+  .bd-inner:hover {
+    background-color: var(--color-blue-700);
+  }
+
+  .bd-radio.disabled .bd-outer.checked {
+    border-color: #b0b0b0; 
+  }
+
+   .bd-outer.checked:hover {
+    border-color: var(--color-blue-700);
+  }
+
+ 
+  .bd-radio.disabled .bd-outer {
+    border-color: #b0b0b0;
+  }
+
+  .bd-radio.disabled .bd-inner {
+    background-color: #b0b0b0;
+  }
+
+  .bd-radio[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  
+  .bd-radio.focus .bd-outer,
+  .bd-outer.focus {
+    outline: var(--size-2) solid var(--color-blue-500);
+    outline-offset: var(--size-2);
+  }
+
+  .hidden-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+
+  .custom-radio::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--size-12);
+    height: var(--size-12);
+    background-color: #006dff;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.2s;
+  }
+
+  input:checked + .custom-radio::after {
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  .bd-radio:not(.disabled):hover .custom-radio {
+    border-color: #004bbd;
+  }
+  .bd-radio.disabled .bd-inner.visible {
+    background-color: #b0b0b0;
+    transform: scale(1); 
+  }
+  .bd-radio:not(.disabled):focus-within .custom-radio {
+    box-shadow: 0 0 0 3px rgba(0, 109, 255, 0.5);
+  }
+  .bd-outer:focus {
+    outline: none;
+  }
+
+  .bd-outer:focus-visible {
+    outline: var(--size-2) solid var(--color-blue-500);
+    outline-offset: var(--size-2);
+  }
+  .bd-outer:focus:not(:focus-visible) {
+    outline: none;
+  }
+  .bd-outer.focus {
+    outline: var(--size-2) solid var(--color-blue-500);
+    outline-offset: var(--size-2);
+  }
+  .bd-outer:active {
+    outline: var(--size-2) solid var(--color-blue-500);
+    outline-offset: var(--size-2);
+  }
+  .bd-outer:focus-visible.checked {
+    outline: var(--size-2) solid var(--color-blue-500);
+    outline-offset: var(--size-2);
+  }
+
+  .bd-outer:focus-visible.checked .bd-inner {
+    background-color: var(--color-blue-500);
+  }
+  .bd-outer:focus-visible .bd-inner.visible {
+    background-color: var(--color-blue-700);
+  }
+    .bd-outer:focus-visible {
+  border-color: var(--color-blue-700);
+}
+
+.bd-outer:focus-visible .bd-inner.visible {
+  background-color: var(--color-blue-700);
+}
+`;

package/src/components/radio/radio.js

@@ -0,0 +1,222 @@
+import { LitElement, html, css } from "lit";
+import radioCSS from "./radio.css.js";
+
+class BdRadio extends LitElement {
+  static properties = {
+    name: { type: String },
+    value: { type: String },
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+  };
+
+  static styles = [radioCSS];
+
+  constructor() {
+    super();
+    this.name = "";
+    this.value = "";
+    this.disabled = false;
+    this.label = "";
+    this._hadKeyboardFocus = false;
+
+    this._handleDocumentKeydown = (e) => {
+      if (e.key === "Tab") {
+        this._hadKeyboardFocus = true;
+      }
+    };
+
+    this._handleDocumentMousedown = () => {
+      setTimeout(() => {
+        this._hadKeyboardFocus = false;
+      }, 0);
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this._handleDocumentKeydown);
+    document.addEventListener("mousedown", this._handleDocumentMousedown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this._handleDocumentKeydown);
+    document.removeEventListener("mousedown", this._handleDocumentMousedown);
+  }
+
+  handleKeydown(e) {
+    if (this.disabled) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      this.handleChange();
+    }
+  }
+
+  handleFocus(e) {
+    if (this._hadKeyboardFocus) {
+      e.target.classList.add("focus");
+    }
+  }
+  handleBlur(e) {
+    e.target.classList.remove("focus");
+  }
+  handleChange() {
+    if (this.disabled) {
+      console.warn("Blocked because disabled = true");
+      return;
+    }
+
+    this.checked = true;
+
+    this.updateComplete.then(() => {
+      const outer = this.renderRoot.querySelector(".bd-outer");
+      if (outer) {
+        outer.focus();
+      }
+    });
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <label class="bd-radio ${this.disabled ? "disabled" : ""}">
+        <span
+          class="bd-outer ${this.checked && !this.disabled ? "checked" : ""}"
+          role="radio"
+          aria-checked="${this.checked}"
+          aria-disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click=${this.handleChange}
+          @keydown=${this.handleKeydown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        >
+          <span class="bd-inner ${this.checked ? "visible" : ""}"></span>
+        </span>
+        <span class="radio-label">${this.label}</span>
+      </label>
+    `;
+  }
+}
+
+class BdToggleRadio extends LitElement {
+  static styles = [radioCSS];
+
+  static properties = {
+    name: { type: String },
+    value: { type: String },
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    label: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.name = "";
+    this.value = "";
+    this.disabled = false;
+    this.label = "";
+    this._hadKeyboardFocus = false;
+
+    this._handleDocumentKeydown = (e) => {
+      if (e.key === "Tab") {
+        this._hadKeyboardFocus = true;
+      }
+    };
+
+    this._handleDocumentMousedown = () => {
+      setTimeout(() => {
+        this._hadKeyboardFocus = false;
+      }, 0);
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("keydown", this._handleDocumentKeydown);
+    document.addEventListener("mousedown", this._handleDocumentMousedown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this._handleDocumentKeydown);
+    document.removeEventListener("mousedown", this._handleDocumentMousedown);
+  }
+
+  handleClick() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.checked ? this.value : null },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  handleFocus(e) {
+    if (this._hadKeyboardFocus) {
+      e.target.classList.add("focus");
+    }
+  }
+
+  handleBlur(e) {
+    e.target.classList.remove("focus");
+  }
+
+  handleKeydown(e) {
+    if (this.disabled) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      this.handleClick();
+    }
+  }
+
+  handleClick() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.checked ? this.value : null },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+  render() {
+    return html`
+      <label class="bd-radio ${this.disabled ? "disabled" : ""}">
+        <span
+          class="bd-outer ${this.checked && !this.disabled ? "checked" : ""}"
+          role="checkbox"
+          aria-checked="${this.checked}"
+          aria-disabled="${this.disabled}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click=${this.handleClick}
+          @keydown=${this.handleKeydown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+        >
+          <span class="bd-inner ${this.checked ? "visible" : ""}"></span>
+        </span>
+        <span class="radio-label">${this.label}</span>
+      </label>
+    `;
+  }
+}
+BdRadio.styles = [radioCSS];
+BdToggleRadio.styles = [radioCSS];
+
+customElements.define("bd-toggle-radio", BdToggleRadio);
+customElements.define("bd-radio", BdRadio);