ariadne_view_components 0.0.4 → 0.0.7

data/app/components/ariadne/base_component.rb

@@ -1,155 +1,37 @@
 # frozen_string_literal: true
 
-require "ariadne/classify"
-
 module Ariadne
   # All Ariadne ViewComponents accept a standard set of options: classes, which match Tailwind CSS classes, and attributes, which match HTML attributes..
   #
-  # Under the hood, classes are [mapped](https://github.com/ariadne/view_components/blob/main/lib/ariadne/classify.rb) to Tailwind CSS classes, with any unconsumed attributes passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
+  # Under the hood, any-non class attributes is passed to Rails' [`tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag)
+  # (for self-closing tags) or [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
   class BaseComponent < Ariadne::Component
     SELF_CLOSING_TAGS = [:area, :base, :br, :col, :embed, :hr, :img, :input, :link, :meta, :param, :source, :track, :wbr].freeze
 
-    # ## HTML attributes
-    #
-    # System arguments include most HTML attributes. For example:
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
-    # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
-    # | `height` | `Integer` | The height. |
-    # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
-    # | `style` | `String` | Inline styles. |
-    # | `title` | `String` | The `title` attribute. |
-    # | `width` | `Integer` | The width. |
-    #
-    # ## Animation
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `animation` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:animation)) %> |
-    #
-    # ## Border
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
-    # | `border_left` | Integer | Set to `0` to remove the left border. |
-    # | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
-    # | `border_right` | Integer | Set to `0` to remove the right border. |
-    # | `border_top` | Integer | Set to `0` to remove the top border. |
-    # | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
-    # | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
-    #
-    # ## Color
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `bg` | Symbol | Background color. <%= one_of(Ariadne::Classify::Utilities.mappings(:bg)) %> |
-    # | `border_color` | Symbol | Border color. <%= one_of(Ariadne::Classify::Utilities.mappings(:border_color)) %> |
-    # | `color` | Symbol | Text color. <%= one_of(Ariadne::Classify::Utilities.mappings(:color)) %> |
-    #
-    # ## Flex
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `align_items` | Symbol | <%= one_of(Ariadne::Classify::FLEX_ALIGN_ITEMS_VALUES) %> |
-    # | `align_self` | Symbol | <%= one_of(Ariadne::Classify::FLEX_ALIGN_SELF_VALUES) %> |
-    # | `direction` | Symbol | <%= one_of(Ariadne::Classify::FLEX_DIRECTION_VALUES) %> |
-    # | `flex` | Integer, Symbol | <%= one_of(Ariadne::Classify::FLEX_VALUES) %> |
-    # | `flex_grow` | Integer | To enable, set to `0`. |
-    # | `flex_shrink` | Integer | To enable, set to `0`. |
-    # | `flex_wrap` | Symbol | <%= one_of(Ariadne::Classify::FLEX_WRAP_MAPPINGS.keys) %> |
-    # | `justify_content` | Symbol | <%= one_of(Ariadne::Classify::FLEX_JUSTIFY_CONTENT_VALUES) %> |
-    #
-    # ## Grid
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `clearfix` | Boolean | Whether to assign the `clearfix` class. |
-    # | `col` | Integer | Number of columns. <%= one_of(Ariadne::Classify::Utilities.mappings(:col)) %> |
-    # | `container` | Symbol | Size of the container. <%= one_of(Ariadne::Classify::Utilities.mappings(:container)) %> |
-    #
-    # ## Layout
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `display` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:display)) %> |
-    # | `w` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:w)) %> |
-    # | `h` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:h)) %> |
-    # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Ariadne::Classify::Utilities.mappings(:hide)) %> |
-    # | `visibility` | Symbol | Visibility. <%= one_of(Ariadne::Classify::Utilities.mappings(:visibility)) %> |
-    # | `vertical_align` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:vertical_align)) %> |
-    #
-    # ## Position
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
-    # | `float` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:float)) %> |
-    # | `left` | Boolean | If `false`, sets `left: 0`. |
-    # | `position` | Symbol | <%= one_of(Ariadne::Classify::Utilities.mappings(:position)) %> |
-    # | `right` | Boolean | If `false`, sets `right: 0`. |
-    # | `top` | Boolean | If `false`, sets `top: 0`. |
-    #
-    # ## Spacing
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `m` | Integer | Margin. <%= one_of(Ariadne::Classify::Utilities.mappings(:m)) %> |
-    # | `mb` | Integer | Margin bottom. <%= one_of(Ariadne::Classify::Utilities.mappings(:mb)) %> |
-    # | `ml` | Integer | Margin left. <%= one_of(Ariadne::Classify::Utilities.mappings(:ml)) %> |
-    # | `mr` | Integer | Margin right. <%= one_of(Ariadne::Classify::Utilities.mappings(:mr)) %> |
-    # | `mt` | Integer | Margin top. <%= one_of(Ariadne::Classify::Utilities.mappings(:mt)) %> |
-    # | `mx` | Integer | Horizontal margins. <%= one_of(Ariadne::Classify::Utilities.mappings(:mx)) %> |
-    # | `my` | Integer | Vertical margins. <%= one_of(Ariadne::Classify::Utilities.mappings(:my)) %> |
-    # | `p` | Integer | Padding. <%= one_of(Ariadne::Classify::Utilities.mappings(:p)) %> |
-    # | `pb` | Integer | Padding bottom. <%= one_of(Ariadne::Classify::Utilities.mappings(:pb)) %> |
-    # | `pl` | Integer | Padding left. <%= one_of(Ariadne::Classify::Utilities.mappings(:pl)) %> |
-    # | `pr` | Integer | Padding right. <%= one_of(Ariadne::Classify::Utilities.mappings(:pr)) %> |
-    # | `pt` | Integer | Padding left. <%= one_of(Ariadne::Classify::Utilities.mappings(:pt)) %> |
-    # | `px` | Integer | Horizontal padding. <%= one_of(Ariadne::Classify::Utilities.mappings(:px)) %> |
-    # | `py` | Integer | Vertical padding. <%= one_of(Ariadne::Classify::Utilities.mappings(:py)) %> |
-    #
-    # ## Typography
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
-    # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
-    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
-    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
-    # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
-    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
-    # | `underline` | Boolean | Whether text should be underlined. |
-    # | `word_break` | Symbol | Whether to break words on line breaks. <%= one_of(Ariadne::Classify::Utilities.mappings(:word_break)) %> |
-    #
-    # ## Other
-    #
-    # | Name | Type | Description |
-    # | :- | :- | :- |
-    # | classes | String | CSS class name value to be concatenated with generated Tailwind CSS classes. |
-    # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: "", attributes: {})
       @tag = tag
 
-      @attributes = validate_attributes(tag: tag, attributes: attributes)
+      @attributes = validate_attributes(tag: tag, attributes: attributes) || {}
       @attributes[:"data-ariadne-view-component"] = true
 
-      classes = classes.present? ? @attributes.merge(classes: classes) : @attributes.fetch(:classes, "")
-      @classes = Ariadne::Classify.call(classes)
-
-      # Filter out Ariadne keys so they don't get assigned as HTML attributes
-      @content_tag_args = add_test_selector(@attributes).except(*Ariadne::Classify::Utilities::UTILITIES.keys)
+      classes = @attributes.fetch(:classes, "") if classes.blank?
+      @classes = validate_class_names(classes) || {}
+      @content_tag_args = {}
     end
 
     def call
-      options = @content_tag_args.merge(@classes)
+      options = @attributes.merge(@classes)
       if SELF_CLOSING_TAGS.include?(@tag)
         tag(@tag, options)
       else
         content_tag(@tag, content, options)
       end
     end
+
+    private def validate_class_names(classes)
+      return if classes.blank?
+
+      { class: Ariadne::ViewComponents.tailwind_merger.merge(classes) }
+    end
   end
 end

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

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

data/app/components/ariadne/blankslate_component.rb

@@ -12,14 +12,14 @@ module Ariadne
     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"
+    DEFAULT_CLASSES = "ariadne-text-center"
 
     # 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 variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_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: {}|
@@ -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
 
@@ -113,10 +113,10 @@ module Ariadne
     #
     # @example Icon
     #   @description
-    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #     Add an `icon` to give additional context. Refer to the [Heroicons](https://heroicons.com) documentation to choose an icon.
     #   @code
     #     <%= render Ariadne::BlankslateComponent.new do |c| %>
-    #       <% c.icon(icon: :globe) %>
+    #       <% c.icon(icon: :"globe-europe-africa") %>
     #       <% c.heading(tag: :h2).with_content("heading") %>
     #       <% c.description { "Description"} %>
     #     <% end %>
@@ -142,10 +142,5 @@ module Ariadne
     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 = "ariadne-flex ariadne-flex-col ariadne-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

@@ -9,11 +9,12 @@ module Ariadne
     LINK_SCHEME = :link
 
     SCHEME_CLASS_MAPPINGS = {
-      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",
-      danger: "text-red-800 bg-red-50 hover:bg-red-100 border-red-300 focus:ring-offset-red-50 focus:ring-red-600",
+      none: "",
+      default: "ariadne-text-purple-800 ariadne-bg-purple-50 hover:ariadne-bg-purple-100 ariadne-border-purple-300 focus:ariadne-ring-offset-purple-50 focus:ariadne-ring-purple-600",
+      info: "ariadne-text-blue-800 ariadne-bg-blue-50 hover:ariadne-bg-blue-100 ariadne-border-blue-300 focus:ariadne-ring-offset-blue-50 focus:ariadne-ring-blue-600",
+      success: "ariadne-text-green-800 ariadne-bg-green-50 hover:ariadne-bg-green-100 ariadne-border-green-300 focus:ariadne-ring-offset-green-50 focus:ariadne-ring-green-600",
+      warning: "ariadne-text-yellow-800 ariadne-bg-yellow-50 hover:ariadne-bg-yellow-100 ariadne-border-yellow-300 focus:ariadne-ring-offset-yellow-50 focus:ariadne-ring-yellow-600",
+      danger: "ariadne-text-red-800 ariadne-bg-red-50 hover:ariadne-bg-red-100 ariadne-border-red-300 focus:ariadne-ring-offset-red-50 focus:ariadne-ring-red-600",
     }.freeze
     VALID_SCHEMES = SCHEME_CLASS_MAPPINGS.keys.freeze
 
@@ -26,7 +27,7 @@ module Ariadne
     # @param tag [Symbol, String] The rendered tag name
     # @param classes [String] <%= link_to_classes_docs %>
     # @param icon [String] Name of <%= link_to_heroicons %> to use.
-    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VARIANTS, sort: false) %>
+    # @param variant [String] <%= one_of(HeroiconsHelper::Icon::VALID_VARIANTS, sort: false) %>
     # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
     renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
                          @icon = icon
@@ -58,18 +59,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 +77,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.html.erb

@@ -1,8 +1,9 @@
-<%= 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;" }) %>
+    <%= render Ariadne::HeroiconComponent.new(icon: :"document-duplicate", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
+    <!-- TODO: fix, check should replace on click -->
+    <%= render Ariadne::HeroiconComponent.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "ariadne-text-green-600", attributes: { style: "display: none;" }) %>
   <% end %>
 <% end %>

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.ts

@@ -0,0 +1,55 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class CommentComponent extends Controller {
+  static targets = ['tab', 'tabBarComponent']
+
+  declare readonly commentComponentTarget: HTMLDivElement
+  declare readonly tabBarComponentTarget: HTMLElement // technically a `nav but typescript can't find it?
+  declare readonly tabTargets: [HTMLButtonElement]
+
+  SELECTED_TAB_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+  PUBLIC_BACKGROUND_COLOR = 'ariadne-bg-white'
+  INTERNAL_BACKGROUND_COLOR = 'ariadne-bg-internal-message'
+
+  connect() {
+    for (const tab of this.tabTargets) {
+      if (tab.hasAttribute('selected')) {
+        tab.classList.add(...this.SELECTED_TAB_CLASSES)
+      }
+    }
+  }
+
+  toggleTab() {
+    for (const tab of this.tabTargets) {
+      if (tab.hasAttribute('selected')) {
+        tab.removeAttribute('selected')
+        tab.classList.remove(...this.SELECTED_TAB_CLASSES)
+        this.toggleBackgrounds(tab)
+      } else {
+        tab.setAttribute('selected', 'true')
+        tab.classList.add(...this.SELECTED_TAB_CLASSES)
+        this.toggleBackgrounds(tab)
+        if (tab.hasAttribute('data-public')) {
+          document.getElementById('message_public')?.setAttribute('value', 'true')
+        } else {
+          document.getElementById('message_public')?.setAttribute('value', 'false')
+        }
+      }
+    }
+  }
+  toggleBackgrounds(tab: HTMLButtonElement) {
+    if (tab.hasAttribute('selected')) {
+      if (tab.hasAttribute('data-public')) {
+        // this.commentComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+        // this.commentComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
+      } else {
+        // this.commentComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+        // this.commentComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+        this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
+  <div class="ariadne-bg-white" data-comment-component-target="commentComponent">
+    <div class="ariadne-hidden sm:ariadne-block">
+      <div class="ariadne-border-b ariadne-border-gray-200">
+        <%= render(Ariadne::TabBarComponent.new(sr_label: @sr_label, attributes: { :"data-comment-component-target" => "tabBarComponent" })) do |tab_bar| %>
+          <%= public_tab %>
+          <%= internal_tab %>
+        <% end %>
+      </div>
+    </div>
+    <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
+      <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
+        <%= hidden_field_tag 'message_public', true  %>
+        <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true}))  %>
+        <% comment_box.submit { @submit } %>
+      </div>
+      <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">
+        <%= submit %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/ariadne/comment_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Defines a submittable form for adding comments to a conversation.
+  # @accessibility This component requires you to pass in a `sr_label`
+  # attribute, which will be used to label the tabs for screen readers.
+  class CommentComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "ariadne-bg-white ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md "
+
+    renders_one :public_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
+      attributes[:"data-comment-component-target"] ||= "tab"
+      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
+      attributes[:"data-public"] = true
+      @tab_idx += 1
+      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+    }
+
+    renders_one :internal_tab, lambda { |selected: false, text:, classes: "", attributes: {}|
+      attributes[:"data-comment-component-target"] ||= "tab"
+      attributes[:"data-action"] ||= "click->comment-component#toggleTab"
+      @tab_idx += 1
+      render(Ariadne::TabComponent.new(selected: selected, classes: classes, attributes: attributes)) { text }
+    }
+
+    renders_one :submit, lambda { |classes: "", attributes: {}|
+      Ariadne::ButtonComponent.new(type: Ariadne::BaseButton::TYPE_SUBMIT, scheme: Ariadne::ButtonComponent::DEFAULT_SCHEME, classes: classes, attributes: attributes)
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) { "Example" } %>
+    #
+    # @param url [String] The URL to take action against.
+    # @param method [String] The method to use when submitting the form.
+    # @param sr_label [String] A label to introduce these tabs for screen readers.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(url:, method:, sr_label:, classes: "", attributes: {})
+      @tag = DEFAULT_TAG
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+      @url = url
+      @method = method
+      @sr_label = sr_label
+
+      @tab_idx = -1
+      @attributes = attributes
+      @attributes[:"data-controller"] = "comment-component"
+      attributes[:"data-comment-component-target"] = "commentComponent"
+    end
+  end
+end

data/app/components/ariadne/component.rb

@@ -18,9 +18,10 @@ module Ariadne
     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"
+    BASE_HTML_CLASSES = "ariadne-h-full scroll-smooth ariadne-bg-white ariadne-antialiased"
+    BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
+    BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
+    BASE_MAIN_CLASSES = "ariadne-flex-auto"
 
     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 = "ariadne-px-4 sm:ariadne-px-6 lg:ariadne-px-8"
 
     # @example Default
     #   <%= render(Ariadne::ContainerComponent.new) do |container| %>

data/app/components/ariadne/counter_component.rb

@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Use `Counter` to add a count to navigational elements and buttons.
+  # Use `CounterComponent` to add a count to navigational elements and buttons.
   #
   # @accessibility
-  #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
+  #   Always use `CounterComponent` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
   #   should be accompanied with text such as `issues` or `pull requests`.
   #
   class CounterComponent < Ariadne::Component
-    DEFAULT_CLASSES = "inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-    #
+    DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-p-1 ariadne-border ariadne-border-transparent ariadne-rounded-full ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+
     # @example Default
     #   <%= render(Ariadne::CounterComponent.new(count: 25)) %>
     #