Merge pull request #8566 from cfpb/ans_update_tags

Update topic tags to use design-system tags
cfpb · Sep 11, 2024 · 9607846 · 9607846
2 parents 1e2e652 + 1ce9826
commit 9607846
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 242 deletions.
diff --git a/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-result-item.html b/cfgov/regulations3k/jinja2/regulations3k/regulations3k-search-result-item.html
@@ -1,4 +1,4 @@
-{%- import 'v1/includes/tags.html' as tags %}
+{%- import 'v1/includes/molecules/tags.html' as tags %}
 {% macro render(result) %}
 
 {%- set reg_name = result.part ~ ' (' ~ result.reg ~ ')' -%}

diff --git a/cfgov/unprocessed/css/main.scss b/cfgov/unprocessed/css/main.scss
@@ -60,7 +60,6 @@
 @use 'molecules/related-metadata' as *;
 @use 'molecules/related-posts' as *;
 @use 'molecules/social-media' as *;
-@use 'molecules/tags' as *;
 
 /* Organism pieces
    ========================================================================== */

diff --git a/cfgov/unprocessed/css/molecules/related-metadata.scss b/cfgov/unprocessed/css/molecules/related-metadata.scss
@@ -74,7 +74,3 @@ $margin-half-em: math.div(15px, $base-font-size-px) + em;
     color: var(--gray);
   }
 }
-
-.m-related-metadata__topics {
-  line-height: 1em;
-}
diff --git a/cfgov/unprocessed/css/molecules/tags.scss b/cfgov/unprocessed/css/molecules/tags.scss
diff --git a/cfgov/v1/jinja2/v1/events/_event-detail.html b/cfgov/v1/jinja2/v1/events/_event-detail.html
@@ -79,7 +79,7 @@ <h1 class="u-visually-hidden">Event viewing details</h1>
     </div>
     {% if page.tags.names() | length %}
     <footer>
-        {%- import 'v1/includes/tags.html' as tags %}
+        {%- import 'v1/includes/molecules/tags.html' as tags %}
         {{ tags.render(page.related_metadata_tags().links) }}
     </footer>
     {% endif %}

diff --git a/cfgov/v1/jinja2/v1/includes/article.html b/cfgov/v1/jinja2/v1/includes/article.html
@@ -25,7 +25,7 @@
    ========================================================================== #}
 
 {%- import 'v1/includes/templates/render_block.html' as render_block with context -%}
-{%- import 'v1/includes/tags.html' as tags -%}
+{%- import 'v1/includes/molecules/tags.html' as tags -%}
 
 {% macro setCTAFlag( blocks ) %}
   {% for block in blocks.value %}

diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata-enforcement-action.html
@@ -139,25 +139,15 @@ <h3 class="h4">
 
    list:              A list of dictionaries containing links.
 
-   is_related_topics: Boolean indicating whether the list is a
-                      Related Topics list. Defaults to false.
-
    ========================================================================== #}
 
-{% macro _list(list, is_related_topics=false) %}
-<ul class="m-list
-           m-list--unstyled
-           m-list--links
-           m-related-metadata__topics">
+{% macro _list(list) %}
+    {% set tags_list = [] %}
     {% for item in list %}
-    <li class="m-list__item">
-        <span class="a-link a-link--jump a-link--jump-gold">
-          •
-          <span class="a-link__text">{{item}}</span>
-        </span>
-    </li>
+      {% do tags_list.append({'text': item}) %}
     {% endfor %}
-</ul>
+    {% import "v1/includes/molecules/tags.html" as tags with context %}
+    {{ tags.render(tags_list, false, true) }}
 {% endmacro %}
 
 {# ==========================================================================

diff --git a/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html b/cfgov/v1/jinja2/v1/includes/molecules/related-metadata.html
@@ -73,36 +73,34 @@ <h3 class="h4">
 
    Creates related metadata list markup when given:
 
-   list:              A list of dictionaries containing links.
-
-   is_related_topics: Boolean indicating whether the list is a
-                      Related Topics list. Defaults to false.
+   list: A list of dictionaries containing links.
 
    ========================================================================== #}
 
-{% macro _list(list, is_related_topics=false) %}
-<ul class="m-list
-           m-list--unstyled
-           m-list--links
-           {{ 'm-related-metadata__topics' if is_related_topics else '' }} ">
-    {% for link in list.links %}
-    <li class="m-list__item">
-        {% if link.url %}
-            <a href="{{ link.url }}" class="a-link a-link--jump a-link--jump-gold">
-                •
-                <span class="a-link__text">{{ link.text }}</span>
-            </a>
-        {% else %}
-            <span class="a-link a-link--jump a-link--jump-gold">
-                •
-                <span class="a-link__text">{{ link.text }}</span>
-            </span>
-        {% endif %}
-    </li>
-    {% endfor %}
-</ul>
+{% macro _list(list) %}
+    {% import "v1/includes/molecules/tags.html" as tags with context %}
+    {{ tags.render(list.links, false, true) }}
 {% endmacro %}
 
+{# ==========================================================================
+
+    _topics()
+
+    ==========================================================================
+
+    Description:
+
+    Creates related metadata related topics markup
+
+    list: An object holding the tag information.
+
+    ========================================================================== #}
+
+ {% macro _topics(list) %}
+    {% import "v1/includes/molecules/tags.html" as tags with context %}
+    {{ tags.render(page.related_metadata_tags().links, false, true) }}
+ {% endmacro %}
+
 {# ==========================================================================
 
    _date()
@@ -141,21 +139,3 @@ <h3 class="h4">
 {% macro _text(text) %}
     {{ text.blob | safe }}
 {% endmacro %}
-
-{# ==========================================================================
-
-   _topics()
-
-   ==========================================================================
-
-   Description:
-
-   Creates related metadata related topics markup
-
-   list: An object holding the tag information.
-
-   ========================================================================== #}
-
-{% macro _topics(list) %}
-    {{ _list( page.related_metadata_tags(), true ) }}
-{% endmacro %}
diff --git a/cfgov/v1/jinja2/v1/includes/tags.html → ...v1/jinja2/v1/includes/molecules/tags.html b/cfgov/v1/jinja2/v1/includes/tags.html → ...v1/jinja2/v1/includes/molecules/tags.html
@@ -20,23 +20,23 @@
 
    ========================================================================== #}
 
-{% macro render(tags, show_heading=true) %}
-<div class="m-tags">
+{% macro render(tags, show_heading=true, stack_tags=false) %}
+<div>
     {% if show_heading %}
-    <span class="m-tags__heading">
-        Topics:
-    </span>
+    <h4>
+        Topics
+    </h4>
     {% endif %}
-    <ul class="m-tags__list" aria-label="Topics">
+    <ul class="m-tag-group{{ ' m-tag-group--stacked' if stack_tags else '' }}" aria-label="Topics">
         {% for tag in tags %}
-        <li class="m-tags__item">
+        <li>
             {% if tag.url %}
-            <a href="{{ tag.url }}" class="m-tags__tag">
+            <a href="{{ tag.url }}" class="a-tag-topic">
             {% else %}
-            <span class="m-tags__tag">
+            <span class="a-tag-topic">
             {% endif %}
-                <span class="m-tags__bullet" aria-hidden="true">&bull;</span>
-                {{ tag.text }}
+                <span class="a-tag-topic__bullet" aria-hidden="true">•</span>
+                <span class="a-tag-topic__text">{{ tag.text }}</span>
             {% if tag.url %}
             </a>
             {% else %}

diff --git a/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html b/cfgov/v1/jinja2/v1/includes/organisms/post-preview.html
@@ -120,7 +120,7 @@ <h3 class="o-post-preview__title">
         {% endif %}
 
         {%- if show_tags and post.tags %}
-        {%- import 'v1/includes/tags.html' as tags_tmpl %}
+        {%- import 'v1/includes/molecules/tags.html' as tags_tmpl %}
         {{ tags_tmpl.render(post.tags, show_heading=false) }}
         {% endif -%}
     </div>

diff --git a/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js b/test/cypress/integration/components/filterable-lists/filterable-list-control-helpers.cy.js
@@ -33,7 +33,7 @@ export class FilterableListControl {
 
   getResultCategoryHasTags() {
     return this.getResults()
-      .find('.m-tags__tag')
+      .find('.a-tag-topic')
       .closest('.o-post-preview')
       .find('.m-meta-header__item:first');
   }
@@ -42,16 +42,16 @@ export class FilterableListControl {
     return this.getResults()
       .find('.m-meta-header__item:first')
       .closest('.o-post-preview')
-      .find('.m-tags__tag:first');
+      .find('.a-tag-topic:first');
   }
 
   getResultTag() {
-    return this.getResults().find('.m-tags__tag:first');
+    return this.getResults().find('.a-tag-topic:first');
   }
 
   getResultTitleHasTag() {
     return this.getResults()
-      .find('.m-tags__tag:first')
+      .find('.a-tag-topic:first')
       .closest('.o-post-preview')
       .find('.o-post-preview__title:first');
   }