Skip to content

Commit

Permalink
Merge pull request #3465 from cisagov/rjm/3400-search-ui
Browse files Browse the repository at this point in the history 
#3400: Revise UI of search bars with labels, create component - [EL]
  • Loading branch information
@rachidatecs
rachidatecs authored Feb 11, 2025
2 parents b1ef0b5 + 1401eeb commit 0b77667
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 84 deletions.
48 changes: 4 additions & 44 deletions src/registrar/templates/includes/member_domains_edit_table.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
{% load static %}

{% if member %}
<span
id="portfolio-js-value"
Expand Down Expand Up @@ -36,47 +34,9 @@ <h2>

<div class="section-outlined__header margin-bottom-3 grid-row">
<!-- ---------- SEARCH ---------- -->
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<section aria-label="Member domains search component">
<form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %}
<label class="usa-label display-block margin-bottom-05" for="edit-member-domains__search-field">
{% if has_edit_members_portfolio_permission %}
Search all domains
{% else %}
Search domains assigned to
{% if member %}
{{ member.email }}
{% else %}
{{ portfolio_invitation.email }}
{% endif %}
{% endif %}
</label>
<div class="usa-search--show-label__input-wrapper">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="edit-member-domains__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<input
class="usa-input"
id="edit-member-domains__search-field"
type="search"
name="member-domains-search"
/>
<button class="usa-button" type="submit" id="edit-member-domains__search-field-submit">
<span class="usa-search__submit-text">Search </span>
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</div>
</form>
</section>
</div>
{% with label_text="Search all domains" item_name="edit-member-domains" aria_label_text="Member domains search component" %}
{% include "includes/search.html" %}
{% endwith %}
</div>

<!-- ---------- MAIN TABLE ---------- -->
Expand All @@ -85,7 +45,7 @@ <h2>
<caption class="sr-only">member domains</caption>
<thead>
<tr>
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105"><span class="sr-only">Assigned domains</span></th>
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
<!-- We override default sort to be name/ascending in the JSON endpoint. We add the correct aria-sort attribute here to reflect that in the UI -->
<th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
</tr>
Expand Down
52 changes: 12 additions & 40 deletions src/registrar/templates/includes/member_domains_table.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
{% load static %}

{% if member %}
<span
id="portfolio-js-value"
Expand Down Expand Up @@ -34,45 +32,19 @@ <h2>
{% endif %}
</h2>

<div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
<div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
<!-- ---------- SEARCH ---------- -->
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<section aria-label="Member domains search component">
<form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %}
<label class="usa-label display-block margin-bottom-05" for="member-domains__search-field">
Search domains assigned to
{% if member %}
{{ member.email }}
{% else %}
{{ portfolio_invitation.email }}
{% endif %}
</label>
<div class="usa-search--show-label__input-wrapper">
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="member-domains__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
<input
class="usa-input"
id="member-domains__search-field"
type="search"
name="member-domains-search"
/>
<button class="usa-button" type="submit" id="member-domains__search-field-submit">
<span class="usa-search__submit-text">Search </span>
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
</div>
</form>
</section>
</div>
{% with label_text="Domains assigned to " %}
{% if member %}
{% with label_text=label_text|add:member.email item_name="member-domains" aria_label_text="Member domains search component" %}
{% include "includes/search.html" %}
{% endwith %}
{% else %}
{% with label_text=label_text|add:portfolio_invitation.email item_name="member-domains" aria_label_text="Member domains search component" %}
{% include "includes/search.html" %}
{% endwith %}
{% endif %}
{% endwith %}
</div>

<!-- ---------- MAIN TABLE ---------- -->
Expand Down
34 changes: 34 additions & 0 deletions src/registrar/templates/includes/search.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{% load static %}

<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
<section aria-label="{{aria_label_text}}">
<form class="usa-search usa-search--show-label" method="POST" role="search">
{% csrf_token %}
<label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
{{ label_text }}
</label>
<div class="usa-search--show-label__input-wrapper flex-align-self-end">
<input
class="usa-input minw-15"
id="{{item_name}}__search-field"
type="search"
name="{{item_name}}-search"
/>
<button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
<span class="usa-search__submit-text">Search </span>
<img
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
class="usa-search__submit-icon"
alt="Search"
/>
</button>
<button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
</svg>
Reset
</button>
</div>
</form>
</section>
</div>

0 comments on commit 0b77667

Please sign in to comment.