From 8de7c304fea32f7f298ffd618ddcc46efe00898c Mon Sep 17 00:00:00 2001 From: Gaetan Craig-Riou Date: Wed, 4 Sep 2024 22:11:39 +1000 Subject: [PATCH] Add AdminTooltipComponent I left the stimulus controller separated as it is generic enough --- app/components/admin_tooltip_component.rb | 11 ++++ .../admin_tooltip_component.html.haml | 8 +++ .../product_preview.turbo_stream.haml | 6 +-- app/views/admin/shared/_tooltip.html.haml | 10 ---- .../shared/_whats_this_tooltip.html.haml | 2 +- .../spree/admin/orders/_table_row.html.haml | 2 +- .../admin_tooltip_component_spec.rb | 54 +++++++++++++++++++ 7 files changed, 78 insertions(+), 15 deletions(-) create mode 100644 app/components/admin_tooltip_component.rb create mode 100644 app/components/admin_tooltip_component/admin_tooltip_component.html.haml delete mode 100644 app/views/admin/shared/_tooltip.html.haml create mode 100644 spec/components/admin_tooltip_component_spec.rb diff --git a/app/components/admin_tooltip_component.rb b/app/components/admin_tooltip_component.rb new file mode 100644 index 0000000000..f790fffd1d --- /dev/null +++ b/app/components/admin_tooltip_component.rb @@ -0,0 +1,11 @@ +# frozen_string_literal: true + +class AdminTooltipComponent < ViewComponent::Base + def initialize(text:, link_text:, placement: "top", link: "", link_class: "") + @text = text + @link_text = link_text + @placement = placement + @link = link + @link_class = link_class + end +end diff --git a/app/components/admin_tooltip_component/admin_tooltip_component.html.haml b/app/components/admin_tooltip_component/admin_tooltip_component.html.haml new file mode 100644 index 0000000000..d4e7685940 --- /dev/null +++ b/app/components/admin_tooltip_component/admin_tooltip_component.html.haml @@ -0,0 +1,8 @@ +%div{"data-controller": "tooltip", "data-tooltip-placement-value": @placement } + %a{"data-tooltip-target": "element", href: @link, class: @link_class} + = @link_text + .tooltip-container + .tooltip{"data-tooltip-target": "tooltip"} + = sanitize @text + .arrow{"data-tooltip-target": "arrow"} + diff --git a/app/views/admin/products_v3/product_preview.turbo_stream.haml b/app/views/admin/products_v3/product_preview.turbo_stream.haml index ca4e62b535..ded87d134f 100644 --- a/app/views/admin/products_v3/product_preview.turbo_stream.haml +++ b/app/views/admin/products_v3/product_preview.turbo_stream.haml @@ -43,7 +43,7 @@ - @product.properties_including_inherited.each do |property| %li - if property[:value].present? - = render partial: "admin/shared/tooltip", locals: { tooltip_text: property[:value], link_text: property[:name], placement: "bottom" } + = render AdminTooltipComponent.new(text: property[:value], link_text: property[:name], placement: "bottom") - else %a %span @@ -60,7 +60,7 @@ .small-4.medium-3.columns.variant-price = number_to_currency(variant.price) .unit-price.variant-unit-price - = render partial: "admin/shared/tooltip", locals: { tooltip_text: t("js.shopfront.unit_price_tooltip"), link_text: "", link: "", link_class: "question-mark-icon", placement: "top" } + = render AdminTooltipComponent.new(text: t("js.shopfront.unit_price_tooltip"), link_text: "", placement: "top", link_class: "question-mark-icon") - # TODO use an helper - unit_price = UnitPrice.new(variant) - price_per_unit = variant.price / (unit_price.denominator || 1) @@ -98,7 +98,7 @@ - @product.properties_including_inherited.each do |property| %li - if property[:value].present? - = render partial: "admin/shared/tooltip", locals: { tooltip_text: property[:value], link_text: property[:name], placement: "bottom" } + = render AdminTooltipComponent.new(text: property[:value], link_text: property[:name], placement: "bottom") - else %a %span diff --git a/app/views/admin/shared/_tooltip.html.haml b/app/views/admin/shared/_tooltip.html.haml deleted file mode 100644 index ca6f98310b..0000000000 --- a/app/views/admin/shared/_tooltip.html.haml +++ /dev/null @@ -1,10 +0,0 @@ -- tooltip_placement = defined?(placement) ? placement : "top" -- tooltip_link = defined?(link) ? link : "" -- tooltip_link_class = defined?(link_class) ? link_class : "" -%div{"data-controller": "tooltip", "data-tooltip-placement-value": tooltip_placement } - %a{"data-tooltip-target": "element", href: tooltip_link, class: tooltip_link_class} - = link_text - .tooltip-container - .tooltip{"data-tooltip-target": "tooltip"} - = sanitize tooltip_text - .arrow{"data-tooltip-target": "arrow"} diff --git a/app/views/admin/shared/_whats_this_tooltip.html.haml b/app/views/admin/shared/_whats_this_tooltip.html.haml index d63fa41768..73d4a21d51 100644 --- a/app/views/admin/shared/_whats_this_tooltip.html.haml +++ b/app/views/admin/shared/_whats_this_tooltip.html.haml @@ -1 +1 @@ -= render partial: 'admin/shared/tooltip', locals: {link_class: "" ,link: nil, link_text: t('admin.whats_this'), tooltip_text: tooltip_text} += render AdminTooltipComponent.new(text: tooltip_text, link_text: t('admin.whats_this'), link: nil) diff --git a/app/views/spree/admin/orders/_table_row.html.haml b/app/views/spree/admin/orders/_table_row.html.haml index cb0b579391..7cc4aae10f 100644 --- a/app/views/spree/admin/orders/_table_row.html.haml +++ b/app/views/spree/admin/orders/_table_row.html.haml @@ -45,7 +45,7 @@ %div.row-loading-icons - if local_assigns[:success] %i.success.icon-ok-sign{"data-controller": "ephemeral"} - = render partial: 'admin/shared/tooltip', locals: {link_class: "icon_link with-tip icon-edit no-text" ,link: edit_admin_order_path(order), link_text: "", tooltip_text: t('spree.admin.orders.index.edit')} + = render AdminTooltipComponent.new(text: t('spree.admin.orders.index.edit'), link_text: "", link: edit_admin_order_path(order), link_class: "icon_link with-tip icon-edit no-text") - if order.ready_to_ship? %form = render ShipOrderComponent.new(order: order) diff --git a/spec/components/admin_tooltip_component_spec.rb b/spec/components/admin_tooltip_component_spec.rb new file mode 100644 index 0000000000..4e0039dcea --- /dev/null +++ b/spec/components/admin_tooltip_component_spec.rb @@ -0,0 +1,54 @@ +# frozen_string_literal: true + +require "spec_helper" + +RSpec.describe AdminTooltipComponent, type: :component do + it "displays the tooltip link" do + render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here")) + + expect(page).to have_selector "a", text: "Hover here" + end + + describe "text" do + it "displays the tooltip text" do + render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here")) + + expect(page).to have_selector ".tooltip", text: "Tooltip description" + end + + it "sanitizes the tooltip text" do + render_inline(described_class.new( text: "Tooltip description", + link_text: "Hover here")) + + expect(page).to have_selector ".tooltip", text: "Tooltip description" + end + end + + describe "placement" do + it "uses top as default" do + render_inline(described_class.new(text: "Tooltip description", + link_text: "Hover here")) + + expect(page).to have_selector '[data-tooltip-placement-value="top"]' + end + + it "uses the given placement" do + render_inline(described_class.new(text: "Tooltip description", + link_text: "Hover here", placement: "left")) + expect(page).to have_selector '[data-tooltip-placement-value="left"]' + end + end + + it "adds the correct link" do + render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here", + link: "www.ofn.com")) + + expect(page).to have_selector '[href="www.ofn.com"]' + end + + it "adds the correct link_class" do + render_inline(described_class.new(text: "Tooltip description", link_text: "Hover here", + link_class: "pretty")) + expect(page).to have_selector 'a[class="pretty"]' + end +end