@reliability-design/web 1.0.2

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

@@ -0,0 +1,368 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-cardmedia';
+
+/**
+ * The Card Media component combines images with content in an elevated card format.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **Image Support**: Display images at the top of the card
+ * - **Title & Subtitle**: Built-in typography for headers and descriptions
+ * - **Slotted Content**: Add buttons, links, or additional content
+ * - **Elevated Shadow**: Drop shadow for depth
+ * - **Hover Effect**: Lifts on hover with enhanced shadow
+ * - **Rounded Corners**: Smooth border radius
+ */
+const meta: Meta = {
+  title: 'Components/CardMedia',
+  tags: ['autodocs'],
+  component: 'rel-card-media',
+  argTypes: {
+    imageSrc: {
+      control: 'text',
+      description: 'Image source URL',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    imageAlt: {
+      control: 'text',
+      description: 'Image alt text for accessibility',
+      table: {
+        defaultValue: { summary: 'Card image' },
+        type: { summary: 'string' },
+      },
+    },
+    title: {
+      control: 'text',
+      description: 'Card title',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Card subtitle or description',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-card-media
+      imageSrc="${args.imageSrc || 'https://picsum.photos/400/250'}"
+      imageAlt="${args.imageAlt || 'Card image'}"
+      title="${args.title || 'Card Title'}"
+      subtitle="${args.subtitle || 'Card subtitle or description'}"
+    >
+      ${args.content || ''}
+    </rel-card-media>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default card media - basic image card
+ */
+export const Default: Story = {
+  args: {
+    imageSrc: 'https://picsum.photos/400/250',
+    imageAlt: 'Beautiful scenery',
+    title: 'Beautiful Landscape',
+    subtitle: 'Captured in the perfect moment',
+  },
+};
+
+/**
+ * Product card - e-commerce product display
+ */
+export const ProductCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/400/400"
+      imageAlt="Product"
+      title="Premium Wireless Headphones"
+      subtitle="High-quality audio with active noise cancellation"
+    >
+      <div style="margin-top: 12px; 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-media>
+  `,
+};
+
+/**
+ * Blog post card - article preview
+ */
+export const BlogPostCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/500/300"
+      imageAlt="Blog post cover"
+      title="Getting Started with Web Components"
+      subtitle="Learn how to build reusable UI components using modern web standards."
+    >
+      <div style="margin-top: 12px; 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=3" 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-media>
+  `,
+};
+
+/**
+ * Recipe card - food recipe display
+ */
+export const RecipeCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/400/300"
+      imageAlt="Delicious food"
+      title="Homemade Pizza"
+      subtitle="A classic Italian favorite with fresh ingredients"
+    >
+      <div style="margin-top: 12px;">
+        <div style="display: flex; gap: 16px; margin-bottom: 12px;">
+          <span style="color: #666; font-size: 12px;">⏱️ 45 min</span>
+          <span style="color: #666; font-size: 12px;">👥 4 servings</span>
+          <span style="color: #666; font-size: 12px;">🔥 Medium</span>
+        </div>
+        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          View Recipe
+        </button>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * Property listing - real estate card
+ */
+export const PropertyListing: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/500/350"
+      imageAlt="Property"
+      title="Modern Downtown Apartment"
+      subtitle="2 bed • 2 bath • 1,200 sq ft"
+    >
+      <div style="margin-top: 12px;">
+        <div style="margin-bottom: 12px;">
+          <span style="font-size: 28px; font-weight: 700; color: #000;">$450,000</span>
+        </div>
+        <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">
+          📍 123 Main Street, Downtown District
+        </p>
+        <div style="display: flex; gap: 8px;">
+          <button style="flex: 1; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+            Schedule Tour
+          </button>
+          <button style="flex: 1; background: #fff; border: 1px solid #ddd; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+            Save
+          </button>
+        </div>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * Event card - upcoming event display
+ */
+export const EventCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/450/280"
+      imageAlt="Event"
+      title="Tech Conference 2024"
+      subtitle="Join industry leaders for 3 days of innovation and networking"
+    >
+      <div style="margin-top: 12px;">
+        <div style="background: #E1F2FF; padding: 12px; border-radius: 8px; margin-bottom: 12px;">
+          <p style="margin: 0 0 4px 0; color: #0091EA; font-size: 14px; font-weight: 600;">📅 March 15-17, 2024</p>
+          <p style="margin: 0; color: #0091EA; font-size: 14px;">📍 San Francisco Convention Center</p>
+        </div>
+        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Register Now
+        </button>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * Course card - online course preview
+ */
+export const CourseCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/420/260"
+      imageAlt="Course"
+      title="Complete Web Development Bootcamp"
+      subtitle="Learn HTML, CSS, JavaScript, and modern frameworks from scratch"
+    >
+      <div style="margin-top: 12px;">
+        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+          <span style="padding: 4px 8px; background: #FFE9D9; color: #FF6D00; border-radius: 4px; font-size: 12px; font-weight: 600;">Beginner</span>
+          <span style="padding: 4px 8px; background: #E1F2FF; color: #0091EA; border-radius: 4px; font-size: 12px; font-weight: 600;">40 hours</span>
+        </div>
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
+          <div style="display: flex; align-items: center; gap: 4px;">
+            <span style="color: #FFD700;">★★★★★</span>
+            <span style="color: #666; font-size: 12px;">(2,543 reviews)</span>
+          </div>
+          <span style="font-size: 20px; font-weight: 700; color: #000;">$89</span>
+        </div>
+        <button style="width: 100%; background: #00F49C; border: none; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Enroll Now
+        </button>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * Team member card - employee profile
+ */
+export const TeamMemberCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://i.pravatar.cc/400?img=5"
+      imageAlt="Team member"
+      title="Alex Johnson"
+      subtitle="Senior Product Designer"
+    >
+      <div style="margin-top: 12px;">
+        <p style="margin: 0 0 12px 0; color: #666; font-size: 14px; line-height: 1.6;">
+          Passionate about creating intuitive user experiences and building design systems that scale.
+        </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;">
+            View Profile
+          </button>
+          <button style="background: #fff; border: 1px solid #ddd; color: #000; padding: 8px 12px; border-radius: 8px; cursor: pointer;">
+            💬
+          </button>
+        </div>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * Travel destination card
+ */
+export const TravelCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/480/320"
+      imageAlt="Travel destination"
+      title="Santorini, Greece"
+      subtitle="Experience the beauty of the Greek islands"
+    >
+      <div style="margin-top: 12px;">
+        <div style="margin-bottom: 12px;">
+          <span style="color: #FFD700; font-size: 16px;">★★★★★</span>
+          <span style="color: #666; font-size: 14px; margin-left: 4px;">4.9 (1,234 reviews)</span>
+        </div>
+        <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">
+          7 days • All inclusive • Flights & hotel
+        </p>
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <div>
+            <span style="color: #999; font-size: 12px; text-decoration: line-through;">$1,999</span>
+            <span style="font-size: 24px; font-weight: 700; color: #000; margin-left: 8px;">$1,499</span>
+          </div>
+          <button style="background: #00F49C; border: none; color: #000; padding: 8px 16px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
+            Book Now
+          </button>
+        </div>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * News article card
+ */
+export const NewsCard: Story = {
+  render: () => html`
+    <rel-card-media
+      imageSrc="https://picsum.photos/460/290"
+      imageAlt="News"
+      title="Major Tech Breakthrough Announced"
+      subtitle="Scientists discover revolutionary new material"
+    >
+      <div style="margin-top: 12px;">
+        <div style="display: flex; gap: 8px; margin-bottom: 12px;">
+          <span style="padding: 4px 8px; background: #FFE8EB; color: #CC0000; border-radius: 4px; font-size: 12px; font-weight: 600;">Breaking</span>
+          <span style="padding: 4px 8px; background: #E1F2FF; color: #0091EA; border-radius: 4px; font-size: 12px; font-weight: 600;">Science</span>
+        </div>
+        <p style="margin: 0 0 12px 0; color: #999; font-size: 12px;">
+          Published 2 hours ago by Tech News Daily
+        </p>
+        <button style="width: 100%; background: #fff; border: 1px solid #ddd; color: #000; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600;">
+          Read Full Article
+        </button>
+      </div>
+    </rel-card-media>
+  `,
+};
+
+/**
+ * Card grid - multiple media cards
+ */
+export const CardGrid: Story = {
+  render: () => html`
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; padding: 24px; background: #f5f5f5;">
+      <rel-card-media
+        imageSrc="https://picsum.photos/400/250?random=1"
+        title="Mountain Adventure"
+        subtitle="Explore breathtaking peaks"
+      ></rel-card-media>
+
+      <rel-card-media
+        imageSrc="https://picsum.photos/400/250?random=2"
+        title="Ocean Paradise"
+        subtitle="Discover tropical beaches"
+      ></rel-card-media>
+
+      <rel-card-media
+        imageSrc="https://picsum.photos/400/250?random=3"
+        title="City Lights"
+        subtitle="Experience urban energy"
+      ></rel-card-media>
+
+      <rel-card-media
+        imageSrc="https://picsum.photos/400/250?random=4"
+        title="Forest Escape"
+        subtitle="Connect with nature"
+      ></rel-card-media>
+    </div>
+  `,
+};
+
+/**
+ * Without image - card with only content
+ */
+export const WithoutImage: Story = {
+  render: () => html`
+    <rel-card-media
+      title="Text-Only Card"
+      subtitle="This card has no image, only content"
+    >
+      <p style="margin-top: 12px; color: #666; font-size: 14px; line-height: 1.6;">
+        Cards don't always need images. This example shows how the card looks with just text content.
+      </p>
+    </rel-card-media>
+  `,
+};

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

@@ -0,0 +1,80 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-card-media")
+export class RelCardMedia extends LitElement {
+  @property({ type: String }) imageSrc = "";
+  @property({ type: String }) imageAlt = "Card image";
+  @property({ type: String }) title = "";
+  @property({ type: String }) subtitle = "";
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .card-media {
+      background-color: var(--rel-colors-white, #ffffff);
+      border-radius: var(--rel-borderRadius-lg, 12px);
+      overflow: hidden;
+
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3),
+        0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card-media:hover {
+      transform: translateY(-4px);
+      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.35),
+        0px 10px 16px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    .card-image img {
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+
+    .card-content {
+      padding: var(--rel-spacing-space-md, 16px);
+    }
+
+    .card-content h3 {
+      margin: 0 0 4px 0;
+      font-size: var(--rel-fontSizes-md, 16px);
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-colors-gray-heading, #2b2b2b);
+    }
+
+    .card-content p {
+      margin: 0 0 8px 0;
+      font-size: var(--rel-fontSizes-sm, 14px);
+      color: var(--rel-colors-gray-text, #555);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="card-media">
+        ${this.imageSrc
+          ? html`
+              <div class="card-image">
+                <img src="${this.imageSrc}" alt="${this.imageAlt}" />
+              </div>
+            `
+          : null}
+
+        <div class="card-content">
+          ${this.title ? html`<h3>${this.title}</h3>` : null}
+          ${this.subtitle ? html`<p>${this.subtitle}</p>` : null}
+
+          <!-- Slot for extra content such as buttons, descriptions, etc -->
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}