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