@reliability-design/web 1.0.2

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

@@ -0,0 +1,229 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-divider';
+
+/**
+ * The Divider component is a simple visual separator for content sections.
+ * Built with Lit web components for framework-agnostic usage with full token support.
+ *
+ * ## Features
+ * - **2 Orientations**: horizontal (default), vertical
+ * - **Token-Based Styling**: Uses design system tokens for colors and spacing
+ * - **ARIA Support**: Includes proper role="separator" for accessibility
+ * - **Flexible Layout**: Adapts to parent container
+ */
+const meta: Meta = {
+  title: 'Components/Divider',
+  tags: ['autodocs'],
+  component: 'rel-divider',
+  argTypes: {
+    orientation: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+      description: 'Divider orientation',
+      table: {
+        defaultValue: { summary: 'horizontal' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-divider orientation="${args.orientation || 'horizontal'}"></rel-divider>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default horizontal divider
+ */
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+/**
+ * Horizontal divider - separates content vertically
+ */
+export const Horizontal: Story = {
+  render: () => html`
+    <div style="padding: 24px; background: #f5f5f5;">
+      <p style="margin: 0 0 16px; color: #333;">Section 1: This is some content above the divider.</p>
+      <rel-divider orientation="horizontal"></rel-divider>
+      <p style="margin: 16px 0 0; color: #333;">Section 2: This is some content below the divider.</p>
+    </div>
+  `,
+};
+
+/**
+ * Vertical divider - separates content horizontally
+ */
+export const Vertical: Story = {
+  render: () => html`
+    <div style="display: flex; align-items: center; padding: 24px; background: #f5f5f5; height: 100px;">
+      <div style="flex: 1; color: #333; text-align: center;">
+        <strong>Left Section</strong>
+        <p style="margin: 8px 0 0; font-size: 14px;">Content on the left</p>
+      </div>
+      <rel-divider orientation="vertical"></rel-divider>
+      <div style="flex: 1; color: #333; text-align: center;">
+        <strong>Right Section</strong>
+        <p style="margin: 8px 0 0; font-size: 14px;">Content on the right</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Multiple horizontal dividers
+ */
+export const MultipleHorizontal: Story = {
+  render: () => html`
+    <div style="padding: 24px; background: #f5f5f5;">
+      <div style="color: #333;">
+        <h3 style="margin: 0 0 8px;">Section 1</h3>
+        <p style="margin: 0;">First section content with important information.</p>
+      </div>
+
+      <rel-divider orientation="horizontal"></rel-divider>
+
+      <div style="color: #333;">
+        <h3 style="margin: 0 0 8px;">Section 2</h3>
+        <p style="margin: 0;">Second section with different content.</p>
+      </div>
+
+      <rel-divider orientation="horizontal"></rel-divider>
+
+      <div style="color: #333;">
+        <h3 style="margin: 0 0 8px;">Section 3</h3>
+        <p style="margin: 0;">Third section completing the layout.</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Multiple vertical dividers
+ */
+export const MultipleVertical: Story = {
+  render: () => html`
+    <div style="display: flex; align-items: stretch; padding: 24px; background: #f5f5f5; height: 120px;">
+      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #333;">
+        <strong>Column 1</strong>
+        <p style="margin: 8px 0 0; font-size: 13px;">First</p>
+      </div>
+
+      <rel-divider orientation="vertical"></rel-divider>
+
+      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #333;">
+        <strong>Column 2</strong>
+        <p style="margin: 8px 0 0; font-size: 13px;">Second</p>
+      </div>
+
+      <rel-divider orientation="vertical"></rel-divider>
+
+      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #333;">
+        <strong>Column 3</strong>
+        <p style="margin: 8px 0 0; font-size: 13px;">Third</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * In a card layout
+ */
+export const InCardLayout: Story = {
+  render: () => html`
+    <div style="max-width: 500px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 24px;">
+      <h2 style="margin: 0 0 8px; color: #333; font-size: 20px;">User Profile</h2>
+      <p style="margin: 0; color: #666; font-size: 14px;">Personal information</p>
+
+      <rel-divider orientation="horizontal"></rel-divider>
+
+      <div style="color: #333;">
+        <div style="margin-bottom: 12px;">
+          <strong>Name:</strong> John Doe
+        </div>
+        <div style="margin-bottom: 12px;">
+          <strong>Email:</strong> john.doe@example.com
+        </div>
+        <div>
+          <strong>Role:</strong> Developer
+        </div>
+      </div>
+
+      <rel-divider orientation="horizontal"></rel-divider>
+
+      <div style="display: flex; gap: 12px;">
+        <button style="flex: 1; padding: 10px; background: #0059F4; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
+          Edit Profile
+        </button>
+        <button style="flex: 1; padding: 10px; background: #f5f5f5; color: #333; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
+          Cancel
+        </button>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * In a navigation layout
+ */
+export const InNavigation: Story = {
+  render: () => html`
+    <div style="display: flex; align-items: center; padding: 16px 24px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+      <div style="font-weight: 700; font-size: 18px; color: #333; margin-right: 24px;">
+        Logo
+      </div>
+
+      <rel-divider orientation="vertical" style="height: 30px;"></rel-divider>
+
+      <nav style="display: flex; align-items: center; gap: 24px; margin-left: 24px; flex: 1;">
+        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Home</a>
+        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Products</a>
+        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">About</a>
+        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Contact</a>
+      </nav>
+
+      <rel-divider orientation="vertical" style="height: 30px;"></rel-divider>
+
+      <button style="margin-left: 24px; padding: 8px 16px; background: #0059F4; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
+        Sign In
+      </button>
+    </div>
+  `,
+};
+
+/**
+ * All orientations showcase
+ */
+export const AllOrientations: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px;">
+      <div>
+        <h3 style="margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #333;">Horizontal Divider</h3>
+        <div style="background: #f5f5f5; padding: 20px;">
+          <p style="margin: 0; color: #333;">Content above</p>
+          <rel-divider orientation="horizontal"></rel-divider>
+          <p style="margin: 0; color: #333;">Content below</p>
+        </div>
+      </div>
+
+      <div>
+        <h3 style="margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #333;">Vertical Divider</h3>
+        <div style="display: flex; background: #f5f5f5; padding: 20px; height: 80px;">
+          <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #333;">
+            Left
+          </div>
+          <rel-divider orientation="vertical"></rel-divider>
+          <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #333;">
+            Right
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-divider")
+export class RelDivider extends LitElement {
+  @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .rel-divider {
+      position: relative;
+      display: flex;
+      background: transparent;
+      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-colors-gray-primary);
+    }
+
+    /* Horizontal */
+    .rel-divider.horizontal {
+      width: 100%;
+      height: var(--rel-borders-width-stroke-100);
+      background-color: var(--rel-colors-gray-border);
+      margin: var(--rel-spacing-space-md) 0;
+    }
+
+    /* Vertical */
+    .rel-divider.vertical {
+      width: var(--rel-borders-width-stroke-100);
+      background-color: var(--rel-colors-gray-border);
+      margin: 0 var(--rel-spacing-space-md);
+      align-self: stretch;
+      height: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="rel-divider ${this.orientation}" role="separator"></div>
+    `;
+  }
+}