Description

Our button group template could be improved by using loop and if/else statements.

We should address the comments found in this PR review:
#4783 (review)

Reference

For full reference, the comments have also been copied here:

• Maybe an if/elseif statement might be more readable  — along with some formatting.

      <button class="usa-button"
        {% if disabled_state == "disabled" %}
          disabled
        {% elseif disabled_state == "aria-disabled"  %}
          aria-disabled="true"
        {% endif %}
      >
        Map
      </button>

Originally posted by @mejiaj in #4783 (comment)

• We could shorten this with a loop because we have an array of items.

  <ul class="usa-button-group usa-button-group--segmented">
    {% for item in items %}
      <li class="usa-button-group__item">
        <button class="usa-button"
          {% if disabled_state == "disabled" %}
            disabled
          {% elseif disabled_state == "aria-disabled"  %}
            aria-disabled="true"
          {% endif %}
        >
          {{ item }}
        </button>
      </li>
    {% endfor %}
  </ul>

Originally posted by @mejiaj in #4783 (comment)

• If we added items to usa-button-group~segmented.json we could loop too.

Originally posted by @mejiaj in #4783 (comment)

• Not sure what this does, but it seems like this template is trying to do three different things. We should clarify where possible.

Originally posted by @mejiaj in #4783 (comment)