ariadne_view_components 0.0.3 → 0.0.6

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

@@ -0,0 +1,5 @@
+@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

@@ -1,14 +1,13 @@
 import {Application} from '@hotwired/stimulus'
 
-import ClipboardCopyComponent from './clipboard_copy_component'
+import ClipboardCopyComponent from './clipboard-copy-component'
+import SlideoverComponent from './slideover-component'
+import TooltipComponent from './tooltip-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)
+application.register('tooltip-component', TooltipComponent)

data/app/components/ariadne/base_button.rb

@@ -7,26 +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.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: :md, 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/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.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",
@@ -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| %>
@@ -113,6 +108,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 +116,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.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,8 +8,27 @@ module Ariadne
   class ClipboardCopyComponent < Ariadne::Component
     DEFAULT_TAG = :"clipboard-copy"
 
-    DATA_CONTROLLER = "clipboard_copy_component"
-    DATA_ACTION = "click->clipboard_copy_component#copy"
+    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" )) %>
@@ -20,23 +39,26 @@ 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!
 
-      @classes = classes
+      @classes = class_names(DEFAULT_CLASSES, classes)
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @attributes[:value] = value if value.present?
     end
@@ -46,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 %>