@reliability-design/web 1.0.2 → 1.0.6

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

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