Merge pull request #8352 from cfpb/ans_pfc_fix_bem

PfC: Fix incorrect BEM
cfpb · Apr 27, 2024 · 536804a · 536804a
2 parents fa693d9 + f93f821
commit 536804a
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 45 deletions.
diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html b/cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/14-summary.html
@@ -48,7 +48,7 @@ <h3 class="summary__header">Covering your costs</h3>
             ) }}
         </div>
 
-        <table class="o-table o-table__financial u-w100pct">
+        <table class="o-table o-table--financial u-w100pct">
             <thead>
                 <tr>
                     <th scope="col" class="u-w70pct">
@@ -100,7 +100,7 @@ <h3 class="summary__header">Covering your costs</h3>
         </table>
     </div>
     <div class="block block--mid m-full-width-text">
-        <table class="o-table o-table__financial u-w100pct">
+        <table class="o-table o-table--financial u-w100pct">
             <thead>
                 <tr>
                     <th scope="col" class="u-w70pct">

diff --git a/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html b/cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
@@ -2061,7 +2061,7 @@ <h4 class="metric__heading">
                                     data-incoming-format="decimal-percent"
                                     data-graph-min="0"
                                     data-graph-max="1">
-                                        <div class="bar-graph--bar"></div>
+                                        <div class="bar-graph__bar"></div>
                                         <div class="bar-graph__point
                                         bar-graph__point--you u-clearfix">
                                             <div class="bar-graph__label"
@@ -2894,7 +2894,7 @@ <h4 class="metric__heading">
                                         <div class="bar-graph__top-label">
                                             40%
                                         </div>
-                                        <div class="bar-graph--bar"></div>
+                                        <div class="bar-graph__bar"></div>
                                         <div class="bar-graph__point
                                         bar-graph__point--you u-clearfix">
                                             <div class="bar-graph__label"

diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
@@ -30,7 +30,7 @@
       display: block;
     }
 
-    .a-link--text,
+    .a-link__text,
     .inline {
       display: inline;
     }

diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/financial-view.js
@@ -685,13 +685,13 @@ const financialView = {
 
         if (programLength > 1) {
           yearsAttending += ' years';
-          $multiYears.filter('.line-item_title').show('inline-block');
+          $multiYears.filter('.line-item__title').show('inline-block');
           $multiYears.filter('.line-item').show();
           $yearOrLess.hide();
         } else {
           yearsAttending += ' year';
           $multiYears.hide();
-          $yearOrLess.filter('.line-item_title').show('inline-block');
+          $yearOrLess.filter('.line-item__title').show('inline-block');
           $yearOrLess.filter('.line-item').show();
         }
 
@@ -909,7 +909,7 @@ const financialView = {
    * if the summaries are in the inline-block sidebar column
    */
   // stickySummariesListener: function () {
-  //   const $stickyOffers = $('.offer-part_summary-wrapper');
+  //   const $stickyOffers = $('.offer-part__summary-wrapper');
   //   const $win = $(window);
 
   //   if ($win.width() >= 600 && $stickyOffers.data('sticky_kit') !== true) {

diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/metric-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/metric-view.js
@@ -137,7 +137,7 @@ const metricView = {
 
     // If the values are equal, handle the display with CSS only
     if (metrics.school === metrics.national) {
-      $graph.addClass('bar-graph__equal');
+      $graph.addClass('bar-graph--equal');
       return;
     }
     // If the points partially overlap, move the higher point's labels up
@@ -171,12 +171,12 @@ const metricView = {
     const metricKey = $graph.attr('data-metric');
     const metrics = metricView.metrics[metricKey];
     if (isNaN(metrics.school)) {
-      $graph.addClass('bar-graph__missing-you');
+      $graph.addClass('bar-graph--missing-you');
     } else {
       this.updateText($school, metrics.school, metrics.format);
     }
     if (isNaN(metrics.national)) {
-      $graph.addClass('bar-graph__missing-average');
+      $graph.addClass('bar-graph--missing-average');
     } else {
       this.updateText($national, metrics.national, metrics.format);
     }
@@ -210,7 +210,7 @@ const metricView = {
        prevent those values from falling off the top of the graph */
     if (schoolValue > max) {
       bottoms.school = graphHeight;
-      $graph.addClass('bar-graph__high-point');
+      $graph.addClass('bar-graph--high-point');
     }
     $school.each((elem) => {
       elem.style.bottom = bottoms.school + 'px';
@@ -228,10 +228,10 @@ const metricView = {
   getNotifications: function (metricKey) {
     let classes = 'cf-notification ';
     const standingClasses = {
-      same: 'metric_notification--same',
-      better: 'metric_notification--better',
+      same: 'metric__notification--same',
+      better: 'metric__notification--better',
       worse:
-        'cf-notification metric_notification--worse ' +
+        'cf-notification metric__notification--worse ' +
         'cf-notification--error',
     };
     const metrics = metricView.metrics[metricKey];

diff --git a/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js b/cfgov/unprocessed/apps/paying-for-college/js/disclosures/views/question-view.js
@@ -8,15 +8,15 @@ const questionView = {
   $settlementBigQuestion: $('.step__settlement'),
   $nonsettlementBigQuestion: $('.step__nonsettlement'),
   $getOptions: $('.get-options'),
-  $followupNoNotSure: $('.followup__no-not-sure'),
-  $followupYes: $('.followup__yes'),
-  $optionsWrapper: $('.get-options__dynamic'),
+  $followupNoNotSure: $('.followup--no-not-sure'),
+  $followupYes: $('.followup--yes'),
+  $optionsWrapper: $('.get-options--dynamic'),
   $options: $('.option'),
   $optionsSidebar: $('.get-options__sidebar'),
-  $transferCredits: $('.option__transfer-credits'),
-  $exploreSchools: $('.option__explore-schools'),
-  $workWhileStudying: $('.option__work-while-studying'),
-  $takeAction: $('.option__take-action'),
+  $transferCredits: $('.option--transfer-credits'),
+  $exploreSchools: $('.option--explore-schools'),
+  $workWhileStudying: $('.option--work-while-studying'),
+  $takeAction: $('.option--take-action'),
   $nextSteps: $('.next-steps'),
 
   /**
@@ -39,14 +39,14 @@ const questionView = {
       questionView.$nonsettlementBigQuestion.hide();
       $('#question__answer-no').hide();
       questionView.$optionsWrapper.addClass(
-        'get-options__settlement content__main',
+        'get-options--settlement content__main',
       );
       questionView.$transferCredits.remove();
       questionView.$exploreSchools.remove();
       questionView.$takeAction.remove();
-      questionView.$options.addClass('option__settlement');
+      questionView.$options.addClass('option--settlement');
       questionView.$optionsSidebar.show();
-      questionView.$optionsWrapper.removeClass('get-options__dynamic');
+      questionView.$optionsWrapper.removeClass('get-options--dynamic');
     } else {
       questionView.$settlementBigQuestion.hide();
       questionView.$nonsettlementBigQuestion.show();