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 = 
{
  link: Ariadne::LinkComponent::DEFAULT_ACTIONABLE_CLASSES,
  none: "",
  default: "ariadne-text-slate-800 ariadne-bg-slate-50 hover:ariadne-bg-slate-100 ariadne-border-slate-300 focus:ariadne-ring-offset-slate-50 focus:ariadne-ring-slate-600",
  info: "ariadne-text-slate-800 ariadne-bg-slate-50 hover:ariadne-bg-slate-100 ariadne-border-slate-300 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-slate-600",
  success: "ariadne-text-green-800 ariadne-bg-green-50 hover:ariadne-bg-green-100 ariadne-border-green-300 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
  warning: "ariadne-text-yellow-800 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 ariadne-border-yellow-300 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
  danger: "ariadne-text-red-800 ariadne-bg-red-50 hover:ariadne-bg-red-100 ariadne-border-red-300 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
}.freeze
VALID_SCHEMES = 
SCHEME_CLASS_MAPPINGS.keys.freeze

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::INTEGER_TYPES, FetchOrFallbackHelper::InvalidValueError, FetchOrFallbackHelper::TRUE_OR_FALSE

Constants inherited from Component

Component::BASE_HIDDEN_CLASS, Component::BASE_MAIN_CLASSES, Component::BASE_WRAPPER_CLASSES, Component::INVALID_ARIA_LABEL_TAGS

Constants included from ActionViewExtensions::FormHelper

ActionViewExtensions::FormHelper::DEFAULT_FORM_CLASSES

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Instance Method Summary collapse

Methods included from IconHelper

#check_icon_presence!, ensure_valid_variant, #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, #fetch_or_raise_integer

Methods included from LoggerHelper

#logger, #silence_deprecations?, #silence_warnings?

Methods included from ActionViewExtensions::FormHelper

#ariadne_form_with

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(tag: Ariadne::BaseButton::DEFAULT_TAG, type: Ariadne::BaseButton::DEFAULT_TYPE, scheme: DEFAULT_SCHEME, size: BaseButton::DEFAULT_SIZE, dropdown: false, 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: :sm)) { "Small" } %>
<%= render(Ariadne::ButtonComponent.new(size: :md)) { "Medium" } %>

With leading visual

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "ariadne-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) %>

  • type (Symbol) (defaults to: Ariadne::BaseButton::DEFAULT_TYPE) —

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

  • 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) %>

  • dropdown (Boolean) (defaults to: false) —

    Whether or not to render a dropdown caret.

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

    <%= link_to_classes_docs %>

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

    <%= link_to_attributes_docs %>



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

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

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

  @size = fetch_or_raise(Ariadne::BaseButton::VALID_SIZES, size)
  @scheme = fetch_or_raise(VALID_SCHEMES, scheme)
  @scheme = LINK_SCHEME if @tag == :a

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