Update BEM names

.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,
   },

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>

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>

cfgov/agreements/jinja2/agreements/archive.html

@@ -11,7 +11,7 @@
 ] %}
 
 {% 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.
@@ -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 %}

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

cfgov/agreements/jinja2/agreements/search.html

@@ -11,7 +11,7 @@
 {%- 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">
@@ -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"
@@ -100,8 +100,8 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
                     </label>
                     <button class="a-btn
                                     a-btn__link
-                                    m-pagination_btn-submit"
-                            id="m-pagination_btn-submit"
+                                    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>

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>

cfgov/ask_cfpb/jinja2/ask-cfpb/answer-page.html

@@ -22,8 +22,8 @@
 
 {% 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__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">
                         {% 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>

cfgov/ask_cfpb/jinja2/ask-cfpb/answer-search-results.html

@@ -14,10 +14,10 @@
 
 {% 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 %}

cfgov/ask_cfpb/jinja2/ask-cfpb/landing-page.html

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

cfgov/ask_cfpb/jinja2/ask-cfpb/see-all.html

@@ -18,7 +18,7 @@ <h1>
     {% if page.glossary_terms %}
         <dl class="terms" itemscope itemtype="https://schema.org/DefinedTermSet">
         {% for term in page.glossary_terms %}
-            <div class="term {{'' if loop.index == 1 else 'block block__border-top block__padded-top'}}"
+            <div class="term {{'' if loop.index == 1 else 'block block--border-top block--padded-top'}}"
                  id="{{ term.anchor(page.language) }}"
                  itemscope
                  itemtype="https://schema.org/DefinedTerm">
@@ -74,12 +74,12 @@ <h1>
             </article>
             {% endfor %}
 
-            <div class="block block__sub">
+            <div class="block block--sub">
                 {{ pagination.render( paginator.num_pages, current_page, '', 0 ) }}
             </div>
         </section>
         {% if not page.portal_category %}
-        <div class="block block__flush-bottom block__padded-bottom">
+        <div class="block block--flush-bottom block--padded-bottom">
             <p class="ask-search-link h4">
                 <span>{{ _("Don't see what you're looking for?") }}</span>
                 <a href="{{ _('/ask-cfpb/search/') }}">{{ _('Search our full library of answers') }}</a>

cfgov/ask_cfpb/tests/test_blocks.py

@@ -67,7 +67,7 @@ def test_how_to_block_renders_schema(self):
         expected_html = (
             "<div itemscope"
             '     itemtype="https://schema.org/HowTo"'
-            '     class="schema-block schema-block__how-to">'
+            '     class="schema-block schema-block--how-to">'
             '<h2 itemprop="name" class="schema-block_title" id="test-title">'
             "test title</h2>"  # noqa
             '<div itemprop="description" class="schema-block_description">'
@@ -101,7 +101,7 @@ def test_faq_block_renders_schema(self):
         }
         expected_html = (
             '<div itemscope="" itemtype="https://schema.org/FAQPage" '
-            'class="schema-block schema-block__faq">'
+            'class="schema-block schema-block--faq">'
             '<div itemprop="description" class="schema-block_description">'
             "test description"
             "</div>"

cfgov/data_research/jinja2/data_research/mortgage-performance-downloads.html

@@ -101,7 +101,7 @@ <h2>Archived versions</h2>
       <h4> Download archival data {{ from_month_formatted }}{{ '&ndash;' | safe }}{{ download_files[date]['thru_month'] }}</h4>
     </div>
 </div>
-<div class="block block__flush-top">
+<div class="block block--flush-top">
 <table class="o-table">
     <thead>
         <tr>