Class: Daisy::DataDisplay::BadgeComponent

Inherits:

LocoMotion::BaseComponent

• Object
• ViewComponent::Base
• LocoMotion::BaseComponent
• Daisy::DataDisplay::BadgeComponent

Includes:

LocoMotion::Concerns::IconableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent

Defined in:

app/components/daisy/data_display/badge_component.rb

Overview

The Badge component renders as a small, rounded element used to display status, labels, or notifications. It supports various background colors and can be used inline with text.

Includes the LocoMotion::Concerns::TippableComponent module to enable easy tooltip addition.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary

• #before_render ⇒ Object
• #call ⇒ Object

  Renders the badge component.

• #initialize(title = nil, **kws, &block) ⇒ BadgeComponent constructor

  Create a new Badge component.

Methods included from LocoMotion::Concerns::IconableComponent

#has_icons?, #left_icon_html, #render_left_icon, #render_right_icon, #right_icon_html

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(title = nil, **kws, &block) ⇒ BadgeComponent

Create a new Badge component.

Parameters:

• title (String) (defaults to: nil) —

  The text to display in the badge. You can also pass the title as a keyword argument or provide content via a block.

• kws (Hash) —

  The keyword arguments for the component.

Options Hash (**kws):

• title (String) —

  The text to display in the badge. You can also pass the title as the first argument or provide content via a block.

• href (String) —

  A path or URL to which the user will be directed when the badge is clicked. Forces the Badge to use an <a> tag.

• target (String) —

  The HTML target attribute for the <a> tag (_blank, _parent, or a specific tab / window / iframe, etc).

• turbo_frame (String) —

  The Turbo Frame to target, rendered as data-turbo-frame.

• turbo_action (String, Symbol) —

  How Turbo Drive updates the browser history for the visit, rendered as data-turbo-action (e.g. :advance or :replace).

• turbo_method (String, Symbol) —

  The HTTP method Turbo should use for the request, rendered as data-turbo-method (e.g. :delete).

• turbo_confirm (String) —

  A confirmation prompt Turbo shows before submitting, rendered as data-turbo-confirm.

• action (String) —

  A Stimulus action wired to the badge via its data-action attribute. Stimulus infers the click event, so action: "my-controller#handle" works as a shorthand for action: "click->my-controller#handle".

• icon (String) —

  The icon to render inside the badge, as a qualified [library:]name[/variant] token. This is an alias of left_icon.

• icon_css (String) —

  The CSS classes to apply to the icon. This is an alias of left_icon_css.

• icon_options (Hash) —

  Additional keyword arguments forwarded to the icon component. This is an alias of left_icon_options.

• icon_html (Hash) —

  Additional HTML attributes to apply to the icon. This is an alias of left_icon_html.

• left_icon (String) —

  The icon to render inside the badge to the left of the text, as a qualified [library:]name[/variant] token.

• left_icon_css (String) —

  The CSS classes to apply to the left icon.

• left_icon_options (Hash) —

  Additional keyword arguments forwarded to the left icon component (e.g. tip:).

• left_icon_html (Hash) —

  Additional HTML attributes to apply to the left icon.

• right_icon (String) —

  The icon to render inside the badge to the right of the text, as a qualified [library:]name[/variant] token.

• right_icon_css (String) —

  The CSS classes to apply to the right icon.

• right_icon_options (Hash) —

  Additional keyword arguments forwarded to the right icon component (e.g. tip:).

• right_icon_html (Hash) —

  Additional HTML attributes to apply to the right icon.

# File 'app/components/daisy/data_display/badge_component.rb', line 137

def initialize(title = nil, **kws, &block)
  super

  @simple_title = config_option(:title, title)
end

Instance Method Details

#before_render ⇒ Object

# File 'app/components/daisy/data_display/badge_component.rb', line 143

def before_render
  # Run component setup *before* super to allow LinkableComponent to override tag
  setup_component

  super
end

#call ⇒ Object

Renders the badge component.

Because this is an inline component which might be utilized alongside text, we utilize the call method instead of a template to ensure that no additional whitespace gets added to the output.

# File 'app/components/daisy/data_display/badge_component.rb', line 157

def call
  part(:component) do
    concat(render_left_icon)
    concat(content || @simple_title)
    concat(render_right_icon)
  end
end