ariadne_view_components 0.0.4 → 0.0.7

data/app/components/ariadne/flash_component.html.erb

@@ -1,27 +1,27 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
-  <div class="rounded-md p-4 <%= BG_SCHEME_CLASS_MAPPINGS[@scheme] %>">
-    <div class="flex">
-      <div class="flex-shrink-0">
+  <div class="ariadne-rounded-md ariadne-p-4 <%= BG_SCHEME_CLASS_MAPPINGS[@scheme] %>">
+    <div class="ariadne-flex">
+      <div class="ariadne-flex-shrink-0">
         <%= icon %>
       </div>
-      <div class="ml-3">
-        <div class="mt-2 text-sm <%= CONTENT_SCHEME_CLASS_MAPPINGS[@scheme] %>">
+      <div class="ariadne-ml-3">
+        <div class="ariadne-mt-2 ariadne-text-sm <%= CONTENT_SCHEME_CLASS_MAPPINGS[@scheme] %>">
           <p><%= content %></p>
         </div>
         <% if has_action? %>
-          <div class="mt-4 pt-5">
-            <div class="-mx-2 -my-1.5 flex">
+          <div class="ariadne-mt-4 ariadne-pt-5">
+            <div class="ariadne--mx-2 ariadne--my-1.5 ariadne-flex">
               <%= action %>
             </div>
           </div>
         <% end %>
       </div>
       <% if dismissible? %>
-        <div class="pl-3">
-          <div class="-mx-1.5 -my-1.5">
-            <button type="button" class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 <%= dismissible_classes %>">
-              <span class="sr-only">Dismiss</span>
-              <%= ariadne_heroicon icon: :x, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE %>
+        <div class="ariadne-pl-3">
+          <div class="ariadne--mx-1.5 ariadne--my-1.5">
+            <button type="button" class="ariadne-inline-flex ariadne-rounded-md ariadne-p-1.5 focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 <%= dismissible_classes %>">
+              <span class="ariadne-sr-only">Dismiss</span>
+              <%= ariadne_heroicon icon: :"x-mark", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE %>
             </button>
           </div>
         </div>

data/app/components/ariadne/flash_component.rb

@@ -8,29 +8,29 @@ module Ariadne
     DEFAULT_SCHEME = :default
 
     DISMISSIBLE_SCHEME_CLASS_MAPPINGS = {
-      default: "text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-offset-blue-50 focus:ring-blue-600",
-      info: "text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-offset-blue-50 focus:ring-blue-600",
-      success: "text-green-500 bg-green-50 hover:bg-green-100 focus:ring-offset-green-50 focus:ring-green-600",
-      warning: "text-yellow-500 bg-yellow-50 hover:bg-yellow-100 focus:ring-offset-yellow-50 focus:ring-yellow-600",
-      danger: "text-red-500 bg-red-50 hover:bg-red-100 focus:ring-offset-red-50 focus:ring-red-600",
+      default: "ariadne-text-blue-500 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
+      info: "ariadne-text-blue-500 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
+      success: "ariadne-text-green-500 ariadne-bg-green-50 hover:ariadne-bg-green-100 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
+      warning: "ariadne-text-yellow-500 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
+      danger: "ariadne-text-red-500 ariadne-bg-red-50 hover:ariadne-bg-red-100 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
     }.freeze
     VALID_DISMISSIBLE_SCHEMES = DISMISSIBLE_SCHEME_CLASS_MAPPINGS.keys.freeze
 
     BG_SCHEME_CLASS_MAPPINGS = {
-      default: "bg-blue-50",
-      info: "bg-blue-50",
-      success: "bg-green-50",
-      warning: "bg-yellow-50",
-      danger: "bg-red-50",
+      default: "ariadne-bg-blue-50",
+      info: "ariadne-bg-blue-50",
+      success: "ariadne-bg-green-50",
+      warning: "ariadne-bg-yellow-50",
+      danger: "ariadne-bg-red-50",
     }.freeze
     VALID_BG_SCHEMES = BG_SCHEME_CLASS_MAPPINGS.keys.freeze
 
     CONTENT_SCHEME_CLASS_MAPPINGS = {
-      default: "text-blue-700",
-      info: "text-blue-700",
-      success: "text-green-700",
-      warning: "text-yellow-700",
-      danger: "text-red-700",
+      default: "ariadne-text-blue-700",
+      info: "ariadne-text-blue-700",
+      success: "ariadne-text-green-700",
+      warning: "ariadne-text-yellow-700",
+      danger: "ariadne-text-red-700",
     }.freeze
     VALID_CONTENT_SCHEMES = CONTENT_SCHEME_CLASS_MAPPINGS.keys.freeze
 
@@ -42,7 +42,7 @@ module Ariadne
     #
     # @option params [Symbol] :icon The rendered tag name
     # @option params [Symbol] :icon Name of <%= link_to_heroicons %> to use.
-    # @option params [Symbol] :variant <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @option params [Symbol] :variant <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
     # @option params [String] :classes  <%= link_to_classes_docs %>
     # @option params [Hash] :attributes Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
     renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
@@ -84,7 +84,7 @@ module Ariadne
     # @example With actions
     #   <%= render(Ariadne::FlashComponent.new) do |component| %>
     #     <% component.action do %>
-    #       <%= render(Ariadne::ButtonComponent.new(size: :s)) { "Take action" } %>
+    #       <%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Take action" } %>
     #     <% end %>
     #     This is a flash message with actions!
     #   <% end %>

data/app/components/ariadne/flex_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Adds a flex container to the page.
+  class FlexComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "flex"
+
+    VALID_TYPES = [:row, :column, :row_reverse, :column_reverse].freeze
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::FlexComponent.new(type: :column)) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param type [Symbol] <%= one_of(Ariadne::FlexComponent::VALID_TYPES) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, type:, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @type = fetch_or_raise(VALID_TYPES, type)
+
+      flex_class = case @type
+      when :row
+        "ariadne-flex-row"
+      when :column
+        "ariadne-flex-col"
+      when :row_reverse
+        "ariadne-flex-row-reverse"
+      when :column_reverse
+        "ariadne-flex-col-reverse"
+      end
+
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+        flex_class
+      )
+
+      @attributes = attributes
+    end
+
+    def call
+      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
+    end
+  end
+end

data/app/components/ariadne/footer_component.html.erb

@@ -1,6 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: :footer, classes: @classes, attributes: @attributes) do |footer| %>
   <%= render Ariadne::ContainerComponent.new do |container| %>
-    <p class="mt-6 text-sm text-slate-500 sm:mt-0">
+    <p class="ariadne-mt-6 ariadne-text-sm text-slate-500 sm:ariadne-mt-0">
       <%= content %>
     </p>
   <% end %>

data/app/components/ariadne/footer_component.rb

@@ -3,7 +3,7 @@
 module Ariadne
   # Adds a footer to the bottom of every page.
   class FooterComponent < Ariadne::Component
-    DEFAULT_CLASSES = "py-5"
+    DEFAULT_CLASSES = "ariadne-py-5"
 
     # @example Default
     #

data/app/components/ariadne/grid_component.html.erb

@@ -1,14 +1,23 @@
 <%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
   <% items.each do |item| %>
-    <li class="col-span-1 flex flex-col text-center rounded-lg shadow divide-y divide-gray-200 my-4 py-4 px-4 text-black-700 border-black <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "bg-white" %>">
+    <li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "ariadne-bg-white" %>">
       <% if item.has_href? %>
         <%= render Ariadne::LinkComponent.new(href: item.href) do %>
-          <div class="flex-1 flex flex-col p-8">
-            <%= item.entry %>
+          <%= item.entry %>
+        <% end %>
+        <% if item.actions.any? %>
+          <div>
+            <div class="ariadne--mt-px ariadne-flex ariadne-divide-x">
+              <% item.actions.each_with_index do |action, idx| %>
+                <div class="<%= idx.zero? ? '' : 'ariadne--ml-px ' %>w-0 ariadne-flex-1 ariadne-flex">
+                  <%= action %>
+                </div>
+              <% end %>
+            </div>
           </div>
         <% end %>
       <% else %>
-        <div class="flex-1 flex flex-col p-8">
+        <div class="ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8">
           <%= item.entry %>
         </div>
       <% end %>

data/app/components/ariadne/grid_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Arranges items as a grid.
+  # Arranges items as a ariadne-grid.
   class GridComponent < Ariadne::Component
-    DEFAULT_CLASSES = "grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+    DEFAULT_CLASSES = "ariadne-grid ariadne-gap-6 sm:ariadne-grid-cols-2 lg:ariadne-grid-cols-3"
 
-    DEFAULT_LINK_COLOR_CLASSES = "text-button-text-color bg-button-bg-color hover:bg-button-hover-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+    DEFAULT_LINK_COLOR_CLASSES = "ariadne-text-button-text-color ariadne-bg-button-bg-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
 
-    # The items to show in the grid.
-    renders_many :items, "Item"
+    # The items to show in the ariadne-grid.
+    renders_many :items, "GridItem"
 
     # @example Default
     #
@@ -28,18 +28,29 @@ module Ariadne
 
     # This component is part of `GridComponent` and should not be
     # used as a standalone component.
-    class Item < Ariadne::Component
-      renders_one :entry, lambda { |static_content = nil, &block|
-        next static_content if static_content.present?
+    class GridItem < Ariadne::Component
+      DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow ariadne-my-4 text-black-700 ariadne-border-black"
 
-        view_context.capture { block&.call }
+      DEFAULT_ENTRY_CLASSES = "group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-bg-button-hover-color hover:ariadne-text-gray-500 ariadne-rounded-lg"
+      renders_one :entry, lambda { |classes: "", &block|
+        view_context.capture do
+          render(Ariadne::BaseComponent.new(tag: :div, classes: classes)) { block&.call }
+        end
       }
 
-      attr_reader :href
+      DEFAULT_ACTION_LINK_CLASSES = "text-button-text-color ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent ariadne-rounded-bl-lg ariadne-rounded-lg"
+      renders_many :actions, lambda { |href:, icon:, label:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}, text_classes: ""|
+        actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, classes)
+        render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do
+          render(Ariadne::HeroiconComponent.new(icon: icon, size: size, variant: variant, text_classes: text_classes)) { label }
+        end
+      }
+
+      attr_reader :href, :classes, :attributes
 
       def initialize(href: nil, classes: "", attributes: {})
         @href = href
-        @classes = classes
+        @classes = class_names(DEFAULT_ITEM_CLASSES, classes)
         @attributes = attributes
       end
 

data/app/components/ariadne/header_component.html.erb

@@ -1,23 +1,23 @@
  <%= render Ariadne::BaseComponent.new(tag: :header, classes: @classes, attributes: @attributes) do |header| %>
   <%= render Ariadne::ContainerComponent.new do |container| %>
-    <nav class="relative z-50 flex justify-between">
-      <div class="flex items-center md:gap-x-12">
+    <nav class="ariadne-relative ariadne-z-50 ariadne-flex ariadne-justify-between">
+      <div class="ariadne-flex ariadne-items-center md:ariadne-gap-x-12">
         <% if has_logo? %>
-          <%= render Ariadne::LinkComponent.new(href: @href) do %>
+          <%= render Ariadne::LinkComponent.new(href: @href, classes: "ariadne-text-billy-purple") do %>
             <% if has_image_logo? %>
-              <span class="sr-only"><%= content %></span>
+              <span class="ariadne-sr-only"><%= content %></span>
             <% end %>
             <%= logo %>
           <% end %>
         <% end %>
-        <div class="md:flex md:gap-x-6">
+        <div class="md:ariadne-flex md:ariadne-gap-x-6">
           <% navigation_links.each do |link| %>
             <%= link %>
           <% end %>
         </div>
       </div>
-      <div class="flex items-center gap-x-5 md:gap-x-8">
-        <div class="md:block">
+      <div class="ariadne-flex ariadne-items-center ariadne-gap-x-5 md:ariadne-gap-x-8">
+        <div class="md:ariadne-block">
           <% action_links.each do |link| %>
             <%= link %>
           <% end %>

data/app/components/ariadne/header_component.rb

@@ -3,12 +3,12 @@
 module Ariadne
   # Represents the top navigation bar on every page.
   class HeaderComponent < Ariadne::Component
-    DEFAULT_CLASSES = "sticky top-0 z-50 px-4 py-2 bg-white shadow-sm shadow-slate-900/5 transition duration-500"
-    # flex flex-wrap items-center justify-between bg-white   dark:shadow-none  dark:bg-transparent
-    LINK_CLASSES = "rounded-lg py-1 px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+    DEFAULT_CLASSES = "ariadne-sticky ariadne-top-0 ariadne-z-50 ariadne-px-4 ariadne-py-5 ariadne-bg-white ariadne-shadow-sm shadow-slate-900/5 ariadne-transition ariadne-duration-500"
+    # ariadne-flex ariadne-flex-wrap ariadne-items-center ariadne-justify-between ariadne-bg-white   dark:ariadne-shadow-none  dark:ariadne-bg-transparent
+    LINK_CLASSES = "ariadne-rounded-lg ariadne-py-1 ariadne-px-2 text-slate-700 hover:bg-slate-100 hover:text-slate-900"
 
-    DEFAULT_TEXT_LOGO_CLASSES = "flex items-center font-bold text-xl"
-    DEFAULT_IMAGE_LOGO_CLASSES = "h-10 w-auto"
+    DEFAULT_TEXT_LOGO_CLASSES = "ariadne-flex ariadne-items-center ariadne-font-bold ariadne-text-xl"
+    DEFAULT_IMAGE_LOGO_CLASSES = "ariadne-h-10 ariadne-w-auto"
 
     # Leading visuals at the far left of the header. You can pass either
     # `src` or `as_text` but not both.
@@ -37,7 +37,7 @@ module Ariadne
     # @param href [String] The link destination.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    DEFAULT_NAV_LINK_CLASSES = "inline-block rounded-lg py-1 px-2 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+    DEFAULT_NAV_LINK_CLASSES = "ariadne-inline-block ariadne-rounded-lg ariadne-py-1 ariadne-px-2 ariadne-text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
     renders_many :navigation_links, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_NAV_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
@@ -60,13 +60,13 @@ module Ariadne
     # @param href [String] The link destination.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    DEFAULT_SIGNUP_LINK_CLASSES = "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    DEFAULT_SIGNUP_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
     renders_one :signup_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_SIGNUP_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)
     }
 
-    DEFAULT_PROFILE_LINK_CLASSES = "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+    DEFAULT_PROFILE_LINK_CLASSES = "group ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-py-2 ariadne-px-4 ariadne-text-sm ariadne-font-semibold focus:ariadne-outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
     renders_one :profile_link, lambda { |tag: Ariadne::LinkComponent::DEFAULT_TAG, href:, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_PROFILE_LINK_CLASSES, classes)
       Ariadne::LinkComponent.new(tag: tag, href: href, classes: actual_classes, attributes: attributes)

data/app/components/ariadne/heading_component.rb

@@ -20,9 +20,9 @@ module Ariadne
     TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
 
     TAG_TO_CLASSES = {
-      h1: "font-bold leading-7 sm:text-3xl",
-      h2: "text-3xl font-extrabold text-gray-900",
-      h3: "text-2xl font-extrabold text-gray-900",
+      h1: "ariadne-font-bold ariadne-leading-7 sm:ariadne-text-3xl",
+      h2: "ariadne-text-3xl ariadne-font-extrabold",
+      h3: "ariadne-text-2xl ariadne-font-extrabold",
     }
     # @example Default
     #   <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>

data/app/components/ariadne/heroicon_component.html.erb

@@ -1,6 +1,4 @@
-<span class="inline-flex items-baseline">
-  <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
-    <%= @icon.path.html_safe %>
-  <% end %>
-  <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @attributes)) { content } if content.present? %>
-</span>
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
+  <%= @icon.path.html_safe %>
+<% end %>
+<%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @text_attributes)) { content } if content.present? %>

data/app/components/ariadne/heroicon_component.rb

@@ -6,15 +6,19 @@ module Ariadne
   # `Heroicon` renders an <%= link_to_heroicons %> with <%= link_to_attributes_docs %>.
   # `Heroicon` can also be rendered with the `heroicon` helper.
   class HeroiconComponent < Ariadne::Component
+    DEFAULT_TEXT_CLASSES = "ariadne-pl-2"
+
     include IconHelper
     include HeroiconsHelper
 
-    SIZE_DEFAULT = :s
-    SIZE_MEDIUM = :m
+    SIZE_DEFAULT = :sm
+    SIZE_MEDIUM = :md
+    SIZE_LARGE = :lg
 
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
       SIZE_MEDIUM => 24,
+      SIZE_LARGE => 128,
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -53,7 +57,7 @@ module Ariadne
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "trash",
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
-      { name: "x",
+      { name: "x-mark",
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
     ].freeze
 
@@ -62,7 +66,7 @@ module Ariadne
     #   <%= render(Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_SOLID)) %>
     #
     # @example Medium
-    #   <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :m)) %>
+    #   <%= render(Ariadne::HeroiconComponent.new(icon: :"user-group", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, size: :md)) %>
     #
     # @example Helper
     #   <%= ariadne_heroicon(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
@@ -70,10 +74,12 @@ module Ariadne
     # @param tag [Symbol, String] The rendered tag name
     # @param classes [String] <%= link_to_classes_docs %>
     # @param icon [Symbol, String] Name of <%= link_to_heroicons %> to use.
-    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
     # @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: :svg, icon:, variant:, size: SIZE_DEFAULT, classes: "", attributes: {})
+    # @param text_classes [String] <%= link_to_classes_docs %>
+    # @param text_attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: :svg, icon:, variant:, size: SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {})
       @tag = check_incoming_tag(:svg, tag)
 
       check_icon_presence!(icon, variant)
@@ -100,18 +106,23 @@ module Ariadne
         width: @attributes[:width],
       }
 
-      @icon = heroicon(icon, variant: variant, **attributes) # rubocop:disable Ariadne/AriadneHeroicon
+      @icon = heroicon(icon, variant: variant, **attributes)
 
       @classes = class_names(
         @icon.attributes[:class],
         classes
       )
       @attributes.merge!(@icon.attributes.except(:class, :"aria-hidden"))
+
+      @text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
+      @text_attributes = text_attributes
     end
 
-    def self._after_compile
-      HeroiconsHelper::Cache.preload!(PRELOADED_ICONS) do |found, icon|
-        HeroiconComponent.new(icon: icon[:name], variant: icon[:variant]) unless found
+    class << self
+      def _after_compile
+        HeroiconsHelper::Cache.preload!(PRELOADED_ICONS) do |found, icon|
+          HeroiconComponent.new(icon: icon[:name], variant: icon[:variant]) unless found
+        end
       end
     end
   end

data/app/components/ariadne/inline_flex_component.rb

@@ -9,34 +9,36 @@ module Ariadne
   # present a static list of SVG images (and can be embedded in buttons or shown alone).
   class InlineFlexComponent < Ariadne::Component
     DEFAULT_TAG = :span
-    DEFAULT_CLASSES = "inline-flex items-baseline"
+    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-baseline"
 
     STATE_OPTIONS = [:closed, :open].freeze
 
     STATE_OPEN_SVG = <<~MSG
-      <svg viewBox="0 0 24 24" width="12" height="12" class="stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-open" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
       </svg>
     MSG
     STATE_CLOSED_SVG = <<~MSG
-      <svg viewBox="0 0 24 24" width="12" height="12" class="stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
       </svg>
     MSG
 
-    renders_one :icon, lambda { |icon, tag: :svg, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}|
-      Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes)
+    DEFAULT_TEXT_OPEN_CLASSES = "ariadne-text-state-open"
+    DEFAULT_TEXT_CLOSED_CLASSES = "ariadne-text-state-closed"
+    DEFAULT_TEXT_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+    renders_one :icon, lambda { |tag: :svg, icon:, variant:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, classes: "", attributes: {}, text_classes: "", text_attributes: {}|
+      actual_text_classes = class_names(DEFAULT_TEXT_CLASSES, text_classes)
+      Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, size: size, classes: classes, attributes: attributes, text_classes: actual_text_classes, text_attributes: text_attributes) { content }
     }
 
-    renders_one :item, lambda { |tag: :span, classes: "", attributes: {}|
-      Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes) { content }
+    renders_one :item, lambda { |classes: "", attributes: {}|
+      Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
     }
 
-    DEFAULT_TEXT_OPEN_CLASSES = "text-state-open"
-    DEFAULT_TEXT_CLOSED_CLASSES = "text-state-closed"
-    DEFAULT_TEXT_CLASSES = "pl-2 text-sm font-medium text-gray-900 text-sm"
+    DEFAULT_LABEL_CLASSES = "ariadne-pl-2 ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
     renders_one :text, lambda { |classes: "", attributes: {}|
-      actual_classes = class_names(DEFAULT_TEXT_CLASSES, classes)
+      actual_classes = class_names(DEFAULT_LABEL_CLASSES, classes)
       Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
     }
 
@@ -47,7 +49,7 @@ module Ariadne
     #   <% end %>
     #
     #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
-    #      <% c.icon(:check, size: :s, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
+    #      <% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
     #      <% c.text { "Closed" } %>
     #   <% end %>
     #

data/app/components/ariadne/link_component.rb

@@ -6,19 +6,22 @@ module Ariadne
     DEFAULT_TAG = :a
     TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
 
-    # `Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.
+    DEFAULT_CLASSES = "ariadne-cursor-pointer"
+    DEFAULT_ACTIONABLE_CLASSES = " ariadne-cursor-pointer ariadne-underline ariadne-decoration-double ariadne-font-semibold hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
+
+    # `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] <%= link_to_attributes_docs %>
-    renders_one :tooltip, lambda { |tag: :"tool-tip", text:, classes: "", attributes: {}|
+    # @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?
 
-      actual_classes = class_names(classes)
-
-      Ariadne::TooltipComponent.new(tag: tag, text: text, classes: actual_classes, attributes: attributes)
+      Ariadne::TooltipComponent.new(tag: tag, for_id: @id, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
     }
 
     # @example Default
@@ -38,9 +41,10 @@ module Ariadne
     #
     # @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:, classes: "", attributes: {})
+    def initialize(tag: DEFAULT_TAG, href:,  actionable: false, classes: "", attributes: {})
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
 
       @attributes = attributes
@@ -48,7 +52,8 @@ module Ariadne
 
       @id = @attributes[:id]
 
-      @classes = classes
+      @classes = class_names(DEFAULT_CLASSES, classes)
+      @classes << DEFAULT_ACTIONABLE_CLASSES if actionable
     end
 
     def call

data/app/components/ariadne/list_component.html.erb

@@ -1,17 +1,15 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
   <% items.each do |item| %>
     <% if item.linked? %>
-      <li data-highlight-target="highlightable" class="relative <%= selected? ? 'bg-button-bg-color' : 'hover:bg-button-hover-color' %> focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
-        <%= render(item.link) do %>
-          <%= item.header %>
+      <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
+        <%= render Ariadne::LinkComponent.new(href: item.link[:href], classes: item.link[:classes], attributes: item.link[:attributes]) do %>
           <%= item.entry %>
         <% end %>
-      </li>
+      <% end %>
     <% else %>
-      <li data-highlight-target="highlightable" class="relative <%= selected? ? 'bg-button-bg-color' : 'hover:bg-button-hover-color' %> focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
-        <%= item.header %>
+      <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
         <%= item.entry %>
-      </li>
+      <% end %>
     <% end %>
   <% end %>
 <% end %>