From 7a10bc086df1c5861a037debc8019527669b8204 Mon Sep 17 00:00:00 2001 From: Kegan Maher Date: Thu, 6 Jul 2023 22:12:34 +0000 Subject: [PATCH] refactor: use includes/HTML over tags everywhere --- .../button__previous_page.html | 7 +- .../core/includes/icon__direct_args.html | 13 ++ .../templates/core/includes/media_item.html | 14 ++ benefits/core/templates/core/tags/button.html | 6 - benefits/core/templates/core/tags/icon.html | 3 - .../core/templates/core/tags/media_item.html | 9 -- benefits/core/templatetags/__init__.py | 0 benefits/core/templatetags/core.py | 131 ------------------ .../media_item__bankcardcheck__start.html | 17 +++ .../includes/media_item__idcardcheck.html | 8 ++ ...a_item__idcardcheck__start__login_gov.html | 20 +++ ...idcardcheck__start__mst_courtesy_card.html | 13 ++ ...dia_item__idcardcheck__start__veteran.html | 22 +++ .../templates/eligibility/start.html | 3 +- .../eligibility/start__login_gov.html | 32 +---- .../eligibility/start__mst_courtesy_card.html | 24 +--- .../templates/eligibility/start__veteran.html | 32 +---- .../media_item__start__bankcardcheck.html | 12 -- benefits/eligibility/templatetags/__init__.py | 0 .../eligibility/templatetags/eligibility.py | 9 -- 20 files changed, 121 insertions(+), 254 deletions(-) rename benefits/core/templates/core/{tags => includes}/button__previous_page.html (88%) create mode 100644 benefits/core/templates/core/includes/icon__direct_args.html create mode 100644 benefits/core/templates/core/includes/media_item.html delete mode 100644 benefits/core/templates/core/tags/button.html delete mode 100644 benefits/core/templates/core/tags/icon.html delete mode 100644 benefits/core/templates/core/tags/media_item.html delete mode 100644 benefits/core/templatetags/__init__.py delete mode 100644 benefits/core/templatetags/core.py create mode 100644 benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html create mode 100644 benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck.html create mode 100644 benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__login_gov.html create mode 100644 benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__mst_courtesy_card.html create mode 100644 benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__veteran.html delete mode 100644 benefits/eligibility/templates/eligibility/tags/media_item__start__bankcardcheck.html delete mode 100644 benefits/eligibility/templatetags/__init__.py delete mode 100644 benefits/eligibility/templatetags/eligibility.py diff --git a/benefits/core/templates/core/tags/button__previous_page.html b/benefits/core/templates/core/includes/button__previous_page.html similarity index 88% rename from benefits/core/templates/core/tags/button__previous_page.html rename to benefits/core/templates/core/includes/button__previous_page.html index 86675196a1..85aa62cf1c 100644 --- a/benefits/core/templates/core/tags/button__previous_page.html +++ b/benefits/core/templates/core/includes/button__previous_page.html @@ -1,17 +1,14 @@ {% load i18n %} -{% load core %}
- {# djlint: off #} - {% button url=url id="previous-page-button" classes="btn btn-lg btn-outline-dark" %} + {% translate "core.buttons.previous_page" %} - {% endbutton %} - {# djlint: on #} +
diff --git a/benefits/core/templates/core/includes/icon__direct_args.html b/benefits/core/templates/core/includes/icon__direct_args.html new file mode 100644 index 0000000000..705ebda0c6 --- /dev/null +++ b/benefits/core/templates/core/includes/icon__direct_args.html @@ -0,0 +1,13 @@ + +{% if not name %} +

+ Missing name argument +

+{% elif not alt %} +

+ Missing alt argument +

+{% else %} + {% load static %} + {{ alt }} +{% endif %} diff --git a/benefits/core/templates/core/includes/media_item.html b/benefits/core/templates/core/includes/media_item.html new file mode 100644 index 0000000000..32cd346246 --- /dev/null +++ b/benefits/core/templates/core/includes/media_item.html @@ -0,0 +1,14 @@ +
  • +
    + {% block icon %} + {% endblock icon %} +
    +
    +

    + {% block heading %} + {% endblock heading %} +

    + {% block body %} + {% endblock body %} +
    +
    • diff --git a/benefits/core/templates/core/tags/button.html b/benefits/core/templates/core/tags/button.html deleted file mode 100644 index 1df0731d2d..0000000000 --- a/benefits/core/templates/core/tags/button.html +++ /dev/null @@ -1,6 +0,0 @@ -{{ body }} diff --git a/benefits/core/templates/core/tags/icon.html b/benefits/core/templates/core/tags/icon.html deleted file mode 100644 index 63b2e7fd61..0000000000 --- a/benefits/core/templates/core/tags/icon.html +++ /dev/null @@ -1,3 +0,0 @@ -{% load static %} - -{{ alt }} diff --git a/benefits/core/templates/core/tags/media_item.html b/benefits/core/templates/core/tags/media_item.html deleted file mode 100644 index a32c65bf97..0000000000 --- a/benefits/core/templates/core/tags/media_item.html +++ /dev/null @@ -1,9 +0,0 @@ -{% load core %} - -
  • -
    {% icon name=icon alt=icon_alt %}
    -
    - {% if heading %}

    {{ heading }}

    {% endif %} - {{ body }} -
    -
    • diff --git a/benefits/core/templatetags/__init__.py b/benefits/core/templatetags/__init__.py deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/benefits/core/templatetags/core.py b/benefits/core/templatetags/core.py deleted file mode 100644 index ed90f3a86b..0000000000 --- a/benefits/core/templatetags/core.py +++ /dev/null @@ -1,131 +0,0 @@ -from django import template - -register = template.Library() - - -@register.inclusion_tag("core/tags/icon.html") -def icon(name, alt): - """ - Defines a tag `{% icon name="" alt="" %}` - """ - return {"name": name, "alt": alt} - - -@register.tag -def media_item(parser, token): - """ - Defines the compile function for the tag `{% media_item %}{% endmedia_item %}` - """ - # token.contents is the tag name + all arguments - # "media_item icon='name' icon_alt='alt' heading=variable" - # split and discard the first (tag name) - token_contents = token.split_contents()[1:] - args = ["icon", "icon_alt", "heading"] - # token_contents are string "key=value" pairs, convert to dict - kwargs = {} - for token_arg in token_contents: - k, v = token_arg.split("=") - if k in args: - kwargs[k] = v - - # parse the rest of the tag contents - nodelist = parser.parse(("endmedia_item",)) - # "consume" the end tag - # https://docs.djangoproject.com/en/4.2/howto/custom-template-tags/#parsing-until-another-block-tag - parser.delete_first_token() - - return MediaItemNode(nodelist, args, **kwargs) - - -class MediaItemNode(template.Node): - """ - Template Node representing an instance of a tag `{% media_item %}{% endmedia_item %}`. - """ - - def __init__(self, nodelist, arg_names, **kwargs): - # the nodelist represents the tag inner content - self.nodelist = nodelist - self.arg_names = arg_names - # create template variables for each tag argument - for name in arg_names: - val = kwargs.get(name) - if val: - setattr(self, name, template.Variable(val)) - - def render(self, context): - # render the nodelist (tag inner content) into a new "body" context - ctx = template.Context({"body": self.nodelist.render(context)}, autoescape=context.autoescape) - # add the tag arguments to context, .resolve() each template.Variable - for arg in self.arg_names: - try: - ctx[arg] = getattr(self, arg).resolve(context) - except AttributeError: - pass - # render the tag template - t = context.template.engine.get_template("core/tags/media_item.html") - return t.render(ctx) - - -@register.tag -def button(parser, token): - """ - Defines the compile function for the tag `{% button %}{% endbutton %}` - """ - # token.contents is the tag name + all arguments - # "button url='/url' classes='cls' id=variable" - # split and discard the first (tag name) - token_contents = token.split_contents()[1:] - # the arg keys supported by this tag - args = ["url", "classes", "id", "target", "rel", "role"] - # token_contents are string "key=value" pairs, convert to dict - kwargs = {} - for token_arg in token_contents: - k, v = token_arg.split("=") - if k in args: - kwargs[k] = v - - # parse the rest of the tag contents - nodelist = parser.parse(("endbutton",)) - # "consume" the end tag - # https://docs.djangoproject.com/en/4.2/howto/custom-template-tags/#parsing-until-another-block-tag - parser.delete_first_token() - return ButtonNodeItem(nodelist, args, **kwargs) - - -class ButtonNodeItem(template.Node): - """ - Template Node representing an instance of a tag `{% button url="" classes="" %}{% endbutton %}`. - """ - - def __init__(self, nodelist, arg_names, **kwargs): - self.nodelist = nodelist - self.arg_names = arg_names - for name in arg_names: - val = kwargs.get(name) - if val: - setattr(self, name, template.Variable(val)) - - def render(self, context): - # render the nodelist (tag inner content) into a new "body" context - ctx = template.Context({"body": self.nodelist.render(context)}, autoescape=context.autoescape) - # add the tag arguments to context, .resolve() each template.Variable - for arg in self.arg_names: - try: - ctx[arg] = getattr(self, arg).resolve(context) - except AttributeError: - pass - # adjust classes to list as-needed - classes = ctx.get("classes") - if isinstance(classes, str): - ctx["classes"] = classes.split(" ") - # render the tag template - t = context.template.engine.get_template("core/tags/button.html") - return t.render(ctx) - - -@register.inclusion_tag("core/tags/button__previous_page.html") -def button__previous_page(url): - """ - Defines a tag `{% button__previous_page url="" %}` - """ - return {"url": url} diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html b/benefits/eligibility/templates/eligibility/includes/media_item__bankcardcheck__start.html new file mode 100644 index 0000000000..cfac67ebee --- /dev/null +++ b/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 %} +
    +

    {% translate "eligibility.pages.start.bankcard.text" %}

    +
    +{% endblock body %} diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck.html b/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck.html new file mode 100644 index 0000000000..287b80e74c --- /dev/null +++ b/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 %} diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__login_gov.html b/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__login_gov.html new file mode 100644 index 0000000000..47853aa2f9 --- /dev/null +++ b/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 %} +
    +

    {% translate "eligibility.pages.start.login_gov.start_item.details" %}

    +
    +
      +
    • {% translate "eligibility.pages.start.login_gov.required_items[0]" %}
      • +
    • {% translate "eligibility.pages.start.login_gov.required_items[1]" %}
      • +
    • {% translate "eligibility.pages.start.login_gov.required_items[2]" %}
      • +
    +
    +
    +{% endblock body %} diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__mst_courtesy_card.html b/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__mst_courtesy_card.html new file mode 100644 index 0000000000..6d42aa043d --- /dev/null +++ b/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 %} +
    +

    {% translate "eligibility.pages.start.mst_cc.start_item.details" %}

    +
    +{% endblock body %} diff --git a/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__veteran.html b/benefits/eligibility/templates/eligibility/includes/media_item__idcardcheck__start__veteran.html new file mode 100644 index 0000000000..f76e0c2bb5 --- /dev/null +++ b/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 %} +
    +

    {% translate "eligibility.pages.start.veteran.start_item.details" %}

    +
    +
      +
    • {% translate "eligibility.pages.start.veteran.required_items[0]" %}
      • +
    • {% translate "eligibility.pages.start.veteran.required_items[1]" %}
      • +
    • {% translate "eligibility.pages.start.veteran.required_items[2]" %}
      • +
    • {% translate "eligibility.pages.start.veteran.required_items[3]" %}
      • +
    +

    {% translate "eligibility.pages.start.veteran.start_item.secondary_details" %}

    +
    +
    +{% endblock body %} diff --git a/benefits/eligibility/templates/eligibility/start.html b/benefits/eligibility/templates/eligibility/start.html index 0e2a1f5d81..2a34411e4f 100644 --- 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" }} @@ -8,7 +7,7 @@ {% 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 %} diff --git a/benefits/eligibility/templates/eligibility/start__login_gov.html b/benefits/eligibility/templates/eligibility/start__login_gov.html index ed9f2bce44..1d4506d3af 100644 --- a/benefits/eligibility/templates/eligibility/start__login_gov.html +++ b/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 @@

    {% translate "eligibility.pages.start.login_gov.headline" %}

    {% 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 %} -
    -

    {{ details }}

    -
    -
      -
    • {% translate "eligibility.pages.start.login_gov.required_items[0]" %}
      • -
    • {% translate "eligibility.pages.start.login_gov.required_items[1]" %}
      • -
    • {% translate "eligibility.pages.start.login_gov.required_items[2]" %}
      • -
    -
    -
    - {% 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" %} {% translate "eligibility.pages.start.help_link_text" %}. - {# 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 }} Login.gov - {% endbutton %} - {# djlint:on #} + + {{ button_text }} Login.gov + {% endblock call-to-action-button %} diff --git a/benefits/eligibility/templates/eligibility/start__mst_courtesy_card.html b/benefits/eligibility/templates/eligibility/start__mst_courtesy_card.html index 1496b72aa1..61b0339a5b 100644 --- a/benefits/eligibility/templates/eligibility/start__mst_courtesy_card.html +++ b/benefits/eligibility/templates/eligibility/start__mst_courtesy_card.html @@ -1,7 +1,5 @@ {% extends "eligibility/start.html" %} {% load i18n %} -{% load core %} -{% load eligibility %} {% block page_title %} {% translate "eligibility.pages.start.mst_cc.title" %} |  @@ -14,33 +12,17 @@

    {% translate "eligibility.pages.start.mst_cc.headline" %}

    {% 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 %} -
    -

    {{ details }}

    -
    - {% endmedia_item %} - {# djlint: on #} - {% media_item__start__bankcardcheck %} + {% include "eligibility/includes/media_item__idcardcheck__start__mst_courtesy_card.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" %} {% translate "eligibility.pages.start.help_link_text" %}. - {# djlint:on #} {% endblock help-link %} {% block call-to-action-button %} {% url "eligibility:confirm" as button_url %} - {% translate "eligibility.buttons.continue" as button_text %} - {# djlint:off #} - {% button url=button_url classes="btn btn-lg btn-primary" %} - {{ button_text }} - {% endbutton %} - {# djlint:on #} + {% translate "eligibility.buttons.continue" %} {% endblock call-to-action-button %} diff --git a/benefits/eligibility/templates/eligibility/start__veteran.html b/benefits/eligibility/templates/eligibility/start__veteran.html index b093315612..6c8d11c282 100644 --- a/benefits/eligibility/templates/eligibility/start__veteran.html +++ b/benefits/eligibility/templates/eligibility/start__veteran.html @@ -1,7 +1,5 @@ {% extends "eligibility/start.html" %} {% load i18n %} -{% load core %} -{% load eligibility %} {% block page_title %} {% translate "eligibility.pages.start.veteran.title" %} |  @@ -14,42 +12,18 @@

    {% translate "eligibility.pages.start.veteran.headline" %}

    {% 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 %} -
    -

    {{ details }}

    -
    -
      -
    • {% translate "eligibility.pages.start.veteran.required_items[0]" %}
      • -
    • {% translate "eligibility.pages.start.veteran.required_items[1]" %}
      • -
    • {% translate "eligibility.pages.start.veteran.required_items[2]" %}
      • -
    • {% translate "eligibility.pages.start.veteran.required_items[3]" %}
      • -
    -

    {% translate "eligibility.pages.start.veteran.start_item.secondary_details" %}

    -
    -
    - {% endmedia_item %} - {# djlint: on #} - {% media_item__start__bankcardcheck %} + {% include "eligibility/includes/media_item__idcardcheck__start__veteran.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" %} {% translate "eligibility.pages.start.help_link_text" %}. - {# djlint:on #} {% endblock help-link %} {% block call-to-action-button %} {% url "oauth:login" as button_url %} {% translate "eligibility.buttons.veteran.signin" as button_text %} - {# djlint:off #} - {% button url=button_url classes="btn btn-lg btn-primary" %} - {{ button_text }} - {% endbutton %} - {# djlint:on #} + {{ button_text }} {% endblock call-to-action-button %} diff --git a/benefits/eligibility/templates/eligibility/tags/media_item__start__bankcardcheck.html b/benefits/eligibility/templates/eligibility/tags/media_item__start__bankcardcheck.html deleted file mode 100644 index 5fb4140748..0000000000 --- a/benefits/eligibility/templates/eligibility/tags/media_item__start__bankcardcheck.html +++ /dev/null @@ -1,12 +0,0 @@ -{% 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 %} - -{% media_item icon="bankcardcheck" icon_alt=icon_alt heading=heading %} -
    -

    {{ details }}

    -
    -{% endmedia_item %} diff --git a/benefits/eligibility/templatetags/__init__.py b/benefits/eligibility/templatetags/__init__.py deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/benefits/eligibility/templatetags/eligibility.py b/benefits/eligibility/templatetags/eligibility.py deleted file mode 100644 index ed9eb61d89..0000000000 --- a/benefits/eligibility/templatetags/eligibility.py +++ /dev/null @@ -1,9 +0,0 @@ -from django import template - - -register = template.Library() - - -@register.inclusion_tag("eligibility/tags/media_item__start__bankcardcheck.html") -def media_item__start__bankcardcheck(): - return {}