From 0ccf64dc8b6a6f29389e5a5d1f5351c2baa4c166 Mon Sep 17 00:00:00 2001 From: Andy Chosak Date: Wed, 23 Nov 2022 08:32:55 -0500 Subject: [PATCH] Add byline support to Text Introductions This commit adds support for bylines to the Text Introduction block in the same way that Item Introduction blocks support them. To avoid duplication, the common byline functionality has been pulled out into a new byline template (although not into a new Wagtail block). All three of the affected templates (byline, item introduction, text introduction) can be previewed using this repository's template debug functionality at these URLs: - http://localhost:8000/admin/template_debug/v1/byline/ - http://localhost:8000/admin/template_debug/v1/item_introduction/ - http://localhost:8000/admin/template_debug/v1/text_introduction/ Like Item Introduction bylines, Text Introduction bylines can have zero or more authors and an optional date. This commit also includes some minor cleanup around the way that item introduction blocks have been manually rendered on various page types. As far as I can tell this special handling is no longer needed, if it ever was. Affected page types and example pages to verify this: - BlogPage: http://localhost:8000/about-us/blog/why-were-modernizing-how-we-collect-credit-card-data/ - DocumentDetailPage: http://localhost:8000/compliance/supervisory-guidance/bulletin-phone-pay-fees/ - EnforcementActionPage: http://localhost:8000/enforcement/actions/capital-one-bank/ - LearnPage: http://localhost:8000/enforcement/information-industry-whistleblowers/privacy-act-statement/ - NewsroomPage: http://localhost:8000/about-us/newsroom/cfpb-issues-guidance-to-address-shoddy-investigation-practices-by-consumer-reporting-companies/ - HMDAHistoricDataPage: http://localhost:8000/data-research/hmda/historic-data/ This commit also adds a few new Python unit tests to validate the intended template rendering. --- cfgov/hmda/jinja2/hmda/hmda-explorer.html | 7 +- cfgov/jinja2/v1/_includes/article.html | 19 ++-- cfgov/jinja2/v1/_includes/atoms/byline.html | 49 +++++++++ .../v1/_includes/macros/category-slug.html | 40 +++----- .../molecules/text-introduction.html | 57 ++++------- .../organisms/item-introduction.html | 99 ++++++++++--------- cfgov/jinja2/v1/document-detail/index.html | 12 +-- cfgov/jinja2/v1/enforcement-action/index.html | 12 +-- cfgov/jinja2/v1/learn-page/index.html | 7 +- .../css/organisms/item-introduction.less | 9 +- cfgov/v1/atomic_elements/organisms.py | 1 - cfgov/v1/jinja2/v1/template_debug.html | 2 +- cfgov/v1/template_debug/__init__.py | 3 + cfgov/v1/template_debug/byline.py | 36 +++++++ cfgov/v1/template_debug/item_introduction.py | 47 +++++++++ cfgov/v1/template_debug/text_introduction.py | 60 +++++++++++ .../organisms/test_item_introductions.py | 31 ++++++ .../tests/atomic_elements/test_molecules.py | 31 ++++-- cfgov/v1/wagtail_hooks.py | 24 +++++ 19 files changed, 379 insertions(+), 167 deletions(-) create mode 100644 cfgov/jinja2/v1/_includes/atoms/byline.html create mode 100644 cfgov/v1/template_debug/byline.py create mode 100644 cfgov/v1/template_debug/item_introduction.py create mode 100644 cfgov/v1/template_debug/text_introduction.py create mode 100644 cfgov/v1/tests/atomic_elements/organisms/test_item_introductions.py diff --git a/cfgov/hmda/jinja2/hmda/hmda-explorer.html b/cfgov/hmda/jinja2/hmda/hmda-explorer.html index b72effce500..56a717c12a7 100644 --- a/cfgov/hmda/jinja2/hmda/hmda-explorer.html +++ b/cfgov/hmda/jinja2/hmda/hmda-explorer.html @@ -3,7 +3,6 @@ {% import 'hmda-explorer-controls.html' as controls with context %} {% import 'hmda-explorer-results.html' as results with context %} {% import 'hmda-explorer-institutions.html' as institutions with context %} -{% import 'organisms/item-introduction.html' as item_introduction with context %} {% import 'templates/render_block.html' as render_block with context %} {% import 'templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %} @@ -13,11 +12,7 @@ {% block content_main %} {% for block in page.header -%} - {% if block.block_type == 'item_introduction' %} - {{ item_introduction.render(block.value) }} - {% else %} - {{ render_block.render(block, loop.index) }} - {% endif %} + {{ render_block.render(block, loop.index) }} {%- endfor %}
diff --git a/cfgov/jinja2/v1/_includes/article.html b/cfgov/jinja2/v1/_includes/article.html index c4d09c75e2b..c21e2210eb6 100644 --- a/cfgov/jinja2/v1/_includes/article.html +++ b/cfgov/jinja2/v1/_includes/article.html @@ -38,21 +38,20 @@
- {% set data = { - 'category': page.categories.all(), + {% with value = { 'heading': page.title, 'date': page.date_published, - 'has_social': True, + 'has_social': true, 'social_options': { 'is_printable': true } } %} + {% for block in page.header -%} + {% if block.block_type == 'article_subheader' %} + {% do value.update( { 'paragraph': block.value } ) %} + {% endif %} + {% endfor %} - {% for block in page.header -%} - {% if block.block_type == 'article_subheader' %} - {% do data.update({'paragraph': block.value}) %} - {% endif %} - {% endfor %} - - {{ item_introduction.render(data) }} + {% include 'organisms/item-introduction.html' with context %} + {% endwith %}
diff --git a/cfgov/jinja2/v1/_includes/atoms/byline.html b/cfgov/jinja2/v1/_includes/atoms/byline.html new file mode 100644 index 00000000000..ca83032029d --- /dev/null +++ b/cfgov/jinja2/v1/_includes/atoms/byline.html @@ -0,0 +1,49 @@ +{# ========================================================================== + + Create a byline when given: + + value.authors: List of author names. + + value.date: Publication date. + +========================================================================== #} + +{%- macro render( value ) %} +{%- if value.authors or value.date -%} +
+ {% if value.authors %} + + {%- for author in value.authors -%} + {% if loop.first %}By {% elif loop.last %} and {% endif -%} + {{ author }} + {%- if loop.length > 2 and loop.index < loop.length %}, {% endif %} + {%- endfor -%} + + {% endif -%} + + {% if value.authors and value.date -%} + – + {%- endif %} + + {%- if value.date %} + + {% import 'macros/time.html' as time %} + {{ time.render( value.date, { 'date': true } ) }} + + {% endif %} +
+{%- endif %} +{%- endmacro %} + + +{%- if value %} + +{% if page and not "authors" in value %} + {% do value.update( + { "authors": page.authors.values_list( "name", flat=True ) } + ) %} +{% endif %} + +{{- render( value ) -}} + +{% endif -%} diff --git a/cfgov/jinja2/v1/_includes/macros/category-slug.html b/cfgov/jinja2/v1/_includes/macros/category-slug.html index b4fa5c24d73..a302f1d67bd 100644 --- a/cfgov/jinja2/v1/_includes/macros/category-slug.html +++ b/cfgov/jinja2/v1/_includes/macros/category-slug.html @@ -9,45 +9,35 @@ Render a category slug when given: - category: A string. + category: A category slug, e.g. "press-release". - href (optional): If present creates a link with - a path to which the category filter applies. - For example, if the slug is used on a blog article - then path should be '/about-us/blog/'. - Remember to leverage vars.path instead of - using the literal string '/about-us/blog/'. - Path is used to create the filtered URL: - {{ href }}?category={{ category }} + href (optional): If present creates a link with + a path to which the category filter applies. + For example, if the slug is used on a blog article + then path should be '/about-us/blog/'. + Path is used to create the filtered URL: + {{ href }}?categories={{ category }} classes (optional): Space separated list of class names. - use_blog_category (optional): Whether to use the blog category filter or not. - Defaults to false. - ========================================================================== #} -{% macro render(category, href, classes='', use_blog_category=false) %} +{% macro render( category, href, classes='' ) %} {% import 'macros/category-icon.html' as category_icon %} {% if href %} - {# TODO: Remove use_blog_category parameter when this element becomes atomic. #} - {% if use_blog_category %} - {% set href = href + '?blog_category=' + category | urlencode | replace('%20', '+') %} - {% else %} - {% set href = href + '?categories=' + category | urlencode | replace('%20', '+') %} - {% endif %} + {% set href = href + '?categories=' + category | urlencode %} {% endif %} - {% call _category_link(href, classes) %} - {% set cat = category_label(category) or category %} - {{ category_icon.render(cat) }} + {% call _category_link( href, classes ) -%} + {% set category_name = category_label( category ) or category %} + {{- category_icon.render( category_name ) }} Category: - {{ cat | safe }} - {% endcall %} + {{ category_name }} + {%- endcall %} {% endmacro %} -{% macro _category_link(href, classes) %} +{% macro _category_link( href, classes ) %} {% if href %} diff --git a/cfgov/jinja2/v1/_includes/molecules/text-introduction.html b/cfgov/jinja2/v1/_includes/molecules/text-introduction.html index e1539f27dd7..e2ced9719d3 100644 --- a/cfgov/jinja2/v1/_includes/molecules/text-introduction.html +++ b/cfgov/jinja2/v1/_includes/molecules/text-introduction.html @@ -4,79 +4,56 @@ ========================================================================= - Description: - Create a Text Introduction molecule. - See [GHE]/flapjack/Modules-V1/wiki/Text-Introduction - value: Object defined from a StreamField block. + https://cfpb.github.io/design-system/patterns/text-introductions value.eyebrow: (Optional) Text to display above heading. value.heading: (Optional) String for heading text. - value.intro: (Optional) String for body introduction text. + value.authors: (Optional) A list of author names to be included + on a byline. + + value.date: (Optional) A date to be included on a byline. - value.intro.source: TODO: add type and description. + value.intro: (Optional) String for body introduction text. value.body: (Optional) String for body text. - value.links: A tuple to create a list of links, containing: + value.links: A list of links, containing: - value.links[i].text: (Optional) A string for the text of the link. + value.links[i].text: A string for the text of the link. value.links[i].url: A string for the URL of the link. value.links[i].aria_label: (Optional) An aria-label for the link. - value.date: (Optional) A date to be included on a byline. - value.has_rule: Whether or not to render a rule line (border-bottom) at the bottom of the molecule. ========================================================================== #} -{% set published_date = value.date %} -{% set has_authors = page.authors.exists() %} -{% if value.eyebrow %} +{% if value.eyebrow -%}
{{ value.eyebrow }}
-{% endif %} -{% if value.heading %} +{%- endif %} + +{% if value.heading -%}

{{ value.heading }}

-{% endif %} +{%- endif %} -{% if published_date or has_authors %} -
-{% endif %} -{% if has_authors %} - - {%- for author in page.get_authors() -%} - {% if loop.first %}By {% elif loop.last %}and {% endif %} - {{ author.name }} - {%- if loop.length > 2 and loop.index < loop.length %}, {% endif %} - {% endfor %} - – - -{% endif %} -{% if published_date %} - - {% import 'macros/time.html' as time %} - {{ time.render(published_date, {'date':true}) }} - -{% endif %} -{% if published_date or has_authors %} -
-{% endif %} +{% include 'atoms/byline.html' with context %} -{% if value.intro.source %} +{% if value.intro -%}
{{ value.intro | safe }}
-{% endif %} +{%- endif %} {% if value.body %} {{ value.body | safe }} {% endif %} + {% for link in value.links %} {% if link.text %} {% if loop.first %}
    {% endif %} diff --git a/cfgov/jinja2/v1/_includes/organisms/item-introduction.html b/cfgov/jinja2/v1/_includes/organisms/item-introduction.html index 8ddfcf4cc44..d9692897a17 100644 --- a/cfgov/jinja2/v1/_includes/organisms/item-introduction.html +++ b/cfgov/jinja2/v1/_includes/organisms/item-introduction.html @@ -4,21 +4,28 @@ ========================================================================== - Description: + Create an Item Introduction organism. - Create an Item Introduction molecule. - See [GHE]/flapjack/Modules-V1/wiki/Item-Introduction + https://cfpb.github.io/design-system/patterns/item-introductions - value: An object with the following options for value. + value.show_category: (Optional) Whether to show category. - value.show_category: Whether to show the category or not. - value.heading: Heading text. - value.paragraph.source: Body introduction text. - value.authors: Array of author names and associated URLs. + value.category: (Optional) Category to show above heading. - value.date: A datetime for the post. - value.has_social: Whether to show the share icons or not. - value.social_options: An object with options for the share icons + value.category_url: (Optional) URL to link category to. + + value.heading: Heading text. + + value.paragraph: (Optional) Subheader paragraph. + + value.authors: (Optional) A list of author names to be included + on a byline. + + value.date: (Optional) A date to be included on a byline. + + value.has_social: Whether to show the share icons or not. + + value.social_options: (Optional) Share icon options. ========================================================================== #} @@ -26,50 +33,44 @@ {% import 'molecules/social-media.html' as social_media with context %} {% import 'macros/category-slug.html' as category_slug %} -{% macro render(value) %} - -{% set filter_page = page.get_filter_data() %} -{% set filter_page_url = pageurl(filter_page) if filter_page else none %} -{% set published_date = value.date %} -{% set has_authors = page.authors.exists() %} -{% set social_options = value.social_options or {} %} - +{%- macro render( value ) %}
    - {% if filter_page_url and page.categories.count() > 0 and value.show_category %} - {{ category_slug.render(category=page.categories.first().name, href=filter_page_url) }} - {% endif %} + {% if value.show_category and value.category -%} + {{ category_slug.render( value.category, href=value.category_url ) }} + {%- endif %} +

    {{ value.heading | safe }}

    - {% if value.paragraph %} + {% if value.paragraph -%}
    {{ value.paragraph | safe }}
    - {% endif %} + {%- endif %} - {% if published_date or has_authors %} -
    - {% endif %} - {% if filter_page_url and has_authors %} - - {%- for author in page.get_authors() -%} - {% if loop.first %}By {% elif loop.last %}and {% endif %} - {{ author.name }} - {%- if loop.length > 2 and loop.index < loop.length %}, {% endif %} - {% endfor %} - – - - {% endif %} - {% if published_date %} - - {% import 'macros/time.html' as time %} - {{ time.render(published_date, {'date':true}) }} - + {% include 'atoms/byline.html' with context %} + + {% if value.has_social -%} + {{ social_media.render( value.social_options or {} ) }} + {%- endif %} +
    +{% endmacro -%} + +{%- if value %} + +{% if page %} + {% if not "category" in value %} + {% set category = page.categories.values_list("name", flat=True).first() %} + {% if category %} + {% do value.update( { "category": category } ) %} + + {% set filter_page = page.get_filter_data() %} + {% if filter_page %} + {% do value.update( + { "category_url": pageurl( filter_page ) } + ) %} + {% endif %} {% endif %} - {% if published_date or has_authors %} -
    {% endif %} +{% endif %} - {% if value.has_social %} - {{ social_media.render(social_options) }} - {% endif %} -
+{{- render( value ) -}} -{% endmacro %} +{% endif -%} diff --git a/cfgov/jinja2/v1/document-detail/index.html b/cfgov/jinja2/v1/document-detail/index.html index 7e93fc32b10..82d5c7e1ed0 100644 --- a/cfgov/jinja2/v1/document-detail/index.html +++ b/cfgov/jinja2/v1/document-detail/index.html @@ -9,15 +9,9 @@ {% block content_main %} {% for block in page.header -%} - {% if block.block_type == 'item_introduction' %} - {% import 'organisms/item-introduction.html' as item_introduction with context %} - {{ item_introduction.render(block.value) }} - {% else %} -
- {{ render_stream_child(block) }} -
- {% endif %} +
+ {{ render_stream_child(block) }} +
{%- endfor %} {% for block in page.content -%} diff --git a/cfgov/jinja2/v1/enforcement-action/index.html b/cfgov/jinja2/v1/enforcement-action/index.html index 6a7c03924f1..2c5c5e438df 100644 --- a/cfgov/jinja2/v1/enforcement-action/index.html +++ b/cfgov/jinja2/v1/enforcement-action/index.html @@ -10,15 +10,9 @@ {% block content_main %} {% for block in page.header -%} - {% if block.block_type == 'item_introduction' %} - {% import 'organisms/item-introduction.html' as item_introduction with context %} - {{ item_introduction.render(block.value) }} - {% else %} -
- {{ render_stream_child(block) }} -
- {% endif %} +
+ {{ render_stream_child(block) }} +
{%- endfor %} {% for block in page.content -%} diff --git a/cfgov/jinja2/v1/learn-page/index.html b/cfgov/jinja2/v1/learn-page/index.html index 7720e7217dd..7a4d3a571b2 100644 --- a/cfgov/jinja2/v1/learn-page/index.html +++ b/cfgov/jinja2/v1/learn-page/index.html @@ -1,6 +1,5 @@ {% extends 'layout-2-1.html' %} -{% import 'organisms/item-introduction.html' as item_introduction with context %} {% import 'templates/render_block.html' as render_block with context %} {% import 'templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %} @@ -10,11 +9,7 @@ {% block content_main %} {% for block in page.header -%} - {% if block.block_type == 'item_introduction' %} - {{ item_introduction.render(block.value) }} - {% else %} - {{ render_block.render(block, loop.index) }} - {% endif %} + {{ render_block.render(block, loop.index) }} {%- endfor %} {% for block in page.content -%} diff --git a/cfgov/unprocessed/css/organisms/item-introduction.less b/cfgov/unprocessed/css/organisms/item-introduction.less index 908615308e5..509952c7a22 100644 --- a/cfgov/unprocessed/css/organisms/item-introduction.less +++ b/cfgov/unprocessed/css/organisms/item-introduction.less @@ -35,18 +35,18 @@ */ .o-item-introduction { - margin-bottom: unit( @grid_gutter-width * 2 / @base-font-size-px, em ); + margin-bottom: unit(@grid_gutter-width * 2 / @base-font-size-px, em); .short-desc { - padding-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em ); + padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em); } .lead-paragraph { margin-top: 0; } - .meta { - margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em ); + .a-byline { + margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em); .byline { .heading-4(); @@ -54,7 +54,6 @@ } } - /* topdoc name: EOF eof: true diff --git a/cfgov/v1/atomic_elements/organisms.py b/cfgov/v1/atomic_elements/organisms.py index 0a6aee41ba7..2cc99fff6d4 100644 --- a/cfgov/v1/atomic_elements/organisms.py +++ b/cfgov/v1/atomic_elements/organisms.py @@ -721,7 +721,6 @@ class ItemIntroduction(blocks.StructBlock): class Meta: icon = "form" template = "_includes/organisms/item-introduction.html" - classname = "block__flush-top" class FilterableList(BaseExpandable): diff --git a/cfgov/v1/jinja2/v1/template_debug.html b/cfgov/v1/jinja2/v1/template_debug.html index b9772b96cda..fafe0d3c851 100644 --- a/cfgov/v1/jinja2/v1/template_debug.html +++ b/cfgov/v1/jinja2/v1/template_debug.html @@ -7,7 +7,7 @@