Skip to content

Commit 206db5d

Browse files
carlosvallecarlosvalle
authored
Merge pull request #6 from GSA/toolbar-updates
Update to toolbar, accordion & banner components
2 parents 006b3f1 + 0bfa064 commit 206db5d

6 files changed

Lines changed: 180 additions & 126 deletions

File tree

‎src/components/banner/banner.njk‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<header class="usa-banner__header">
44
<div class="usa-banner__inner">
55
<div class="grid-col-auto">
6-
<img class="usa-banner__header-flag" src="{{'/dist/img/us_flag_small.png' | path }}" alt="U.S. flag">
6+
<span class="usa-banner__header-flag"></span>
77
</div>
88
<div class="grid-col-fill tablet:grid-col-auto">
99
<p class="usa-banner__header-text">An official website of the United States government</p>
@@ -18,7 +18,7 @@
1818
<div class="usa-banner__content usa-accordion__content" id="gov-banner">
1919
<div class="grid-row grid-gap-lg">
2020
<div class="usa-banner__guidance tablet:grid-col-6">
21-
<img class="usa-banner__icon usa-media-block__img" src="{{'/dist/img/icon-dot-gov.svg' | path }}" alt="Dot gov">
21+
<span class="usa-banner__icon usa-media-block__img"></span>
2222
<div class="usa-media-block__body">
2323
<p>
2424
<strong>The .gov means it’s official.</strong>
@@ -28,7 +28,7 @@
2828
</div>
2929
</div>
3030
<div class="usa-banner__guidance tablet:grid-col-6">
31-
<img class="usa-banner__icon usa-media-block__img" src="{{ '/dist/img/icon-https.svg' | path }}" alt="Https">
31+
<span class="usa-banner__icon usa-media-block__img"></span>
3232
<div class="usa-media-block__body">
3333
<p>
3434
<strong>The site is secure.</strong>

‎src/components/toolbar/toolbar.njk‎

Lines changed: 134 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</a>
2424
</div>
2525
</div>
26-
<div class="sam-toolbar__content">
26+
<div style="width: 300px" class="sam-toolbar__content" hidden>
2727
<div class="sam-accordion" data-allow-multiple>
2828
<div class="sam-accordion__item">
2929
<h3>
@@ -46,33 +46,35 @@
4646
class="sam-accordion__panel"
4747
hidden=""
4848
>
49-
<nav>
50-
<ul class="usa-sidenav">
51-
<li class="usa-sidenav__item">
52-
<a href="">Parent link</a>
53-
</li>
54-
<li class="usa-sidenav__item">
55-
<a href="" class="usa-current">Current page</a>
56-
<ul class="usa-sidenav__sublist">
57-
<li class="usa-sidenav__item">
58-
<a href="">Child link</a>
59-
</li>
60-
<li class="usa-sidenav__item">
61-
<a href="">Child link</a>
62-
</li>
63-
<li class="usa-sidenav__item">
64-
<a href="">Child link</a>
65-
</li>
66-
<li class="usa-sidenav__item">
67-
<a href="">Child link</a>
68-
</li>
69-
</ul>
70-
</li>
71-
<li class="usa-sidenav__item">
72-
<a href="">Parent link</a>
73-
</li>
74-
</ul>
75-
</nav>
49+
<div class="sam-accordion__panel-body">
50+
<nav>
51+
<ul class="usa-sidenav">
52+
<li class="usa-sidenav__item">
53+
<a href="">Parent link</a>
54+
</li>
55+
<li class="usa-sidenav__item">
56+
<a href="" class="usa-current">Current page</a>
57+
<ul class="usa-sidenav__sublist">
58+
<li class="usa-sidenav__item">
59+
<a href="">Child link</a>
60+
</li>
61+
<li class="usa-sidenav__item">
62+
<a href="">Child link</a>
63+
</li>
64+
<li class="usa-sidenav__item">
65+
<a href="">Child link</a>
66+
</li>
67+
<li class="usa-sidenav__item">
68+
<a href="">Child link</a>
69+
</li>
70+
</ul>
71+
</li>
72+
<li class="usa-sidenav__item">
73+
<a href="">Parent link</a>
74+
</li>
75+
</ul>
76+
</nav>
77+
</div>
7678
</div>
7779
</div>
7880
<div class="sam-accordion__item">
@@ -96,99 +98,114 @@
9698
class="sam-accordion__panel"
9799
hidden=""
98100
>
99-
<div
100-
class="sam-accordion sam-accordion--basic"
101-
data-allow-multiple
102-
>
103-
<div class="sam-accordion__item">
104-
<h3>
105-
<button
106-
aria-expanded="false"
107-
class="sam-accordion__trigger"
108-
aria-controls="accordion-serv-class-content"
109-
id="accordion-serv-class-id"
110-
>
111-
<span class="sam-accordion__title">
112-
Service Classifications
113-
<span class="sam-accordion__icon"></span>
114-
</span>
115-
</button>
116-
</h3>
117-
<div
118-
id="accordion-serv-class-content"
119-
role="region"
120-
aria-labelledby="accordion-serv-class-id"
121-
class="sam-accordion__panel"
122-
hidden=""
123-
>
124-
<label class="usa-label" for="input-type-naics"
125-
>NAICS</label
101+
<div class="sam-accordion__panel-body">
102+
<div
103+
class="sam-accordion sam-accordion--basic"
104+
data-allow-multiple
105+
>
106+
<div class="sam-accordion__item">
107+
<h3>
108+
<button
109+
aria-expanded="false"
110+
class="sam-accordion__trigger"
111+
aria-controls="accordion-serv-class-content"
112+
id="accordion-serv-class-id"
113+
>
114+
<span class="sam-accordion__title">
115+
Service Classifications
116+
<span class="sam-accordion__icon"></span>
117+
</span>
118+
</button>
119+
</h3>
120+
<div
121+
id="accordion-serv-class-content"
122+
role="region"
123+
aria-labelledby="accordion-serv-class-id"
124+
class="sam-accordion__panel"
125+
hidden=""
126126
>
127-
<input
128-
class="usa-input"
129-
id="input-type-naics"
130-
name="input-type-naics"
131-
type="text"
132-
/>
133-
<div class="selected-chips" style="margin-top: 5px;">
134-
<span class="sam-tag sam-tag--chip">
135-
111140 -- Wheat Farming
136-
<button class="sam-tag__close">
137-
<span class="fas fa-times" aria-hidden="true"></span>
138-
</button>
139-
</span>
140-
<span class="sam-tag sam-tag--chip">
141-
212222 -- Silver Ore Mining
142-
<button class="sam-tag__close">
143-
<span class="fas fa-times" aria-hidden="true"></span>
144-
</button>
145-
</span>
146-
<span class="sam-tag sam-tag--chip">
147-
541850 -- Outdoor Advertising
148-
<button class="sam-tag__close">
149-
<span class="fas fa-times" aria-hidden="true"></span>
150-
</button>
151-
</span>
127+
<div class="sam-accordion__panel-body">
128+
<label class="usa-label" for="input-type-naics"
129+
>NAICS</label
130+
>
131+
<input
132+
class="usa-input"
133+
id="input-type-naics"
134+
name="input-type-naics"
135+
type="text"
136+
/>
137+
<div class="selected-chips" style="margin-top: 5px;">
138+
<span class="sam-tag sam-tag--chip">
139+
111140 -- Wheat Farming
140+
<button class="sam-tag__close">
141+
<span
142+
class="fas fa-times"
143+
aria-hidden="true"
144+
></span>
145+
</button>
146+
</span>
147+
<span class="sam-tag sam-tag--chip">
148+
212222 -- Silver Ore Mining
149+
<button class="sam-tag__close">
150+
<span
151+
class="fas fa-times"
152+
aria-hidden="true"
153+
></span>
154+
</button>
155+
</span>
156+
<span class="sam-tag sam-tag--chip">
157+
541850 -- Outdoor Advertising
158+
<button class="sam-tag__close">
159+
<span
160+
class="fas fa-times"
161+
aria-hidden="true"
162+
></span>
163+
</button>
164+
</span>
165+
</div>
166+
<label class="usa-label" for="input-type-psc">PSC</label>
167+
<input
168+
class="usa-input"
169+
id="input-type-psc"
170+
name="input-type-psc"
171+
type="text"
172+
/>
173+
</div>
152174
</div>
153-
<label class="usa-label" for="input-type-psc">PSC</label>
154-
<input
155-
class="usa-input"
156-
id="input-type-psc"
157-
name="input-type-psc"
158-
type="text"
159-
/>
160175
</div>
161-
</div>
162-
<div class="sam-accordion__item">
163-
<h3>
164-
<button
165-
aria-expanded="false"
166-
class="sam-accordion__trigger"
167-
aria-controls="accordion-entity-content"
168-
id="accordion-entity-id"
169-
>
170-
<span class="sam-accordion__title">
171-
Entity Name/UEI
172-
<span class="sam-accordion__icon"></span>
173-
</span>
174-
</button>
175-
</h3>
176-
<div
177-
id="accordion-entity-content"
178-
role="region"
179-
aria-labelledby="accordion-entity-id"
180-
class="sam-accordion__panel"
181-
hidden=""
182-
>
183-
<label class="usa-label" for="input-type-entity"
184-
>Name</label
176+
<div class="sam-accordion__item">
177+
<h3>
178+
<button
179+
aria-expanded="false"
180+
class="sam-accordion__trigger"
181+
aria-controls="accordion-entity-content"
182+
id="accordion-entity-id"
183+
>
184+
<span class="sam-accordion__title">
185+
Entity Name/UEI
186+
<span class="sam-accordion__icon"></span>
187+
</span>
188+
</button>
189+
</h3>
190+
<div
191+
id="accordion-entity-content"
192+
role="region"
193+
aria-labelledby="accordion-entity-id"
194+
class="sam-accordion__panel"
195+
hidden=""
185196
>
186-
<input
187-
class="usa-input"
188-
id="input-type-entity"
189-
name="input-type-entity"
190-
type="text"
191-
/>
197+
<div class="sam-accordion__panel-body">
198+
<label class="usa-label" for="input-type-entity"
199+
>Name</label
200+
>
201+
<input
202+
class="usa-input"
203+
id="input-type-entity"
204+
name="input-type-entity"
205+
type="text"
206+
/>
207+
</div>
208+
</div>
192209
</div>
193210
</div>
194211
</div>

‎src/js/components/toolbar.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const samToolbar = document.querySelector(".sam-toolbar");
22
if(samToolbar){
3+
const samToolbarContent = samToolbar.querySelector(".sam-toolbar__content");
34
const samToolbarSibling = samToolbar.nextElementSibling;
45
const samToolbarToggleBtn = samToolbar.querySelector(
56
".sam-toolbar__toogle-btn"
@@ -16,12 +17,14 @@ if(samToolbar){
1617
samToolbarSibling.addEventListener("transitionend", startExpandedAnim);
1718
samToolbarSibling.classList.add("sam-toolbar__anim--expanded");
1819
samPageContent.classList.add("sam-toolbar__anim--expanded");
20+
samToolbarContent.removeAttribute("hidden");
1921
});
2022
} else {
2123
const endExpandedAnim = () => {
2224
samToolbar.removeEventListener("transitionend", endExpandedAnim);
2325
samToolbarSibling.classList.remove("sam-toolbar__anim--expanded");
2426
samPageContent.classList.remove("sam-toolbar__anim--expanded");
27+
samToolbarContent.setAttribute("hidden", "");
2528
};
2629
requestAnimationFrame(() => {
2730
samToolbar.addEventListener("transitionend", endExpandedAnim);

‎src/stylesheets/components/_accordion.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
.sam-accordion {
33
border: 1px solid #d8d8d8;
44
padding-bottom: 10px;
5+
display: block;
56
}
67

78
.sam-accordion.focus {
@@ -13,6 +14,8 @@
1314
}
1415

1516
.sam-accordion__item {
17+
display: block;
18+
overflow: hidden;
1619
padding: 6px;
1720
border: 1px solid #d8d8d8;
1821
background-color: #fff;
@@ -36,7 +39,7 @@
3639
text-align: left;
3740
width: 100%;
3841
outline: none !important;
39-
42+
cursor: pointer;
4043
border-style: none;
4144
}
4245

@@ -123,6 +126,10 @@
123126
}
124127

125128
.sam-accordion__panel {
129+
padding: 0;
130+
}
131+
132+
.sam-accordion__panel-body{
126133
padding: 8px 5px;
127134
}
128135

@@ -183,7 +190,7 @@
183190
content: none;
184191
}
185192

186-
.sam-accordion.sam-accordion--basic .sam-accordion__panel {
193+
.sam-accordion.sam-accordion--basic .sam-accordion__panel .sam-accordion__panel-body{
187194
margin: 0px 5px;
188195
padding: 1px 8px 10px;
189196
background-color: white;

‎src/stylesheets/components/_banner.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,26 @@
33
&:hover {
44
@include u-text($theme-link-hover-color);
55
}
6-
}
6+
}
7+
8+
// SAM specific
9+
.usa-banner__header-flag {
10+
width: 16px;
11+
height: 11px;
12+
background-image: url('#{$theme-image-path}/us_flag_small.png');
13+
background-repeat: no-repeat;
14+
}
15+
16+
.usa-banner__content .usa-banner__guidance .usa-banner__icon {
17+
width: 40px;
18+
height: 40px;
19+
background-repeat: no-repeat;
20+
}
21+
22+
.usa-banner__content .usa-banner__guidance:first-child .usa-banner__icon {
23+
background-image: url('#{$theme-image-path}/icon-dot-gov.svg');
24+
}
25+
26+
.usa-banner__content .usa-banner__guidance:last-child .usa-banner__icon {
27+
background-image: url('#{$theme-image-path}/icon-https.svg');
28+
}

0 commit comments

Comments
 (0)