Merge pull request #4293 from alphagov/doclist-padding

Document list: Add option for equal item spacing

CHANGELOG.md

@@ -21,6 +21,7 @@
 * Update attachment link accessibility guidance ([PR #4278](https://github.com/alphagov/govuk_publishing_components/pull/4278))
 * Global print link class ([PR #4275](https://github.com/alphagov/govuk_publishing_components/pull/4275))
 * Add component wrapper to devolved nations component ([PR #4281](https://github.com/alphagov/govuk_publishing_components/pull/4281))
+* Document list: Add option for equal item spacing ([PR #4293](https://github.com/alphagov/govuk_publishing_components/pull/4293))
 
 ## 43.5.0
 

app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -35,6 +35,13 @@
   }
 }
 
+.gem-c-document-list--equal-item-spacing {
+  .gem-c-document-list__item {
+    margin-top: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+  }
+}
+
 .gem-c-document-list__item-title--context {
   margin-right: govuk-spacing(2);
 

app/views/govuk_publishing_components/components/_document_list.html.erb

@@ -9,6 +9,7 @@
   component_helper.add_class("gem-c-document-list")
   component_helper.add_class("gem-c-document-list--no-top-border") if local_assigns[:remove_top_border]
   component_helper.add_class("gem-c-document-list--no-top-border-first-child") if local_assigns[:remove_top_border_from_first_child]
+  component_helper.add_class("gem-c-document-list--equal-item-spacing") if local_assigns[:equal_item_spacing]
   component_helper.add_class(shared_helper.get_margin_bottom)
 
   extra_link_classes = "govuk-link--no-underline" if local_assigns[:remove_underline]

app/views/govuk_publishing_components/components/docs/document_list.yml

@@ -244,6 +244,28 @@ examples:
         metadata:
           public_updated_at: 2017-07-19 15:01:48
           document_type: 'Statistical data set'
+  with_equal_item_spacing:
+    description: |
+      The new search UI has consistently equal spacing between items in the document list, instead
+      of the original larger bottom padding.
+    data:
+      equal_item_spacing: true
+      items:
+      - link:
+          text: 'Become an apprentice'
+          path: '/become-an-apprentice'
+          description: 'Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship.'
+          full_size_description: true
+      - link:
+          text: 'Become a journeyman'
+          path: '/become-a-journeyman'
+          description: 'Becoming a journeyman - what to expect, what to take, pay and training, making an application, complaining about being a journeyman.'
+          full_size_description: true
+      - link:
+          text: 'Become enlightened'
+          path: '/become-enlightened'
+          description: 'Becoming enlightened - what to expect, what to take, pay and training, making an application, complaining about being enlightened.'
+          full_size_description: true
   highlighted_result:
     description: Highlight one or more of the items in the list. This is used on finders to provide a 'top result' for a search. The `highlight_text` parameter is optional.
     data:

spec/components/document_list_spec.rb

@@ -316,6 +316,22 @@ def component_name
     assert_select ".gem-c-document-list.gem-c-document-list--no-top-border-first-child"
   end
 
+  it "renders items with equal spacing" do
+    render_component(
+      equal_item_spacing: true,
+      items: [
+        {
+          link: {
+            text: "Link Title",
+            path: "/link/path",
+          },
+        },
+      ],
+    )
+
+    assert_select ".gem-c-document-list.gem-c-document-list--equal-item-spacing"
+  end
+
   it "highlights items" do
     render_component(
       items: [