18F/web-design-standards

{% set close_icon %}
  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
    <use xlink:href="./img/sprite.svg#{{ close_button.icon_type | default("close") }}"></use>
  </svg>
{% endset %}

<div class="margin-y-3">
  <a href="#{{ id }}" class="usa-button" aria-controls="{{ id }}" data-open-modal>{{ trigger.text }}</a>
  <div class="usa-modal {{ modifier }}" id="{{ id }}" aria-labelledby="{{ header.id }}" aria-describedby="{{ describedby }}">
    <div class="usa-modal__content">
      <div class="usa-modal__main">
        <h2 class="usa-modal__heading" id="{{ header.id }}">
          {{ header.text }}
        </h2>
        <div class="usa-prose">
          <p id="{{ description.id }}">{{ description.text }}</p>

          <div class="usa-form-group">
            <label class="usa-label" id="appointment-date-label-modal" for="appointment-date-modal"
              >Appointment date</label
            >
            <div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
            <div class="usa-date-picker">
              <input
                class="usa-input"
                id="appointment-date-modal"
                name="appointment-date"
                aria-labelledby="appointment-date-label-modal"
                aria-describedby="appointment-date-hint"
              />
            </div>
          </div>

          <label class="usa-label" for="CB-modal">Combobox</label>
          <div class="usa-combo-box">
            <select class="usa-select" name="modal-cb" id="CB-modal">
              <option value>Combo a Box</option>
              <option value="combo">Combo</option>
              <option value="box">Box</option>
              <option value="combo-box">Combobox</option>
            </select>
          </div>
          <div class="margin-y-3"></div>
        </div>
        <div class="usa-modal__footer">
          <ul class="usa-button-group">
            {% for action in footer -%}
              <li class="usa-button-group__item">
                <button type="button" class="{{ action.class | default("usa-button") }}" data-close-modal>{{ action.text }}</button>
              </li>
            {% endfor -%}
          </ul>
        </div>
      </div>
      <button type="button" class="usa-button usa-modal__close" aria-label="{{ close_button.aria_label }}" data-close-modal>
          {{ close_icon | raw }}
      </button>
    </div>
  </div>
</div>