BREAKING Use component wrapper on modal dialogue component

alphagov · Jan 15, 2025 · ba7a45d · ba7a45d
1 parent 6494163
commit ba7a45d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 39 deletions.
diff --git a/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb b/app/views/govuk_publishing_components/components/_modal_dialogue.html.erb
@@ -3,15 +3,19 @@
 
   id ||= "modal-dialogue-#{SecureRandom.hex(4)}"
   wide ||= false
-  data_attributes = {}
   aria_label ||= nil
   dialog_classes = ["gem-c-modal-dialogue__box"]
   dialog_classes << "gem-c-modal-dialogue__box--wide" if wide
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-modal-dialogue")
+  component_helper.add_data_attribute({ module: "modal-dialogue" })
+  component_helper.set_id(id)
 %>
 
-<%= tag.div class: "gem-c-modal-dialogue", data: { module: "modal-dialogue" }, id: id do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <%= tag.div class: "gem-c-modal-dialogue__overlay" %>
-  <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
+  <%= tag.dialog class: dialog_classes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %>
     <%= tag.div class: "gem-c-modal-dialogue__header" do %>
       <%= render "govuk_publishing_components/components/govuk_logo/govuk_logo_crown_only", {
         classes: %w[gem-c-modal-dialogue__logotype-crown],

diff --git a/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml b/app/views/govuk_publishing_components/components/docs/modal_dialogue.yml
@@ -24,15 +24,12 @@ accessibility_criteria: |
   - return focus to last focused element on close
 
 display_preview: false
+uses_component_wrapper_helper: true
 examples:
   default:
     embed: |
       <%= render "govuk_publishing_components/components/button", {
-        text: "Open modal",
-        data_attributes: {
-          toggle: "modal",
-          target: "modal-default"
-        }
+        text: "Open modal"
       } %>
       <%= component %>
     data:
@@ -45,11 +42,7 @@ examples:
       A wide version of the modal dialogue will provide the same width with the main container
     embed: |
       <%= render "govuk_publishing_components/components/button", {
-        text: "Open wide modal",
-        data_attributes: {
-          toggle: "modal",
-          target: "modal-wide"
-        }
+        text: "Open wide modal"
       } %>
       <%= component %>
     data:
@@ -64,10 +57,6 @@ examples:
     embed: |
       <%= render "govuk_publishing_components/components/button", {
         text: "Open modal with form",
-        data_attributes: {
-          toggle: "modal",
-          target: "modal-with-form"
-        }
       } %>
       <%= component %>
     data:
@@ -85,10 +74,6 @@ examples:
     embed: |
       <%= render "govuk_publishing_components/components/button", {
         text: "Open modal with large content",
-        data_attributes: {
-          toggle: "modal",
-          target: "modal-with-large-content"
-          }
         } %>
       <%= component %>
     data:
@@ -99,21 +84,4 @@ examples:
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
-          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
-  with_data_attributes:
-    embed: |
-      <%= render "govuk_publishing_components/components/button", {
-        text: "Open modal with data attributes",
-        data_attributes: {
-          toggle: "modal",
-          target: "modal-with-data-attributes"
-        }
-      } %>
-      <%= component %>
-    data:
-      id: modal-with-data-attributes
-      data_attributes:
-        gtm: modal
-      block: |
-        <h1 class="govuk-heading-l">Modal title</h1>
-        <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
+          <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>