Skip to content

Commit

Permalink
Merge pull request #8416 from cfpb/tccp/details-heading-macro
Browse files Browse the repository at this point in the history 
TCCP: Consolidate card detail headings into macro
  • Loading branch information
@chosak
chosak authored May 22, 2024
2 parents 0d501fa + 8f8379b commit 5d8f881
Showing 1 changed file with 76 additions and 84 deletions.
160 changes: 76 additions & 84 deletions cfgov/tccp/jinja2/tccp/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,25 @@
<link rel="stylesheet" href="{{ static('apps/tccp/css/main.css') }}">
{% endblock %}

{% macro data_section(
heading,
heading_classes="h2 u-mb0",
subheading_classes="h4 u-mt0"
) %}
<div
{%- if heading_classes %} class="{{ heading_classes }}"{% endif -%}
>
{{ caller() }}
<span class="u-visually-hidden">{{ heading }}</span>
</div>
<div
{%- if subheading_classes %} class="{{ subheading_classes }}"{% endif %}
aria-hidden="true"
>
{{- heading -}}
</div>
{% endmacro %}

{% block content_main %}
<div class="block block--flush-top">

Expand Down Expand Up @@ -192,19 +211,15 @@ <h2>
{% elif card.purchase_apr_median is not none %}
{% set purchase_apr_term = 'Median purchase APR' %}
{% endif %}
<div class="h2 u-mb0">
{% call data_section(purchase_apr_term) %}
{% if card.purchase_apr_min is not none
and card.purchase_apr_max is not none
%}
{{ apr_range(card.purchase_apr_min, card.purchase_apr_max) }}
{% elif card.purchase_apr_median is not none %}
{{ apr(card.purchase_apr_median) }}
{% endif %}
<span class="u-visually-hidden">{{ purchase_apr_term }}</span>
</div>
<div class="h4 u-mt0" aria-hidden="true">
{{ purchase_apr_term }}
</div>
{% endcall %}
<p>
An APR, or annual percentage rate, is the interest you‘ll pay
on purchases.
Expand Down Expand Up @@ -243,7 +258,11 @@ <h2>
{% elif card.intro_apr_median is not none %}
{% set introductory_apr_term = 'Median introductory APR' %}
{% endif %}
<div class="h3 u-mb0 u-mt30">
{% call data_section(
introductory_apr_term,
heading_classes="h3 u-mb0 u-mt30",
subheading_classes="u-mb15"
) %}
{% if card.intro_apr_min is not none
and card.intro_apr_max is not none
%}
Expand All @@ -254,11 +273,7 @@ <h2>
for
{{ '%.0f' | format(card.median_length_of_introductory_apr ) }}
months
<span class="u-visually-hidden">{{ introductory_apr_term }}</span>
</div>
<div class="u-mb15" aria-hidden="true">
{{ introductory_apr_term }}
</div>
{% endcall %}
{% if card.introductory_apr_vary_by_credit_tier %}
<p>
Your introductory APR will vary based on your credit score.
Expand Down Expand Up @@ -389,41 +404,41 @@ <h2>
<div class="m-payment-calculation u-mb15">
{% if card.annual_fee %}
<div class="m-payment-calculation__part">
<div class="h2 u-mb0 u-mt0">
{{ currency(card.annual_fee) if card.annual_fee else currency(0) }}
<span class="u-visually-hidden">Annual fee</span>
</div>
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
Annual fee
</div>
{% call data_section(
'Annual fee',
heading_classes="h2 u-mb0 u-mt0",
subheading_classes="h4 u-mt0 u-mb0"
) %}
{{ currency(card.annual_fee) }}
{% endcall %}
</div>
{% endif %}
{% if card.monthly_fee %}
{% if card.annual_fee %}
<div class="m-payment-calculation__operator h2">+</div>
{% endif %}
<div class="m-payment-calculation__part">
<div class="h2 u-mb0 u-mt0">
{{ currency(card.monthly_fee) if card.monthly_fee else currency(0) }}
<span class="u-visually-hidden">Monthly fee</span>
</div>
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
Monthly fee
</div>
{% call data_section(
'Monthly fee',
heading_classes="h2 u-mb0 u-mt0",
subheading_classes="h4 u-mt0 u-mb0"
) %}
{{ currency(card.monthly_fee) }}
{% endcall %}
</div>
{% endif %}
{% if card.weekly_fee %}
{% if card.annual_fee or card.monthly_fee %}
<div class="m-payment-calculation__operator h2">+</div>
{% endif %}
<div class="m-payment-calculation__part">
<div class="h2 u-mb0 u-mt0">
{% call data_section(
'Weekly fee',
heading_classes="h2 u-mb0 u-mt0",
subheading_classes="h4 u-mt0 u-mb0"
) %}
{{ currency(card.weekly_fee) }}
<span class="u-visually-hidden">Weekly fee</span>
</div>
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
Weekly fee
</div>
{% endcall %}
</div>
{% endif %}
{% if card.other_periodic_fee_amount %}
Expand All @@ -435,17 +450,15 @@ <h2>
<div class="m-payment-calculation__operator h2">+</div>
{% endif %}
<div class="m-payment-calculation__part">
<div class="h2 u-mb0 u-mt0">
{% call data_section(
(card.other_periodic_fee_name | capitalize) ~
', ' ~
(card.other_periodic_fee_frequency | lower),
heading_classes="h2 u-mb0 u-mt0",
subheading_classes="h4 u-mt0 u-mb0"
) %}
{{ currency(card.other_periodic_fee_amount) }}
<span class="u-visually-hidden">
{{ card.other_periodic_fee_name | capitalize }},
{{ card.other_periodic_fee_frequency | lower }}
</span>
</div>
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
{{ card.other_periodic_fee_name | capitalize }},
{{ card.other_periodic_fee_frequency | lower }}
</div>
{% endcall %}
</div>
{% endif %}
</div>
Expand Down Expand Up @@ -576,17 +589,13 @@ <h2>
Rewards and perks
</h2>
{% if card.rewards %}
<div class="h2 u-mb0">
{% call data_section('Rewards') %}
{%- set rewards = [] -%}
{%- for reward in card.rewards -%}
{%- do rewards.append(rewards_lookup[reward]) -%}
{%- endfor -%}
{{ oxfordize(rewards) | capitalize }}
<span class="u-visually-hidden">Rewards</span>
</div>
<div class="h4 u-mt0" aria-hidden="true">
Rewards
</div>
{% endcall %}
{% else %}
<p>This card does not offer cash back, travel, or other rewards.</p>
{% endif %}
Expand Down Expand Up @@ -659,27 +668,27 @@ <h2>
{% endif %}
<div class="m-payment-calculation u-mb15">
<div class="m-payment-calculation__part">
<div class="h2 u-mb0">
{% call data_section(
balance_transfer_apr_term ~
' for ' ~
'%.0f' | format(card.median_length_of_balance_transfer_apr) ~
' months'
) %}
{% if card.transfer_apr_min is not none
and card.transfer_apr_max is not none
%}
{{ apr_range(card.transfer_apr_min, card.transfer_apr_max) }}
{% elif card.transfer_apr_median is not none %}
{{ apr(card.transfer_apr_median) }}
{% endif %}
<span class="u-visually-hidden">
{{ balance_transfer_apr_term }} for {{ '%.0f' | format(card.median_length_of_balance_transfer_apr ) }}
months
</span>
</div>
<div class="h4 u-mt0" aria-hidden="true">
{{ balance_transfer_apr_term }} for {{ '%.0f' | format(card.median_length_of_balance_transfer_apr ) }}
months
</div>
{% endcall %}
</div>
<div class="m-payment-calculation__operator h2">+</div>
<div class="m-payment-calculation__part">
<div class="h2 u-mb0">
{% call data_section(
'Balance transfer fee'
~ (', see details' if card.balance_transfer_fee_calculation)
)%}
{{ currency(card.balance_transfer_fee_dollars) if
card.balance_transfer_fee_dollars is not none
}}
Expand All @@ -699,15 +708,7 @@ <h2>
and card.balance_transfer_fee_percentage is none
}}
{{ currency(0) if not card.balance_transfer_fees }}
<span class="u-visually-hidden">
Balance transfer fee
{{- ', see details' if card.balance_transfer_fee_calculation }}
</span>
</div>
<div class="h4 u-mt0" aria-hidden="true">
Balance transfer fee
{{- ', see details' if card.balance_transfer_fee_calculation }}
</div>
{% endcall %}
</div>
</div>
{% if card.balance_transfer_fee_calculation %}
Expand Down Expand Up @@ -759,7 +760,7 @@ <h2>
{% endif %}
<div class="m-payment-calculation u-mb15">
<div class="m-payment-calculation__part">
<div class="h2 u-mb0">
{% call data_section(cash_advance_apr_term) %}
{% if card.advance_apr_min is not none
and card.advance_apr_max is not none
%}
Expand All @@ -769,15 +770,14 @@ <h2>
{% else %}
N/A
{% endif %}
<span class="u-visually-hidden">{{ cash_advance_apr_term }}</span>
</div>
<div class="h4 u-mt0" aria-hidden="true">
{{ cash_advance_apr_term }}
</div>
{% endcall %}
</div>
<div class="m-payment-calculation__operator h2">+</div>
<div class="m-payment-calculation__part">
<div class="h2 u-mb0">
{% call data_section(
'Cash advance fee'
~ (', see details' if card.cash_advance_fee_calculation)
) %}
{{ currency(card.cash_advance_fee_dollars) if
card.cash_advance_fee_dollars is not none
}}
Expand All @@ -797,15 +797,7 @@ <h2>
and card.cash_advance_fee_percentage is none
}}
{{ currency(0) if not card.cash_advance_fees }}
<span class="u-visually-hidden">
Cash advance fee
{{- ', see details' if card.cash_advance_fee_calculation }}
</span>
</div>
<div class="h4 u-mt0" aria-hidden="true">
Cash advance fee
{{- ', see details' if card.cash_advance_fee_calculation }}
</div>
{% endcall %}
</div>
</div>
{% if card.cash_advance_fee_calculation %}
Expand Down

0 comments on commit 5d8f881

Please sign in to comment.