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

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

Hide file tree

Showing 2 changed files with 79 additions and 9 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,19 +1,91 @@
 <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:
+  Document list example with full size description text 
 </p>
 
   <div class="govuk-grid-row">
+   <div class="govuk-grid-column-full">
+      <h3 class="govuk-heading-m">Without 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>
+      <h1 class="govuk-heading-m">With top bordern</h1>
+      <%= render "govuk_publishing_components/components/document_list", {
+          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-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>
+
   </div>
 <% content_for :before_content do %>
   <% render "govuk_publishing_components/components/back_link", href:'/' %>