@repobit/dex-system-design 0.4.0 → 0.6.0

package/src/components/carousel/carousel.stories.js

@@ -1,73 +1,229 @@
-import { html } from 'lit';
-import './carousel.js';
+import { html } from "lit";
+import "./carousel.js";
 
 export default {
-  title: 'Components/Carousel Section',
-  component: 'bd-carousel-section',
-  tags: ['autodocs'],
+  title: "Components/Carousel Section",
+  component: "bd-carousel-section",
+  tags: ["autodocs"],
+  argTypes: {
+    title: { control: "text" },
+
+    // Item 1
+    item1Title: { control: "text", name: "Item 1 Title" },
+    item1SubTitle: { control: "text", name: "Item 1 SubTitle" },
+    item1ModalText: { control: "text", name: "Item 1 Modal Text" },
+    item1Icon: { control: "text", name: "Item 1 Icon" },
+    item1Content: { control: "text", name: "Item 1 Content (use \\n\\n for paragraphs)" },
+
+    // Item 2
+    item2Title: { control: "text", name: "Item 2 Title" },
+    item2SubTitle: { control: "text", name: "Item 2 SubTitle" },
+    item2ModalText: { control: "text", name: "Item 2 Modal Text" },
+    item2Icon: { control: "text", name: "Item 2 Icon" },
+    item2Content: { control: "text", name: "Item 2 Content (use \\n\\n for paragraphs)" },
+
+    // Item 3
+    item3Title: { control: "text", name: "Item 3 Title" },
+    item3SubTitle: { control: "text", name: "Item 3 SubTitle" },
+    item3ModalText: { control: "text", name: "Item 3 Modal Text" },
+    item3Icon: { control: "text", name: "Item 3 Icon" },
+    item3Content: { control: "text", name: "Item 3 Content (use \\n\\n for paragraphs)" },
+
+    // Item 4
+    item4Title: { control: "text", name: "Item 4 Title" },
+    item4SubTitle: { control: "text", name: "Item 4 SubTitle" },
+    item4ModalText: { control: "text", name: "Item 4 Modal Text" },
+    item4Icon: { control: "text", name: "Item 4 Icon" },
+    item4Content: { control: "text", name: "Item 4 Content (use \\n\\n for paragraphs)" },
+
+    // Item 5
+    item5Title: { control: "text", name: "Item 5 Title" },
+    item5SubTitle: { control: "text", name: "Item 5 SubTitle" },
+    item5ModalText: { control: "text", name: "Item 5 Modal Text" },
+    item5Icon: { control: "text", name: "Item 5 Icon" },
+    item5Content: { control: "text", name: "Item 5 Content (use \\n\\n for paragraphs)" },
+
+    // Item 6
+    item6Title: { control: "text", name: "Item 6 Title" },
+    item6SubTitle: { control: "text", name: "Item 6 SubTitle" },
+    item6ModalText: { control: "text", name: "Item 6 Modal Text" },
+    item6Icon: { control: "text", name: "Item 6 Icon" },
+    item6Content: { control: "text", name: "Item 6 Content (use \\n\\n for paragraphs)" },
+
+    // Item 7
+    item7Title: { control: "text", name: "Item 7 Title" },
+    item7SubTitle: { control: "text", name: "Item 7 SubTitle" },
+    item7ModalText: { control: "text", name: "Item 7 Modal Text" },
+    item7Icon: { control: "text", name: "Item 7 Icon" },
+    item7Content: { control: "text", name: "Item 7 Content (use \\n\\n for paragraphs)" },
+
+    // Item 8
+    item8Title: { control: "text", name: "Item 8 Title" },
+    item8SubTitle: { control: "text", name: "Item 8 SubTitle" },
+    item8ModalText: { control: "text", name: "Item 8 Modal Text" },
+    item8Icon: { control: "text", name: "Item 8 Icon" },
+    item8Content: { control: "text", name: "Item 8 Content (use \\n\\n for paragraphs)" },
+  },
 };
 
+const renderParagraphs = (text) =>
+  text
+    ? text.split("\n\n").map(
+        (paragraph) => html`<p>${paragraph}</p>`
+      )
+    : null;
+
 const Template = (args) => html`
-  <bd-carousel-section title=${args.title}>
+  <bd-carousel-section title="${args.title}">
     <bd-carousel-item
-      title="Scam Copilot Bot"
-      subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-      modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item1Title}"
+      subTitle="${args.item1SubTitle}"
+      modalText="${args.item1ModalText}"
+      icon="${args.item1Icon}"
+    >
+      <h3>${args.item1Title}</h3>
+      ${renderParagraphs(args.item1Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="Scam Wave Alerts"
-      subTitle="Proactively informs you about scam outbreaks in your region"
-      modalText="Proactively informs you about scam outbreaks in your region"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item2Title}"
+      subTitle="${args.item2SubTitle}"
+      modalText="${args.item2ModalText}"
+      icon="${args.item2Icon}"
+    >
+      <h3>${args.item2Title}</h3>
+      ${renderParagraphs(args.item2Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="AI-Powered Scam Check"
-      subTitle="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
-      modalText="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item3Title}"
+      subTitle="${args.item3SubTitle}"
+      modalText="${args.item3ModalText}"
+      icon="${args.item3Icon}"
+    >
+      <h3>${args.item3Title}</h3>
+      ${renderParagraphs(args.item3Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="Educational Resources"
-      subTitle="Access a wealth of information and best practices to stay informed and vigilant against scams"
-      modalText="Access a wealth of information and best practices to stay informed and vigilant against scams"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item4Title}"
+      subTitle="${args.item4SubTitle}"
+      modalText="${args.item4ModalText}"
+      icon="${args.item4Icon}"
+    >
+      <h3>${args.item4Title}</h3>
+      ${renderParagraphs(args.item4Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="Phishing Simulator"
-      subTitle="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
-      modalText="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item5Title}"
+      subTitle="${args.item5SubTitle}"
+      modalText="${args.item5ModalText}"
+      icon="${args.item5Icon}"
+    >
+      <h3>${args.item5Title}</h3>
+      ${renderParagraphs(args.item5Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="Real-Time Scam Updates"
-      subTitle="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
-      modalText="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item6Title}"
+      subTitle="${args.item6SubTitle}"
+      modalText="${args.item6ModalText}"
+      icon="${args.item6Icon}"
+    >
+      <h3>${args.item6Title}</h3>
+      ${renderParagraphs(args.item6Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="Community Reporting Hub"
-      subTitle="A platform where users can report scams and share experiences to help protect others"
-      modalText="A platform where users can report scams and share experiences to help protect others"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item7Title}"
+      subTitle="${args.item7SubTitle}"
+      modalText="${args.item7ModalText}"
+      icon="${args.item7Icon}"
+    >
+      <h3>${args.item7Title}</h3>
+      ${renderParagraphs(args.item7Content)}
+    </bd-carousel-item>
 
     <bd-carousel-item
-      title="Fraud Prevention Workshops"
-      subTitle="Interactive workshops that educate users on identifying and avoiding scams"
-      modalText="Interactive workshops that educate users on identifying and avoiding scams"
-      icon="src/assets/icons/light-carousel-img1.png"
-    ></bd-carousel-item>
+      title="${args.item8Title}"
+      subTitle="${args.item8SubTitle}"
+      modalText="${args.item8ModalText}"
+      icon="${args.item8Icon}"
+    >
+      <h3>${args.item8Title}</h3>
+      ${renderParagraphs(args.item8Content)}
+    </bd-carousel-item>
   </bd-carousel-section>
 `;
 
 export const Default = Template.bind({});
 Default.args = {
   title: "Need help? We've got answers!",
+
+  item1Title: "Scam Copilot Bot",
+  item1SubTitle:
+    "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
+  item1ModalText:
+    "Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim",
+  item1Icon: "icons/light-carousel-img1.png",
+  item1Content: `Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nSpecialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.\n\nTest Scam Copilot Bot`,
+
+  item2Title: "Scam Wave Alerts",
+  item2SubTitle: "Proactively informs you about scam outbreaks in your region",
+  item2ModalText: "Proactively informs you about scam outbreaks in your region",
+  item2Icon: "icons/light-carousel-img1.png",
+  item2Content: "Proactively informs you about scam outbreaks in your region.",
+
+  item3Title: "AI-Powered Scam Check",
+  item3SubTitle:
+    "AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction",
+  item3ModalText:
+    "AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction",
+  item3Icon: "icons/light-carousel-img1.png",
+  item3Content:
+    "AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction.",
+
+  item4Title: "Educational Resources",
+  item4SubTitle:
+    "Access a wealth of information and best practices to stay informed and vigilant against scams",
+  item4ModalText:
+    "Access a wealth of information and best practices to stay informed and vigilant against scams",
+  item4Icon: "icons/light-carousel-img1.png",
+  item4Content:
+    "Access a wealth of information and best practices to stay informed and vigilant against scams.",
+
+  item5Title: "Phishing Simulator",
+  item5SubTitle:
+    "Simulates phishing attacks to help you recognize and respond appropriately to real threats",
+  item5ModalText:
+    "Simulates phishing attacks to help you recognize and respond appropriately to real threats",
+  item5Icon: "icons/light-carousel-img1.png",
+  item5Content:
+    "Simulates phishing attacks to help you recognize and respond appropriately to real threats.",
+
+  item6Title: "Real-Time Scam Updates",
+  item6SubTitle:
+    "Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry",
+  item6ModalText:
+    "Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry",
+  item6Icon: "icons/light-carousel-img1.png",
+  item6Content:
+    "Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry.",
+
+  item7Title: "Community Reporting Hub",
+  item7SubTitle:
+    "A platform where users can report scams and share experiences to help protect others",
+  item7ModalText:
+    "A platform where users can report scams and share experiences to help protect others",
+  item7Icon: "icons/light-carousel-img1.png",
+  item7Content:"A platform where users can report scams and share experiences to help protect others.",
+item8Title: "Fraud Prevention Workshops",
+item8SubTitle:
+"Interactive workshops that educate users on identifying and avoiding scams",
+item8ModalText:
+"Interactive workshops that educate users on identifying and avoiding scams",
+item8Icon: "icons/light-carousel-img1.png",
+item8Content:
+"Interactive workshops that educate users on identifying and avoiding scams.",
 };

package/src/components/checkbox/checkbox.css.js

@@ -0,0 +1,132 @@
+import { css } from "../lit";
+
+export default css`
+  :host {
+    display: inline-block;
+  }
+
+  .bd-checkbox,
+  .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-checkbox.disabled,
+  .bd-radio.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .checkbox-label,
+  .radio-label {
+    font-size: 14px;
+    color: black;
+  }
+
+  /* Checkbox */
+  .bd-checkbox .bd-outer {
+    width: var(--size-22);
+    height: var(--size-22);
+    border: var(--size-2) solid var(--color-blue-500);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease;
+    outline: none;
+  }
+
+  .bd-checkbox .bd-inner {
+    width: var(--size-12);
+    height: var(--size-12);
+    background-color: var(--color-blue-500);
+    border-radius: var(--size-2);
+    transform: scale(0);
+    transition: transform 0.2s ease, background-color 0.2s ease;
+  }
+
+  .bd-checkbox .bd-inner.visible {
+    transform: scale(1);
+  }
+
+  .bd-radio .bd-outer {
+    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;
+    outline: none;
+  }
+
+  .bd-radio .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-radio .bd-inner.visible {
+    transform: scale(1);
+  }
+
+  .bd-checkbox .bd-outer:hover,
+  .bd-radio .bd-outer:hover {
+    border-color: var(--color-blue-700);
+  }
+
+  .bd-checkbox .bd-inner:hover,
+  .bd-radio .bd-inner:hover {
+    background-color: var(--color-blue-700);
+  }
+
+  .bd-checkbox.disabled .bd-outer.checked,
+  .bd-radio.disabled .bd-outer.checked {
+    border-color: #b0b0b0;
+  }
+
+  .bd-checkbox.disabled .bd-outer,
+  .bd-radio.disabled .bd-outer {
+    border-color: #b0b0b0;
+  }
+
+  .bd-checkbox.disabled .bd-inner,
+  .bd-radio.disabled .bd-inner {
+    background-color: #b0b0b0;
+  }
+ 
+
+.bd-checkbox .bd-outer:focus {
+  outline: none;
+}
+
+.bd-checkbox .bd-outer:focus-visible {
+  outline: var(--size-2) solid var(--color-blue-500);
+  outline-offset: var(--size-2);
+}
+.bd-checkbox .bd-outer.checked:focus-visible {
+  border-color: var(--color-blue-700);
+}
+
+.bd-checkbox .bd-outer.checked:focus-visible .bd-inner.visible {
+  background-color: var(--color-blue-700);
+}
+  .bd-checkbox .bd-outer.checked.kbd-activate {
+  border-color: var(--color-blue-700);
+}
+
+.bd-checkbox .bd-outer.checked.kbd-activate .bd-inner.visible {
+  background-color: var(--color-blue-700);
+}
+`;

package/src/components/checkbox/checkbox.js

@@ -0,0 +1,130 @@
+import { LitElement, html } from "lit";
+import checkboxCSS from "./checkbox.css";
+
+export class BdCheckbox extends LitElement {
+  static styles = [checkboxCSS];
+
+  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 = this._handleDocumentMousedown.bind(this);
+  }
+
+  _handleDocumentMousedown(e) {
+    const path = e.composedPath();
+    const target = path.find(
+      (el) =>
+        el instanceof HTMLElement &&
+        el.classList &&
+        el.classList.contains("bd-outer")
+    );
+    if (target) {
+      target.classList.remove("focus");
+    }
+    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");
+    }
+  }
+
+ handleKeydown(e) {
+  if (this.disabled) return;
+
+  if (e.key === " " || e.key === "Enter") {
+    e.preventDefault();
+    this.handleClick();
+
+    const outer = e.target;
+
+    if (this._hadKeyboardFocus) {
+      outer.classList.add("focus", "kbd-activate");
+
+      setTimeout(() => {
+        outer.classList.remove("kbd-activate");
+      }, 150);
+    }
+  }
+}
+
+
+  handleBlur(e) {
+    setTimeout(() => {
+      const active = this.shadowRoot.activeElement || document.activeElement;
+      if (active !== e.target) {
+        e.target.classList.remove("focus");
+      } 
+    }, 0);
+  }
+
+  render() {
+    return html`
+      <label class="bd-checkbox ${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="checkbox-label">${this.label}</span>
+      </label>
+    `;
+  }
+}
+
+customElements.define("bd-checkbox", BdCheckbox);

package/src/components/checkbox/checkbox.stories.js

@@ -0,0 +1,63 @@
+import { html } from 'lit';
+import './checkbox.js';
+
+export default {
+  title: 'Atoms/Checkbox',
+  component: 'bd-checkbox',
+  tags: ['autodocs'], // activează Docs
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'text' },
+    label: { control: 'text' },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+// Template de bază
+const Template = ({ name, value, label, checked, disabled }) => html`
+  <bd-checkbox
+    .name=${name}
+    .value=${value}
+    .label=${label}
+    .checked=${checked}
+    .disabled=${disabled}
+  ></bd-checkbox>
+`;
+
+// Exemple BdCheckbox
+export const Default = Template.bind({});
+Default.args = {
+  name: 'group1',
+  value: 'default',
+  label: 'Checkbox normal',
+  checked: false,
+  disabled: false,
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  name: 'group1',
+  value: 'checked',
+  label: 'Checkbox checked',
+  checked: true,
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  name: 'group1',
+  value: 'disabled',
+  label: 'Checkbox disabled',
+  checked: false,
+  disabled: true,
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  name: 'group1',
+  value: 'disabled-checked',
+  label: 'Checkbox disabled & checked',
+  checked: true,
+  disabled: true,
+};

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

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from 'lit';
+
+export class BdDividerHorizontal extends LitElement {
+  static properties = {
+    width: { type: String }, // Noua proprietate
+  };
+
+  static styles = 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
+  }
+
+  render() {
+    return html`
+      <hr class="hr-line" style="width: ${this.width};" />
+    `;
+  }
+}
+
+customElements.define('bd-divider-horizontal', BdDividerHorizontal);

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

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