Class: Primer::BaseComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/base_component.rb

Overview

All Primer ViewComponents accept a standard set of options called System Arguments, mimicking the [styled-system API](styled-system.com/table) [used by Primer React](primer.style/components/system-props).

Under the hood, System Arguments are [mapped](github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails’ [‘content_tag`](api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).

## Responsive values

To apply different values across responsive breakpoints, pass an array with up to five values in the order ‘[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.

For example:

“‘erb <%= render Primer::HeadingComponent.new(mt: [0, nil, nil, 4, 2]) do %>

Hello world

<% end %> “‘

Renders:

“‘html <h1 class=“mt-0 mt-lg-4 mt-xl-2”>Hello world</h1> “`

Constant Summary collapse

TEST_SELECTOR_TAG = 
:test_selector

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods included from FetchOrFallbackHelper

#fetch_or_fallback

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(tag:, classes: nil, **system_arguments) ⇒ BaseComponent

Returns a new instance of BaseComponent.

Parameters:

  • m (Integer) —

    Margin. <%= one_of((-6..6).to_a) %>

  • mt (Integer) —

    Margin left. <%= one_of((-6..6).to_a) %>

  • mr (Integer) —

    Margin right. <%= one_of((-6..6).to_a) %>

  • mb (Integer) —

    Margin bottom. <%= one_of((-6..6).to_a) %>

  • ml (Integer) —

    Margin left. <%= one_of((-6..6).to_a) %>

  • mx (Integer) —

    Horizontal margins. <%= one_of((-6..6).to_a + [:auto]) %>

  • my (Integer) —

    Vertical margins. <%= one_of((-6..6).to_a) %>

  • m (Integer) —

    Padding. <%= one_of((0..6).to_a) %>

  • mt (Integer) —

    Padding left. <%= one_of((0..6).to_a) %>

  • mr (Integer) —

    Padding right. <%= one_of((0..6).to_a) %>

  • mb (Integer) —

    Padding bottom. <%= one_of((0..6).to_a) %>

  • ml (Integer) —

    Padding left. <%= one_of((0..6).to_a) %>

  • mx (Integer) —

    Horizontal padding. <%= one_of((0..6).to_a) %>

  • my (Integer) —

    Vertical padding. <%= one_of((0..6).to_a) %>

  • position (Symbol) —

    <%= one_of([:relative, :absolute, :fixed]) %>

  • top (Boolean) —

    If ‘false`, sets `top: 0`.

  • right (Boolean) —

    If ‘false`, sets `right: 0`.

  • bottom (Boolean) —

    If ‘false`, sets `bottom: 0`.

  • left (Boolean) —

    If ‘false`, sets `left: 0`.

  • display (Symbol) —

    <%= one_of([:block, :none, :inline, :inline_block, :table, :table_cell]) %>

  • hide (Symbol) —

    Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %>

  • vertical_align (Symbol) —

    <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %>

  • float (Symbol) —

    <%= one_of([:left, :right]) %>

  • font_size (String) —

    <%= one_of([“00”, “0”, “1”, “2”, “3”, “4”, “5”, “6”]) %>

  • tag (Symbol) —

    HTML tag name to be passed to ‘tag.send`

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

    CSS class name value to be concatenated with generated Primer CSS classes



62
63
64
65
66
67
68
 
# File 'app/components/primer/base_component.rb', line 62

def initialize(tag:, classes: nil, **system_arguments)
  @tag = tag
  @result = Primer::Classify.call(**system_arguments.merge(classes: classes))

  # Filter out Primer keys so they don't get assigned as HTML attributes
  @content_tag_args = add_test_selector(system_arguments).except(*Primer::Classify::VALID_KEYS)
end

Instance Method Details

#call ⇒ Object 



70
71
72
 
# File 'app/components/primer/base_component.rb', line 70

def call
  content_tag(@tag, content, **@content_tag_args.merge(@result))
end