Component Library 2.7.3 (configured with Dummy App)

Adding Components

Adding a New Component

1. Choose the Right Level

Level When to use Base class
Document New page type (e.g. landing page) Documents::BaseComponent
Panel New full-width section Panels::BaseComponent
Pattern New reusable content block Patterns::BaseComponent
Component New atomic UI element ApplicationComponent

2. Create the Component

# app/components/gll_component_library/patterns/my_pattern_component.rb
module GllComponentLibrary
  module Patterns
    class MyPatternComponent < BaseComponent
      delegate :title, :body, :clickable, to: :pattern
      renders_one :cta, -> {
        Components::ButtonComponent.new(button: clickable)
      }
      erb_template <<~ERB
        # title_html, body_html etc. are private helpers (see below)
        # with_cta renders the slot defined above
      ERB
      def initialize(pattern:)
        @pattern = pattern
      end
      private
      def pattern_class
        "my-pattern"
      end
      def title_html
        content_tag(:h3, title, class: "my-pattern__title")
      end
      def body_html
        content_tag(:div, body.html_safe, class: "my-pattern__body")
      end
    end
  end
end

The erb_template block contains standard ERB calling your helpers and slots — e.g. title_html, with_cta. See any existing pattern component for a working example.

3. Patterns Need No Registration

Patterns are resolved dynamically by naming convention — Patterns.component_for(:my_pattern) does const_get("MyPatternComponent"). Name the class <Type>Component and it's immediately discoverable; there is no registry constant to update.

Patterns.component_for(:my_pattern)  # => GllComponentLibrary::Patterns::MyPatternComponent

4. Add a Lookbook Preview

# app/components/previews/gll_component_library/patterns/my_pattern_component_preview.rb
module GllComponentLibrary
  module Patterns
    class MyPatternComponentPreview < Lookbook::Preview
      include PreviewHelper
      # @param title text
      # @param body textarea
      def default(title: "My Pattern", body: "<p>Content</p>")
        pattern = MockData.new(title:, body:, type: :my_pattern)
        render GllComponentLibrary::Patterns::MyPatternComponent.new(pattern:)
      end
    end
  end
end

Important: Always use fully qualified component names in previews (e.g. GllComponentLibrary::Patterns::MyPatternComponent).

5. Register Panels in the Panel Mapping

A new panel (unlike a pattern) is not resolved by convention — add it to Documents::BaseComponent::PANEL_COMPONENTS, keyed by its BOP panel type, so documents can build it from BOP panel data.