@reliability-design/web 1.0.2

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

@@ -0,0 +1,552 @@
+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>
+  `,
+};