@reliability-design/web 1.0.2

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

@@ -0,0 +1,350 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-badge';
+
+/**
+ * The Badge component displays notification counts or status indicators.
+ * Built with Lit web components for framework-agnostic usage.
+ *
+ * ## Features
+ * - **2 Variants**: number (displays count), dot (indicator only)
+ * - **3 Sizes**: sm (20px), md (28px), lg (40px)
+ * - **Perfect Circles**: Consistent circular shape across all sizes
+ * - **Red Background**: High-contrast notification color
+ * - **Number Display**: Shows notification count up to 99+
+ */
+const meta: Meta = {
+  title: 'Components/Badge',
+  tags: ['autodocs'],
+  component: 'rel-badge',
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['number', 'dot'],
+      description: 'Badge variant',
+      table: {
+        defaultValue: { summary: 'number' },
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'Badge size',
+      table: {
+        defaultValue: { summary: 'md' },
+        type: { summary: 'string' },
+      },
+    },
+    number: {
+      control: 'text',
+      description: 'Number to display (for variant="number")',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+  render: (args) => html`
+    <rel-badge
+      variant="${args.variant || 'number'}"
+      size="${args.size || 'md'}"
+      number="${args.number || '1'}"
+    ></rel-badge>
+  `,
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Number badge - displays a notification count
+ */
+export const NumberBadge: Story = {
+  args: {
+    variant: 'number',
+    size: 'md',
+    number: '5',
+  },
+};
+
+/**
+ * Dot badge - simple indicator without count
+ */
+export const DotBadge: Story = {
+  args: {
+    variant: 'dot',
+    size: 'md',
+  },
+};
+
+/**
+ * Small size - 20px diameter
+ */
+export const Small: Story = {
+  args: {
+    variant: 'number',
+    size: 'sm',
+    number: '3',
+  },
+};
+
+/**
+ * Medium size - 28px diameter (default)
+ */
+export const Medium: Story = {
+  args: {
+    variant: 'number',
+    size: 'md',
+    number: '9',
+  },
+};
+
+/**
+ * Large size - 40px diameter
+ */
+export const Large: Story = {
+  args: {
+    variant: 'number',
+    size: 'lg',
+    number: '12',
+  },
+};
+
+/**
+ * Single digit - notification count less than 10
+ */
+export const SingleDigit: Story = {
+  args: {
+    variant: 'number',
+    size: 'md',
+    number: '7',
+  },
+};
+
+/**
+ * Double digit - notification count between 10-99
+ */
+export const DoubleDigit: Story = {
+  args: {
+    variant: 'number',
+    size: 'md',
+    number: '42',
+  },
+};
+
+/**
+ * High count - very high notification count
+ */
+export const HighCount: Story = {
+  args: {
+    variant: 'number',
+    size: 'md',
+    number: '99+',
+  },
+};
+
+/**
+ * All sizes - showcase of all badge sizes with numbers
+ */
+export const AllSizes: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 20px; align-items: center; padding: 24px; background: #000;">
+      <div style="text-align: center;">
+        <rel-badge variant="number" size="sm" number="3"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Small (20px)</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-badge variant="number" size="md" number="9"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Medium (28px)</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-badge variant="number" size="lg" number="12"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Large (40px)</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * All variants - number vs dot badges
+ */
+export const AllVariants: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 32px; align-items: center; padding: 24px; background: #000;">
+      <div style="text-align: center;">
+        <rel-badge variant="number" size="lg" number="5"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Number</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-badge variant="dot" size="lg"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Dot</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Dot sizes - all sizes of dot variant
+ */
+export const DotSizes: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 20px; align-items: center; padding: 24px; background: #000;">
+      <div style="text-align: center;">
+        <rel-badge variant="dot" size="sm"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Small</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-badge variant="dot" size="md"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Medium</p>
+      </div>
+
+      <div style="text-align: center;">
+        <rel-badge variant="dot" size="lg"></rel-badge>
+        <p style="color: #fff; font-size: 12px; margin-top: 8px;">Large</p>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Number variations - different notification counts
+ */
+export const NumberVariations: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
+      <rel-badge variant="number" size="md" number="1"></rel-badge>
+      <rel-badge variant="number" size="md" number="5"></rel-badge>
+      <rel-badge variant="number" size="md" number="12"></rel-badge>
+      <rel-badge variant="number" size="md" number="99"></rel-badge>
+      <rel-badge variant="number" size="md" number="99+"></rel-badge>
+    </div>
+  `,
+};
+
+/**
+ * With icons - badges positioned on icons
+ */
+export const WithIcons: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 40px; padding: 24px; background: #000;">
+      <div style="position: relative; display: inline-block;">
+        <span style="font-size: 32px;">🔔</span>
+        <rel-badge variant="number" size="sm" number="3" style="position: absolute; top: -4px; right: -4px;"></rel-badge>
+      </div>
+
+      <div style="position: relative; display: inline-block;">
+        <span style="font-size: 32px;">📧</span>
+        <rel-badge variant="number" size="sm" number="12" style="position: absolute; top: -4px; right: -4px;"></rel-badge>
+      </div>
+
+      <div style="position: relative; display: inline-block;">
+        <span style="font-size: 32px;">💬</span>
+        <rel-badge variant="dot" size="sm" style="position: absolute; top: -2px; right: -2px;"></rel-badge>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Navigation menu - badges on menu items
+ */
+export const NavigationMenu: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; width: 250px;">
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1A1A1A; border-radius: 8px;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <span style="font-size: 20px;">📬</span>
+          <span style="color: #fff; font-size: 14px;">Messages</span>
+        </div>
+        <rel-badge variant="number" size="sm" number="5"></rel-badge>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1A1A1A; border-radius: 8px;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <span style="font-size: 20px;">🔔</span>
+          <span style="color: #fff; font-size: 14px;">Notifications</span>
+        </div>
+        <rel-badge variant="number" size="sm" number="23"></rel-badge>
+      </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #1A1A1A; border-radius: 8px;">
+        <div style="display: flex; align-items: center; gap: 12px;">
+          <span style="font-size: 20px;">⭐</span>
+          <span style="color: #fff; font-size: 14px;">Updates</span>
+        </div>
+        <rel-badge variant="dot" size="sm"></rel-badge>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Real-world examples - practical usage scenarios
+ */
+export const RealWorldExamples: Story = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
+      <!-- Notification Bell -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Notification Bell</p>
+        <div style="position: relative; display: inline-block;">
+          <button style="background: #1A1A1A; border: 1px solid #2A2A2A; color: #fff; padding: 12px 16px; border-radius: 8px; cursor: pointer; font-size: 20px;">
+            🔔
+          </button>
+          <rel-badge variant="number" size="sm" number="7" style="position: absolute; top: -6px; right: -6px;"></rel-badge>
+        </div>
+      </div>
+
+      <!-- Shopping Cart -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Shopping Cart</p>
+        <div style="position: relative; display: inline-block;">
+          <button style="background: #00F49C; border: none; color: #000; padding: 12px 20px; border-radius: 1000px; cursor: pointer; font-weight: 600;">
+            🛒 Cart
+          </button>
+          <rel-badge variant="number" size="sm" number="3" style="position: absolute; top: -6px; right: -6px;"></rel-badge>
+        </div>
+      </div>
+
+      <!-- Status Indicator -->
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Status Indicator</p>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <rel-badge variant="dot" size="md"></rel-badge>
+          <span style="color: #fff;">New activity detected</span>
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Size comparison - all sizes side by side
+ */
+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;">Number Badges</p>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <rel-badge variant="number" size="sm" number="5"></rel-badge>
+          <rel-badge variant="number" size="md" number="12"></rel-badge>
+          <rel-badge variant="number" size="lg" number="99+"></rel-badge>
+        </div>
+      </div>
+
+      <div>
+        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Dot Badges</p>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <rel-badge variant="dot" size="sm"></rel-badge>
+          <rel-badge variant="dot" size="md"></rel-badge>
+          <rel-badge variant="dot" size="lg"></rel-badge>
+        </div>
+      </div>
+    </div>
+  `,
+};

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

@@ -0,0 +1,70 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-badge")
+export class RelBadge extends LitElement {
+  @property({ type: String }) number = "";
+  @property({ type: String }) size: "sm" | "md" | "lg" = "md";
+  @property({ type: String }) variant: "dot" | "number" = "number";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: "Poppins", sans-serif;
+      font-weight: 600;
+      background-color: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+      border-radius: 50%;
+    }
+
+    /* PERFECT CIRCLES — FIXED SIZES */
+    .badge-sm {
+      width: 20px;
+      height: 20px;
+      font-size: 12px;
+    }
+
+    .badge-md {
+      width: 28px;
+      height: 28px;
+      font-size: 14px;
+    }
+
+    .badge-lg {
+      width: 40px;
+      height: 40px;
+      font-size: 20px;
+    }
+
+    /* DOT — smaller circle */
+    .badge-dot {
+      width: 10px !important;
+      height: 10px !important;
+      padding: 0 !important;
+    }
+
+    .badge-number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+
+  private get classes() {
+    return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
+  }
+
+  render() {
+    const isDot = this.variant === "dot";
+
+    return html`
+      <span class="${this.classes}">${isDot ? "" : this.number}</span>
+    `;
+  }
+}