refactor(media_item): use includes over tags everywhere

cal-itp · Jul 6, 2023 · fc4de58 · fc4de58
1 parent cdfc32c
commit fc4de58
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 126 deletions.
diff --git a/benefits/core/templates/core/includes/media_item.html b/benefits/core/templates/core/includes/media_item.html
@@ -0,0 +1,14 @@
+<li class="media d-flex align-items-stretch w-auto">
+    <div class="media-line">
+        {% block icon %}
+        {% endblock icon %}
+    </div>
+    <div class="media-body">
+        <h3 class="media-body--heading">
+            {% block heading %}
+            {% endblock heading %}
+        </h3>
+        {% block body %}
+        {% endblock body %}
+    </div>
+</li>
diff --git a/benefits/core/templates/core/tags/media_item.html b/benefits/core/templates/core/tags/media_item.html
diff --git a/benefits/core/templatetags/__init__.py b/benefits/core/templatetags/__init__.py
diff --git a/benefits/core/templatetags/core.py b/benefits/core/templatetags/core.py
diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__start__bankcardcheck.html b/benefits/eligibility/templates/eligibility/includes/media_item__start__bankcardcheck.html
@@ -1,12 +1,17 @@
+{% extends "core/includes/media_item.html" %}
 {% load i18n %}
-{% load core %}
 
-{% translate "core.icons.bankcardcheck" context "image alt text" as icon_alt %}
-{% translate "eligibility.pages.start.bankcard.title" as heading %}
-{% translate "eligibility.pages.start.bankcard.text" as details %}
+{% block icon %}
+    {% translate "core.icons.bankcardcheck" context "image alt text" as icon_alt %}
+    {% include "core/includes/icon__direct_args.html" with name="bankcardcheck" alt=icon_alt %}
+{% endblock icon %}
 
-{% media_item icon="bankcardcheck" icon_alt=icon_alt heading=heading %}
-<div class="media-body--details">
-    <p>{{ details }}</p>
-</div>
-{% endmedia_item %}
+{% block heading %}
+    {% translate "eligibility.pages.start.bankcard.title" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.bankcard.text" %}</p>
+    </div>
+{% endblock body %}
diff --git a/...eligibility/templates/eligibility/includes/media_item__start__idcardcheck__login_gov.html b/...eligibility/templates/eligibility/includes/media_item__start__idcardcheck__login_gov.html
@@ -0,0 +1,25 @@
+{% extends "core/includes/media_item.html" %}
+
+{% load i18n %}
+
+{% block icon %}
+    {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
+    {% include "core/includes/icon__direct_args.html" with name="idcardcheck" alt=icon_alt %}
+{% endblock icon %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.login_gov.start_item.heading" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.login_gov.start_item.details" %}</p>
+        <div class="media-body--items">
+            <ul>
+                <li>{% translate "eligibility.pages.start.login_gov.required_items[0]" %}</li>
+                <li>{% translate "eligibility.pages.start.login_gov.required_items[1]" %}</li>
+                <li>{% translate "eligibility.pages.start.login_gov.required_items[2]" %}</li>
+            </ul>
+        </div>
+    </div>
+{% endblock body %}
diff --git a/...ity/templates/eligibility/includes/media_item__start__idcardcheck__mst_courtesy_card.html b/...ity/templates/eligibility/includes/media_item__start__idcardcheck__mst_courtesy_card.html
@@ -0,0 +1,17 @@
+{% extends "core/includes/media_item.html" %}
+{% load i18n %}
+
+{% block icon %}
+    {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
+    {% include "core/includes/icon__direct_args.html" with name="idcardcheck" alt=icon_alt %}
+{% endblock icon %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.mst_cc.start_item.heading" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.mst_cc.start_item.details" %}</p>
+    </div>
+{% endblock body %}
diff --git a/...s/eligibility/templates/eligibility/includes/media_item__start__idcardcheck__veteran.html b/...s/eligibility/templates/eligibility/includes/media_item__start__idcardcheck__veteran.html
@@ -0,0 +1,26 @@
+{% extends "core/includes/media_item.html" %}
+{% load i18n %}
+
+{% block icon %}
+    {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
+    {% include "core/includes/icon__direct_args.html" with name="bankcardcheck" alt=icon_alt %}
+{% endblock icon %}
+
+{% block heading %}
+    {% translate "eligibility.pages.start.veteran.start_item.heading" %}
+{% endblock heading %}
+
+{% block body %}
+    <div class="media-body--details">
+        <p>{% translate "eligibility.pages.start.veteran.start_item.details" %}</p>
+        <div class="media-body--items">
+            <ul>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[0]" %}</li>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[1]" %}</li>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[2]" %}</li>
+                <li>{% translate "eligibility.pages.start.veteran.required_items[3]" %}</li>
+            </ul>
+            <p class="pt-1">{% translate "eligibility.pages.start.veteran.start_item.secondary_details" %}</p>
+        </div>
+    </div>
+{% endblock body %}
diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html
@@ -1,6 +1,5 @@
 {% extends "core/base.html" %}
 {% load i18n %}
-{% load core %}
 
 {% block classes %}
   {{ block.super | add:" eligibility-start" }}

diff --git a/benefits/eligibility/templates/eligibility/start__login_gov.html b/benefits/eligibility/templates/eligibility/start__login_gov.html
@@ -1,6 +1,5 @@
 {% extends "eligibility/start.html" %}
 {% load i18n %}
-{% load core %}
 
 {% block page_title %}
   {% translate "eligibility.pages.start.login_gov.title" %}&nbsp;|&nbsp;
@@ -13,23 +12,7 @@ <h1>{% translate "eligibility.pages.start.login_gov.headline" %}</h1>
 {% endblock headline %}
 
 {% block media-list %}
-  {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
-  {% translate "eligibility.pages.start.login_gov.start_item.heading" as heading %}
-  {% translate "eligibility.pages.start.login_gov.start_item.details" as details %}
-  {# djlint: off #}
-  {% media_item icon="idcardcheck" icon_alt=icon_alt heading=heading %}
-  <div class="media-body--details">
-      <p>{{ details }}</p>
-      <div class="media-body--items">
-          <ul>
-              <li>{% translate "eligibility.pages.start.login_gov.required_items[0]" %}</li>
-              <li>{% translate "eligibility.pages.start.login_gov.required_items[1]" %}</li>
-              <li>{% translate "eligibility.pages.start.login_gov.required_items[2]" %}</li>
-          </ul>
-      </div>
-  </div>
-  {% endmedia_item %}
-  {# djlint: on #}
+  {% include "eligibility/includes/media_item__start__idcardcheck__login_gov.html" %}
   {% include "eligibility/includes/media_item__start__bankcardcheck.html" %}
 {% endblock media-list %}
 

diff --git a/benefits/eligibility/templates/eligibility/start__mst_courtesy_card.html b/benefits/eligibility/templates/eligibility/start__mst_courtesy_card.html
@@ -1,6 +1,5 @@
 {% extends "eligibility/start.html" %}
 {% load i18n %}
-{% load core %}
 
 {% block page_title %}
   {% translate "eligibility.pages.start.mst_cc.title" %}&nbsp;|&nbsp;
@@ -13,16 +12,7 @@ <h1>{% translate "eligibility.pages.start.mst_cc.headline" %}</h1>
 {% endblock headline %}
 
 {% block media-list %}
-  {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
-  {% translate "eligibility.pages.start.mst_cc.start_item.heading" as heading %}
-  {% translate "eligibility.pages.start.mst_cc.start_item.details" as details %}
-  {# djlint: off #}
-  {% media_item icon="idcardcheck" icon_alt=icon_alt heading=heading %}
-  <div class="media-body--details">
-      <p>{{ details }}</p>
-  </div>
-  {% endmedia_item %}
-  {# djlint: on #}
+  {% include "eligibility/includes/media_item__start__idcardcheck__mst_courtesy_card.html" %}
   {% include "eligibility/includes/media_item__start__bankcardcheck.html" %}
 {% endblock media-list %}
 

diff --git a/benefits/eligibility/templates/eligibility/start__veteran.html b/benefits/eligibility/templates/eligibility/start__veteran.html
@@ -1,6 +1,5 @@
 {% extends "eligibility/start.html" %}
 {% load i18n %}
-{% load core %}
 
 {% block page_title %}
   {% translate "eligibility.pages.start.veteran.title" %}&nbsp;|&nbsp;
@@ -13,25 +12,7 @@ <h1>{% translate "eligibility.pages.start.veteran.headline" %}</h1>
 {% endblock headline %}
 
 {% block media-list %}
-  {% translate "core.icons.idcardcheck" context "image alt text" as icon_alt %}
-  {% translate "eligibility.pages.start.veteran.start_item.heading" as heading %}
-  {% translate "eligibility.pages.start.veteran.start_item.details" as details %}
-  {# djlint: off #}
-  {% media_item icon="idcardcheck" icon_alt=icon_alt heading=heading %}
-    <div class="media-body--details">
-      <p>{{ details }}</p>
-      <div class="media-body--items">
-        <ul>
-          <li>{% translate "eligibility.pages.start.veteran.required_items[0]" %}</li>
-          <li>{% translate "eligibility.pages.start.veteran.required_items[1]" %}</li>
-          <li>{% translate "eligibility.pages.start.veteran.required_items[2]" %}</li>
-          <li>{% translate "eligibility.pages.start.veteran.required_items[3]" %}</li>
-        </ul>
-        <p class="pt-1">{% translate "eligibility.pages.start.veteran.start_item.secondary_details" %}</p>
-      </div>
-    </div>
-  {% endmedia_item %}
-  {# djlint: on #}
+  {% include "eligibility/includes/media_item__start__idcardcheck__veteran.html" %}
   {% include "eligibility/includes/media_item__start__bankcardcheck.html" %}
 {% endblock media-list %}