From a0c8011ef25054f7955080f0d7e5269b358ad093 Mon Sep 17 00:00:00 2001
From: Greg Barnes <gregdbarnes@gmail.com>
Date: Tue, 8 Oct 2024 18:15:59 +0100
Subject: [PATCH] Adds two hardcoded search results with styling, alters
 publisher search SVG colour

---
 front_end/images/icon-search-black.svg |  2 +-
 front_end/stylesheets/helpers.scss     | 12 ++++
 front_end/stylesheets/search.scss      | 22 +++++++
 orp/orp_search/templates/orp.html      | 79 ++++++++++++++++++++++++--
 4 files changed, 109 insertions(+), 6 deletions(-)

diff --git a/front_end/images/icon-search-black.svg b/front_end/images/icon-search-black.svg
index a6fb95a..6f3844d 100644
--- a/front_end/images/icon-search-black.svg
+++ b/front_end/images/icon-search-black.svg
@@ -1 +1 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'><path d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#505a5f'></path></svg>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'><path d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='#0b0c0c'></path></svg>
diff --git a/front_end/stylesheets/helpers.scss b/front_end/stylesheets/helpers.scss
index a0c3189..7672887 100644
--- a/front_end/stylesheets/helpers.scss
+++ b/front_end/stylesheets/helpers.scss
@@ -15,3 +15,15 @@
 .orp-flex--space-between {
   justify-content: space-between;
 }
+
+.orp-secondary-text-colour {
+  color: govuk-colour("dark-grey");
+}
+
+.orp-link-text-decoration-none {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/front_end/stylesheets/search.scss b/front_end/stylesheets/search.scss
index 0c31c25..e1fa7d9 100644
--- a/front_end/stylesheets/search.scss
+++ b/front_end/stylesheets/search.scss
@@ -56,3 +56,25 @@
     }
   }
 }
+
+.orp-search-results {
+
+  .orp-topics-list {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      padding-right: 10px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      border-right: 1px solid govuk-colour("dark-grey");
+    }
+
+    li:last-child {
+      border-right: none;
+    }
+  }
+}
diff --git a/orp/orp_search/templates/orp.html b/orp/orp_search/templates/orp.html
index b465f98..8c0f013 100644
--- a/orp/orp_search/templates/orp.html
+++ b/orp/orp_search/templates/orp.html
@@ -48,7 +48,6 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-4">Find laws and regulations f
             <button type="submit" class="search__button"></button>
           </div>
         </div>
-        <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
         <div class="govuk-form-group {% if form.document_type.errors %}govuk-form-group--error{% endif %}">
           <fieldset class="govuk-fieldset">
             <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -189,8 +188,8 @@ <h2 class="govuk-fieldset__heading">
 
     <div class="govuk-grid-column-two-thirds">
       <div class="orp-flex orp-flex--space-between">
-        <p class="govuk-body govuk-!-font-weight-bold">4,123 documents</p>
-        <p class="govuk-body">
+        <p class="govuk-body govuk-!-font-weight-bold govuk-!-margin-bottom-0">4,123 documents</p>
+        <p class="govuk-body govuk-!-margin-bottom-0">
           <a href="#" class="govuk-link govuk-link--no-visited-state
               ">Clear all filters</a>
         </p>
@@ -212,7 +211,7 @@ <h2 class="govuk-fieldset__heading">
 
       <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
       <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-grid-column-full">
           <div class="orp-flex">
             <label class="govuk-label govuk-!-margin-right-3 orp-!-no-text-wrap" for="sort">
               Sort by
@@ -226,7 +225,77 @@ <h2 class="govuk-fieldset__heading">
       </div>
       <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
       <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-grid-column-full">
+
+          <div class="govuk-summary-list orp-search-results">
+
+            <!-- first search result -->
+            <div class="govuk-summary-list__row--no-border">
+              <span class="govuk-caption-m">Guidance</span>
+              <h2 class="govuk-heading-m">
+                <a href="/document/{{ result.document_id }}/details" class="govuk-link  orp-link-text-decoration-none">
+                  Introduction to asbestos safety
+                </a>
+              </h2>
+              <p class="govuk-body-m">
+                Guidance on complying with the law on asbestos safety including detection, management, controls and
+                training.
+              </p>
+              <p class="govuk-body-s orp-secondary-text-colour govuk-!-margin-bottom-2">
+                Published by: Health and Safety Executive
+              </p>
+              <p class="govuk-body-s orp-secondary-text-colour">
+                Last updated: 24 January 2024
+              </p>
+              <ul class="govuk-list orp-topics-list">
+                <li class="govuk-body-s orp-secondary-text-colour">
+                  COSHH
+                </li>
+                <li class="govuk-body-s orp-secondary-text-colour">
+                  Substances hazardous to health
+                </li>
+                <li class="govuk-body-s orp-secondary-text-colour">
+                  Code of practice
+                </li>
+              </ul>
+            </div>
+            <!-- /first search result -->
+            <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+            <!-- second search result -->
+            <div class="govuk-summary-list__row--no-border">
+              <span class="govuk-caption-m">Guidance</span>
+              <h2 class="govuk-heading-m">
+                <a href="/document/{{ result.document_id }}/details" class="govuk-link orp-link-text-decoration-none">
+                  Waste and Mining Operations Installations Water Discharge and Groundwater Activities Medium
+                </a>
+              </h2>
+              <p class="govuk-body-m">
+                The Environment Agency consults the public on certain applications for: waste and mining waste
+                operations installations water discharge
+              </p>
+              <p class="govuk-body-s orp-secondary-text-colour govuk-!-margin-bottom-2">
+                Published by: Environment Agency
+              </p>
+              <p class="govuk-body-s orp-secondary-text-colour">
+                Last updated: 30 December 2023
+              </p>
+              <ul class="govuk-list orp-topics-list">
+                <li class="govuk-body-s orp-secondary-text-colour">
+                  Mining
+                </li>
+                <li class="govuk-body-s orp-secondary-text-colour">
+                  Groundwater
+                </li>
+                <li class="govuk-body-s orp-secondary-text-colour">
+                  Waste
+                </li>
+              </ul>
+            </div>
+            <!-- /second search result -->
+            <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+
+          </div>
+
           {% if results %}
           <div class="govuk-summary-list">
             <p class="govuk-body-m">