Class: Ariadne::BaseButton

Inherits:
Component
  • Object
show all
Defined in:
app/components/ariadne/base_button.rb

Overview

Use BaseButton to render an unstyled ‘<button>` tag that can be customized.

Constant Summary collapse

DEFAULT_TAG = 
:button
TAG_OPTIONS = 
[DEFAULT_TAG, :a, :summary].freeze
DEFAULT_TYPE = 
:button
TYPE_SUBMIT = 
:submit
VALID_TYPES = 
[DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
SIZE_CLASS_MAPPINGS = 
{
  xs: "ariadne-px-2.5 ariadne-py-1.5 ariadne-text-xs ariadne-font-medium ariadne-rounded",
  sm: "ariadne-px-3 ariadne-py-2 ariadne-text-sm ariadne-leading-4 ariadne-font-medium ariadne-rounded-m",
  md: "ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md",
  lg: "ariadne-px-4 ariadne-py-2 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
  xl: "ariadne-px-6 ariadne-py-3 ariadne-text-base ariadne-font-medium ariadne-rounded-md",
}.freeze
VALID_SIZES = 
SIZE_CLASS_MAPPINGS.keys.freeze
DEFAULT_CLASSES = 
"ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
DEFAULT_NUDE_CLASSES = 
"focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
DEFAULT_SIZE = 
:md

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

Constants included from FetchOrFallbackHelper

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

Instance Method Summary collapse

Methods included from ActionViewExtensions::FormHelper

#ariadne_form_with

Methods included from ClassNameHelper

#class_names

Methods included from LoggerHelper

#logger, #silence_deprecations?, #silence_warnings?

Methods included from FetchOrFallbackHelper

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

Constructor Details

#initialize(tag: DEFAULT_TAG, type: DEFAULT_TYPE, size: DEFAULT_SIZE, classes: "", attributes: {}) ⇒ BaseButton

Returns a new instance of BaseButton.

Examples:

Setting the size

<%= render(Ariadne::BaseButton.new(size: :xs)) { "I am an extra small button!" } %>
<%= render(Ariadne::BaseButton.new(size: :sm)) { "I am a small button!" } %>
<%= render(Ariadne::BaseButton.new(size: :md)) { "I am a medium button!" } %>
<%= render(Ariadne::BaseButton.new(size: :lg)) { "I am a large button!" } %>
<%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>

Parameters:

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

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

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

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

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

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

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

    <%= link_to_classes_docs %>

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

    <%= link_to_attributes_docs %>



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
# File 'app/components/ariadne/base_button.rb', line 39

def initialize(
  tag: DEFAULT_TAG,
  type: DEFAULT_TYPE,
  size: DEFAULT_SIZE,
  classes: "",
  attributes: {}
)
  @attributes = attributes
  @tag = fetch_or_raise(TAG_OPTIONS, tag)
  @size = fetch_or_raise(VALID_SIZES, size)

  if button?
    @attributes[:type] = fetch_or_raise(VALID_TYPES, type)
    @classes = class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
  else
    @classes = class_names(DEFAULT_NUDE_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
  end
end

Instance Method Details

#call ⇒ Object 



58
59
60
 
# File 'app/components/ariadne/base_button.rb', line 58

def call
  render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
end