ariadne_view_components 0.0.1

data/app/components/ariadne/base_component.rb

@@ -0,0 +1,155 @@
+# 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).
+  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[:"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)
+    end
+
+    def call
+      options = @content_tag_args.merge(@classes)
+      if SELF_CLOSING_TAGS.include?(@tag)
+        tag(@tag, options)
+      else
+        content_tag(@tag, content, options)
+      end
+    end
+  end
+end

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

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

data/app/components/ariadne/button_component.rb

@@ -0,0 +1,158 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  class ButtonComponent < Ariadne::Component
+    include IconHelper
+
+    DEFAULT_SCHEME = :default
+    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",
+      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",
+    }.freeze
+    VALID_SCHEMES = SCHEME_CLASS_MAPPINGS.keys.freeze
+
+    # Leading visuals appear to the left of the button text.
+    #
+    # Use:
+    #
+    # - `icon` for a <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    #
+    # @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 attributes [Hash] Same arguments as <%= link_to_component(Ariadne::HeroiconComponent) %>.
+    renders_one :icon, lambda { |tag: :svg, icon:, variant:, classes: "", attributes: {}|
+                         @icon = icon
+                         @variant = variant
+                         tag = check_incoming_tag(:svg, tag)
+                         Ariadne::HeroiconComponent.new(tag: tag, icon: icon, variant: variant, classes: classes, attributes: attributes)
+                       }
+
+    # Trailing visuals appear to the right of the button text.
+    #
+    # Use:
+    #
+    # - `counter` for a <%= link_to_component(Ariadne::CounterComponent) %>.
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param counter [Number] The starting counter value
+    # @param attributes [Hash] Same arguments as <%= link_to_component(Ariadne::CounterComponent) %>.
+    renders_one :counter, lambda { |tag: :span, count: 0, classes: "", attributes: {}|
+      tag = check_incoming_tag(:span, tag)
+      attributes[:ml] = check_incoming_value(2, ml: attributes[:ml])
+
+      Ariadne::CounterComponent.new(tag: tag, count: count, classes: classes, attributes: attributes)
+    }
+
+    # `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::DIRECTION_OPTIONS) %>
+    # @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: {}|
+      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)
+    }
+
+    # @example Schemes
+    #   <%= render(Ariadne::ButtonComponent.new) { "Default" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(scheme: :default)) { "Default" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(scheme: :info)) { "Info" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(scheme: :success)) { "Success" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(scheme: :warning)) { "Warning" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
+    #
+    # @example Sizes
+    #   <%= render(Ariadne::ButtonComponent.new(size: :s)) { "Small" } %>
+    #   <%= render(Ariadne::ButtonComponent.new(size: :m)) { "Medium" } %>
+    #
+    # @example With leading visual
+    #   <%= render(Ariadne::ButtonComponent.new) do |c| %>
+    #     <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "text-yellow-600") %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With trailing visual
+    #   <%= render(Ariadne::ButtonComponent.new) do |c| %>
+    #     <% c.counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With leading and trailing visuals
+    #   <%= render(Ariadne::ButtonComponent.new) do |c| %>
+    #     <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
+    #     <% c.counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With tooltip
+    #   @description
+    #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Ariadne::TooltipComponent) %> documentation for more information.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: { id: "button-with-tooltip" })) do |c| %>
+    #       <% c.tooltip(text: "Tooltip text") %>
+    #       Button
+    #     <% end %>
+    #
+    # @param tag [Symbol]  <%= one_of(Ariadne::BaseButton::TAG_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) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: Ariadne::BaseButton::DEFAULT_TAG,
+      scheme: DEFAULT_SCHEME,
+      size: BaseButton::DEFAULT_SIZE,
+      classes: "",
+      attributes: {}
+    )
+      @tag = tag
+      @scheme = scheme
+
+      @attributes = attributes
+      @id = @attributes[:id]
+
+      @size = fetch_or_raise(Ariadne::BaseButton::VALID_SIZES, size)
+      @scheme = fetch_or_raise(VALID_SCHEMES, scheme)
+
+      @classes = class_names(
+        SCHEME_CLASS_MAPPINGS[@scheme],
+        classes
+      )
+    end
+
+    private def trimmed_content
+      return if content.blank?
+
+      trimmed_content = content.strip
+
+      return trimmed_content unless content.html_safe?
+
+      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+      trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+    end
+
+    private def link?
+      @scheme == LINK_SCHEME
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes.merge(:"data-controller" => DATA_CONTROLLER,  :"data-action" => DATA_ACTION)) do %>
+  <% if content.present? %>
+    <%= content %>
+  <% 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;" }) %>
+  <% end %>
+<% end %>

data/app/components/ariadne/clipboard_copy_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `ClipboardCopyComponent` to copy element text content or input values to the clipboard.
+  #
+  # @accessibility
+  #   Always set an accessible label to help the user interact with the component.
+  class ClipboardCopyComponent < Ariadne::Component
+    DEFAULT_TAG = :"clipboard-copy"
+
+    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" )) %>
+    #
+    # @example With text instead of icons
+    #   <%= render(Ariadne::ClipboardCopyComponent.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) do %>
+    #     Click to copy!
+    #   <% end %>
+    #
+    # @example Copying from an element
+    #   <%= render(Ariadne::ClipboardCopyComponent.new(attributes: { for: "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 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: {})
+      @attributes = attributes
+      @value = value
+
+      @attributes[:"aria-label"] = aria_label
+
+      validate!
+
+      @classes = classes
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @attributes[:value] = value if value.present?
+    end
+
+    private def validate!
+      validate_aria_label!
+      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
+  end
+end

data/app/components/ariadne/clipboard_copy_component.ts

@@ -0,0 +1,19 @@
+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?.textContent || '')
+    } else {
+      // just copy inner text
+      navigator.clipboard.writeText(this.element.textContent || '')
+    }
+  }
+}

data/app/components/ariadne/component.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+require "view_component/version"
+
+require "heroicons_helper"
+
+module Ariadne
+  # @private
+  class Component < ViewComponent::Base
+    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
+    include ViewComponent::PolymorphicSlots
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include TestSelectorHelper
+    include JoinStyleArgumentsHelper
+    include ViewHelper
+    include Status::Dsl
+    include Audited::Dsl
+    include LoggerHelper
+
+    INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
+
+    private def raise_on_invalid_options?
+      Rails.application.config.ariadne_view_components.raise_on_invalid_options
+    end
+
+    private def raise_on_invalid_aria?
+      Rails.application.config.ariadne_view_components.raise_on_invalid_aria
+    end
+
+    private def deprecated_component_warning(new_class: nil, version: nil)
+      return if silence_deprecations?
+
+      message = "#{self.class.name} is deprecated"
+      message += " and will be removed in v#{version}." if version
+      message += " Use #{new_class.name} instead." if new_class
+
+      ActiveSupport::Deprecation.warn(message)
+    end
+
+    private def aria(val, attributes)
+      attributes[:"aria-#{val}"] || attributes.dig(:aria, val.to_sym)
+    end
+
+    private def validate_aria_label!
+      aria_label = aria("label", @attributes)
+      raise ArgumentError, "`aria-label` is required." if aria_label.blank?
+    end
+
+    private def check_denylist(denylist = [], attributes = {})
+      if should_raise_error?
+
+        # Convert denylist from:
+        # { [:p, :pt] => "message" } to:
+        # { p: "message", pt: "message" }
+        unpacked_denylist =
+          denylist.each_with_object({}) do |(keys, value), memo|
+            keys.each { |key| memo[key] = value }
+          end
+
+        violations = unpacked_denylist.keys & attributes.keys
+
+        if violations.any?
+          message = "Found #{violations.count} #{"violation".pluralize(violations)}:"
+          violations.each do |violation|
+            message += "\n The #{violation} argument is not allowed here. #{unpacked_denylist[violation]}"
+          end
+
+          raise(ArgumentError, message)
+        end
+      end
+
+      attributes
+    end
+
+    private def validate_attributes(tag:, denylist_name: :attributes_denylist, attributes: {})
+      deny_single_argument(:class, "Use `classes` instead.", attributes)
+
+      if (denylist = attributes[denylist_name])
+        check_denylist(denylist, attributes)
+
+        # Remove :attributes_denylist key and any denied keys from system arguments
+        attributes.except!(denylist_name)
+        attributes.except!(*denylist.keys.flatten)
+      end
+
+      deny_aria_label(tag: tag, attributes: attributes)
+
+      attributes
+    end
+
+    private def deny_single_argument(key, help_text, attributes)
+      raise ArgumentError, "`#{key}` is an invalid argument. #{help_text}" \
+        if should_raise_error? && attributes.key?(key)
+
+      attributes.except!(key)
+    end
+
+    private def deny_aria_label(tag:, attributes:)
+      return attributes.except!(:skip_aria_label_check) if attributes[:skip_aria_label_check]
+      return if attributes[:role]
+      return unless INVALID_ARIA_LABEL_TAGS.include?(tag)
+
+      deny_aria_key(
+        :label,
+        "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
+        attributes
+      )
+    end
+
+    private def deny_aria_key(key, help_text, attributes)
+      raise ArgumentError, help_text if should_raise_aria_error? && aria(key, attributes)
+    end
+
+    private def should_raise_error?
+      raise_on_invalid_options? && !ENV["ARIADNE_WARNINGS_DISABLED"]
+    end
+
+    private def should_raise_aria_error?
+      raise_on_invalid_aria? && !ENV["ARIADNE_WARNINGS_DISABLED"]
+    end
+  end
+end

data/app/components/ariadne/content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Ariadne
+  #
+  # Use `Content` as a helper to render content passed to a slot without adding any tags.
+  #
+  class Content < Ariadne::Component
+    def call
+      content
+    end
+  end
+end

data/app/components/ariadne/counter_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Use `Counter` 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`
+  #   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"
+    #
+    # @example Default
+    #   <%= render(Ariadne::CounterComponent.new(count: 25)) %>
+    #
+    # @example Schemes
+    #   <%= render(Ariadne::CounterComponent.new(count: 25)) %>
+    #   <%= render(Ariadne::CounterComponent.new(count: 25)) %>
+    #
+    # @param tag [Symbol, String] The rendered tag name
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
+    # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
+    # @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
+    # @param text [String] Text to display instead of count.
+    # @param round [Boolean] Whether to apply rounding logic to value.
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: :span,
+      count: 0,
+      limit: 9_000,
+      hide_if_zero: false,
+      text: "",
+      round: false,
+      classes: "",
+      attributes: {}
+    )
+      @count = count
+      @limit = limit
+      @hide_if_zero = hide_if_zero
+      @text = text
+      @round = round
+      @attributes = attributes
+
+      @has_limit = !@limit.nil?
+
+      @tag = check_incoming_tag(:span, tag)
+
+      @attributes[:title] = title
+
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes
+      )
+      @attributes[:hidden] = true if count == 0 && hide_if_zero
+    end
+
+    def call
+      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { value }
+    end
+
+    private def title
+      if @text.present?
+        @text
+      elsif @count.nil?
+        "Not available"
+      elsif @count == Float::INFINITY
+        "Infinity"
+      else
+        count = @count.to_i
+        str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
+        str += "+" if @has_limit && count > @limit
+        str
+      end
+    end
+
+    private def value
+      if @text.present?
+        @text
+      elsif @count.nil?
+        "" # CSS will hide it
+      elsif @count == Float::INFINITY
+        "∞"
+      else
+        if @round
+          count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
+          precision = count.between?(100_000, 999_999) ? 0 : 1
+          units = { thousand: "k", million: "m", billion: "b" }
+          str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
+        else
+          @count = @count.to_i
+          str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
+        end
+
+        str += "+" if @has_limit && @count.to_i > @limit
+        str
+      end
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <div class="rounded-md p-4 <%= BG_SCHEME_CLASS_MAPPINGS[@scheme] %>">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <%= icon %>
+      </div>
+      <div class="ml-3">
+        <div class="mt-2 text-sm <%= CONTENT_SCHEME_CLASS_MAPPINGS[@scheme] %>">
+          <p><%= content %></p>
+        </div>
+        <% if has_action? %>
+          <div class="mt-4 pt-5">
+            <div class="-mx-2 -my-1.5 flex">
+              <%= action %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <% if dismissible? %>
+        <div class="pl-3">
+          <div class="-mx-1.5 -my-1.5">
+            <button type="button" class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 <%= dismissible_classes %>">
+              <span class="sr-only">Dismiss</span>
+              <%= ariadne_heroicon icon: :x, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE %>
+            </button>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>