Component Inventory

Last Updated: December 6, 2025

This document provides a comprehensive inventory of all ViewComponents in the Heartline Songsmith application, organized by design system.

Anvil Components (Customer-Facing)
Admin Components (Internal)
Shared Components
Component Status

Anvil Components (Customer-Facing)

Components following the Anvil Design System for customer-facing interfaces.

Cards & Content

ComicDetailCardComponent

File: app/components/comic_detail_card_component.rb

Purpose: Primary content card with optional pricing sidebar

Props: - title (String, required) - Card title, displayed in yellow header - show_price (Boolean, default: false) - Whether to show price sidebar - price (Integer, optional) - Price in cents

Slots: - sidebar (optional) - Custom sidebar content (alternative to price display)

Usage: erb <%= render ComicDetailCardComponent.new( title: "BUNDLE NAME", show_price: true, price: 9999 ) do %>  <% end %>

Features: - Yellow header with black border - White content area with halftone background - Optional price display in red with stroke - Hard shadow (10px offset) - Responsive layout (stacks on mobile)

Design System: Anvil
Status: ✅ Documented
Preview: Available

AddonCardComponent

File: app/components/addon_card_component.rb

Purpose: Selectable add-on product card with checkbox

Props: - addon (Product, required) - Addon product object - selectable (Boolean, default: true) - Whether to show checkbox

Usage: erb <%= render AddonCardComponent.new(addon: @addon, selectable: true) %>

Features: - Large Material Symbol icon (72px) aligned left - Title displayed to the right of icon (horizontal layout) - Custom styled checkbox (top-right) - Price display in blue - Hard shadow - SKU-based icon and color mapping - Compact vertical layout

Icon Mapping: - HS-ADDON-RUSH → bolt (red) - HS-ADDON-INSTRUMENTAL → mic (blue) - HS-ADDON-CD → album (blue) - HS-ADDON-CASSETTE → cable (blue) - HS-ADDON-DRIVE → usb (blue) - HS-ADDON-BUYOUT → military_tech (yellow with stroke) - HS-ADDON-RELEASE → radio (blue) - HS-ADDON-LYRICART → palette (blue)

Design System: Anvil
Status: ✅ Documented
Preview: Available

Foundational Components

Anvil::AlertComponent

File: app/components/anvil/alert_component.rb

Purpose: Displays a prominent info box or alert message.

Props: - variant (Symbol, default: :primary) - Color scheme (:primary for yellow, :secondary for red). - icon (String, optional) - Name of a Material Symbols icon to display.

Slots: - content (default) - The text content of the alert.

Usage: erb <%= render Anvil::AlertComponent.new(variant: :primary, icon: "info") do %> Your progress is automatically saved. <% end %>

Features: - Standard Anvil styling (border-5, shadow-comic-hard, halftone-bg). - Supports different color variants. - Optional icon for additional visual context.

Design System: Anvil
Status: ✅ Documented
Preview: Not Available
Created: December 7, 2025

Anvil::ContentCardComponent

File: app/components/anvil/content_card_component.rb

Purpose: A generic card for displaying a title and a block of text content.

Props: - title (String, required) - The title of the card. - title_variant (Symbol, default: :primary) - Color of the title (:primary for red, :secondary for black).

Slots: - content (default) - The main body content of the card.

Usage: ```erb <%= render Anvil::ContentCardComponent.new(title: “THE ORIGIN OF THE MASK”, title_variant: :primary) do %>

Long before he became the Heartline Songsmith...

<% end %> ```

Features: - Standard Anvil card styling (border-5, shadow-comic-hard, bg-comic-white). - Consistent header and body typography.

Design System: Anvil
Status: ✅ Documented
Preview: Not Available
Created: December 7, 2025

Anvil::StepCardComponent

File: app/components/anvil/step_card_component.rb

Purpose: A card for displaying a numbered step in a process, like a “how it works” section.

Props: - step_number (Integer, required) - The number to display in the step circle. - title (String, required) - The title of the step. - variant (Symbol, default: :red) - Color scheme (:red, :yellow, :blue).

Slots: - content (default) - The descriptive text for the step.

Usage: erb <%= render Anvil::StepCardComponent.new(step_number: 1, title: "YOU SHARE YOUR STORY", variant: :red) do %> Tell the Songsmith what matters. <% end %>

Features: - Standard Anvil card styling with multiple color variants. - Prominent numbered circle to indicate the step.

Design System: Anvil
Status: ✅ Documented
Preview: Not Available
Created: December 7, 2025

Status & Badges

Anvil::BadgeComponent

File: app/components/anvil/badge_component.rb

Purpose: Displays a small, stylized badge for status or labels.

Props: - text (String, required) - The text to display in the badge. - variant (Symbol, default: :red) - Color scheme (:red, :yellow, :blue, :green, :white).

Usage: erb <%= render Anvil::BadgeComponent.new(text: "NEW", variant: :yellow) %>

Features: - Standard Anvil styling (border-5, shadow-comic, uppercase font). - Supports multiple color variants.

Design System: Anvil
Status: ✅ Documented
Preview: Not Available
Created: December 7, 2025

ComicPricingCardComponent

File: app/components/comic_pricing_card_component.rb

Purpose: Pricing display card for product listings

Design System: Anvil
Status: ⚠️ Needs documentation
Preview: Unknown

ComicOrderCardComponent

File: app/components/comic_order_card_component.rb

Purpose: Order status card for customer order dashboard

Design System: Anvil
Status: ⚠️ Needs documentation
Preview: Unknown

ComicSongReadyBannerComponent

File: app/components/comic_song_ready_banner_component.rb

Purpose: Celebratory banner displayed when a customer’s song is ready to listen

Props: - song (Song, required) - Song object with signed_id - title (String, default: “YOUR SONG IS READY!”) - Banner headline

Usage: erb <%= render ComicSongReadyBannerComponent.new(song: @song) %>

Features: - Yellow halftone background with thick black border - Large red music note icon in bordered box - Headline with black text stroke - Info callout with celebration icon - Play button with emoji blast effect - Responsive padding and layout

Design System: Anvil
Status: ✅ Documented
Preview: Available
Created: December 6, 2025

ComicProgressStatsComponent

File: app/components/comic_progress_stats_component.rb

Purpose: Visual progress overview with percentage, gradient bar, and status cards

Props: - progress_percentage (Integer, required) - Overall completion percentage (0-100) - progress_summary (Hash, required) - Status counts hash with keys: :pending, :in_progress, :completed, :total

Usage: erb <%= render ComicProgressStatsComponent.new( progress_percentage: 67, progress_summary: { pending: 1, in_progress: 2, completed: 4, total: 7 } ) %>

Features: - Large percentage display in blue with stroke - Gradient progress bar (red → yellow → blue) - Four status cards with Material icons: - Pending (gray, schedule icon) - In Progress (blue, autorenew icon) - Completed (green, check_circle icon) - Total (yellow, inventory_2 icon) - Responsive grid (2x2 on mobile, 4 columns on desktop) - Halftone background

Design System: Anvil
Status: ✅ Documented
Preview: Available
Created: December 6, 2025

ComicOrderSummaryCardComponent

File: app/components/comic_order_summary_card_component.rb

Purpose: Order details summary card with package, date, and status information

Props: - order (Order, required) - Order object

Usage: erb <%= render ComicOrderSummaryCardComponent.new(order: @order) %>

Features: - Order name as red headline with stroke - Package name display (if present) - Order date with calendar icon - Status badge integration - Material icons for each detail - Clean list layout with icons - Halftone background

Helper Methods: - order_name - Returns order name or fallback ID - package_name - Returns uppercased package name - order_date - Returns formatted date (MONTH DD, YYYY) - status - Returns uppercased status

Design System: Anvil
Status: ✅ Documented
Preview: Available
Created: December 6, 2025

Layout Components

ComicFooterComponent

File: app/components/comic_footer_component.rb

Purpose: Site footer with guarantee banner, links, and copyright

Props: - message (String, default: “100% SATISFACTION GUARANTEE!”) - Banner message - current_user (User, optional) - Current user for context-aware links

Usage: erb <%= render ComicFooterComponent.new(current_user: current_user) %>

Features: - Three-tier layout (banner, links, copyright) - Red guarantee banner with stroke text - Blue links section with 4-column grid - Black copyright bar - Context-aware support links (shows admin link for admins)

Link Sections: - Company: About, Rodeo Reverb Records, The Songsmith - Legal: Terms, Privacy Policy, Cookie Policy - Support: Contact, FAQ, Sign Out (conditional)

Design System: Anvil
Status: ✅ Documented
Preview: Available

Interactive Components

ComicButtonComponent

File: app/components/comic_button_component.rb

Purpose: Signature comic-styled button with rounded shape, bold colors, and press animation

Props: - text (String, required) - Button text to display - type (String, default: “button”) - Button type (button, submit, reset) - variant (Symbol, default: :primary) - Style variant (:primary, :secondary, :outline) - size (Symbol, default: :large) - Button size (:small, :medium, :large) - full_width (Boolean, default: false) - Whether button should be full width - **html_options (Hash) - Additional HTML attributes (id, data, etc.)

Usage: erb <%= render ComicButtonComponent.new( text: "SECURE CHECKOUT!", type: "submit", variant: :primary, size: :large ) %>

Features: - Rounded full shape (rounded-full) - Heavy 5px black border - Text stroke on primary/secondary variants - Press animation (translates down on hover/active) - Shadow disappears on press - Three size options (small: 48px, medium: 64px, large: 80px)

Variants: - Primary: Red background, yellow text, 2px text stroke - Secondary: Yellow background, black text, 1px text stroke - Outline: White background, black text, no stroke

Design System: Anvil
Status: ✅ Documented
Preview: Available
Tests: 18 specs, 100% coverage

ComicHeaderComponent

File: app/components/comic_header_component.rb

Purpose: Page header component

Design System: Anvil
Status: ⚠️ Needs documentation
Preview: Unknown

ComicHeroComponent

File: app/components/comic_hero_component.rb

Purpose: Hero section for landing pages

Design System: Anvil
Status: ⚠️ Needs documentation
Preview: Unknown

ComicOrderDashboardComponent

File: app/components/comic_order_dashboard_component.rb

Purpose: Customer order dashboard layout

Design System: Anvil
Status: ⚠️ Needs documentation
Preview: Unknown

Admin Components (Internal)

Components following the Admin Design System for internal tools.

Layout & Structure

Admin::DataTableComponent

File: app/components/admin/data_table_component.rb

Purpose: Standardized data table wrapper with card chrome

Slots: - toolbar (optional) - Filters, search, tabs - head (required) - Table header row - body (required) - Table body rows

Usage: ```erb <%= render Admin::DataTableComponent.new do |component| %> <% component.with_toolbar do %> <% end %>

<% component.with_head do %> <tr> <th scope="col">Column</th> </tr> <% end %>

<% component.with_body do %> <% @items.each do |item| %> <tr><td><%= item.name %></td></tr> <% end %> <% end %> <% end %> ```

Features: - Consistent card wrapper - Optional toolbar section - Uppercase header styling - Dark mode support - Responsive overflow handling

Design System: Admin
Status: ✅ Documented
Preview: Available

Admin::CardComponent

File: app/components/admin/card_component.rb

Purpose: Standard card wrapper for admin content

Design System: Admin
Status: ✅ Documented
Preview: Available