@reliability-design/web 1.0.2

package/dist/components/rel-breadcrumb/rel-breadcrumb.stories.ts

@@ -0,0 +1,306 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-breadcrumb';
+
+/**
+ * The Breadcrumbs component displays hierarchical navigation showing the user's location.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **Hierarchical Navigation**: Shows path from root to current page
+ * - **Clickable Links**: All items except current page are clickable
+ * - **Chevron Separators**: Visual arrow separators between items
+ * - **Current Page Indicator**: Bold styling for current location
+ * - **Accessible**: Uses semantic nav and aria-label for screen readers
+ * - **Flexible**: Supports any number of navigation levels
+ */
+const meta: Meta = {
+  title: 'Components/Breadcrumbs',
+  tags: ['autodocs'],
+  component: 'rel-breadcrumbs',
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of breadcrumb items with label and optional url',
+      table: {
+        type: { summary: 'BreadcrumbItem[]' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-breadcrumbs .items="${args.items}"></rel-breadcrumbs>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Simple breadcrumb - two levels
+ */
+export const Simple: Story = {
+  args: {
+    items: [
+      { label: 'Home', url: '#' },
+      { label: 'Products' },
+    ],
+  },
+};
+
+/**
+ * Three levels - typical navigation depth
+ */
+export const ThreeLevels: Story = {
+  args: {
+    items: [
+      { label: 'Home', url: '#' },
+      { label: 'Products', url: '#products' },
+      { label: 'Electronics' },
+    ],
+  },
+};
+
+/**
+ * Deep navigation - four levels
+ */
+export const DeepNavigation: Story = {
+  args: {
+    items: [
+      { label: 'Home', url: '#' },
+      { label: 'Products', url: '#products' },
+      { label: 'Electronics', url: '#electronics' },
+      { label: 'Laptops' },
+    ],
+  },
+};
+
+/**
+ * Very deep - five levels
+ */
+export const VeryDeep: Story = {
+  args: {
+    items: [
+      { label: 'Home', url: '#' },
+      { label: 'Products', url: '#products' },
+      { label: 'Electronics', url: '#electronics' },
+      { label: 'Laptops', url: '#laptops' },
+      { label: 'Gaming Laptops' },
+    ],
+  },
+};
+
+/**
+ * E-commerce example - product category navigation
+ */
+export const EcommerceExample: Story = {
+  args: {
+    items: [
+      { label: 'Home', url: '#' },
+      { label: 'Shop', url: '#shop' },
+      { label: 'Electronics', url: '#electronics' },
+      { label: 'Computers', url: '#computers' },
+      { label: 'MacBook Pro 16"' },
+    ],
+  },
+};
+
+/**
+ * Documentation example - docs site navigation
+ */
+export const DocumentationExample: Story = {
+  args: {
+    items: [
+      { label: 'Docs', url: '#docs' },
+      { label: 'Components', url: '#components' },
+      { label: 'Navigation', url: '#navigation' },
+      { label: 'Breadcrumbs' },
+    ],
+  },
+};
+
+/**
+ * Dashboard example - app navigation
+ */
+export const DashboardExample: Story = {
+  args: {
+    items: [
+      { label: 'Dashboard', url: '#dashboard' },
+      { label: 'Users', url: '#users' },
+      { label: 'User Details' },
+    ],
+  },
+};
+
+/**
+ * Settings example - nested settings
+ */
+export const SettingsExample: Story = {
+  args: {
+    items: [
+      { label: 'Settings', url: '#settings' },
+      { label: 'Account', url: '#account' },
+      { label: 'Privacy', url: '#privacy' },
+      { label: 'Data & Permissions' },
+    ],
+  },
+};
+
+/**
+ * File system example - file browser navigation
+ */
+export const FileSystemExample: Story = {
+  args: {
+    items: [
+      { label: 'Root', url: '#' },
+      { label: 'Documents', url: '#documents' },
+      { label: 'Work', url: '#work' },
+      { label: 'Projects', url: '#projects' },
+      { label: '2024', url: '#2024' },
+      { label: 'Q4 Report.pdf' },
+    ],
+  },
+};
+
+/**
+ * Various depths - different navigation levels
+ */
+export const VariousDepths: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Two Levels</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Home', url: '#' },
+          { label: 'Products' },
+        ]}"></rel-breadcrumbs>
+      </div>
+
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Three Levels</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Home', url: '#' },
+          { label: 'Products', url: '#products' },
+          { label: 'Electronics' },
+        ]}"></rel-breadcrumbs>
+      </div>
+
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Four Levels</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Home', url: '#' },
+          { label: 'Products', url: '#products' },
+          { label: 'Electronics', url: '#electronics' },
+          { label: 'Laptops' },
+        ]}"></rel-breadcrumbs>
+      </div>
+
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Five Levels</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Home', url: '#' },
+          { label: 'Products', url: '#products' },
+          { label: 'Electronics', url: '#electronics' },
+          { label: 'Laptops', url: '#laptops' },
+          { label: 'Gaming' },
+        ]}"></rel-breadcrumbs>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Real-world use cases
+ */
+export const RealWorldUseCases: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px; background: #000;">
+      <!-- E-commerce Product Page -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">E-commerce Product Page</p>
+        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">User browsing a specific product</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Home', url: '#' },
+          { label: 'Men', url: '#men' },
+          { label: 'Clothing', url: '#clothing' },
+          { label: 'T-Shirts', url: '#t-shirts' },
+          { label: 'Classic Fit Cotton Tee' },
+        ]}"></rel-breadcrumbs>
+      </div>
+
+      <!-- Blog Article -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Blog Article</p>
+        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">User reading a blog post</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Blog', url: '#blog' },
+          { label: 'Technology', url: '#technology' },
+          { label: 'Web Development', url: '#web-dev' },
+          { label: 'Getting Started with Web Components' },
+        ]}"></rel-breadcrumbs>
+      </div>
+
+      <!-- Admin Panel -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Admin Panel</p>
+        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">Admin managing user permissions</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Admin', url: '#admin' },
+          { label: 'Users', url: '#users' },
+          { label: 'John Doe', url: '#user-123' },
+          { label: 'Permissions' },
+        ]}"></rel-breadcrumbs>
+      </div>
+
+      <!-- Help Center -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Help Center</p>
+        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">User searching for help</p>
+        <rel-breadcrumbs .items="${[
+          { label: 'Help Center', url: '#help' },
+          { label: 'Account & Billing', url: '#billing' },
+          { label: 'Subscriptions', url: '#subscriptions' },
+          { label: 'How to Cancel Your Subscription' },
+        ]}"></rel-breadcrumbs>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Long labels - breadcrumbs with lengthy text
+ */
+export const LongLabels: Story = {
+  args: {
+    items: [
+      { label: 'Home', url: '#' },
+      { label: 'Product Categories', url: '#categories' },
+      { label: 'Consumer Electronics and Gadgets', url: '#electronics' },
+      { label: 'High-Performance Gaming Laptops and Workstations' },
+    ],
+  },
+};
+
+/**
+ * Single item - minimal breadcrumb
+ */
+export const SingleItem: Story = {
+  args: {
+    items: [
+      { label: 'Current Page' },
+    ],
+  },
+};
+
+/**
+ * Without URLs - non-clickable breadcrumbs
+ */
+export const WithoutURLs: Story = {
+  args: {
+    items: [
+      { label: 'Step 1' },
+      { label: 'Step 2' },
+      { label: 'Step 3' },
+      { label: 'Step 4' },
+    ],
+  },
+};

package/dist/components/rel-breadcrumb/rel-breadcrumb.ts

@@ -0,0 +1,97 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+interface BreadcrumbItem {
+  label: string;
+  url?: string;
+}
+
+@customElement("rel-breadcrumbs")
+export class RelBreadcrumbs extends LitElement {
+  @property({ type: Array }) items: BreadcrumbItem[] = [];
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-colors-gray-text);
+    }
+
+    nav {
+      display: block;
+      width: 100%;
+    }
+
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      transition: color 0.2s ease;
+    }
+
+    a:hover {
+      text-decoration: underline;
+      color: var(--rel-colors-primary);
+    }
+
+    .current {
+      font-weight: var(--rel-fontWeights-bold);
+      color: var(--rel-colors-black);
+      cursor: default;
+    }
+
+    svg {
+      stroke: var(--rel-colors-gray-text);
+      width: 16px;
+      height: 16px;
+      margin: 0 10px;
+    }
+  `;
+
+  render() {
+    return html`
+      <nav aria-label="Breadcrumb">
+        <ol>
+          ${this.items.map((item, index) => {
+            const last = index === this.items.length - 1;
+            return html`
+              <li>
+                ${item.url && !last
+                  ? html`<a href="${item.url}">${item.label}</a>`
+                  : html`<span class="current">${item.label}</span>`}
+                ${!last
+                  ? html`
+                      <svg viewBox="0 0 24 24">
+                        <polyline
+                          points="9 18 15 12 9 6"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></polyline>
+                      </svg>
+                    `
+                  : ""}
+              </li>
+            `;
+          })}
+        </ol>
+      </nav>
+    `;
+  }
+}