From e9b5cf5c257e68b959b714e3694a2ee0644b20d1 Mon Sep 17 00:00:00 2001 From: Zee <50284+zspencer@users.noreply.github.com> Date: Tue, 20 Feb 2024 10:27:10 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B8=20`Marketplace`:=20Improve=20`Mana?= =?UTF-8?q?gementComponent`=20iconography=20(#2221)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - https://github.com/zinc-collective/convene/issues/2220 The icons for `TaxeRates#index` and `Flyers#show` were the same, plus `Products#index` will conflict with `Tags#index`. So now `Products#index` is :cake: and `Flyers#show` is :qr_code: While I was doing this, I also made the following tidyings: - ✨ `SvgComponent` has `#building_storefront` icon! - ✨ `SvgComponent` has `#qr_code` icon! - 🧹 `SvgComponent` icon-method names match Heroicon's label! - 🧹 `SvgComponent#cake` does not need a wrapping `` tag! - 🥗 `ManagementComponent` has every link it's supposed to - 🧹 `ManagementComponent::Spec` uses `have_link` instead of `have_css` - 🧹 `ManagementComponent` eliminates usage of `ButtonComponent` We originally added the `ButtonComponent` to inject the tailwind CSS classes in Ruby, but with the changes @anaulin made, we now can use the `.button` and `.button.--primary`/`.button.--secondary` classes. Now, when I notice the `ButtonComponent` being used, I pull it out so we can (eventually) delete it. --- app/components/svg_component.rb | 45 +++++++------------ .../marketplace/management_component.html.erb | 16 +++---- .../marketplace/management_component.rb | 20 ++++----- .../marketplace/management_component_spec.rb | 15 ++++--- 4 files changed, 43 insertions(+), 53 deletions(-) diff --git a/app/components/svg_component.rb b/app/components/svg_component.rb index 8c5dff9fc..08f68c7ea 100644 --- a/app/components/svg_component.rb +++ b/app/components/svg_component.rb @@ -1,27 +1,6 @@ class SvgComponent < ApplicationComponent - # Mapping of icon name symbols to methods returning the SVG path for that icon. - # - # We've been getting these SVG paths from https://heroicons.com/, using - # the "Outline" style. - # Feel free to add more as needed, from other libraries as appropriate, - # as long as they match the intended aesthetic and are appropriately licensed. - # - # Format: { symbol: method returning path for symbol } - ICON_MAPPINGS = { - cake: :cake, - cart: :cart, - money: :money, - exclamation_triangle: :exclamation_triangle, - gear: :gear, - map: :map, - receipt_percent: :receipt_percent, - bell: :ringing_bell, - tag: :tag, - plus: :plus, - trash: :trash, - pencil: :pencil - }.with_indifferent_access.freeze - + # We've been getting SVG paths from https://heroicons.com/, using the + # "Outline" style. Add more as needed. attr_reader :icon def initialize(icon: nil, **kwargs) @@ -35,7 +14,7 @@ def call def content if icon.present? - raw(send(ICON_MAPPINGS[icon])) # rubocop:disable Rails/OutputSafety + raw(send(icon)) # rubocop:disable Rails/OutputSafety else super end @@ -53,6 +32,12 @@ def options }) end + def building_storefront + <<~SVG + + SVG + end + def gear <<~SVG @@ -91,7 +76,7 @@ def cart SVG end - def ringing_bell + def bell_alert <<~SVG SVG @@ -123,10 +108,14 @@ def pencil def cake <<~SVG - - - + + SVG + end + def qr_code + <<~SVG + + SVG end end diff --git a/app/furniture/marketplace/management_component.html.erb b/app/furniture/marketplace/management_component.html.erb index 2c51721f7..5c7b32a85 100644 --- a/app/furniture/marketplace/management_component.html.erb +++ b/app/furniture/marketplace/management_component.html.erb @@ -13,14 +13,14 @@ <%= content %> <% card.with_footer do %> <% end %> <% end %> diff --git a/app/furniture/marketplace/management_component.rb b/app/furniture/marketplace/management_component.rb index 2e98e8aed..725b59ced 100644 --- a/app/furniture/marketplace/management_component.rb +++ b/app/furniture/marketplace/management_component.rb @@ -12,19 +12,19 @@ def onboarding_component OnboardingComponent.new(marketplace: marketplace) end - def button(location, icon:) - label, href = if location.is_a?(Symbol) - [t("marketplace.marketplace.#{location}.link_to"), - marketplace.location(location)] - elsif location[:child].to_s.pluralize == location[:child].to_s - [t("marketplace.#{location[:child]}.index.link_to"), - marketplace.location(**location)] + def link_to_child(child, icon:) + label, href = if child.to_s.pluralize == child.to_s + [t("marketplace.#{child}.index.link_to"), + marketplace.location(child:)] else - [t("marketplace.#{location[:child].to_s.pluralize}.show.link_to"), - marketplace.location(**location)] + [t("marketplace.#{child.to_s.pluralize}.show.link_to"), + marketplace.location(child:)] end - ButtonComponent.new(label: label, icon: icon, href: href, turbo_stream: false, method: :get, scheme: :secondary) + link_to(href, class: "button --secondary w-full text-left") do + render(SvgComponent.new(icon:, classes: "w-6 h-6 mr-2 inline-block")) + + label + end end end end diff --git a/spec/furniture/marketplace/management_component_spec.rb b/spec/furniture/marketplace/management_component_spec.rb index 61bf7154d..89d6d56a5 100644 --- a/spec/furniture/marketplace/management_component_spec.rb +++ b/spec/furniture/marketplace/management_component_spec.rb @@ -8,11 +8,12 @@ let(:component) { described_class.new(marketplace: marketplace, current_person: operator) } let(:marketplace) { create(:marketplace) } - it { is_expected.to have_css("a[href='#{polymorphic_path(marketplace.location(child: :products))}']", text: I18n.t("marketplace.products.index.link_to")) } - - it { is_expected.to have_css("a[href='#{polymorphic_path(marketplace.location(child: :delivery_areas))}']", text: I18n.t("marketplace.delivery_areas.index.link_to")) } - - it { is_expected.to have_css("a[href='#{polymorphic_path(marketplace.location(child: :tax_rates))}']", text: I18n.t("marketplace.tax_rates.index.link_to")) } - - it { is_expected.to have_css("a[href='#{polymorphic_path(marketplace.location(child: :orders))}']", text: I18n.t("marketplace.orders.index.link_to")) } + it { is_expected.to have_link(I18n.t("marketplace.payment_settings.index.link_to"), href: polymorphic_path(marketplace.location(child: :payment_settings))) } + it { is_expected.to have_link(I18n.t("marketplace.products.index.link_to"), href: polymorphic_path(marketplace.location(child: :products))) } + it { is_expected.to have_link(I18n.t("marketplace.delivery_areas.index.link_to"), href: polymorphic_path(marketplace.location(child: :delivery_areas))) } + it { is_expected.to have_link(I18n.t("marketplace.tax_rates.index.link_to"), href: polymorphic_path(marketplace.location(child: :tax_rates))) } + it { is_expected.to have_link(I18n.t("marketplace.orders.index.link_to"), href: polymorphic_path(marketplace.location(child: :orders))) } + it { is_expected.to have_link(I18n.t("marketplace.notification_methods.index.link_to"), href: polymorphic_path(marketplace.location(child: :notification_methods))) } + it { is_expected.to have_link(I18n.t("marketplace.vendor_representatives.index.link_to"), href: polymorphic_path(marketplace.location(child: :vendor_representatives))) } + it { is_expected.to have_link(I18n.t("marketplace.flyers.show.link_to"), href: polymorphic_path(marketplace.location(child: :flyer))) } end