Skip to content

Commit

Permalink
Merge branch 'develop' of github.com:uswds/uswds into mb-update-max-date
Browse files Browse the repository at this point in the history
  • Loading branch information
@maya
maya committed Apr 15, 2019
2 parents c199490 + 1c2b2ae commit c61e22e
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 79 deletions.
14 changes: 7 additions & 7 deletions spec/unit/footer/footer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const TEMPLATE = fs.readFileSync(path.join(__dirname, '/template.html'));

const { DEBOUNCE_RATE } = behavior;
const HIDDEN = 'hidden';
const LIST_SELECTOR = '.usa-footer--big nav ul';
const PRIMARY_CONTENT_SELECTOR = '.usa-footer--big .usa-footer__primary-content--collapsible';
const BUTTON_SELECTOR = '.usa-footer__primary-link';

/**
Expand Down Expand Up @@ -43,7 +43,7 @@ describe('big footer accordion', () => {
beforeEach(() => {
body.innerHTML = TEMPLATE;

lists = document.querySelectorAll(LIST_SELECTOR);
lists = document.querySelectorAll(PRIMARY_CONTENT_SELECTOR);
buttons = document.querySelectorAll(BUTTON_SELECTOR);

window.innerWidth = 1024;
Expand All @@ -60,22 +60,22 @@ describe('big footer accordion', () => {
});

it('collapses at small screens', () => {
resizeTo(400)
return resizeTo(400)
.then(() => {
assertHidden(lists[ 0 ], true);
});
});

it('collapses then expands again on larger screens', () => {
resizeTo(400)
return resizeTo(400)
.then(() => resizeTo(1024))
.then(() => {
assertHidden(lists[ 0 ], false);
});
});

it('opens panel when clicked', () => {
resizeTo(400)
return resizeTo(400)
.then(() => {
buttons[ 0 ].click();
assertHidden(lists[ 0 ], false);
Expand All @@ -88,7 +88,7 @@ describe('big footer accordion', () => {
});

it('closes panel on subsequent click', () => {
resizeTo(400)
return resizeTo(400)
.then(() => {
buttons[0].click();
assertHidden(lists[ 0 ], false);
Expand All @@ -98,7 +98,7 @@ describe('big footer accordion', () => {
});

it('closes other panels on small screens', () => {
resizeTo(400)
return resizeTo(400)
.then(() => {
buttons[0].click();
assertHidden(lists[ 0 ], false);
Expand Down
180 changes: 108 additions & 72 deletions spec/unit/footer/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,120 @@
<footer class="usa-footer usa-footer--big" role="contentinfo">
<div class="usa-grid usa-footer__return-to-top">
<div class="grid-container usa-footer__return-to-top">
<a href="#">Return to top</a>
</div>
<div class="usa-footer__primary-section">
<div class="usa-grid">
<nav class="usa-footer__nav usa-width-two-thirds">
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content">
<li class="usa-footer__primary-link">
<h4>Topic</h4>
</li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
</ul>
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content">
<li class="usa-footer__primary-link">
<h4>Topic</h4>
</li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
</ul>
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content">
<li class="usa-footer__primary-link">
<h4>Topic</h4>
</li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
</ul>
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content">
<li class="usa-footer__primary-link">
<h4>Topic</h4>
</li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
<li><a href="javascript:void(0);">Secondary link</a></li>
</ul>
</nav>

<div class="usa-sign-up usa-width-one-third">
<h3 class="usa-sign-up__heading">Sign up</h3>

<label class="" for="email" id="">Your email address</label>
<input id="email" name="email" type="email">

<button type="submit">Sign up</button>
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-8">
<nav class="usa-footer__nav">
<div class="grid-row grid-gap-4">
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">Topic</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link that's a bit longer than most of the others</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
</ul>
</section>
</div>
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">Topic</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link that's pretty long</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
</ul>
</section>
</div>
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">Topic</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
</ul>
</section>
</div>
<div class="mobile-lg:grid-col-6 desktop:grid-col-3">
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
<h4 class="usa-footer__primary-link">Topic</h4>
<ul class="usa-list usa-list--unstyled">
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li>
</ul>
</section>
</div>
</div>
</nav>
</div>
<div class="tablet:grid-col-4">
<div class="usa-sign-up">
<h3 class="usa-sign-up__heading">Sign up</h3>
<form class="usa-form">
<label class="usa-label" for="email" id="">Your email address</label>
<input class="usa-input" id="email" name="email" type="email">
<button class="usa-button" type="submit">Sign up</button>
</form>
</div>
</div>
</div>
</div>
</div>

<div class="usa-footer__secondary-section">
<div class="usa-grid">
<div class="usa-footer__logo usa-width-one-half">
<img class="usa-footer__logo-img" src="{{ uswds.path }}/img/logo-img.png" alt="Logo image">
<h3 class="usa-footer__logo-heading">Name of Agency</h3>
</div>
<div class="usa-footer__contact-links usa-width-one-half">
<a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
<span>Facebook</span>
</a>
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
<span>Twitter</span>
</a>
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
<span>YouTube</span>
</a>
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
<span>RSS</span>
</a>
<address>
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
<div class="mobile-lg:grid-col-auto">
<img class="usa-footer__logo-img" src="../../dist/img/logo-img.png" alt="">
</div>
<div class="mobile-lg:grid-col-auto">
<h3 class="usa-footer__logo-heading">Name of Agency</h3>
</div>
</div>
<div class="usa-footer__contact-links mobile-lg:grid-col-6">
<div class="usa-footer__social-links grid-row grid-gap-1">
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
<span>Facebook</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
<span>Twitter</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
<span>YouTube</span>
</a>
</div>
<div class="grid-col-auto">
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
<span>RSS</span>
</a>
</div>
</div>
<h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
<p>(800) CALL-GOVT</p>
<a href="mailto:info@agency.gov">info@agency.gov</a>
</address>
<address class="usa-footer__address">
<div class="usa-footer__contact-info grid-row grid-gap">
<div class="grid-col-auto">
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
</div>
<div class="grid-col-auto">
<a href="mailto:info@agency.gov">info@agency.gov</a>
</div>
</div>
</address>
</div>
</div>
</div>
</div>
</footer>
</footer>

0 comments on commit c61e22e

Please sign in to comment.