Class: Yattho::BaseComponent

Inherits:

Object
ViewComponent::Base
Component
Yattho::BaseComponent

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](styled-system.com/table) used by [Yattho React](yattho.com/components/system-props).

Under the hood, system arguments are [mapped](github.com/yattho/view_components/blob/main/lib/yattho/classify.rb) to Yattho 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 Yattho::Beta::Heading.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> “`

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

Instance Method Summary collapse

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

## HTML attributes.

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

## Border

## Color

## Flex

## Grid

## Layout

## Position

## Spacing

## Typography

## Other

# 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`

# 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

Class: Yattho::BaseComponent

Overview

Direct Known Subclasses

Constant Summary collapse

Constants inherited from Component

Constants included from Status::Dsl

Constants included from ViewHelper

Constants included from TestSelectorHelper

Constants included from FetchOrFallbackHelper