@repobit/dex-system-design 0.11.0 → 0.14.0

package/src/components/divider/divider-horizontal.js

@@ -1,30 +1,35 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import { dividerHorizontal } from "./divider.css.js";
 
 export class BdDividerHorizontal extends LitElement {
+  static styles = [tokens, dividerHorizontal];
+
   static properties = {
-    width: { type: String } // Noua proprietate
+    width  : { type: String },
+    color  : { type: String },
+    opacity: { type: String }
   };
 
-  static styles = [tokens, css`
-    .hr-line {
-      border: none;
-      border-top: 1px solid var(--color-neutral-200);
-      margin: 0;
-      width: 100%; /* valoare implicită */
-    }
-  `];
-
   constructor() {
     super();
-    this.width = '100%'; // default
+    this.width = "200px";
+    this.color = "var(--color-neutral-400)";
+    this.opacity = "0.25";
   }
 
   render() {
     return html`
-      <hr class="hr-line" style="width: ${this.width};" />
+      <hr
+        class="hr-line"
+        style="
+          width: ${this.width};
+          border-top-color: ${this.color};
+          opacity: ${this.opacity};
+        "
+      />
     `;
   }
 }
 
-customElements.define('bd-divider-horizontal', BdDividerHorizontal);
+customElements.define("bd-divider-horizontal", BdDividerHorizontal);

package/src/components/divider/divider-vertical.js

@@ -1,32 +1,41 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import { dividerVertical } from "./divider.css.js";
 
 export class BdDividerVertical extends LitElement {
+  static styles = [tokens, dividerVertical];
+
   static properties = {
-    height: { type: String },
-    thickness: { type: String }, // lățimea "vizuală"
-  };
+    height   : { type: String },
+    thickness: { type: String },
+    color    : { type: String },
+    opacity  : { type: String }
 
-  static styles = css`
-    .divider {
-      background-color: var(--color-neutral-200);
-      display: inline-block;
-    }
-  `;
+  };
 
   constructor() {
     super();
-    this.height = '100%';
-    this.thickness = '1px';
+    this.height = "15px";
+    this.thickness = "1px";
+    this.color = "var(--color-neutral-400)";
+    this.opacity = "1.00";
+
   }
 
   render() {
     return html`
       <div
         class="divider"
-        style="width: ${this.thickness}; height: ${this.height};"
+        style="
+          width: ${this.thickness};
+          height: ${this.height};
+          background-color: ${this.color};
+          opacity: ${this.opacity};
+
+        "
       ></div>
     `;
   }
 }
 
-customElements.define('bd-divider-vertical', BdDividerVertical);
+customElements.define("bd-divider-vertical", BdDividerVertical);

package/src/components/divider/divider.css.js

@@ -0,0 +1,19 @@
+import { css } from "lit";
+
+export const dividerHorizontal = css`
+  .hr-line {
+    border: none;
+    border-top: 1px solid var(--color-neutral-400);
+    margin: 0;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto
+  }
+`;
+
+export const dividerVertical = css`
+  .divider {
+    background-color: var(--color-neutral-400);
+    display: inline-block;
+  }
+`;

package/src/components/dropdown/dropdown.css.js

@@ -0,0 +1,138 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    width: 90%;
+  }
+
+  .input-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  label {
+    margin-bottom: 4px;
+    font-weight: 500;
+    color: var(--color-neutral-900);
+  }
+
+  .form-label__required {
+    color: var(--color-red-500);
+    margin-left: var(--spacing-4);
+  }
+
+  .label-sm {
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    letter-spacing: var(--typography-letterSpacing-wide);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .label-md {
+    font-size: var(--typography-fontSize-sm);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .label-lg {
+    font-size: var(--typography-fontSize-lg);
+    font-weight: var(--typography-fontWeight-bold);
+    line-height: var(--typography-lineHeight-normal);
+    margin-bottom: var(--spacing-8);
+  }
+
+  select {
+    width: 100%;
+    font-family: var(--typography-fontFamily-sans, sans-serif);
+    border: var(--border-width-1, 1px) solid var(--color-neutral-300);
+    background-color: var(--color-neutral-0);
+    color: var(--color-neutral-900);
+    line-height: var(--typography-lineHeight-normal, 1.5);
+    transition: border-color 0.3s ease, background-color 0.3s ease,
+      box-shadow 0.3s ease;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right var(--spacing-16) center;
+    background-size: 1rem;
+    padding-right: var(--spacing-28);
+    cursor: pointer;
+  }
+
+  select:focus {
+    border-color: var(--color-blue-500);
+    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+  }
+
+  .input-sm {
+    padding: var(--spacing-8) var(--spacing-12);
+    font-size: var(--typography-fontSize-sm);
+    height: var(--dimension-34px);
+    border-radius: var(--form-input-medium-borderRadius);
+  }
+
+  .input-md {
+    padding: var(--spacing-12) var(--spacing-16);
+    font-size: var(--typography-fontSize-base);
+    height: var(--dimension-45px);
+    border-radius: var(--form-input-large-borderRadius);
+  }
+
+  .input-lg {
+    padding: var(--spacing-16) var(--spacing-20);
+    font-size: var(--typography-fontSize-lg);
+    height: var(--dimension-55px);
+    border-radius: var(--form-input-large-borderRadius);
+  }
+
+  .form-label {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+    color: var(--color-neutral-900);
+    letter-spacing: var(--typography-letterSpacing-normal);
+  }
+
+  .form-help-text {
+    font-size: var(--typography-fontSize-xs);
+    font-weight: var(--typography-fontWeight-normal);
+    line-height: var(--typography-lineHeight-normal);
+    letter-spacing: var(--typography-letterSpacing-normal);
+    font-family: var(--typography-fontFamily-sans);
+    margin-top: var(--spacing-4);
+  }
+
+  .form-help-text--default {
+    color: var(--color-neutral-600);
+  }
+
+  .form-input--error {
+    background-color: var(--color-red-50);
+    border-color: var(--color-red-500);
+  }
+
+  .form-help-text--error {
+    color: var(--color-red-600);
+  }
+
+  .form-input--success {
+    background-color: var(--color-green-50);
+    border-color: var(--color-green-500);
+  }
+
+  .form-help-text--success {
+    color: var(--color-green-600);
+  }
+
+  .form-input--disabled {
+    background-color: var(--color-neutral-100);
+    border-color: var(--color-neutral-300);
+    color: var(--color-neutral-500);
+    cursor: not-allowed;
+  }
+`;

package/src/components/dropdown/dropdown.js

@@ -0,0 +1,111 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import dropdownCSS from "../dropdown/dropdown.css.js";
+
+
+class CustomDropdown extends LitElement {
+  static properties = {
+    label    : { type: String },
+    options  : { type: Array },
+    kind     : { type: String },
+    required : { type: Boolean },
+    tooltip  : { type: String },
+    invalid  : { type: Boolean },
+    validated: { type: Boolean },
+    disabled : { type: Boolean }
+  };
+
+  constructor() {
+    super();
+    this.label = "Select an option";
+    this.options = [];
+    this.kind = "md";
+    this.required = false;
+    this.tooltip = "";
+    this.invalid = false;
+    this.validated = false;
+    this.disabled = false;
+  }
+
+  set options(val) {
+    if (typeof val === "string") {
+      try {
+        this._options = JSON.parse(val);
+      } catch {
+        this._options = [];
+      }
+    } else {
+      this._options = val;
+    }
+  }
+
+  get options() {
+    return this._options;
+  }
+  render() {
+    const inputClass = {
+      sm: "input-sm",
+      md: "input-md",
+      lg: "input-lg"
+    }[this.kind];
+
+    const labelClass = {
+      sm: "label-sm",
+      md: "label-md",
+      lg: "label-lg"
+    }[this.kind];
+
+    const inputStateClass = this.disabled
+      ? "form-input--disabled"
+      : this.invalid
+        ? "form-input--error"
+        : this.validated
+          ? "form-input--success"
+          : "";
+
+    const helpTextClass = this.invalid
+      ? "form-help-text--error"
+      : this.validated
+        ? "form-help-text--success"
+        : "form-help-text--default";
+
+    return html`
+      <div class="input-container">
+        <label for="custom-dropdown" class="form-label ${labelClass}">
+          ${this.label}
+          ${this.required
+            ? html`<span class="form-label__required">*</span>`
+            : ""}
+        </label>
+     <select
+  id="custom-dropdown"
+  class="${inputClass} ${inputStateClass}"
+  ?required="${this.required}"
+  ?disabled="${this.disabled}"
+>
+  ${this.options.map(
+    (option, index) =>
+      html`<option
+        value="${option}"
+        ?selected="${index === 0}"
+      >
+        ${option}
+      </option>`
+  )}
+</select>
+
+
+
+
+        ${this.tooltip
+          ? html`<div class="form-help-text ${helpTextClass}">
+              ${this.tooltip}
+            </div>`
+          : ""}
+      </div>
+    `;
+  }
+}
+CustomDropdown.styles = [tokens, dropdownCSS];
+
+customElements.define("bd-custom-dropdown", CustomDropdown);

package/src/components/footer/footer-links-group.css.js

@@ -0,0 +1,42 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+    padding-top: var(--spacing-24);
+        padding-bottom: var(--spacing-24);
+
+  }
+
+  h4 {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    color: #ffffff;
+    margin: 0;
+  }
+
+  ::slotted(a) {
+    color: #ffffff;
+    text-decoration: none;
+    font-size: var(--typography-body-regular-fontSize);
+    line-height: 1.8;
+  }
+
+  .group-title {
+    font-size: var(--typography-body-regular-fontSize);
+    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
+    font-weight: var(--typography-heading-h1-fontWeight);
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+    color: #ffffff; 
+  }
+
+  @media (max-width: 768px) {
+ 
+  :host(:nth-of-type(2)) .group-title {
+    display: none !important;
+  }
+  }
+`;

package/src/components/footer/footer-links-group.js

@@ -0,0 +1,25 @@
+import { LitElement, html } from 'lit';
+import { tokens } from '../../tokens/tokens.js';
+import footerCSS from './footer-links-group.css.js';
+
+export class BdFooterLinksGroup extends LitElement {
+  static properties = {
+    title: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = '';
+  }
+
+
+  render() {
+    return html`
+    <h4 class="group-title">${this.title ? this.title : html`&nbsp;`}</h4>
+    <slot></slot>
+  `;
+  }
+}
+BdFooterLinksGroup.styles = [tokens, footerCSS];
+
+customElements.define('bd-footer-links-group', BdFooterLinksGroup);