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

Examples:

Basic usage with border

<%= render Www::PageSectionComponent.new(id: 'features', border: :bottom) do %>
  <h2>Features</h2>
  <p>Content here...</p>
<% end %>

With colored background

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

With motion animation

<%= render Www::PageSectionComponent.new(
  motion: { animation: 'fadeInUp', distance: 70, duration: 0.8 }
) do %>
  <h2>Animated Section</h2>
<% 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 = 
{
  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 = 
{
  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



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

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

Returns:

  • (Boolean) 


120
121
122
 
# File 'app/components/www/page_section_component.rb', line 120

def render_container?
  @container.present?
end

#section_classes ⇒ Object 



90
91
92
93
94
95
96
 
# File 'app/components/www/page_section_component.rb', line 90

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

#section_data_attributes ⇒ Object 



98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
# File 'app/components/www/page_section_component.rb', line 98

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 ⇒ Object 



113
114
115
116
117
118
 
# File 'app/components/www/page_section_component.rb', line 113

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