@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,136 @@
+import { LitElement, html } from 'lit';
+import { tokens } from '../../tokens/tokens.js';
+import '../link/link.js';
+import '../paragraph/paragraph.js';
+import breadcrumbCSS from './breadcrumb.css.js';
+
+export class Breadcrumb extends LitElement {
+  static properties = {
+    noTrailingSlash : { type: Boolean, attribute: 'no-trailing-slash' },
+    mobileBreakpoint: { type: Number, attribute: 'mobile-breakpoint' },
+    _isMobile       : { type: Boolean, state: true }
+  };
+
+  constructor() {
+    super();
+    this.noTrailingSlash = false;
+    this.mobileBreakpoint = 768;
+    this._isMobile = false;
+    this._resizeObserver = null;
+  }
+
+  firstUpdated() {
+    this._checkMobile();
+    this._setupResizeListener();
+    this._updateChildItems();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('noTrailingSlash')) {
+      this._updateChildItems();
+    }
+  }
+
+  _updateChildItems() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return;
+
+    const items = slot.assignedElements({ flatten: true });
+    items.forEach(item => {
+      if (item.updateNoTrailingSlash) {
+        item.updateNoTrailingSlash(this.noTrailingSlash);
+      }
+    });
+  }
+
+  _checkMobile() {
+    this._isMobile = window.innerWidth <= this.mobileBreakpoint;
+  }
+
+  _setupResizeListener() {
+    let resizeTimeout;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        const wasMobile = this._isMobile;
+        this._checkMobile();
+        if (wasMobile !== this._isMobile) {
+          this.requestUpdate();
+        }
+      }, 100);
+    };
+
+    window.addEventListener('resize', handleResize);
+    this._resizeObserver = handleResize;
+  }
+
+  disconnectedCallback() {
+    if (this._resizeObserver) {
+      window.removeEventListener('resize', this._resizeObserver);
+    }
+    super.disconnectedCallback();
+  }
+
+  render() {
+    const orientation = this._isMobile ? 'vertical' : 'horizontal';
+
+    return html`
+      <nav class="bd-breadcrumb bd-breadcrumb--${orientation}" 
+           aria-label="Breadcrumb">
+        <div class="bd-breadcrumb__items">
+          <slot></slot>
+        </div>
+      </nav>
+    `;
+  }
+
+  static styles = [tokens, breadcrumbCSS];
+}
+
+export class BreadcrumbItem extends LitElement {
+  static properties = {
+    href           : { type: String },
+    current        : { type: Boolean, reflect: true },
+    noTrailingSlash: { type: Boolean }
+  };
+
+  constructor() {
+    super();
+    this.href = '';
+    this.current = false;
+    this.noTrailingSlash = false;
+  }
+
+  updateNoTrailingSlash(value) {
+    this.noTrailingSlash = value;
+    this.requestUpdate();
+  }
+
+  render() {
+    const showDivider = !this.current && !this.noTrailingSlash;
+
+    const content = this.current
+      ? html`<span class="bd-breadcrumb__item bd-breadcrumb__item--current" aria-current="page">
+          <bd-p kind="small"><slot></slot></bd-p>
+        </span>`
+      : this.href
+        ? html`<bd-link href="${this.href}" size="small" class="bd-breadcrumb__item">
+            <slot></slot>
+          </bd-link>`
+        : html`<span class="bd-breadcrumb__item">
+            <bd-p kind="small"><slot></slot></bd-p>
+          </span>`;
+
+    return html`
+      <div class="bd-breadcrumb-item">
+        ${content}
+        ${showDivider ? html`<span class="bd-breadcrumb__divider">/</span>` : ''}
+      </div>
+    `;
+  }
+
+  static styles = [tokens, breadcrumbCSS];
+}
+
+customElements.define('bd-breadcrumb', Breadcrumb);
+customElements.define('bd-breadcrumb-item', BreadcrumbItem);

package/src/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,109 @@
+import { html } from 'lit';
+import './breadcrumb.js';
+
+export default {
+  title        : 'Components/Breadcrumb',
+  component    : 'bd-breadcrumb',
+  subcomponents: { 'BreadcrumbItem': 'bd-breadcrumb-item' },
+  parameters   : {
+    docs: {
+      description: {
+        component: 'A navigation component that shows the current page location within a hierarchy.'
+      }
+    }
+  }
+};
+
+export const Default = () => html`
+  <bd-breadcrumb>
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/products">
+      Products
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/products/security">
+      Security
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Bitdefender Total Security
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+
+export const WithNestedLinks = () => html`
+  <bd-breadcrumb>
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/products">
+      All Products
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/products/security">
+      Security Suite
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Internet Security 2024
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+
+export const MixedItems = () => html`
+  <bd-breadcrumb>
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item>
+      Documentation
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/docs/components">
+      Components
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Breadcrumb
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+
+export const LongPath = () => html`
+  <bd-breadcrumb>
+    <bd-breadcrumb-item href="/">
+      Home
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/categories">
+      Categories
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/categories/technology">
+      Technology
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/categories/technology/software">
+      Software
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item href="/categories/technology/software/security">
+      Security Software
+    </bd-breadcrumb-item>
+    <bd-breadcrumb-item current>
+      Bitdefender Internet Security Complete Edition
+    </bd-breadcrumb-item>
+  </bd-breadcrumb>
+`;
+
+export const MobileView = () => html`
+  <div style="max-width: 400px; border: 1px solid #ccc; padding: 20px;">
+    <bd-breadcrumb mobile-breakpoint="1200">
+      <bd-breadcrumb-item href="/">
+        Home
+      </bd-breadcrumb-item>
+      <bd-breadcrumb-item href="/products">
+        Products
+      </bd-breadcrumb-item>
+      <bd-breadcrumb-item current>
+        Current Page
+      </bd-breadcrumb-item>
+    </bd-breadcrumb>
+    <p style="margin-top: 20px; font-size: 12px; color: #666;">
+      This demo forces mobile view by setting breakpoint to 1200px.
+      Resize window to see responsive behavior.
+    </p>
+  </div>
+`;

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

@@ -0,0 +1,245 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    padding-top: var(--spacing-32);
+    padding-bottom: var(--spacing-32);
+  }
+
+  .bd-section-title-s {
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+    font-size: 2em;
+  }
+
+  .bd-header-light-carousel-s {
+    margin-bottom: 50px;
+    margin-top: 50px;
+  }
+
+  .bd-light-carousel-s {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    margin: var(--spacing-0) auto;
+    overflow: hidden;
+    flex-direction: column;
+    padding-left: var(--spacing-14);
+    padding-right: var(--spacing-14);
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  .bd-light-carousel-title-s {
+    font-size: 28px;
+    font-weight: 700;
+    text-align: center;
+    color: #e4002b;
+    margin-bottom: 32px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .bd-light-carousel-track-s {
+    scroll-behavior: smooth;
+    flex: 1;
+    position: relative;
+    padding: var(--spacing-0) var(--spacing-20);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    z-index: 1;
+    scroll-snap-type: x mandatory;
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .bd-light-carousel-track-s::-webkit-scrollbar {
+    display: none;
+  }
+
+  .bd-light-box-s {
+    flex: var(--spacing-0) var(--spacing-0) auto;
+    background: var(--background-card-grey);
+    border-radius: 28px;
+    padding: var(--spacing-32);
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    text-align: start;
+    transition: transform 0.2s ease-in-out;
+    min-height: 135px;
+    position: relative;
+    z-index: 2;
+    scroll-snap-align: start;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  /* Stiluri pentru carduri fără conținut (doar icon + titlu) */
+  .bd-light-box-no-content {
+    justify-content: center !important;
+    align-items: center !important;
+    text-align: center !important;
+    min-height: 200px;
+    gap: var(--spacing-32);
+  }
+
+  /* Stiluri pentru aliniere center */
+  .bd-light-box-center {
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+  }
+
+  .bd-light-box-s h3 {
+    font-size: var(--heading-xsmall);
+    margin: var(--spacing-0) var(--spacing-8) var(--spacing-8) var(--spacing-0);
+    font-weight: 600;
+    font-family: var(--typography-fontFamily-sans);
+    text-align: start;
+  }
+
+  /* Titlu pentru carduri fără conținut */
+  .bd-light-title-no-content h3 {
+    margin: var(--spacing-0) !important;
+    font-size: var(--heading-small) !important;
+    text-align: center;
+  }
+
+  .bd-light-box-center h3 {
+    text-align: center !important;
+    margin: var(--spacing-0) var(--spacing-0) var(--spacing-8) var(--spacing-0) !important;
+  }
+
+  .bd-light-box-s p {
+    font-size: var(--spacing-16);
+    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+    font-family: var(--typography-fontFamily-sans);
+    text-align: start;
+  }
+
+  .bd-light-box-center p {
+    text-align: center !important;
+  }
+
+  .bd-light-icon-s {
+    position: relative;
+    max-width: 100%;
+    height: var(--spacing-44);
+    width: var(--spacing-44);
+  }
+
+  /* Iconiță pentru carduri fără conținut */
+  .bd-light-box-no-content .bd-light-icon-s {
+    margin: 0 !important;
+    bottom: 0;
+  }
+
+  .bd-light-box-header-s {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    padding-bottom: var(--spacing-16);
+  }
+
+  /* Header pentru carduri fără conținut */
+  .bd-light-box-no-content .bd-light-box-header-s {
+    align-items: center !important;
+    margin: 0 !important;
+  }
+
+  .bd-light-box-header-center {
+    align-items: center !important; 
+    padding-bottom: var(--spacing-16);
+  }
+
+  .bd-light-title-badge-wrapper-s {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4, 4px);
+  }
+
+  /* Container titlu pentru carduri fără conținut */
+  .bd-light-title-no-content {
+    margin: 0 !important;
+    width: 100%;
+    justify-content: center;
+  }
+
+  @media (max-width: 1024px) {
+    .bd-light-box-s {
+      width: 380px;
+      padding: 1.5em;
+    }
+    .bd-light-box-s h3 {
+      font-size: 1.1em;
+    }
+    .bd-light-box-s p {
+      font-size: 0.95em;
+    }
+
+    .bd-light-carousel-track-s {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bd-light-carousel-track-s {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-20);
+      overflow-x: hidden;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+    }
+
+    .bd-light-box-s {
+      width: 100%;
+      max-width: 400px;
+      margin: var(--spacing-0) auto;
+    }
+
+    .bd-arrow-s {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .bd-light-box-s {
+      width: 100%;
+      padding: 1em;
+      min-height: 300px;
+    }
+
+    .bd-light-box-no-content {
+      min-height: 250px;
+    }
+
+    .bd-light-box-s h3 {
+      font-size: 1em;
+    }
+
+    .bd-light-box-s p {
+      font-size: 0.9em;
+    }
+
+    .bd-light-icon-s {
+      bottom: var(--spacing-10);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .bd-light-carousel-track-s {
+      grid-template-columns: 1fr;
+    }
+  }
+`;

package/src/components/cards/card.js

@@ -0,0 +1,80 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
+import carouselCSS from "./card.css.js";
+
+class Card extends LitElement {
+  static properties = {
+    title: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+  }
+
+  render() {
+    return html`
+    <section class="bd-light-carousel-s">
+      ${this.title
+        ? html`
+            <div class="bd-header-light-carousel-s">
+              <h1 class="bd-section-title-s">${this.title}</h1>
+            </div>
+          `
+        : null}
+      <div class="bd-light-carousel-track-s">
+        <slot></slot>
+      </div>
+    </section>
+  `;
+  }
+}
+
+class CardItem extends LitElement {
+  static properties = {
+    title: { type: String },
+    icon : { type: String },
+    align: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.title = "";
+    this.icon = "";
+    this.align = "start";
+  }
+
+  render() {
+    const isCentered = this.align === "center";
+    const hasContent = this.innerHTML.trim() !== '';
+
+    return html`
+      <div class="bd-light-box-s ${isCentered ? 'bd-light-box-center' : ''} ${!hasContent ? 'bd-light-box-no-content' : ''}">
+        <div class="bd-light-box-header-s ${isCentered ? 'bd-light-box-header-center' : ''}">
+          ${this.icon
+            ? html`<img
+                src="${this.icon}"
+                alt="icon"
+                class="bd-light-icon-s"
+              />`
+            : ""}
+        </div>
+        ${this.title
+          ? html`
+              <div class="bd-light-title-badge-wrapper-s ${!hasContent ? 'bd-light-title-no-content' : ''}">
+                <bd-h as="h4" padding="10px 0">${this.title}</bd-h>
+              </div>
+            `
+          : ""}
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+Card.styles = [tokens, carouselCSS];
+CardItem.styles = [tokens, carouselCSS];
+
+customElements.define("bd-card-item", CardItem);
+customElements.define("bd-card-section", Card);