Class: Www::PageSectionComponent

Inherits:
ViewComponent::Base
  • Object
show all
Defined in:
app/components/www/page_section_component.rb

Overview

PageSectionComponent - Reusable section wrapper for static pages

Provides consistent styling for page sections including:

  • Container sizing (container-lg, container-fluid, etc.)
  • Vertical padding (py-2, py-4, py-5)
  • Border options (top, bottom, both, none)
  • Background styles (default, mint-green, light, gradients)
  • Motion/reveal animations via the motion Stimulus controller

Usage:

<%# Basic usage with border %>
<%= render Www::PageSectionComponent.new(id: 'features', border: :bottom) do %>
Features
Content here...
<% end %>

<%# With colored background %>
<%= render Www::PageSectionComponent.new(background: :mint_green) do %>
Why Choose Us?
<% end %>

<%# With motion animation %>
<%= render Www::PageSectionComponent.new(
motion: { animation: 'fadeInUp', distance: 70, duration: 0.8 }
) do %>
Animated Section
<% end %>

<%# Full options %>
<%= render Www::PageSectionComponent.new(
id: 'testimonials',
container: 'container-fluid',
padding: 'py-5',
border: :both,
background: :light,
motion: { animation: 'fadeInUp', stagger: 0.1 }
) do %>
...content...
<% end %>

Constant Summary collapse

BACKGROUND_CLASSES =

Background classes.

{
  default: '',
  white: 'bg-white',
  light: 'bg-light',
  cream: 'cream-patterned-background',
  mint_green: 'mint-green-patterned-background',
  gradient_light: 'bg-gradient-light',
  gradient_danger: 'bg-gradient-danger'
}.freeze
BORDER_CLASSES =

Border classes.

{
  none: '',
  top: 'border-top',
  bottom: 'border-bottom',
  both: 'border-top border-bottom'
}.freeze

Instance Method Summary collapse

Constructor Details

#initialize(id: nil, container: 'container-lg', padding: 'py-4', border: :bottom, background: :default, motion: nil, extra_classes: nil, data: {}) ⇒ PageSectionComponent

Returns a new instance of PageSectionComponent.

Parameters:

  • id (String, nil) (defaults to: nil) —

    Optional section ID for anchor links

  • container (String, nil) (defaults to: 'container-lg') —

    Container class (container-lg, container-fluid, nil for no wrapper)

  • padding (String) (defaults to: 'py-4') —

    Padding class, defaults to 'py-4'

  • border (Symbol) (defaults to: :bottom) —

    Border style (:none, :top, :bottom, :both) - defaults to :bottom

  • background (Symbol, String) (defaults to: :default) —

    Background style or custom class

  • motion (Hash, nil) (defaults to: nil) —

    Motion animation options

  • extra_classes (String) (defaults to: nil) —

    Additional CSS classes for the section

  • data (Hash) (defaults to: {}) —

    Additional data attributes for the section



72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
# File 'app/components/www/page_section_component.rb', line 72

def initialize(
  id: nil,
  container: 'container-lg',
  padding: 'py-4',
  border: :bottom,
  background: :default,
  motion: nil,
  extra_classes: nil,
  data: {}
)
  super()
  @id = id
  @container = container
  @padding = padding
  @border = border
  @background = background
  @motion = motion
  @extra_classes = extra_classes
  @data = data
end

Instance Method Details

#render_container? ⇒ Boolean

Whether the section content should be wrapped in a container element.

Returns:

  • (Boolean) —

    True when a container class is set



136
137
138
 
# File 'app/components/www/page_section_component.rb', line 136

def render_container?
  @container.present?
end

#section_classes ⇒ String

Builds the combined CSS class list for the section tag.

Returns:

  • (String) —

    Space-separated padding, border, background, and extra classes



96
97
98
99
100
101
102
 
# File 'app/components/www/page_section_component.rb', line 96

def section_classes
  classes = [@padding]
  classes << border_class
  classes << background_class
  classes << @extra_classes if @extra_classes.present?
  classes.compact.compact_blank.join(' ')
end

#section_data_attributes ⇒ Hash

Builds the data attributes for the section tag, including
Stimulus motion controller bindings when motion options are given.

Returns:

  • (Hash) —

    Data attributes for the section tag



108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
# File 'app/components/www/page_section_component.rb', line 108

def section_data_attributes
  attrs = @data.dup

  if @motion.present?
    attrs[:controller] = 'motion'
    attrs[:motion_animation_value] = @motion[:animation] if @motion[:animation]
    attrs[:motion_duration_value] = @motion[:duration] if @motion[:duration]
    attrs[:motion_distance_value] = @motion[:distance] if @motion[:distance]
    attrs[:motion_delay_value] = @motion[:delay] if @motion[:delay]
    attrs[:motion_stagger_value] = @motion[:stagger] if @motion[:stagger]
  end

  attrs
end

#section_tag_options ⇒ Hash

Builds the HTML options hash for the section tag.

Returns:

  • (Hash) —

    Options including class, optional id, and data attributes



126
127
128
129
130
131
 
# File 'app/components/www/page_section_component.rb', line 126

def section_tag_options
  opts = { class: section_classes }
  opts[:id] = @id if @id.present?
  opts[:data] = section_data_attributes if section_data_attributes.present?
  opts
end