@reliability-design/web 1.0.2

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

@@ -0,0 +1,327 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-avatar';
+
+/**
+ * The Avatar component displays user profile images, initials, or icons in a circular format.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **3 Types**: image, text (initials), icon
+ * - **4 Sizes**: xs (18px), sm (24px), md (32px), lg (40px)
+ * - **Circular Shape**: Perfect circle for all variants
+ * - **Flexible Content**: Supports images, text initials, or custom icons
+ * - **Fallback Support**: Graceful handling of missing images
+ */
+const meta: Meta = {
+  title: 'Components/Avatar',
+  tags: ['autodocs'],
+  component: 'rel-avatar',
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['image', 'text', 'icon'],
+      description: 'Type of avatar content',
+      table: {
+        defaultValue: { summary: 'image' },
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'Avatar size',
+      table: {
+        defaultValue: { summary: 'md' },
+        type: { summary: 'string' },
+      },
+    },
+    src: {
+      control: 'text',
+      description: 'Image source URL (for type="image")',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    text: {
+      control: 'text',
+      description: 'Text initials (for type="text")',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    alt: {
+      control: 'text',
+      description: 'Image alt text for accessibility',
+      table: {
+        defaultValue: { summary: 'Avatar' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => {
+    if (args.type === 'icon') {
+      return html`
+        <rel-avatar
+          type="icon"
+          size="${args.size || 'md'}"
+        >
+          <span>👤</span>
+        </rel-avatar>
+      `;
+    }
+    return html`
+      <rel-avatar
+        type="${args.type || 'image'}"
+        size="${args.size || 'md'}"
+        src="${args.src || ''}"
+        text="${args.text || ''}"
+        alt="${args.alt || 'Avatar'}"
+      ></rel-avatar>
+    `;
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Image avatar - displays a profile picture
+ */
+export const ImageAvatar: Story = {
+  args: {
+    type: 'image',
+    size: 'md',
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'John Doe',
+  },
+};
+
+/**
+ * Text avatar - displays user initials
+ */
+export const TextAvatar: Story = {
+  args: {
+    type: 'text',
+    size: 'md',
+    text: 'JD',
+  },
+};
+
+/**
+ * Icon avatar - displays a custom icon
+ */
+export const IconAvatar: Story = {
+  args: {
+    type: 'icon',
+    size: 'md',
+  },
+};
+
+/**
+ * Extra small size - 18px diameter
+ */
+export const ExtraSmall: Story = {
+  args: {
+    type: 'image',
+    size: 'xs',
+    src: 'https://i.pravatar.cc/150?img=2',
+  },
+};
+
+/**
+ * Small size - 24px diameter
+ */
+export const Small: Story = {
+  args: {
+    type: 'image',
+    size: 'sm',
+    src: 'https://i.pravatar.cc/150?img=3',
+  },
+};
+
+/**
+ * Medium size - 32px diameter (default)
+ */
+export const Medium: Story = {
+  args: {
+    type: 'image',
+    size: 'md',
+    src: 'https://i.pravatar.cc/150?img=4',
+  },
+};
+
+/**
+ * Large size - 40px diameter
+ */
+export const Large: Story = {
+  args: {
+    type: 'image',
+    size: 'lg',
+    src: 'https://i.pravatar.cc/150?img=5',
+  },
+};
+
+/**
+ * All sizes - showcase of all avatar sizes with images
+ */
+export const AllSizes: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
+      <rel-avatar type="image" size="xs" src="https://i.pravatar.cc/150?img=6"></rel-avatar>
+      <rel-avatar type="image" size="sm" src="https://i.pravatar.cc/150?img=7"></rel-avatar>
+      <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=8"></rel-avatar>
+      <rel-avatar type="image" size="lg" src="https://i.pravatar.cc/150?img=9"></rel-avatar>
+    </div>
+  `,
+};
+
+/**
+ * All types - showcase of all avatar types
+ */
+export const AllTypes: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
+      <div style="text-align: center;">
+        <rel-avatar type="image" size="lg" src="https://i.pravatar.cc/150?img=10"></rel-avatar>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Image</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-avatar type="text" size="lg" text="AB"></rel-avatar>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Text</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-avatar type="icon" size="lg">
+          <span>👤</span>
+        </rel-avatar>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Icon</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Text initials - different initial combinations
+ */
+export const TextInitials: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
+      <rel-avatar type="text" size="lg" text="JD"></rel-avatar>
+      <rel-avatar type="text" size="lg" text="AB"></rel-avatar>
+      <rel-avatar type="text" size="lg" text="XY"></rel-avatar>
+      <rel-avatar type="text" size="lg" text="MK"></rel-avatar>
+    </div>
+  `,
+};
+
+/**
+ * Icon variations - different icons
+ */
+export const IconVariations: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
+      <rel-avatar type="icon" size="lg">
+        <span>👤</span>
+      </rel-avatar>
+      <rel-avatar type="icon" size="lg">
+        <span>🏢</span>
+      </rel-avatar>
+      <rel-avatar type="icon" size="lg">
+        <span>⚙️</span>
+      </rel-avatar>
+      <rel-avatar type="icon" size="lg">
+        <span>📧</span>
+      </rel-avatar>
+    </div>
+  `,
+};
+
+/**
+ * User list - avatars in a typical user list layout
+ */
+export const UserList: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000;">
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=11"></rel-avatar>
+        <div>
+          <p style="color: #fff; margin: 0; font-size: 14px; font-weight: 600;">John Doe</p>
+          <p style="color: #999; margin: 0; font-size: 12px;">john.doe@example.com</p>
+        </div>
+      </div>
+
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-avatar type="text" size="md" text="AB"></rel-avatar>
+        <div>
+          <p style="color: #fff; margin: 0; font-size: 14px; font-weight: 600;">Alice Brown</p>
+          <p style="color: #999; margin: 0; font-size: 12px;">alice.brown@example.com</p>
+        </div>
+      </div>
+
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=12"></rel-avatar>
+        <div>
+          <p style="color: #fff; margin: 0; font-size: 14px; font-weight: 600;">Sarah Wilson</p>
+          <p style="color: #999; margin: 0; font-size: 12px;">sarah.wilson@example.com</p>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Avatar group - overlapping avatars
+ */
+export const AvatarGroup: Story = {
+  render: () => html`
+    <div style="padding: 24px; background: #000;">
+      <div style="display: flex; margin-left: 16px;">
+        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=13" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
+        <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=14" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
+        <rel-avatar type="text" size="md" text="JD" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
+        <rel-avatar type="text" size="md" text="+5" style="margin-left: -16px; border: 2px solid #000;"></rel-avatar>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Size comparison - all sizes of each type
+ */
+export const SizeComparison: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Image Avatars</p>
+        <div style="display: flex; gap: 12px; align-items: center;">
+          <rel-avatar type="image" size="xs" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
+          <rel-avatar type="image" size="sm" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
+          <rel-avatar type="image" size="md" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
+          <rel-avatar type="image" size="lg" src="https://i.pravatar.cc/150?img=15"></rel-avatar>
+        </div>
+      </div>
+
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Text Avatars</p>
+        <div style="display: flex; gap: 12px; align-items: center;">
+          <rel-avatar type="text" size="xs" text="AB"></rel-avatar>
+          <rel-avatar type="text" size="sm" text="AB"></rel-avatar>
+          <rel-avatar type="text" size="md" text="AB"></rel-avatar>
+          <rel-avatar type="text" size="lg" text="AB"></rel-avatar>
+        </div>
+      </div>
+
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Icon Avatars</p>
+        <div style="display: flex; gap: 12px; align-items: center;">
+          <rel-avatar type="icon" size="xs"><span>👤</span></rel-avatar>
+          <rel-avatar type="icon" size="sm"><span>👤</span></rel-avatar>
+          <rel-avatar type="icon" size="md"><span>👤</span></rel-avatar>
+          <rel-avatar type="icon" size="lg"><span>👤</span></rel-avatar>
+        </div>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,100 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-avatar")
+export class RelAvatar extends LitElement {
+  @property({ type: String }) size: "lg" | "md" | "sm" | "xs" = "md";
+  @property({ type: String }) type: "image" | "text" | "icon" = "image";
+
+  @property({ type: String }) src = "";
+  @property({ type: String }) text = "";
+  @property({ type: String }) alt = "Avatar";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+
+      background-color: var(--rel-colors-gray-heading);
+      color: var(--rel-colors-white);
+      font-weight: var(--rel-fontWeights-bold);
+
+      user-select: none;
+      text-transform: uppercase;
+    }
+
+    /* -------------------------
+        CORRECTED SIZE CLASSES
+    ------------------------- */
+    .avatar-lg {
+      width: 40px;
+      height: 40px;
+      font-size: var(--rel-fontSizes-xl);
+      line-height: 38px;
+    }
+
+    .avatar-md {
+      width: 32px;
+      height: 32px;
+      font-size: var(--rel-fontSizes-lg);
+      line-height: 32px;
+    }
+
+    .avatar-sm {
+      width: 24px;
+      height: 24px;
+      font-size: var(--rel-fontSizes-md);
+      line-height: 24px;
+    }
+
+    .avatar-xs {
+      width: 18px;
+      height: 18px;
+      font-size: var(--rel-fontSizes-xs);
+      line-height: 18px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .icon-slot {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-slot ::slotted(*) {
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    .icon-slot ::slotted(svg) {
+      width: 50%;
+      height: 50%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="avatar avatar-${this.size}">
+        ${this.type === "image"
+          ? html`<img src=${this.src!} alt=${this.alt} />`
+          : this.type === "text"
+          ? html`<span>${this.text}</span>`
+          : html`<span class="icon-slot"><slot></slot></span>`}
+      </div>
+    `;
+  }
+}