ariadne_view_components 0.0.4 → 0.0.5

data/app/assets/javascripts/clipboard-copy-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/assets/javascripts/slideover-component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class SlideoverComponent extends Controller {
+    static targets: string[];
+    readonly expandableTarget: HTMLDivElement;
+    readonly expandWrapperTarget: HTMLDivElement;
+    readonly slidePanelTargets: [HTMLDivElement];
+    readonly buttonWrapperTarget: HTMLDivElement;
+    toggle(): void;
+}

data/app/assets/javascripts/time_ago_component.d.ts

@@ -0,0 +1 @@
+import '@github/time-elements';

data/app/assets/javascripts/tooltip-component.d.ts

@@ -0,0 +1,24 @@
+import { Controller } from '@hotwired/stimulus';
+import type { Instance, Placement } from '@popperjs/core';
+export default class TooltipComponent extends Controller {
+    static targets: string[];
+    readonly triggerTarget: HTMLElement;
+    readonly tooltipTarget: HTMLElement;
+    static values: {
+        placement: {
+            type: StringConstructor;
+            default: string;
+        };
+        offset: {
+            type: ArrayConstructor;
+            default: number[];
+        };
+    };
+    readonly placementValue: Placement;
+    readonly offsetValue: Array<number>;
+    popperInstance: Instance;
+    connect(): void;
+    disconnect(): void;
+    show(): void;
+    hide(): void;
+}

data/app/assets/stylesheets/application.ariadne_view_components.css

@@ -1,3 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import 'tooltip-component.css';

data/app/assets/stylesheets/tooltip-component.css

@@ -0,0 +1,37 @@
+.tooltip-arrow,
+.tooltip-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tooltip-arrow {
+  visibility: hidden;
+}
+
+tooltip[data-tooltip-show] .tooltip-arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+tooltip[data-popper-placement^='top'][data-tooltip-show] > .tooltip-arrow {
+  bottom: -4px;
+}
+
+tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+  top: -4px;
+}
+
+tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+  right: -4px;
+}
+
+tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+  left: -4px;
+}
+
+tooltip[data-tooltip-show] {
+  display: block;
+}

data/app/components/ariadne/ariadne.d.ts

@@ -0,0 +1 @@
+import './time_ago_component';

data/app/components/ariadne/ariadne.js

@@ -0,0 +1,9 @@
+import { Application } from '@hotwired/stimulus';
+import ClipboardCopyComponent from './clipboard-copy-component';
+import SlideoverComponent from './slideover-component';
+import TooltipComponent from './tooltip-component';
+import './time_ago_component';
+const application = Application.start();
+application.register('clipboard-copy-component', ClipboardCopyComponent);
+application.register('slideover-component', SlideoverComponent);
+application.register('tooltip-component', TooltipComponent);

data/app/components/ariadne/ariadne.ts

@@ -2,9 +2,12 @@ import {Application} from '@hotwired/stimulus'
 
 import ClipboardCopyComponent from './clipboard-copy-component'
 import SlideoverComponent from './slideover-component'
+import TooltipComponent from './tooltip-component'
 
 import './time_ago_component'
 
 const application = Application.start()
+
 application.register('clipboard-copy-component', ClipboardCopyComponent)
 application.register('slideover-component', SlideoverComponent)
+application.register('tooltip-component', TooltipComponent)

data/app/components/ariadne/base_button.rb

@@ -7,27 +7,28 @@ module Ariadne
     TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
 
     DEFAULT_TYPE = :button
-    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+    TYPE_SUBMIT = :submit
+    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
 
     # TODO: dedupe the classes
     SIZE_CLASS_MAPPINGS = {
       xs: "inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded",
-      s: "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
-      m: "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
-      l: "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
+      sm: "inline-flex items-center px-3 py-2 text-sm leading-4 font-medium rounded-m",
+      md: "inline-flex items-center px-4 py-2 text-sm font-medium rounded-md",
+      lg: "inline-flex items-center px-4 py-2 text-base font-medium rounded-md",
       xl: "inline-flex items-center px-6 py-3 text-base font-medium rounded-md",
     }.freeze
     VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
 
     DEFAULT_CLASSES = "inline-flex items-center px-4 py-2 text-sm border border-gray-300 shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
 
-    DEFAULT_SIZE = :m
+    DEFAULT_SIZE = :md
 
     # @example Setting the size
     #   <%= render(Ariadne::BaseButton.new(size: :xs)) { "I am an extra small button!" } %>
-    #   <%= render(Ariadne::BaseButton.new(size: :s)) { "I am a small button!" } %>
-    #   <%= render(Ariadne::BaseButton.new(size: :m)) { "I am a medium button!" } %>
-    #   <%= render(Ariadne::BaseButton.new(size: :l)) { "I am a large button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :sm)) { "I am a small button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :md)) { "I am a medium button!" } %>
+    #   <%= render(Ariadne::BaseButton.new(size: :lg)) { "I am a large button!" } %>
     #   <%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>
     #
     # @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>

data/app/components/ariadne/blankslate_component.rb

@@ -79,7 +79,7 @@ module Ariadne
     # @param href [String] URL to be used for the primary action.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
-    renders_one :primary_action, lambda { |href: nil, tag: :a, method: nil, size: :m, scheme: :default, classes: "", attributes: {}|
+    renders_one :primary_action, lambda { |href: nil, tag: :a, method: nil, size: :md, scheme: :default, classes: "", attributes: {}|
       attributes[:href] = href
       attributes[:method] = method
 

data/app/components/ariadne/body_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Add a general description of component here
+  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+  # @accessibility Add any accessibility considerations
+  class BodyComponent < Ariadne::Component
+    DEFAULT_CLASSES = "flex flex-col min-h-screen"
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::BodyComponent.new) { "Example" } %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {})
+      @tag = :body
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @attributes = attributes
+    end
+
+    def call
+      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
+    end
+  end
+end

data/app/components/ariadne/button_component.rb

@@ -58,18 +58,13 @@ module Ariadne
     #
     # @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::DIRECTION_OPTIONS) %>
+    # @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: :"tool-tip", text:, direction: Ariadne::TooltipComponent::DIRECTION_DEFAULT, type: Ariadne::TooltipComponent::TYPE_DEFAULT, classes: "", attributes: {}|
+    renders_one :tooltip, lambda { |tag: Ariadne::TooltipComponent::DEFAULT_TAG, text:, direction: Ariadne::TooltipComponent::DEFAULT_PLACEMENT, type: Ariadne::TooltipComponent::TYPE_DEFAULT, classes: "", attributes: {}|
       raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank?
 
-      # TODO: test this
-      tag = check_incoming_tag(:"tool-tip", tag)
-      attributes[:for] = @id
-      attributes[:type] = check_incoming_attribute(:description, attributes[:type])
-
-      Ariadne::TooltipComponent.new(tag: tag, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
+      Ariadne::TooltipComponent.new(for_id: @id, tag: tag, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
     }
 
     # @example Schemes
@@ -81,8 +76,8 @@ module Ariadne
     #   <%= render(Ariadne::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
     #
     # @example Sizes
-    #   <%= render(Ariadne::ButtonComponent.new(size: :s)) { "Small" } %>
-    #   <%= render(Ariadne::ButtonComponent.new(size: :m)) { "Medium" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Small" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(size: :md)) { "Medium" } %>
     #
     # @example With leading visual
     #   <%= render(Ariadne::ButtonComponent.new) do |c| %>

data/app/components/ariadne/clipboard-copy-component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

data/app/components/ariadne/clipboard-copy-component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

data/app/components/ariadne/clipboard_copy_component.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy(): void;
+}

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

@@ -1,6 +1,6 @@
-<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes.merge(:"data-controller" => DATA_CONTROLLER,  :"data-action" => DATA_ACTION)) do %>
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes.merge(controller_data)) do %>
   <% if content.present? %>
-    <%= content %>
+    <%= content.to_s + tooltip.to_s %>
   <% else %>
     <%= render Ariadne::HeroiconComponent.new(icon: :duplicate, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
     <%= render Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { color: :success, style: "display: none;" }) %>

data/app/components/ariadne/clipboard_copy_component.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+export default class ClipboardCopyComponent extends Controller {
+    copy() {
+        const value = this.element.attributes.getNamedItem('value');
+        const forNode = this.element.attributes.getNamedItem('for');
+        if (value) {
+            navigator.clipboard.writeText(value.value);
+        }
+        else if (forNode) {
+            const node = document.getElementById(forNode.value);
+            navigator.clipboard.writeText((node === null || node === void 0 ? void 0 : node.textContent) || '');
+        }
+        else {
+            // just copy inner text
+            navigator.clipboard.writeText(this.element.textContent || '');
+        }
+    }
+}

data/app/components/ariadne/clipboard_copy_component.rb

@@ -8,11 +8,28 @@ module Ariadne
   class ClipboardCopyComponent < Ariadne::Component
     DEFAULT_TAG = :"clipboard-copy"
 
-    DEFAULT_CLASSES = "cursor-pointer"
+    DEFAULT_CLASSES = LinkComponent::DEFAULT_ACTIONABLE_CLASSES
 
     DATA_CONTROLLER = "clipboard-copy-component"
     DATA_ACTION = "click->clipboard-copy-component#copy"
 
+    # `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, "CopyClipboardComponents with a tooltip must have a unique `id` set on the `CopyClipboardComponent`." if @id.blank?
+
+      @data_tooltip_direction = { "data-tooltip-component-direction": direction }
+
+      Ariadne::TooltipComponent.new(tag: tag, for_id: @id, text: text, direction: direction, type: type, classes: classes, attributes: attributes)
+    }
+
     # @example Default
     #   <%= render(Ariadne::ClipboardCopyComponent.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) %>
     #
@@ -22,19 +39,22 @@ module Ariadne
     #   <% end %>
     #
     # @example Copying from an element
-    #   <%= render(Ariadne::ClipboardCopyComponent.new(attributes: { for: "blob-path"}, aria_label: "Copy text to the system clipboard" )) %>
+    #   <%= render(Ariadne::ClipboardCopyComponent.new(for_id: "blob-path", aria_label: "Copy text to the system clipboard" )) %>
     #   <div id="blob-path">src/index.js</div>
     #
     # @param tag [Symbol, String] The rendered tag name
     # @param classes [String] <%= link_to_classes_docs %>
     # @param value [String] Text to copy into the users clipboard when they click the component.
+    # @param for_id [String] If `value` is not provided, the element with this id will be copied.
     # @param aria_label [String] Text for accessibility. Can also be passed in as part of `attributes`, but it must be present.
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, value: "", aria_label: "", classes: "", attributes: {})
+    def initialize(tag: DEFAULT_TAG, value: "", for_id: nil, aria_label: "", classes: "", attributes: {})
       @attributes = attributes
       @value = value
 
       @attributes[:"aria-label"] = aria_label
+      @attributes[:for] ||= for_id
+      @id = @attributes[:id]
 
       validate!
 
@@ -48,5 +68,23 @@ module Ariadne
       raise ArgumentError, "Must provide either `value` or `for`" if @value.blank? && @attributes[:for].blank?
       raise ArgumentError, "Must provide only `value` or `for`, not both" if @value.present? && @attributes[:for].present?
     end
+
+    DATA_CONTROLLERS_WITH_TOOLTIPS = {
+      "data-controller": "#{DATA_CONTROLLER} #{Ariadne::TooltipComponent::DATA_CONTROLLER}",
+      "data-action": "#{DATA_ACTION} #{Ariadne::TooltipComponent::DATA_ACTION}",
+      "data-tooltip-component-target": "trigger",
+    }
+
+    DATA_CONTROLLERS =
+      {
+        "data-controller": DATA_CONTROLLER.to_s,
+        "data-action": DATA_ACTION,
+      }
+
+    def controller_data
+      return DATA_CONTROLLERS_WITH_TOOLTIPS if tooltip.present?
+
+      DATA_CONTROLLERS
+    end
   end
 end

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

@@ -0,0 +1,25 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |comment| %>
+  <div>
+    <div class="flex items-center" aria-orientation="horizontal" role="tablist">
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    </div>
+    <div class="mt-2">
+      <div id="tabs-1-panel-1" class="p-0.5 -m-0.5 rounded-lg" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
+        <label for="comment" class="sr-only">Comment</label>
+        <div>
+          <textarea rows="5" name="comment" id="comment" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Add your comment..."></textarea>
+        </div>
+      </div>
+      <div id="tabs-1-panel-2" class="p-0.5 -m-0.5 rounded-lg" aria-labelledby="tabs-1-tab-2" role="tabpanel" tabindex="0">
+        <div class="border-b">
+          <div class="mx-px mt-px px-3 pt-2 pb-12 text-sm leading-5 text-gray-800">Preview content will render here.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mt-2 flex justify-end">
+    <%= submit %>
+  </div>
+<% end %>

data/app/components/ariadne/comment_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Defines a submittble form for adding comments to a conversation.
+  class CommentComponent < Ariadne::Component
+    DEFAULT_TAG = :form
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = ""
+
+    DEFAULT_TAB_CLASSES = "text-gray-500 hover:text-gray-900 bg-white hover:bg-gray-100 px-3 py-1.5 border border-transparent text-sm font-medium rounded-md"
+    renders_many :tabs, lambda { |classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_TAB_CLASSES, classes)
+      @tab_idx += 1
+      attributes[:id] = "comment-tabs-tab-#{@tab_idx}"
+      attributes[:"aria-controls"] = "comment-tabs-panel-#{@tab_idx}"
+      attributes[:role] = "tab"
+      attributes[:type] = "button"
+
+      Ariadne::BaseComponent.new(tag: :button, classes: actual_classes, attributes: attributes)
+    }
+
+    renders_one :submit, lambda { |classes: "", attributes: {}|
+      Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, classes: classes, attributes: attributes)
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::CommentComponent.new(action: "#")) { "Example" } %>
+    #
+    # @param action [String] The action to take when the form is submitted.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(action:, classes: "", attributes: {})
+      @tag = DEFAULT_TAG
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @tab_idx = 0
+      @attributes = attributes.merge(action: action)
+    end
+  end
+end

data/app/components/ariadne/component.rb

@@ -19,7 +19,8 @@ module Ariadne
     include Ariadne::ActionViewExtensions::FormHelper
 
     BASE_HTML_CLASSES = "h-full scroll-smooth bg-white antialiased"
-    BASE_BODY_CLASSES = "flex flex-col min-h-screen"
+    BASE_BODY_CLASSES = "flex h-full flex-col"
+    BASE_WRAPPER_CLASSES = "flex flex-col h-screen justify-between"
     BASE_MAIN_CLASSES = "flex-auto"
 
     INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze

data/app/components/ariadne/container_component.rb

@@ -3,7 +3,7 @@
 module Ariadne
   # The container wraps the majority, if not all, of the content on a page.
   class ContainerComponent < Ariadne::Component
-    DEFAULT_CLASSES = "px-4 py-5 sm:px-6 lg:px-8"
+    DEFAULT_CLASSES = "px-4 sm:px-6 lg:px-8"
 
     # @example Default
     #   <%= render(Ariadne::ContainerComponent.new) do |container| %>

data/app/components/ariadne/flash_component.rb

@@ -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,51 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Add a general description of component here
+  # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+  # @accessibility Add any accessibility considerations
+  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
+        "flex-row"
+      when :column
+        "flex-col"
+      when :row_reverse
+        "flex-row-reverse"
+      when :column_reverse
+        "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/grid_component.html.erb

@@ -1,10 +1,19 @@
 <%= 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 : "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="-mt-px flex divide-x">
+              <% item.actions.each_with_index do |action, idx| %>
+                <div class="<%= idx.zero? ? '' : '-ml-px ' %>w-0 flex-1 flex">
+                  <%= action %>
+                </div>
+              <% end %>
+            </div>
           </div>
         <% end %>
       <% else %>

data/app/components/ariadne/grid_component.rb

@@ -3,9 +3,9 @@
 module Ariadne
   # Arranges items as a 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 = "grid grid-cols-1 gap-6 sm:grid-cols-2 lg: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 = "text-button-text-color bg-button-bg-color focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
 
     # The items to show in the grid.
     renders_many :items, "Item"
@@ -29,17 +29,28 @@ 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?
+      DEFAULT_ITEM_CLASSES = "flex flex-col text-center rounded-lg shadow my-4 text-black-700 border-black"
 
-        view_context.capture { block&.call }
+      DEFAULT_ENTRY_CLASSES = "group flex-1 flex flex-col p-8 hover:bg-button-hover-color hover:text-gray-500 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 relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm font-medium border border-transparent rounded-bl-lg 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.rb

@@ -3,7 +3,7 @@
 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"
+    DEFAULT_CLASSES = "sticky top-0 z-50 px-4 py-5 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"
 

data/app/components/ariadne/heading_component.rb

@@ -21,8 +21,8 @@ module Ariadne
 
     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",
+      h2: "text-3xl font-extrabold",
+      h3: "text-2xl 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? %>