INTR-496: Apply styling for bookmark (#854)

uktrade · Jan 13, 2025 · d2c4d29 · d2c4d29
1 parent bd88ec8
commit d2c4d29
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 2 deletions.
diff --git a/src/core/templatetags/sidebar.py b/src/core/templatetags/sidebar.py
@@ -155,12 +155,14 @@ def get_part_context(self):
         page = self.context.get("self")
         is_bookmarked = bookmarks_service.is_page_bookmarked(user, page)
         post_url = reverse("interactions:bookmark")
+        is_new_sidebar_enabled = flag_is_active(self.context["request"], "new_sidebar")
         return {
             "post_url": post_url,
             "user": user,
             "page": page,
             "is_bookmarked": is_bookmarked,
             "csrf_token": self.context["csrf_token"],
+            "is_new_sidebar_enabled": is_new_sidebar_enabled,
         }
 
 

diff --git a/src/dw_design_system/dwds/elements/bookmark-icon.html b/src/dw_design_system/dwds/elements/bookmark-icon.html
@@ -0,0 +1,9 @@
+<svg class="bookmark-icon {% if is_bookmarked %}bookmarked{% endif %}"
+     width="43"
+     height="42"
+     viewBox="0 0 43 42"
+     fill="none"
+     xmlns="http://www.w3.org/2000/svg">
+    <ellipse class="background" cx="21" cy="21.5121" rx="14.0037" ry="14.0531" transform="rotate(-34.4913 21 21.5121)" fill="#FBE3DF" />
+    <path class="path" d="M30.0978 33.6004L21.5826 25.639C21.1459 25.2086 20.4909 25.2086 20.0542 25.639L11.5391 33.6004V9.93134C11.5391 9.28582 11.9757 8.85547 12.6308 8.85547H29.0061C29.6611 8.85547 30.0978 9.28582 30.0978 9.93134V33.6004Z" fill="white" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/src/dw_design_system/dwds/elements/bookmark.scss b/src/dw_design_system/dwds/elements/bookmark.scss
@@ -0,0 +1,11 @@
+.bookmark-icon.bookmarked {
+
+    .background {
+        fill: var(--color-background-blue);
+    }
+
+    .path {
+        fill: var(--color-icon);
+        stroke: var(--color-icon);
+    }
+}
diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss
@@ -8,6 +8,7 @@
   --dbt-light-blue-rgb: 0, 99, 190;
   --dbt-white: #ffffff;
   --dbt-miuk-light-grey: #dde5ed;
+  --dbt-background-blue: #d2e2f1;
 
   // GDS colours - for re-use in this file only
   // https://design-system.service.gov.uk/styles/colour/#colour-palette
@@ -35,6 +36,7 @@
   --color-link-background-active: var(--gds-yellow);
   --color-link-visited: var(--gds-purple);
   --color-background: var(--dbt-white);
+  --color-background-blue: var(--dbt-background-blue);
   --color-background-highlight: var(--dbt-white);
   --color-background-card: var(--dbt-miuk-light-grey);
   --color-background-comments: var(--gds-light-grey);

diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss
@@ -44,6 +44,7 @@
 @forward "elements/inset";
 @forward "elements/navigational_link";
 @forward "elements/ribbon";
+@forward "elements/bookmark";
 
 // Layouts
 @forward "layouts/content_sidebar";

diff --git a/src/interactions/templates/interactions/bookmark_page_input.html b/src/interactions/templates/interactions/bookmark_page_input.html
@@ -9,7 +9,19 @@
             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>
+        {% if is_new_sidebar_enabled %}
+            {% include 'dwds/elements/bookmark-icon.html' %}
+        {% else %}
+            {% include 'dwds/elements/icon.html' with id='bookmark-icon' is_filled=is_bookmarked %}
+        {% endif %}
+        <span class="{{ is_new_sidebar_enabled|yesno:'dwds-sr-only,' }}">
+            {% if is_bookmarked %}
+                Bookmarked
+            {% elif is_new_sidebar_enabled %}
+                Bookmark this page
+            {% else %}
+                Bookmark
+            {% endif %}
+        </span>
     </button>
 {% endif %}
diff --git a/src/interactions/views.py b/src/interactions/views.py
@@ -3,6 +3,7 @@
 from django.template.response import TemplateResponse
 from django.urls import reverse
 from django.views.decorators.http import require_http_methods
+from waffle import flag_is_active
 from wagtail.models import Page
 
 from interactions.services import bookmarks as bookmarks_service
@@ -25,6 +26,7 @@ def bookmark(request, *args, **kwargs):
             "user": user,
             "page": page,
             "is_bookmarked": is_bookmarked,
+            "is_new_sidebar_enabled": flag_is_active(request, "new_sidebar"),
         }
 
         return TemplateResponse(