Set up preview app example of the document list component with full s…

…ize description text and without top border
alphagov · Nov 26, 2024 · 9d78688 · 9d78688
1 parent b7aa9c3
commit 9d78688
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 11 deletions.
diff --git a/spec/dummy/app/views/layouts/dummy_public_layout.html.erb b/spec/dummy/app/views/layouts/dummy_public_layout.html.erb
@@ -1,6 +1,4 @@
 <%= render 'govuk_publishing_components/components/layout_for_public', {
-    emergency_banner: '<div class="govuk-width-container"><p class="govuk-body">This is the emergency banner slot.</p></div>',
-    global_bar: '<div class="govuk-width-container govuk-!-margin-top-2"><p class="govuk-body">This is the global bar slot.</p></div>',
     title: "Example public page",
     for_static: true,
     show_explore_header: true,

diff --git a/spec/dummy/app/views/welcome/public_example.html.erb b/spec/dummy/app/views/welcome/public_example.html.erb
@@ -1,18 +1,104 @@
 <h1 class="govuk-heading-xl">Hello! I am an example public GOV.UK page</h1>
 
-<p class="govuk-body">
-  Pages with the public layout can use some GOV.UK styles. For example, the grid:
-</p>
+
 
   <div class="govuk-grid-row">
+   <div class="govuk-grid-column-two-thirds">
+      <h3 class="govuk-heading-m">Document list with full size description, no top border</h3>
+        <%= render "govuk_publishing_components/components/document_list", {
+          remove_top_border: true,
+          items: [
+            {
+              link: {
+                text: "About GOV.UK",
+                path: "/become-an-apprentice",
+                description: "Information about the website and the team that are building it",
+                full_size_description: true
+              }
+            },
+            {
+              link: {
+                text: "Accessibility",
+                path: "/become-an-apprentice",
+                description: "How new services are developed on GOV.UK and what it means for users",
+                full_size_description: true
+              }
+            },
+            {
+              link: {
+                text: "Browsers",
+                path: "/become-an-apprentice",
+                description: "Information about browsers and how to upgrade yours+",
+                full_size_description: true
+              }
+            },
+            {
+              link: {
+                text: "Cookies",
+                path: "/become-an-apprentice",
+                description: "How cookies are used on GOV.UK and each cookie’s purpose",
+                full_size_description: true
+              }
+            }
+          ]
+        } %>
+    </div>
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-m">Two-thirds column</h1>
-      <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
+      <h3 class="govuk-heading-m">Standard list with extra spacing</h3>
+      <%= render "govuk_publishing_components/components/list", {
+        extra_spacing: true,
+        items: [
+          sanitize("<a href='/help/about-govuk' class='govuk-link govuk-!-font-weight-bold'>" + "About GOV.UK" + "</a>
+          <p class='govuk-body govuk-!-margin-top-1'>" + "Information about the website and the team that are building it" + "</p>"),
+          sanitize("<a href='/help/accessibility' class='govuk-link govuk-!-font-weight-bold'>" + "Accessibility" + "</a>
+          <p class='govuk-body govuk-!-margin-top-1'>" + "How new services are developed on GOV.UK and what it means for users" + "</p>"),
+          sanitize("<a href='/help/beta' class='govuk-link govuk-!-font-weight-bold'>" + "Browsers" + "</a>
+          <p class='govuk-body govuk-!-margin-top-1'>" + "Information about browsers and how to upgrade yours" + "</p>"),
+          sanitize("<a href='/help/browsers' class='govuk-link govuk-!-font-weight-bold'>" + "Cookies" + "</a>
+          <p class='govuk-body govuk-!-margin-top-1'>" + "How cookies are used on GOV.UK and each cookie’s purpose" + "</p>")
+        ]
+      } %>
     </div>
-
-    <div class="govuk-grid-column-one-third">
-      <h3 class="govuk-heading-m">One-third column</h3>
-      <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
+    <div class="govuk-grid-column-two-thirds">
+      <h3 class="govuk-heading-m">Document list with equal item spacing</h3>
+      <%= render "govuk_publishing_components/components/document_list", {
+        equal_item_spacing: true,
+        items: [
+         items: [
+            {
+              link: {
+                text: "About GOV.UK",
+                path: "/become-an-apprentice",
+                description: "Information about the website and the team that are building it",
+                full_size_description: true
+              }
+            },
+            {
+              link: {
+                text: "Accessibility",
+                path: "/become-an-apprentice",
+                description: "How new services are developed on GOV.UK and what it means for users",
+                full_size_description: true
+              }
+            },
+            {
+              link: {
+                text: "Browsers",
+                path: "/become-an-apprentice",
+                description: "Information about browsers and how to upgrade yours+",
+                full_size_description: true
+              }
+            },
+            {
+              link: {
+                text: "Cookies",
+                path: "/become-an-apprentice",
+                description: "How cookies are used on GOV.UK and each cookie’s purpose",
+                full_size_description: true
+              }
+            }
+        ]
+      } %>
     </div>
   </div>
 <% content_for :before_content do %>