ariadne_view_components 0.0.43 → 0.0.44

data/app/components/ariadne/tooltip_component.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
+  # Use tooltips sparingly and as a last resort.
+  #
+  # When using a tooltip, follow the provided guidelines to avoid accessibility issues.
+  #
+  # - Tooltip text should be brief and to the point. The tooltip content must be a string.
+  # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
+  #  use tooltips to convey critical information.
+  #
+  # @accessibility
+  #   - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
+  #   and screen reader users.
+  #   - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
+  #   content.
+  #   ### Which `type` should I set?
+  #   Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
+  #
+  #   The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+  #   - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
+  #   The majority of tooltips will fall under this category.
+  #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
+  #   This type is usually only appropriate for an icon-only control.
+  class TooltipComponent < Ariadne::Component
+    DEFAULT_TAG = :tooltip
+    DEFAULT_PLACEMENT = :top
+    VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
+
+    DEFAULT_CLASSES = "ariadne-invisible ariadne-absolute ariadne-bg-slate-900 ariadne-text-white ariadne-font-semibold ariadne-max-w-xs ariadne-py-1 ariadne-px-2 ariadne-rounded ariadne-z-max"
+
+    DATA_CONTROLLER = "tooltip-component"
+    DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
+
+    TYPE_DEFAULT = :description
+    VALID_TYPES = [:label, TYPE_DEFAULT].freeze
+
+    # DEFAULT_DATA_ATTRIBUTES = {
+    #   "data-controller": DATA_CONTROLLER,
+    #   "data-action": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
+    #   "data-tooltip-component-placement": DEFAULT_PLACEMENT,
+    # }
+
+    # @example As a description for an icon-only button
+    #   @description
+    #     If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
+    #     The trigger element should also have a _concise_ accessible label via `aria-label`.
+    #   @code
+    #     <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
+    # @example As a label for an icon-only button
+    #   @description
+    #     If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
+    #
+    # @example As a description for a button with visible label
+    #   @description
+    #     If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
+    # @example With direction
+    #   @description
+    #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
+    #   @code
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
+    # @example With relative parent
+    #   @description
+    #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
+    #   @code
+    #     <span style="position: relative;">
+    #       <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
+    #       <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
+    #     </span>
+    # @param tag [Symbol, String] The rendered tag name
+    # @param for_id [String] The ID of the element that the tooltip should be attached to.
+    # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
+    # @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_TYPES) %>
+    # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
+      raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
+
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+
+      @text = text
+      @classes = merge_class_names(DEFAULT_CLASSES, classes)
+
+      @attributes = attributes
+      @attributes[:for] = for_id
+
+      @attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
+      @attributes[:"data-type"] = fetch_or_raise(VALID_TYPES, type)
+      @attributes[:"data-tooltip-component-target"] = "tooltip"
+    end
+  end
+end

data/lib/ariadne/view_components/engine.rb

@@ -46,28 +46,6 @@ module Ariadne
       end
 
       config.after_initialize do |_app|
-        # TODO: is any of this necessary???
-        ActionView::Base.field_error_proc = proc do |html_tag, instance_tag|
-          fragment = Nokogiri::HTML.fragment(html_tag)
-          field = fragment.at("input,select,textarea")
-
-          model = instance_tag.object
-          error_message = model.errors.full_messages.join(", ")
-
-          html = if field
-            field["class"] = "#{field["class"]} invalid"
-            html = <<-HTML
-                      #{fragment}
-                      <p class="error">#{error_message}</p>
-            HTML
-            html
-          else
-            html_tag
-          end
-
-          html.html_safe # rubocop:disable Rails/OutputSafety
-        end
-
         Ariadne::ViewComponents.tailwind_merger = TailwindMerge::Merger.new
       end
     end

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.43"
+    VERSION = "0.0.44"
   end
 end

data/tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
       resolve(__dirname, 'app/components/**/*.erb'),
       resolve(__dirname, 'app/components/**/*.rb'),
       resolve(__dirname, 'app/lib/ariadne'),
-      resolve(__dirname, 'static/classes.yml')
+      resolve(__dirname, 'static/classes.yml'),
     ],
     extract: {
       yml: content => {
@@ -38,15 +38,10 @@ module.exports = {
           return rez
         }
         return []
-      }
-    }
+      },
+    },
   },
-  plugins: [
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/line-clamp'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography')
-  ],
+  plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms'), require('@tailwindcss/typography')],
   theme: {
     extend: {
       colors: {
@@ -62,14 +57,14 @@ module.exports = {
         'internal-message': colors.amber['100'],
 
         'state-closed': '#da1e28',
-        'state-open': '#198038'
+        'state-open': '#198038',
       },
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },
       flexBasis: {
-        160: '40rem'
-      }
-    }
-  }
+        160: '40rem',
+      },
+    },
+  },
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ariadne_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.43
+  version: 0.0.44
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-05-02 00:00:00.000000000 Z
+date: 2023-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -126,6 +126,102 @@ files:
 - app/assets/stylesheets/dropdown.css
 - app/assets/stylesheets/prosemirror.css
 - app/assets/stylesheets/tooltip-component.css
+- app/components/ariadne/ariadne-form.d.ts
+- app/components/ariadne/ariadne-form.js
+- app/components/ariadne/ariadne-form.ts
+- app/components/ariadne/ariadne.d.ts
+- app/components/ariadne/ariadne.js
+- app/components/ariadne/ariadne.ts
+- app/components/ariadne/avatar_component.rb
+- app/components/ariadne/avatar_stack_component.rb
+- app/components/ariadne/avatar_stack_component/avatar_stack_component.html.erb
+- app/components/ariadne/base_button.rb
+- app/components/ariadne/base_component.rb
+- app/components/ariadne/blankslate_component.rb
+- app/components/ariadne/blankslate_component/blankslate_component.html.erb
+- app/components/ariadne/body_component.rb
+- app/components/ariadne/button_component.rb
+- app/components/ariadne/button_component/button_component.html.erb
+- app/components/ariadne/clipboard_copy_component.rb
+- app/components/ariadne/clipboard_copy_component/clipboard-copy-component.d.ts
+- app/components/ariadne/clipboard_copy_component/clipboard-copy-component.js
+- app/components/ariadne/clipboard_copy_component/clipboard-copy-component.ts
+- app/components/ariadne/clipboard_copy_component/clipboard_copy_component.html.erb
+- app/components/ariadne/comment_component.rb
+- app/components/ariadne/comment_component/comment_component.html.erb
+- app/components/ariadne/component.rb
+- app/components/ariadne/container_component.rb
+- app/components/ariadne/container_component/container_component.html.erb
+- app/components/ariadne/content.rb
+- app/components/ariadne/counter_component.rb
+- app/components/ariadne/details_component.rb
+- app/components/ariadne/details_component/details_component.html.erb
+- app/components/ariadne/dropdown/menu_component.html.erb
+- app/components/ariadne/dropdown/menu_component.rb
+- app/components/ariadne/dropdown/menu_component.ts
+- app/components/ariadne/dropdown_component.rb
+- app/components/ariadne/dropdown_component/dropdown_component.html.erb
+- app/components/ariadne/flash_component.rb
+- app/components/ariadne/flash_component/flash_component.html.erb
+- app/components/ariadne/flex_component.rb
+- app/components/ariadne/flex_component/flex_component.html.erb
+- app/components/ariadne/footer_component.rb
+- app/components/ariadne/footer_component/footer_component.html.erb
+- app/components/ariadne/grid_component.rb
+- app/components/ariadne/grid_component/grid_component.html.erb
+- app/components/ariadne/header_component.rb
+- app/components/ariadne/header_component/header_component.html.erb
+- app/components/ariadne/heading_component.rb
+- app/components/ariadne/heroicon_component.rb
+- app/components/ariadne/heroicon_component/heroicon_component.html.erb
+- app/components/ariadne/image_component.rb
+- app/components/ariadne/inline_flex_component.rb
+- app/components/ariadne/inline_flex_component/inline_flex_component.html.erb
+- app/components/ariadne/link_component.rb
+- app/components/ariadne/list_component.rb
+- app/components/ariadne/list_component/list_component.html.erb
+- app/components/ariadne/narrow_container_component.rb
+- app/components/ariadne/narrow_container_component/narrow_container_component.html.erb
+- app/components/ariadne/panel_bar_component.rb
+- app/components/ariadne/panel_bar_component/panel_bar_component.html.erb
+- app/components/ariadne/pill_component.rb
+- app/components/ariadne/pill_component/pill_component.html.erb
+- app/components/ariadne/rich_text_area_component.rb
+- app/components/ariadne/rich_text_area_component/rich-text-area-component.d.ts
+- app/components/ariadne/rich_text_area_component/rich-text-area-component.js
+- app/components/ariadne/rich_text_area_component/rich-text-area-component.ts
+- app/components/ariadne/rich_text_area_component/rich_text_area_component.html.erb
+- app/components/ariadne/slideover_component.rb
+- app/components/ariadne/slideover_component/slideover-component.d.ts
+- app/components/ariadne/slideover_component/slideover-component.js
+- app/components/ariadne/slideover_component/slideover-component.ts
+- app/components/ariadne/slideover_component/slideover_component.html.erb
+- app/components/ariadne/tab_component.rb
+- app/components/ariadne/tab_component/tab_component.html.erb
+- app/components/ariadne/tab_container_component.erb
+- app/components/ariadne/tab_container_component.rb
+- app/components/ariadne/tab_container_component/tab-container-component.d.ts
+- app/components/ariadne/tab_container_component/tab-container-component.js
+- app/components/ariadne/tab_container_component/tab-container-component.ts
+- app/components/ariadne/tab_nav_component.rb
+- app/components/ariadne/tab_nav_component/tab-nav-component.d.ts
+- app/components/ariadne/tab_nav_component/tab-nav-component.js
+- app/components/ariadne/tab_nav_component/tab-nav-component.ts
+- app/components/ariadne/tab_nav_component/tab_nav_component.html.erb
+- app/components/ariadne/table_nav_component.rb
+- app/components/ariadne/table_nav_component/table_nav_component.html.erb
+- app/components/ariadne/text.rb
+- app/components/ariadne/time_ago_component.rb
+- app/components/ariadne/time_ago_component/time-ago-component.d.ts
+- app/components/ariadne/time_ago_component/time-ago-component.js
+- app/components/ariadne/time_ago_component/time-ago-component.ts
+- app/components/ariadne/timeline_component.rb
+- app/components/ariadne/timeline_component/timeline_component.html.erb
+- app/components/ariadne/tooltip_component.rb
+- app/components/ariadne/tooltip_component/tooltip-component.d.ts
+- app/components/ariadne/tooltip_component/tooltip-component.js
+- app/components/ariadne/tooltip_component/tooltip-component.ts
+- app/components/ariadne/tooltip_component/tooltip_component.html.erb
 - config/importmap.rb
 - exe/tailwindcss
 - lib/ariadne/view_components.rb