From de40e71f9c236f9714f3d73c55af7e8b0d538600 Mon Sep 17 00:00:00 2001
From: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
Date: Fri, 23 Aug 2024 12:43:11 +0100
Subject: [PATCH] Update site to style the page/sidebar closer to the new
 styles

---
 .../stylesheets/components/_content_page.scss |  6 ++-
 src/core/templates/dwds_content.html          | 16 +++----
 .../interactions/bookmark_page_input.html     | 45 ++++++++++++-------
 .../news/includes/news_categories_new.html    | 10 +++++
 src/news/templates/news/news_home_new.html    |  2 +-
 src/news/templates/news/news_page_new.html    |  2 +-
 6 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 src/news/templates/news/includes/news_categories_new.html

diff --git a/assets/stylesheets/components/_content_page.scss b/assets/stylesheets/components/_content_page.scss
index 479eb9ce6..7a77756f2 100644
--- a/assets/stylesheets/components/_content_page.scss
+++ b/assets/stylesheets/components/_content_page.scss
@@ -1,7 +1,11 @@
-.content_page {
+.content_page .primary-content {
   padding: var(--space);
   background-color: var(--color-background);
   border-radius: var(--border-radius);
+
+  h1 {
+    margin-top: 0;
+  }
 }
 
 .ws-content-page__metadata {
diff --git a/src/core/templates/dwds_content.html b/src/core/templates/dwds_content.html
index dfdee82d6..2bffd2672 100644
--- a/src/core/templates/dwds_content.html
+++ b/src/core/templates/dwds_content.html
@@ -13,16 +13,11 @@
             <div class="stack">
                 {% block pre_content %}
                 {% endblock pre_content %}
-                {% block page_title %}
-                    <h1>{{ page.title }}</h1>
-                {% endblock page_title %}
-                {% block bookmark %}
-                    {% if FEATURE_FLAGS.new_homepage and page %}
-                        <div class="dwds">{% bookmark_page_input user page %}</div>
-                    {% endif %}
-                {% endblock bookmark %}
                 <div class="with-sidebar-right">
                     <div class="primary-content">
+                        {% block page_title %}
+                            <h1>{{ page.title }}</h1>
+                        {% endblock page_title %}
                         {% block pre_primary_content %}
                         {% endblock pre_primary_content %}
                         {% block primary_content %}
@@ -32,6 +27,11 @@ <h1>{{ page.title }}</h1>
                         {% endblock post_primary_content %}
                     </div>
                     <div class="secondary-content">
+                        {% block bookmark %}
+                            {% if FEATURE_FLAGS.new_homepage and page %}
+                                {% bookmark_page_input user page %}
+                            {% endif %}
+                        {% endblock bookmark %}
                         {% block pre_secondary_content %}
                         {% endblock pre_secondary_content %}
                         {% block secondary_content %}
diff --git a/src/interactions/templates/interactions/bookmark_page_input.html b/src/interactions/templates/interactions/bookmark_page_input.html
index 02cbbbd93..d86d0beb9 100644
--- a/src/interactions/templates/interactions/bookmark_page_input.html
+++ b/src/interactions/templates/interactions/bookmark_page_input.html
@@ -1,15 +1,30 @@
-{% if page %}
-    <button class="bookmark-page-input"
-            title="{{ is_bookmarked|yesno:'Remove bookmark,Bookmark this page' }}"
-            data-is-htmx="{{ request.headers.hx_request }}"
-            hx-post="{{ post_url }}"
-            hx-vals='{"page_id": {{ page.id }}}'
-            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-            hx-trigger="click"
-            hx-select="button"
-            hx-target="this"
-            hx-swap="outerHTML">
-        {% include 'dwds/elements/icon.html' with id='bookmark-icon' is_filled=is_bookmarked %}
-        <span>{{ is_bookmarked|yesno:'Bookmarked,Bookmark' }}</span>
-    </button>
-{% endif %}
+{% extends "dwds/elements/extendable/card.html" %}
+
+{% block card_container_classes %}dwds-card-white{% endblock %}
+
+{% block card_header %}
+{% endblock card_header %}
+
+{% block card_content_image %}
+{% endblock card_content_image %}
+
+{% block card_content_body %}
+    {% if page %}
+        <button class="bookmark-page-input"
+                title="{{ is_bookmarked|yesno:'Remove bookmark,Bookmark this page' }}"
+                data-is-htmx="{{ request.headers.hx_request }}"
+                hx-post="{{ post_url }}"
+                hx-vals='{"page_id": {{ page.id }}}'
+                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                hx-trigger="click"
+                hx-select="button"
+                hx-target="this"
+                hx-swap="outerHTML">
+            {% include 'dwds/elements/icon.html' with id='bookmark-icon' is_filled=is_bookmarked %}
+            <span>{{ is_bookmarked|yesno:'Bookmarked,Bookmark' }}</span>
+        </button>
+    {% endif %}
+{% endblock card_content_body %}
+
+{% block card_footer %}
+{% endblock card_footer %}
diff --git a/src/news/templates/news/includes/news_categories_new.html b/src/news/templates/news/includes/news_categories_new.html
new file mode 100644
index 000000000..413089b85
--- /dev/null
+++ b/src/news/templates/news/includes/news_categories_new.html
@@ -0,0 +1,10 @@
+<nav aria-labelledby="news-category-heading">
+    <h3 id="news-category-heading">All news categories</h3>
+    <ul>
+        {% for category in categories %}
+            <li>
+                <a href="/news-and-views/category/{{ category.slug }}">{{ category.category }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+</nav>
diff --git a/src/news/templates/news/news_home_new.html b/src/news/templates/news/news_home_new.html
index df4b6b34a..ac1cbf971 100644
--- a/src/news/templates/news/news_home_new.html
+++ b/src/news/templates/news/news_home_new.html
@@ -61,5 +61,5 @@ <h2 class="govuk-heading-m">
 {% endblock primary_content %}
 
 {% block secondary_content %}
-    {% include "news/includes/news_categories.html" %}
+    {% include "news/includes/news_categories_new.html" %}
 {% endblock secondary_content %}
diff --git a/src/news/templates/news/news_page_new.html b/src/news/templates/news/news_page_new.html
index de6668a39..f7ec495db 100644
--- a/src/news/templates/news/news_page_new.html
+++ b/src/news/templates/news/news_page_new.html
@@ -111,5 +111,5 @@ <h2 class="govuk-heading-m">Leave a comment</h2>
 {% endblock post_primary_content %}
 
 {% block secondary_content %}
-    {% include "news/includes/news_categories.html" %}
+    {% include "news/includes/news_categories_new.html" %}
 {% endblock secondary_content %}