raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-02 02:11:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add AdminTooltipComponent

Browse Source 
I left the stimulus controller separated as it is generic enough
This commit is contained in:
Gaetan Craig-Riou
2024-09-04 22:11:39 +10:00
parent b6695ba9a2
commit 8de7c304fe
7 changed files with 78 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/admin_tooltip_component.rb Normal file
View File

@@ -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

8
app/components/admin_tooltip_component/admin_tooltip_component.html.haml Normal file
View File

@@ -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"}

6
app/views/admin/products_v3/product_preview.turbo_stream.haml
View File

@@ -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

10
app/views/admin/shared/_tooltip.html.haml
View File

@@ -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"}

2
app/views/admin/shared/_whats_this_tooltip.html.haml
View File

@@ -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)

2
app/views/spree/admin/orders/_table_row.html.haml
View File

@@ -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)

54
spec/components/admin_tooltip_component_spec.rb Normal file
View File

@@ -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 <span>description</span>",
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 <span>description</span>",
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 <span>description</span>",
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