Skip to content

Commit 0b77667

Browse files
rachidatecsrachidatecs
authored
Merge pull request #3465 from cisagov/rjm/3400-search-ui
#3400: Revise UI of search bars with labels, create component - [EL]
2 parents b1ef0b5 + 1401eeb commit 0b77667

File tree

3 files changed

+50
-84
lines changed

3 files changed

+50
-84
lines changed

‎src/registrar/templates/includes/member_domains_edit_table.html

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
{% load static %}
2-
31
{% if member %}
42
<span
53
id="portfolio-js-value"
@@ -36,47 +34,9 @@ <h2>
3634

3735
<div class="section-outlined__header margin-bottom-3 grid-row">
3836
<!-- ---------- SEARCH ---------- -->
39-
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
40-
<section aria-label="Member domains search component">
41-
<form class="usa-search usa-search--show-label" method="POST" role="search">
42-
{% csrf_token %}
43-
<label class="usa-label display-block margin-bottom-05" for="edit-member-domains__search-field">
44-
{% if has_edit_members_portfolio_permission %}
45-
Search all domains
46-
{% else %}
47-
Search domains assigned to
48-
{% if member %}
49-
{{ member.email }}
50-
{% else %}
51-
{{ portfolio_invitation.email }}
52-
{% endif %}
53-
{% endif %}
54-
</label>
55-
<div class="usa-search--show-label__input-wrapper">
56-
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="edit-member-domains__reset-search" type="button">
57-
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
58-
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
59-
</svg>
60-
Reset
61-
</button>
62-
<input
63-
class="usa-input"
64-
id="edit-member-domains__search-field"
65-
type="search"
66-
name="member-domains-search"
67-
/>
68-
<button class="usa-button" type="submit" id="edit-member-domains__search-field-submit">
69-
<span class="usa-search__submit-text">Search </span>
70-
<img
71-
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
72-
class="usa-search__submit-icon"
73-
alt="Search"
74-
/>
75-
</button>
76-
</div>
77-
</form>
78-
</section>
79-
</div>
37+
{% with label_text="Search all domains" item_name="edit-member-domains" aria_label_text="Member domains search component" %}
38+
{% include "includes/search.html" %}
39+
{% endwith %}
8040
</div>
8141

8242
<!-- ---------- MAIN TABLE ---------- -->
@@ -85,7 +45,7 @@ <h2>
8545
<caption class="sr-only">member domains</caption>
8646
<thead>
8747
<tr>
88-
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105"><span class="sr-only">Assigned domains</span></th>
48+
<th data-sortable="checked" scope="col" role="columnheader" class="padding-right-105 width-6"><span class="sr-only">Assigned domains</span></th>
8949
<!-- 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 -->
9050
<th data-sortable="name" scope="col" role="columnheader" aria-sort="descending">Domains</th>
9151
</tr>

‎src/registrar/templates/includes/member_domains_table.html

Lines changed: 12 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
{% load static %}
2-
31
{% if member %}
42
<span
53
id="portfolio-js-value"
@@ -34,45 +32,19 @@ <h2>
3432
{% endif %}
3533
</h2>
3634

37-
<div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
35+
<div class="section-outlined__header margin-bottom-3 grid-row" id="edit-member-domains__search">
3836
<!-- ---------- SEARCH ---------- -->
39-
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
40-
<section aria-label="Member domains search component">
41-
<form class="usa-search usa-search--show-label" method="POST" role="search">
42-
{% csrf_token %}
43-
<label class="usa-label display-block margin-bottom-05" for="member-domains__search-field">
44-
Search domains assigned to
45-
{% if member %}
46-
{{ member.email }}
47-
{% else %}
48-
{{ portfolio_invitation.email }}
49-
{% endif %}
50-
</label>
51-
<div class="usa-search--show-label__input-wrapper">
52-
<button class="usa-button usa-button--unstyled margin-right-3 display-none" id="member-domains__reset-search" type="button">
53-
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
54-
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
55-
</svg>
56-
Reset
57-
</button>
58-
<input
59-
class="usa-input"
60-
id="member-domains__search-field"
61-
type="search"
62-
name="member-domains-search"
63-
/>
64-
<button class="usa-button" type="submit" id="member-domains__search-field-submit">
65-
<span class="usa-search__submit-text">Search </span>
66-
<img
67-
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
68-
class="usa-search__submit-icon"
69-
alt="Search"
70-
/>
71-
</button>
72-
</div>
73-
</form>
74-
</section>
75-
</div>
37+
{% with label_text="Domains assigned to " %}
38+
{% if member %}
39+
{% with label_text=label_text|add:member.email item_name="member-domains" aria_label_text="Member domains search component" %}
40+
{% include "includes/search.html" %}
41+
{% endwith %}
42+
{% else %}
43+
{% with label_text=label_text|add:portfolio_invitation.email item_name="member-domains" aria_label_text="Member domains search component" %}
44+
{% include "includes/search.html" %}
45+
{% endwith %}
46+
{% endif %}
47+
{% endwith %}
7648
</div>
7749

7850
<!-- ---------- MAIN TABLE ---------- -->

‎src/registrar/templates/includes/search.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{% load static %}
2+
3+
<div class="section-outlined__search mobile:grid-col-12 desktop:grid-col-9">
4+
<section aria-label="{{aria_label_text}}">
5+
<form class="usa-search usa-search--show-label" method="POST" role="search">
6+
{% csrf_token %}
7+
<label class="usa-label display-block margin-bottom-05 maxw-none" for="{{item_name}}__search-field">
8+
{{ label_text }}
9+
</label>
10+
<div class="usa-search--show-label__input-wrapper flex-align-self-end">
11+
<input
12+
class="usa-input minw-15"
13+
id="{{item_name}}__search-field"
14+
type="search"
15+
name="{{item_name}}-search"
16+
/>
17+
<button class="usa-button" type="submit" id="{{item_name}}__search-field-submit">
18+
<span class="usa-search__submit-text">Search </span>
19+
<img
20+
src="{% static 'img/usa-icons-bg/search--white.svg' %}"
21+
class="usa-search__submit-icon"
22+
alt="Search"
23+
/>
24+
</button>
25+
<button class="usa-button usa-button--unstyled margin-left-3 display-none flex-1" id="{{item_name}}__reset-search" type="button">
26+
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24">
27+
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
28+
</svg>
29+
Reset
30+
</button>
31+
</div>
32+
</form>
33+
</section>
34+
</div>

0 commit comments

Comments
 (0)