Merge pull request #8480 from cfpb/feature/item-intro-refresh

Simplify usage of ItemIntroduction

cfgov/hmda/jinja2/hmda/hmda-explorer.html

@@ -3,17 +3,12 @@
 {% 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 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
 {% 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 block">

cfgov/v1/jinja2/v1/document-detail/index.html

@@ -6,8 +6,7 @@
 {% block content_main %}
     {% for block in page.header -%}
         {% if block.block_type == 'item_introduction' %}
-            {% import 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
-            {{ item_introduction.render(block.value) }}
+            {% include_block block %}
         {% else %}
             <div class="block
                         block--flush-top">

cfgov/v1/jinja2/v1/enforcement-action/index.html

@@ -6,15 +6,9 @@
 
 {% block content_main %}
     {% for block in page.header -%}
-        {% if block.block_type == 'item_introduction' %}
-            {% import 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
-            {{ item_introduction.render(block.value) }}
-        {% else %}
-            <div class="block
-                        block--flush-top">
-                {% include_block block %}
-            </div>
-        {% endif %}
+        <div class="block block--flush-top">
+            {% include_block block %}
+        </div>
     {%- endfor %}
 
     {% for block in page.content -%}

cfgov/v1/jinja2/v1/includes/article.html

@@ -24,7 +24,6 @@
 
    ========================================================================== #}
 
-{% import 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
 {%- import 'v1/includes/templates/render_block.html' as render_block with context -%}
 {%- import 'v1/includes/tags.html' as tags -%}
 
@@ -38,8 +37,7 @@
 
 <article>
     <header>
-        {% set data = {
-            'category': page.categories.all(),
+        {% set item_intro_data = {
             'heading': page.title,
             'date': page.date_published,
             'has_social': True,
@@ -48,11 +46,13 @@
 
         {% for block in page.header -%}
             {% if block.block_type == 'article_subheader' %}
-                {% do data.update({'paragraph': block.value}) %}
+                {% do item_intro_data.update({'paragraph': block.value}) %}
             {% endif %}
         {% endfor %}
 
-        {{ item_introduction.render(data) }}
+        {% with value = item_intro_data -%}
+            {% include 'v1/includes/organisms/item-introduction.html' %}
+        {%- endwith %}
     </header>
 
     <div>

cfgov/v1/jinja2/v1/includes/organisms/item-introduction.html

@@ -4,42 +4,42 @@
 
    ==========================================================================
 
-   Description:
-
    Create an Item Introduction molecule.
    See https://cfpb.github.io/design-system/patterns/item-introductions.
 
-   value:                   An object with the following options for value.
+   value:                   An object with the following options:
 
    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
 
    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
 
-   ========================================================================== #}
+   page:                   The CFGOVPage object being rendered.
 
+   ========================================================================== #}
 
-{% import 'v1/includes/molecules/social-media.html' as social_media with context %}
-{% import 'v1/includes/macros/category-slug.html' as category_slug %}
 
-{% macro render(value) %}
+{%- import 'v1/includes/molecules/social-media.html' as social_media with context -%}
+{%- import 'v1/includes/macros/category-slug.html' as category_slug -%}
 
-{% 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 {} %}
+{%- set filter_page = page.get_filter_data() %}
+{%- set filter_page_url = pageurl(filter_page) if filter_page else none %}
+{%- set authors = page.get_authors() -%}
 
 <div class="o-item-introduction">
-    {% if filter_page_url and page.categories.count() > 0 and value.show_category %}
+    {% if value.show_category and filter_page_url -%}
+        {% set first_category = page.categories.first() -%}
+        {% if first_category -%}
         <div class="o-item-introduction__intro">
-            {{ category_slug.render(category=page.categories.first().name, href=filter_page_url) }}
+            {{ category_slug.render(
+                category=first_category.name,
+                href=filter_page_url
+            ) }}
         </div>
-    {% endif %}
+        {%- endif %}
+    {%- endif %}
 
     {% if value.heading -%}
         <h1>{{ value.heading | safe }}</h1>
@@ -52,32 +52,30 @@ <h1>{{ value.heading | safe }}</h1>
         <div class="lead-paragraph">{{ value.paragraph | safe }}</div>
     {% endif %}
 
-    {% if published_date or has_authors %}
+    {% if value.date or authors %}
         <div class="meta">
     {% endif %}
-        {% if filter_page_url and has_authors %}
+        {% if filter_page_url and authors %}
             <span class="byline">
-            {%- for author in page.get_authors() -%}
+            {%- for author in authors -%}
                 {% if loop.first %}By {% elif loop.last %}and {% endif %}
                 {{ author }}
                 {%- if loop.length > 2 and loop.index < loop.length %}, {% endif %}
             {% endfor %}
-                &ndash;
             </span>
+            {% if value.date %}&ndash;{% endif %}
         {% endif %}
-        {% if published_date %}
+        {% if value.date %}
             <span class="a-date">
                 {% import 'v1/includes/macros/time.html' as time %}
-                {{ time.render(published_date, {'date':true}) }}
+                {{ time.render(value.date, {'date':true}) }}
             </span>
         {% endif %}
-    {% if published_date or has_authors %}
+    {% if value.date or authors %}
         </div>
     {% endif %}
 
     {% if value.has_social %}
-        {{ social_media.render(social_options) }}
+        {{ social_media.render(value.social_options or {}) }}
     {% endif %}
 </div>
-
-{% endmacro %}

cfgov/v1/jinja2/v1/learn-page/index.html

@@ -1,16 +1,11 @@
 {% extends 'v1/layouts/layout-2-1.html' %}
 
-{% import 'v1/includes/organisms/item-introduction.html' as item_introduction with context %}
 {% import 'v1/includes/templates/render_block.html' as render_block with context %}
 {% import 'v1/includes/templates/streamfield-sidefoot.html' as streamfield_sidefoot with context %}
 
 {% 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 -%}

cfgov/v1/tests/atomic_elements/organisms/test_organisms.py

@@ -1,3 +1,5 @@
+from datetime import date
+
 from django.core.exceptions import ValidationError
 from django.core.files import File
 from django.core.files.base import ContentFile
@@ -9,16 +11,21 @@
 
 from wagtailmedia.models import Media
 
+from core.templatetags.svg_icon import svg_icon
+from core.testutils.test_cases import WagtailPageTreeTestCase
 from scripts import _atomic_helpers as atomic
 from v1.atomic_elements.organisms import (
     AudioPlayer,
     FeaturedContent,
     InfoUnitGroup,
+    ItemIntroduction,
     VideoPlayer,
 )
 from v1.models import (
+    BrowseFilterablePage,
     BrowsePage,
     CFGOVImage,
+    CFGOVPageCategory,
     Contact,
     LandingPage,
     LearnPage,
@@ -399,6 +406,66 @@ def test_2575_with_some_images_fails(self):
             self.block.clean(value)
 
 
+class ItemIntroductionTests(WagtailPageTreeTestCase):
+    @classmethod
+    def get_page_tree(cls):
+        return [
+            (
+                BrowseFilterablePage(title="landing"),
+                [LearnPage(title="intro")],
+            )
+        ]
+
+    def test_render(self):
+        # Related objects need to be added after page tree creation.
+        self.page_tree[1].authors.add("CFPB")
+        self.page_tree[1].categories.add(CFGOVPageCategory(name="at-the-cfpb"))
+
+        block = ItemIntroduction()
+        value = block.to_python(
+            {
+                "heading": "An item introduction",
+                "date": date(2024, 1, 1),
+                "show_category": True,
+            }
+        )
+
+        html = block.render(
+            value,
+            context={
+                "page": self.page_tree[1],
+                "request": RequestFactory().get("/intro/"),
+            },
+        )
+
+        self.assertHTMLEqual(
+            html,
+            f"""
+<div class="o-item-introduction">
+    <div class="o-item-introduction__intro">
+        <a class="h4" href="/landing/?categories=at-the-cfpb">
+            { svg_icon("bullhorn") }
+            <span class="u-visually-hidden">
+                Category:
+            </span>
+            At the CFPB
+        </a>
+    </div>
+    <h1>An item introduction</h1>
+    <div class="meta">
+        <span class="byline">By CFPB</span>
+        &ndash;
+        <span class="a-date">
+            <span class="datetime">
+                <time datetime="2024-01-01T00:00:00">JAN 01, 2024</time>
+            </span>
+        </span>
+    </div>
+</div>
+""",
+        )
+
+
 class VideoPlayerTests(SimpleTestCase):
     def test_video_id_required_by_default(self):
         block = VideoPlayer()