@reliability-design/web 1.0.2

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

@@ -0,0 +1,414 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-checkbox';
+
+/**
+ * The Checkbox component allows users to select one or more options from a set.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **3 States**: default, error, disabled
+ * - **3 Status Options**: unchecked, checked, indeterminate
+ * - **Label Support**: Required label text
+ * - **Supporting Text**: Optional helper text below label
+ * - **Custom Icons**: Check and indeterminate visual indicators
+ * - **Interactive Toggle**: Cycles through unchecked → checked → indeterminate
+ * - **Accessible**: Focus ring and keyboard support
+ */
+const meta: Meta = {
+  title: 'Components/Checkbox',
+  tags: ['autodocs'],
+  component: 'rel-checkbox',
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Checkbox label text',
+      table: {
+        defaultValue: { summary: 'Label' },
+        type: { summary: 'string' },
+      },
+    },
+    supportingtext: {
+      control: 'text',
+      description: 'Optional supporting text below label',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    state: {
+      control: { type: 'select' },
+      options: ['default', 'error', 'disabled'],
+      description: 'Checkbox state',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'string' },
+      },
+    },
+    status: {
+      control: { type: 'select' },
+      options: ['unchecked', 'checked', 'indeterminate'],
+      description: 'Checkbox status',
+      table: {
+        defaultValue: { summary: 'unchecked' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-checkbox
+      label="${args.label || 'Label'}"
+      supportingtext="${args.supportingtext || ''}"
+      state="${args.state || 'default'}"
+      status="${args.status || 'unchecked'}"
+    ></rel-checkbox>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Unchecked - default unchecked state
+ */
+export const Unchecked: Story = {
+  args: {
+    label: 'Accept terms and conditions',
+    state: 'default',
+    status: 'unchecked',
+  },
+};
+
+/**
+ * Checked - selected checkbox
+ */
+export const Checked: Story = {
+  args: {
+    label: 'Subscribe to newsletter',
+    state: 'default',
+    status: 'checked',
+  },
+};
+
+/**
+ * Indeterminate - partial selection state
+ */
+export const Indeterminate: Story = {
+  args: {
+    label: 'Select all items',
+    supportingtext: 'Some items are selected',
+    state: 'default',
+    status: 'indeterminate',
+  },
+};
+
+/**
+ * With supporting text
+ */
+export const WithSupportingText: Story = {
+  args: {
+    label: 'Enable notifications',
+    supportingtext: 'Receive updates about your account activity',
+    state: 'default',
+    status: 'unchecked',
+  },
+};
+
+/**
+ * Error state - unchecked
+ */
+export const ErrorUnchecked: Story = {
+  args: {
+    label: 'I agree to the terms',
+    supportingtext: 'You must accept the terms to continue',
+    state: 'error',
+    status: 'unchecked',
+  },
+};
+
+/**
+ * Error state - checked
+ */
+export const ErrorChecked: Story = {
+  args: {
+    label: 'Send promotional emails',
+    supportingtext: 'This option conflicts with your privacy settings',
+    state: 'error',
+    status: 'checked',
+  },
+};
+
+/**
+ * Disabled - unchecked
+ */
+export const DisabledUnchecked: Story = {
+  args: {
+    label: 'Premium features',
+    supportingtext: 'Upgrade to enable this option',
+    state: 'disabled',
+    status: 'unchecked',
+  },
+};
+
+/**
+ * Disabled - checked
+ */
+export const DisabledChecked: Story = {
+  args: {
+    label: 'Two-factor authentication',
+    supportingtext: 'Required by your organization',
+    state: 'disabled',
+    status: 'checked',
+  },
+};
+
+/**
+ * All states - showcase of all checkbox states
+ */
+export const AllStates: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #f5f5f5;">
+      <div>
+        <h3 style="margin: 0 0 12px 0; color: #000;">Default State</h3>
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <rel-checkbox label="Unchecked" state="default" status="unchecked"></rel-checkbox>
+          <rel-checkbox label="Checked" state="default" status="checked"></rel-checkbox>
+          <rel-checkbox label="Indeterminate" state="default" status="indeterminate"></rel-checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 style="margin: 0 0 12px 0; color: #000;">Error State</h3>
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <rel-checkbox label="Unchecked" state="error" status="unchecked" supportingtext="Error message"></rel-checkbox>
+          <rel-checkbox label="Checked" state="error" status="checked" supportingtext="Error message"></rel-checkbox>
+          <rel-checkbox label="Indeterminate" state="error" status="indeterminate" supportingtext="Error message"></rel-checkbox>
+        </div>
+      </div>
+
+      <div>
+        <h3 style="margin: 0 0 12px 0; color: #000;">Disabled State</h3>
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <rel-checkbox label="Unchecked" state="disabled" status="unchecked"></rel-checkbox>
+          <rel-checkbox label="Checked" state="disabled" status="checked"></rel-checkbox>
+          <rel-checkbox label="Indeterminate" state="disabled" status="indeterminate"></rel-checkbox>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Settings form - checkboxes in settings context
+ */
+export const SettingsForm: Story = {
+  render: () => html`
+    <div style="max-width: 600px; padding: 24px; background: #fff; border-radius: 8px;">
+      <h2 style="margin: 0 0 16px 0; color: #000;">Notification Settings</h2>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <rel-checkbox
+          label="Email notifications"
+          supportingtext="Receive updates and alerts via email"
+          status="checked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="Push notifications"
+          supportingtext="Get instant notifications on your device"
+          status="checked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="SMS notifications"
+          supportingtext="Receive text messages for important updates"
+          status="unchecked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="Marketing emails"
+          supportingtext="Get tips, offers, and product updates"
+          status="unchecked"
+        ></rel-checkbox>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Agreement form - terms acceptance
+ */
+export const AgreementForm: Story = {
+  render: () => html`
+    <div style="max-width: 600px; padding: 24px; background: #fff; border-radius: 8px;">
+      <h2 style="margin: 0 0 16px 0; color: #000;">Create Account</h2>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <rel-checkbox
+          label="I accept the Terms of Service"
+          supportingtext="Required to create an account"
+          state="error"
+          status="unchecked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="I accept the Privacy Policy"
+          supportingtext="Required to create an account"
+          state="error"
+          status="unchecked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="Subscribe to our newsletter"
+          supportingtext="Optional - Get updates about new features"
+          status="unchecked"
+        ></rel-checkbox>
+      </div>
+      <button style="margin-top: 24px; width: 100%; background: #ddd; border: none; color: #999; padding: 12px; border-radius: 8px; cursor: not-allowed; font-weight: 600;">
+        Create Account
+      </button>
+    </div>
+  `,
+};
+
+/**
+ * Select all - indeterminate state usage
+ */
+export const SelectAllExample: Story = {
+  render: () => html`
+    <div style="max-width: 600px; padding: 24px; background: #fff; border-radius: 8px;">
+      <h2 style="margin: 0 0 16px 0; color: #000;">Manage Files</h2>
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <rel-checkbox
+          label="Select all"
+          status="indeterminate"
+          style="border-bottom: 1px solid #ddd; padding-bottom: 12px;"
+        ></rel-checkbox>
+
+        <div style="padding-left: 24px; display: flex; flex-direction: column; gap: 12px;">
+          <rel-checkbox label="document.pdf" status="checked"></rel-checkbox>
+          <rel-checkbox label="presentation.pptx" status="checked"></rel-checkbox>
+          <rel-checkbox label="spreadsheet.xlsx" status="unchecked"></rel-checkbox>
+          <rel-checkbox label="image.jpg" status="unchecked"></rel-checkbox>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Preferences panel
+ */
+export const PreferencesPanel: Story = {
+  render: () => html`
+    <div style="max-width: 600px; padding: 24px; background: #fff; border-radius: 8px;">
+      <h2 style="margin: 0 0 8px 0; color: #000;">Display Preferences</h2>
+      <p style="margin: 0 0 24px 0; color: #666; font-size: 14px;">
+        Customize how you view content
+      </p>
+
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <div>
+          <h3 style="margin: 0 0 12px 0; font-size: 16px; color: #000;">Layout</h3>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <rel-checkbox label="Show sidebar" status="checked"></rel-checkbox>
+            <rel-checkbox label="Compact mode" status="unchecked"></rel-checkbox>
+            <rel-checkbox label="Show thumbnails" status="checked"></rel-checkbox>
+          </div>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 12px 0; font-size: 16px; color: #000;">Content</h3>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <rel-checkbox label="Auto-play videos" status="unchecked"></rel-checkbox>
+            <rel-checkbox label="Show captions" status="checked"></rel-checkbox>
+            <rel-checkbox label="High quality images" status="checked"></rel-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Features list - disabled options
+ */
+export const FeaturesList: Story = {
+  render: () => html`
+    <div style="max-width: 600px; padding: 24px; background: #fff; border-radius: 8px;">
+      <h2 style="margin: 0 0 8px 0; color: #000;">Your Plan Features</h2>
+      <p style="margin: 0 0 24px 0; color: #666; font-size: 14px;">
+        Free Plan - Upgrade to unlock more features
+      </p>
+
+      <div style="display: flex; flex-direction: column; gap: 12px;">
+        <rel-checkbox
+          label="Basic dashboard"
+          supportingtext="View your stats and analytics"
+          state="disabled"
+          status="checked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="5 projects"
+          supportingtext="Manage up to 5 projects"
+          state="disabled"
+          status="checked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="Unlimited projects"
+          supportingtext="Upgrade to Pro for unlimited projects"
+          state="disabled"
+          status="unchecked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="Advanced analytics"
+          supportingtext="Upgrade to Pro for detailed insights"
+          state="disabled"
+          status="unchecked"
+        ></rel-checkbox>
+
+        <rel-checkbox
+          label="Priority support"
+          supportingtext="Upgrade to Pro for 24/7 support"
+          state="disabled"
+          status="unchecked"
+        ></rel-checkbox>
+      </div>
+
+      <button style="margin-top: 24px; width: 100%; background: #00F49C; border: none; color: #000; padding: 12px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+        Upgrade to Pro
+      </button>
+    </div>
+  `,
+};
+
+/**
+ * Permission settings
+ */
+export const PermissionSettings: Story = {
+  render: () => html`
+    <div style="max-width: 600px; padding: 24px; background: #fff; border-radius: 8px;">
+      <h2 style="margin: 0 0 16px 0; color: #000;">User Permissions</h2>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <div>
+          <h3 style="margin: 0 0 12px 0; font-size: 16px; color: #000;">Content</h3>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <rel-checkbox label="Can view content" state="disabled" status="checked"></rel-checkbox>
+            <rel-checkbox label="Can create content" status="checked"></rel-checkbox>
+            <rel-checkbox label="Can edit content" status="checked"></rel-checkbox>
+            <rel-checkbox label="Can delete content" status="unchecked"></rel-checkbox>
+          </div>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 12px 0; font-size: 16px; color: #000;">Users</h3>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <rel-checkbox label="Can view users" status="checked"></rel-checkbox>
+            <rel-checkbox label="Can invite users" status="unchecked"></rel-checkbox>
+            <rel-checkbox label="Can manage users" status="unchecked"></rel-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,164 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type CheckboxState = "default" | "error" | "disabled";
+type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
+
+@customElement("rel-checkbox")
+export class RelCheckbox extends LitElement {
+  @property({ type: String }) label = "Label";
+  @property({ type: String }) supportingtext = "";
+  @property({ type: String }) state: CheckboxState = "default";
+  @property({ type: String }) status: CheckboxStatus = "unchecked";
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .box {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 2px solid var(--rel-colors-gray-heading);
+      background: var(--rel-colors-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+    }
+
+    /* ICONS FIXED SIZE */
+    svg {
+      width: 12px;
+      height: 12px;
+      display: none;
+      pointer-events: none;
+    }
+
+    /* CHECKED */
+    .checked .box {
+      background: var(--rel-colors-gray-heading);
+      border-color: var(--rel-colors-gray-heading);
+    }
+    .checked .check-icon {
+      display: block;
+    }
+
+    /* INDETERMINATE */
+    .indeterminate .box {
+      background: var(--rel-colors-gray-heading);
+      border-color: var(--rel-colors-gray-heading);
+    }
+    .indeterminate .indeterminate-icon {
+      display: block;
+    }
+
+    /* ERROR */
+    .error .box {
+      border-color: var(--rel-colors-red-primary);
+    }
+    .error.checked .box,
+    .error.indeterminate .box {
+      background: var(--rel-colors-red-primary);
+      border-color: var(--rel-colors-red-primary);
+    }
+    .error .label,
+    .error .text {
+      color: var(--rel-colors-red-primary);
+    }
+
+    /* DISABLED */
+    .disabled {
+      opacity: 0.55;
+      cursor: not-allowed !important;
+    }
+
+    .label {
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-colors-gray-heading);
+      font-weight: var(--rel-fontWeights-medium);
+    }
+
+    .text {
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-text);
+    }
+
+    /* Focus ring */
+    input:focus-visible + .box {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+  `;
+
+  private toggle() {
+    if (this.state === "disabled") return;
+
+    if (this.status === "unchecked") this.status = "checked";
+    else if (this.status === "checked") this.status = "indeterminate";
+    else this.status = "unchecked";
+
+    this.dispatchEvent(new CustomEvent("changed", { detail: this.status }));
+  }
+
+  render() {
+    const className = `
+      wrapper
+      ${this.state}
+      ${this.status}
+    `;
+
+    return html`
+      <div class="${className}">
+        <label class="row">
+          <input
+            type="checkbox"
+            @change=${this.toggle}
+            ?disabled=${this.state === "disabled"}
+          />
+
+          <span class="box">
+            <!-- CHECK ICON -->
+            <svg class="check-icon" viewBox="0 0 18 14" fill="white">
+              <path
+                d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+              />
+            </svg>
+
+            <!-- INDETERMINATE ICON -->
+            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="white">
+              <rect width="16" height="2" />
+            </svg>
+          </span>
+
+          <span class="label">${this.label}</span>
+        </label>
+
+        ${this.supportingtext
+          ? html`<span class="text">${this.supportingtext}</span>`
+          : null}
+      </div>
+    `;
+  }
+}