ariadne_view_components 0.0.93.1 → 0.0.94

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

@@ -0,0 +1,226 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Banner
+      # Use this component to draw attention to important information.
+      #
+      # ### Events
+      #
+      # |Name      |Type                |Bubbles |Cancelable |
+      # |:---------|:-------------------|:-------|:----------|
+      # |`dismiss` |`CustomEvent<void>` |No      |No         |
+      #
+      #
+      # @accessibility
+      #  ### Improve discoverability with a heading and landmark
+      #  Banners are made visually prominent with icons and colors to immediately draw attention.
+      #
+      #  To ensure the Banner is also easily discoverable for assistive technology users, you must provide a heading inside of the Banner that describes the purpose of the Banner.
+      class Component < Ariadne::BaseComponent
+        # @param [Boolean] dismissible Whether the component can be dismissed with an "x" button.
+        option :dismissible, default: -> { false }
+        # @param [String] dismiss_label The aria-label text of the dismiss "x" button
+        option :dismiss_label, optional: true
+
+        DEFAULT_SCHEME = :default
+        VALID_SCHEMES = [DEFAULT_SCHEME, :danger, :warning, :info, :success].freeze
+
+        # @param [Symbol] scheme (:default) The scheme design to use. <%= one_of(Ariadne::UI::Banner::Component::VALID_SCHEMES) %>
+        option :scheme, default: -> { DEFAULT_SCHEME }
+
+        # @param [Symbol] width (:base) Indicates the width of the button. Can be either `:base` or `:full`.
+        option :width, default: proc { :base }
+
+        # @param [Boolean, String] autohide (false) Autohides the banner after a set amount of time. If `true`, uses the default timeout;
+        # otherwise, provide a value to use.
+        option :autohide, default: -> { false }
+
+        # @param [String] title A header announcing the banner.
+        option :title
+
+        # Content that will render on the right-hand side of the component.
+        #
+        # To render a button, call the `with_action_button` method, which accepts the arguments accepted by <%= link_to_component(Ariadne::UI::Button::Component) %>.
+        #
+        # To render custom content, call the `with_action_content` method and pass a block that returns HTML.
+        renders_one :action, types: {
+          button: Ariadne::UI::Button::Component,
+          content: Ariadne::BaseComponent::ACCEPT_ANYTHING,
+        }
+
+        # @param [Symbol] heroicon The name of a <%= link_to_heroicons %> icon to show on the left-hand side of the component. If no icon is provided, one will be chosen based on the scheme.
+        renders_one :heroicon, Ariadne::UI::Heroicon::Component
+
+        def icon
+          heroicon || infer_icon
+        end
+
+        accepts_html_attributes do |html_attrs|
+          autohide_value = if @autohide == true
+            4000
+          else
+            @autohide.presence || 0
+          end
+
+          component_data_attrs = {
+            controller: stimulus_name,
+            "#{stimulus_name}-target": "banner",
+            "#{stimulus_name}-autohide-value": autohide_value,
+          }
+          html_attrs[:data] = merge_data_attributes(html_attrs, component_data_attrs)
+
+          html_attrs[:class] = merge_tailwind_classes([
+            style(scheme:, width:),
+            html_attrs[:class],
+          ])
+        end
+
+        def before_render
+          raise ArgumentError, "Requires `dismiss_label`" if dismissible && dismiss_label.nil?
+
+          @header_id = self.class.generate_id
+        end
+
+        def heroicon_or_default
+          if heroicon?
+            heroicon
+          else
+            icon = case scheme
+            when :danger
+              :"exclamation-circle"
+            when :warning
+              :"exclamation-triangle"
+            when :info
+              :"information-circle"
+            when :success
+              :"check-circle"
+            else
+              :"chat-bubble-bottom-center"
+            end
+
+            Ariadne::UI::Heroicon::Component.new(icon: icon, variant: :outline)
+          end
+        end
+
+        style do
+          base do
+            [
+              "ariadne-border",
+              "ariadne-pointer-events-auto",
+              "ariadne-overflow-hidden",
+              "ariadne-rounded-lg",
+              "ariadne-shadow-lg",
+              "ariadne-ring-1",
+              "ariadne-ring-slate-950",
+              "ariadne-ring-opacity-5",
+              "ariadne-z-50",
+            ]
+          end
+
+          variants do
+            width do
+              base do
+                [
+                  "ariadne-w-full",
+                  "ariadne-max-w-lg",
+                ]
+              end
+
+              full do
+                [
+                  "ariadne-w-full",
+                ]
+              end
+            end
+
+            scheme do
+              default do
+                []
+              end
+              danger do
+                [
+                  "ariadne-border-danger",
+                  "ariadne-bg-red-50",
+                ]
+              end
+              warning do
+                [
+                  "ariadne-border-warning",
+                  "ariadne-bg-yellow-50",
+                ]
+              end
+              info do
+                [
+                  "ariadne-border-info",
+                  "ariadne-bg-blue-50",
+                ]
+              end
+              success do
+                [
+                  "ariadne-border-success",
+                  "ariadne-bg-green-50",
+                ]
+              end
+            end
+          end
+        end
+
+        style(:text) do
+          variants do
+            scheme do
+              danger do
+                [
+                  "ariadne-text-red-700",
+                ]
+              end
+              warning do
+                [
+                  "ariadne-text-yellow-700",
+                ]
+              end
+              info do
+                [
+                  "ariadne-text-blue-700",
+                ]
+              end
+              success do
+                [
+                  "ariadne-text-green-700",
+                ]
+              end
+            end
+          end
+        end
+
+        style(:dismissable) do
+          variants do
+            scheme do
+              danger do
+                [
+                  "ariadne-text-red-700",
+                ]
+              end
+              warning do
+                [
+                  "ariadne-text-yellow-700",
+                ]
+              end
+              info do
+                [
+                  "ariadne-text-blue-700",
+                ]
+              end
+              success do
+                [
+                  "ariadne-text-green-700",
+                ]
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/banner/component.ts

@@ -0,0 +1,46 @@
+import {controllerFactory} from '@utils/createController'
+
+export default class Controller extends controllerFactory()({
+  targets: {
+    banner: HTMLDivElement,
+  },
+  values: {
+    open: Boolean,
+    autohide: {
+      default: 4000,
+      type: Number,
+    },
+  },
+}) {
+  connect() {
+    if (this.autohideValue != 0) {
+    const noop = (): void => {};
+
+    // Set a timer for it to be removed from the dom automatically
+    setTimeout(() => {
+      this.hide().then(noop).catch(noop);
+    }, this.autohideValue);
+  }
+  }
+
+  dismiss() {
+    this.remove();
+    // this.hide()
+
+    this.dispatchEvent(this.bannerTarget, 'ariadne-banner:dismiss')
+  }
+
+  show() {
+    this.bannerTarget.style.setProperty('display', 'initial')
+  }
+
+  remove() {
+    const parentElement = this.bannerTarget.parentElement
+    if (!parentElement) return
+
+    parentElement.removeChild(this.bannerTarget)
+  }
+  hide() {
+    this.bannerTarget.style.setProperty('display', 'none')
+  }
+}

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

@@ -1,7 +1,7 @@
 <div class="ariadne-grow ariadne-flex ariadne-flex-col ariadne-justify-center ariadne-items-center ariadne-gap-1">
-  <%= visual_icon %>
+  <%= visual_heroicon %>
   <div class="ariadne-pt-5">
-  <%= render(Ariadne::UI::Typography::Component.new(type: :ann)) { title } %>
+    <%= render(Ariadne::UI::Typography::Component.new(type: :ann)) { title } %>
   </div>
   <div class="ariadne-space-y-2">
     <%= render(Ariadne::UI::Typography::Component.new(type: :lede)) { description } %>

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

@@ -4,11 +4,22 @@
 module Ariadne
   module UI
     module Blankslate
+      # Blankslate is used as placeholder to tell users why content is missing.
       class Component < Ariadne::BaseComponent
+        # @param [String] title The blank slate's title.
         option :title
+        # @param [String] description A description of why content is missing.
         option :description, optional: true
 
-        renders_one :visual_icon, Ariadne::UI::Heroicon::Component
+        # Optional visual that appears at the center of the blankslate.
+        #
+        # Use:
+        #
+        # - `visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
+
+        renders_one :visual_heroicon, Ariadne::UI::Heroicon::Component
       end
     end
   end

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

@@ -4,19 +4,38 @@
 module Ariadne
   module UI
     module Button
+      # Used to initiate actions on a page or form.
+      #
+      # You can call `as_icon` to render a button with only an icon.
+      #
+      # @accessibility If `as_icon` is called, you must provide an `aria-label` or `aria-description` to the button.
+      #
+      # @behaviors <%= link_to_component(Ariadne::Behaviors::Tooltipable) %>
       class Component < Ariadne::BaseComponent
         attr_reader :icon_only
 
-        include Ariadne::Behaviors::Captionable
         include Ariadne::Behaviors::Tooltipable
 
-        option :as, default: proc { :button }
-        option :href, default: proc { nil }
+        # @param [Symbol] as (:button) One of `:button` or :link. Indicates how to render the button: as a `button` or `a` tag.
+        option :as, default: -> { :button }
 
+        # @param [Symbol] href If `as: == :link`, this indicates where the `a` should go.
+        option :href, default: -> { nil }
+
+        # @param [String] type (button) Indicates the button's type, e.g. `submit`.
         option :type, default: proc { "button" }
-        option :state, default: proc { "" }
-        option :theme, default: proc { :primary }
-        option :size, default: proc { :md }
+
+        DEFAULT_SCHEME = :primary
+        SCHEME_OPTIONS = [DEFAULT_SCHEME, :secondary, :nude, :danger].freeze
+
+        # @param [Symbol] scheme (:primary) Indicates the button's scheme. <%= one_of(Ariadne::UI::Button::Component::SCHEME_OPTIONS) %>
+        option :scheme, default: proc { DEFAULT_SCHEME }
+
+        DEFAULT_SIZE = :md
+        # @param [Symbol] size (Ariadne::UI::Button::DEFAULT_SIZE) Indicates the button's size. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
+
+        # @param [Symbol] width (:narrow) Indicates the width of the button. Can be either `:narrow` or `:full`.
         option :width, default: proc { :narrow }
 
         # Leading visuals appear to the left of the button text.
@@ -24,11 +43,10 @@ module Ariadne
         # Use:
         #
         # - `leading_visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
+        #
+        # @param options [Hash] Same arguments as the chosen visual.
         renders_one :leading_visual, types: {
-          heroicon: lambda { |**options|
-            options[:size] = @size
-            Ariadne::UI::Heroicon::Component.new(**options)
-          },
+          heroicon: Ariadne::UI::Heroicon::Component,
         }
 
         # Trailing visuals appear to the right of the button text.
@@ -36,15 +54,14 @@ module Ariadne
         # Use:
         #
         # - `trailing_visual_heroicon` for a <%= link_to_component(Ariadne::UI::Heroicon::Component) %>.
+        #
+        # @param options [Hash] Same arguments as the chosen visual.
         renders_one :trailing_visual, types: {
-          heroicon: lambda { |**options|
-            options[:size] = @size
-            Ariadne::UI::Heroicon::Component.new(**options)
-          },
+          heroicon: Ariadne::UI::Heroicon::Component,
         }
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:, icon_only:, width:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(scheme:, size:, icon_only:, width:), html_attrs[:class]].join(" "))
 
           if link?
             raise ArgumentError, "Button needs an `href` defined when using `as: :link`" if href.blank?
@@ -57,10 +74,6 @@ module Ariadne
           end
         end
 
-        def initialize(**options)
-          super
-        end
-
         def as_icon(**options)
           validate_aria_label!(html_attrs)
 
@@ -109,17 +122,15 @@ module Ariadne
           end
 
           variants do
-            theme do
+            scheme do
               primary do
                 [
                   "ariadne-bg-primary",
                   "ariadne-text-primary-foreground",
 
-                  "hover:ariadne-bg-primary-hover",
-                  "active:ariadne-bg-primary-active",
+                  "hover:enabled:ariadne-bg-primary/90",
 
-                  "disabled:ariadne-bg-primary-disabled-dark",
-                  "disabled:ariadne-text-primary-disabled-foreground-dark",
+                  "disabled:ariadne-opacity-50",
                 ]
               end
 

data/app/components/ariadne/ui/card/body/component.rb

@@ -7,7 +7,7 @@ module Ariadne
       module Body
         class Component < Ariadne::BaseComponent
           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/card/component.rb

@@ -5,26 +5,30 @@ module Ariadne
   module UI
     module Card
       class Component < Ariadne::BaseComponent
-        option :href, default: -> { nil }
+        # @param [String] href If provided, renders the entire card as a link.
+        option :href, optional: true
 
+        # Represent the card's header.
         renders_one :header, Ariadne::UI::Card::Header::Component
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(link: href.present? ? :yes : :no), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(link: href.present? ? :yes : :no), html_attrs[:class]].join(" "))
         end
 
+        # The card's body.
         renders_one :body, Ariadne::UI::Card::Body::Component
+
+        # Represent the card's footer
         renders_one :footer, Ariadne::UI::Card::Footer::Component
 
         style do
           base do
             [
-              "ariadne-rounded-lg",
+              "ariadne-rounded-xl",
               "ariadne-border",
-              "ariadne-bg-foreground",
-              "dark:ariadne-bg-foreground-dark",
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
+              "ariadne-bg-card",
+              "ariadne-text-card-foreground",
+              "ariadne-shadow",
             ]
           end
 

data/app/components/ariadne/ui/card/footer/component.rb

@@ -7,7 +7,7 @@ module Ariadne
       module Footer
         class Component < Ariadne::BaseComponent
           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/card/header/component.html.erb

@@ -1,6 +1,6 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <%= title %>
+  <span class="<%= style(:title) %>"><%= title %></span>
   <% if description %>
-    <%= description %>
+    <span class="<%= style(:description) %>"><%= description %></span>
   <% end %>
 </div>

data/app/components/ariadne/ui/card/header/component.rb

@@ -5,26 +5,16 @@ module Ariadne
   module UI
     module Card
       module Header
+        # The header of a card.
         class Component < Ariadne::BaseComponent
-          renders_one :title, lambda { |type: :subheading, **options|
-                                options[:type] ||= type
-                                options[:html_attrs] ||= {}
-                                options[:html_attrs][:class] ||= ""
-                                options[:html_attrs][:class] = [
-                                  "ariadne-grow",
-                                  "ariadne-leading-none",
-                                  options[:html_attrs][:class],
-                                ]
-                                Ariadne::UI::Typography::Component.new(**options)
-                              }
+          # @param [String] title If provided, serves as the title of the card.
+          option :title, optional: true
 
-          renders_one :description, lambda { |type: :muted, **options|
-                                      options[:type] ||= type
-                                      Ariadne::UI::Typography::Component.new(**options)
-                                    }
+          # @param [String] description If provided, serves as the description of the card.
+          option :description, optional: true
 
           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
@@ -37,6 +27,25 @@ module Ariadne
               ]
             end
           end
+
+          style(:title) do
+            base do
+              [
+                "ariadne-font-semibold",
+                "ariadne-leading-none",
+                "ariadne-tracking-tight",
+              ]
+            end
+          end
+
+          style(:description) do
+            base do
+              [
+                "araidne-text-sm",
+                "ariadne-text-muted-foreground",
+              ]
+            end
+          end
         end
       end
     end

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

@@ -6,3 +6,4 @@
     <%= render Ariadne::UI::Heroicon::Component.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, html_attrs: { class: "ariadne-text-green-600 ariadne-hidden", data: { "ariadne-ui-clipboard-copy-target" => "confirmed" }}) %>
   <% end %>
 </clipboard-copy>
+  <div aria-live="polite" aria-atomic="true" class="ariadne-sr-only" data-clipboard-copy-feedback></div>

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

@@ -4,28 +4,24 @@
 module Ariadne
   module UI
     module ClipboardCopy
-      # Use `ClipboardCopy` to copy element text content or input values to the clipboard.
-      #
-      # @example Default
-      #   <%= render(Ariadne::UI::ClipboardCopy::Component.new(value: "Text to copy", aria_label: "Copy text to the system clipboard" )) %>
-      #
-      # @example With text instead of icons
-      #   <%= render(Ariadne::UI::ClipboardCopy::Component.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::UI::ClipboardCopy::Component.new(for_id: "blob-path", aria_label: "Copy text to the system clipboard" )) %>
-      #   <div id="blob-path">src/index.js</div>
+      # Use this 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 Component < Ariadne::UI::Button::Component
-        # @param value [Strinulus_g] Text to copy when the component is clicked.
+      #   Always set an accessible label (through `aria-label`) to help the user interact with the component.
+      #
+      #   This component has a built-in `aria-live` region that announces "Copied!" when the copy element is pressed.
+      class Component < Ariadne::BaseComponent
+        # @param [String] value Text to copy when the component is clicked.
         option :value, optional: true
-        # @param for [String] If `value` is not provided, the element with this id will be copied.
+        # @param [String] for If `value` is not provided, the element with this id will be copied.
         option :for, optional: true
 
+        DEFAULT_SIZE = :md
+        # @param [Symbol] size (Ariadne::UI::ClipboardCopy::DEFAULT_SIZE) Indicates the button's size. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
+
+        include Ariadne::Behaviors::Tooltipable
+
         def initialize(**options)
           super
           validate!
@@ -37,7 +33,7 @@ module Ariadne
           html_attrs[:value] = @value if @value.present?
           html_attrs[:for] = @for if @for.present?
 
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(size:), html_attrs[:class]].join(" "))
 
           html_attrs[:data]["#{stimulus_name}-hidden-class-value"] = "ariadne-hidden"
           html_attrs[:data]["#{stimulus_name}-show-class-value"] = "ariadne-inline-block"
@@ -86,9 +82,6 @@ module Ariadne
                   "[&>svg]:ariadne-size-4",
                 ]
               end
-              base do
-                ["ariadne-gap-1", "ariadne-text-base", "ariadne-rounded-md"]
-              end
               md do
                 [
                   "ariadne-gap-1",
@@ -100,6 +93,9 @@ module Ariadne
               lg do
                 ["ariadne-gap-1", "ariadne-text-lg", "ariadne-rounded-lg"]
               end
+              xl do
+                ["ariadne-gap-1", "ariadne-text-xl", "ariadne-rounded-xl"]
+              end
             end
           end
         end

data/app/components/ariadne/ui/clipboard_copy/component.ts

@@ -23,12 +23,27 @@ export default class ClipboardCopyController extends controllerFactory<HTMLDetai
   copy(event: Event) {
     const target = event.target as HTMLElement
     const currentTimeout = this.clipboardCopyElementTimers.get(target)
+    const clipboardCopyLiveRegion = target.parentNode?.querySelector<HTMLElement>('[data-clipboard-copy-feedback]')
+    const copiedAnnouncement = 'Copied!'
 
     if (currentTimeout) {
       clearTimeout(currentTimeout)
       this.clipboardCopyElementTimers.delete(target)
     } else {
       this.showConfirm()
+
+      if (clipboardCopyLiveRegion) {
+        if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+          /* This is a hack due to the way the aria live API works.
+          A screen reader will not read a live region again
+          if the text is the same. Adding a space character tells
+          the browser that the live region has updated,
+          which will cause it to read again, but with no audible difference. */
+          clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`
+        } else {
+          clipboardCopyLiveRegion.textContent = copiedAnnouncement
+        }
+      }
     }
 
     this.clipboardCopyElementTimers.set(

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

@@ -1,7 +1,7 @@
 <span class="<%= style(size:) %>">
-    <span class="ariadne-px-0.5 ariadne-p-1 ariadne-shrink-0">
-        <svg class="<%= style(:svg, size:) %>" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="0.5" cy="0.5" r="0.5" fill="<%= "rgba(#{color.join(',')})" %>" />
-        </svg>
+  <span class="ariadne-px-0.5 ariadne-p-1 ariadne-shrink-0">
+    <svg class="<%= style(:svg, size:) %>" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="0.5" cy="0.5" r="0.5" fill="#<%= color %>" />
+      </svg>
     </span>
-</span>
+  </span>