Class: Daisy::Feedback::AlertComponent

Inherits:

LocoMotion::BaseComponent

• Object
• ViewComponent::Base
• LocoMotion::BaseComponent
• Daisy::Feedback::AlertComponent

Includes:

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

Defined in:

app/components/daisy/feedback/alert_component.rb

Overview

The AlertComponent displays an important message to users. It can be used to show information, success messages, warnings, or errors. Alerts can include an optional icon at the start and customizable content.

Component Parts

The AlertComponent allows for customization of the following parts by passing the {part_name}_css and {part_name}_html options to the component.

• content_wrapper — A wrapper for the main content of the alert. This allows for proper spacing and alignment with the icon.
• close — A close button that appears when closable is true.

Examples

Basic Alert

= daisy_alert do
  This is a standard alert message.

Alert with Icon

= daisy_alert(icon: "information-circle") do
  Here's some important information!

Alert Types

= daisy_alert(icon: "information-circle", css: "alert-info") do
  Information alert.

= daisy_alert(icon: "check-circle", css: "alert-success") do
  Success alert.

= daisy_alert(icon: "exclamation-triangle", css: "alert-warning") do
  Warning alert.

= daisy_alert(icon: "exclamation-circle", css: "alert-error") do
  Error alert.

Default

= daisy_alert do
  This is an default alert.

Info

= daisy_alert(css: "alert-info") do
  This is an info alert.

Success

= daisy_alert(css: "alert-success") do
  This is a success alert.

Warning

= daisy_alert(css: "alert-warning") do
  This is a warning alert.

Error

= daisy_alert(css: "alert-error") do
  This is an error alert.

Soft Info

= daisy_alert(css: "alert-info alert-soft") do
  This is a soft info alert.

Soft Success

= daisy_alert(css: "alert-success alert-soft") do
  This is a soft success alert.

Soft Warning

= daisy_alert(css: "alert-warning alert-soft") do
  This is a soft warning alert.

Soft Error

= daisy_alert(css: "alert-error alert-soft") do
  This is a soft error alert.

Outline Info

= daisy_alert(css: "alert-info alert-outline") do
  This is an outline info alert.

Outline Success

= daisy_alert(css: "alert-success alert-outline") do
  This is an outline success alert.

Outline Warning

= daisy_alert(css: "alert-warning alert-outline") do
  This is an outline warning alert.

Outline Error

= daisy_alert(css: "alert-error alert-outline") do
  This is an outline error alert.

Dash Info

= daisy_alert(css: "alert-info alert-dash") do
  This is a dash info alert.

Dash Success

= daisy_alert(css: "alert-success alert-dash") do
  This is a dash success alert.

Dash Warning

= daisy_alert(css: "alert-warning alert-dash") do
  This is a dash warning alert.

Dash Error

= daisy_alert(css: "alert-error alert-dash") do
  This is a dash error alert.

Closable Alert

= daisy_alert(icon: "information-circle", css: "alert-info", closable: true) do
  This alert can be closed manually.

Auto-dismissing Alert

= daisy_alert(icon: "check-circle", css: "alert-success", autoclose: true, timeout: 3000) do
  This alert will auto-dismiss in 3 seconds.

Clickable Link Alert

= daisy_alert(icon: "information-circle", css: "alert-info", href: "/docs") do
  Click to view documentation.

Stimulus Action Alert

= daisy_alert(icon: "exclamation-triangle", css: "alert-warning", action: "click->my-controller#handle") do
  Click to trigger custom action.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

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

Instance Attribute Summary

• #closable ⇒ Boolean (also: #closable?) readonly

  Whether or not this alert can be closed.

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary

• #before_render ⇒ Object
• #default_icon_size ⇒ Object
• #initialize(*args, **kws, &block) ⇒ AlertComponent constructor

  Creates a new Alert 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(*args, **kws, &block) ⇒ AlertComponent

Creates a new Alert component.

Parameters:

• args (Array) —

  Positional arguments passed to the parent class.

• kws (Hash) —

  Keyword arguments for customizing the alert.

Options Hash (**kws):

• icon (String) —

  The name (or [library:]name[/variant] token) of the icon to display at the start of the alert.

• icon_css (String) —

  Additional CSS classes for the icon.

• icon_options (Hash) —

  Additional keyword arguments forwarded to the icon component that renders the icon. Rarely needed.

• icon_html (Hash) —

  Additional HTML attributes for the icon element, such as data or aria attributes. To pick an icon variant, use the icon token instead (e.g. "check-circle/solid").

• css (String) —

  Additional CSS classes for the alert. Use alert-info, alert-success, alert-warning, or alert-error for different alert types.

• href (String) —

  Converts alert to a clickable link.

• target (String) —

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

• title (String) —

  The HTML title attribute for the <a> tag when href is set.

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

  Stimulus action to fire on click.

• timeout (Integer) —

  Auto-dismiss timeout in milliseconds. If nil, uses global configuration default. If false, no auto-dismiss.

• autoclose (Boolean) —

  Enable auto-dismiss using timeout. Must be true for auto-dismiss to work.

• closable (Boolean) —

  Show close button. Set to true to enable manual dismissal.

# File 'app/components/daisy/feedback/alert_component.rb', line 185

def initialize(*args, **kws, &block)
  super

  @icon = config_option(:icon)
  @timeout = config_option(:timeout)
  @autoclose = config_option(:autoclose)
  @closable = config_option(:closable, false)

  # `action:` (and its `data-action`) is handled by ActionableComponent,
  # pulled in via LinkableComponent. Emitting it here too would render a
  # duplicate `data-action` attribute.
end

Instance Attribute Details

#closable ⇒ Boolean (readonly) Also known as: closable?

Returns Whether or not this alert can be closed.

Returns:

• (Boolean) —

  Whether or not this alert can be closed.

# File 'app/components/daisy/feedback/alert_component.rb', line 127

def closable
  @closable
end

Instance Method Details

#before_render ⇒ Object

# File 'app/components/daisy/feedback/alert_component.rb', line 202

def before_render
  setup_component

  super
end

#default_icon_size ⇒ Object

# File 'app/components/daisy/feedback/alert_component.rb', line 198

def default_icon_size
  "where:size-6"
end