@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,552 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-chip';
-
-/**
- * The Chip component is a compact UI element for displaying tags, categories, or user selections.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **5 Tone Variants**: default, blue, yellow, red, green
- * - **Outline Mode**: Transparent background with colored border
- * - **Avatar Support**: Display user profile images
- * - **Icon Support**: Leading and trailing icons
- * - **Removable**: Optional close button with keyboard support
- * - **Keyboard Navigation**: Backspace/Delete to remove when focused
- * - **WCAG Compliant**: Full accessibility support
- */
-const meta: Meta = {
-  title: 'Components/Chip',
-  tags: ['autodocs'],
-  component: 'rel-chip',
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Text content of the chip',
-      table: {
-        defaultValue: { summary: 'Label' },
-        type: { summary: 'string' },
-      },
-    },
-    tone: {
-      control: { type: 'select' },
-      options: ['default', 'blue', 'yellow', 'red', 'green'],
-      description: 'Color tone variant',
-      table: {
-        defaultValue: { summary: 'default' },
-        type: { summary: 'string' },
-      },
-    },
-    outline: {
-      control: 'boolean',
-      description: 'Use outline variant with transparent background',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
-      },
-    },
-    removable: {
-      control: 'boolean',
-      description: 'Show remove button (X)',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
-      },
-    },
-    avatar: {
-      control: 'text',
-      description: 'Avatar image URL',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    leadingIcon: {
-      control: 'text',
-      description: 'SVG icon markup for leading position',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    trailingIcon: {
-      control: 'text',
-      description: 'SVG icon markup for trailing position',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-chip
-      label="${args.label || 'Chip'}"
-      tone="${args.tone || 'default'}"
-      ?outline="${args.outline}"
-      ?removable="${args.removable}"
-      avatar="${args.avatar || ''}"
-      leadingIcon="${args.leadingIcon || ''}"
-      trailingIcon="${args.trailingIcon || ''}"
-    ></rel-chip>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default chip with gray background
- */
-export const Default: Story = {
-  args: {
-    label: 'Default Chip',
-    tone: 'default',
-  },
-};
-
-/**
- * Tone variants - all available color options
- */
-export const ToneVariants: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <rel-chip label="Default" tone="default"></rel-chip>
-      <rel-chip label="Blue" tone="blue"></rel-chip>
-      <rel-chip label="Yellow" tone="yellow"></rel-chip>
-      <rel-chip label="Red" tone="red"></rel-chip>
-      <rel-chip label="Green" tone="green"></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Outline variants - transparent background with colored border
- */
-export const OutlineVariants: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #1a202c; border-radius: 8px;">
-      <rel-chip label="Default" tone="default" outline></rel-chip>
-      <rel-chip label="Blue" tone="blue" outline></rel-chip>
-      <rel-chip label="Yellow" tone="yellow" outline></rel-chip>
-      <rel-chip label="Red" tone="red" outline></rel-chip>
-      <rel-chip label="Green" tone="green" outline></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Chips with leading icons
- */
-export const WithLeadingIcon: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <rel-chip
-        label="Star Icon"
-        tone="blue"
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
-      ></rel-chip>
-      <rel-chip
-        label="Success"
-        tone="green"
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
-      ></rel-chip>
-      <rel-chip
-        label="Warning"
-        tone="yellow"
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>'
-      ></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Chips with trailing icons
- */
-export const WithTrailingIcon: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <rel-chip
-        label="Chevron Right"
-        tone="blue"
-        trailingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>'
-      ></rel-chip>
-      <rel-chip
-        label="Arrow Down"
-        tone="default"
-        trailingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>'
-      ></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Chips with avatar images
- */
-export const WithAvatar: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <rel-chip
-        label="John Doe"
-        tone="default"
-        avatar="https://i.pravatar.cc/40?img=1"
-      ></rel-chip>
-      <rel-chip
-        label="Jane Smith"
-        tone="blue"
-        avatar="https://i.pravatar.cc/40?img=5"
-      ></rel-chip>
-      <rel-chip
-        label="Alex Johnson"
-        tone="green"
-        avatar="https://i.pravatar.cc/40?img=8"
-      ></rel-chip>
-      <rel-chip
-        label="Sam Wilson"
-        tone="yellow"
-        avatar="https://i.pravatar.cc/40?img=12"
-      ></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Removable chips with close button
- */
-export const Removable: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <rel-chip label="Removable Chip" tone="default" removable></rel-chip>
-      <rel-chip label="Delete Me" tone="red" removable></rel-chip>
-      <rel-chip
-        label="Remove User"
-        tone="blue"
-        avatar="https://i.pravatar.cc/40?img=3"
-        removable
-      ></rel-chip>
-      <rel-chip
-        label="With Icon"
-        tone="green"
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
-        removable
-      ></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Keyboard interactions - Press Backspace or Delete when focused to remove
- */
-export const KeyboardInteractions: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <p style="margin: 0; color: #666; font-size: 14px;">
-        Tab to focus chips, press Backspace or Delete to remove them
-      </p>
-      <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-        <rel-chip label="Press Backspace" tone="yellow" removable></rel-chip>
-        <rel-chip label="Press Delete" tone="red" removable></rel-chip>
-        <rel-chip label="Keyboard Friendly" tone="blue" removable></rel-chip>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Complex combinations - Avatar + Icon + Removable
- */
-export const ComplexExamples: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #1a202c; border-radius: 8px;">
-      <rel-chip
-        label="Premium User"
-        tone="yellow"
-        avatar="https://i.pravatar.cc/40?img=7"
-        trailingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
-        removable
-      ></rel-chip>
-      <rel-chip
-        label="Admin"
-        tone="red"
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/></svg>'
-        avatar="https://i.pravatar.cc/40?img=9"
-        removable
-      ></rel-chip>
-      <rel-chip
-        label="Verified"
-        tone="green"
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
-        outline
-      ></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Default outline - gray outline chip
- */
-export const OutlineDefault: Story = {
-  args: {
-    label: 'Default Outline',
-    tone: 'default',
-    outline: true,
-  },
-};
-
-/**
- * Blue outline - blue border with transparent background
- */
-export const OutlineBlue: Story = {
-  args: {
-    label: 'Blue Outline',
-    tone: 'blue',
-    outline: true,
-  },
-};
-
-/**
- * Yellow outline - yellow border with transparent background
- */
-export const OutlineYellow: Story = {
-  args: {
-    label: 'Yellow Outline',
-    tone: 'yellow',
-    outline: true,
-  },
-};
-
-/**
- * Red outline - red border with transparent background
- */
-export const OutlineRed: Story = {
-  args: {
-    label: 'Red Outline',
-    tone: 'red',
-    outline: true,
-  },
-};
-
-/**
- * Green outline - green border with transparent background
- */
-export const OutlineGreen: Story = {
-  args: {
-    label: 'Green Outline',
-    tone: 'green',
-    outline: true,
-  },
-};
-
-/**
- * Removable with outline - all tones removable in outline mode
- */
-export const RemovableOutline: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #1a202c; border-radius: 8px;">
-      <rel-chip label="Default" tone="default" outline removable></rel-chip>
-      <rel-chip label="Blue" tone="blue" outline removable></rel-chip>
-      <rel-chip label="Yellow" tone="yellow" outline removable></rel-chip>
-      <rel-chip label="Red" tone="red" outline removable></rel-chip>
-      <rel-chip label="Green" tone="green" outline removable></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Avatar with all tones - avatar chips in each color
- */
-export const AvatarAllTones: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-      <rel-chip label="Default" tone="default" avatar="https://i.pravatar.cc/40?img=1"></rel-chip>
-      <rel-chip label="Blue" tone="blue" avatar="https://i.pravatar.cc/40?img=2"></rel-chip>
-      <rel-chip label="Yellow" tone="yellow" avatar="https://i.pravatar.cc/40?img=3"></rel-chip>
-      <rel-chip label="Red" tone="red" avatar="https://i.pravatar.cc/40?img=4"></rel-chip>
-      <rel-chip label="Green" tone="green" avatar="https://i.pravatar.cc/40?img=5"></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Avatar outline - avatar chips with outline style
- */
-export const AvatarOutline: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #1a202c; border-radius: 8px;">
-      <rel-chip label="Default" tone="default" avatar="https://i.pravatar.cc/40?img=6" outline></rel-chip>
-      <rel-chip label="Blue" tone="blue" avatar="https://i.pravatar.cc/40?img=7" outline></rel-chip>
-      <rel-chip label="Yellow" tone="yellow" avatar="https://i.pravatar.cc/40?img=8" outline></rel-chip>
-      <rel-chip label="Red" tone="red" avatar="https://i.pravatar.cc/40?img=9" outline></rel-chip>
-      <rel-chip label="Green" tone="green" avatar="https://i.pravatar.cc/40?img=10" outline></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Icon outline combinations - outline chips with icons
- */
-export const IconOutlineCombinations: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #1a202c; border-radius: 8px;">
-      <rel-chip
-        label="Star"
-        tone="blue"
-        outline
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
-      ></rel-chip>
-      <rel-chip
-        label="Success"
-        tone="green"
-        outline
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
-      ></rel-chip>
-      <rel-chip
-        label="Warning"
-        tone="yellow"
-        outline
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>'
-      ></rel-chip>
-      <rel-chip
-        label="Error"
-        tone="red"
-        outline
-        leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>'
-      ></rel-chip>
-    </div>
-  `,
-};
-
-/**
- * Tags example - realistic tag selection interface
- */
-export const TagsExample: Story = {
-  render: () => html`
-    <div style="padding: 24px; max-width: 600px;">
-      <h4 style="margin-bottom: 12px; font-size: 14px; font-weight: 600; color: #666;">Selected Tags</h4>
-      <div style="display: flex; gap: 8px; flex-wrap: wrap; padding: 16px; background: #f9f9f9; border-radius: 8px; min-height: 60px;">
-        <rel-chip label="JavaScript" tone="yellow" removable></rel-chip>
-        <rel-chip label="React" tone="blue" removable></rel-chip>
-        <rel-chip label="TypeScript" tone="blue" removable></rel-chip>
-        <rel-chip label="Node.js" tone="green" removable></rel-chip>
-        <rel-chip label="Web Components" tone="default" removable></rel-chip>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * User roles - chips representing different user roles
- */
-export const UserRoles: Story = {
-  render: () => html`
-    <div style="padding: 24px;">
-      <h4 style="margin-bottom: 12px; font-size: 14px; font-weight: 600;">Team Members</h4>
-      <div style="display: flex; flex-direction: column; gap: 16px;">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <span style="font-weight: 500; min-width: 120px;">Admin</span>
-          <rel-chip label="John Doe" tone="red" avatar="https://i.pravatar.cc/40?img=11" removable></rel-chip>
-        </div>
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <span style="font-weight: 500; min-width: 120px;">Moderators</span>
-          <rel-chip label="Jane Smith" tone="yellow" avatar="https://i.pravatar.cc/40?img=12" removable></rel-chip>
-          <rel-chip label="Bob Wilson" tone="yellow" avatar="https://i.pravatar.cc/40?img=13" removable></rel-chip>
-        </div>
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <span style="font-weight: 500; min-width: 120px;">Members</span>
-          <rel-chip label="Alice Johnson" tone="default" avatar="https://i.pravatar.cc/40?img=14" removable></rel-chip>
-          <rel-chip label="Charlie Brown" tone="default" avatar="https://i.pravatar.cc/40?img=15" removable></rel-chip>
-          <rel-chip label="Diana Prince" tone="default" avatar="https://i.pravatar.cc/40?img=16" removable></rel-chip>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Status indicators - chips as status badges
- */
-export const StatusIndicators: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; padding: 24px;">
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <span style="min-width: 120px;">Order #1234</span>
-        <rel-chip
-          label="Completed"
-          tone="green"
-          leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
-        ></rel-chip>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <span style="min-width: 120px;">Order #1235</span>
-        <rel-chip label="Pending" tone="yellow"></rel-chip>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <span style="min-width: 120px;">Order #1236</span>
-        <rel-chip label="Failed" tone="red"></rel-chip>
-      </div>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <span style="min-width: 120px;">Order #1237</span>
-        <rel-chip label="Processing" tone="blue"></rel-chip>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All variants showcase - comprehensive display of chip options
- */
-export const AllVariants: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px;">
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 18px; font-weight: 600;">Filled Variants</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-          <rel-chip label="Default" tone="default"></rel-chip>
-          <rel-chip label="Blue" tone="blue"></rel-chip>
-          <rel-chip label="Yellow" tone="yellow"></rel-chip>
-          <rel-chip label="Red" tone="red"></rel-chip>
-          <rel-chip label="Green" tone="green"></rel-chip>
-        </div>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 18px; font-weight: 600;">Outline Variants</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #1a202c; border-radius: 8px;">
-          <rel-chip label="Default" tone="default" outline></rel-chip>
-          <rel-chip label="Blue" tone="blue" outline></rel-chip>
-          <rel-chip label="Yellow" tone="yellow" outline></rel-chip>
-          <rel-chip label="Red" tone="red" outline></rel-chip>
-          <rel-chip label="Green" tone="green" outline></rel-chip>
-        </div>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 18px; font-weight: 600;">With Icons</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-          <rel-chip
-            label="Leading"
-            tone="blue"
-            leadingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
-          ></rel-chip>
-          <rel-chip
-            label="Trailing"
-            tone="green"
-            trailingIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>'
-          ></rel-chip>
-        </div>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 18px; font-weight: 600;">With Avatar</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-          <rel-chip label="User 1" avatar="https://i.pravatar.cc/40?img=1"></rel-chip>
-          <rel-chip label="User 2" tone="blue" avatar="https://i.pravatar.cc/40?img=5"></rel-chip>
-        </div>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 18px; font-weight: 600;">Removable</h3>
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 20px; background: #f5f5f5; border-radius: 8px;">
-          <rel-chip label="Remove Me" removable></rel-chip>
-          <rel-chip label="Delete" tone="red" removable></rel-chip>
-        </div>
-      </div>
-    </div>
-  `,
-};