ariadne_view_components 0.0.12-x86_64-linux → 0.0.14-x86_64-linux

data/app/components/ariadne/comment_component.rb

@@ -2,6 +2,10 @@
 
 module Ariadne
   # Defines a submittable form for adding comments to a conversation.
+  #
+  #
+  # Requires JavaScript. Set `data-comment-component-selected-class` to the class name that will be applied to the
+  # selected tab.
   # @accessibility This component requires you to pass in a `sr_label`
   # attribute, which will be used to label the tabs for screen readers.
   class CommentComponent < Ariadne::Component
@@ -12,17 +16,21 @@ module Ariadne
 
     renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
       attributes[:"data-comment-component-target"] ||= "tab"
-      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
       attributes[:"data-public"] = true
       @tab_idx += 1
-      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+      id = attributes.fetch(:id, "public-tab-#{@tab_idx}")
+      @public_tab_text = text
+
+      Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
     renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
       attributes[:"data-comment-component-target"] ||= "tab"
-      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
       @tab_idx += 1
-      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+      id = attributes.fetch(:id, "internal-tab-#{@tab_idx}")
+      @internal_tab_text = text
+
+      Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
     renders_one :submit, lambda { |classes: "", attributes: {}|
@@ -31,7 +39,11 @@ module Ariadne
 
     # @example Default
     #
-    #   <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) { "Example" } %>
+    #  <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) do |comment| %>
+    #    <% comment.public_tab(selected: true, text: "Reply to sender") %>
+    #    <% comment.internal_tab(text: "Internal comment") %>
+    #    <% comment.submit { "Send" } %>
+    #  <% end %>
     #
     # @param url [String] The URL to take action against.
     # @param method [String] The method to use when submitting the form.
@@ -42,7 +54,7 @@ module Ariadne
       @tag = DEFAULT_TAG
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
       @url = url
       @method = method

data/app/components/ariadne/component.rb

@@ -10,15 +10,13 @@ module Ariadne
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ClassNameHelper
     include FetchOrFallbackHelper
-    include TestSelectorHelper
-    include JoinStyleArgumentsHelper
     include ViewHelper
     include Status::Dsl
     include Audited::Dsl
     include LoggerHelper
     include Ariadne::ActionViewExtensions::FormHelper
 
-    BASE_HTML_CLASSES = "ariadne-h-full scroll-smooth ariadne-bg-white ariadne-antialiased"
+    BASE_HTML_CLASSES = "ariadne-h-full ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
     BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
     BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
     BASE_MAIN_CLASSES = "ariadne-flex-auto"
@@ -84,7 +82,7 @@ module Ariadne
       if (denylist = attributes[denylist_name])
         check_denylist(denylist, attributes)
 
-        # Remove :attributes_denylist key and any denied keys from system arguments
+        # Remove :attributes_denylist key and any denied keys from attributes
         attributes.except!(denylist_name)
         attributes.except!(*denylist.keys.flatten)
       end
@@ -109,7 +107,7 @@ module Ariadne
       deny_aria_key(
         :label,
         "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
-        attributes
+        attributes,
       )
     end
 

data/app/components/ariadne/container_component.rb

@@ -16,7 +16,7 @@ module Ariadne
       @tag = :div
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/counter_component.rb

@@ -50,7 +50,7 @@ module Ariadne
 
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
       @attributes[:hidden] = true if count == 0 && hide_if_zero
     end

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

@@ -0,0 +1,4 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= summary %>
+  <%= body %>
+<% end %>

data/app/components/ariadne/details_component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `DetailsComponent` to reveal content after clicking a button.
+  class DetailsComponent < Ariadne::Component
+    DEFAULT_TAG = :details
+    DEFAULT_BODY_TAG = :div
+
+    VALID_BODY_TAGS = [:ul, :"details-menu", :"details-dialog", DEFAULT_BODY_TAG].freeze
+
+    NO_OVERLAY = :none
+    OVERLAY_MAPPINGS = {
+      NO_OVERLAY => "",
+      :default => "",
+    }.freeze
+
+    # Use the Summary as a trigger to reveal the content.
+    #
+    # @param button [Boolean] (true) Whether to render the Summary as a button or not.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :summary, lambda { |button: true, classes: "", attributes: {}|
+      tag = :summary
+      attributes[:role] = "button"
+
+      return Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes) unless button
+
+      Ariadne::Content.new
+    }
+
+    DEFAULT_BODY_CLASSES = "ariadne-absolute ariadne-right-0 ariadne-z-10 ariadne-mt-2 ariadne-w-56 ariadne-origin-top-right ariadne-divide-y ariadne-divide-gray-100 ariadne-rounded-md ariadne-bg-white ariadne-shadow-lg ariadne-ring-1 ariadne-ring-black ariadne-ring-opacity-5 focus:ariadne-outline-none"
+    # Use the Body slot as the main content to be shown when triggered by the Summary.
+    #
+    # @param tag [Symbol] The tag to use for the body/ <%= one_of(Ariadne::DetailsComponent::VALID_BODY_TAGS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :body, lambda { |tag: DEFAULT_BODY_TAG, classes: "", attributes: {}|
+      tag = fetch_or_raise(VALID_BODY_TAGS, tag)
+      actual_classes = class_names(DEFAULT_BODY_CLASSES, classes)
+
+      Ariadne::BaseComponent.new(tag: tag, classes: actual_classes, attributes: attributes)
+    }
+
+    DEFAULT_CLASSES = ""
+
+    # @example Default
+    #
+    #   <%= render Ariadne::DetailsComponent.new do |c| %>
+    #     <% c.summary do %>
+    #       Summary
+    #     <% end %>
+    #     <% c.body do %>
+    #       Body
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
+    # @param reset [Boolean] If set to true, it will remove the default caret and remove style from the summary element
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(overlay: NO_OVERLAY, reset: false, classes: "", attributes: {})
+      @tag = DEFAULT_TAG
+      @reset = reset
+
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+        @reset ? "ariadne__details-reset" : "",
+      )
+
+      @attributes = attributes
+
+      @overlay = fetch_or_raise(OVERLAY_MAPPINGS.keys, overlay)
+    end
+
+    def render?
+      true # summary.present? && body.present?
+    end
+  end
+end

data/app/components/ariadne/dropdown/menu_component.html.erb

@@ -0,0 +1,20 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <%= header %>
+  <% if list? %>
+    <ul>
+      <% items.each do |item| %>
+        <% if item.divider? %>
+          <%= item %>
+        <% else %>
+          <li>
+            <%= item %>
+          </li>
+        <% end %>
+      <% end %>
+    </ul>
+  <% else %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/dropdown/menu_component.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module Dropdown
+    # This component is part of `DropdownComponent` and should not be
+    # used as a standalone component.
+    class MenuComponent < Ariadne::Component
+      DEFAULT_AS_OPTION = :default
+      VALID_AS_OPTIONS = [DEFAULT_AS_OPTION, :list].freeze
+
+      DEFAULT_DIRECTION = :se
+      VALID_DIRECTIONS = [DEFAULT_DIRECTION, :sw, :w, :e, :ne, :s].freeze
+
+      DEFAULT_HEADER_CLASSES = "ariadne-text-sm ariadne-font-medium ariadne-text-gray-900"
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      renders_one :header, lambda { |classes: "", attributes: {}|
+        actual_classes = class_names(DEFAULT_HEADER_CLASSES, classes)
+        Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes)
+      }
+
+      # @param tag [Boolean] <%= one_of(Ariadne::Dropdown::MenuComponent::Item::VALID_TAGS) %>.
+      # @param divider [Boolean] Whether the item is a divider without any function.
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      renders_many :items, lambda { |tag: Ariadne::Dropdown::MenuComponent::Item::DEFAULT_TAG, divider: false, classes: "", attributes: {}|
+        Ariadne::Dropdown::MenuComponent::Item.new(tag: tag, as: @as, divider: divider, classes: classes, attributes: attributes)
+      }
+
+      DEFAULT_TAG = :"details-menu"
+      TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+      DEFAULT_CLASSES = ""
+
+      # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
+      # @param direction [Symbol] <%= one_of(Ariadne::Dropdown::MenuComponent::VALID_DIRECTIONS) %>.
+      # @param classes [String] <%= link_to_classes_docs %>
+      # @param attributes [Hash] <%= link_to_attributes_docs %>
+      def initialize(as: DEFAULT_AS_OPTION, direction: VALID_DIRECTIONS, classes: "", attributes: {})
+        @tag = DEFAULT_TAG
+        @classes = class_names(
+          DEFAULT_CLASSES,
+          classes,
+        )
+
+        @attributes = attributes
+
+        @direction = direction
+        @as = fetch_or_raise(VALID_AS_OPTIONS, as)
+
+        @attributes[:role] = "menu"
+      end
+
+      private def list?
+        @as == :list
+      end
+
+      # Items to be rendered in the `Dropdown` menu.
+      class Item < Ariadne::Component
+        DEFAULT_TAG = :a
+        BUTTON_TAGS = [:button, :summary].freeze
+        VALID_TAGS = [DEFAULT_TAG, *BUTTON_TAGS].freeze
+
+        DEFAULT_ITEM_CLASSES = "ariadne-block ariadne-px-4 ariadne-py-2 ariadne-text-sm ariadne-text-gray-700"
+
+        def initialize(as:, tag: DEFAULT_TAG, divider: false, classes: "", attributes: {})
+          @divider = divider
+          @as = as
+
+          @classes = class_names(DEFAULT_ITEM_CLASSES, classes)
+          @attributes = attributes
+          @tag = fetch_or_raise(VALID_TAGS, tag)
+          @tag = :li if list? && divider?
+          @attributes[:role] ||= :menuitem
+          @attributes[:role] = :separator if @divider
+        end
+
+        def call
+          component = if BUTTON_TAGS.include?(@tag)
+            Ariadne::ButtonComponent.new(scheme: Ariadne::ButtonComponent::LINK_SCHEME, classes: @classes, attributes: @attributes)
+          else
+            Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)
+          end
+
+          # divider has no content
+          render(component) if divider?
+
+          render(component) { content }
+        end
+
+        def divider?
+          @divider
+        end
+
+        def list?
+          @as == :list
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/dropdown/menu_component.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element'

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

@@ -0,0 +1,8 @@
+<%= render(Ariadne::DetailsComponent.new(classes: @classes, attributes: @attributes)) do |c| %>
+  <% c.summary(classes: @button_classes, attributes: @button_attributes) do %>
+    <%= button %>
+  <% end %>
+  <% c.body do %>
+    <%= menu %>
+  <% end %>
+<% end %>

data/app/components/ariadne/dropdown_component.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `DropdownComponent` is a lightweight context menu for holding navigation and actions.
+  class DropdownComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = ""
+
+    # Required trigger for the dropdown. Has the same arguments as <%= link_to_component(Ariadne::ButtonComponent) %>,
+    # but it is locked as a `summary` tag.
+    #
+    # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
+    # @param scheme [Symbol] <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :button, lambda { |size: Ariadne::BaseButton::DEFAULT_SIZE, scheme: :none, classes: "", attributes: {}|
+      @button_classes = classes
+      @button_attributes = attributes
+      @button_attributes[:button] = true
+
+      Ariadne::ButtonComponent.new(tag: :summary, type: :button, scheme: scheme, dropdown: @with_caret, size: size, classes: classes, attributes: attributes)
+    }
+
+    # Required context menu for the dropdown.
+    #
+    # @param as [Symbol] When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
+    # @param direction [Symbol] <%= one_of(Ariadne::Dropdown::MenuComponent::VALID_DIRECTIONS) %>
+    # @param header [String] Optional string to display as the header
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :menu, "Ariadne::Dropdown::MenuComponent"
+    # TODO: remove *Item suffix from nested classes
+
+    # @example Default
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #      <% menu.header { "Header" } %>
+    #       <% menu.item { "Item 1" } %>
+    #       <% menu.item { "Item 2" } %>
+    #       <% menu.item { "Item 3" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With dividers
+    #
+    #   @description
+    #     Dividers can be used to separate a group of items. They don't have any content.
+    #   @code
+    #     <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #       <% c.button do %>
+    #         Dropdown
+    #       <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item(divider: true) %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #       <%= menu.item(divider: true) %>
+    #       <%= menu.item { "Item 5" } %>
+    #       <%= menu.item { "Item 6" } %>
+    #     <% end %>
+    #    <% end %>
+    #
+    # @example With direction
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu(direction: :s) do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With caret
+    #   <%= render(Ariadne::DropdownComponent.new(with_caret: true)) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Customizing the button
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button(scheme: :info, size: :sm) do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <%= menu.item { "Item 1" } %>
+    #       <%= menu.item { "Item 2" } %>
+    #       <%= menu.item { "Item 3" } %>
+    #       <%= menu.item { "Item 4" } %>
+    #    <% end %>
+    #   <% end %>
+    #
+    # @example Menu as list
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu(as: :list) do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <% menu.item { "Item 1" } %>
+    #       <% menu.item { "Item 2" } %>
+    #       <% menu.item(divider: true) %>
+    #       <% menu.item { "Item 3" } %>
+    #       <% menu.item { "Item 4" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Customizing menu items
+    #   <%= render(Ariadne::DropdownComponent.new) do |c| %>
+    #     <% c.button do %>
+    #       Dropdown
+    #     <% end %>
+    #
+    #     <% c.menu do |menu| %>
+    #       <% menu.header { "Header" } %>
+    #       <% menu.item(tag: :button) { "Item 1" } %>
+    #       <% menu.item(classes: "ariadne-text-red-500") { "Item 2" } %>
+    #       <% menu.item { "Item 3" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param overlay [Symbol] <%= one_of(Ariadne::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
+    # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(overlay: :default, with_caret: false, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+
+      @with_caret = with_caret
+
+      @overlay = overlay
+      @attributes[:reset] = true
+    end
+
+    def render?
+      button.present? && menu.present?
+    end
+  end
+end

data/app/components/ariadne/flash_component.rb

@@ -104,7 +104,7 @@ module Ariadne
 
       @classes = class_names(
         CONTENT_SCHEME_CLASS_MAPPINGS[@scheme],
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/flex_component.rb

@@ -6,7 +6,7 @@ module Ariadne
     DEFAULT_TAG = :div
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
-    DEFAULT_CLASSES = "flex"
+    DEFAULT_CLASSES = "ariadne-flex"
 
     VALID_TYPES = [:row, :column, :row_reverse, :column_reverse].freeze
 
@@ -36,7 +36,7 @@ module Ariadne
       @classes = class_names(
         DEFAULT_CLASSES,
         classes,
-        flex_class
+        flex_class,
       )
 
       @attributes = attributes

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="ariadne-mt-6 ariadne-text-sm text-slate-500 sm:ariadne-mt-0">
+    <p class="ariadne-mt-6 ariadne-text-sm ariadne-text-slate-500 sm:ariadne-mt-0">
       <%= content %>
     </p>
   <% end %>

data/app/components/ariadne/footer_component.rb

@@ -14,7 +14,7 @@ module Ariadne
     def initialize(classes: "", attributes: {})
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

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

@@ -1,8 +1,8 @@
 <%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
   <% items.each do |item| %>
-    <li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "ariadne-bg-white" %>">
+    <li class="<%= item.classes %>">
       <% if item.has_href? %>
-        <%= render Ariadne::LinkComponent.new(href: item.href) do %>
+        <%= render Ariadne::LinkComponent.new(href: item.href, classes: Ariadne::GridComponent::GridItem::DEFAULT_ACTION_LINK_COLORS) do %>
           <%= item.entry %>
         <% end %>
         <% if item.actions.any? %>

data/app/components/ariadne/grid_component.rb

@@ -5,7 +5,7 @@ module Ariadne
   class GridComponent < Ariadne::Component
     DEFAULT_CLASSES = "ariadne-grid ariadne-gap-6 sm:ariadne-grid-cols-2 lg:ariadne-grid-cols-3"
 
-    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"
+    DEFAULT_LINK_COLOR_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
 
     # The items to show in the ariadne-grid.
     renders_many :items, "GridItem"
@@ -19,7 +19,7 @@ module Ariadne
     def initialize(classes: "", attributes: {})
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       default_attributes = { role: "list" }
@@ -29,18 +29,20 @@ module Ariadne
     # This component is part of `GridComponent` and should not be
     # used as a standalone component.
     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"
+      DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
 
-      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|
+      DEFAULT_ENTRY_CLASSES = "ariadne-group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-text-gray-500"
+      renders_one :entry, lambda { |classes: "", attributes: {}, &block|
         view_context.capture do
-          render(Ariadne::BaseComponent.new(tag: :div, classes: classes)) { block&.call }
+          actual_classes = class_names(DEFAULT_ENTRY_CLASSES, classes)
+          render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
         end
       }
 
-      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"
+      DEFAULT_ACTION_LINK_CLASSES = "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"
+      DEFAULT_ACTION_LINK_COLORS = "hover:ariadne-text-gray-500"
       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)
+        actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, DEFAULT_ACTION_LINK_COLORS, 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

data/app/components/ariadne/header_component.rb

@@ -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 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"
+    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:ariadne-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 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"
+    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:ariadne-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)
@@ -85,7 +85,7 @@ module Ariadne
     def initialize(classes: "", attributes: {})
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

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

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