Class: Daisy::Navigation::LinkComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
LocoMotion::Concerns::IconableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent
Defined in:
app/components/daisy/navigation/link_component.rb

Overview

Creates a styled link component that can be used for navigation or inline text links. This component is designed to work similarly to Rails' link_to helper.

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 collapse

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) ⇒ LinkComponent

Create a new instance of the LinkComponent.

Parameters:

  • args (Array) —

    Looks for one or two positional arguments.

    • If passed two positional arguments, the first is considered the title and the second is considered the href.
    • If passed only one positional argument, it is treated as the href and we assume the title will be provided in the block.
    • If no text is passed in the block, we will use the href as the title.
  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • title (String) —

    The text to display in the link. Not required if providing block content.

  • href (String) —

    The URL to visit when the link is clicked.

  • target (String) —

    The target attribute for the anchor tag (e.g., "_blank").

  • action (String) —

    A Stimulus action wired to the link via its data-action attribute (provided by LocoMotion::Concerns::ActionableComponent). Stimulus infers the click event, so action: "my-controller#handle" is shorthand for action: "click->my-controller#handle". Have the controller call event.preventDefault() (or omit href) when the link only drives a controller rather than navigating.

  • 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.

  • icon (String) —

    The name of Hero icon to render inside the link. 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_html (Hash) —

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

  • left_icon (String) —

    The name of Hero icon to render inside the link to the left of the text.

  • left_icon_css (String) —

    The CSS classes to apply to the left icon.

  • left_icon_html (Hash) —

    Additional HTML attributes to apply to the left icon.

  • right_icon (String) —

    The name of Hero icon to render inside the link to the right of the text.

  • right_icon_css (String) —

    The CSS classes to apply to the right icon.

  • right_icon_html (Hash) —

    Additional HTML attributes to apply to the right icon.

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Style: link-primary, link-secondary, link-accent
    • State: link-hover
    • Text: text-sm, text-xl, text-2xl
  • tip (String) —

    The tooltip text to display when hovering over the component.



115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
# File 'app/components/daisy/navigation/link_component.rb', line 115

def initialize(*args, **kws)
  super

  if args.size == 1
    # If given one arg, assume it's the href and / or the title
    # (if no block is given)
    @title = args[0]
    @href = args[0]
  elsif args.size == 2
    # If given two args, assume the first is the title and the second is
    # the href
    @title = args[0]
    @href = args[1]
  else
    # Otherwise, assume they pass everything as keyword arguments
    @title = config_option(:title)
    @href = config_option(:href)
  end

  @target = config_option(:target)
end

Instance Method Details

#before_render ⇒ Object

Adds the relevant Daisy classes and applies the href and target attributes if provided.



141
142
143
144
145
 
# File 'app/components/daisy/navigation/link_component.rb', line 141

def before_render
  super

  setup_component
end

#call ⇒ Object

Renders the link 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.



154
155
156
157
158
159
160
161
162
163
164
 
# File 'app/components/daisy/navigation/link_component.rb', line 154

def call
  if content?
    part(:component) { content }
  else
    part(:component) do
      concat(render_left_icon)
      concat(@title)
      concat(render_right_icon)
    end
  end
end