Simplify the ui/toggletip component

- Use the position in reference to the bubble instead of the arrow
  (previously up meant the bubble was below)
- Remove the light theme (currently unused)
- Inline styles and use strings instead of arrays

admin/app/components/solidus_admin/ui/panel/component.html.erb

@@ -18,7 +18,7 @@
   <% if @title %>
     <h2 class="mt-0 px-6 w-full">
       <span class="body-title"><%= @title %></span>
-      <%= render component('ui/toggletip').new(text: @title_hint, position: :left) if @title_hint %>
+      <%= render component('ui/toggletip').new(text: @title_hint) if @title_hint %>
     </h2>
   <% end %>
 

admin/app/components/solidus_admin/ui/toggletip/component.html.erb

@@ -19,7 +19,7 @@
     "
     aria-label="<%= t('.get_help') %>"
   >
-    <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] #{icon_theme_classes}") %>
+    <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] fill-gray-800") %>
   </summary>
 
   <div
@@ -31,8 +31,9 @@
       body-tiny-bold
       rounded
       z-10
-      <%= bubble_position_classes %>
-      <%= bubble_theme_classes %>
+      text-white
+      bg-gray-800
+      <%= POSITIONS.fetch(@position)[:bubble] %>
     "
     data-<%= stimulus_id %>-target="bubble"
   >
@@ -43,7 +44,13 @@
         block
         bg-inherit
         py-[0.5rem]
-        <%= bubble_arrow_pseudo_element %>
+        before:content['']
+        before:absolute
+        before:w-[0.375rem]
+        before:h-[0.375rem]
+        before:rotate-45
+        before:bg-inherit
+        <%= POSITIONS.fetch(@position)[:arrow] %>
       "
       data-<%= stimulus_id %>-target="content"
     >

admin/app/components/solidus_admin/ui/toggletip/component.rb

@@ -1,98 +1,21 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Toggletip::Component < SolidusAdmin::BaseComponent
-  # Icon size: 1rem
-  # Arrow size: 0.375rem
-  # Banner padding x: 0.75rem
   POSITIONS = {
-    up: {
-      arrow: %w[before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]],
-      bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]]
+    below: {
+      arrow: "before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]",
+      bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]"
     },
-    up_right: {
-      arrow: %w[before:top-0 before:right-0 before:translate-y-[-50%]],
-      bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.375rem/2))] translate-y-[calc(0.375rem/2)]]
+    above: {
+      arrow: "before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]",
+      bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]"
     },
-    right: {
-      arrow: %w[before:top-1/2 before:right-0 before:translate-y-[-50%] before:translate-x-[0.93rem]],
-      bubble: %w[translate-x-[calc(-100%+(-0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
-    },
-    down_right: {
-      arrow: %w[before:bottom-0 before:right-0 before:translate-y-[50%]],
-      bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.376rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
-    },
-    down: {
-      arrow: %w[before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]],
-      bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
-    },
-    down_left: {
-      arrow: %w[before:bottom-0 before:left-0 before:translate-y-[50%]],
-      bubble: %w[translate-x-[calc(-1rem/2)] translate-y-[calc(-100%-0.75rem-0.375rem)]]
-    },
-    left: {
-      arrow: %w[before:top-1/2 before:left-0 before:translate-y-[-50%] before:translate-x-[-0.93rem]],
-      bubble: %w[translate-x-[calc(1rem+(0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
-    },
-    up_left: {
-      arrow: %w[before:top-0 before:left-0 before:translate-y-[-50%]],
-      bubble: %w[translate-x-[calc(-0.75rem+0.375rem)] translate-y-[calc(0.375rem/2)]]
-    },
-    none: {
-      arrow: %w[before:hidden],
-      bubble: %w[translate-x-[calc(-50%+0.75rem)]]
-    }
-  }.freeze
-
-  THEMES = {
-    light: {
-      icon: %w[fill-gray-500],
-      bubble: %w[text-gray-800 bg-gray-50]
-    },
-    dark: {
-      icon: %w[fill-gray-800],
-      bubble: %w[text-white bg-gray-800]
-    }
   }.freeze
 
-  # @param text [String] The toggletip text
-  # @param position [Symbol] The position of the arrow in relation to the
-  #   toggletip. The latter will be positioned accordingly in relation to the
-  #   help icon. Defaults to `:up`. See `POSITIONS` for available options.
-  # @param theme [Symbol] The theme of the toggletip. Defaults to `:light`. See
-  #   `THEMES` for available options.
-  def initialize(text:, position: :down, theme: :dark, **attributes)
+  def initialize(text:, position: :above, **attributes)
     @text = text
     @position = position
-    @theme = theme
     @attributes = attributes
-    @attributes[:class] = [
-      "relative inline-block",
-      @attributes[:class],
-    ].join(" ")
-  end
-
-  def icon_theme_classes
-    THEMES.fetch(@theme)[:icon].join(" ")
-  end
-
-  def bubble_theme_classes
-    THEMES.fetch(@theme)[:bubble].join(" ")
-  end
-
-  def bubble_position_classes
-    POSITIONS.fetch(@position)[:bubble].join(" ")
-  end
-
-  def bubble_arrow_pseudo_element
-    (
-      [
-        "before:content['']",
-        "before:absolute",
-        "before:w-[0.375rem]",
-        "before:h-[0.375rem]",
-        "before:rotate-45",
-        "before:bg-inherit",
-      ] + POSITIONS.fetch(@position)[:arrow]
-    ).join(" ")
+    @attributes[:class] = "relative inline-block #{@attributes[:class]}"
   end
 end

admin/spec/components/previews/solidus_admin/ui/toggletip/component_preview.rb

@@ -2,31 +2,21 @@
 
 # @component "ui/toggletip"
 class SolidusAdmin::UI::Toggletip::ComponentPreview < ViewComponent::Preview
-  DUMMY_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-
   include SolidusAdmin::Preview
 
   def overview
-    render_with_template(
-      locals: {
-        text: DUMMY_TEXT,
-        positions: current_component::POSITIONS.keys,
-        themes: current_component::THEMES.keys
-      }
-    )
+    render_with_template
   end
 
   # @param text text
   # @param position select :position_options
-  # @param theme select :theme_options
   # @param open toggle
-  def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
+  def playground(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", position: :above, open: false)
     render current_component.new(
       text: text,
       position: position,
-      theme: theme,
       open: open,
-      class: "m-80"
+      class: "m-40"
     )
   end
 
@@ -35,8 +25,4 @@ def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
   def position_options
     current_component::POSITIONS.keys
   end
-
-  def theme_options
-    current_component::THEMES.keys
-  end
 end

admin/spec/components/previews/solidus_admin/ui/toggletip/component_preview/overview.html.erb

@@ -1,21 +1,14 @@
-<table class="w-full">
-  <legend class="body-title text-center">Click us</legend>
-  <tr>
-    <th class="w-[10%]"></th>
-    <% themes.each do |theme| %>
-      <th class="px-3 py-1 text-gray-500 text-center"><%= theme.to_s.humanize %></th>
-    <% end %>
-  </tr>
-  <% positions.each do |position| %>
-    <tr>
-      <td class="font-bold px-3 py-1"><%= position.to_s.humanize %></td>
-      <% themes.each do |theme| %>
-        <td class="py-3">
-          <div class="flex justify-center">
-            <%= render current_component.new(text: text, theme: theme, position: position) %>
-          </div>
-        </td>
-      <% end %>
-    </tr>
-  <% end %>
-</table>
+<% current_component::POSITIONS.keys.each do |position| %>
+  <div class="mb-8">
+    <h6 class="text-gray-500 mb-3 mt-0">
+      <%= position.to_s.humanize %>
+    </h6>
+
+    <div class="ml-80">
+      <%= render current_component.new(
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        position: position
+      ) %>
+    </div>
+  </div>
+<% end %>