Class: Yattho::BaseComponent

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

Overview

All Yattho ViewComponents accept a standard set of options called system arguments, mimicking the styled-system API used by Yattho React.

Under the hood, system arguments are mapped to Yattho CSS classes, with any remaining options passed to Rails' 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:

<%= render Yattho::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>
  Hello world
<% end %>

Renders:

<h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>

Direct Known Subclasses

Alpha::SegmentedControl::Item

Constant Summary collapse

SELF_CLOSING_TAGS = 
[:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track,
:wbr].freeze

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

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

HTML attributes

System arguments include most HTML attributes. For example:

Name Type Description
aria Hash Aria attributes: aria: { label: "foo" } renders aria-label='foo'.
data Hash Data attributes: data: { foo: :bar } renders data-foo='bar'.
height Integer Height.
hidden Boolean Whether to assign the hidden attribute.
style String Inline styles.
title String The title attribute.
width Integer Width.

Animation

Name Type Description
animation Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:animation)) %>

Border

Name Type Description
border_bottom Integer Set to 0 to remove the bottom border.
border_left Integer Set to 0 to remove the left border.
border_radius Integer <%= one_of([0, 1, 2, 3]) %>
border_right Integer Set to 0 to remove the right border.
border_top Integer Set to 0 to remove the top border.
border Symbol <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %>
box_shadow Boolean, Symbol Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %>

Color

Name Type Description
bg Symbol Background color. <%= one_of(Yattho::Classify::Utilities.mappings(:bg)) %>
border_color Symbol Border color. <%= one_of(Yattho::Classify::Utilities.mappings(:border_color)) %>
color Symbol Text color. <%= one_of(Yattho::Classify::Utilities.mappings(:color)) %>

Flex

Name Type Description
align_items Symbol <%= one_of(Yattho::Classify::FLEX_ALIGN_ITEMS_VALUES) %>
align_self Symbol <%= one_of(Yattho::Classify::FLEX_ALIGN_SELF_VALUES) %>
direction Symbol <%= one_of(Yattho::Classify::FLEX_DIRECTION_VALUES) %>
flex Integer, Symbol <%= one_of(Yattho::Classify::FLEX_VALUES) %>
flex_grow Integer To enable, set to 0.
flex_shrink Integer To enable, set to 0.
flex_wrap Symbol <%= one_of(Yattho::Classify::FLEX_WRAP_MAPPINGS.keys) %>
justify_content Symbol <%= one_of(Yattho::Classify::FLEX_JUSTIFY_CONTENT_VALUES) %>

Grid

Name Type Description
clearfix Boolean Whether to assign the clearfix class.
col Integer Number of columns. <%= one_of(Yattho::Classify::Utilities.mappings(:col)) %>
container Symbol Size of the container. <%= one_of(Yattho::Classify::Utilities.mappings(:container)) %>

Layout

Name Type Description
display Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:display)) %>
w Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:w)) %>
h Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:h)) %>
hide Symbol Hide the element at a specific breakpoint. <%= one_of(Yattho::Classify::Utilities.mappings(:hide)) %>
visibility Symbol Visibility. <%= one_of(Yattho::Classify::Utilities.mappings(:visibility)) %>
vertical_align Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:vertical_align)) %>

Position

Name Type Description
bottom Boolean If false, sets bottom: 0.
float Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:float)) %>
left Boolean If false, sets left: 0.
position Symbol <%= one_of(Yattho::Classify::Utilities.mappings(:position)) %>
right Boolean If false, sets right: 0.
top Boolean If false, sets top: 0.

Spacing

Name Type Description
m Integer Margin. <%= one_of(Yattho::Classify::Utilities.mappings(:m)) %>
mb Integer Margin bottom. <%= one_of(Yattho::Classify::Utilities.mappings(:mb)) %>
ml Integer Margin left. <%= one_of(Yattho::Classify::Utilities.mappings(:ml)) %>
mr Integer Margin right. <%= one_of(Yattho::Classify::Utilities.mappings(:mr)) %>
mt Integer Margin top. <%= one_of(Yattho::Classify::Utilities.mappings(:mt)) %>
mx Integer Horizontal margins. <%= one_of(Yattho::Classify::Utilities.mappings(:mx)) %>
my Integer Vertical margins. <%= one_of(Yattho::Classify::Utilities.mappings(:my)) %>
p Integer Padding. <%= one_of(Yattho::Classify::Utilities.mappings(:p)) %>
pb Integer Padding bottom. <%= one_of(Yattho::Classify::Utilities.mappings(:pb)) %>
pl Integer Padding left. <%= one_of(Yattho::Classify::Utilities.mappings(:pl)) %>
pr Integer Padding right. <%= one_of(Yattho::Classify::Utilities.mappings(:pr)) %>
pt Integer Padding left. <%= one_of(Yattho::Classify::Utilities.mappings(:pt)) %>
px Integer Horizontal padding. <%= one_of(Yattho::Classify::Utilities.mappings(:px)) %>
py Integer Vertical padding. <%= one_of(Yattho::Classify::Utilities.mappings(:py)) %>

Typography

Name Type Description
font_family Symbol Font weight. <%= one_of([:mono]) %>
font_size String, Integer, Symbol <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %>
font_style Symbol Font weight. <%= one_of([:italic]) %>
font_weight Symbol Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %>
text_align Symbol Text alignment. <%= one_of([:left, :right, :center]) %>
text_transform Symbol Text alignment. <%= one_of([:uppercase]) %>
underline Boolean Whether text should be underlined.
word_break Symbol Whether to break words on line breaks. <%= one_of(Yattho::Classify::Utilities.mappings(:word_break)) %>

Other

Name Type Description
classes String CSS class name value to be concatenated with generated Yattho CSS classes.
test_selector String Adds data-test-selector='given value' in non-Production environments for testing purposes. 


153
154
155
156
157
158
159
160
161
162
163
 
# File 'app/components/yattho/base_component.rb', line 153

def initialize(tag:, classes: nil, **system_arguments)
  @tag = tag

  @system_arguments = validate_arguments(tag: tag, **system_arguments)

  @result = Yattho::Classify.call(**@system_arguments.merge(classes: classes))

  @system_arguments[:'data-view-component'] = true
  # Filter out Yattho keys so they don't get assigned as HTML attributes
  @content_tag_args = add_test_selector(@system_arguments).except(*Yattho::Classify::Utilities::UTILITIES.keys)
end

Instance Method Details

#call ⇒ Object 



165
166
167
168
169
170
171
 
# File 'app/components/yattho/base_component.rb', line 165

def call
  if SELF_CLOSING_TAGS.include?(@tag)
    tag(@tag, @content_tag_args.merge(@result))
  else
    content_tag(@tag, content, @content_tag_args.merge(@result))
  end
end