From d2c4d292fa26a8a8e7c38f8b8688025b669fedac Mon Sep 17 00:00:00 2001 From: Suresh Manga Date: Mon, 13 Jan 2025 16:51:49 +0000 Subject: [PATCH] INTR-496: Apply styling for bookmark (#854) --- src/core/templatetags/sidebar.py | 2 ++ .../dwds/elements/bookmark-icon.html | 9 +++++++++ src/dw_design_system/dwds/elements/bookmark.scss | 11 +++++++++++ src/dw_design_system/dwds/styles/variables.scss | 2 ++ src/dw_design_system/dwds/stylesheet.scss | 1 + .../interactions/bookmark_page_input.html | 16 ++++++++++++++-- src/interactions/views.py | 2 ++ 7 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 src/dw_design_system/dwds/elements/bookmark-icon.html create mode 100644 src/dw_design_system/dwds/elements/bookmark.scss diff --git a/src/core/templatetags/sidebar.py b/src/core/templatetags/sidebar.py index 005281ca4..7ee64e831 100644 --- 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 new file mode 100644 index 000000000..6f9c1d21e --- /dev/null +++ b/src/dw_design_system/dwds/elements/bookmark-icon.html @@ -0,0 +1,9 @@ + + + + diff --git a/src/dw_design_system/dwds/elements/bookmark.scss b/src/dw_design_system/dwds/elements/bookmark.scss new file mode 100644 index 000000000..6de808a17 --- /dev/null +++ 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 index 45e2a0354..5ac52d7b6 100644 --- 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 index 8c3f59ec2..bcf8298fc 100644 --- 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 index 02cbbbd93..2f6f146dc 100644 --- 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 %} - {{ is_bookmarked|yesno:'Bookmarked,Bookmark' }} + {% 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 %} + + {% if is_bookmarked %} + Bookmarked + {% elif is_new_sidebar_enabled %} + Bookmark this page + {% else %} + Bookmark + {% endif %} + {% endif %} diff --git a/src/interactions/views.py b/src/interactions/views.py index 18dd43e78..c532a0039 100644 --- 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(