Merge pull request #8413 from cfpb/tccp/unify-card-rating

TCCP: Consolidate card rating markup
cfpb · May 22, 2024 · 0d501fa · 0d501fa
2 parents ef67635 + a9cf18b
commit 0d501fa
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 68 deletions.
diff --git a/cfgov/tccp/jinja2/tccp/card.html b/cfgov/tccp/jinja2/tccp/card.html
@@ -148,7 +148,6 @@ <h1>{{ card.product_name }}</h1>
 
         {% if not card.top_25_institution %}
             <div class="u-mt30">
-                {# TODO: Maybe unify this content with the card list version? #}
                 {{ speed_bump( {
                     'content': (
                         'This card is from a ' ~

diff --git a/cfgov/tccp/jinja2/tccp/includes/apr_rating.html b/cfgov/tccp/jinja2/tccp/includes/apr_rating.html
@@ -0,0 +1,26 @@
+{%- macro apr_rating(rating, count=none) -%}
+    {%- set label = apr_rating_lookup[rating] -%}
+
+    <div class="m-apr-rating m-apr-rating--{{ label }}">
+        <dt>
+            {% for i in range(rating + 1) -%}
+                {{ svg_icon("dollar-round") }}
+            {%- endfor %}
+            <span class="u-visually-hidden">
+                {{ rating + 1 }} dollar sign symbol{{ (rating + 1) | pluralize() }}
+            </span>
+        </dt>
+        <dd>
+            Pay {{ label }} interest
+            {{-
+                (
+                    ' ('
+                    ~ count
+                    ~ ' card'
+                    ~ count | pluralize()
+                    ~ ')'
+                ) if count is not none
+            }}
+        </dd>
+    </div>
+{%- endmacro -%}
diff --git a/cfgov/tccp/jinja2/tccp/includes/apr_table.html b/cfgov/tccp/jinja2/tccp/includes/apr_table.html
@@ -1,3 +1,4 @@
+{% from 'tccp/includes/apr_rating.html' import apr_rating with context %}
 {% from 'tccp/includes/fields.html' import apr, apr_range %}
 
 {% macro apr_table(
@@ -36,16 +37,11 @@
                     <td>{{ tier_apr_str }}</td>
                     {% if show_comparison %}
                     <td>
-                        {% if tier_apr_rating is not none %}
-                            {% set label = apr_rating_lookup[tier_apr_rating] %}
-                            <span class="m-apr-rating--{{ label }}">
-                                {%- for i in range(tier_apr_rating + 1) %}
-                                    {{ svg_icon("dollar-round") }}
-                                {% endfor -%}
-
-                                Pay {{ label }} interest
-                            </span>
-                        {% endif %}
+                        {% if tier_apr_rating is not none -%}
+                        <dl>
+                            {{ apr_rating(tier_apr_rating) }}
+                        </dl>
+                        {%- endif %}
                     </td>
                     {% endif %}
                 </tr>

diff --git a/cfgov/tccp/jinja2/tccp/includes/card_list.html b/cfgov/tccp/jinja2/tccp/includes/card_list.html
@@ -1,3 +1,4 @@
+{% from 'tccp/includes/apr_rating.html' import apr_rating with context %}
 {% from 'tccp/includes/data_published.html' import data_published %}
 {% from 'tccp/includes/fields.html' import apr, apr_range, currency %}
 {% from 'tccp/includes/speed_bump.html' import speed_bump %}
@@ -41,19 +42,8 @@ <h2>Cards you're looking for have these features:</h2>
         Use the ratings to compare your results:
     </p>
     <dl>
-        {% for label, label_count in purchase_apr_rating_counts.items() %}
-        <div class="m-apr-rating m-apr-rating--{{ label }}">
-            <dt>
-                {%- for i in range(loop.index) -%}
-                    {{ svg_icon("dollar-round") }}
-                {%- endfor -%}
-            </dt>
-            <dd>
-                Pay {{ label }} interest (
-                    {{- label_count ~ ' card' ~ label_count | pluralize() -}}
-                )
-            </dd>
-        </div>
+        {% for rating, rating_count in purchase_apr_rating_counts.items() %}
+            {{ apr_rating(rating, count=rating_count) }}
         {% endfor %}
     </dl>
 </div>
@@ -64,18 +54,6 @@ <h2>Cards you're looking for have these features:</h2>
 {{ data_published(stats_all.first_report_date) }}
 {%- endif %}
 
-{%- macro card_rating(card) -%}
-    {%- set label = purchase_apr_rating_labels[card.purchase_apr_for_tier_rating] -%}
-
-    <div class="m-apr-rating m-apr-rating--{{ label }}">
-        {%- for i in range(card.purchase_apr_for_tier_rating + 1) %}
-            {{ svg_icon("dollar-round") }}
-        {% endfor -%}
-
-        Pay {{ label }} interest
-    </div>
-{%- endmacro -%}
-
 {%- macro card_rewards(card) -%}
     {%- set rewards = [] -%}
     {%- for reward in card.rewards -%}
@@ -96,7 +74,9 @@ <h2>Cards you're looking for have these features:</h2>
                     <h3 class="m-card__heading">{{ card.institution_name }}</h3>
                     <p class="m-card__subtitle">{{ card.product_name }}</p>
                 </div>
-                {{ card_rating(card) | safe }}
+                <dl>
+                    {{ apr_rating(card.purchase_apr_for_tier_rating) }}
+                </dl>
                 <dl class="m-data-specs">
                     <div class="m-data-spec m-data-spec--apr">
                         <dt><strong>Purchase APR</strong></dt>
@@ -131,7 +111,7 @@ <h3 class="m-card__heading">{{ card.institution_name }}</h3>
                     <div class="m-data-spec m-data-spec--rewards">
                         <dt>Rewards</dt>
                         <dd>
-                            {{ card_rewards(card) | safe }}
+                            {{ card_rewards(card) }}
                         </dd>
                     </div>
                     {%- if

diff --git a/cfgov/tccp/management/commands/validate_tccp.py b/cfgov/tccp/management/commands/validate_tccp.py
@@ -2,7 +2,7 @@
 
 import matplotlib.pyplot as plt
 
-from tccp.enums import CreditTierColumns
+from tccp.enums import CreditTierColumns, PurchaseAPRRatings
 from tccp.filterset import CardSurveyDataFilterSet
 from tccp.models import CardSurveyData
 from tccp.situations import SITUATIONS
@@ -48,6 +48,8 @@ def handle(self, **options):
             summary_stats=summary_stats
         )
 
+        apr_rating_lookup = dict(PurchaseAPRRatings)
+
         for tier_name, tier_column in CreditTierColumns:
             self.stdout.write(tier_name.upper())
             self.stdout.write("-" * len(tier_name))
@@ -76,10 +78,12 @@ def handle(self, **options):
 
             # Write out counts for each rating label.
             for (
-                rating_label,
+                rating,
                 rating_count,
             ) in purchase_apr_rating_counts.items():
-                self.stdout.write(f"{rating_label}: {rating_count}")
+                self.stdout.write(
+                    f"{apr_rating_lookup[rating]}: {rating_count}"
+                )
 
             self.stdout.write()
 

diff --git a/cfgov/tccp/views.py b/cfgov/tccp/views.py
@@ -149,9 +149,6 @@ def list(self, request, *args, **kwargs):
             purchase_apr_rating_counts = self.get_purchase_apr_rating_counts(
                 cards
             )
-            purchase_apr_rating_labels = list(
-                purchase_apr_rating_counts.keys()
-            )
 
             response.data.update(
                 {
@@ -162,8 +159,8 @@ def list(self, request, *args, **kwargs):
                     "situations": situations,
                     "situation_features": SituationFeatures(situations),
                     "speed_bumps": SituationSpeedBumps(situations),
-                    "purchase_apr_rating_labels": purchase_apr_rating_labels,
                     "purchase_apr_rating_counts": purchase_apr_rating_counts,
+                    "apr_rating_lookup": dict(enums.PurchaseAPRRatings),
                     "rewards_lookup": dict(enums.RewardsChoices),
                 }
             )
@@ -179,14 +176,14 @@ def get_purchase_apr_rating_counts(cls, cards):
         # database query but the size of the data is small enough that we
         # can just as easily do it in Python.
         return {
-            rating_label: len(
+            rating_score: len(
                 [
                     card
                     for card in cards
                     if card["purchase_apr_for_tier_rating"] == rating_score
                 ]
             )
-            for rating_score, rating_label in enums.PurchaseAPRRatings
+            for rating_score, _ in enums.PurchaseAPRRatings
         }
 
 

diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.less
@@ -116,6 +116,31 @@
   }
 }
 
+.m-apr-rating {
+  &--less .cf-icon-svg {
+    color: var(--green);
+  }
+
+  &--average .cf-icon-svg {
+    color: var(--gold);
+  }
+
+  &--more .cf-icon-svg {
+    color: var(--red);
+  }
+}
+
+.u-heading-4-size-only() {
+  font-size: @size-iv;
+  line-height: 1.25;
+
+  // Mobile only.
+  .respond-to-max(@bp-xs-max, {
+    font-size: unit(16px / @base-font-size-px, rem);
+    line-height: unit(18px /  @base-font-size-px);
+  });
+}
+
 .m-card.m-card--tabular {
   padding: 0;
   border: 0;
@@ -136,6 +161,11 @@
       padding-bottom: unit((20px / @base-font-size-px), rem);
     });
   }
+
+  dl {
+    margin-bottom: 0;
+  }
+
   &:hover {
     > a {
       box-shadow:
@@ -180,6 +210,22 @@
 
   .m-card__footer {
     margin-top: unit((5px / @base-font-size-px), rem);
+
+    // Tablet and above.
+    .respond-to-min(@bp-sm-min, {
+      margin-top: unit((20px / @base-font-size-px), rem);
+    });
+  }
+
+  .m-apr-rating {
+    .u-heading-4-size-only();
+    margin-bottom: unit(20px / @base-font-size-px, rem);
+    font-weight: 600;
+
+    // Mobile only.
+    .respond-to-max(@bp-xs-max, {
+      margin-bottom: unit(10px / @base-font-size-px, rem);
+    });
   }
 }
 
@@ -189,13 +235,16 @@
   }
 
   .m-apr-rating {
-    margin-bottom: unit((5px / @base-font-size-px), rem);
+    margin-bottom: unit(5px / @base-font-size-px, rem);
     display: grid;
     grid-template-columns: unit(45px / @base-font-size-px, em) 1fr;
     align-items: baseline;
     gap: unit(5px / @base-font-size-px, em);
     font-weight: 500;
 
+    .u-heading-4-size-only();
+
+    // Tablet and above.
     .respond-to-min(@bp-sm-min, {
       margin-bottom: 0;
     });
@@ -206,24 +255,6 @@
   }
 }
 
-.m-apr-rating {
-  .h4();
-  margin-bottom: unit((20px / @base-font-size-px), rem);
-  font-weight: 600;
-
-  &--less .cf-icon-svg {
-    color: var(--green);
-  }
-
-  &--average .cf-icon-svg {
-    color: var(--gold);
-  }
-
-  &--more .cf-icon-svg {
-    color: var(--red);
-  }
-}
-
 .m-data-specs {
   display: grid;
   grid-template-areas:
@@ -233,12 +264,10 @@
   grid-template-columns: 2fr 3fr;
   column-gap: 20px;
   row-gap: 15px;
-  margin-bottom: 0;
 
   .respond-to-min(@bp-sm-min, {
     grid-template-areas: 'apr fee transfer rewards requirements';
     grid-template-columns: 5fr 4fr 6fr 7fr 7fr;
-    margin-bottom: unit((15px / @base-font-size-px), rem);
   });
 }