Add byline support to Text Introductions

cfgov/form_explainer/migrations/0006_text_intro_byline.py

@@ -0,0 +1,22 @@
+# Generated by Django 3.2.15 on 2022-11-16 16:06
+
+from django.db import migrations
+
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('form_explainer', '0005_add_explainer_heading'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='formexplainerpage',
+            name='header',
+            field=wagtail.core.fields.StreamField([('hero', wagtail.core.blocks.StructBlock([('heading', wagtail.core.blocks.CharBlock(help_text='For complete guidelines on creating heroes, visit our <a href="https://cfpb.github.io/design-system/components/heroes">Design System</a>. Character counts (including spaces) at largest breakpoint:<ul class="help">    <li>&bull; 41 characters max (one-line heading)</li>    <li>&bull; 82 characters max (two-line heading)</li></ul>', required=False)), ('body', wagtail.core.blocks.RichTextBlock(help_text='Character counts (including spaces) at largest breakpoint:<ul class="help">    <li>&bull; 165-186 characters (after a one-line heading)</li>    <li>&bull; 108-124 characters (after a two-line heading)</li></ul>', label='Sub-heading', required=False)), ('image', wagtail.images.blocks.ImageChooserBlock(help_text='When saving illustrations, use a transparent background. <a href="https://cfpb.github.io/design-system/components/heroes#style">See image dimension guidelines.</a>', label='Large image', required=False)), ('small_image', wagtail.images.blocks.ImageChooserBlock(help_text='<b>Optional.</b> Provides an alternate image for small displays when using a photo or bleeding hero. Not required for the standard illustration. <a href="https://cfpb.github.io/design-system/components/heroes#style">See image dimension guidelines.</a>', required=False)), ('background_color', wagtail.core.blocks.CharBlock(help_text='Specify a hex value (including the # sign) from our <a href="https://cfpb.github.io/design-system/foundation/color">official color palette</a>.', required=False)), ('is_white_text', wagtail.core.blocks.BooleanBlock(help_text='<b>Optional.</b> Turns the hero text white. Useful if using a dark background color or background image.', label='White text', required=False)), ('is_overlay', wagtail.core.blocks.BooleanBlock(help_text='<b>Optional.</b> Uses the large image as a background under the entire hero, creating the "Photo" style of hero (see <a href="https://cfpb.github.io/design-system/components/heroes">Design System</a> for details). When using this option, make sure to specify a background color (above) for the left/right margins that appear when screens are wider than 1200px and for the text section when the photo and text stack at mobile sizes.', label='Photo', required=False)), ('is_bleeding', wagtail.core.blocks.BooleanBlock(help_text='<b>Optional.</b> Select if you want the illustration to bleed vertically off the top and bottom of the hero space.', label='Bleed', required=False))])), ('text_introduction', wagtail.core.blocks.StructBlock([('eyebrow', wagtail.core.blocks.CharBlock(help_text='Optional: Adds an H5 eyebrow above H1 heading text. Only use in conjunction with heading.', label='Pre-heading', required=False)), ('heading', wagtail.core.blocks.CharBlock(required=False)), ('intro', wagtail.core.blocks.RichTextBlock(required=False)), ('body', wagtail.core.blocks.RichTextBlock(required=False)), ('links', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('text', wagtail.core.blocks.CharBlock(required=False)), ('aria_label', wagtail.core.blocks.CharBlock(help_text='Add an ARIA label if the link text does not describe the destination of the link (e.g. has ambiguous text like "Learn more" that is not descriptive on its own).', required=False)), ('url', wagtail.core.blocks.CharBlock(default='/', required=False))]), required=False)), ('has_rule', wagtail.core.blocks.BooleanBlock(help_text='Check this to add a horizontal rule line to bottom of text introduction.', label='Has bottom rule', required=False)), ('date', wagtail.core.blocks.DateBlock(help_text='IMPORTANT: Only include if this page should have a byline.', label='Published Date (BYLINE ONLY)', required=False))]))], blank=True),
+        ),
+    ]

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">

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">

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 -%}

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 }}">

cfgov/jinja2/v1/_includes/molecules/text-introduction.html

@@ -4,26 +4,26 @@
 
    =========================================================================
 
-   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.
 
@@ -33,21 +33,27 @@
                               (border-bottom) at the bottom of the molecule.
 
    ========================================================================== #}
-{% 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 %}
+
+{% 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 %}

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 -%}

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 %}
-            <div class="block
-                        block__flush-top">
-                {{ render_stream_child(block) }}
-            </div>
-        {% endif %}
+        <div class="block block__flush-top">
+            {{ render_stream_child(block) }}
+        </div>
     {%- endfor %}
 
     {% for block in page.content -%}