@reliability-design/web 1.0.2

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

@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-card';
+
+/**
+ * The Card component provides a container for content with elevation and rounded corners.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **Elevated Shadow**: Drop shadow for depth
+ * - **Rounded Corners**: Smooth border radius
+ * - **Hover Effect**: Lifts on hover with enhanced shadow
+ * - **Flexible Content**: Accepts any slotted content
+ * - **Consistent Padding**: Built-in spacing
+ * - **White Background**: Clean, professional appearance
+ */
+const meta: Meta = {
+  title: 'Components/Card',
+  tags: ['autodocs'],
+  component: 'rel-card',
+  render: (args) => html`
+    <rel-card>
+      ${args.content || html`
+        <h3 style="margin: 0 0 12px 0; font-size: 20px; color: #000;">Card Title</h3>
+        <p style="margin: 0; color: #666; line-height: 1.6;">
+          This is a basic card with some content. Cards are used to group related information together.
+        </p>
+      `}
+    </rel-card>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default card - basic card with text content
+ */
+export const Default: Story = {};
+
+/**
+ * Simple text card
+ */
+export const SimpleText: Story = {
+  render: () => html`
+    <rel-card>
+      <h3 style="margin: 0 0 12px 0; font-size: 20px; color: #000;">Welcome</h3>
+      <p style="margin: 0; color: #666; line-height: 1.6;">
+        Thank you for using our design system. This card demonstrates simple text content.
+      </p>
+    </rel-card>
+  `,
+};
+
+/**
+ * Card with image
+ */
+export const WithImage: Story = {
+  render: () => html`
+    <rel-card>
+      <img
+        src="https://picsum.photos/400/200"
+        alt="Placeholder"
+        style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px;"
+      />
+      <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #000;">Beautiful Scenery</h3>
+      <p style="margin: 0; color: #666; font-size: 14px;">
+        A stunning landscape captured in the perfect moment.
+      </p>
+    </rel-card>
+  `,
+};
+
+/**
+ * Product card - e-commerce style
+ */
+export const ProductCard: Story = {
+  render: () => html`
+    <rel-card>
+      <img
+        src="https://picsum.photos/300/300"
+        alt="Product"
+        style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px;"
+      />
+      <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #000;">Premium Headphones</h3>
+      <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">
+        High-quality wireless headphones with active noise cancellation.
+      </p>
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <span style="font-size: 24px; font-weight: 700; color: #000;">$299</span>
+        <button style="background: #00F49C; border: none; color: #000; padding: 8px 16px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
+          Add to Cart
+        </button>
+      </div>
+    </rel-card>
+  `,
+};
+
+/**
+ * User profile card
+ */
+export const UserProfile: Story = {
+  render: () => html`
+    <rel-card>
+      <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
+        <img
+          src="https://i.pravatar.cc/80?img=1"
+          alt="User avatar"
+          style="width: 60px; height: 60px; border-radius: 50%;"
+        />
+        <div>
+          <h3 style="margin: 0 0 4px 0; font-size: 18px; color: #000;">John Doe</h3>
+          <p style="margin: 0; color: #666; font-size: 14px;">Senior Developer</p>
+        </div>
+      </div>
+      <p style="margin: 0 0 16px 0; color: #666; font-size: 14px; line-height: 1.6;">
+        Passionate about building great user experiences and modern web applications.
+      </p>
+      <div style="display: flex; gap: 8px;">
+        <button style="flex: 1; background: #00F49C; border: none; color: #000; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Follow
+        </button>
+        <button style="flex: 1; background: #fff; border: 1px solid #ddd; color: #000; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Message
+        </button>
+      </div>
+    </rel-card>
+  `,
+};
+
+/**
+ * Stats card - dashboard metrics
+ */
+export const StatsCard: Story = {
+  render: () => html`
+    <rel-card>
+      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
+        <h4 style="margin: 0; font-size: 14px; color: #666; font-weight: 500;">Total Revenue</h4>
+        <span style="font-size: 20px;">💰</span>
+      </div>
+      <p style="margin: 0 0 4px 0; font-size: 32px; font-weight: 700; color: #000;">$45,231</p>
+      <p style="margin: 0; font-size: 12px; color: #00A86B;">↑ 12.5% from last month</p>
+    </rel-card>
+  `,
+};
+
+/**
+ * Notification card
+ */
+export const NotificationCard: Story = {
+  render: () => html`
+    <rel-card>
+      <div style="display: flex; gap: 12px;">
+        <div style="width: 40px; height: 40px; background: #E1F2FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">
+          🔔
+        </div>
+        <div style="flex: 1;">
+          <h4 style="margin: 0 0 4px 0; font-size: 14px; font-weight: 600; color: #000;">New message received</h4>
+          <p style="margin: 0 0 4px 0; color: #666; font-size: 14px;">Sarah Wilson sent you a message</p>
+          <p style="margin: 0; color: #999; font-size: 12px;">2 minutes ago</p>
+        </div>
+      </div>
+    </rel-card>
+  `,
+};
+
+/**
+ * Form card - card with form elements
+ */
+export const FormCard: Story = {
+  render: () => html`
+    <rel-card>
+      <h3 style="margin: 0 0 16px 0; font-size: 20px; color: #000;">Contact Us</h3>
+      <form style="display: flex; flex-direction: column; gap: 12px;">
+        <div>
+          <label style="display: block; margin-bottom: 4px; color: #666; font-size: 14px;">Name</label>
+          <input type="text" placeholder="Your name" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" />
+        </div>
+        <div>
+          <label style="display: block; margin-bottom: 4px; color: #666; font-size: 14px;">Email</label>
+          <input type="email" placeholder="your@email.com" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;" />
+        </div>
+        <div>
+          <label style="display: block; margin-bottom: 4px; color: #666; font-size: 14px;">Message</label>
+          <textarea placeholder="Your message" rows="4" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; resize: vertical;"></textarea>
+        </div>
+        <button type="submit" style="background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Send Message
+        </button>
+      </form>
+    </rel-card>
+  `,
+};
+
+/**
+ * Pricing card
+ */
+export const PricingCard: Story = {
+  render: () => html`
+    <rel-card>
+      <div style="text-align: center;">
+        <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #000;">Pro Plan</h3>
+        <p style="margin: 0 0 16px 0; color: #666; font-size: 14px;">For growing teams</p>
+        <div style="margin-bottom: 24px;">
+          <span style="font-size: 48px; font-weight: 700; color: #000;">$49</span>
+          <span style="color: #666; font-size: 14px;">/month</span>
+        </div>
+        <ul style="list-style: none; padding: 0; margin: 0 0 24px 0; text-align: left;">
+          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Unlimited projects</li>
+          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Advanced analytics</li>
+          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Priority support</li>
+          <li style="padding: 8px 0; color: #666; font-size: 14px;">✓ Custom integrations</li>
+        </ul>
+        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 12px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Get Started
+        </button>
+      </div>
+    </rel-card>
+  `,
+};
+
+/**
+ * Blog post card
+ */
+export const BlogPostCard: Story = {
+  render: () => html`
+    <rel-card>
+      <img
+        src="https://picsum.photos/400/250"
+        alt="Blog post"
+        style="width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px;"
+      />
+      <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+        <span style="padding: 4px 8px; background: #E1F2FF; color: #0091EA; border-radius: 4px; font-size: 12px; font-weight: 600;">Technology</span>
+        <span style="padding: 4px 8px; background: #E8F5E8; color: #00A86B; border-radius: 4px; font-size: 12px; font-weight: 600;">Design</span>
+      </div>
+      <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #000;">Getting Started with Web Components</h3>
+      <p style="margin: 0 0 12px 0; color: #666; font-size: 14px; line-height: 1.6;">
+        Learn how to build reusable, framework-agnostic UI components using modern web standards.
+      </p>
+      <div style="display: flex; align-items: center; justify-content: space-between;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <img src="https://i.pravatar.cc/32?img=2" alt="Author" style="width: 32px; height: 32px; border-radius: 50%;" />
+          <span style="color: #666; font-size: 14px;">Sarah Wilson</span>
+        </div>
+        <span style="color: #999; font-size: 12px;">5 min read</span>
+      </div>
+    </rel-card>
+  `,
+};
+
+/**
+ * Card grid - multiple cards in a grid layout
+ */
+export const CardGrid: Story = {
+  render: () => html`
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 24px; background: #f5f5f5;">
+      <rel-card>
+        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 1</h3>
+        <p style="margin: 0; color: #666; font-size: 14px;">First card in the grid layout.</p>
+      </rel-card>
+
+      <rel-card>
+        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 2</h3>
+        <p style="margin: 0; color: #666; font-size: 14px;">Second card in the grid layout.</p>
+      </rel-card>
+
+      <rel-card>
+        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 3</h3>
+        <p style="margin: 0; color: #666; font-size: 14px;">Third card in the grid layout.</p>
+      </rel-card>
+
+      <rel-card>
+        <h3 style="margin: 0 0 12px 0; font-size: 18px; color: #000;">Card 4</h3>
+        <p style="margin: 0; color: #666; font-size: 14px;">Fourth card in the grid layout.</p>
+      </rel-card>
+    </div>
+  `,
+};
+
+/**
+ * Empty state card
+ */
+export const EmptyState: Story = {
+  render: () => html`
+    <rel-card>
+      <div style="text-align: center; padding: 40px 20px;">
+        <div style="font-size: 64px; margin-bottom: 16px;">📭</div>
+        <h3 style="margin: 0 0 8px 0; font-size: 20px; color: #000;">No messages yet</h3>
+        <p style="margin: 0 0 24px 0; color: #666; font-size: 14px;">
+          When you receive messages, they'll appear here.
+        </p>
+        <button style="background: #00F49C; border: none; color: #000; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Compose Message
+        </button>
+      </div>
+    </rel-card>
+  `,
+};

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

@@ -0,0 +1,33 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-card")
+export class RelCard extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: var(--rel-colors-white, #ffffff);
+      border-radius: var(--rel-borderRadius-lg, 12px);
+      padding: var(--rel-spacing-space-md, 16px);
+
+      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3),
+        0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+
+      font-family: var(--rel-fontFamilies-primary);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35),
+        0px 8px 14px 4px rgba(0, 0, 0, 0.2);
+    }
+  `;
+
+  render() {
+    return html` <div class="card"><slot></slot></div> `;
+  }
+}