diff --git a/assets/stylesheets/components/_home_new.scss b/assets/stylesheets/components/_home_new.scss index 7df98ef43..052927df4 100644 --- a/assets/stylesheets/components/_home_new.scss +++ b/assets/stylesheets/components/_home_new.scss @@ -55,12 +55,13 @@ } // Adds spacing to the top level content when a flag banner is not present. - .dwds > .stack > :not(.govuk-phase-banner) { + .dwds > .content-stack > :not(.govuk-phase-banner) { margin-block-start: var(--space); } } .new-home { + article, section { display: inline; @@ -81,4 +82,4 @@ margin-bottom: 10px; } } -} +} \ No newline at end of file diff --git a/assets/stylesheets/components/_streamfield-content.scss b/assets/stylesheets/components/_streamfield-content.scss index a9b2ba700..a607199fc 100644 --- a/assets/stylesheets/components/_streamfield-content.scss +++ b/assets/stylesheets/components/_streamfield-content.scss @@ -10,7 +10,8 @@ @include govuk-font($size: 16, $weight: bold); } - p, li { + p, + li { @extend %govuk-body-m; } @@ -29,30 +30,19 @@ } table { - @extend .govuk-table; + @extend .govuk-table; - caption { - @extend .govuk-table__caption; - } + caption { + @extend .govuk-table__caption; + } - th { - @extend .govuk-table__header; - } + th { + @extend .govuk-table__header; + } - td { - @extend .govuk-table__cell; - } - } -} - -.ws-streamfield-content__image { - margin: 0 0 govuk-spacing(3) 0; - padding: 0; - display: table; - - img { - max-width: 100%; - height: auto; + td { + @extend .govuk-table__cell; + } } } @@ -71,8 +61,10 @@ .ws-streamfield-content__cta-link-container { padding-top: govuk-spacing(2); - a, a:visited { + + a, + a:visited { color: $govuk-text-colour; padding: govuk-spacing(4); } -} +} \ No newline at end of file diff --git a/src/content/templates/content/navigation_page.html b/src/content/templates/content/navigation_page.html index 994d2eab4..214ef6a51 100644 --- a/src/content/templates/content/navigation_page.html +++ b/src/content/templates/content/navigation_page.html @@ -4,7 +4,7 @@ {% block body_classes %}dwds-body dwds-navigation-page{% endblock %} {% block page_title %} -
+

{{ page.title }}

{% include "feedback.html" with form_id="hr-v1" classes="" prefix="navigation-page" custom_submit_data_function="navigationFeedbackData" %} @@ -13,17 +13,17 @@

{{ page.title }}

{% endblock page_title %} {% block primary_content %} -
+
{% for block in page.primary_elements %} - {% include_block block %} +
{% include_block block %}
{% endfor %}
{% endblock primary_content %} {% block secondary_content %} -
+
{% for block in page.secondary_elements %} - {% include_block block %} +
{% include_block block %}
{% endfor %}
{% endblock secondary_content %} diff --git a/src/core/templates/dwds_content.html b/src/core/templates/dwds_content.html index 5f90e4435..078ec2e6a 100644 --- a/src/core/templates/dwds_content.html +++ b/src/core/templates/dwds_content.html @@ -11,7 +11,7 @@ {% block main_content %}
-
+
{% block pre_content %} {% endblock pre_content %} {% block page_title %} @@ -20,10 +20,10 @@

{{ page.title }}

{% endblock page_title %} {% block bookmark %} {% if page %} - {% bookmark_page_input user page %} +
{% bookmark_page_input user page %}
{% endif %} {% endblock bookmark %} -
+
{% block pre_primary_content %} {% endblock pre_primary_content %} @@ -47,3 +47,9 @@

{{ page.title }}

{% endblock main_content %} + + + {% block scripts %} + {{ block.super }} + + {% endblock scripts %} diff --git a/src/dw_design_system/dwds/components/__init__.py b/src/dw_design_system/dwds/components/__init__.py index 098194ddc..7780dc5f5 100644 --- a/src/dw_design_system/dwds/components/__init__.py +++ b/src/dw_design_system/dwds/components/__init__.py @@ -1,7 +1,6 @@ -from .cta_card import CTACardBlock +from .cta_card import CTACardBlock, NavigationCardBlock from .engagement_card import EngagementCardBlock from .link_list import CustomPageLinkListBlock, TaggedPageListBlock -from .navigation_card import NavigationCardBlock __all__ = [ diff --git a/src/dw_design_system/dwds/components/banner.html b/src/dw_design_system/dwds/components/banner.html new file mode 100644 index 000000000..4e158a33c --- /dev/null +++ b/src/dw_design_system/dwds/components/banner.html @@ -0,0 +1,11 @@ +
+
+ {% if link %} +

+ {{ text }} +

+ {% else %} +

{{ text }}

+ {% endif %} +
+
diff --git a/src/dw_design_system/dwds/components/banner_card.html b/src/dw_design_system/dwds/components/banner_card.html deleted file mode 100644 index f5b5bb0d6..000000000 --- a/src/dw_design_system/dwds/components/banner_card.html +++ /dev/null @@ -1,30 +0,0 @@ -{% extends "dwds/elements/extendable/card.html" %} - -{% block card_container_classes %} - dwds-banner-card - card-without-shadow - {% if alert %} - dwds-card-red - {% else %} - dwds-card-blue - {% endif %} -{% endblock %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_content_image %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% if link %} - -

{{ text }}

- - {% else %} -

{{ text }}

- {% endif %} -{% endblock card_content_body %} - -{% block card_footer %} -{% endblock card_footer %} diff --git a/src/dw_design_system/dwds/components/banner_card.scss b/src/dw_design_system/dwds/components/banner_card.scss deleted file mode 100644 index f1aa27206..000000000 --- a/src/dw_design_system/dwds/components/banner_card.scss +++ /dev/null @@ -1,13 +0,0 @@ -.dwds-card-wrapper { - .dwds-card.dwds-banner-card { - h3 { - font-size: var(--text-xlarge); - font-weight: var(--font-weight-normal); - line-height: var(--font-lineheight-headings); - } - - p { - margin: 0; - } - } -} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/box.html b/src/dw_design_system/dwds/components/box.html new file mode 100644 index 000000000..244d7d2dc --- /dev/null +++ b/src/dw_design_system/dwds/components/box.html @@ -0,0 +1 @@ +
{{ excerpt }}
diff --git a/src/dw_design_system/dwds/components/box.scss b/src/dw_design_system/dwds/components/box.scss new file mode 100644 index 000000000..533f7de9b --- /dev/null +++ b/src/dw_design_system/dwds/components/box.scss @@ -0,0 +1,3 @@ +.dwds-box { + background-color: pink; +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/card_group.html b/src/dw_design_system/dwds/components/card_group.html deleted file mode 100644 index 32886e8bf..000000000 --- a/src/dw_design_system/dwds/components/card_group.html +++ /dev/null @@ -1,44 +0,0 @@ -{% extends "dwds/elements/extendable/card.html" %} - -{% block card_container_classes %} - dwds-card-stack-big - dwds-card-group - {% if grid %}dwds-card-group-grid{% endif %} - {% if blue_bg %}dwds-card-blue{% endif %} - {% if not show_shadow %}card-without-shadow{% endif %} -{% endblock card_container_classes %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_content_image %} -{% endblock card_content_image %} - -{% block card_content_body %} -
-

{{ card_group_title }}

- {% if card_group_link and card_group_link_text %} - - {{ card_group_link_text }} - {% include "dwds/icons/arrow-right.html" %} - - {% endif %} -
-
- {% for card in cards %} - {% include card.template with title=card.title post_title_date=card.post_title_date post_title_time=card.post_title_time thumbnail=card.thumbnail url=card.url created_date=card.created_date updated_date=card.updated_date comment_count=card.comment_count excerpt=card.excerpt hide_shadow=card.hide_shadow %} - {% endfor %} -
-{% endblock card_content_body %} - -{% block card_footer %} - {% if footer_link and footer_link_text %} -
- {% if show_hr %}
{% endif %} - - {{ footer_link_text }} - {% include "dwds/icons/arrow-right.html" %} - -
- {% endif %} -{% endblock card_footer %} diff --git a/src/dw_design_system/dwds/components/card_group.scss b/src/dw_design_system/dwds/components/card_group.scss deleted file mode 100644 index 7d289d661..000000000 --- a/src/dw_design_system/dwds/components/card_group.scss +++ /dev/null @@ -1,38 +0,0 @@ -.dwds-card.dwds-card-group { - --card-body-heading-color: var(--color-text); - padding: var(--s0); - - .card-group-title-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - - h2 { - margin: 0; - } - } - - .card-group-title-wrapper a, - .card-footer a { - display: flex; - justify-content: space-between; - max-width: fit-content; - - svg { - height: var(--font-lineheight-body); - width: var(--s0); - margin-left: var(--s0); - - path { - fill: currentColor; - } - } - } -} - -.dwds-card.dwds-card-group.dwds-card-group-grid { - .grid { - grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr)); - } -} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/comment_section.html b/src/dw_design_system/dwds/components/comment_section.html new file mode 100644 index 000000000..2bc51999d --- /dev/null +++ b/src/dw_design_system/dwds/components/comment_section.html @@ -0,0 +1,8 @@ +{% load static %} + +
+ Comment bubble icon. + {{ comment_count }} Comment{{ comment_count|pluralize }} +
diff --git a/src/dw_design_system/dwds/components/comment_section.scss b/src/dw_design_system/dwds/components/comment_section.scss new file mode 100644 index 000000000..964fa903d --- /dev/null +++ b/src/dw_design_system/dwds/components/comment_section.scss @@ -0,0 +1,5 @@ +.dwds-comment-section { + .comment-icon { + vertical-align: text-bottom; + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/content_list.html b/src/dw_design_system/dwds/components/content_list.html new file mode 100644 index 000000000..0f7da4016 --- /dev/null +++ b/src/dw_design_system/dwds/components/content_list.html @@ -0,0 +1,23 @@ +{% load cards %} + +
+
+
+

{{ title }}

+ {% if as_card_grid %} +
+ {% for content_item in content_items %} +
{% page_to_engagement content_item %}
+ {% endfor %} +
+ {% else %} + {% for content_item in content_items %} + {% page_to_engagement content_item %} + {% endfor %} + {% endif %} + {% if link_url and link_text %} + {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %} + {% endif %} +
+
+
diff --git a/src/dw_design_system/dwds/components/content_list.scss b/src/dw_design_system/dwds/components/content_list.scss new file mode 100644 index 000000000..c8789d222 --- /dev/null +++ b/src/dw_design_system/dwds/components/content_list.scss @@ -0,0 +1,32 @@ +.dwds-content-list { + > .content-main { + --content-main-padding: 0; + } + + .content-item { + .content-custom-sidebar { + --sidebar-gap: var(--s1); + + .content-main { + --content-main-padding: 0; + } + + .content-image { + height: fit-content; + border-radius: 6px; + } + } + } +} + +.dwds-content-list.as-card-grid { + .content-item { + .content-custom-sidebar { + --sidebar-gap: 0; + + .content-main { + --content-main-padding: var(--s0); + } + } + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/cta.html b/src/dw_design_system/dwds/components/cta.html new file mode 100644 index 000000000..2a23f5c39 --- /dev/null +++ b/src/dw_design_system/dwds/components/cta.html @@ -0,0 +1,6 @@ +
+
+ {% include 'dwds/elements/navigational_link.html' with url=url text=title %} + {% if description %}

{{ description }}

{% endif %} +
+
diff --git a/src/dw_design_system/dwds/components/cta_card.html b/src/dw_design_system/dwds/components/cta_card.html index d96b2c8b5..4301f80dc 100644 --- a/src/dw_design_system/dwds/components/cta_card.html +++ b/src/dw_design_system/dwds/components/cta_card.html @@ -1,17 +1 @@ -{% extends "dwds/elements/extendable/card.html" %} - -{% block card_container_classes %}dwds-cta-card card-without-shadow dwds-card-blue{% endblock %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_content_image %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% include 'dwds/elements/navigational_link.html' with url=url text=title %} - {% if description %}

{{ description }}

{% endif %} -{% endblock card_content_body %} - -{% block card_footer %} -{% endblock card_footer %} +
{% include "dwds/components/cta.html" %}
diff --git a/src/dw_design_system/dwds/components/cta_card.py b/src/dw_design_system/dwds/components/cta_card.py index b3a9c4a43..6e72f4d6c 100644 --- a/src/dw_design_system/dwds/components/cta_card.py +++ b/src/dw_design_system/dwds/components/cta_card.py @@ -40,6 +40,7 @@ def get_context(self, value, parent_context=None): url = value["url"] context.update( + highlight=True, title=value["title"], description=value["description"], url=url, @@ -50,3 +51,35 @@ def get_searchable_heading(self, value): title = value["title"] page = value["page"] return title or page.title + + +class NavigationCardBlock(blocks.StructBlock): + """A nav card to direct users""" + + page = blocks.PageChooserBlock() + title = content_blocks.HeadingBlock( + required=False, + max_length=30, + help_text="By default, the name of the page will be the title. Override it using the below field.", + ) + summary = blocks.CharBlock(required=False, max_length=70) + + class Meta: + label = "Navigation Card" + icon = "link" + template = "dwds/components/cta_card.html" + + def get_context(self, value, parent_context=None): + context = parent_context or {} + page = value["page"] + context.update( + title=value.get("title") or page.title, + url=page.get_url(), + description=value["summary"], + ) + return context + + def get_searchable_heading(self, value): + title = value["title"] + page = value["page"] + return title or page.title diff --git a/src/dw_design_system/dwds/components/engagement.html b/src/dw_design_system/dwds/components/engagement.html new file mode 100644 index 000000000..aaa8ab1b7 --- /dev/null +++ b/src/dw_design_system/dwds/components/engagement.html @@ -0,0 +1,45 @@ +{% load wagtailimages_tags static humanize %} + +
+
+ {% include "dwds/elements/content_image.html" with content_image=thumbnail %} + +
+
+ {% if ribbon_text %} + {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %} + {% endif %} +

+ {{ title }} +

+ {% if post_title_date and post_title_time %} +
+

{{ post_title_date }}

+

{{ post_title_time }}

+
+ {% endif %} + {% if excerpt %}

{{ excerpt|truncatewords:16 }}

{% endif %} +
+ + {% if updated_date or created_date or comment_count %} +
+ {% if updated_date > created_date %} + + {% elif created_date %} + + {% endif %} + + {% if comment_count > 0 %} + {% include "dwds/components/comment_section.html" %} + {% endif %} +
+ {% endif %} +
+
+
diff --git a/src/dw_design_system/dwds/components/engagement_card.html b/src/dw_design_system/dwds/components/engagement_card.html deleted file mode 100644 index 8caea4389..000000000 --- a/src/dw_design_system/dwds/components/engagement_card.html +++ /dev/null @@ -1,60 +0,0 @@ -{% extends "dwds/elements/extendable/card.html" %} -{% load wagtailimages_tags static humanize %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_container_classes %} - dwds-engagement-card card-with-image - {% if hide_shadow %}card-without-shadow{% endif %} -{% endblock card_container_classes %} - -{% block card_content_image %} - {% if thumbnail %} - {% image thumbnail fill-420x240 %} - {% else %} - Colourful circles on a blue background. - {% endif %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% if ribbon_text %} - {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %} - {% endif %} - -

- {{ title }} -

- {% if post_title_date and post_title_time %} -
-

{{ post_title_date }}

-

{{ post_title_time }}

-
- {% endif %} - - {% if excerpt %}

{{ excerpt|truncatewords:16 }}

{% endif %} -{% endblock card_content_body %} - -{% block card_footer_body %} - {% if updated_date > created_date %} - - {% elif created_date %} - - {% endif %} - - {% if comment_count > 0 %} - - Comment bubble icon. - {{ comment_count }} Comment{{ comment_count|pluralize }} - - {% endif %} -{% endblock card_footer_body %} diff --git a/src/dw_design_system/dwds/components/engagement_card.scss b/src/dw_design_system/dwds/components/engagement_card.scss deleted file mode 100644 index b12c935f1..000000000 --- a/src/dw_design_system/dwds/components/engagement_card.scss +++ /dev/null @@ -1,3 +0,0 @@ -.dwds-card.dwds-engagement-card { - --card-body-heading-color: var(--color-link); -} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/link_action.html b/src/dw_design_system/dwds/components/link_action.html new file mode 100644 index 000000000..3b561f76d --- /dev/null +++ b/src/dw_design_system/dwds/components/link_action.html @@ -0,0 +1,10 @@ + + {% if left %} + {% include "dwds/icons/arrow-left.html" %} + {% endif %} +
{{ link_text }}
+ {% if right %} + {% include "dwds/icons/arrow-right.html" %} + {% endif %} + diff --git a/src/dw_design_system/dwds/components/link_action.scss b/src/dw_design_system/dwds/components/link_action.scss new file mode 100644 index 000000000..44c2ef77c --- /dev/null +++ b/src/dw_design_system/dwds/components/link_action.scss @@ -0,0 +1,26 @@ +.dwds-link-action { + display: flex; + justify-content: space-between; + max-width: fit-content; + + svg { + height: var(--font-lineheight-body); + width: var(--s0); + + path { + fill: currentColor; + } + } +} + +.dwds-link-action.left { + > div { + margin-left: var(--s0); + } +} + +.dwds-link-action.right { + > div { + margin-right: var(--s0); + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/link_list.html b/src/dw_design_system/dwds/components/link_list.html index b0f450383..221206d71 100644 --- a/src/dw_design_system/dwds/components/link_list.html +++ b/src/dw_design_system/dwds/components/link_list.html @@ -1,26 +1,18 @@ -{% extends "dwds/elements/extendable/card.html" %} +
+
+

{{ title }}

+
-{% block card_container_classes %} - dwds-link-list -{% endblock card_container_classes %} - -{% block card_header_content %} -

{{ title }}

-{% endblock card_header_content %} - -{% block card_content_image %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% if description %}

{{ description }}

{% endif %} - -{% endblock card_content_body %} - -{% block card_footer %} -{% endblock card_footer %} +
+
+ {% if description %}

{{ description }}

{% endif %} + +
+
+
diff --git a/src/dw_design_system/dwds/components/link_navigate.html b/src/dw_design_system/dwds/components/link_navigate.html index 9da95b636..a7d4bd1fb 100644 --- a/src/dw_design_system/dwds/components/link_navigate.html +++ b/src/dw_design_system/dwds/components/link_navigate.html @@ -1,14 +1,5 @@
- {% if previous_url %} - - {% include "dwds/icons/arrow-left.html" %} - {{ previous_text|default:'Previous'|title }} - - {% endif %} + {% include "dwds/components/link_action.html" with link_url=previous_url link_text=previous_text|default:'Previous'|title left=True %} {% if previous_url and next_url %}|{% endif %} - {% if next_url %} - {{ next_text|default:'Next'|title }} - {% include "dwds/icons/arrow-right.html" %} - - {% endif %} + {% include "dwds/components/link_action.html" with link_url=next_url link_text=next_text|default:'Next'|title right=True %}
diff --git a/src/dw_design_system/dwds/components/link_navigate.scss b/src/dw_design_system/dwds/components/link_navigate.scss index 3cfcca6c0..2433f60b4 100644 --- a/src/dw_design_system/dwds/components/link_navigate.scss +++ b/src/dw_design_system/dwds/components/link_navigate.scss @@ -3,11 +3,17 @@ align-items: center; gap: var(--s0); + .dwds-link-action { + > div { + margin-left: 0; + margin-right: 0; + } + } + a { display: flex; gap: var(--s0); - svg { height: var(--font-lineheight-body); width: var(--s1); diff --git a/src/dw_design_system/dwds/components/navigation_card.html b/src/dw_design_system/dwds/components/navigation_card.html deleted file mode 100644 index 48d584042..000000000 --- a/src/dw_design_system/dwds/components/navigation_card.html +++ /dev/null @@ -1,17 +0,0 @@ -{% extends "dwds/elements/extendable/card.html" %} - -{% block card_container_classes %}dwds-navigation-card{% endblock %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_content_image %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% include "dwds/elements/navigational_link.html" with url=url text=title %} - {% if summary %}

{{ summary }}

{% endif %} -{% endblock card_content_body %} - -{% block card_footer %} -{% endblock card_footer %} diff --git a/src/dw_design_system/dwds/components/navigation_card.py b/src/dw_design_system/dwds/components/navigation_card.py deleted file mode 100644 index 0f17bc651..000000000 --- a/src/dw_design_system/dwds/components/navigation_card.py +++ /dev/null @@ -1,35 +0,0 @@ -from wagtail import blocks - -from content import blocks as content_blocks - - -class NavigationCardBlock(blocks.StructBlock): - """A nav card to direct users""" - - page = blocks.PageChooserBlock() - title = content_blocks.HeadingBlock( - required=False, - max_length=30, - help_text="By default, the name of the page will be the title. Override it using the below field.", - ) - summary = blocks.CharBlock(required=False, max_length=70) - - class Meta: - label = "Navigation Card" - icon = "link" - template = "dwds/components/navigation_card.html" - - def get_context(self, value, parent_context=None): - context = parent_context or {} - page = value["page"] - context.update( - title=value.get("title") or page.title, - url=page.get_url(), - summary=value["summary"], - ) - return context - - def get_searchable_heading(self, value): - title = value["title"] - page = value["page"] - return title or page.title diff --git a/src/dw_design_system/dwds/components/navigation_card.scss b/src/dw_design_system/dwds/components/navigation_card.scss deleted file mode 100644 index 9c07d33b1..000000000 --- a/src/dw_design_system/dwds/components/navigation_card.scss +++ /dev/null @@ -1 +0,0 @@ -.dwds-navigation-card {} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/one_up.html b/src/dw_design_system/dwds/components/one_up.html new file mode 100644 index 000000000..7e5518afa --- /dev/null +++ b/src/dw_design_system/dwds/components/one_up.html @@ -0,0 +1,43 @@ +{% load wagtailimages_tags static humanize %} + +
+
+
+
+ {% if ribbon_text %} + {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %} + {% endif %} +

+ {{ title }} +

+ {% if post_title_date and post_title_time %} +
+

{{ post_title_date }}

+

{{ post_title_time }}

+
+ {% endif %} + {% if excerpt %}

{{ excerpt|truncatewords:16 }}

{% endif %} +
+ + {% if updated_date or created_date or comment_count %} +
+ {% if updated_date > created_date %} + + {% elif created_date %} + + {% endif %} + {% if comment_count %} + {% include "dwds/components/comment_section.html" %} + {% endif %} +
+ {% endif %} +
+ {% include "dwds/elements/content_image.html" with content_image=thumbnail %} +
+
diff --git a/src/dw_design_system/dwds/components/one_up.scss b/src/dw_design_system/dwds/components/one_up.scss new file mode 100644 index 000000000..d50d96246 --- /dev/null +++ b/src/dw_design_system/dwds/components/one_up.scss @@ -0,0 +1,17 @@ +.dwds-one-up { + --one-up-min-inline-size: 30ch; + + + > .content-custom-sidebar { + > .content-main { + min-inline-size: var(--one-up-min-inline-size); + } + } + + .content-image { + background-color: white; + + object-position: center; + height: 100%; + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/one_up_card.html b/src/dw_design_system/dwds/components/one_up_card.html deleted file mode 100644 index fa6068774..000000000 --- a/src/dw_design_system/dwds/components/one_up_card.html +++ /dev/null @@ -1,60 +0,0 @@ -{% extends "dwds/elements/extendable/card.html" %} -{% load wagtailimages_tags static humanize %} - -{% block card_container_classes %} - dwds-one-up-card card-with-image image-right -{% endblock card_container_classes %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_content_image %} - {% if thumbnail %} - {% image thumbnail fill-420x240 %} - {% else %} - Colourful circles on a blue background. - {% endif %} -{% endblock card_content_image %} - -{% block card_content %} -
- {% block card_content_body %} - {% if ribbon_text %} - {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %} - {% endif %} -

- {{ title }} -

- {% if post_title_date and post_title_time %} -
-

{{ post_title_date }}

-

{{ post_title_time }}

-
- {% endif %} - {% if excerpt %}

{{ excerpt|truncatewords:16 }}

{% endif %} - {% endblock card_content_body %} -
-{% endblock card_content %} - -{% block card_footer_body %} - {% if updated_date > created_date %} - - {% elif created_date %} - - {% endif %} - {% if comment_count %} - - Comment bubble icon. - {{ comment_count }} Comment{{ comment_count|pluralize }} - - {% endif %} -{% endblock card_footer_body %} diff --git a/src/dw_design_system/dwds/components/one_up_card.scss b/src/dw_design_system/dwds/components/one_up_card.scss deleted file mode 100644 index 2709a9ea1..000000000 --- a/src/dw_design_system/dwds/components/one_up_card.scss +++ /dev/null @@ -1,7 +0,0 @@ -.dwds-one-up-card { - --card-body-heading-color: var(--color-link); - - .card-main { - grid-template-columns: 1fr 1.25fr !important; - } -} \ No newline at end of file diff --git a/src/dw_design_system/dwds/components/promo.html b/src/dw_design_system/dwds/components/promo.html index b3cb28a23..1ade617f1 100644 --- a/src/dw_design_system/dwds/components/promo.html +++ b/src/dw_design_system/dwds/components/promo.html @@ -1,47 +1,17 @@ -{% extends "dwds/elements/extendable/card.html" %} -{% load wagtailimages_tags static %} - -{% comment %} -Context: - ribbon_text (str) - description (str) - link_url (str) - link_text (str) - thumbnail (str) - -Example: - {% include 'dwds/components/promo.html' with ribbon_text='One DBT' description='One DBT promotion banner.' link_url='https://example.com' link_text='Example website' thumbnail='' %} -{% endcomment %} - -{% block card_container_classes %} - dwds-promo-banner - card-without-shadow - card-with-image - image-right - dwds-card-blue -{% endblock %} - -{% block card_header %} -{% endblock card_header %} - -{% block card_content_image %} - {% if thumbnail %} - {% image thumbnail fill-420x240 %} - {% else %} - Colourful circles on a blue background. - {% endif %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% if ribbon_text %} - {% include "dwds/elements/ribbon.html" with colour="red" text=ribbon_text %} - {% endif %} - {% if description %}

{{ description }}

{% endif %} - {% if link_url and link_text %} - {% include "dwds/elements/navigational_link.html" with url=link_url text=link_text %} - {% endif %} -{% endblock card_content_body %} - -{% block card_footer %} -{% endblock card_footer %} +{% load wagtailimages_tags static humanize %} +
+
+ {% include "dwds/elements/content_image.html" with content_image=thumbnail %} +
+
+ {% if ribbon_text %} + {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="red" %} + {% endif %} + {% if description %}

{{ description }}

{% endif %} + {% if link_url and link_text %} + {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %} + {% endif %} +
+
+
+
diff --git a/src/dw_design_system/dwds/components/promo.scss b/src/dw_design_system/dwds/components/promo.scss index f08232f6b..248d821f1 100644 --- a/src/dw_design_system/dwds/components/promo.scss +++ b/src/dw_design_system/dwds/components/promo.scss @@ -1,34 +1,7 @@ -.dwds-card.dwds-promo-banner { - --link-font-size: var(--s0); - - .card-main { - grid-template-columns: 2fr 1fr !important; - - image { - border-radius: 0; - } - } - - .dwds-navigational-link { - justify-content: unset; - align-items: center; - gap: var(--s0); - - svg { - height: var(--link-font-size); - } - } - - a, - a:visited, - a:link { - color: var(--color-text-highlight); - font-size: var(--link-font-size); - text-decoration: underline; - font-weight: var(--font-weight-bold); - - p { - color: var(--color-text-highlight); +.dwds-promo { + > .content-grid { + > .content-image { + height: auto; } } } \ No newline at end of file diff --git a/src/dw_design_system/dwds/elements/content_header.html b/src/dw_design_system/dwds/elements/content_header.html new file mode 100644 index 000000000..aa4a66005 --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_header.html @@ -0,0 +1,5 @@ +
+ {% include "dwds/elements/ribbon.html" with text="Ribbon" colour="red" %} +

26 June

+

DBT Connect: John Smith in conversation with Jane Doe

+
diff --git a/src/dw_design_system/dwds/elements/content_header.scss b/src/dw_design_system/dwds/elements/content_header.scss new file mode 100644 index 000000000..66a903940 --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_header.scss @@ -0,0 +1,18 @@ +.content-header { + --content-header-text-colour: var(--card-bg-white); + + padding: var(--s0) var(--s1) var(--s0) var(--s0); + background: linear-gradient(180deg, rgba(0, 40, 95, 0.00) 53.55%, #00285F 99.65%), url("/assets/images/dwds/card-header-bg-small.webp") center / cover no-repeat, #00285F; + font-weight: var(--font-weight-bold); + color: var(--content-header-text-colour); + + .content-subtitle { + font-size: var(--text-large); + color: var(--content-header-text-colour); + } + + h2, + h3 { + color: var(--content-header-text-colour); + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/elements/content_image.html b/src/dw_design_system/dwds/elements/content_image.html new file mode 100644 index 000000000..69ad00ab4 --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_image.html @@ -0,0 +1,11 @@ +{% load wagtailimages_tags static %} + +{% if content_image %} + {% image content_image fill-420x240 class="content-image" %} +{% else %} + Colourful circles on a blue background. +{% endif %} diff --git a/src/dw_design_system/dwds/elements/content_image.scss b/src/dw_design_system/dwds/elements/content_image.scss new file mode 100644 index 000000000..42793347a --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_image.scss @@ -0,0 +1,7 @@ +.content-image { + // Fill the available space, but don't crop or stretch the image + inline-size: 100%; + object-fit: contain; + object-position: 0 0; + flex-basis: 300px; +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/elements/content_item.html b/src/dw_design_system/dwds/elements/content_item.html new file mode 100644 index 000000000..dbf564bdb --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_item.html @@ -0,0 +1,5 @@ +
+ {% include "dwds/elements/content_header.html" %} + {% include "dwds/elements/content_image.html" %} + {% include "dwds/elements/content_main.html" %} +
diff --git a/src/dw_design_system/dwds/elements/content_item.scss b/src/dw_design_system/dwds/elements/content_item.scss new file mode 100644 index 000000000..c1c980c72 --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_item.scss @@ -0,0 +1,4 @@ +.content-item { + container-name: content_item; + container-type: inline-size; +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/elements/content_main.html b/src/dw_design_system/dwds/elements/content_main.html new file mode 100644 index 000000000..f225dfbae --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_main.html @@ -0,0 +1,17 @@ +
+
+ {% include "dwds/elements/ribbon.html" with text="Ribbon" %} + +

+ A message from the Secretary of State +

+ +

Join John Smith, former SpAd for Jane Doe, at the next DBT Connect event on Wednesday 26 June, 1-2pm.

+ See event +
+ +
+ Added today at 9am + 4 Comments +
+
diff --git a/src/dw_design_system/dwds/elements/content_main.scss b/src/dw_design_system/dwds/elements/content_main.scss new file mode 100644 index 000000000..ff60b8131 --- /dev/null +++ b/src/dw_design_system/dwds/elements/content_main.scss @@ -0,0 +1,86 @@ +.content-main { + --content-main-bg-color: var(--card-bg-white); + --content-main-heading-color: var(--color-text); + --content-main-link-color: var(--color-link); + --content-main-text-color: var(--color-text); + --content-main-padding: var(--s0); + + padding: var(--content-main-padding); + + display: flex; + flex-direction: column; + gap: var(--s0); + + background-color: var(--content-main-bg-color); + + h2, + h3 { + color: var(--content-main-heading-color); + } + + p { + color: var(--content-main-text-color); + } + + a, + a:visited, + a:link { + color: var(--content-main-link-color); + text-decoration-color: var(--content-main-link-color); + } + + a:focus { + color: var(--color-text); + text-decoration-color: var(--color-text); + } + + .content-body.content-body-space-padding { + padding: var(--space); + } + + .content-body { + font-size: var(--text-large); + line-height: var(--font-lineheight-body); + + .post-title-container { + display: flex; + flex-direction: column; + gap: var(--s-5) + } + + .post-title { + margin: 0; + } + } + + .content-footer { + margin-top: auto; + color: var(--color-text-secondary); + } + + .content-footer.content-stack { + --content-stack-gap: var(--s-5); + } +} + +.content-main.info { + --content-main-bg-color: #EEF2F6; +} + +.content-main.content { + --content-main-heading-color: var(--color-link); +} + +.content-main.highlight { + --content-main-bg-color: var(--card-bg-blue); + --content-main-heading-color: var(--color-text-highlight); + --content-main-link-color: var(--color-text-highlight); + --content-main-text-color: var(--color-text-highlight); +} + +.content-main.warning { + --content-main-bg-color: var(--card-bg-red); + --content-main-heading-color: var(--color-text-highlight); + --content-main-link-color: var(--color-text-highlight); + --content-main-text-color: var(--color-text-highlight); +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/elements/extendable/card.html b/src/dw_design_system/dwds/elements/extendable/card.html deleted file mode 100644 index 366f87d9f..000000000 --- a/src/dw_design_system/dwds/elements/extendable/card.html +++ /dev/null @@ -1,46 +0,0 @@ -
-
- {% block card_header %} -
- {% block card_header_content %} - {% include "dwds/elements/ribbon.html" with text="Ribbon" colour="red" %} -

26 June

-

DBT Connect: John Smith in conversation with Jane Doe

- {% endblock card_header_content %} -
- {% endblock card_header %} - - {% block card_main %} -
- {% block card_content_image %} - image - {% endblock card_content_image %} - -
- {% block card_content %} - {% comment %} stack should be converted into a card-specific stack {% endcomment %} -
- {% block card_content_body %} - {% include "dwds/elements/ribbon.html" with text="Ribbon" %} - -

A message from the Secretary of State

- -

Join John Smith, former SpAd for Jane Doe, at the next DBT Connect event on Wednesday 26 June, 1-2pm.

- See event - {% endblock card_content_body %} -
- {% endblock card_content %} - - {% block card_footer %} -
- {% block card_footer_body %} - Added today at 9am - 4 Comments - {% endblock card_footer_body %} -
- {% endblock card_footer %} -
-
- {% endblock card_main %} -
-
diff --git a/src/dw_design_system/dwds/elements/extendable/card.scss b/src/dw_design_system/dwds/elements/extendable/card.scss deleted file mode 100644 index 6929c694f..000000000 --- a/src/dw_design_system/dwds/elements/extendable/card.scss +++ /dev/null @@ -1,181 +0,0 @@ -.dwds-card-wrapper { - container-name: card; - container-type: inline-size; - - .dwds-card { - --card-bottom-border-height: 5px; - --card-body-bg-color: var(--card-bg-white); - --card-body-heading-color: var(--color-text); - --card-body-link-color: var(--color-link); - --card-body-text-color: var(--color-text); - --card-body-stack-space: var(--s0); - color: var(--card-body-text-color); - - flex-grow: 1; - - display: flex; - flex-direction: column; - - box-shadow: 0 var(--card-bottom-border-height) 0 rgba(0, 0, 0, 0.2); - border-radius: var(--border-radius); - overflow: hidden; - background-color: var(--card-body-bg-color); - - - a, - a:visited, - a:link { - color: var(--card-body-link-color); - text-decoration-color: var(--card-body-link-color); - - p { - color: var(--card-body-text-color); - } - } - - p:last-child { - margin-bottom: 0; - } - - p { - color: var(--card-body-text-color); - } - - &.dwds-card-blue { - --card-body-bg-color: var(--card-bg-blue); - --card-body-heading-color: var(--color-text-highlight); - --card-body-link-color: var(--color-text-highlight); - --card-body-text-color: var(--color-text-highlight); - } - - &.dwds-card-red { - --card-body-bg-color: var(--card-bg-red); - --card-body-heading-color: var(--color-text-highlight); - --card-body-link-color: var(--color-text-highlight); - --card-body-text-color: var(--color-text-highlight); - } - - &.dwds-card-stack-big { - --card-body-stack-space: var(--space) - } - - .card-header { - --header-background-colour: var(--card-bg-blue); - --header-text-colour: var(--card-bg-white); - - padding: var(--s0) var(--s1) var(--s0) var(--s0); - align-items: flex-start; - background: linear-gradient(180deg, rgba(0, 40, 95, 0.00) 53.55%, #00285F 99.65%), url("/assets/images/dwds/card-header-bg-small.webp") center / cover no-repeat, #00285F; - font-weight: var(--font-weight-bold); - color: var(--header-text-colour); - border-radius: var(--border-radius) var(--border-radius) 0 0; - overflow: hidden; - - .card-subtitle { - font-size: var(--text-large); - color: var(--header-text-colour); - } - - h2, - h3 { - color: var(--header-text-colour); - } - } - - .card-main { - flex-grow: 1; - - display: flex; - flex-direction: column; - - > img { - width: 100%; - height: auto; - align-self: stretch; - object-fit: cover; - } - - .card-content { - flex-grow: 1; - - display: flex; - flex-direction: column; - - .card-body-stack { - display: flex; - flex-direction: column; - justify-content: flex-start; - } - - .card-body-stack > * { - margin-block: 0; - } - - .card-body-stack > * + * { - margin-block-start: var(--card-body-stack-space); - } - - .card-body { - flex-grow: 1; - padding: var(--s0); - font-size: var(--text-large); - line-height: var(--font-lineheight-body); - - h2, - h3 { - color: var(--card-body-heading-color); - } - - .post-title-container { - display: flex; - flex-direction: column; - gap: var(--s-5) - } - - .post-title { - margin: 0; - } - } - } - - .card-footer { - padding: 0 var(--s0) var(--s0) var(--s0); - color: var(--color-text-secondary); - - .card-comment-section { - margin-top: var(--card-comment-section-margin-top); - } - - .comment-icon { - vertical-align: text-bottom; - } - } - } - } -} - -.dwds-card.card-without-shadow { - --card-bottom-border-height: 0px; -} - -@container card (width > 60ch) { - .dwds-card.card-with-image { - .card-main { - display: grid; - grid-template-columns: 1fr 2fr; - grid-template-rows: 1fr; - } - - &.image-right { - .card-content { - grid-column: 1; - grid-row: 1; - } - - .card-main > img { - grid-column: 2; - grid-row: 1; - } - } - } -} diff --git a/src/dw_design_system/dwds/elements/information_panel.scss b/src/dw_design_system/dwds/elements/information_panel.scss deleted file mode 100644 index dd9884bb1..000000000 --- a/src/dw_design_system/dwds/elements/information_panel.scss +++ /dev/null @@ -1,23 +0,0 @@ -.dwds-card.dwds-information-panel { - --card-body-heading-color: var(--color-text); - --card-body-bg-color: #EEF2F6; - --card-bottom-border-height: 0px; - padding: var(--s0); - align-self: flex-start; - - p, - div, - a { - margin-bottom: var(--s-5); - margin-top: var(--s-5); - } - - h3 { - margin-top: 0; - margin-bottom: var(--s-5); - } - - h4 { - margin: 0; - } -} \ No newline at end of file diff --git a/src/dw_design_system/dwds/elements/ribbon.js b/src/dw_design_system/dwds/elements/ribbon.js new file mode 100644 index 000000000..d9b1fc6dc --- /dev/null +++ b/src/dw_design_system/dwds/elements/ribbon.js @@ -0,0 +1,13 @@ +function setRibbonMainHeight(ribbonMain) { + var ribbonMainHeight = ribbonMain.getBoundingClientRect().height; + ribbonMain.style.setProperty('--ribbon-main-height', ribbonMainHeight + 'px'); +} + +document.addEventListener('DOMContentLoaded', function () { + document.querySelectorAll('.ribbon-main').forEach(function (ribbonMain) { + setRibbonMainHeight(ribbonMain); + window.addEventListener('resize', function () { + setRibbonMainHeight(ribbonMain); + }); + }); +}); diff --git a/src/dw_design_system/dwds/elements/ribbon.scss b/src/dw_design_system/dwds/elements/ribbon.scss index 56f67d5c0..e0c15438b 100644 --- a/src/dw_design_system/dwds/elements/ribbon.scss +++ b/src/dw_design_system/dwds/elements/ribbon.scss @@ -1,6 +1,7 @@ .dwds-ribbon { --ribbon-background-blue: var(--dbt-blue); --ribbon-background-red: var(--dbt-red); + --ribbon-background: var(--ribbon-background-blue); --ribbon-padding: var(--s-4); --ribbon-padding-right: var(--s-2); --ribbon-left-space: var(--s2); @@ -8,6 +9,8 @@ --ribbon-line-height: var(--font-lineheight-headings); --ribbon-border-radius: var(--border-radius); + --ribbon-main-height: 0px; + display: inline-block; font-size: var(--text-large); font-weight: var(--font-weight-bold); @@ -15,13 +18,24 @@ .ribbon-main { padding: var(--ribbon-padding) var(--ribbon-padding-right) var(--ribbon-padding) var(--ribbon-left-space); margin-left: calc(var(--ribbon-left-space) * -1); - border-radius: var(--ribbon-border-radius); + border-radius: 0 var(--ribbon-border-radius) var(--ribbon-border-radius) 0; color: var(--ribbon-text-colour); - background: var(--ribbon-background-blue); + background: var(--ribbon-background); width: fit-content; } .ribbon-red { - background: var(--ribbon-background-red); + --ribbon-background: var(--ribbon-background-red); + } + + ::before { + content: ''; + position: absolute; + width: var(--ribbon-left-space); + height: var(--ribbon-main-height); + background: var(--ribbon-background); + border-radius: var(--ribbon-border-radius) 0 0 var(--ribbon-border-radius); + margin-top: calc(var(--ribbon-padding) * -1); + transform: translateX(calc(var(--ribbon-left-space) * -1)); } } \ No newline at end of file diff --git a/src/dw_design_system/dwds/layouts/content_custom_sidebar.html b/src/dw_design_system/dwds/layouts/content_custom_sidebar.html new file mode 100644 index 000000000..9bb5c8e06 --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_custom_sidebar.html @@ -0,0 +1,12 @@ +{% load static %} + +
+
+ Colourful circles on a blue background. +
CONTENT CONTENT CONTENT CONTENT CONTENT
+
+
diff --git a/src/dw_design_system/dwds/layouts/content_custom_sidebar.scss b/src/dw_design_system/dwds/layouts/content_custom_sidebar.scss new file mode 100644 index 000000000..38e69d75c --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_custom_sidebar.scss @@ -0,0 +1,49 @@ +.content-custom-sidebar-wrapper { + container-name: custom_sidebar; + container-type: inline-size; +} + +.content-custom-sidebar { + --sidebar-gap: 0; + + display: flex; + flex-direction: column; + + gap: var(--sidebar-gap); + + height: 100%; + + > .content-image { + flex-grow: 1; + flex-basis: 0; + + width: 100%; + height: auto; + } + + > .content-main { + flex-grow: 999; + } +} + +@container custom_sidebar (width > 600px) { + .content-custom-sidebar { + flex-direction: row; + + > .content-image { + width: 30ch; + } + + > .content-main { + > .content-footer { + margin-top: unset; + } + } + } + + .content-custom-sidebar.large { + > .content-image { + flex-basis: 100%; + } + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/layouts/content_grid.html b/src/dw_design_system/dwds/layouts/content_grid.html new file mode 100644 index 000000000..28a9700a0 --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_grid.html @@ -0,0 +1,3 @@ +
+ {% for _ in content_items %}
{% endfor %} +
diff --git a/src/dw_design_system/dwds/layouts/content_grid.scss b/src/dw_design_system/dwds/layouts/content_grid.scss new file mode 100644 index 000000000..54f1f24b0 --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_grid.scss @@ -0,0 +1,59 @@ +.content-grid { + display: grid; + grid-gap: var(--space); +} + +.content-grid.image-left, +.content-grid.image-right { + grid-gap: 0; +} + +@container content_item (width > 60ch) { + + .content-grid.image-left, + .content-grid.image-right { + grid-gap: 0; + grid-template-rows: 1fr; + + > .content-image { + object-fit: cover; + object-position: center; + height: 100%; + width: 100%; + } + } + + .content-grid.image-left { + grid-template-columns: 1fr 2fr; + + > .content-main { + grid-row: 1; + grid-column: 2; + } + + > .content-image { + grid-row: 1; + grid-column: 1; + } + } + + .content-grid.image-right { + grid-template-columns: 2fr 1fr; + + > .content-main { + grid-row: 1; + grid-column: 1; + } + + > .content-image { + grid-row: 1; + grid-column: 2; + } + } +} + +@supports (width: min(250px, 100%)) { + .grid-cards { + grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min-width), 100%), 1fr)); + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/layouts/content_item_card.html b/src/dw_design_system/dwds/layouts/content_item_card.html new file mode 100644 index 000000000..b8a035e75 --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_item_card.html @@ -0,0 +1 @@ +
{% include "dwds/elements/content_item.html" %}
diff --git a/src/dw_design_system/dwds/layouts/content_item_card.scss b/src/dw_design_system/dwds/layouts/content_item_card.scss new file mode 100644 index 000000000..f09f54055 --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_item_card.scss @@ -0,0 +1,17 @@ +.dwds-content-item-card { + --content-item-card-radius: var(--border-radius); + --card-bottom-border-height: 5px; + + display: flex; + box-shadow: 0 var(--card-bottom-border-height) 0 rgba(0, 0, 0, 0.2); + border-radius: var(--content-item-card-radius); + overflow: hidden; + + > div { + flex-grow: 1; + } +} + +.dwds-content-item-card.no-shadow { + --card-bottom-border-height: 0; +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/layouts/content_sidebar.html b/src/dw_design_system/dwds/layouts/content_sidebar.html new file mode 100644 index 000000000..98f1d26bc --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_sidebar.html @@ -0,0 +1,3 @@ +
+ {% for _ in content_items %}
{% endfor %} +
diff --git a/src/dw_design_system/dwds/layouts/content_sidebar.scss b/src/dw_design_system/dwds/layouts/content_sidebar.scss new file mode 100644 index 000000000..e40f3ac4a --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_sidebar.scss @@ -0,0 +1,35 @@ +.content-sidebar, +.content-sidebar-right { + --sidebar-gap: var(--space); + --sidebar-size: 300px; + + display: flex; + flex-wrap: wrap; + gap: var(--sidebar-gap); +} + +.content-sidebar { + > :first-child { + flex-grow: 1; + flex-basis: var(--sidebar-size); + } + + > :last-child { + flex-grow: 999; + flex-basis: 0; + min-inline-size: 40%; + } +} + +.content-sidebar-right { + > :first-child { + flex-grow: 999; + flex-basis: 0; + min-inline-size: 40%; + } + + > :last-child { + flex-grow: 1; + flex-basis: var(--sidebar-size); + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/layouts/content_stack.html b/src/dw_design_system/dwds/layouts/content_stack.html new file mode 100644 index 000000000..dc3ae6c9d --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_stack.html @@ -0,0 +1,3 @@ +
+ {% for _ in content_items %}
{% endfor %} +
diff --git a/src/dw_design_system/dwds/layouts/content_stack.scss b/src/dw_design_system/dwds/layouts/content_stack.scss new file mode 100644 index 000000000..ea8001aea --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_stack.scss @@ -0,0 +1,19 @@ +.content-stack { + --content-stack-gap: var(--s0); + + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.content-stack.large { + --content-stack-gap: var(--space); +} + +.content-stack > * { + margin-block: 0; +} + +.content-stack > * + * { + margin-block-start: var(--content-stack-gap); +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/layouts/content_switcher.html b/src/dw_design_system/dwds/layouts/content_switcher.html new file mode 100644 index 000000000..d29a1248e --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_switcher.html @@ -0,0 +1,3 @@ +
+ {% for _ in content_items %}
{% endfor %} +
diff --git a/src/dw_design_system/dwds/layouts/content_switcher.scss b/src/dw_design_system/dwds/layouts/content_switcher.scss new file mode 100644 index 000000000..0b61ce575 --- /dev/null +++ b/src/dw_design_system/dwds/layouts/content_switcher.scss @@ -0,0 +1,20 @@ +.content-switcher { + --content-switcher-min-width: 36rem; + + display: flex; + flex-wrap: wrap; + gap: var(--space); + + > * { + flex-grow: 1; + flex-basis: calc((var(--content-switcher-min-width) - 100%) * 999); + } +} + +.content-switcher.max-3 { + + > :nth-last-child(n+ 4), + > :nth-last-child(n+ 4) ~ * { + flex-basis: 100%; + } +} \ No newline at end of file diff --git a/src/dw_design_system/dwds/styles/layout-primitives.scss b/src/dw_design_system/dwds/styles/layout-primitives.scss index a15014cb8..e57ce47d6 100644 --- a/src/dw_design_system/dwds/styles/layout-primitives.scss +++ b/src/dw_design_system/dwds/styles/layout-primitives.scss @@ -40,58 +40,6 @@ } - // Sidebar - // https://every-layout.dev/layouts/sidebar/ - .with-sidebar, - .with-sidebar-right { - display: flex; - flex-wrap: wrap; - gap: var(--space); - } - - .with-sidebar > :first-child { - flex-grow: 1; - } - - .with-sidebar > :last-child { - flex-basis: 0; - flex-grow: 999; - min-inline-size: 50%; - } - - .with-sidebar-right > :last-child { - // @TODO temporary - this works for 2-col in the GDS fixed container - flex-basis: 300px; - flex-grow: 1; - } - - - .with-sidebar-right > :first-child { - flex-basis: 0; - flex-grow: 999; - min-inline-size: 50%; - } - - // Switcher - // https://every-layout.dev/layouts/switcher/ - - .switcher { - display: flex; - flex-wrap: wrap; - gap: var(--space); - } - - .switcher > * { - flex-grow: 1; - flex-basis: calc((30rem - 100%) * 999); - } - - .switcher > :nth-last-child(n+ 5), - .switcher > :nth-last-child(n+ 5) ~ * { - flex-basis: 100%; - } - - // Cover // https://every-layout.dev/layouts/cover/ diff --git a/src/dw_design_system/dwds/styles/layout.scss b/src/dw_design_system/dwds/styles/layout.scss index 656411cac..9d6f4d480 100644 --- a/src/dw_design_system/dwds/styles/layout.scss +++ b/src/dw_design_system/dwds/styles/layout.scss @@ -9,43 +9,20 @@ } .dwds { - // Stack - // https://every-layout.dev/layouts/stack/ - - .stack { - display: flex; - flex-direction: column; - justify-content: flex-start; - } - - .stack > * { - margin-block: 0; - } - - .stack > * + * { - margin-block-start: var(--space); - } - - .streamfield-content-stack > * + * { - margin-block-start: var(--s0); - } - - - // Grid - // https://every-layout.dev/layouts/grid/ - - .grid { - display: grid; - grid-gap: var(--space); - } - - @supports (width: min(250px, 100%)) { - .grid-multiple-columns { - grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); + .streamfield-content-stack { + > * + * { + margin-block-start: var(--s0); } - .grid-cards { - grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min-width), 100%), 1fr)); + .ws-streamfield-content__image { + margin-left: 0; + margin-right: 0; + + img { + max-inline-size: 100%; + width: 100%; + height: auto; + } } } } \ No newline at end of file diff --git a/src/dw_design_system/dwds/styles/temporary-base.scss b/src/dw_design_system/dwds/styles/temporary-base.scss index 028a4d700..eafe4410f 100644 --- a/src/dw_design_system/dwds/styles/temporary-base.scss +++ b/src/dw_design_system/dwds/styles/temporary-base.scss @@ -31,9 +31,11 @@ body { header, nav, main, + img, footer, hr, - article { + article, + figure { max-inline-size: none; } @@ -67,7 +69,7 @@ body { a.no-underline { text-decoration: none; } - + a.no-underline:focus, a.no-underline:active, a:focus, @@ -95,6 +97,21 @@ body { border-left: 0; color: var(--color-hr); } + + dl { + dt { + margin-top: var(--s-1); + + &:first-child { + margin-top: 0; + } + } + + dd { + margin-left: 0; + font-weight: var(--font-weight-bold); + } + } } .dwds { diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss index 44ecdfc1b..01822fed4 100644 --- a/src/dw_design_system/dwds/styles/variables.scss +++ b/src/dw_design_system/dwds/styles/variables.scss @@ -67,7 +67,6 @@ --space: var(--s3); --padding-button: 11px 20px 11px; --padding-button-inline: 6px 15px 5px; - --card-comment-section-margin-top: 8px; // Text size --text-small: var(--s-2); @@ -105,7 +104,6 @@ // Card --card-min-width: 15rem; - --card-comment-section-margin-top: 8px; --card-bg-white: white; --card-bg-blue: var(--dbt-blue); --card-bg-red: var(--dbt-red); diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss index 3f3f3d5f2..a9d33d10e 100644 --- a/src/dw_design_system/dwds/stylesheet.scss +++ b/src/dw_design_system/dwds/stylesheet.scss @@ -7,24 +7,37 @@ // @forward "styles/base"; // Use once we migrate everything to the new approach @forward "styles/temporary-base"; // Remove this once we switch to the above base.scss +// New +@forward "utils"; + // Components -@forward "components/banner_card"; -@forward "components/card_group"; -@forward "components/engagement_card"; +@forward "components/box"; +@forward "components/comment_section"; +@forward "components/content_list"; +@forward "components/link_action"; @forward "components/link_list"; @forward "components/link_navigate"; -@forward "components/navigation_card"; -@forward "components/one_up_card"; +@forward "components/one_up"; @forward "components/pagination"; @forward "components/promo"; // Elements @forward "elements/button"; -@forward "elements/extendable/card"; +@forward "elements/content_header"; +@forward "elements/content_image"; +@forward "elements/content_item"; +@forward "elements/content_main"; @forward "elements/icon"; -@forward "elements/information_panel"; @forward "elements/navigational_link"; @forward "elements/ribbon"; +// Layouts +@forward "layouts/content_sidebar"; +@forward "layouts/content_grid"; +@forward "layouts/content_stack"; +@forward "layouts/content_switcher"; +@forward "layouts/content_item_card"; +@forward "layouts/content_custom_sidebar"; + // App specific stylesheets @forward "../../interactions/static/interactions/interactions.scss"; \ No newline at end of file diff --git a/src/dw_design_system/dwds/utils.scss b/src/dw_design_system/dwds/utils.scss new file mode 100644 index 000000000..fbea025df --- /dev/null +++ b/src/dw_design_system/dwds/utils.scss @@ -0,0 +1,31 @@ +.dwds-sr-only { + // Visually hidden but accessible to screen readers + // See: https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss + + position: absolute !important; + + width: 1px !important; + height: 1px !important; + // If margin is set to a negative value it can cause text to be announced in + // the wrong order in VoiceOver for OSX + margin: 0 !important; + padding: 0 !important; + + overflow: hidden !important; + + // `clip` is needed for IE11 support + clip: rect(0 0 0 0) !important; + clip-path: inset(50%) !important; + + border: 0 !important; + + // For long content, line feeds are not interpreted as spaces and small width + // causes content to wrap 1 word per line: + // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe + white-space: nowrap !important; + + // Prevent users from selecting or copying visually-hidden text. This prevents + // a user unintentionally copying more text than they intended and needing to + // manually trim it down again. + user-select: none; +} \ No newline at end of file diff --git a/src/dw_design_system/templates/dw_design_system/components.html b/src/dw_design_system/templates/dw_design_system/dwds_components.html similarity index 89% rename from src/dw_design_system/templates/dw_design_system/components.html rename to src/dw_design_system/templates/dw_design_system/dwds_components.html index c6da1b8b1..6093ef9e8 100644 --- a/src/dw_design_system/templates/dw_design_system/components.html +++ b/src/dw_design_system/templates/dw_design_system/dwds_components.html @@ -1,17 +1,17 @@ {% extends "dwds_content.html" %} {% block title %} - DW Design System components + DW Design System {{ template_type }} {% endblock title %} {% block page_title %}
-

DW Design System components

+

DW Design System {{ template_type }}

{% endblock page_title %} {% block primary_content %} - {% for component in components %} - {% include "dw_design_system/partials/component.html" %} + {% for template in templates %} + {% include "dw_design_system/partials/component.html" with component=template new=template.new %} {% endfor %} {% endblock primary_content %} diff --git a/src/dw_design_system/templates/dw_design_system/layouts.html b/src/dw_design_system/templates/dw_design_system/layouts.html new file mode 100644 index 000000000..b2c067208 --- /dev/null +++ b/src/dw_design_system/templates/dw_design_system/layouts.html @@ -0,0 +1,20 @@ +{% extends "dwds_content.html" %} + +{% block title %} + DW Design System layouts +{% endblock title %} + +{% block page_title %} +
+

DW Design System layouts

+{% endblock page_title %} + +{% block primary_content %} +

Layouts

+ + {% for layout in layouts %} +

{{ layout.name }}

+ {% include layout.template with content_items=layout.content_items %} + {% endfor %} + +{% endblock primary_content %} diff --git a/src/dw_design_system/templates/dw_design_system/partials/component.html b/src/dw_design_system/templates/dw_design_system/partials/component.html index e288148c9..633a5d7fd 100644 --- a/src/dw_design_system/templates/dw_design_system/partials/component.html +++ b/src/dw_design_system/templates/dw_design_system/partials/component.html @@ -13,7 +13,7 @@

{{ component.name }}

Context

diff --git a/src/dw_design_system/templatetags/dw_design_system.py b/src/dw_design_system/templatetags/dw_design_system.py index 5727418b9..db766a5a8 100644 --- a/src/dw_design_system/templatetags/dw_design_system.py +++ b/src/dw_design_system/templatetags/dw_design_system.py @@ -7,5 +7,4 @@ @register.simple_tag(takes_context=True) def render_component(context, template_name, component_context): component_template: template.Template = template.loader.get_template(template_name) - component_context.update(request=context["request"]) return component_template.render(context=component_context) diff --git a/src/dw_design_system/urls.py b/src/dw_design_system/urls.py index 881386426..08ea39f83 100644 --- a/src/dw_design_system/urls.py +++ b/src/dw_design_system/urls.py @@ -1,10 +1,34 @@ -from django.urls import path +from django.http import HttpResponseRedirect +from django.urls import path, reverse from dw_design_system import views urlpatterns = [ path("styles/", views.styles, name="dwds-styles"), - path("", views.components, name="dwds-components"), - path("get/", views.get_component, name="dwds-component-get"), + path("layouts/", views.layouts, name="dwds-layouts"), + path( + "", + lambda request: HttpResponseRedirect(reverse("dwds-components")), + ), + path( + "get//", + views.get_dwds_template, + name="dwds-template-get", + ), + path( + "content/", + views.dwds_templates("content"), + name="dwds-content", + ), + path( + "components/", + views.dwds_templates("components"), + name="dwds-components-new", + ), + path( + "components/content/", + views.dwds_templates("components_content"), + name="dwds-components-content", + ), ] diff --git a/src/dw_design_system/utils.py b/src/dw_design_system/utils.py index 80288d93d..e058f3ca4 100644 --- a/src/dw_design_system/utils.py +++ b/src/dw_design_system/utils.py @@ -2,10 +2,10 @@ from json import JSONDecoder, scanner from django.core.paginator import Page, Paginator +from django.http import HttpRequest from django.utils import timezone from wagtail.images.models import Image -from home.templatetags.cards import pages_to_cards from news.models import NewsPage @@ -15,120 +15,148 @@ RANGE_STR = "Range" -def get_components(): - thumbnail_file = Image.objects.first() +def get_dwds_templates(template_type, request: HttpRequest): + thumbnail_file = Image.objects.last() pages = Paginator(NewsPage.objects.all(), 2).page(1) - return [ - { - "name": "Card", - "template": "dwds/elements/extendable/card.html", - "context": {}, - }, - { - "name": "Banner Card", - "template": "dwds/components/banner_card.html", - "context": { - "alert": False, - "link": "https://www.gov.uk", - "text": "This is a banner card for GOV.UK", + + dwds_templates = { + "content": [ + { + "name": "Content Header", + "template": "dwds/elements/content_header.html", + "context": {}, + }, + { + "name": "Content Image", + "template": "dwds/elements/content_image.html", + "context": { + "content_image": thumbnail_file, + }, + }, + { + "name": "Content Main", + "template": "dwds/elements/content_main.html", + "context": {}, + }, + { + "name": "Content Item", + "template": "dwds/elements/content_item.html", + "context": {}, }, - }, - { - "name": "CTA Card", - "template": "dwds/components/cta_card.html", - "context": { - "link": "https://www.gov.uk", - "title": "This is a CTA card for GOV.UK", - "description": "This is a description for the CTA card", + { + "name": "Content Item Card", + "template": "dwds/layouts/content_item_card.html", + "context": {}, }, - }, - { - "name": "Engagement Card", - "template": "dwds/components/engagement_card.html", - "context": { - "url": "https://www.gov.uk", - "title": "This is an engagement card for GOV.UK", - "excerpt": "This is an excerpt for the engagement card", - "author": "John Doe", - "date": timezone.now(), - "thumbnail": thumbnail_file, + ], + "components": [ + { + "name": "Action Link", + "template": "dwds/components/link_action.html", + "context": { + "link_text": "Action Link", + "link_url": "https://www.gov.uk", + "left": True, + "right": True, + }, }, - }, - { - "name": "Card Group", - "template": "dwds/components/card_group.html", - "context": { - "card_group_title": "Latest DBT news", - "cards": pages_to_cards( - NewsPage.objects.all().annotate_with_comment_count()[:3] - ), - "footer_link": "/news-and-views/", - "footer_link_text": "View all news", - "show_hr": True, + { + "name": "Link navigate", + "template": "dwds/components/link_navigate.html", + "context": { + "previous_url": "https://www.gov.uk", + "previous_text": "Previous", + "next_url": "https://www.gov.uk", + "next_text": "Next", + }, }, - }, - { - "name": "Link List", - "template": "dwds/components/link_list.html", - "context": { - "title": "Link List", - "description": "A list of links", - "list": [ - { - "link": "https://www.gov.uk", - "text": f"Link {i + 1} for GOV.UK", - } - for i in range(10) - ], + { + "name": "Banner", + "template": "dwds/components/banner.html", + "context": { + "alert": False, + "link": "https://www.gov.uk", + "text": ( + "This is a banner for GOV.UK, it can be really long or" + " really short. In this example we have a long banner to" + " show how it looks with a lot of text." + ), + }, }, - }, - { - "name": "Navigation Card", - "template": "dwds/components/navigation_card.html", - "context": { - "url": "https://www.gov.uk", - "title": "Navigation Card", - "summary": "This is a summary for the navigation card", + { + "name": "CTA", + "template": "dwds/components/cta.html", + "context": { + "highlight": True, + "url": "https://www.gov.uk", + "title": "This is a CTA for GOV.UK", + "description": "This is a description for the CTA", + }, }, - }, - { - "name": "One Up Card", - "template": "dwds/components/one_up_card.html", - "context": { - "url": "https://www.gov.uk", - "title": "One Up Card", - "excerpt": "This is an excerpt for the one up card", - "date": timezone.now(), - "thumbnail": thumbnail_file, + { + "name": "Link list", + "template": "dwds/components/link_list.html", + "context": { + "title": "Link List", + "description": "A list of links", + "list": [ + { + "link": "https://www.gov.uk", + "text": f"Link {i + 1} for GOV.UK", + } + for i in range(10) + ], + }, }, - }, - { - "name": "Pagination", - "template": "dwds/components/pagination.html", - "context": {"pages": pages}, - }, - { - "name": "Link navigation", - "template": "dwds/components/link_navigate.html", - "context": { - "previous_url": "https://www.gov.uk", - "previous_text": "Previous", - "next_url": "https://www.gov.uk", - "next_text": "Next", + { + "name": "Engagement", + "template": "dwds/components/engagement.html", + "context": { + "url": "https://www.gov.uk", + "title": "This is engaging content for GOV.UK with a really long title to show what a long title looks like", + "excerpt": "This is an excerpt for the engaging content. This excerpt is longer than it should be for test data.", + "author": "John Doe", + "date": timezone.now(), + "thumbnail": thumbnail_file, + "comment_count": 10, + "created_date": timezone.now(), + "updated_date": timezone.now(), + }, }, - }, - { - "name": "Promo Banner", - "template": "dwds/components/promo.html", - "context": { - "ribbon_text": "One DBT", - "description": "We value your ideas to help make it simpler to work at DBT, make a difference and celebrate innovation.", - "link_text": "Collaborate and connect", - "link_url": "http://localhost:8000/dwds/", - "background_image": thumbnail_file, + { + "name": "One Up", + "template": "dwds/components/one_up.html", + "context": { + "url": "https://www.gov.uk", + "title": "One Up", + "excerpt": "This is an excerpt for the one up content", + "date": timezone.now(), + "thumbnail": thumbnail_file, + "comment_count": 10, + "created_date": timezone.now(), + "updated_date": timezone.now(), + }, }, - }, - ] + { + "name": "Promo Banner", + "template": "dwds/components/promo.html", + "context": { + "ribbon_text": "One DBT", + "description": "We value your ideas to help make it simpler to work at DBT, make a difference and celebrate innovation.", + "link_text": "Collaborate and connect", + "link_url": "http://localhost:8000/dwds/", + "background_image": thumbnail_file, + }, + }, + { + "name": "Pagination", + "template": "dwds/components/pagination.html", + "context": {"pages": pages, "request": request}, + }, + ], + "layouts": [], + } + return dwds_templates[template_type] def to_json(val): @@ -147,9 +175,6 @@ def to_json(val): def parse_str(val): - if " " not in val: - return val - if val.startswith(DATETIME_STR): return datetime.fromisoformat(val.split(" ")[1]) if val.startswith(IMAGE_STR): diff --git a/src/dw_design_system/views.py b/src/dw_design_system/views.py index d8ef71db8..bb1886b5d 100644 --- a/src/dw_design_system/views.py +++ b/src/dw_design_system/views.py @@ -4,7 +4,11 @@ from django.shortcuts import render from dw_design_system.templatetags.dw_design_system import render_component -from dw_design_system.utils import CustomJSONDecoder, get_components, to_json +from dw_design_system.utils import ( + CustomJSONDecoder, + get_dwds_templates, + to_json, +) def styles(request: HttpRequest) -> HttpResponse: @@ -45,44 +49,93 @@ def styles(request: HttpRequest) -> HttpResponse: ) -def components(request: HttpRequest) -> HttpResponse: - components = [] - for component in get_components(): - new_component = component.copy() - new_component["request"] = request - new_component.update( - context_json=json.dumps( - new_component["context"], +def dwds_templates(template_type): + def templates(request: HttpRequest) -> HttpResponse: + templates = [] + for template in get_dwds_templates(template_type, request): + new_template_context = template["context"].copy() + + if "request" in new_template_context: + del new_template_context["request"] + + context_json = json.dumps( + new_template_context, indent=4, default=to_json, ) + template.update(context_json=context_json) + templates.append(template) + + return render( + request, + "dw_design_system/dwds_components.html", + { + "template_type": template_type, + "templates": templates, + }, ) - components.append(new_component) - return render( - request, - "dw_design_system/components.html", - {"components": components}, - ) + return templates -def get_component(request: HttpRequest) -> HttpResponse: - component_template = request.POST.get("template") +def get_dwds_template(request: HttpRequest, template_type) -> HttpResponse: + template_str = request.POST.get("template") new_context_str = request.POST.get("context") new_context = json.loads(new_context_str, cls=CustomJSONDecoder) - component = next( - (c for c in get_components() if c["template"] == component_template), None + template = next( + ( + t + for t in get_dwds_templates(template_type, request) + if t["template"] == template_str + ), + None, ) - if not component: + if not template: return HttpResponse(status=404) - context = component["context"] + context = template["context"] if new_context: context = new_context context["request"] = request + context["template_type"] = template_type return HttpResponse( - render_component(request, component["template"], context), + render_component(request, template["template"], context), + ) + + +def layouts(request: HttpRequest) -> HttpResponse: + layouts = [ + { + "name": "Content stack", + "template": "dwds/layouts/content_stack.html", + "content_items": range(3), + }, + { + "name": "Content sidebar", + "template": "dwds/layouts/content_sidebar.html", + "content_items": range(2), + }, + { + "name": "Content grid", + "template": "dwds/layouts/content_grid.html", + "content_items": range(6), + }, + { + "name": "Content switcher", + "template": "dwds/layouts/content_switcher.html", + "content_items": range(3), + }, + { + "name": "Content custom sidebar", + "template": "dwds/layouts/content_custom_sidebar.html", + }, + ] + + return render( + request, + "dw_design_system/layouts.html", + {"layouts": layouts}, ) diff --git a/src/events/templates/events/event_page.html b/src/events/templates/events/event_page.html index e2b22888c..1a136a763 100644 --- a/src/events/templates/events/event_page.html +++ b/src/events/templates/events/event_page.html @@ -6,76 +6,84 @@ {% endblock main_content_classes %} {% block primary_content %} -
-
- {% image page.preview_image fill-465x265 width=None height=None style="border-radius: var(--border-radius);" %} - {% for block in page.body %} - {% include_block block %} - {% endfor %} +
+
+
+ {% image page.preview_image fill-465x265 width=None height=None style="border-radius: var(--border-radius);" %} + {% for block in page.body %} + {% include_block block %} + {% endfor %} +
-
-
-
-

{{ event_date }}

-

{{ event_time }}

-
- {% if is_in_person or is_hybrid %} -
-

Location

-

{{ page.location|default_if_none:"To be confirmed" }}

-
- {% if page.location and page.room %} -
-

Room

-

- {{ page.room }} - {% if page.room_capacity %}with {{ page.room_capacity }} seats{% endif %} -

+
+
+
+
+
+
+
When
+
+ {{ event_date }} +
+ {{ event_time }} +
+ {% if is_in_person or is_hybrid %} +
Location
+
+ {{ page.location|default_if_none:"To be confirmed" }} +
+ {% if page.location and page.room %} +
Room
+
+ {{ page.room }} + {% if page.room_capacity %}with {{ page.room_capacity }} seats{% endif %} +
+ {% if page.room and page.room_capacity %} +
Capacity
+
+ {{ page.room_capacity }} seats +
+ {% endif %} + {% endif %} + {% endif %} + {% if page.audience %} +
Audience
+
+ {{ page.get_audience_display|default_if_none:"-" }} +
+ {% endif %} +
Event type
+
+ {% if is_online or is_in_person %} + {{ page.get_event_type_display }} + {% else %} + In person or online + {% endif %} +
+
+ {% if not page.is_past_event %} + {% if page.offline_event_url and is_in_person or is_hybrid %} + Register to join + {% endif %} + {% if page.online_event_url and is_online or is_hybrid %} + Watch event online + {% endif %} + {% if page.submit_questions_url %} + Submit a question + {% endif %} + {% elif page.event_recording_url %} + Watch past event + {% endif %}
- {% if page.room and page.room_capacity %} -
-

Capacity

-

{{ page.room_capacity }} seats

-
- {% endif %} - {% endif %} - {% endif %} - {% if page.audience %} -
-

Audience

-

{{ page.get_audience_display|default_if_none:"-" }}

- {% endif %} -
-

Event type

- {% if is_online or is_in_person %} -

{{ page.get_event_type_display }}

- {% else %} -

In person or online

- {% endif %} -
-
- {% if not page.is_past_event %} - {% if page.offline_event_url and is_in_person or is_hybrid %} - Register to join - {% endif %} - {% if page.online_event_url and is_online or is_hybrid %} - Watch event online - {% endif %} - {% if page.submit_questions_url %} - Submit a question - {% endif %} - {% elif page.event_recording_url %} - Watch past event - {% endif %}
diff --git a/src/events/templates/events/includes/listing_header.html b/src/events/templates/events/includes/listing_header.html new file mode 100644 index 000000000..98505f07e --- /dev/null +++ b/src/events/templates/events/includes/listing_header.html @@ -0,0 +1,37 @@ +
+
+
+
+
+
+

{{ page_title }}

+
+ {% include "dwds/components/link_navigate.html" with previous_url=previous_link previous_text="Previous month" next_url=next_link next_text="Next month" %} +
+
+
+
+

Filter events by

+
+
+ + {{ events_filters.form.location }} +
+
+ + {{ events_filters.form.event_type }} +
+
+
+
+ +
+
+
+
+
diff --git a/src/home/templates/home/home_page.html b/src/home/templates/home/home_page.html index c168e3fa4..92bed8b3b 100644 --- a/src/home/templates/home/home_page.html +++ b/src/home/templates/home/home_page.html @@ -25,44 +25,54 @@ {% block primary_content %}
-
+
{% if not is_empty %} {% for pages in pages_by_news_layout %} -
- {% for page in pages %} - {% page_to_card page as card %} - - {% if pages|length == 1 %} - {% include "dwds/components/one_up_card.html" with title=card.title thumbnail=card.thumbnail url=card.url created_date=card.created_date updated_date=card.updated_date comment_count=card.comment_count excerpt=card.excerpt hide_shadow=card.hide_shadow ribbon_text=card.ribbon_text post_title_date=card.post_title_date post_title_time=card.post_title_time %} - {% else %} - {% include card.template with title=card.title thumbnail=card.thumbnail url=card.url created_date=card.created_date updated_date=card.updated_date comment_count=card.comment_count excerpt=card.excerpt hide_shadow=card.hide_shadow ribbon_text=card.ribbon_text post_title_date=card.post_title_date post_title_time=card.post_title_time %} - {% endif %} - {% endfor %} -
+ {% if pages %} +
+ {% for page in pages %} +
+ {% if pages|length == 1 %} + {% page_to_one_up page %} + {% else %} + {% page_to_engagement page %} + {% endif %} +
+ {% endfor %} +
+ {% endif %} {% endfor %} {% endif %} {% if page.promo_enabled %} - {% include 'dwds/components/promo.html' with ribbon_text=page.promo_ribbon_text description=page.promo_description link_url=page.promo_link_url link_text=page.promo_link_text thumbnail=page.promo_image %} +
+ {% include 'dwds/components/promo.html' with ribbon_text=page.promo_ribbon_text description=page.promo_description link_url=page.promo_link_url link_text=page.promo_link_text thumbnail=page.promo_image %} +
{% endif %} {% if news_items %} - {% pages_to_cards news_items True as news_cards %} - {% include "dwds/components/card_group.html" with card_group_title="Latest DBT news" cards=news_cards footer_link="/news-and-views/" footer_link_text="View all news" show_hr=True show_shadow=True %} +
+ {% include "dwds/components/content_list.html" with title="Latest DBT news" content_items=news_items link_url="/news-and-views/" link_text="View all news" %} +
{% endif %} {% if events %} - {% pages_to_cards events True as event_cards %} - {% if FEATURE_FLAGS.event_listing %} - {% include "dwds/components/card_group.html" with card_group_title="Events" card_group_link="/events/" card_group_link_text="View all events" cards=event_cards grid=True blue_bg=True %} - {% else %} - {% include "dwds/components/card_group.html" with card_group_title="Events" cards=event_cards grid=True blue_bg=True %} - {% endif %} +
+ {% if FEATURE_FLAGS.event_listing %} + {% include "dwds/components/content_list.html" with as_card_grid=True highlight=True title="Events" content_items=events link_url="/events/" link_text="View all events" %} + {% else %} + {% include "dwds/components/content_list.html" with as_card_grid=True highlight=True title="Events" content_items=events %} + {% endif %} +
{% endif %} {% if not hide_news %} - {% include "dwds/components/link_list.html" with title="DBT news from GOV.UK" list=govuk_feed %} +
+
+ {% include "dwds/components/link_list.html" with title="DBT news from GOV.UK" list=govuk_feed %} +
+
{% endif %}
@@ -71,17 +81,16 @@ {% block secondary_content %}
-
+
{% if active_site_alert %} - {% include 'dwds/components/banner_card.html' with text=active_site_alert.banner_text link=active_site_alert.banner_link %} + {% include 'dwds/components/banner.html' with text=active_site_alert.banner_text link=active_site_alert.banner_link %} {% endif %} {% include 'interactions/bookmark_card.html' %} {% if quick_links %} - {% include "dwds/components/link_list.html" with title="Quick links" list=quick_links %} +
+ {% include "dwds/components/link_list.html" with title="Quick links" list=quick_links %} +
{% endif %}
- {% comment %}
- {% include "dwds/components/link_list.html" with title="Popular pages" list=whats_popular_items %} -
{% endcomment %}
{% endblock secondary_content %} diff --git a/src/home/templatetags/cards.py b/src/home/templatetags/cards.py index 75ad14138..ddcba69f2 100644 --- a/src/home/templatetags/cards.py +++ b/src/home/templatetags/cards.py @@ -1,4 +1,6 @@ from django import template +from django.template.loader import render_to_string +from django.utils.safestring import SafeString from events.models import EventPage from events.utils import get_event_date, get_event_time @@ -8,40 +10,75 @@ register = template.Library() -@register.simple_tag -def page_to_card(page: NewsPage | EventPage, hide_shadow: bool = False): - card_dict = { +def page_to_display_context(page: NewsPage | EventPage): + context = { "title": page.title, "thumbnail": page.preview_image, "url": page.url, "excerpt": page.excerpt, - "hide_shadow": hide_shadow, - "grid": False, - "blue_bg": False, - "show_hr": False, "ribbon_text": None, - "template": "dwds/components/engagement_card.html", } if hasattr(page, "ribbon_text"): - card_dict["ribbon_text"] = page.ribbon_text + context["ribbon_text"] = page.ribbon_text if issubclass(type(page), NewsPage): - card_dict.update( + context.update( created_date=page.first_published_at, updated_date=page.last_published_at, comment_count=page.comment_count, ) if issubclass(type(page), EventPage): - card_dict.update( + context.update( post_title_date=get_event_date(page), post_title_time=get_event_time(page), ) - return card_dict + return context + + +@register.simple_tag +def page_to_card(page: NewsPage | EventPage, hide_shadow: bool = False): + return { + **page_to_display_context(page), + "template": "dwds/components/engagement_card.html", + } @register.simple_tag def pages_to_cards(pages: list[NewsPage | EventPage], hide_shadow: bool = False): return [page_to_card(page, hide_shadow=hide_shadow) for page in pages] + + +class RenderableComponent: + def __init__(self, template_name: str, context: dict): + self.template_name = template_name + self.context = context + + def render(self, *args, **kwargs) -> SafeString: + return render_to_string(self.template_name, self.context) + + __str__ = render + __html__ = render + + +@register.simple_tag +def page_to_engagement(page: NewsPage | EventPage) -> SafeString: + return RenderableComponent( + "dwds/components/engagement.html", + page_to_display_context(page), + ) + + +@register.simple_tag +def pages_to_engagement(pages: list[NewsPage | EventPage]) -> list[RenderableComponent]: + return [page_to_engagement(page) for page in pages] + + +@register.simple_tag +def page_to_one_up(page: NewsPage | EventPage) -> SafeString: + return RenderableComponent( + "dwds/components/one_up.html", + page_to_display_context(page), + ) diff --git a/src/interactions/templates/interactions/bookmark_card.html b/src/interactions/templates/interactions/bookmark_card.html index 43edcf5b5..91c5d1630 100644 --- a/src/interactions/templates/interactions/bookmark_card.html +++ b/src/interactions/templates/interactions/bookmark_card.html @@ -1,24 +1,17 @@ -{% extends 'dwds/elements/extendable/card.html' %} {% load bookmarks %} -{% block card_header_content %} -

Your bookmarks

-{% endblock card_header_content %} +
+
+
+

Your bookmarks

+
+
+
{% bookmark_list user %}
-{% block card_container_classes %} - dwds-link-list -{% endblock card_container_classes %} - -{% block card_content_image %} -{% endblock card_content_image %} - -{% block card_content_body %} - {% bookmark_list user %} -{% endblock card_content_body %} - -{% block card_footer %} -
-
- View all bookmarks +
+
+ View all bookmarks +
+
-{% endblock card_footer %} +
diff --git a/src/news/templates/news/news_page.html b/src/news/templates/news/news_page.html index e6cf1c01b..b91357acb 100644 --- a/src/news/templates/news/news_page.html +++ b/src/news/templates/news/news_page.html @@ -6,7 +6,7 @@ {% endblock main_content_classes %} {% block primary_content %} -
+
{% image page.preview_image fill-640x360 width=None height=None style="border-radius: var(--border-radius);" %} {% include "includes/attribution.html" with page=page is_news_page=True perm_sec_as_author=self.perm_sec_as_author first_publisher_as_author=True %} {% for block in page.body %} @@ -16,8 +16,8 @@ {% endblock primary_content %} {% block post_primary_content %} -
- {% if self.allow_comments %} + {% if self.allow_comments %} +
{% if page.comment_count > 0 %}

@@ -106,8 +106,8 @@

Leave a comment

return false; } - {% endif %} -
+
+ {% endif %} {{ block.super }} {% endblock post_primary_content %}