@reliability-design/web 1.0.2

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

@@ -0,0 +1,356 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-button';
+
+/**
+ * The Button component is a versatile interactive element that supports multiple variants,
+ * tones, sizes, and border styles. Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **6 Variants**: default, primary, secondary, text, link, icon
+ * - **3 Tones**: default, critical, success
+ * - **3 Sizes**: small (32px), medium (40px), large (48px)
+ * - **3 Border Styles**: corner-radius (pill), small-corner-radius, no-corner-radius
+ * - **Disabled State**: Full accessibility support
+ * - **Keyboard Navigation**: Focus ring and keyboard interactions
+ */
+const meta: Meta = {
+  title: 'Components/Button',
+  tags: ['autodocs'],
+  component: 'rel-button',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'primary', 'secondary', 'text', 'link', 'icon'],
+      description: 'Visual style variant',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+    tone: {
+      control: { type: 'select' },
+      options: ['default', 'critical', 'success'],
+      description: 'Semantic tone for user feedback',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      description: 'Button size',
+      table: {
+        defaultValue: { summary: 'medium' },
+        type: { summary: 'string' },
+      },
+    },
+    border: {
+      control: { type: 'select' },
+      options: ['corner-radius', 'small-corner-radius', 'no-corner-radius'],
+      description: 'Border radius style',
+      table: {
+        defaultValue: { summary: 'corner-radius' },
+        type: { summary: 'string' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-button
+      variant="${args.variant || 'default'}"
+      tone="${args.tone || 'default'}"
+      size="${args.size || 'medium'}"
+      border="${args.border || 'corner-radius'}"
+      ?disabled="${args.disabled}"
+    >
+      ${args.label || 'Button'}
+    </rel-button>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default button with gray background - standard action button
+ */
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    tone: 'default',
+    size: 'medium',
+    label: 'Default Button',
+  },
+};
+
+/**
+ * Primary button with neon green background - main call-to-action
+ */
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    tone: 'default',
+    size: 'medium',
+    label: 'Primary Button',
+  },
+};
+
+/**
+ * Secondary button with white background and border - alternative action
+ */
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    size: 'medium',
+    label: 'Secondary Button',
+  },
+};
+
+/**
+ * Text button with transparent background - subtle action
+ */
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    size: 'medium',
+    label: 'Text Button',
+  },
+};
+
+/**
+ * Link button with underlined text - navigation action
+ */
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    size: 'medium',
+    label: 'Link Button',
+  },
+};
+
+/**
+ * Icon button with circular shape - icon-only action
+ */
+export const Icon: Story = {
+  args: {
+    variant: 'icon',
+    label: '✓',
+  },
+};
+
+/**
+ * Critical tone - used for destructive or warning actions
+ */
+export const Critical: Story = {
+  args: {
+    variant: 'primary',
+    tone: 'critical',
+    size: 'medium',
+    label: 'Delete Account',
+  },
+};
+
+/**
+ * Success tone - used for positive confirmation actions
+ */
+export const Success: Story = {
+  args: {
+    variant: 'primary',
+    tone: 'success',
+    size: 'medium',
+    label: 'Confirm Payment',
+  },
+};
+
+/**
+ * Small size - compact button for tight layouts
+ */
+export const Small: Story = {
+  args: {
+    variant: 'primary',
+    size: 'small',
+    label: 'Small Button',
+  },
+};
+
+/**
+ * Large size - prominent button for important actions
+ */
+export const Large: Story = {
+  args: {
+    variant: 'primary',
+    size: 'large',
+    label: 'Large Button',
+  },
+};
+
+/**
+ * Disabled state - non-interactive button
+ */
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    label: 'Disabled Button',
+    disabled: true,
+  },
+};
+
+/**
+ * Small corner radius - subtle rounded corners
+ */
+export const SmallRadius: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    border: 'small-corner-radius',
+    label: 'Small Radius',
+  },
+};
+
+/**
+ * No corner radius - sharp rectangular edges
+ */
+export const NoRadius: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    border: 'no-corner-radius',
+    label: 'No Radius',
+  },
+};
+
+/**
+ * All variants showcase - displays all button variants together
+ */
+export const AllVariants: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
+      <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
+        <rel-button variant="default">Default</rel-button>
+        <rel-button variant="primary">Primary</rel-button>
+        <rel-button variant="secondary">Secondary</rel-button>
+        <rel-button variant="text">Text</rel-button>
+        <rel-button variant="link">Link</rel-button>
+        <rel-button variant="icon">✓</rel-button>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * All sizes showcase - displays all button sizes together
+ */
+export const AllSizes: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
+      <rel-button variant="primary" size="small">Small (32px)</rel-button>
+      <rel-button variant="primary" size="medium">Medium (40px)</rel-button>
+      <rel-button variant="primary" size="large">Large (48px)</rel-button>
+    </div>
+  `,
+};
+
+/**
+ * All tones showcase - displays all semantic tones
+ */
+export const AllTones: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
+      <rel-button variant="primary" tone="default">Default</rel-button>
+      <rel-button variant="primary" tone="critical">Critical</rel-button>
+      <rel-button variant="primary" tone="success">Success</rel-button>
+    </div>
+  `,
+};
+
+/**
+ * Border radius showcase - displays all border radius options
+ */
+export const AllBorderStyles: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
+      <rel-button variant="primary" border="corner-radius">Pill Shape</rel-button>
+      <rel-button variant="primary" border="small-corner-radius">Small Radius</rel-button>
+      <rel-button variant="primary" border="no-corner-radius">No Radius</rel-button>
+    </div>
+  `,
+};
+
+/**
+ * Disabled states across variants
+ */
+export const DisabledStates: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
+      <rel-button variant="default" disabled>Default</rel-button>
+      <rel-button variant="primary" disabled>Primary</rel-button>
+      <rel-button variant="secondary" disabled>Secondary</rel-button>
+      <rel-button variant="text" disabled>Text</rel-button>
+    </div>
+  `,
+};
+
+/**
+ * Text button with critical tone - destructive text action
+ */
+export const TextCritical: Story = {
+  args: {
+    variant: 'text',
+    tone: 'critical',
+    label: 'Delete',
+  },
+};
+
+/**
+ * Text button with success tone - positive text action
+ */
+export const TextSuccess: Story = {
+  args: {
+    variant: 'text',
+    tone: 'success',
+    label: 'Approve',
+  },
+};
+
+/**
+ * Link button with critical tone - destructive link action
+ */
+export const LinkCritical: Story = {
+  args: {
+    variant: 'link',
+    tone: 'critical',
+    label: 'Remove Account',
+  },
+};
+
+/**
+ * Icon button with critical tone - destructive icon action
+ */
+export const IconCritical: Story = {
+  args: {
+    variant: 'icon',
+    tone: 'critical',
+    label: '✕',
+  },
+};
+
+/**
+ * Icon button with success tone - positive icon action
+ */
+export const IconSuccess: Story = {
+  args: {
+    variant: 'icon',
+    tone: 'success',
+    label: '✓',
+  },
+};

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

@@ -0,0 +1,204 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-button")
+export class RelButton extends LitElement {
+  @property({ type: String }) variant:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "text"
+    | "link"
+    | "icon" = "default";
+
+  @property({ type: String }) tone: "default" | "critical" | "success" =
+    "default";
+
+  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
+
+  @property({ type: String }) border:
+    | "corner-radius"
+    | "small-corner-radius"
+    | "no-corner-radius" = "corner-radius";
+
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      font-family: var(--rel-fontFamilies-primary);
+      font-weight: var(--rel-fontWeights-semibold);
+      cursor: pointer;
+      border: none;
+      transition: all 0.15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--rel-spacing-space-2xs);
+      outline: none;
+    }
+
+    /* -------------------------
+        SIZES (Figma)
+    -------------------------- */
+    .size-small {
+      height: 32px;
+      padding: 0 var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-sm);
+    }
+
+    .size-medium {
+      height: 40px;
+      padding: 0 var(--rel-spacing-space-lg);
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    .size-large {
+      height: 48px;
+      padding: 0 var(--rel-spacing-space-xl);
+      font-size: var(--rel-fontSizes-lg);
+    }
+
+    /* -------------------------
+        BORDER RADII (Tokens)
+    -------------------------- */
+    .border-corner-radius {
+      border-radius: var(--rel-borders-radius-border-radius-500);
+    }
+
+    .border-small-corner-radius {
+      border-radius: var(--rel-borders-radius-border-radius-200);
+    }
+
+    .border-no-corner-radius {
+      border-radius: var(--rel-borders-radius-border-radius-0);
+    }
+
+    /* -------------------------
+        DISABLED STATE
+    -------------------------- */
+    :host([disabled]) button,
+    button:disabled {
+      cursor: not-allowed;
+      background-color: var(--rel-colors-gray-border) !important;
+      color: var(--rel-colors-gray-disabled-text) !important;
+      border-color: var(--rel-colors-gray-border) !important;
+      opacity: 1;
+      pointer-events: none;
+    }
+
+    /* -------------------------
+        VARIANTS & TONES
+    -------------------------- */
+
+    /* DEFAULT */
+    .btn-default.tone-default {
+      background: var(--rel-colors-gray-primary);
+      color: var(--rel-colors-white);
+    }
+    .btn-default.tone-critical {
+      background: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+    }
+    .btn-default.tone-success {
+      background: var(--rel-colors-green-success);
+      color: var(--rel-colors-white);
+    }
+
+    /* PRIMARY */
+    .btn-primary.tone-default {
+      background: var(--rel-colors-green-primary);
+      color: var(--rel-colors-black);
+    }
+    .btn-primary.tone-critical {
+      background: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+    }
+    .btn-primary.tone-success {
+      background: var(--rel-colors-green-success);
+      color: var(--rel-colors-white);
+    }
+
+    /* SECONDARY */
+    .btn-secondary {
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-colors-black);
+      color: var(--rel-colors-black);
+    }
+
+    /* TEXT */
+    .btn-text {
+      background: transparent;
+      color: var(--rel-colors-black);
+    }
+
+    /* LINK */
+    .btn-link {
+      background: transparent;
+      color: var(--rel-colors-blue-primary);
+      text-decoration: underline;
+    }
+
+    /* ICON */
+    .btn-icon {
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border-radius: 50%;
+      background: var(--rel-colors-gray-light);
+      color: var(--rel-colors-black);
+    }
+
+    /* -------------------------
+        STATES: Hover / Active
+    -------------------------- */
+    button:hover:not(.btn-disabled) {
+      filter: brightness(0.92);
+    }
+
+    button:active:not(.btn-disabled) {
+      transform: scale(0.97);
+    }
+
+    /* TEXT BUTTON — hover border */
+    .btn-text:not(.btn-disabled):hover {
+      border: 1px solid var(--rel-colors-black);
+      text-decoration: none;
+    }
+
+    /* LINK BUTTON — hover border */
+    .btn-link:not(.btn-disabled):hover {
+      border: 1px solid var(--rel-colors-blue-primary);
+      text-decoration: underline;
+    }
+
+    /* -------------------------
+        FOCUS RING
+    -------------------------- */
+    button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+  `;
+
+  private get classes() {
+    return [
+      `btn-${this.variant}`,
+      `tone-${this.tone}`,
+      `size-${this.size}`,
+      `border-${this.border}`,
+      this.disabled ? "btn-disabled" : "",
+    ].join(" ");
+  }
+
+  render() {
+    return html`
+      <button class="${this.classes}" ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+}