refactor(console): ui/flag cell -> component

CHANGELOG.md

@@ -38,6 +38,7 @@ All notable changes to this project will be documented in this file.
 - Cells -> ViewComponents refactoring:
   - Folio::Console::Form::HeaderCell -> Folio::Console::Form::HeaderComponent
   - Folio::PublishableHintCell -> Folio::Publishable::HintComponent
+  - Folio::Console::Ui::FlagCell -> Folio::Console::Ui::FlagComponent
 - generalized tiptap_config.use_as_single_image_in_toolbar -> tiptap_config.toolbar with icon and slot names
 
 ### Fixed

app/cells/folio/console/atoms/locale_switch/show.slim

@@ -7,4 +7,4 @@
         class=active_class(locale)
         data-locale=locale
       ]
-        == cell('folio/console/ui/flag', locale)
+        == render_view_component(Folio::Console::Ui::FlagComponent.new(code: locale))

app/cells/folio/console/catalogue_cell.rb

@@ -179,7 +179,7 @@ def published_dates
   def locale_flag(locale_attr = :locale)
     attribute(locale_attr, compact: true, aligned: true, skip_desktop_header: true) do
       if record.send(locale_attr)
-        cell("folio/console/ui/flag", record.send(locale_attr))
+        render_view_component(Folio::Console::Ui::FlagComponent.new(code: record.send(locale_attr)))
       end
     end
   end

app/components/folio/console/ui/flag_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Folio::Console::Ui::FlagComponent < Folio::Console::ApplicationComponent
+  CDN = "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/flags"
+
+  def initialize(code:)
+    @code = code
+  end
+
+  def normalized_code
+    @normalized_code ||= (Folio::LANGUAGES[@code.to_sym] || @code).downcase
+  end
+end

app/components/folio/console/ui/flag_component.slim

@@ -0,0 +1,2 @@
+.f-c-ui-flag
+  img.f-c-ui-flag__img src="#{Folio::Console::Ui::FlagComponent::CDN}/4x3/#{normalized_code}.svg" alt=normalized_code

app/lib/folio/simple_form_components/flag_component.rb

@@ -7,7 +7,7 @@ module FlagComponent
 
       def flag(wrapper_options = nil)
         @flag ||= if options[:flag].present?
-          Folio::Console::Ui::FlagCell.new(options[:flag]).show.html_safe
+          template.render(Folio::Console::Ui::FlagComponent.new(code: options[:flag]))
         end
       end
     end

test/components/folio/console/ui/flag_component_test.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class Folio::Console::Ui::FlagComponentTest < Folio::Console::ComponentTest
+  test "show" do
+    render_inline(Folio::Console::Ui::FlagComponent.new(code: :cs))
+    assert_selector(".f-c-ui-flag__img[src='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/flags/4x3/cz.svg']")
+
+    render_inline(Folio::Console::Ui::FlagComponent.new(code: "CZ"))
+    assert_selector(".f-c-ui-flag__img[src='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/flags/4x3/cz.svg']")
+
+    render_inline(Folio::Console::Ui::FlagComponent.new(code: "cz"))
+    assert_selector(".f-c-ui-flag__img[src='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/flags/4x3/cz.svg']")
+  end
+end