@repobit/dex-system-design 0.20.0 → 0.21.0

package/src/components/back/back.css.js

@@ -0,0 +1,56 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-back {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.75rem 1rem;
+      font-family: var(--typography-fontFamily-sans);
+      font-size: var(--typography-body-regular-fontSize);
+      font-weight: var(--typography-fontWeight-bold);
+      color: var(--color-neutral-1000);
+      cursor: pointer;
+      border-radius: 0.5rem;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+
+    .bd-back:hover {
+      background-color: var(--color-neutral-100);
+      color: var(--color-neutral-1000);
+    }
+
+    .bd-back:active {
+      background-color: var(--color-neutral-200);
+      transform: translateY(1px);
+    }
+
+    .bd-back:focus-visible {
+      outline: 2px solid var(--color-neutral-1000);
+      outline-offset: 2px;
+    }
+
+    .bd-back-arrow {
+      font-size: 1.125em;
+      font-weight: var(--typography-fontWeight-bold);
+      /* Săgeată mai simplă și mai groasă */
+      transform: scale(1.2);
+      letter-spacing: -0.05em;
+    }
+
+    .bd-back-label {
+      line-height: 1;
+    }
+
+    /* Mobile-first responsive */
+    @media (max-width: 768px) {
+      .bd-back {
+        padding: 0.875rem 1rem;
+        font-size: var(--typography-body-large-fontSize);
+      }
+    }
+  }
+`;

package/src/components/back/back.js

@@ -0,0 +1,39 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import backCSS from "./back.css.js";
+
+export class BdBack extends LitElement {
+  static properties = {
+    href : { type: String },
+    label: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.href = "";
+    this.label = "Back";
+  }
+
+  handleClick() {
+    if (this.href) {
+      window.location.href = this.href;
+    } else {
+      window.history.back();
+    }
+  }
+
+  render() {
+    return html`
+    <button class="bd-back" @click="${this.handleClick}">
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="mi-solid mi-arrow-back" viewBox="0 0 24 24">
+  <path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1"/>
+</svg>
+      <span class="bd-back-label">${this.label}</span>
+    </button>
+  `;
+  }
+
+  static styles = [tokens, backCSS];
+}
+
+customElements.define("bd-back", BdBack);

package/src/components/back/back.stories.js

@@ -0,0 +1,184 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import './back.js';
+
+export default {
+  title    : 'Components/Back',
+  component: 'bd-back',
+  argTypes : {
+    label: {
+      control    : 'text',
+      description: 'Back button label'
+    },
+    href: {
+      control    : 'text',
+      description: 'Optional href for specific navigation'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A simple, mobile-inspired back button component with bold black styling for intuitive navigation.'
+      }
+    }
+  }
+};
+
+const Template = ({ label, href }) => html`
+  <bd-back label="${label}" href="${href}"></bd-back>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Back'
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story: 'Default back button with bold black styling that uses browser history back() when clicked.'
+    }
+  }
+};
+
+export const CustomLabel = Template.bind({});
+CustomLabel.args = {
+  label: 'Înapoi'
+};
+CustomLabel.parameters = {
+  docs: {
+    description: {
+      story: 'Back button with custom label and bold black styling for localization or specific contexts.'
+    }
+  }
+};
+
+export const WithHref = Template.bind({});
+WithHref.args = {
+  label: 'Back to Home',
+  href : '/home'
+};
+WithHref.parameters = {
+  docs: {
+    description: {
+      story: 'Back button with bold black styling that navigates to a specific URL when provided with href.'
+    }
+  }
+};
+
+export const MobileContext = () => html`
+  <div style="max-width: 400px; margin: 0 auto; padding: 1rem; background: #f8fafc; min-height: 100vh;">
+    <div style="margin-bottom: 2rem;">
+      <bd-back label="Back"></bd-back>
+    </div>
+    
+    <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+      <bd-h as="h2" style="margin-bottom: 1rem;">Product Details</bd-h>
+      <bd-p kind="regular" style="margin-bottom: 1rem;">
+        This is a mobile-style page layout with the bold black back button at the top, following mobile navigation patterns.
+      </bd-p>
+      <bd-p kind="small" style="color: #64748b;">
+        Tap the back button to return to the previous screen.
+      </bd-p>
+    </div>
+  </div>
+`;
+MobileContext.parameters = {
+  docs: {
+    description: {
+      story: 'Bold black back button used in a mobile-style layout context, demonstrating the mobile paradigm with strong visual hierarchy.'
+    }
+  }
+};
+
+export const MultipleVariants = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
+    <bd-back label="Back"></bd-back>
+    <bd-back label="Înapoi"></bd-back>
+    <bd-back label="Back to Products" href="/products"></bd-back>
+    <bd-back label="← Back" style="font-size: 0.9rem;"></bd-back>
+  </div>
+`;
+MultipleVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Different variants of the bold black back button showing various use cases and labels.'
+    }
+  }
+};
+
+export const OnLightBackground = () => html`
+  <div style="background: white; padding: 2rem;">
+    <bd-back label="Back"></bd-back>
+    <bd-p kind="small" style="margin-top: 1rem; color: #64748b;">
+      Bold black back button on light background for maximum contrast and visibility.
+    </bd-p>
+  </div>
+`;
+OnLightBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Back button with bold black styling on light background, ensuring high contrast and clear visibility.'
+    }
+  }
+};
+
+export const OnDarkBackground = () => html`
+  <div style="background: #1e293b; padding: 2rem;">
+    <bd-back label="Back"></bd-back>
+    <bd-p kind="small" style="margin-top: 1rem; color: #cbd5e1;">
+      Bold black back button on dark background maintains its strong visual presence.
+    </bd-p>
+  </div>
+`;
+OnDarkBackground.parameters = {
+  docs: {
+    description: {
+      story: 'Back button with bold black styling on dark background, demonstrating its versatility across different backgrounds.'
+    }
+  }
+};
+
+export const InteractiveDemo = () => {
+  return html`
+    <div style="max-width: 600px; margin: 0 auto;">
+      <bd-h as="h2" style="margin-bottom: 2rem;">Bold Black Back Button Demo</bd-h>
+      
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+        <div>
+          <bd-h as="h3" style="margin-bottom: 1rem;">Standard Usage</bd-h>
+          <bd-back label="Back"></bd-back>
+          <bd-p kind="small" style="margin-top: 0.5rem;">
+            Uses browser history back()<br>
+            Color: var(--color-neutral-1000)<br>
+            Font-weight: var(--typography-fontWeight-bold)
+          </bd-p>
+        </div>
+        
+        <div>
+          <bd-h as="h3" style="margin-bottom: 1rem;">With Href</bd-h>
+          <bd-back label="Go Home" href="#home"></bd-back>
+          <bd-p kind="small" style="margin-top: 0.5rem;">
+            Navigates to specific URL<br>
+            Same bold black styling
+          </bd-p>
+        </div>
+      </div>
+      
+      <bd-p kind="regular" style="margin-top: 2rem;">
+        <strong>Design Features:</strong><br>
+        • Bold black color for maximum visibility<br>
+        • Strong font weight for clear hierarchy<br>
+        • Large touch target for mobile use<br>
+        • Clean, minimalist design<br>
+        • Consistent with mobile navigation patterns
+      </bd-p>
+    </div>
+  `;
+};
+InteractiveDemo.parameters = {
+  docs: {
+    description: {
+      story: 'Interactive demonstration of the bold black back button component with mobile-first design principles and strong visual hierarchy.'
+    }
+  }
+};

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import '../heading/heading.js';
 import './badge.js';
 
 export default {
@@ -49,7 +50,6 @@ export default {
   }
 };
 
-// Template principal
 const Template = ({ children, color, variant, size, fontsize }) => html`
   <bd-badge 
     color="${color}" 
@@ -61,17 +61,15 @@ const Template = ({ children, color, variant, size, fontsize }) => html`
   </bd-badge>
 `;
 
-// Template pentru grid cu multiple badge-uri
 const GridTemplate = (items) => html`
   <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
     ${items}
   </div>
 `;
 
-// Template pentru secțiune cu titlu
 const SectionTemplate = (title, items) => html`
   <div style="margin-bottom: 32px;">
-    <h3 style="margin-bottom: 16px; color: #333;">${title}</h3>
+    <bd-h as="h3" style="margin-bottom: 16px; color: #333;">${title}</bd-h>
     ${GridTemplate(items)}
   </div>
 `;
@@ -166,9 +164,6 @@ export const CustomColors = () => {
   );
 };
 
-
-
-// Setări pentru fiecare story
 AllVariants.parameters = {
   docs: {
     description: {
@@ -199,6 +194,4 @@ Combinations.parameters = {
       story: 'Diverse combinații între variante și dimensiuni.'
     }
   }
-};
-
-
+};

package/src/components/breadcrumb/breadcrumb.css.js

@@ -0,0 +1,98 @@
+import { css } from 'lit';
+
+export default css`
+  @layer bd-components {
+    .bd-breadcrumb {
+      font-family: var(--typography-fontFamily-sans);
+    }
+
+    .bd-breadcrumb__items {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Item container */
+    .bd-breadcrumb-item {
+      display: flex;
+      align-items: center;
+    }
+
+    /* Horizontal layout */
+    .bd-breadcrumb--horizontal .bd-breadcrumb__items {
+      flex-direction: row;
+    }
+
+    .bd-breadcrumb--horizontal .bd-breadcrumb-item:not(:last-child) {
+      margin-right: var(--spacing-8);
+    }
+
+    /* Divider styles */
+    .bd-breadcrumb__divider {
+      margin-left: var(--spacing-8);
+      margin-right: var(--spacing-8);
+      color: var(--color-neutral-400);
+      font-size: var(--typography-fontSize-sm);
+      line-height: 1;
+    }
+
+    /* Vertical layout */
+    .bd-breadcrumb--vertical .bd-breadcrumb__items {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-4);
+    }
+
+    .bd-breadcrumb--vertical .bd-breadcrumb__divider {
+      display: none;
+    }
+
+    /* Item styles */
+    .bd-breadcrumb__item {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+      color: inherit;
+    }
+
+    /* Link styles */
+    bd-link.bd-breadcrumb__item {
+      color: var(--color-blue-400);
+      text-decoration: none;
+      transition: all 0.15s ease-in-out;
+    }
+
+    bd-link.bd-breadcrumb__item:hover {
+      color: var(--color-blue-700);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    /* Vertical item styles */
+    .bd-breadcrumb--vertical .bd-breadcrumb__item {
+      padding: var(--spacing-8) var(--spacing-12);
+      background: var(--color-neutral-50);
+      border-radius: var(--spacing-4);
+      width: 100%;
+    }
+
+    .bd-breadcrumb--vertical bd-link.bd-breadcrumb__item:hover {
+      background: var(--color-neutral-100);
+      text-decoration: none;
+    }
+
+    /* Current item styles */
+    .bd-breadcrumb__item--current {
+      color: var(--color-neutral-900);
+      font-weight: var(--typography-fontWeight-medium);
+      cursor: default;
+    }
+
+    .bd-breadcrumb--vertical .bd-breadcrumb__item--current {
+      background: var(--color-neutral-100);
+    }
+  }
+`;

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.js

@@ -1,5 +1,6 @@
 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 {
@@ -62,7 +63,7 @@ class CardItem extends LitElement {
         ${this.title
           ? html`
               <div class="bd-light-title-badge-wrapper-s ${!hasContent ? 'bd-light-title-no-content' : ''}">
-                <h3>${this.title}</h3>
+                <bd-h as="h4" padding="10px 0">${this.title}</bd-h>
               </div>
             `
           : ""}