Add a variant to dialog headers (#2251)

.changeset/stupid-otters-shake.md

@@ -0,0 +1,7 @@
+---
+'@primer/view-components': minor
+---
+
+Add header variant to Dialog
+
+<!-- Changed components: Primer::Alpha::Dialog -->

app/components/primer/alpha/dialog.rb

@@ -74,7 +74,7 @@ class Dialog < Primer::Component
       #
       # @param show_divider [Boolean] Show a divider between the header and body.
       # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::Dialog::Header) %>.
       renders_one :header, lambda { |show_divider: false, visually_hide_title: @visually_hide_title, **system_arguments|
         Primer::Alpha::Dialog::Header.new(
           id: @id,

app/components/primer/alpha/dialog/header.rb

@@ -9,17 +9,27 @@ class Header < Primer::Component
         status :alpha
         audited_at "2022-10-10"
 
+        DEFAULT_VARIANT = :medium
+        VARIANT_MAPPINGS = {
+          DEFAULT_VARIANT => "",
+          :large => "Overlay-header--large"
+        }.freeze
+        VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
+
+        # @param id [String] The HTML element's ID value.
         # @param title [String] Describes the content of the dialog.
         # @param subtitle [String] Provides dditional context for the dialog, also setting the `aria-describedby` attribute.
         # @param show_divider [Boolean] Show a divider between the header and body.
         # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+        # @param variant [Symbol] <%= one_of(Primer::Alpha::Dialog::Header::VARIANT_OPTIONS) %>
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(
           id:,
           title:,
           subtitle: nil,
           show_divider: false,
           visually_hide_title: false,
+          variant: DEFAULT_VARIANT,
           **system_arguments
         )
           @id = id
@@ -28,8 +38,10 @@ def initialize(
           @visually_hide_title = visually_hide_title
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :div
+
           @system_arguments[:classes] = class_names(
             "Overlay-header",
+            VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
             { "Overlay-header--divided": show_divider },
             system_arguments[:classes]
           )

previews/primer/alpha/dialog_preview.rb

@@ -60,6 +60,23 @@ def long_text(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "
         end
       end
 
+      # @label With Header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param header_variant [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_header(title: "Test Dialog", subtitle: nil, header_variant: :medium, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               header_variant: header_variant,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
       # @label With Footer
       #
       # @param title [String] text

previews/primer/alpha/dialog_preview/with_header.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_header(show_divider: show_divider, variant: header_variant) %>
+<% end %>

test/components/primer/alpha/dialog_test.rb

@@ -69,6 +69,28 @@ def test_renders_title_and_subtitle_with_describedby
         end
       end
 
+      def test_renders_header
+        render_inline(Primer::Alpha::Dialog.new(title: "Title", id: "my-dialog")) do |component|
+          component.with_body { "content" }
+          component.with_header { "header" }
+        end
+
+        assert_selector("modal-dialog") do
+          assert_selector(".Overlay-header", text: "header")
+        end
+      end
+
+      def test_renders_large_header
+        render_inline(Primer::Alpha::Dialog.new(title: "Title", id: "my-dialog")) do |component|
+          component.with_body { "content" }
+          component.with_header(variant: :large) { "header" }
+        end
+
+        assert_selector("modal-dialog") do
+          assert_selector(".Overlay-header.Overlay-header--large", text: "header")
+        end
+      end
+
       def test_renders_footer_without_divider_by_default
         render_inline(Primer::Alpha::Dialog.new(title: "Title", id: "my-dialog", subtitle: "Subtitle")) do |component|
           component.with_body { "content" }