Class: Ariadne::ButtonComponent

Inherits:
Component
  • Object
show all
Includes:
IconHelper
Defined in:
app/components/ariadne/button_component.rb

Overview

Use ‘Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.

Constant Summary collapse

DEFAULT_SCHEME = 
:default

:link
SCHEME_CLASS_MAPPINGS = 
{
  default: "text-blue-800 bg-blue-50 hover:bg-blue-100 border-blue-300 focus:ring-offset-blue-50 focus:ring-blue-600",
  info: "text-blue-800 bg-blue-50 hover:bg-blue-100 border-blue-300 focus:ring-offset-blue-50 focus:ring-blue-600",
  success: "text-green-800 bg-green-50 hover:bg-green-100 border-green-300 focus:ring-offset-green-50 focus:ring-green-600",
  warning: "text-yellow-800 bg-yellow-50 hover:bg-yellow-100 border-yellow-300 focus:ring-offset-yellow-50 focus:ring-yellow-600",
  danger: "text-red-800 bg-red-50 hover:bg-red-100 border-red-300 focus:ring-offset-red-50 focus:ring-red-600",
}.freeze
VALID_SCHEMES = 
SCHEME_CLASS_MAPPINGS.keys.freeze

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError, FetchOrFallbackHelper::TRUE_OR_FALSE

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

Instance Method Summary collapse

Methods included from IconHelper

#check_icon_presence!, #has_partial_icon?, #icon_presence!, #variant_presence!

Methods included from FetchOrFallbackHelper

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

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 ClassNameHelper

#class_names

Constructor Details

#initialize(tag: Ariadne::BaseButton::DEFAULT_TAG, scheme: DEFAULT_SCHEME, size: BaseButton::DEFAULT_SIZE, classes: "", attributes: {}) ⇒ ButtonComponent

Returns a new instance of ButtonComponent.

Examples:

Schemes

<%= render(Ariadne::ButtonComponent.new) { "Default" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :default)) { "Default" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :info)) { "Info" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :success)) { "Success" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :warning)) { "Warning" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :danger)) { "Danger" } %>

Sizes

<%= render(Ariadne::ButtonComponent.new(size: :s)) { "Small" } %>
<%= render(Ariadne::ButtonComponent.new(size: :m)) { "Medium" } %>

With leading visual

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "text-yellow-600") %>
  Button
<% end %>

With trailing visual

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.counter(count: 15) %>
  Button
<% end %>

With leading and trailing visuals

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
  <% c.counter(count: 15) %>
  Button
<% end %>

With tooltip

@description
  Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
@code
  <%= render(Ariadne::ButtonComponent.new(attributes: { id: "button-with-tooltip" })) do |c| %>
    <% c.tooltip(text: "Tooltip text") %>
    Button
  <% end %>

Parameters:

  • tag (Symbol) (defaults to: Ariadne::BaseButton::DEFAULT_TAG) —

    <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>

  • scheme (Symbol) (defaults to: DEFAULT_SCHEME) —

    <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>

  • size (Symbol) (defaults to: BaseButton::DEFAULT_SIZE) —

    <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>

  • type (Symbol) —

    <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>

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

    <%= link_to_classes_docs %>

  • attributes (Hash) (defaults to: {}) —

    <%= link_to_attributes_docs %>



121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
# File 'app/components/ariadne/button_component.rb', line 121

def initialize(
  tag: Ariadne::BaseButton::DEFAULT_TAG,
  scheme: DEFAULT_SCHEME,
  size: BaseButton::DEFAULT_SIZE,
  classes: "",
  attributes: {}
)
  @tag = tag
  @scheme = scheme

  @attributes = attributes
  @id = @attributes[:id]

  @size = fetch_or_raise(Ariadne::BaseButton::VALID_SIZES, size)
  @scheme = fetch_or_raise(VALID_SCHEMES, scheme)

  @classes = class_names(
    SCHEME_CLASS_MAPPINGS[@scheme],
    classes
  )
end