Adopt button component + helpers at existing call sites

app/components/strata/flows/task_list_component.html.erb

@@ -6,8 +6,8 @@
     <% end %>
 </ul>
 
-<%= button_to t(".actions.review_and_submit"),
+<%= helpers.strata_button_to t(".actions.review_and_submit"),
             @flow.end_path,
             method: :get,
-            class: "usa-button margin-top-2",
+            class: "margin-top-2",
             disabled: !@flow.completed? %>

app/components/strata/flows/task_section_component.rb

@@ -45,17 +45,18 @@ def task_action
             { class: "display-flex flex-align-center flex-justify-end" },
           ).concat(link_to(t(".actions.edit"), @task.path(@flow.record), class: "usa-link"))
         elsif @task.started?(@flow.record)
-          link_to(
+          helpers.strata_link_to(
             t(".actions.continue"),
             @task.path(@flow.record),
-            class: "usa-button usa-button--outline",
+            as: :button,
+            variant: :outline,
             method: :get
           )
         else
-          link_to(
+          helpers.strata_link_to(
             t(".actions.start"),
             @task.path(@flow.record),
-            class: "usa-button",
+            as: :button,
             method: :get
           )
         end

app/components/strata/us/button_group_component.rb

@@ -3,9 +3,15 @@
 module Strata
   module US
     # ButtonGroupComponent renders a USWDS button group: a <ul class="usa-button-group">
-    # whose children are <li class="usa-button-group__item"> wrappers containing
-    # whatever button-styled element the caller chooses (a Strata::US::ButtonComponent,
-    # a link_to, an f.submit, etc.).
+    # whose children are <li> wrappers containing whatever button-styled element
+    # the caller chooses (a Strata::US::ButtonComponent, a link_to, an f.submit, etc.).
+    #
+    # The <li>s deliberately do *not* carry the `usa-button-group__item` class in
+    # the default variant. That class triggers a known USWDS bug where buttons
+    # inside a `.usa-form` render too tall — see
+    # https://github.com/uswds/uswds/issues/5883. The class is applied only in
+    # the segmented variant, where its CSS hooks (border rounding, connector
+    # pseudo-elements) are required for the visual treatment.
     #
     # See https://designsystem.digital.gov/components/button-group/.
     #
@@ -25,7 +31,9 @@ module US
     #     <% group.with_item { ... } %>
     #   <% end %>
     class ButtonGroupComponent < ViewComponent::Base
-      renders_many :items, "Strata::US::ButtonGroupComponent::ItemComponent"
+      renders_many :items, ->(**kwargs) {
+        ItemComponent.new(segmented: @segmented, **kwargs)
+      }
 
       def initialize(segmented: false, classes: nil, **html_attributes)
         @segmented = segmented
@@ -47,16 +55,21 @@ def list_attributes
         attrs
       end
 
-      # ItemComponent renders one entry as an <li class="usa-button-group__item">.
+      # ItemComponent renders one entry as an <li>. The `usa-button-group__item`
+      # class is applied only when the parent group is segmented; see the
+      # ButtonGroupComponent comment above for the rationale (USWDS issue 5883).
       class ItemComponent < ViewComponent::Base
-        def initialize(classes: nil, **html_attributes)
+        def initialize(segmented: false, classes: nil, **html_attributes)
+          @segmented = segmented
           @classes = classes
           @html_attributes = html_attributes
         end
 
         def call
           attrs = @html_attributes.dup
-          attrs[:class] = class_names("usa-button-group__item", @classes)
+          base_class = "usa-button-group__item" if @segmented
+          combined = class_names(base_class, @classes)
+          attrs[:class] = combined if combined.present?
 
           content_tag(:li, content, **attrs)
         end

app/components/strata/us/card_component.rb

@@ -11,9 +11,7 @@ module US
     #       <img src="/path/to/image.jpg" alt="Description" />
     #     <% end %>
     #     <% card.with_body { "<p>Card body content.</p>".html_safe } %>
-    #     <% card.with_footer do %>
-    #       <%= button_tag "Action", class: "usa-button" %>
-    #     <% end %>
+    #     <% card.with_footer { strata_button_to "Action", "#" } %>
     #   <% end %>
     #
     # @example Flag layout with media on the right

app/previews/strata/us/card_component_preview.rb

@@ -3,57 +3,36 @@
 module Strata
   module US
     # CardComponentPreview provides preview examples for the Strata::US::CardComponent.
+    #
+    # Previews with a footer button render via sibling .html.erb templates because
+    # nested `render` calls don't work inside slot blocks in a Lookbook preview method
+    # — see app/previews/strata/us/card_component_preview/.
     class CardComponentPreview < Lookbook::Preview
       layout "strata/component_preview"
 
+      # Public so the sibling templates can reference it as
+      # Strata::US::CardComponentPreview::PREVIEW_IMAGE_URL.
+      PREVIEW_IMAGE_URL = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjQwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNhcmQgcHJldmlldyBwbGFjZWhvbGRlciI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiMwMDVlYTIiLz4KICA8cmVjdCB4PSIwIiB5PSIxODAiIHdpZHRoPSI0MDAiIGhlaWdodD0iNjAiIGZpbGw9IiMxNjJlNTEiLz4KICA8Y2lyY2xlIGN4PSIzMjAiIGN5PSI4MCIgcj0iMzIiIGZpbGw9IiNmZmJlMmUiLz4KICA8dGV4dCB4PSIyMDAiIHk9IjEzMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtd2VpZ2h0PSI2MDAiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNhcmQgcHJldmlldyBwbGFjZWhvbGRlcjwvdGV4dD4KPC9zdmc+Cg=="
+
       # @label Default
-      def default
-        render Strata::US::CardComponent.new do |card|
-          card.with_header { "Default card" }
-          card.with_body { "<p>A card with a header, body, and footer.</p>".html_safe }
-          card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-        end
-      end
+      # Renders via the sibling `default.html.erb` template.
+      def default; end
 
       # @label With media
-      def with_media
-        render Strata::US::CardComponent.new do |card|
-          card.with_header { "Card with media" }
-          card.with_media { preview_image }
-          card.with_body { "<p>This card includes a media image above the body.</p>".html_safe }
-          card.with_footer { '<button class="usa-button">Read more</button>'.html_safe }
-        end
-      end
+      # Renders via the sibling `with_media.html.erb` template.
+      def with_media; end
 
       # @label Flag layout
-      def flag
-        render Strata::US::CardComponent.new(flag: true) do |card|
-          card.with_header { "Flag layout" }
-          card.with_media { preview_image }
-          card.with_body { "<p>The flag variant places media beside the content.</p>".html_safe }
-          card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-        end
-      end
+      # Renders via the sibling `flag.html.erb` template.
+      def flag; end
 
       # @label Flag with media on right
-      def flag_media_right
-        render Strata::US::CardComponent.new(flag_media_right: true) do |card|
-          card.with_header { "Media on the right" }
-          card.with_media { preview_image }
-          card.with_body { "<p>This flag variant positions media on the right.</p>".html_safe }
-          card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-        end
-      end
+      # Renders via the sibling `flag_media_right.html.erb` template.
+      def flag_media_right; end
 
       # @label Header first
-      def header_first
-        render Strata::US::CardComponent.new(flag: true, header_first: true) do |card|
-          card.with_header { "Header first" }
-          card.with_media { preview_image }
-          card.with_body { "<p>The header appears before the media.</p>".html_safe }
-          card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-        end
-      end
+      # Renders via the sibling `header_first.html.erb` template.
+      def header_first; end
 
       # @label Media inset
       def media_inset
@@ -81,7 +60,7 @@ def body_only
       private
 
       def preview_image
-        image_tag("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjQwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNhcmQgcHJldmlldyBwbGFjZWhvbGRlciI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiMwMDVlYTIiLz4KICA8cmVjdCB4PSIwIiB5PSIxODAiIHdpZHRoPSI0MDAiIGhlaWdodD0iNjAiIGZpbGw9IiMxNjJlNTEiLz4KICA8Y2lyY2xlIGN4PSIzMjAiIGN5PSI4MCIgcj0iMzIiIGZpbGw9IiNmZmJlMmUiLz4KICA8dGV4dCB4PSIyMDAiIHk9IjEzMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtd2VpZ2h0PSI2MDAiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNhcmQgcHJldmlldyBwbGFjZWhvbGRlcjwvdGV4dD4KPC9zdmc+Cg==", alt: "Card preview placeholder")
+        image_tag(PREVIEW_IMAGE_URL, alt: "Card preview placeholder")
       end
     end
   end

app/previews/strata/us/card_component_preview/default.html.erb

@@ -0,0 +1,7 @@
+<%= render Strata::US::CardComponent.new do |card| %>
+  <% card.with_header { "Default card" } %>
+  <% card.with_body { "<p>A card with a header, body, and footer.</p>".html_safe } %>
+  <% card.with_footer do %>
+    <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+  <% end %>
+<% end %>

app/previews/strata/us/card_component_preview/flag.html.erb

@@ -0,0 +1,8 @@
+<%= render Strata::US::CardComponent.new(flag: true) do |card| %>
+  <% card.with_header { "Flag layout" } %>
+  <% card.with_media { image_tag(Strata::US::CardComponentPreview::PREVIEW_IMAGE_URL, alt: "Card preview placeholder") } %>
+  <% card.with_body { "<p>The flag variant places media beside the content.</p>".html_safe } %>
+  <% card.with_footer do %>
+    <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+  <% end %>
+<% end %>

app/previews/strata/us/card_component_preview/flag_media_right.html.erb

@@ -0,0 +1,8 @@
+<%= render Strata::US::CardComponent.new(flag_media_right: true) do |card| %>
+  <% card.with_header { "Media on the right" } %>
+  <% card.with_media { image_tag(Strata::US::CardComponentPreview::PREVIEW_IMAGE_URL, alt: "Card preview placeholder") } %>
+  <% card.with_body { "<p>This flag variant positions media on the right.</p>".html_safe } %>
+  <% card.with_footer do %>
+    <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+  <% end %>
+<% end %>

app/previews/strata/us/card_component_preview/header_first.html.erb

@@ -0,0 +1,8 @@
+<%= render Strata::US::CardComponent.new(flag: true, header_first: true) do |card| %>
+  <% card.with_header { "Header first" } %>
+  <% card.with_media { image_tag(Strata::US::CardComponentPreview::PREVIEW_IMAGE_URL, alt: "Card preview placeholder") } %>
+  <% card.with_body { "<p>The header appears before the media.</p>".html_safe } %>
+  <% card.with_footer do %>
+    <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+  <% end %>
+<% end %>

app/previews/strata/us/card_component_preview/with_media.html.erb

@@ -0,0 +1,8 @@
+<%= render Strata::US::CardComponent.new do |card| %>
+  <% card.with_header { "Card with media" } %>
+  <% card.with_media { image_tag(Strata::US::CardComponentPreview::PREVIEW_IMAGE_URL, alt: "Card preview placeholder") } %>
+  <% card.with_body { "<p>This card includes a media image above the body.</p>".html_safe } %>
+  <% card.with_footer do %>
+    <%= render Strata::US::ButtonComponent.new do %>Read more<% end %>
+  <% end %>
+<% end %>

app/previews/strata/us/card_group_component_preview.rb

@@ -3,43 +3,24 @@
 module Strata
   module US
     # CardGroupComponentPreview provides preview examples for the Strata::US::CardGroupComponent.
+    #
+    # Previews with a footer button render via sibling .html.erb templates because
+    # nested `render` calls don't work inside slot blocks in a Lookbook preview method
+    # — see app/previews/strata/us/card_group_component_preview/.
     class CardGroupComponentPreview < Lookbook::Preview
       layout "strata/component_preview"
 
+      # Public so the sibling templates can reference it as
+      # Strata::US::CardGroupComponentPreview::PREVIEW_IMAGE_URL.
+      PREVIEW_IMAGE_URL = Strata::US::CardComponentPreview::PREVIEW_IMAGE_URL
+
       # @label Default group
-      def default
-        render Strata::US::CardGroupComponent.new do |group|
-          group.with_card do |card|
-            card.with_header { "First card" }
-            card.with_body { "<p>Content for the first card.</p>".html_safe }
-            card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-          end
-          group.with_card do |card|
-            card.with_header { "Second card" }
-            card.with_body { "<p>Content for the second card.</p>".html_safe }
-            card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-          end
-          group.with_card do |card|
-            card.with_header { "Third card" }
-            card.with_body { "<p>Content for the third card.</p>".html_safe }
-            card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-          end
-        end
-      end
+      # Renders via the sibling `default.html.erb` template.
+      def default; end
 
       # @label Responsive grid (2-up tablet, 3-up widescreen)
-      def responsive_grid
-        render Strata::US::CardGroupComponent.new do |group|
-          6.times do |i|
-            group.with_card(classes: "tablet:grid-col-6 widescreen:grid-col-4") do |card|
-              card.with_header { "Card #{i + 1}" }
-              card.with_media { preview_image }
-              card.with_body { "<p>Each card spans 6 columns at tablet width and 4 columns at widescreen.</p>".html_safe }
-              card.with_footer { '<button class="usa-button">Action</button>'.html_safe }
-            end
-          end
-        end
-      end
+      # Renders via the sibling `responsive_grid.html.erb` template.
+      def responsive_grid; end
 
       # @label Group of flag cards
       def flag_cards
@@ -60,7 +41,7 @@ def flag_cards
       private
 
       def preview_image
-        image_tag("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjQwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkNhcmQgcHJldmlldyBwbGFjZWhvbGRlciI+CiAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNDAiIGZpbGw9IiMwMDVlYTIiLz4KICA8cmVjdCB4PSIwIiB5PSIxODAiIHdpZHRoPSI0MDAiIGhlaWdodD0iNjAiIGZpbGw9IiMxNjJlNTEiLz4KICA8Y2lyY2xlIGN4PSIzMjAiIGN5PSI4MCIgcj0iMzIiIGZpbGw9IiNmZmJlMmUiLz4KICA8dGV4dCB4PSIyMDAiIHk9IjEzMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjIiIGZvbnQtd2VpZ2h0PSI2MDAiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNhcmQgcHJldmlldyBwbGFjZWhvbGRlcjwvdGV4dD4KPC9zdmc+Cg==", alt: "Card preview placeholder")
+        image_tag(PREVIEW_IMAGE_URL, alt: "Card preview placeholder")
       end
     end
   end

app/previews/strata/us/card_group_component_preview/default.html.erb

@@ -0,0 +1,23 @@
+<%= render Strata::US::CardGroupComponent.new do |group| %>
+  <% group.with_card do |card| %>
+    <% card.with_header { "First card" } %>
+    <% card.with_body { "<p>Content for the first card.</p>".html_safe } %>
+    <% card.with_footer do %>
+      <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+    <% end %>
+  <% end %>
+  <% group.with_card do |card| %>
+    <% card.with_header { "Second card" } %>
+    <% card.with_body { "<p>Content for the second card.</p>".html_safe } %>
+    <% card.with_footer do %>
+      <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+    <% end %>
+  <% end %>
+  <% group.with_card do |card| %>
+    <% card.with_header { "Third card" } %>
+    <% card.with_body { "<p>Content for the third card.</p>".html_safe } %>
+    <% card.with_footer do %>
+      <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+    <% end %>
+  <% end %>
+<% end %>

app/previews/strata/us/card_group_component_preview/responsive_grid.html.erb

@@ -0,0 +1,12 @@
+<%= render Strata::US::CardGroupComponent.new do |group| %>
+  <% 6.times do |i| %>
+    <% group.with_card(classes: "tablet:grid-col-6 widescreen:grid-col-4") do |card| %>
+      <% card.with_header { "Card #{i + 1}" } %>
+      <% card.with_media { image_tag(Strata::US::CardGroupComponentPreview::PREVIEW_IMAGE_URL, alt: "Card preview placeholder") } %>
+      <% card.with_body { "<p>Each card spans 6 columns at tablet width and 4 columns at widescreen.</p>".html_safe } %>
+      <% card.with_footer do %>
+        <%= render Strata::US::ButtonComponent.new do %>Action<% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

app/views/strata/application_forms/index.html.erb

@@ -34,7 +34,7 @@
   <%= intro %>
 </p>
 
-<%= link_to new_button_text, new_path, class: class_names("usa-button") %>
+<%= strata_link_to new_button_text, new_path, as: :button %>
 
 <% if not application_forms.empty? %>
   <h2 class="margin-top-6"><%= in_progress_applications_heading %></h2>

app/views/strata/shared/_form_buttons.html.erb

@@ -2,11 +2,11 @@
 
 <hr class="border-base-lightest margin-top-4">
 
-<ul class="usa-button-group">
-  <li>
-    <%= link_to t("strata.form_builder.actions.back"), back_path, class: "usa-button usa-button--outline" %>
-  </li>
-  <li>
+<%= render Strata::US::ButtonGroupComponent.new do |group| %>
+  <% group.with_item do %>
+    <%= strata_link_to t("strata.form_builder.actions.back"), back_path, as: :button, variant: :outline %>
+  <% end %>
+  <% group.with_item do %>
     <%= f.submit t("strata.form_builder.actions.save_and_continue") %>
-  </li>
-</ul>
+  <% end %>
+<% end %>

app/views/strata/tasks/index.html.erb

@@ -36,12 +36,11 @@
     </div>
     <div class="grid-col-12 tablet:grid-col-3">
       <label class="usa-label" for="next-task-button" style="margin-bottom: 0.5rem"><%= t("strata.tasks.index.actions_label") %></label>
-      <%= button_to t("strata.tasks.actions.pick_next"), url_for(only_path: true, action: :pick_up_next_task),
+      <%= strata_button_to t("strata.tasks.actions.pick_next"), url_for(only_path: true, action: :pick_up_next_task),
                       id: "next-task-button",
                       disabled: !unassigned_tasks&.any?,
                       method: :post,
-                      title: unassigned_tasks&.any? ? t("strata.tasks.messages.no_tasks_available") : nil,
-                      class: "usa-button" %>
+                      title: unassigned_tasks&.any? ? t("strata.tasks.messages.no_tasks_available") : nil %>
     </div>
   </div>
   <% if tasks&.any? %>