ariadne_view_components 0.0.13 → 0.0.14

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

@@ -7,7 +7,6 @@ export default class CommentComponent extends Controller {
     SELECTED_TAB_CLASSES: string[];
     PUBLIC_BACKGROUND_COLOR: string;
     INTERNAL_BACKGROUND_COLOR: string;
-    connect(): void;
     toggleTab(): void;
-    toggleBackgrounds(tab: HTMLButtonElement): void;
+    toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean): void;
 }

data/app/assets/stylesheets/ariadne_view_components.css

@@ -4,3 +4,4 @@
 
 @import 'tooltip-component.css';
 @import 'prosemirror.css';
+@import 'dropdown.css';

data/app/assets/stylesheets/dropdown.css

@@ -0,0 +1,46 @@
+.ariadne__details-reset > summary {
+  list-style: none;
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+}
+
+.ariadne__details-reset > summary:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.ariadne__details-reset > summary:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.ariadne__details-reset > summary:focus-visible {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+.ariadne__details-reset > summary.btn-primary:focus {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
+
+.ariadne__details-reset > summary.btn-primary:focus:not(:focus-visible) {
+  outline: solid 1px transparent;
+  box-shadow: none;
+}
+
+.ariadne__details-reset > summary.btn-primary:focus-visible {
+  outline: 2px solid var(--color-accent-fg);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+}
+
+.ariadne__details-reset > summary::before {
+  display: none;
+}
+
+.ariadne__details-reset > summary::-webkit-details-marker {
+  display: none;
+}

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

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

data/app/components/ariadne/ariadne.ts

@@ -3,7 +3,6 @@ import {Application} from '@hotwired/stimulus'
 import AriadneForm from './ariadne-form'
 
 import ClipboardCopyComponent from './clipboard-copy-component'
-import CommentComponent from './comment-component'
 import RichTextAreaComponent from './rich-text-area-component'
 import SlideoverComponent from './slideover-component'
 import TabNavComponent from './tab-nav-component'
@@ -16,7 +15,6 @@ const application = Application.start()
 
 application.register('clipboard-copy-component', ClipboardCopyComponent)
 application.register('ariadne-form', AriadneForm)
-application.register('comment-component', CommentComponent)
 application.register('rich-text-area-component', RichTextAreaComponent)
 application.register('slideover-component', SlideoverComponent)
 application.register('tab-nav-component', TabNavComponent)

data/app/components/ariadne/avatar_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `Avatar` can be used to represent users.
+  #
+  # - Use the default circle avatar for users, and the square shape
+  # for or any other non-human avatars.
+  # - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
+  # - Set `size` to update the height and width of the `Avatar` in pixels.
+  # - To stack multiple avatars together, use <%= link_to_component(Ariadne::AvatarStackComponent) %>.
+  #
+  # @accessibility
+  #   Images should have text alternatives that describe the information or function represented.
+  #   If the avatar functions as a link, provide alt text that helps convey the function. For instance,
+  #   if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
+  #   rather than `@kittenuser`.
+  #   [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
+  class AvatarComponent < Ariadne::Component
+    DEFAULT_SIZE = 20
+    SMALL_THRESHOLD = 24
+
+    DEFAULT_SHAPE = :circle
+    SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
+
+    SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
+
+    DEFAULT_CLASSES = "ariadne-inline-block ariadne-rounded-full ariadne-ring-2 ariadne-ring-white"
+
+    # @example Default
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
+    #
+    # @example Square
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>
+    #
+    # @example Link
+    #   <%= render(Ariadne::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
+    #
+    # @example With size
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
+    #   <%= render(Ariadne::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>
+    #
+    # @param src [String] The source url of the avatar image.
+    # @param alt [String] Passed through to alt on img tag.
+    # @param size [Integer] <%= one_of(Ariadne::AvatarComponent::SIZE_OPTIONS) %>
+    # @param shape [Symbol] Shape of the avatar. <%= one_of(Ariadne::AvatarComponent::SHAPE_OPTIONS) %>
+    # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(src:, alt:, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, classes: "", attributes: {})
+      @tag = :img
+      @href = href
+
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+      @attributes[:src] = src
+      @attributes[:alt] = alt
+      @attributes[:size] = fetch_or_raise(SIZE_OPTIONS, size)
+      @attributes[:height] = @attributes[:size]
+      @attributes[:width] = @attributes[:size]
+    end
+
+    def call
+      if @href
+        render(Ariadne::LinkComponent.new(href: @href, classes: @classes, attributes: @attributes)) do
+          render(Ariadne::BaseComponent.new(tag: @tag)) { content }
+        end
+      else
+        render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <%if tooltipped? %>
+    <%= tooltip.to_s %>
+    <% avatars.each_with_index do |avatar, i| %>
+      <%= avatar %>
+    <% end %>
+  <% else %>
+    <% avatars.each_with_index do |avatar, i| %>
+      <%= avatar %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/avatar_stack_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `AvatarStack` to stack multiple avatars together.
+  class AvatarStackComponent < Ariadne::Component
+    ALIGN_DEFAULT = :left
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+    DEFAULT_BODY_TAG = :div
+    BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
+
+    # `Tooltip` that appears on mouse hover or keyboard focus over the stack.
+    #
+    # @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, classes: "", attributes: {}|
+      raise ArgumentError, "Avatar stacks with a tooltip must have a unique `id` set." if @id.blank?
+
+      Ariadne::TooltipComponent.new(for_id: @id, tag: tag, text: text, direction: direction, type: :label, classes: classes, attributes: attributes)
+    }
+
+    # Required list of stacked avatars.
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_many :avatars, "Ariadne::AvatarComponent"
+
+    DEFAULT_CLASSES = "ariadne-flex ariadne--space-x-2 ariadne-overflow-hidden"
+
+    # @example Default
+    #   <%= render(Ariadne::AvatarStackComponent.new) do |c| %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #   <% end  %>
+    #
+    # @example Align right
+    #   <%= render(Ariadne::AvatarStackComponent.new(align: :right)) do |c| %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #     <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+    #   <% end  %>
+    #
+    # @param tag [Symbol] <%= one_of(Ariadne::AvatarStackComponent::TAG_OPTIONS) %>
+    # @param align [Symbol] <%= one_of(Ariadne::AvatarStackComponent::ALIGN_OPTIONS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, classes: "", attributes: {})
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @align = fetch_or_raise(ALIGN_OPTIONS, align)
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+      @attributes[:id] ||= "avatar-stack-#{SecureRandom.hex(4)}"
+      @id = @attributes[:id]
+    end
+
+    def render?
+      avatars.any?
+    end
+
+    def tooltipped?
+      tooltip.present?
+    end
+  end
+end

data/app/components/ariadne/base_button.rb

@@ -8,7 +8,7 @@ module Ariadne
 
     DEFAULT_TYPE = :button
     TYPE_SUBMIT = :submit
-    TYPE_OPTIONS = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
+    VALID_TYPES = [DEFAULT_TYPE, :reset, TYPE_SUBMIT].freeze
 
     SIZE_CLASS_MAPPINGS = {
       xs: "ariadne-px-2.5 ariadne-py-1.5 ariadne-text-xs ariadne-font-medium ariadne-rounded",
@@ -20,6 +20,7 @@ module Ariadne
     VALID_SIZES = SIZE_CLASS_MAPPINGS.keys.freeze
 
     DEFAULT_CLASSES = "ariadne-inline-flex ariadne-items-center ariadne-border ariadne-shadow-sm focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
+    DEFAULT_NUDE_CLASSES = "ariadne-inline-flex focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2"
 
     DEFAULT_SIZE = :md
 
@@ -31,7 +32,7 @@ module Ariadne
     #   <%= render(Ariadne::BaseButton.new(size: :xl)) { "I am an extra large button!" } %>
     #
     # @param tag [Symbol] <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
     # @param size [Symbol] <%= one_of(Ariadne::BaseButton::VALID_SIZES) %>
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
@@ -46,14 +47,22 @@ module Ariadne
       @tag = fetch_or_raise(TAG_OPTIONS, tag)
       @size = fetch_or_raise(VALID_SIZES, size)
 
-      @attributes[:type] = fetch_or_raise(TYPE_OPTIONS, type) if button?
-      @classes = class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+      if button?
+        @attributes[:type] = fetch_or_raise(VALID_TYPES, type)
+        @classes = class_names(DEFAULT_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+      else
+        @classes = class_names(DEFAULT_NUDE_CLASSES, SIZE_CLASS_MAPPINGS[@size], classes)
+      end
     end
 
     def call
       render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { content }
     end
 
+    private def link?(type)
+      type == :link
+    end
+
     private def button?
       @tag == :button
     end

data/app/components/ariadne/blankslate_component.rb

@@ -50,7 +50,7 @@ module Ariadne
     # @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"
+    DEFAULT_HEADING_CLASSES = "ariadne-text-3xl ariadne-font-extrabold ariadne-tracking-tight ariadne-text-gray-900 sm:ariadne-text-4xl"
     renders_one :heading, lambda { |tag: :h1, classes: "", attributes: {}|
       actual_classes = class_names(DEFAULT_HEADING_CLASSES, classes)
 
@@ -107,7 +107,7 @@ module Ariadne
 
     # @example Basic
     #   <%= render Ariadne::BlankslateComponent.new do |c| %>
-    #     <% c.heading(tag: :h2).with_content("heading") %>
+    #     <% c.heading(tag: :h2) { "heading" } %>
     #     <% c.description { "Description"} %>
     #   <% end %>
     #
@@ -117,7 +117,7 @@ module Ariadne
     #   @code
     #     <%= render Ariadne::BlankslateComponent.new do |c| %>
     #       <% c.icon(icon: :"globe-europe-africa") %>
-    #       <% c.heading(tag: :h2).with_content("heading") %>
+    #       <% c.heading(tag: :h2) { "heading" } %>
     #       <% c.description { "Description"} %>
     #     <% end %>
     #
@@ -127,7 +127,7 @@ module Ariadne
     #   @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") %>
+    #       <% c.heading(tag: :h2){ "heading" } %>
     #     <% end %>
     #
     # @param tag [Symbol, String] The rendered tag name

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

@@ -1,4 +1,4 @@
 <%= render Ariadne::BaseButton.new(tag: @tag, type: @type, classes: @classes, attributes: @attributes) do -%>
-  <%= icon %><%= trimmed_content %><%= counter %>
+  <%= icon %><%= trimmed_content %><%= counter %><%= ariadne_heroicon(icon: :"chevron-down", variant: HeroiconsHelper::Icon::VARIANT_MINI, classes: "ariadne-ml-2 ariadne--mr-1") if dropdown? %>
   <%= tooltip %>
 <% end -%>

data/app/components/ariadne/button_component.rb

@@ -9,6 +9,7 @@ module Ariadne
     LINK_SCHEME = :link
 
     SCHEME_CLASS_MAPPINGS = {
+      link: Ariadne::LinkComponent::DEFAULT_ACTIONABLE_CLASSES,
       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",
@@ -109,10 +110,10 @@ module Ariadne
     #     <% end %>
     #
     # @param tag [Symbol]  <%= one_of(Ariadne::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::TYPE_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::BaseButton::VALID_TYPES) %>
     # @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) %>
+    # @param dropdown [Boolean] Whether or not to render a dropdown caret.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     def initialize(
@@ -120,18 +121,19 @@ module Ariadne
       type: Ariadne::BaseButton::DEFAULT_TYPE,
       scheme: DEFAULT_SCHEME,
       size: BaseButton::DEFAULT_SIZE,
+      dropdown: false,
       classes: "",
       attributes: {}
     )
       @tag = tag
       @type = type
-      @scheme = scheme
 
       @attributes = attributes
       @id = @attributes[:id]
 
       @size = fetch_or_raise(Ariadne::BaseButton::VALID_SIZES, size)
       @scheme = fetch_or_raise(VALID_SCHEMES, scheme)
+      @scheme = LINK_SCHEME if @tag == :a
 
       @classes = class_names(
         SCHEME_CLASS_MAPPINGS[@scheme],
@@ -139,6 +141,10 @@ module Ariadne
       )
     end
 
+    private def dropdown?
+      @dropdown
+    end
+
     private def trimmed_content
       return if content.blank?
 

data/app/components/ariadne/comment-component.ts

@@ -1,55 +1,37 @@
-import {Controller} from '@hotwired/stimulus'
+// import {Controller} from '@hotwired/stimulus'
 
-export default class CommentComponent extends Controller {
-  static targets = ['tab', 'tabBarComponent']
+// 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]
+//   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'
+//   // keep in sync with comment_component.rb
+//   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('aria-selected')) {
+//         tab.classList.remove(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, false)
+//         tab.removeAttribute('aria-selected')
+//       } else {
+//         tab.setAttribute('aria-selected', 'true')
+//         tab.classList.add(...this.SELECTED_TAB_CLASSES)
+//         this.toggleBackgrounds(tab, true)
+//       }
+//     }
+//   }
+//   toggleBackgrounds(tab: HTMLButtonElement, publicComment: boolean) {
+//     if (publicComment) {
+//       this.tabBarComponentTarget.classList.add(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.remove(this.INTERNAL_BACKGROUND_COLOR)
 
-  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)
-      }
-    }
-  }
-}
+//       this.tabBarComponentTarget.classList.remove(this.PUBLIC_BACKGROUND_COLOR)
+//       this.tabBarComponentTarget.classList.add(this.INTERNAL_BACKGROUND_COLOR)
+//     }
+//   }
+// }

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

@@ -2,17 +2,39 @@
   <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::TabContainerComponent.new(sr_label: @sr_label)) do |tab_container| %>
+          <%= tab_container.tab(id: public_tab.id, selected: public_tab.selected, classes: public_tab.classes, attributes: public_tab.attributes) do |tab| %>
+            <% tab.text { @public_tab_text } %>
+            <% tab.panel do %>
+              <%= 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 %>
+            <% end %>
+          <% end %>
+          <%= tab_container.tab(id: internal_tab.id, selected: internal_tab.selected, classes: internal_tab.classes, attributes: internal_tab.attributes) do |tab| %>
+            <% tab.text { @internal_tab_text } %>
+            <% tab.panel do %>
+              <%= 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', false %>
+                  <%= 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 %>
+            <% end %>
+          <% end %>
+        <% 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

@@ -2,6 +2,10 @@
 
 module Ariadne
   # Defines a submittable form for adding comments to a conversation.
+  #
+  #
+  # Requires JavaScript. Set `data-comment-component-selected-class` to the class name that will be applied to the
+  # selected tab.
   # @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
@@ -12,17 +16,21 @@ module Ariadne
 
     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 }
+      id = attributes.fetch(:id, "public-tab-#{@tab_idx}")
+      @public_tab_text = text
+
+      Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
     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 }
+      id = attributes.fetch(:id, "internal-tab-#{@tab_idx}")
+      @internal_tab_text = text
+
+      Ariadne::TabComponent.new(selected: selected, classes: classes, id: id, with_panel: true, attributes: attributes)
     }
 
     renders_one :submit, lambda { |classes: "", attributes: {}|
@@ -31,7 +39,11 @@ module Ariadne
 
     # @example Default
     #
-    #   <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) { "Example" } %>
+    #  <%= render(Ariadne::CommentComponent.new(url: "/messages", method: :post, sr_label: "Select delivery time")) do |comment| %>
+    #    <% comment.public_tab(selected: true, text: "Reply to sender") %>
+    #    <% comment.internal_tab(text: "Internal comment") %>
+    #    <% comment.submit { "Send" } %>
+    #  <% end %>
     #
     # @param url [String] The URL to take action against.
     # @param method [String] The method to use when submitting the form.

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

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