@repobit/dex-system-design 0.4.0 → 0.6.0

package/src/components/badge/badge.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import './badge.js';
+
+export default {
+  title: 'Atoms/Badge',
+  component: 'bd-badge',
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'Textul afișat în badge',
+      defaultValue: 'Badge',
+    },
+    color: {
+      control: 'color',
+      description: 'Culoarea de fundal a badge-ului',
+      defaultValue: '#026DFF',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Un badge simplu care afișează un text cu o culoare de fundal configurabilă.',
+      },
+    },
+  },
+};
+
+const Template = ({ text, color }) => html`
+  <bd-badge text="${text}" color="${color}"></bd-badge>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  text: 'Badge',
+  color: '#026DFF',
+};

package/src/components/carousel/carousel.css.js

@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from "../lit";
 
 export default css`
   :host {
@@ -6,6 +6,7 @@ export default css`
     --background-card-grey: var(--color-neutral-25);
     --border-card-grey: var(--color-neutral-50);
     --bd-blue-color: var(--color-blue-500);
+    --bd-accesibility-focus: var(--color-blue-800);
   }
 
   .bd-carousel {
@@ -16,7 +17,11 @@ export default css`
     max-width: 100%;
     flex-direction: column;
   }
-
+  .bd-carousel-track.dragging {
+    cursor: grabbing;
+    user-select: none;
+  }
+    
   .bd-section-title {
     font-family: var(--font-family-sans);
     font-weight: var(--font-weight-sans-semibold);
@@ -24,7 +29,17 @@ export default css`
   }
   div.bd-arrow {
     padding: var(--size-2);
+    visibility: visible;
+  }
+
+  .bd-box:focus-visible,
+  .bd-arrow:focus-visible,
+  .bd-plus-button:focus-visible,
+  .bd-modal-content button:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
   }
+
   .bd-header-carousel {
     display: block;
     align-items: center;
@@ -57,42 +72,42 @@ export default css`
   }
 
   .bd-left-arrow {
-    content: url("src/assets/icons/left_normal.png");
+    content: url("icons/left_normal.png");
   }
 
   .bd-left-arrow:hover {
-    content: url("src/assets/icons/left_hover.png");
+    content: url("icons/left_hover.png");
   }
 
   .bd-left-arrow:active {
-    content: url("src/assets/icons/left_clicked.png");
+    content: url("icons/left_clicked.png");
   }
 
   .bd-left-arrow:disabled {
-    content: url("src/assets/icons/left_disabled.png");
+    content: url("icons/left_disabled.png");
   }
 
   .bd-right-arrow {
-    content: url("src/assets/icons/right_normal.png");
+    content: url("icons/right_normal.png");
   }
 
   .bd-right-arrow:hover {
-    content: url("src/assets/icons/right_hover.png");
+    content: url("icons/right_hover.png");
   }
 
   .bd-right-arrow:active {
-    content: url("src/assets/icons/right_clicked.png");
+    content: url("icons/right_clicked.png");
   }
 
   .bd-right-arrow:disabled {
-    content: url("src/assets/icons/right_disabled.png");
+    content: url("icons/right_disabled.png");
   }
   .bd-right-arrow.bd-disabled {
-    content: url("src/assets/icons/right_disabled.png");
+    content: url("icons/right_disabled.png");
     cursor: not-allowed;
   }
   .bd-left-arrow.bd-disabled {
-    content: url("src/assets/icons/left_disabled.png");
+    content: url("icons/left_disabled.png");
     cursor: not-allowed;
   }
   .bd-disabled {
@@ -112,14 +127,12 @@ export default css`
   .bd-carousel-track {
     display: flex;
     gap: 2em;
-    scroll-behavior: smooth;
     flex: 1;
     padding: var(--size-0) var(--size-20);
     position: relative;
     overflow-x: hidden;
     overflow-y: hidden;
     z-index: 1;
-    scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     transition: scroll-snap-align 0.6s cubic-bezier(0.23, 1, 0.32, 1);
@@ -127,7 +140,6 @@ export default css`
 
   .bd-carousel-icon {
     position: relative;
-    bottom: 30px;
     max-width: 100%;
     height: var(--size-40);
     width: var(--size-40);
@@ -155,7 +167,7 @@ export default css`
     text-align: start;
     cursor: pointer;
     transition: transform 0.2s ease-in-out;
-
+    font-family: var(--font-family-sans);
     position: relative;
     z-index: 2;
   }
@@ -222,7 +234,7 @@ export default css`
   }
 
   .bd-plus-button {
-    content: url("src/assets/icons/more_normal.png");
+    content: url("icons/more_normal.png");
     position: absolute;
     bottom: var(--size-10);
     right: var(--size-10);
@@ -238,10 +250,15 @@ export default css`
     cursor: pointer;
   }
   .bd-plus-button:hover {
-    content: url("src/assets/icons/more_hover.png");
+    content: url("icons/more_hover.png");
   }
+
+  bd-carousel-item::part(content) {
+    font-family: var(--font-family-sans);
+  }
+
   .bd-plus-button:active {
-    content: url("src/assets/icons/more_pressed.png");
+    content: url("icons/more_pressed.png");
   }
 
   .bd-left-arrow {

package/src/components/carousel/carousel.js

@@ -1,20 +1,31 @@
 import { LitElement, html } from "lit";
 import carouselCSS from "../carousel/carousel.css.js";
 
-class CarouselItem extends LitElement {
+export class CarouselItem extends LitElement {
   static properties = {
+    icon: { type: String },
     title: { type: String },
-    subTitle: { type: String },
     modalText: { type: String },
-    icon: { type: String },
   };
 
-  constructor() {
-    super();
-    this.title = "";
-    this.subTitle = "";
-    this.modalText = "";
-    this.icon = "";
+  _onKeydown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      this._openModal();
+    }
+  }
+
+  _openModal() {
+    this.dispatchEvent(
+      new CustomEvent("open-modal", {
+        detail: {
+          title: this.title,
+          modalText: this.modalText,
+          icon: this.icon,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
 
   render() {
@@ -23,53 +34,52 @@ class CarouselItem extends LitElement {
         ${this.icon
           ? html`<img src="${this.icon}" alt="icon" class="bd-carousel-icon" />`
           : ""}
-        ${this.title ? html`<h3>${this.title}</h3>` : ""}
-        ${this.subTitle ? html`<p>${this.subTitle}</p>` : ""}
+        <div class="bd-content">
+          <slot></slot>
+        </div>
         <div
           class="bd-plus-button"
-          @click="${() =>
-            this.dispatchEvent(
-              new CustomEvent("open-modal", {
-                detail: {
-                  title: this.title,
-                  modalText: this.modalText,
-                  icon: this.icon,
-                },
-                bubbles: true,
-                composed: true,
-              })
-            )}"
-        ></div>
+          role="button"
+          aria-label="Open modal for ${this.title}"
+          @click="${this._openModal}"
+          @keydown="${this._onKeydown}"
+          tabindex="0"
+        >
+          +
+        </div>
       </div>
     `;
   }
+
+  static styles = [carouselCSS];
 }
 
 class CustomCarousel extends LitElement {
   static properties = {
+    title: { type: String },
     selectedItem: { type: Object },
   };
 
   constructor() {
     super();
     this.selectedItem = null;
+    this.title = "";
   }
 
   firstUpdated() {
-    const track = this.shadowRoot.querySelector(".bd-carousel-track");
-    const slot = this.shadowRoot.querySelector("slot");
+    this.track = this.shadowRoot.querySelector(".bd-carousel-track");
+    this.slotElement = this.shadowRoot.querySelector("slot");
+    this.leftArrow = this.shadowRoot.querySelector(".bd-left-arrow");
+    this.rightArrow = this.shadowRoot.querySelector(".bd-right-arrow");
 
-    // Ascultă scroll ca să actualizezi săgețile
-    track.addEventListener("scroll", () => this.updateArrowStates());
+    this.track.addEventListener("scroll", () => this.updateArrowStates());
 
-    // Ascultă schimbările din slot
-    slot.addEventListener("slotchange", () => {
+    this.slotElement.addEventListener("slotchange", () => {
       this.waitForImagesToLoad().then(() => {
         this.updateArrowStates();
       });
     });
 
-    // Așteaptă un layout complet înainte de prima verificare
     setTimeout(() => {
       this.waitForImagesToLoad().then(() => {
         this.updateArrowStates();
@@ -78,92 +88,65 @@ class CustomCarousel extends LitElement {
 
     const arrows = this.shadowRoot.querySelectorAll(".bd-arrow");
     arrows.forEach((arrow) => {
-      arrow.addEventListener("mousedown", () =>
-        arrow.classList.add("bd-active")
-      );
-      arrow.addEventListener("mouseup", () =>
-        arrow.classList.remove("bd-active")
-      );
-      arrow.addEventListener("mouseleave", () =>
-        arrow.classList.remove("bd-active")
-      );
+      arrow.addEventListener("mousedown", () => arrow.classList.add("bd-active"));
+      arrow.addEventListener("mouseup", () => arrow.classList.remove("bd-active"));
+      arrow.addEventListener("mouseleave", () => arrow.classList.remove("bd-active"));
+      arrow.addEventListener("keydown", (e) => this._onArrowKeydown(e, arrow));
     });
 
     this.addEventListener("open-modal", (e) => this.openModal(e.detail));
+    this.enableDragAndTouchScroll(this.track);
   }
 
   waitForImagesToLoad() {
-    const assignedElements = this.shadowRoot
-      .querySelector("slot")
-      .assignedElements({ flatten: true });
-
+    const assignedElements = this.slotElement.assignedElements({ flatten: true });
     const images = assignedElements
       .map((el) => el.shadowRoot?.querySelector("img"))
       .filter((img) => img);
-
     const promises = images.map(
       (img) =>
         new Promise((resolve) => {
-          if (img.complete) {
-            resolve();
-          } else {
+          if (img.complete) resolve();
+          else {
             img.addEventListener("load", resolve, { once: true });
-            img.addEventListener("error", resolve, { once: true }); // în caz de eroare de încărcare
+            img.addEventListener("error", resolve, { once: true });
           }
         })
     );
-
     return Promise.all(promises);
   }
 
   scrollCarousel(direction) {
-    const slot = this.shadowRoot.querySelector("slot");
-    const assignedElements = slot.assignedElements({ flatten: true });
-
-    if (!assignedElements.length) {
-      console.warn("No items found in slot!");
-      return;
-    }
-
+    const assignedElements = this.slotElement.assignedElements({ flatten: true });
+    if (!assignedElements.length) return;
     const itemWidth = assignedElements[0].offsetWidth || 300;
-    const track = this.shadowRoot.querySelector(".bd-carousel-track");
-
-    if (!track) {
-      console.warn("No track found!");
-      return;
-    }
+    if (!this.track) return;
 
-    if (direction === "left") {
-      track.scrollBy({ left: -itemWidth, behavior: "smooth" });
-    } else if (direction === "right") {
-      track.scrollBy({ left: itemWidth, behavior: "smooth" });
-    }
+    this.track.scrollBy({
+      left: direction === "left" ? -itemWidth : itemWidth,
+      behavior: "smooth",
+    });
 
-    // Așteaptă animația scroll-ului și actualizează săgețile
     setTimeout(() => this.updateArrowStates(), 300);
   }
 
   updateArrowStates() {
-    const track = this.shadowRoot.querySelector(".bd-carousel-track");
-    const trackWidth = track.offsetWidth;
-    const totalWidth = track.scrollWidth;
-    const scrollPosition = track.scrollLeft;
-
-    const leftArrow = this.shadowRoot.querySelector(".bd-left-arrow");
-    const rightArrow = this.shadowRoot.querySelector(".bd-right-arrow");
-
-    if (!leftArrow || !rightArrow) return;
-
-    if (scrollPosition <= 0) {
-      leftArrow.classList.add("bd-disabled");
-    } else {
-      leftArrow.classList.remove("bd-disabled");
-    }
+    const trackWidth = this.track.offsetWidth;
+    const totalWidth = this.track.scrollWidth;
+    const scrollPosition = this.track.scrollLeft;
+    if (!this.leftArrow || !this.rightArrow) return;
+
+    this.leftArrow.classList.toggle("bd-disabled", scrollPosition <= 0);
+    this.rightArrow.classList.toggle(
+      "bd-disabled",
+      scrollPosition + trackWidth >= totalWidth - 1
+    );
+  }
 
-    if (scrollPosition + trackWidth >= totalWidth - 1) {
-      rightArrow.classList.add("bd-disabled");
-    } else {
-      rightArrow.classList.remove("bd-disabled");
+  _onArrowKeydown(e, arrow) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      arrow.click();
     }
   }
 
@@ -175,52 +158,119 @@ class CustomCarousel extends LitElement {
     this.selectedItem = null;
   }
 
+  enableDragAndTouchScroll(element) {
+    let isDown = false;
+    let startX;
+    let scrollLeft;
+
+    element.addEventListener("mousedown", (e) => {
+      isDown = true;
+      element.classList.add("dragging");
+      startX = e.pageX - element.offsetLeft;
+      scrollLeft = element.scrollLeft;
+    });
+
+    element.addEventListener("mouseleave", () => {
+      isDown = false;
+      element.classList.remove("dragging");
+    });
+
+    element.addEventListener("mouseup", () => {
+      isDown = false;
+      element.classList.remove("dragging");
+    });
+
+    element.addEventListener("mousemove", (e) => {
+      if (!isDown) return;
+      e.preventDefault();
+      const x = e.pageX - element.offsetLeft;
+      const walk = (x - startX) * 1.5;
+      element.scrollLeft = scrollLeft - walk;
+    });
+
+    element.addEventListener("touchstart", (e) => {
+      isDown = true;
+      startX = e.touches[0].pageX - element.offsetLeft;
+      scrollLeft = element.scrollLeft;
+    });
+
+    element.addEventListener("touchend", () => {
+      isDown = false;
+    });
+
+    element.addEventListener("touchmove", (e) => {
+      if (!isDown) return;
+      const x = e.touches[0].pageX - element.offsetLeft;
+      const walk = (x - startX) * 1.5;
+      element.scrollLeft = scrollLeft - walk;
+    });
+  }
+
   render() {
     return html`
       <div class="bd-carousel">
-        <div class="bd-header-carousel">
-          <h1 class="bd-section-title">${this.title}</h1>
-        </div>
+        ${this.title
+          ? html`<div class="bd-header-carousel">
+              <h1 class="bd-section-title">${this.title}</h1>
+            </div>`
+          : ""}
+
         <img
+          src="left-arrow.svg"
           alt="Left Arrow"
           class="bd-arrow bd-left-arrow"
+          role="button"
+          aria-label="Scroll left"
           @click="${() => this.scrollCarousel("left")}"
+          tabindex="0"
         />
         <div class="bd-carousel-track">
           <slot></slot>
         </div>
         <img
+          src="right-arrow.svg"
           alt="Right Arrow"
           class="bd-arrow bd-right-arrow"
+          role="button"
+          aria-label="Scroll right"
           @click="${() => this.scrollCarousel("right")}"
+          tabindex="0"
         />
       </div>
 
       ${this.selectedItem
         ? html`
-            <div class="bd-modal" @click="${this.closeModal}" ?open="${true}">
+            <div
+              class="bd-modal"
+              @click="${this.closeModal}"
+              aria-hidden="${!this.selectedItem}"
+              ?open="${true}"
+            >
               <div
                 class="bd-modal-content"
                 @click="${(e) => e.stopPropagation()}"
+                aria-labelledby="modal-title"
+                aria-describedby="modal-description"
               >
                 <img
                   src="${this.selectedItem.icon}"
                   alt="icon"
                   class="bd-carousel-modal-icon"
                 />
-                <h2>${this.selectedItem.title}</h2>
-                <p>${this.selectedItem.modalText}</p>
-                <button @click="${this.closeModal}">Close</button>
+                <h2 id="modal-title">${this.selectedItem.title}</h2>
+                <p id="modal-description">${this.selectedItem.modalText}</p>
+                <button @click="${this.closeModal}" aria-label="Close modal">
+                  Close
+                </button>
               </div>
             </div>
           `
         : ""}
     `;
   }
-}
 
-CarouselItem.styles = [carouselCSS];
-CustomCarousel.styles = [carouselCSS];
+  static styles = [carouselCSS];
+}
 
 customElements.define("bd-carousel-item", CarouselItem);
 customElements.define("bd-carousel-section", CustomCarousel);