# frozen_string_literal: true module Ariadne # Use `Link` for navigating from one page to another. `Link` styles anchor tags with default styling and hover text-decoration. class LinkComponent < Ariadne::Component DEFAULT_TAG = :a TAG_OPTIONS = [DEFAULT_TAG, :span].freeze DEFAULT_CLASSES = "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500" DEFAULT_ACTIONABLE_CLASSES = "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double" # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort. # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate. # Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information. # # @param tag [Symbol, String] The rendered tag name # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence. # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %> # @param classes [String] <%= link_to_classes_docs %> # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::TooltipComponent) %>. renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, type: Ariadne::TooltipComponent::TYPE_DEFAULT, classes: "", attributes: {}| raise ArgumentError, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." if @id.blank? Ariadne::TooltipComponent.new(tag: tag, for_id: @id, text: text, direction: direction, type: type, classes: classes, attributes: attributes) } # @example Default # <%= render(Ariadne::LinkComponent.new(href: "#")) { "Link" } %> # # @example Span as link # <%= render(Ariadne::LinkComponent.new(tag: :span, href: "#")) { "Span as a link" } %> # # @example 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::LinkComponent.new(href: "#", attributes: { id: "link-with-tooltip" })) do |c| %> # <% c.tooltip(text: "Tooltip text") %> # Link # <% end %> # # @param tag [String] <%= one_of(Ariadne::LinkComponent::TAG_OPTIONS) %> # @param href [String] URL to be used for the link. # @param actionable [Boolean] If true, adds additional classes to the link to make it more aware. # @param classes [String] <%= link_to_classes_docs %> # @param attributes [Hash] <%= link_to_attributes_docs %> def initialize(tag: DEFAULT_TAG, href:, actionable: false, classes: "", attributes: {}) @tag = check_incoming_tag(DEFAULT_TAG, tag) @attributes = attributes @attributes[:href] = href @id = @attributes[:id] @classes = class_names(DEFAULT_CLASSES, classes) @classes << DEFAULT_ACTIONABLE_CLASSES if actionable end def call render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do content.to_s + tooltip.to_s end end end end