Merge pull request #8274 from cfpb/ans_update_bem

Migrate custom BEM to getBEM syntax
cfpb · Apr 25, 2024 · 3d1f41e · 3d1f41e
2 parents 230d3bf + d9351cc
commit 3d1f41e
Show file tree

Hide file tree

Showing 482 changed files with 7,906 additions and 7,782 deletions.
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
@@ -26,9 +26,6 @@ rule-empty-line-before -
 selector-id-pattern -
   Turned off.
   TODO: Turn on this rule and work out regex for BEM syntax.
-selector-class-pattern -
-  Turned off.
-  TODO: Turn on this rule and work out regex for BEM syntax.
 less/color-no-invalid-hex
 less/no-duplicate-variables
   Both of the above settings are turned off till
@@ -58,7 +55,10 @@ module.exports = {
       },
     ],
     'selector-id-pattern': null,
-    'selector-class-pattern': null,
+    'selector-class-pattern': [
+      '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$',
+      { resolveNestedSelectors: true },
+    ],
     'less/color-no-invalid-hex': null,
     'less/no-duplicate-variables': null,
   },

diff --git a/cfgov/agreements/jinja2/agreements/_database_disclaimer.html b/cfgov/agreements/jinja2/agreements/_database_disclaimer.html
@@ -1,6 +1,6 @@
 {% import "v1/includes/molecules/social-media.html" as social_media with context %}
 
-<div class="block block__padded-top block__border-top">
+<div class="block block--padded-top block--border-top">
     <h2 id="find-issuer">
         Can't find an issuer?
     </h2>

diff --git a/cfgov/agreements/jinja2/agreements/_need_help.html b/cfgov/agreements/jinja2/agreements/_need_help.html
@@ -1,6 +1,6 @@
 <div class="m-related-links">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             Need help with your credit cards?
         </h2>
     </header>

diff --git a/cfgov/agreements/jinja2/agreements/archive.html b/cfgov/agreements/jinja2/agreements/archive.html
@@ -11,17 +11,17 @@
 ] %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Credit card agreement archive</h1>
         {% if agreements | length == 0 %}
             We encountered an error fetching the credit card agreement archive. Please try again.
         {% endif %}
-        <ul class="m-list m-list__links u-mt15 cc-links">
+        <ul class="m-list m-list--links u-mt15 cc-links">
             {% for agreement in agreements %}
                 {% set year = agreement[-11:-7] %}
                 {% set quarter = agreement[-6:-4] %}
                 {% set name = quarter + "-" + year %}
-                <li class="m-list m-list__links">
+                <li class="m-list m-list--links">
                     <a href="https://files.consumerfinance.gov/{{agreement}}">
                     {% if loop.index == 1 %}
                         <span style="font-size: 22px; line-height:3">Download all most recent agreements ({{name}})</span>
@@ -51,7 +51,7 @@ <h1>Credit card agreement archive</h1>
 {% endblock %}
 
 {% block content_sidebar scoped  %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         {% include '_need_help.html' %}
     </div>
 {% endblock %}
diff --git a/cfgov/agreements/jinja2/agreements/index.html b/cfgov/agreements/jinja2/agreements/index.html
@@ -10,7 +10,7 @@
 ] %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Credit card agreement database</h1>
 
         <div class="lead-paragraph">
@@ -46,7 +46,7 @@ <h2 id="issuer-select">
             for agreement submission instructions.
         </p>
 
-        <h3 class="block__sub"><a style="border-bottom-width:1px" href="./archive/">View the credit card agreement archive</a></h3>
+        <h3 class="block--sub"><a style="border-bottom-width:1px" href="./archive/">View the credit card agreement archive</a></h3>
 
         <h3>Looking for your own credit card agreement?</h3>
         <p>
@@ -80,7 +80,7 @@ <h3>College credit card agreements</h3>
 {% endblock %}
 
 {% block content_sidebar scoped  %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         {% include '_need_help.html' %}
     </div>
 {% endblock %}
diff --git a/cfgov/agreements/jinja2/agreements/search.html b/cfgov/agreements/jinja2/agreements/search.html
@@ -11,13 +11,13 @@
 {%- endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <h1>Credit card agreement database</h1>
     </div>
     <div class="block">
         <div id="ccagrsearch">
             <h2>Agreements by '{{ issuer.name }}'</h2>
-            <table class="o-table o-table__striped o-table__stack-on-small u-w100pct">
+            <table class="o-table o-table--striped o-table--stack-on-small u-w100pct">
                 <thead>
                     <tr>
                         <th>Issuer</th>
@@ -54,41 +54,41 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                     aria-label="Pagination">
 
                 {% if page.has_previous() %}
-                <a class="a-btn m-pagination_btn-prev"
+                <a class="a-btn m-pagination__btn-prev"
                     href="?page={{ page.previous_page_number() }}#ccagrsearch">
-                    <span class="a-btn_icon a-btn_icon__on-left">{{ svg_icon('left') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
                     Previous
                 </a>
                 {% else %}
-                <a class="a-btn m-pagination_btn-prev" disabled>
-                    <span class="a-btn_icon a-btn_icon__on-left">{{ svg_icon('left') }}</span>
+                <a class="a-btn m-pagination__btn-prev" disabled>
+                    <span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
                     Previous
                 </a>
                 {% endif %}
 
                 {% if page.has_next() %}
-                <a class="a-btn m-pagination_btn-next"
+                <a class="a-btn m-pagination__btn-next"
                     href="?page={{ page.next_page_number() }}#ccagrsearch">
                     Next
-                    <span class="a-btn_icon a-btn_icon__on-right">{{ svg_icon('right') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
                 </a>
                 {% else %}
-                <a class="a-btn m-pagination_btn-next" disabled>
+                <a class="a-btn m-pagination__btn-next" disabled>
                     Next
-                    <span class="a-btn_icon a-btn_icon__on-right">{{ svg_icon('right') }}</span>
+                    <span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
                 </a>
                 {% endif %}
 
-                <form class="m-pagination_form"
+                <form class="m-pagination__form"
                         action="#ccagrsearch">
-                    <label class="m-pagination_label"
-                            for="m-pagination_current-page">
+                    <label class="m-pagination__label"
+                            for="m-pagination__current-page">
                         Page
                         <span class="u-visually-hidden">
                             number {{ page.number }} out
                         </span>
-                        <input class="m-pagination_current-page"
-                                id="m-pagination_current-page"
+                        <input class="m-pagination__current-page"
+                                id="m-pagination__current-page"
                                 name="page"
                                 type="number"
                                 min="1"
@@ -99,9 +99,9 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                         of {{ page.paginator.num_pages }}
                     </label>
                     <button class="a-btn
-                                    a-btn__link
-                                    m-pagination_btn-submit"
-                            id="m-pagination_btn-submit"
+                                    a-btn--link
+                                    m-pagination__btn-submit"
+                            id="m-pagination__btn-submit"
                             type="submit">Go</button>
                 </form>
             </nav>
@@ -115,10 +115,10 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
 {% endblock %}
 
 {% block content_sidebar scoped  %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
         <div class="m-related-links">
             <header class="m-slug-header">
-                <h2 id="issuer-select" class="m-slug-header_heading">
+                <h2 id="issuer-select" class="m-slug-header__heading">
                     Search again
                 </h2>
             </header>

diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/_disclaimer.html
@@ -1,6 +1,6 @@
 <div class="block">
     <header class="m-slug-header">
-        <h2 class="m-slug-header_heading">
+        <h2 class="m-slug-header__heading">
             {{ disclaimer.sidefoot_heading }}
         </h2>
     </header>

diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html
@@ -17,13 +17,13 @@
 {%- endblock css %}
 
 {% block content_modifiers -%}
-    {{ super() }} ask-cfpb-page ask-cfpb-page__answer
+    {{ super() }} ask-cfpb-page ask-cfpb-page--answer
 {%- endblock %}
 
 {% block content_main %}
     <div class="block
-                block__flush-top
-                block__sub">
+                block--flush-top
+                block--sub">
         {% if last_edited %}
             <time datetime='{{ last_edited }}' class="answer-edited-date">{{ _('last reviewed') }}: {{ dt.format_date(last_edited) }}</time>
         {% endif %}
@@ -35,7 +35,7 @@ <h1>
         {{ translation_links.render() }}
     </div>
     <div class="block
-                block__flush-top">
+                block--flush-top">
 
         {% if page.short_answer %}
             <div class="lead-paragraph">
@@ -44,19 +44,19 @@ <h1>
         {% endif %}
 
         {% if page.notification %}
-            <div class="block block__sub">
+            <div class="block block--sub">
                 {{ page.notification }}
             </div>
         {% endif %}
 
-        <div class="block block__sub">
+        <div class="block block--sub">
 
-            <div class="o-summary o-summary__mobile">
-                <div class="o-summary_content answer-text">
+            <div class="o-summary o-summary--mobile">
+                <div class="o-summary__content answer-text">
                     {% include_block page.answer_content %}
                 </div>
 
-                <button class="o-summary_btn u-hidden">
+                <button class="o-summary__btn u-hidden">
                     {{ _('Read full answer') }}
                     {{ svg_icon('plus-round') }}
                 </button>
@@ -65,19 +65,19 @@ <h1>
             <div class="block related-questions">
                 <h2>{{ _('Don\'t see what you\'re looking for?') }}</h2>
                 {% if related_questions %}
-                <div class="block block__sub">
+                <div class="block block--sub">
                     <h3>{{ _('Browse related questions') }} </h3>
-                    <ul class="m-list m-list__unstyled m-list__links">
+                    <ul class="m-list m-list--unstyled m-list--links">
                         {% for question in related_questions %}
-                        <li class="m-list_item">
-                            <a href="{{ question.url }}" class="m-list_link">
+                        <li class="m-list__item">
+                            <a href="{{ question.url }}" class="m-list__link">
                                 {{ question.question | safe }}
                             </a>
                         </li>
                         {% endfor %}
                         {% if portal_page %}
-                        <li class="m-list_item m-list_item__last">
-                            <a href="{{ portal_page.url }}" class="m-list_link">
+                        <li class="m-list__item m-list__item__last">
+                            <a href="{{ portal_page.url }}" class="m-list__link">
                                 <b>
                                     {{ _('Learn more about') }}
                                     {{ portal_page.portal_topic.title(page.language) | lower }}
@@ -88,7 +88,7 @@ <h3>{{ _('Browse related questions') }} </h3>
                     </ul>
                 </div>
                 {% endif %}
-                <div class="block block__sub">
+                <div class="block block--sub">
                     {{ ask_search.render( language=page.language ) }}
                 </div>
             </div>
@@ -100,7 +100,7 @@ <h3>{{ _('Browse related questions') }} </h3>
 {% block content_sidebar scoped  %}
     {% if about_us %}
         <div class="block
-                    block__flush-top
+                    block--flush-top
                     about-us-text">
             {{ about_us.text | richtext }}
         </div>

diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html
@@ -9,15 +9,15 @@
 {%- endblock css %}
 
 {% block content_modifiers -%}
-    {{ super() }} ask-cfpb-page ask-cfpb-page__search
+    {{ super() }} ask-cfpb-page ask-cfpb-page--search
 {%- endblock %}
 
 {% block content_main %}
     <div class="block
-                block__flush-top">
+                block--flush-top">
         <h1>{{ _('Search our library of answers') }}</h1>
 
-        <div class="block block__sub">
+        <div class="block block--sub">
         {{ ask_search.render( ask_query=tag or page.query, language=page.language, show_label=False, autocomplete=False, max_length=1024 ) }}
         </div>
 
@@ -35,7 +35,7 @@ <h3 class="results-header">{{ _('Showing') }} {{ results.start_index() }}-{{ res
 
             <section class="search-results
                             block
-                            block__flush-top">
+                            block--flush-top">
 
                 <div>
                 {% for question in results %}
@@ -47,7 +47,7 @@ <h3 class="results-header">{{ _('Showing') }} {{ results.start_index() }}-{{ res
 
                 </div>
 
-                <div class="block block__sub">
+                <div class="block block--sub">
                     {{ pagination.render(
                         paginator.num_pages,
                         current_page | int,
@@ -62,7 +62,7 @@ <h3 class="results-header">{{ _('Showing') }} {{ results.start_index() }}-{{ res
 
             <section class="search-results
                             block
-                            block__flush-top">
+                            block--flush-top">
                 <div data-gtm_ask-no-results="true">
                     <h3 class="results-header">
                         {{ _('No results found for') }} “{{ tag or page.query }}”
@@ -79,7 +79,7 @@ <h3 class="results-header">
 
             <section class="search-results
                             block
-                            block__flush-top">
+                            block--flush-top">
                 <h4>
                     {{ _('Please enter a search term in the box above.') }}
                 </h4>
@@ -92,7 +92,7 @@ <h4>
 
 {% block content_sidebar scoped -%}
     {% if about_us %}
-        <div class="block block__flush-top about-us-text">
+        <div class="block block--flush-top about-us-text">
             {{ about_us.text | richtext }}
         </div>
     {% endif %}

diff --git a/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html b/cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html
@@ -11,7 +11,7 @@
 {%- endblock css %}
 
 {% block content_modifiers -%}
-    {{ super() }} ask-cfpb-page ask-cfpb-page__landing
+    {{ super() }} ask-cfpb-page ask-cfpb-page--landing
 {%- endblock %}
 
 {% block content_intro -%}
@@ -21,12 +21,12 @@
 {% endblock %}
 
 {% block content_main %}
-    <div class="block block__flush-top">
+    <div class="block block--flush-top">
 
         {% import 'v1/includes/molecules/translation-links.html' as translation_links with context %}
-        {{ translation_links.render(modifier_classes='block__flush-top') }}
+        {{ translation_links.render(modifier_classes='block--flush-top') }}
 
-        <section class="ask-search block__sub block__flush-top">
+        <section class="ask-search block--sub block--flush-top">
             {{ ask_search.render( language=page.language, is_subsection=False ) }}
         </section>
 
@@ -37,7 +37,7 @@
 
 {% block content_sidebar scoped -%}
     {% if about_us %}
-        <div class="block block__flush-top about-us-text">
+        <div class="block block--flush-top about-us-text">
             {{ about_us.text | richtext }}
         </div>
     {% endif %}