Make dismiss action on Banner changeable (primer#2455)

.changeset/warm-books-divide.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Make dismiss action on Banner translatable

app/components/primer/alpha/banner.html.erb

@@ -22,7 +22,7 @@
           Primer::Beta::IconButton.new(
             scheme: :invisible,
             icon: :x,
-            aria: { label: "Dismiss" },
+            aria: { label: @dismiss_label },
             data: { action: catalyst_action(event: "click", function: "dismiss") },
             autofocus: true
           )

app/components/primer/alpha/banner.rb

@@ -55,17 +55,21 @@ class Banner < Primer::Component
         :hide
       ].freeze
 
+      DEFAULT_DISMISS_LABEL = "Dismiss"
+
       # @param full [Boolean] Whether the component should take up the full width of the screen.
       # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports.
       # @param dismiss_scheme [Symbol] Whether the component can be dismissed with an "x" button. <%= one_of(Primer::Alpha::Banner::DISMISS_SCHEMES) %>
+      # @param dismiss_label [String] The aria-label text of the dismiss "x" button
       # @param description [String] Description text rendered underneath the message.
       # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+      def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, dismiss_label: DEFAULT_DISMISS_LABEL, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
         @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)
         @icon = icon || DEFAULT_ICONS[@scheme]
         @dismiss_scheme = dismiss_scheme
+        @dismiss_label = dismiss_label
         @description = description
 
         @system_arguments = deny_tag_argument(**system_arguments)

previews/primer/alpha/banner_preview.rb

@@ -9,13 +9,14 @@ class BannerPreview < ViewComponent::Preview
       # @param full toggle
       # @param full_when_narrow toggle
       # @param dismiss_scheme [Symbol] select [none, remove, hide]
+      # @param dismiss_label text
       # @param icon [Symbol] octicon
       # @param scheme [Symbol] select [default, warning, danger, success]
       # @param content text
       # @param description text
-      def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
+      def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME,  dismiss_label: Primer::Alpha::Banner::DEFAULT_DISMISS_LABEL, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
         icon = nil if icon == :none
-        render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
+        render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, dismiss_label: dismiss_label, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
       end
 
       # @label Default

test/components/alpha/banner_test.rb

@@ -112,6 +112,13 @@ def test_does_not_render_dismiss_button
     refute_selector(".Banner-close")
   end
 
+  def test_does_render_dismiss_label
+    render_inline(Primer::Alpha::Banner.new(dismiss_scheme: :remove, dismiss_label: "My new label")) { "foo" }
+
+    assert_selector(".Banner .Banner-close")
+    assert_selector("tool-tip", text: "My new label")
+  end
+
   def test_renders_action_button_slot
     render_inline(Primer::Alpha::Banner.new) do |component|
       component.with_action_button { "submit" }