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.
cfpb · Nov 28, 2022 · 0ccf64d · 0ccf64d
1 parent 340834e
commit 0ccf64d
Show file tree

Hide file tree

Showing 19 changed files with 379 additions and 167 deletions.
diff --git 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 %}
 
     <div class="hmda-historic-data" style="margin-top: -20px">

diff --git a/cfgov/jinja2/v1/_includes/article.html b/cfgov/jinja2/v1/_includes/article.html
@@ -38,21 +38,20 @@
 
 <article class="post">
     <header>
-        {% 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 %}
     </header>
 
     <div class="post_body">

diff --git a/cfgov/jinja2/v1/_includes/atoms/byline.html 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 -%}
+<div class="a-byline">
+    {% if value.authors %}
+    <span class="byline">
+        {%- 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 -%}
+    </span>
+    {% endif -%}
+
+    {% if value.authors and value.date -%}
+    &ndash;
+    {%- endif %}
+
+    {%- if value.date %}
+    <span class="a-date">
+        {% import 'macros/time.html' as time %}
+        {{ time.render( value.date, { 'date': true } ) }}
+    </span>
+    {% endif %}
+</div>
+{%- 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
@@ -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 ) }}
         <span class="u-visually-hidden">Category:</span>
-        {{ cat | safe }}
-    {% endcall %}
+        {{ category_name }}
+    {%- endcall %}
 {% endmacro %}
 
-{% macro _category_link(href, classes) %}
+{% macro _category_link( href, classes ) %}
     {% if href %}
         <a href="{{ href }}"
            class="a-heading a-heading__icon {{ classes }}">

diff --git 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 -%}
     <div class="eyebrow">{{ value.eyebrow }}</div>
-{% endif %}
-{% if value.heading %}
+{%- endif %}
+
+{% if value.heading -%}
     <h1>{{ value.heading }}</h1>
-{% endif %}
+{%- endif %}
 
-{% if published_date or has_authors %}
-<div class="meta">
-{% endif %}
-{% if has_authors %}
-    <span class="byline">
-    {%- 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 %}
-        &ndash;
-    </span>
-{% endif %}
-{% if published_date %}
-    <span class="a-date">
-        {% import 'macros/time.html' as time %}
-        {{ time.render(published_date, {'date':true}) }}
-    </span>
-{% endif %}
-{% if published_date or has_authors %}
-</div>
-{% endif %}
+{% include 'atoms/byline.html' with context %}
 
-{% if value.intro.source %}
+{% if value.intro -%}
     <div class="lead-paragraph">
         {{ value.intro | safe }}
     </div>
-{% endif %}
+{%- endif %}
 
 {% if value.body %}
     {{ value.body | safe }}
 {% endif %}
+
 {% for link in value.links %}
     {% if link.text %}
         {% if loop.first %}<ul class="m-list m-list__links">{% endif %}

diff --git a/cfgov/jinja2/v1/_includes/organisms/item-introduction.html b/cfgov/jinja2/v1/_includes/organisms/item-introduction.html
@@ -4,72 +4,73 @@
 
    ==========================================================================
 
-   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.
 
    ========================================================================== #}
 
 
 {% 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 ) %}
 <div class="o-item-introduction">
-    {% 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 %}
+
     <h1>{{ value.heading | safe }}</h1>
 
-    {% if value.paragraph %}
+    {% if value.paragraph -%}
         <div class="lead-paragraph">{{ value.paragraph | safe }}</div>
-    {% endif %}
+    {%- endif %}
 
-    {% if published_date or has_authors %}
-        <div class="meta">
-    {% endif %}
-        {% if filter_page_url and has_authors %}
-            <span class="byline">
-            {%- 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 %}
-                &ndash;
-            </span>
-        {% endif %}
-        {% if published_date %}
-            <span class="a-date">
-                {% import 'macros/time.html' as time %}
-                {{ time.render(published_date, {'date':true}) }}
-            </span>
+    {% include 'atoms/byline.html' with context %}
+
+    {% if value.has_social -%}
+        {{ social_media.render( value.social_options or {} ) }}
+    {%- endif %}
+</div>
+{% 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 %}
-        </div>
     {% endif %}
+{% endif %}
 
-    {% if value.has_social %}
-        {{ social_media.render(social_options) }}
-    {% endif %}
-</div>
+{{- render( value ) -}}
 
-{% endmacro %}
+{% endif -%}