Class: Ariadne::BaseComponent

Inherits:

Component

Object
ViewComponent::Base
Component
Ariadne::BaseComponent

show all

Defined in:: app/components/ariadne/base_component.rb

Overview

All Ariadne ViewComponents accept a standard set of options: classes, which match Tailwind CSS classes, and attributes, which match HTML attributes..

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

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: "", attributes: {}) ⇒ BaseComponent constructor

## HTML attributes.

Methods included from LoggerHelper

#logger, #silence_deprecations?, #silence_warnings?

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#check_incoming_attribute, #check_incoming_tag, #check_incoming_value, #fetch_or_raise, #fetch_or_raise_boolean

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(tag:, classes: "", attributes: {}) ⇒ `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` | The height. | | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. | | `style` | `String` | Inline styles. | | `title` | `String` | The `title` attribute. | | `width` | `Integer` | The width. |

## Animation

## Border

## Color

## Flex

## Grid

## Layout

## Position

## Spacing

## Typography

## Other

# File 'app/components/ariadne/base_component.rb', line 133

def initialize(tag:, classes: "", attributes: {})
  @tag = tag

  @attributes = validate_attributes(tag: tag, attributes: attributes)
  @attributes[:"data-ariadne-view-component"] = true

  classes = classes.present? ? @attributes.merge(classes: classes) : @attributes.fetch(:classes, "")
  @classes = Ariadne::Classify.call(classes)

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

Instance Method Details

#call ⇒ `Object`

# File 'app/components/ariadne/base_component.rb', line 146

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

Class: Ariadne::BaseComponent

Overview

Constant Summary collapse

Constants inherited from Component

Constants included from Status::Dsl

Constants included from ViewHelper

Constants included from TestSelectorHelper

Constants included from FetchOrFallbackHelper