@reliability-design/web 1.0.2

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

@@ -0,0 +1,313 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-accordion';
+
+/**
+ * The Accordion component allows users to toggle the visibility of content sections.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **Expandable Sections**: Click to expand/collapse content
+ * - **Smooth Animation**: Fade-in effect when expanding
+ * - **Chevron Indicator**: Rotating chevron shows state
+ * - **Customizable Title**: Set accordion header text
+ * - **Slotted Content**: Any content can be placed inside
+ * - **Open State**: Can be initialized as open or closed
+ */
+const meta: Meta = {
+  title: 'Components/Accordion',
+  tags: ['autodocs'],
+  component: 'rel-accordion',
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Accordion header title',
+      table: {
+        defaultValue: { summary: 'Accordion' },
+        type: { summary: 'string' },
+      },
+    },
+    open: {
+      control: 'boolean',
+      description: 'Initial open state',
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-accordion
+      title="${args.title || 'Accordion'}"
+      ?open="${args.open}"
+    >
+      ${args.content || 'Accordion content goes here. This section can contain any type of content including text, images, or other components.'}
+    </rel-accordion>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default accordion - closed by default
+ */
+export const Default: Story = {
+  args: {
+    title: 'What is Reliability Design System?',
+    content: 'Reliability is a modern design system built with web components. It provides a comprehensive set of UI components that work across all JavaScript frameworks.',
+    open: false,
+  },
+};
+
+/**
+ * Open accordion - initially expanded
+ */
+export const Open: Story = {
+  args: {
+    title: 'Frequently Asked Questions',
+    content: 'This accordion starts in an open state, showing its content immediately. Users can click to collapse it.',
+    open: true,
+  },
+};
+
+/**
+ * Simple text content
+ */
+export const SimpleText: Story = {
+  args: {
+    title: 'Shipping Information',
+    content: 'We offer free shipping on all orders over $50. Standard delivery takes 3-5 business days.',
+  },
+};
+
+/**
+ * Long content - accordion with extensive text
+ */
+export const LongContent: Story = {
+  args: {
+    title: 'Privacy Policy',
+    content: `We take your privacy seriously. This privacy policy explains how we collect, use, and protect your personal information.
+
+Data Collection: We collect information you provide directly to us, such as when you create an account, make a purchase, or contact customer support.
+
+Data Usage: We use your information to process transactions, improve our services, and communicate with you about your account.
+
+Data Protection: We implement industry-standard security measures to protect your personal information from unauthorized access or disclosure.`,
+  },
+};
+
+/**
+ * Multiple accordions - FAQ section
+ */
+export const FAQSection: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
+      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Frequently Asked Questions</h2>
+
+      <rel-accordion title="What payment methods do you accept?">
+        We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay.
+      </rel-accordion>
+
+      <rel-accordion title="How long does shipping take?">
+        Standard shipping takes 3-5 business days. Express shipping is available for 1-2 day delivery.
+      </rel-accordion>
+
+      <rel-accordion title="What is your return policy?">
+        We offer a 30-day money-back guarantee. Items must be returned in original condition with all tags attached.
+      </rel-accordion>
+
+      <rel-accordion title="Do you ship internationally?">
+        Yes, we ship to over 100 countries worldwide. Shipping costs and delivery times vary by location.
+      </rel-accordion>
+    </div>
+  `,
+};
+
+/**
+ * Product details - accordion for product information
+ */
+export const ProductDetails: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
+      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Product Information</h2>
+
+      <rel-accordion title="Description" open>
+        Premium wireless headphones with active noise cancellation, 30-hour battery life, and exceptional sound quality. Perfect for music lovers and frequent travelers.
+      </rel-accordion>
+
+      <rel-accordion title="Specifications">
+        <ul style="margin: 0; padding-left: 20px;">
+          <li>Driver Size: 40mm</li>
+          <li>Frequency Response: 20Hz - 20kHz</li>
+          <li>Impedance: 32 Ω</li>
+          <li>Battery Life: 30 hours</li>
+          <li>Charging Time: 2 hours</li>
+          <li>Weight: 250g</li>
+        </ul>
+      </rel-accordion>
+
+      <rel-accordion title="What's in the Box">
+        <ul style="margin: 0; padding-left: 20px;">
+          <li>Wireless Headphones</li>
+          <li>USB-C Charging Cable</li>
+          <li>3.5mm Audio Cable</li>
+          <li>Carrying Case</li>
+          <li>User Manual</li>
+        </ul>
+      </rel-accordion>
+    </div>
+  `,
+};
+
+/**
+ * Documentation sections
+ */
+export const DocumentationSections: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
+      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Component Documentation</h2>
+
+      <rel-accordion title="Installation" open>
+        Install the component via npm:
+        <pre style="background: #1A1A1A; padding: 12px; border-radius: 8px; margin-top: 12px;">
+npm install @reliability/components
+        </pre>
+      </rel-accordion>
+
+      <rel-accordion title="Usage">
+        Import and use the accordion component in your application:
+        <pre style="background: #1A1A1A; padding: 12px; border-radius: 8px; margin-top: 12px;">
+import '@reliability/components/accordion';
+
+&lt;rel-accordion title="My Title"&gt;
+  Content here
+&lt;/rel-accordion&gt;
+        </pre>
+      </rel-accordion>
+
+      <rel-accordion title="Properties">
+        <ul style="margin: 0; padding-left: 20px;">
+          <li><strong>title</strong>: string - Accordion header text</li>
+          <li><strong>open</strong>: boolean - Initial open/closed state</li>
+        </ul>
+      </rel-accordion>
+    </div>
+  `,
+};
+
+/**
+ * Settings panels
+ */
+export const SettingsPanels: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
+      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Account Settings</h2>
+
+      <rel-accordion title="Profile Settings">
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <div>
+            <label style="display: block; margin-bottom: 4px; color: #fff; font-size: 14px;">Display Name</label>
+            <input type="text" value="John Doe" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #2A2A2A; background: #1A1A1A; color: #fff;">
+          </div>
+          <div>
+            <label style="display: block; margin-bottom: 4px; color: #fff; font-size: 14px;">Email</label>
+            <input type="email" value="john@example.com" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #2A2A2A; background: #1A1A1A; color: #fff;">
+          </div>
+        </div>
+      </rel-accordion>
+
+      <rel-accordion title="Privacy Settings">
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
+            <input type="checkbox" checked>
+            Make profile public
+          </label>
+          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
+            <input type="checkbox" checked>
+            Allow email notifications
+          </label>
+          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
+            <input type="checkbox">
+            Share analytics data
+          </label>
+        </div>
+      </rel-accordion>
+
+      <rel-accordion title="Notification Preferences">
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
+            <input type="checkbox" checked>
+            Email notifications
+          </label>
+          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
+            <input type="checkbox" checked>
+            Push notifications
+          </label>
+          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
+            <input type="checkbox">
+            SMS notifications
+          </label>
+        </div>
+      </rel-accordion>
+    </div>
+  `,
+};
+
+/**
+ * Rich content - accordion with various content types
+ */
+export const RichContent: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
+      <rel-accordion title="Image Gallery" open>
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px;">
+          <div style="aspect-ratio: 1; background: #2A2A2A; border-radius: 8px;"></div>
+          <div style="aspect-ratio: 1; background: #2A2A2A; border-radius: 8px;"></div>
+          <div style="aspect-ratio: 1; background: #2A2A2A; border-radius: 8px;"></div>
+        </div>
+      </rel-accordion>
+
+      <rel-accordion title="Video Tutorial">
+        <div style="aspect-ratio: 16/9; background: #2A2A2A; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; margin-top: 12px;">
+          Video Player Placeholder
+        </div>
+      </rel-accordion>
+
+      <rel-accordion title="Code Example">
+        <pre style="background: #1A1A1A; padding: 16px; border-radius: 8px; margin-top: 12px; overflow-x: auto;">
+function greet(name) {
+  return \`Hello, \${name}!\`;
+}
+
+console.log(greet('World'));
+        </pre>
+      </rel-accordion>
+    </div>
+  `,
+};
+
+/**
+ * All states - various accordion configurations
+ */
+export const AllStates: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
+      <rel-accordion title="Closed Accordion (Default)">
+        This accordion is closed by default. Click to expand.
+      </rel-accordion>
+
+      <rel-accordion title="Open Accordion" open>
+        This accordion is open by default. Click to collapse.
+      </rel-accordion>
+
+      <rel-accordion title="Short Content">
+        Brief content.
+      </rel-accordion>
+
+      <rel-accordion title="Long Title: This is an Example of a Very Long Accordion Title That Might Wrap">
+        Content for accordion with long title.
+      </rel-accordion>
+    </div>
+  `,
+};

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

@@ -0,0 +1,114 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("rel-accordion")
+export class RelAccordion extends LitElement {
+  @property({ type: String }) title = "Accordion";
+  @property({ type: Boolean }) open = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .accordion {
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200); /* 8px */
+      box-shadow: var(--rel-shadows-shadow-100);
+      transition: all 0.2s ease;
+      overflow: hidden;
+    }
+
+    /* HEADER --------------------------------------------------- */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--rel-spacing-space-md); /* 16px */
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .title {
+      font-size: var(--rel-fontSizes-lg); /* 20px */
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-black);
+    }
+
+    /* ICON ----------------------------------------------------- */
+    .icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.25s ease;
+    }
+
+    .icon svg {
+      width: 20px;
+      height: 20px;
+      stroke: var(--rel-colors-gray-primary);
+      stroke-width: 2;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .rotated {
+      transform: rotate(180deg);
+    }
+
+    /* BODY ------------------------------------------------------ */
+    .body {
+      padding: var(--rel-spacing-space-xl) var(--rel-spacing-space-md)
+        var(--rel-spacing-space-lg);
+      /* 24px 16px 20px */
+      font-size: var(--rel-fontSizes-lg); /* 20px */
+      color: var(--rel-colors-gray-primary);
+      animation: fadeIn 0.2s ease;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `;
+
+  private toggle() {
+    this.open = !this.open;
+  }
+
+  private chevron() {
+    return html`
+      <svg viewBox="0 0 24 24">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="accordion">
+        <div class="header" @click=${this.toggle}>
+          <div class="title">${this.title}</div>
+
+          <div class="icon ${this.open ? "rotated" : ""}">
+            ${this.chevron()}
+          </div>
+        </div>
+
+        ${this.open ? html`<div class="body"><slot></slot></div>` : ""}
+      </div>
+    `;
+  }
+}