ariadne_view_components 0.0.93.2 → 0.0.94.1

data/app/components/ariadne/form/text_field/component.html.erb

@@ -13,10 +13,10 @@
     input? ? :input : :textarea,
     input? ? nil : html_attrs[:value],
     name: @name,
-    class: Ariadne::ViewComponents.tailwind_merger.merge([html_attrs[:class], style(with_leading_item: leading_visual ? :yes : :no)]),
+    class: merge_tailwind_classes([html_attrs[:class], style(with_leading_item: leading_visual ? :yes : :no)]),
     type: @type,
     **html_attrs.except(:class)
-  ) %>
+    ) %>
     <% if @validation_message %>
       <%= render(Primer::BaseComponent.new(tag: :div, **@validation_arguments)) do %>
         <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>

data/app/components/ariadne/form/text_field/component.rb

@@ -3,6 +3,14 @@
 module Ariadne
   module Form
     module TextField
+      # Text fields are single-line text inputs rendered as `<input type="text">` in HTML.
+      #
+      # @form_usage
+      #   class ExampleForm < ApplicationForm
+      #     form do |example_form|
+      #       example_form.text_field(attributes)
+      #     end
+      #   end
       class Component < Ariadne::Form::BaseInputComponent
         option :name
         option :label
@@ -16,15 +24,15 @@ module Ariadne
         }
         # renders_one :trailing_visual, BaseComponent::ACCEPT_ANYTHING
 
-        option :theme, default: proc { :primary }
-        option :size, default: proc { :base }
-        option :width, default: proc { :narrow }
+        option :theme, default: -> { :primary }
+        option :size, default: -> { :base }
+        option :width, default: -> { :narrow }
 
         option :label_classes, default: -> { "" }
         option :label_arguments, default: -> { {} }
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:, width:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(theme:, size:, width:), html_attrs[:class]].join(" "))
 
           html_attrs
         end
@@ -38,7 +46,7 @@ module Ariadne
         end
 
         def label_styles
-          Ariadne::ViewComponents.tailwind_merger.merge([style(:label), label_classes].join(" "))
+          merge_tailwind_classes([style(:label), label_classes].join(" "))
         end
 
         style do
@@ -53,9 +61,8 @@ module Ariadne
               "dark:disabled:ariadne-text-zinc-600",
               "disabled:ariadne-cursor-not-allowed",
 
-              "ariadne-bg-foreground",
+              "ariadne-bg-slate-50",
               "dark:ariadne-bg-foreground-dark",
-              "dark:ariadne-bg-zinc-900",
             ]
           end
 

data/app/components/ariadne/form/toggle/component.rb

@@ -22,7 +22,7 @@ module Ariadne
         option :enabled, default: proc { true }
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge(["ariadne-sr-only ariadne-peer", html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes(["ariadne-sr-only ariadne-peer", html_attrs[:class]].join(" "))
 
           if @checked
             html_attrs[:checked] = @checked
@@ -40,7 +40,7 @@ module Ariadne
         end
 
         def before_render
-          @label_id = ::Ariadne::ViewHelper.generate_id
+          @label_id = Ariadne::BaseComponent.generate_id
 
           if @form_url.present?
             csrf_token = view_context.form_authenticity_token(

data/app/components/ariadne/form/toggle_group/component.rb

@@ -12,7 +12,7 @@ module Ariadne
         }
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
         end
 
         style do

data/app/components/ariadne/form/toggle_group/option/component.rb

@@ -13,7 +13,7 @@ module Ariadne
           option :checked, default: proc { false }
 
           accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:tab), html_attrs[:class]].join(" "))
+            html_attrs[:class] = merge_tailwind_classes([style(:tab), html_attrs[:class]].join(" "))
           end
 
           def input_type

data/app/components/ariadne/layout/grid/component.rb

@@ -8,7 +8,7 @@ module Ariadne
         renders_many :items, Ariadne::Layout::Grid::Item::Component
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:grid), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(:grid), html_attrs[:class]].join(" "))
         end
 
         style :grid do

data/app/components/ariadne/layout/grid/item/component.rb

@@ -6,10 +6,10 @@ module Ariadne
     module Grid
       module Item
         class Component < Ariadne::BaseComponent
-          option :type, default: proc { :base }
+          option :type, default: -> { :base }
 
           accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:item), html_attrs[:class]].join(" "))
+            html_attrs[:class] = merge_tailwind_classes([style(:item), html_attrs[:class]].join(" "))
           end
 
           def blank?

data/app/components/ariadne/layout/label_block/component.rb

@@ -21,7 +21,7 @@ module Ariadne
             options[:theme] ||= :none
             options[:html_attrs] ||= {}
 
-            options[:html_attrs][:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:trailing_visual), options[:html_attrs][:class] || ""].join(" "))
+            options[:html_attrs][:class] = merge_tailwind_classes([style(:trailing_visual), options[:html_attrs][:class] || ""].join(" "))
 
             Ariadne::UI::Button::Component.new(**options)
           },

data/app/components/ariadne/layout/narrow/component.html.erb

@@ -1,10 +1,10 @@
 <main class="<%= html_attrs[:class] %>" <%= html_attributes %>>
     <div class="ariadne-mt-10 sm:ariadne-mx-auto sm:ariadne-w-full sm:ariadne-max-w-[480px]">
-        <div class="ariadne-bg-foreground dark:ariadne-bg-foreground-dark ariadne-px-6 ariadne-py-12 ariadne-shadow sm:ariadne-rounded-lg sm:ariadne-px-12">
+        <div class="ariadne-bg-card dark:ariadne-bg-card-dark ariadne-px-6 ariadne-py-12 ariadne-shadow sm:ariadne-rounded-lg sm:ariadne-px-12">
             <%= content %>
         </div>
-        <% if footer? %>
-            <%= footer %>
-        <% end %>
-    </div>
+  <% if footer? %>
+    <%= footer %>
+  <% end %>
+</div>
 </main>

data/app/components/ariadne/layout/narrow/component.rb

@@ -8,7 +8,7 @@ module Ariadne
         renders_one :footer, Ariadne::BaseComponent::ACCEPT_ANYTHING
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:container), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(:container), html_attrs[:class]].join(" "))
         end
 
         style(:container) do

data/app/components/ariadne/ui/accordion/component.rb

@@ -4,11 +4,13 @@
 module Ariadne
   module UI
     module Accordion
+      # A vertically stacked set of interactive headings that each reveal a section of content.
       class Component < Ariadne::BaseComponent
+        # Represent the item stored within the accordion.
         renders_many :items, Ariadne::UI::Accordion::Item::Component
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
         end
 
         style do

data/app/components/ariadne/ui/accordion/item/component.html.erb

@@ -1,15 +1,15 @@
 <div class="<%= style(:item) %>" data-controller="<%= Ariadne::UI::Accordion::Component.stimulus_name %>">
-  <button type="button" class="<%= html_attrs[:class] %>" <%= html_attributes %> data-<%= stimulus_name %>-state-value="closed" data-action="click-><%= Ariadne::UI::Accordion::Component.stimulus_name %>#toggle">
+  <button type="button" class="<%= html_attrs[:class] %>" <%= html_attributes %>>
     <%= text %>
     <div data-<%= Ariadne::UI::Accordion::Component.stimulus_name %>-target="icon">
-      <% if heroicon? %>
-        <%= heroicon %>
-      <% else %>
-        <%= render Ariadne::UI::Heroicon::Component.new(icon: "chevron-down", size: :sm, variant: :solid, html_attrs: { class: "ariadne-transition-transform ariadne-duration-200 ariadne-opacity-50" }) %>
-      <% end %>
-    </div>
-  </button>
-  <div class="<%= style(:content) %>" data-<%= Ariadne::UI::Accordion::Component.stimulus_name %>-target="content">
-    <%= content %>
+    <% if heroicon? %>
+      <%= heroicon %>
+    <% else %>
+      <%= render Ariadne::UI::Heroicon::Component.new(icon: "chevron-down", size: :sm, variant: :solid, html_attrs: { class: "ariadne-transition-transform ariadne-duration-200 ariadne-opacity-50" }) %>
+    <% end %>
   </div>
+</button>
+<div class="<%= style(:content) %>" data-<%= Ariadne::UI::Accordion::Component.stimulus_name %>-target="content">
+  <%= content %>
+</div>
 </div>

data/app/components/ariadne/ui/accordion/item/component.rb

@@ -4,15 +4,24 @@ module Ariadne
   module UI
     module Accordion
       module Item
+        # The item stored within the accordion.
         class Component < Ariadne::BaseComponent
+          # @param [String] text The of the accordion item.
           option :text
 
+          # Trailing visual at the left of the badge text.
+          #
+          # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
           renders_one :heroicon, Ariadne::UI::Heroicon::Component
 
           accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:trigger), html_attrs[:class]].join(" "))
-            html_attrs[:data] ||= {}
-            html_attrs[:data] = {}.merge(html_attrs[:data])
+            html_attrs[:class] = merge_tailwind_classes([style(:trigger), html_attrs[:class]].join(" "))
+
+            component_data_attrs = {
+              "#{stimulus_name}-state-value": "closed",
+              action: "click->#{stimulus_name}#toggle",
+            }
+            html_attrs[:data] = merge_data_attributes(html_attrs, component_data_attrs)
           end
 
           style(:item) do

data/app/components/ariadne/ui/avatar/component.html.erb

@@ -1,7 +1,9 @@
-<% if src %>
-  <img src="<%= src %>" title="<%= title %>" class="<%= style(size:, circle:, has_src: src.present?) %>">
-<% else %>
-  <div title="<%= title %>" class="<%= style(size:, circle:, has_src: src.present?) %>">
-    <%= placeholder_text %>
-  </div>
-<% end %>
+<span>
+  <% if src %>
+    <%= render Ariadne::UI::Image::Component.new(src:, alt:, size:, html_attrs: ) %>
+  <% else %>
+    <span class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+      <%= placeholder_text %>
+    </span>
+    <% end %>
+  </span>

data/app/components/ariadne/ui/avatar/component.rb

@@ -4,17 +4,46 @@
 module Ariadne
   module UI
     module Avatar
+      # A component that can represent a user or entity with an image or initials.
+      #
+      # @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 Component < Ariadne::BaseComponent
-        option :title, default: proc { "" }
+        # @param [String] initials The text to show if no `src` is provided.
+        option :text, optional: true
+        # @param [String] src The avatar's URL.
         option :src, optional: true
-        option :size, default: proc { :base }
-        option :circle, default: proc { false }
+        # @param [String] size The avatar's alt text.
+        option :alt, optional: true
+        # @param [String] size (Ariadne::UI::Badge::DEFAULT_SIZE) The avatar's size. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { :md }
+
+        DEFAULT_SHAPE = :circle
+        SHAPE_OPTIONS = [DEFAULT_SHAPE, :square].freeze
+        # @param [Symbol] shape Shape of the avatar. <%= one_of(Ariadne::UI::Avatar::Component::SHAPE_OPTIONS) %>
+        option :shape, default: proc { DEFAULT_SHAPE }
 
         attr_reader :placeholder_text
 
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = merge_tailwind_classes([style(size:, shape:, has_src: src.present?), html_attrs[:class]].join(" "))
+        end
+
         style do
           base do
-            "select-none object-cover"
+            [
+              "ariadne-select-none",
+              "ariadne-object-cover",
+              "ariadne-outline",
+              "ariadne-outline-1",
+              "-ariadne-outline-offset-1",
+              "ariadne-outline-black/20",
+              "dark:ariadne-outline-white/20",
+            ]
           end
 
           variants do
@@ -25,9 +54,20 @@ module Ariadne
               lg { ["ariadne-size-10", "ariadne-text-lg", "ariadne-rounded-lg"] }
               xl { ["ariadne-size-12", "ariadne-text-xl", "ariadne-rounded-xl"] }
             end
-            circle do
-              yes { "!ariadne-rounded-full" }
+
+            shape do
+              square do
+                []
+              end
+
+              circle do
+                [
+                  "ariadne-rounded-full",
+                  "*:ariadne-rounded-full",
+                ]
+              end
             end
+
             has_src do
               no do
                 [
@@ -45,8 +85,16 @@ module Ariadne
         end
 
         def before_render
+          validate!
+
+          # One char long or two
           len = [:xs, :sm, :md].include?(size) ? 0 : 1
-          @placeholder_text = (title || "").strip.split[0..len].map { |word| word.capitalize[0] }.join
+          @placeholder_text = (text || "").strip.split[0..len].map { |word| word.capitalize[0] }.join
+        end
+
+        private def validate!
+          raise ArgumentError, "Must provide either `text` or `src`" if @text.blank? && @src.blank?
+          raise ArgumentError, "Must provide only `text` or `src`, not both" if @text.present? && @src.present?
         end
       end
     end

data/app/components/ariadne/ui/badge/component.rb

@@ -4,9 +4,19 @@
 module Ariadne
   module UI
     module Badge
+      # Use the Badge component to highlight important information.
       class Component < Ariadne::BaseComponent
+        DEFAULT_SIZE = :md
+        DEFAULT_COLOR = :none
+
+        # @param [String] text The text within the badge.
         option :text, default: proc { nil }
-        option :size, default: proc { :md }
+
+        # @param [Symbol] size (Ariadne::UI::Badge::DEFAULT_SIZE) The size of the badge. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
+
+        # @param [Symbol] color (Ariadne::ColorHelper::DEFAULT_COLOR) The color of the badge. <%= one_of(Ariadne::ColorHelper::VALID_COLORS.keys) %>
+        option :color, default: proc { DEFAULT_COLOR }
 
         # Leading visuals appear to the left of the badge text.
         #
@@ -14,23 +24,22 @@ module Ariadne
         #
         # - `leading_visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
         # - `leading_visual_color_dot` for a <%= link_to_component(Ariadne::UI::ColorDot::Component) %>.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Heroicon::Component) %> and <%= link_to_component(Ariadne::UI::ColorDot::Component) %>.
         renders_one :leading_visual, types: {
-          heroicon: lambda { |**options|
-            options[:size] = size
-            Ariadne::UI::Heroicon::Component.new(**options)
-          },
-          color_dot: lambda { |**options|
-            options[:size] = size # Use the same size as the badge
-            Ariadne::UI::ColorDot::Component.new(**options)
-          },
+          heroicon: Ariadne::UI::Heroicon::Component,
+          color_dot: Ariadne::UI::ColorDot::Component,
         }
 
         include Ariadne::Behaviors::Tooltipable
 
-        # must be dont here rather than within an `accepts_html_attributes` block
-        # because the padding class is dependent on the slot's existence, which isn't known until now
+        accepts_html_attributes do |html_attrs|
+        end
+
+        # must be done here rather than within an `accepts_html_attributes` block
+        # because the padding class is dependent on the `with_leading_item` slot's existence, which isn't known until now
         def before_render
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:, with_leading_item: leading_visual ? :yes : :no), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(size:, color:, with_leading_item: leading_visual ? :yes : :no), html_attrs[:class]].join(" "))
         end
 
         style do
@@ -38,7 +47,7 @@ module Ariadne
             [
               "ariadne-truncate",
               "ariadne-max-w-full",
-              "ariadne-border-0.5",
+              "ariadne-border",
               "ariadne-border-solid",
               "ariadne-border-black/10",
               "dark:ariadne-border-white/10",
@@ -56,15 +65,25 @@ module Ariadne
           end
 
           variants do
+            extend Ariadne::ColorHelper
+            include_colors!
+
             with_leading_item do
               yes { "ariadne-inline-flex ariadne-items-center" }
               no { "ariadne-inline-block" }
             end
 
+            theme do
+              outline { "ariadne-bg-transparent ariadne-text-blue-400 ariadne-border-blue-400" }
+              ghost { "ariadne-bg-blue-400 ariadne-text-white ariadne-border-blue-400" }
+            end
+
             size do
-              xs { "ariadne-leading-5 ariadne-text-xs ariadne-rounded-md" }
-              sm { "ariadne-leading-6 ariadne-text-sm ariadne-rounded-lg" }
-              md { "ariadne-leading-7 ariadne-text-base ariadne-rounded-xl" }
+              xs { "ariadne-text-xs ariadne-leading-3" }
+              sm { "ariadne-text-xs ariadne-leading-4" }
+              md { "ariadne-text-base ariadne-leading-5" }
+              lg { "ariadne-text-lg ariadne-leading-6" }
+              xl { "ariadne-text-xl ariadne-leading-8" }
             end
           end
 

data/app/components/ariadne/ui/banner/component.html.erb

@@ -0,0 +1,23 @@
+<div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
+  <section aria-labelledby="<%= @header_id %>" class="ariadne-p-4">
+    <div class="ariadne-flex ariadne-items-center">
+      <div class="ariadne-flex-shrink-0 <%= style(:text, scheme:) %>">
+        <%= render heroicon_or_default %>
+      </div>
+      <div class="ariadne-ml-3 ariadne-w-0 ariadne-flex-1 ariadne-pt-0.5 <%= style(:text, scheme:) %>">
+        <p id="<%= @header_id %>" class="ariadne-text-sm ariadne-font-semibold" data-<%= Ariadne::UI::Banner::Component.stimulus_name %>-target="title"><%= title %></p>
+        <p class="ariadne-mt-1 ariadne-text-sm" data-<%= Ariadne::UI::Banner::Component.stimulus_name %>-target="message"><%= content %></p>
+      </div>
+      <% if action %>
+        <div class="ariadne-flex">
+          <%= action %>
+        </div>
+      <% end %>
+      <div class="ariadne-ml-4 ariadne-flex ariadne-flex-shrink-0 ">
+        <% if @dismissible %>
+          <%= render Ariadne::UI::Button::Component.new(scheme: :nude, html_attrs: { class: style(:dismissable, scheme:), aria: { label: dismiss_label }, data: { action: "click->#{stimulus_name}#dismiss" } }).as_icon(icon: "x-mark", variant: :outline) %>
+        <% end %>
+      </div>
+    </div>
+  </section>
+</div>