refactor: use includes/HTML over tags everywhere

benefits/core/templates/core/tags/button__previous_page.html → benefits/core/templates/core/includes/button__previous_page.html

@@ -1,17 +1,14 @@
 {% load i18n %}
-{% load core %}
 
 <div class="container">
   <div class="row nav-button-row position-absolute">
     <div class="d-flex align-items-center">
-      {# djlint: off #}
-      {% button url=url id="previous-page-button" classes="btn btn-lg btn-outline-dark" %}
+      <a href="{{ url }}" id="previous-page-button" class="btn btn-lg btn-outline-dark">
         <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path d="M14.25 8.24999H5.355L8.0775 4.97999C8.2048 4.82683 8.26605 4.62937 8.24777 4.43105C8.22948 4.23273 8.13316 4.0498 7.98 3.92249C7.82684 3.79519 7.62938 3.73394 7.43106 3.75223C7.23274 3.77051 7.0498 3.86683 6.9225 4.01999L3.1725 8.51999C3.14727 8.55579 3.12471 8.59339 3.105 8.63249C3.105 8.66999 3.105 8.69249 3.0525 8.72999C3.01851 8.81599 3.00071 8.90753 3 8.99999C3.00071 9.09246 3.01851 9.184 3.0525 9.26999C3.0525 9.30749 3.0525 9.32999 3.105 9.36749C3.12471 9.4066 3.14727 9.4442 3.1725 9.47999L6.9225 13.98C6.99302 14.0647 7.08132 14.1327 7.18113 14.1794C7.28095 14.2261 7.38982 14.2502 7.5 14.25C7.67524 14.2503 7.84507 14.1893 7.98 14.0775C8.05594 14.0145 8.11872 13.9372 8.16473 13.8499C8.21075 13.7627 8.2391 13.6672 8.24815 13.569C8.25721 13.4707 8.2468 13.3717 8.21751 13.2775C8.18823 13.1833 8.14065 13.0958 8.0775 13.02L5.355 9.74999H14.25C14.4489 9.74999 14.6397 9.67097 14.7803 9.53032C14.921 9.38967 15 9.1989 15 8.99999C15 8.80108 14.921 8.61031 14.7803 8.46966C14.6397 8.32901 14.4489 8.24999 14.25 8.24999Z" />
         </svg>
         {% translate "core.buttons.previous_page" %}
-      {% endbutton %}
-      {# djlint: on #}
+      </a>
     </div>
   </div>
 </div>

benefits/core/templates/core/includes/icon__direct_args.html

@@ -0,0 +1,13 @@
+
+{% if not name %}
+  <p class="bg-grey-lightest color-standout">
+    Missing <strong><code>name</code></strong> argument
+  </p>
+{% elif not alt %}
+  <p class="bg-grey-lightest color-standout">
+    Missing <strong><code>alt</code></strong> argument
+  </p>
+{% else %}
+  {% load static %}
+  <img class="icon" width="150" height="150" src="{% get_static_prefix %}img/icon/{{ name }}.svg" alt="{{ alt }}" />
+{% endif %}

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>

benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html

@@ -0,0 +1,17 @@
+{% extends "core/includes/media_item.html" %}
+{% load i18n %}
+
+{% 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 %}
+
+{% 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 %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck.html

@@ -0,0 +1,8 @@
+{% 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 %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__login_gov.html

@@ -0,0 +1,20 @@
+{% extends "eligibility/includes/media_item__idcardcheck.html" %}
+
+{% load i18n %}
+
+{% 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 %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__mst_courtesy_card.html

@@ -0,0 +1,13 @@
+{% extends "eligibility/includes/media_item__idcardcheck.html" %}
+
+{% load i18n %}
+
+{% 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 %}

benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__veteran.html

@@ -0,0 +1,22 @@
+{% extends "eligibility/includes/media_item__idcardcheck.html" %}
+
+{% load i18n %}
+
+{% 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 %}

benefits/eligibility/templates/eligibility/start.html

@@ -1,14 +1,13 @@
 {% extends "core/base.html" %}
 {% load i18n %}
-{% load core %}
 
 {% block classes %}
   {{ block.super | add:" eligibility-start" }}
 {% endblock classes %}
 
 {% block nav-buttons %}
   {% url "eligibility:index" as url %}
-  {% button__previous_page url=url %}
+  {% include "core/includes/button__previous_page.html" with url=url %}
 {% endblock nav-buttons %}
 
 {% block inner-content %}

benefits/eligibility/templates/eligibility/start__login_gov.html

@@ -1,7 +1,5 @@
 {% extends "eligibility/start.html" %}
 {% load i18n %}
-{% load core %}
-{% load eligibility %}
 
 {% block page_title %}
   {% translate "eligibility.pages.start.login_gov.title" %} | 
@@ -14,40 +12,20 @@ <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 #}
-  {% media_item__start__bankcardcheck %}
+  {% include "eligibility/includes/media_item__idcardcheck__start__login_gov.html" %}
+  {% include "eligibility/includes/media_item__bankcardcheck__start.html" %}
 {% endblock media-list %}
 
 {% block help-link %}
   {% url "core:help" as help_page %}
-  {# djlint:off #}
   {% translate "eligibility.pages.start.help_text" %}
   <a href="{{ help_page }}#login-gov">{% translate "eligibility.pages.start.help_link_text" %}</a>.
-  {# djlint:on #}
 {% endblock help-link %}
 
 {% block call-to-action-button %}
   {% url "oauth:login" as button_url %}
   {% translate "eligibility.buttons.senior.signin" as button_text %}
-  {# djlint:off #}
-  {% button url=button_url classes="btn btn-lg btn-primary" id="login" %}
-      {{ button_text }} <span class="fallback-text">Login.gov</span>
-  {% endbutton %}
-  {# djlint:on #}
+  <a href="{{ button_url }}" class="btn btn-lg btn-primary" id="login">
+    {{ button_text }} <span class="fallback-text">Login.gov</span>
+  </a>
 {% endblock call-to-action-button %}