ariadne_view_components 0.0.2 → 0.0.5

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

@@ -8,7 +8,6 @@ module Ariadne
   # @private
   class Component < ViewComponent::Base
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
-    include ViewComponent::PolymorphicSlots
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper
@@ -17,6 +16,12 @@ module Ariadne
     include Status::Dsl
     include Audited::Dsl
     include LoggerHelper
+    include Ariadne::ActionViewExtensions::FormHelper
+
+    BASE_HTML_CLASSES = "h-full scroll-smooth bg-white antialiased"
+    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.html.erb

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

data/app/components/ariadne/container_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # The container wraps the majority, if not all, of the content on a page.
+  class ContainerComponent < Ariadne::Component
+    DEFAULT_CLASSES = "px-4 sm:px-6 lg:px-8"
+
+    # @example Default
+    #   <%= render(Ariadne::ContainerComponent.new) do |container| %>
+    #     <%= render(Ariadne::ButtonComponent.new) { "Click me!" } %>
+    #   <% end %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {})
+      @tag = :div
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @attributes = attributes
+    end
+  end
+end

data/app/components/ariadne/flash_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Use `FlashComponent` to inform users of successful messages, pending actions, or urgent notices.
+  # Use `FlashComponent` to inform users of successful messages, pending actions, or urgent notices
   class FlashComponent < Ariadne::Component
     include IconHelper
 
@@ -46,12 +46,12 @@ module Ariadne
     # @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: {}|
-                         @icon = icon
-                         @variant = variant
+      @icon = icon
+      @variant = variant
 
-                         tag = check_incoming_tag(:svg, tag)
-                         Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, classes: classes, attributes: attributes)
-                       }
+      tag = check_incoming_tag(:svg, tag)
+      Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, classes: classes, attributes: attributes)
+    }
 
     # Optional action content showed at the bottom of the component.
     #
@@ -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 %>
@@ -109,11 +109,11 @@ module Ariadne
 
       @attributes = attributes
     end
-
+    # TODO: test this
     private def has_action?
       action.present?
     end
-
+    # TODO: test this
     private def dismissible?
       @dismissible.present?
     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/footer_component.html.erb

@@ -0,0 +1,7 @@
+<%= 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">
+      <%= content %>
+    </p>
+  <% end %>
+<% end %>

data/app/components/ariadne/footer_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Adds a footer to the bottom of every page.
+  class FooterComponent < Ariadne::Component
+    DEFAULT_CLASSES = "py-5"
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::FooterComponent.new) %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {})
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @attributes = attributes
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+<%= 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 : "bg-white" %>">
+      <% if item.has_href? %>
+        <%= render Ariadne::LinkComponent.new(href: item.href) do %>
+          <%= 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 %>
+        <div class="flex-1 flex flex-col p-8">
+          <%= item.entry %>
+        </div>
+      <% end %>
+    </li>
+  <% end %>
+<% end %>

data/app/components/ariadne/grid_component.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Arranges items as a grid.
+  class GridComponent < Ariadne::Component
+    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 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"
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::GridComponent.new) { "Example" } %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {})
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      default_attributes = { role: "list" }
+      @attributes = default_attributes.merge(attributes)
+    end
+
+    # This component is part of `GridComponent` and should not be
+    # used as a standalone component.
+    class Item < Ariadne::Component
+      DEFAULT_ITEM_CLASSES = "flex flex-col text-center rounded-lg shadow my-4 text-black-700 border-black"
+
+      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
+      }
+
+      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 = class_names(DEFAULT_ITEM_CLASSES, classes)
+        @attributes = attributes
+      end
+
+      def has_href?
+        @href.present?
+      end
+
+      def call
+        render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+ <%= 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">
+        <% if has_logo? %>
+          <%= render Ariadne::LinkComponent.new(href: @href) do %>
+            <% if has_image_logo? %>
+              <span class="sr-only"><%= content %></span>
+            <% end %>
+            <%= logo %>
+          <% end %>
+        <% end %>
+        <div class="md:flex md: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">
+          <% action_links.each do |link| %>
+            <%= link %>
+          <% end %>
+        </div>
+        <%= signup_link if has_signup_link? %>
+        <%= profile_link if has_profile_link? %>
+      </nav>
+    <% end %>
+  <% end %>

data/app/components/ariadne/header_component.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Represents the top navigation bar on every page.
+  class HeaderComponent < Ariadne::Component
+    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"
+
+    DEFAULT_TEXT_LOGO_CLASSES = "flex items-center font-bold text-xl"
+    DEFAULT_IMAGE_LOGO_CLASSES = "h-10 w-auto"
+
+    # Leading visuals at the far left of the header. You can pass either
+    # `src` or `as_text` but not both.
+    #
+    # @param href [String] Where the logo should link to.
+    # @param src [String] The URL of the image logo.
+    # @param alt [String] Alt text for accessibility.
+    # @param as_text [Boolean] The text to display
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :logo, lambda { |href: nil, src: nil, alt: nil, as_text: false, classes: "", attributes: {}|
+      @href = href
+      if as_text.present?
+        actual_classes = class_names(DEFAULT_TEXT_LOGO_CLASSES, classes)
+        @text_logo = Ariadne::Text.new(tag: :span, classes: actual_classes, attributes: attributes)
+      else
+        actual_classes = class_names(DEFAULT_IMAGE_LOGO_CLASSES, classes)
+        actual_attributes = { width: 40, height: 40 }.merge(attributes)
+        @image_logo = Ariadne::ImageComponent.new(src: src, alt: alt, classes: actual_classes, attributes: actual_attributes)
+      end
+    }
+
+    # Text within the header, representing navigation.
+    #
+    # @param tag [String, Symbol] The tag to use for the link.
+    # @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"
+    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)
+    }
+
+    # Text within the header, representing actions.
+    #
+    # @param tag [String, Symbol] The tag to use for the link.
+    # @param href [String] The link destination.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_many :action_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)
+    }
+
+    # Text within the header, representing a signup.
+    #
+    # @param tag [String, Symbol] The tag to use for the link.
+    # @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"
+    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"
+    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)
+    }
+
+    # @example Basic example
+    #
+    # <%= render(Ariadne::HeaderComponent.new) do |header| %>
+    #    <%= header.logo(as_text: true) { "GitHub" } %>
+    #    <%= header.navigation_link(href: "#features") { "Features" } %>
+    #    <%= header.login_link(href: "/login") { "Login" } %>
+    # <% end %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(classes: "", attributes: {})
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+
+      @attributes = attributes
+    end
+
+    private def has_logo?
+      logo.present?
+    end
+
+    private def has_text_logo?
+      logo.present? && @text_logo.present?
+    end
+
+    private def has_image_logo?
+      logo.present? && @image_logo.present?
+    end
+
+    private def has_signup_link?
+      signup_link.present?
+    end
+
+    private def has_profile_link?
+      profile_link.present?
+    end
+  end
+end

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 sm:truncate",
-      h2: "text-3xl font-extrabold text-gray-900",
-      h3: "text-2xl font-extrabold text-gray-900",
+      h1: "font-bold leading-7 sm:text-3xl",
+      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,7 +1,4 @@
 <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
-  <% if @use_symbol %>
-    <use href="#heroicon_<%= [@icon.symbol, @icon.height].join("_") %>"></use>
-  <% else %>
-    <%= @icon.path.html_safe %>
-  <% end %>
+  <%= @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 = "pl-2"
+
     include IconHelper
     include HeroiconsHelper
 
-    SIZE_DEFAULT = :small
-    SIZE_MEDIUM = :medium
+    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
 
@@ -39,6 +43,8 @@ module Ariadne
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "mail",
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
+      { name: "menu",
+        variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "pencil",
         variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, },
       { name: "plus-sm",
@@ -60,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: :medium)) %>
+    #   <%= 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) %>
@@ -71,7 +77,9 @@ module Ariadne
     # @param variant [String] <%= one_of(HeroiconsHelper::Icon::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)
@@ -105,11 +113,16 @@ module Ariadne
         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/image_component.rb

@@ -6,6 +6,8 @@ module Ariadne
   # @accessibility
   #   Always provide a meaningful `alt`.
   class ImageComponent < Ariadne::Component
+    DEFAULT_TAG = :img
+
     # @example Default
     #
     #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub")) %>
@@ -23,16 +25,16 @@ module Ariadne
     #   <%= render(Ariadne::ImageComponent.new(src: "https://github.com/github.png", alt: "GitHub", attributes: { height: 100, width: 100 })) %>
     #
     # @param tag [Symbol, String] The rendered tag name
-    # @param classes [String] <%= link_to_classes_docs %>
     # @param src [String] The source url of the image.
     # @param alt [String] Specifies an alternate text for the image.
     # @param lazy [Boolean] Whether or not to lazily load the image.
+    # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: :img, src:, alt:, lazy: false, classes: "", attributes: {})
+    def initialize(tag: DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {})
       @attributes = attributes
 
       @src = src
-      @tag = check_incoming_tag(:img, tag)
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @classes = classes
 
       @attributes[:alt] = alt

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

@@ -0,0 +1,5 @@
+<%= render(Ariadne::BaseComponent.new(tag: :span, classes: @classes, attributes: @attributes)) do |component| %>
+  <%= icon %>
+  <%= item %>
+  <%= text %>
+<% end %>

data/app/components/ariadne/inline_flex_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon)
+  # with optional text.
+  #
+  # InlineFlexComponent differs from HeroiconComponent in that it is intended to be
+  # used within (or next to) text, whereas HeroiconComponent is intended to only
+  # 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"
+
+    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">
+        <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">
+        <circle cx="12" cy="12" r="10"></circle>
+      </svg>
+    MSG
+
+    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"
+    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 { |classes: "", attributes: {}|
+      Ariadne::BaseComponent.new(tag: :span, classes: classes, attributes: attributes) { content }
+    }
+
+    DEFAULT_LABEL_CLASSES = "pl-2 text-sm font-medium text-gray-900"
+    renders_one :text, lambda { |classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_LABEL_CLASSES, classes)
+      Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
+    #      <% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
+    #   <% end %>
+    #
+    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
+    #      <% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
+    #      <% c.text { "Closed" } %>
+    #   <% end %>
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = class_names(DEFAULT_CLASSES, classes)
+      @attributes = attributes
+    end
+  end
+end