ariadne_view_components 0.0.1 → 0.0.4

data/app/components/ariadne/ariadne.ts

@@ -1,14 +1,10 @@
 import {Application} from '@hotwired/stimulus'
 
-import ClipboardCopyComponent from './clipboard_copy_component'
+import ClipboardCopyComponent from './clipboard-copy-component'
+import SlideoverComponent from './slideover-component'
 
-// import './clipboard_copy_component'
-// import './tab_container_component'
-// import './time_ago_component'
-// import './local_time'
-// import './image_crop'
-// import './dropdown'
-// import './alpha/tool-tip-element'
+import './time_ago_component'
 
 const application = Application.start()
-application.register('clipboard_copy_component', ClipboardCopyComponent)
+application.register('clipboard-copy-component', ClipboardCopyComponent)
+application.register('slideover-component', SlideoverComponent)

data/app/components/ariadne/base_button.rb

@@ -9,6 +9,7 @@ module Ariadne
     DEFAULT_TYPE = :button
     TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :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",

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

@@ -0,0 +1,26 @@
+<div class="bg-white">
+  <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+    <% if icon.present? %>
+      <%= icon %>
+    <% elsif image.present? %>
+      <%= image %>
+    <% end %>
+    <%= heading %>
+    <% if description.present? %>
+      <%= description %>
+    <% end %>
+    <%= content %>
+    <div class="mt-8 flex justify-center">
+      <% if primary_action.present? %>
+        <div class="inline-flex rounded-md shadow">
+          <%= primary_action %>
+        </div>
+      <% end %>
+      <% if secondary_action.present? %>
+        <div class="ml-3 inline-flex">
+          <%= secondary_action %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/ariadne/blankslate_component.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
+  #
+  # @accessibility
+  #   - The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.
+  #   - All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`,  which will hide the visual from screen reader users.
+  #   - The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.
+  #   - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
+  class BlankslateComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
+
+    # Optional visual that renders an <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param icon [String] Name of <%= link_to_heroicons %> to use.
+    # @param size [Symbol] <%= one_of(Ariadne::HeroiconComponent::SIZE_MAPPINGS, sort: false) %>
+    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    renders_one :icon, lambda { |tag: :svg, icon:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}|
+      @icon = icon
+      @variant = variant
+      tag = check_incoming_tag(:svg, tag)
+      Ariadne::HeroiconComponent.new(tag: tag, icon: icon, size: size, variant: variant, classes: classes, attributes: attributes)
+    }
+
+    # Optional visual that renders an <%= link_to_component(Ariadne::ImageComponent) %>.
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @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 %>
+    DEFAULT_IMAGE_SIZE = 56
+    renders_one :image, lambda { |tag: Ariadne::ImageComponent::DEFAULT_TAG, src:, alt:, lazy: false, classes: "", attributes: {}|
+      attributes[:height] = DEFAULT_IMAGE_SIZE
+      attributes[:width] = DEFAULT_IMAGE_SIZE
+
+      Ariadne::ImageComponent.new(tag: tag, src: src, alt: alt, lazy: lazy, classes: classes, attributes: attributes)
+    }
+
+    # Required heading.
+    #
+    # @param tag [Symbol, String]  <%= one_of(Ariadne::HeadingComponent::TAG_OPTIONS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    DEFAULT_HEADING_CLASSES = "text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
+    renders_one :heading, lambda { |tag: :h1, classes: "", attributes: {}|
+      actual_classes = class_names(DEFAULT_HEADING_CLASSES, classes)
+
+      Ariadne::HeadingComponent.new(tag: tag, classes: actual_classes, attributes: attributes)
+    }
+
+    # Optional description.
+    #
+    # - The description should always be informative and actionable.
+    # - Don't use phrases like "You can".
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    renders_one :description, lambda { |tag: :p, classes: "", attributes: {}|
+      actual_tag = check_incoming_tag(:p, tag)
+
+      Ariadne::BaseComponent.new(tag: actual_tag, classes: classes, attributes: attributes)
+    }
+
+    # Optional primary action
+    #
+    # The `primary_action` slot renders an anchor link which is visually styled as a button to provide more emphasis to the
+    # Blankslate's primary action.
+    #
+    # @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: {}|
+      attributes[:href] = href
+      attributes[:method] = method
+
+      Ariadne::ButtonComponent.new(tag: tag,
+        type: Ariadne::BaseButton::DEFAULT_TYPE,
+        scheme: scheme,
+        size: size,
+        classes: classes,
+        attributes: attributes)
+    }
+
+    # Optional secondary action
+    #
+    # The `secondary_action` slot renders a normal anchor link, which can be used to redirect the user to additional information
+    # (e.g. Help documentation).
+    #
+    # @param href [String] URL to be used for the secondary action.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    renders_one :secondary_action, lambda { |href:, classes: "", attributes: {}|
+      attributes[:href] = href
+
+      Ariadne::LinkComponent.new(href: href, classes: classes, attributes: attributes)
+    }
+
+    # @example Basic
+    #   <%= render Ariadne::BlankslateComponent.new do |c| %>
+    #     <% c.heading(tag: :h2).with_content("heading") %>
+    #     <% c.description { "Description"} %>
+    #   <% end %>
+    #
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Ariadne::BlankslateComponent.new do |c| %>
+    #       <% c.icon(icon: :globe) %>
+    #       <% c.heading(tag: :h2).with_content("heading") %>
+    #       <% c.description { "Description"} %>
+    #     <% end %>
+    #
+    # @example Using an image
+    #   @description
+    #     Add an `image` to give context that an Octicon couldn't.
+    #   @code
+    #     <%= render Ariadne::BlankslateComponent.new do |c| %>
+    #       <% c.image(src: "https://github.githubassets.com/images/modules/site/features/security-icon.svg", alt: "Security - secure vault") %>
+    #       <% c.heading(tag: :h2).with_content("heading") %>
+    #     <% 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
+
+    def render?
+      heading.present?
+    end
+
+    def wrapper
+      yield
+      nil # returning `yield` causes a double render
+    end
+  end
+end

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

@@ -1,4 +1,4 @@
-<%= render Ariadne::BaseButton.new(tag: @tag, type: Ariadne::BaseButton::DEFAULT_TYPE, classes: @classes, attributes: @attributes) do -%>
+<%= render Ariadne::BaseButton.new(tag: @tag, type: @type, classes: @classes, attributes: @attributes) do -%>
   <%= icon %><%= trimmed_content %><%= counter %>
   <%= tooltip %>
 <% end -%>

data/app/components/ariadne/button_component.rb

@@ -9,7 +9,7 @@ module Ariadne
     LINK_SCHEME = :link
 
     SCHEME_CLASS_MAPPINGS = {
-      default: "text-blue-800 bg-blue-50 hover:bg-blue-100 border-blue-300 focus:ring-offset-blue-50 focus:ring-blue-600",
+      default: "text-purple-800 bg-purple-50 hover:bg-purple-100 border-purple-300 focus:ring-offset-purple-50 focus:ring-purple-600",
       info: "text-blue-800 bg-blue-50 hover:bg-blue-100 border-blue-300 focus:ring-offset-blue-50 focus:ring-blue-600",
       success: "text-green-800 bg-green-50 hover:bg-green-100 border-green-300 focus:ring-offset-green-50 focus:ring-green-600",
       warning: "text-yellow-800 bg-yellow-50 hover:bg-yellow-100 border-yellow-300 focus:ring-offset-yellow-50 focus:ring-yellow-600",
@@ -113,6 +113,7 @@ module Ariadne
     #     <% end %>
     #
     # @param tag [Symbol]  <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
     # @param scheme [Symbol] <%= one_of(Ariadne::ButtonComponent::VALID_SCHEMES) %>
     # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
     # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
@@ -120,12 +121,14 @@ module Ariadne
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     def initialize(
       tag: Ariadne::BaseButton::DEFAULT_TAG,
+      type: Ariadne::BaseButton::DEFAULT_TYPE,
       scheme: DEFAULT_SCHEME,
       size: BaseButton::DEFAULT_SIZE,
       classes: "",
       attributes: {}
     )
       @tag = tag
+      @type = type
       @scheme = scheme
 
       @attributes = attributes

data/app/components/ariadne/clipboard_copy_component.rb

@@ -8,8 +8,10 @@ module Ariadne
   class ClipboardCopyComponent < Ariadne::Component
     DEFAULT_TAG = :"clipboard-copy"
 
-    DATA_CONTROLLER = "clipboard_copy_component"
-    DATA_ACTION = "click->clipboard_copy_component#copy"
+    DEFAULT_CLASSES = "cursor-pointer"
+
+    DATA_CONTROLLER = "clipboard-copy-component"
+    DATA_ACTION = "click->clipboard-copy-component#copy"
 
     # @example Default
     #   <%= render(Ariadne::ClipboardCopyComponent.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) %>
@@ -36,7 +38,7 @@ module Ariadne
 
       validate!
 
-      @classes = classes
+      @classes = class_names(DEFAULT_CLASSES, classes)
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @attributes[:value] = value if value.present?
     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,11 @@ 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 flex-col min-h-screen"
+    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 py-5 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.
     #
@@ -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/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,17 @@
+<%= 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" %>">
+      <% if item.has_href? %>
+        <%= render Ariadne::LinkComponent.new(href: item.href) do %>
+          <div class="flex-1 flex flex-col p-8">
+            <%= item.entry %>
+          </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,55 @@
+# 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 md:grid-cols-3 lg:grid-cols-4"
+
+    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"
+
+    # 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
+      renders_one :entry, lambda { |static_content = nil, &block|
+        next static_content if static_content.present?
+
+        view_context.capture { block&.call }
+      }
+
+      attr_reader :href
+
+      def initialize(href: nil, classes: "", attributes: {})
+        @href = href
+        @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-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_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,7 +20,7 @@ module Ariadne
     TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
 
     TAG_TO_CLASSES = {
-      h1: "font-bold leading-7 sm:text-3xl sm:truncate",
+      h1: "font-bold leading-7 sm:text-3xl",
       h2: "text-3xl font-extrabold text-gray-900",
       h3: "text-2xl font-extrabold text-gray-900",
     }

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

@@ -1,7 +1,6 @@
-<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
-  <% if @use_symbol %>
-    <use href="#heroicon_<%= [@icon.symbol, @icon.height].join("_") %>"></use>
-  <% else %>
+<span class="inline-flex items-baseline">
+  <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
     <%= @icon.path.html_safe %>
   <% end %>
-<% end %>
+  <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @attributes)) { content } if content.present? %>
+</span>