GLL Component Library

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. Register It (Patterns Only)

Add to Patterns::COMPONENTS in patterns/base_component.rb:

COMPONENTS = {
  # ...existing entries
  my_pattern: 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. Add to Panel Mapping (if needed)

If the pattern should be renderable from BOP panel data, add it to Documents::BaseComponent::PANEL_COMPONENTS.