Upgrade to latest version of design standards (#13)

* Closes #10
* Also add some instructions in README on how to do this manually

README.md

@@ -31,6 +31,31 @@ more, visit [the docs](https://standards.usa.gov/).
 
 See [CONTRIBUTING](CONTRIBUTING.md) for additional information.
 
+## Upgrading gem to use a new version of the US Web Design Standards
+
+Someday, we hope to automate this. For now, here is how to manually update to a
+new version of the design standards.
+
+1. Download the latest version of the standards locally
+
+```bash
+$ npm install --save uswds
+```
+
+1. Remove the existing vendored assets
+
+```bash
+$ rm vendor/assets/stylsheets/uswds/*
+```
+
+1. Copy the downloaded assets into the correct location in `vendor`
+
+```bash
+$ mv node_modules/uswds/src/stylesheets/* vendor/assets/stylesheets/uswds/
+```
+
+1. Repeat for fonts, images, and javascripts.
+
 ## Public domain
 
 This project is in the worldwide [public domain](LICENSE.md). As stated in [CONTRIBUTING](CONTRIBUTING.md):

vendor/assets/javascripts/components/accordion.js

@@ -1,67 +1,80 @@
+var select = require('../utils/select');
 
-var $ = require('jquery');
+/**
+ * @name showPanelListener
+ * @desc The event handler for clicking on a button in an accordion.
+ * @param {HTMLElement} el - An HTML element most likely a <button>.
+ * @param {Object} ev - A DOM event object.
+ */
+function showPanelListener (el, ev) {
+  var expanded = el.getAttribute('aria-expanded') === 'true';
+  this.hideAll();
+  if (!expanded) {
+    this.show(el);
+  }
+  return false;
+}
 
 /**
  * @class Accordion
  *
  * An accordion component.
  *
- * @param {jQuery} el A jQuery html element to turn into an accordion.
+ * @param {HTMLElement} el An HTMLElement to turn into an accordion.
  */
-function Accordion ($el) {
+function Accordion (el) {
   var self = this;
-  this.$root = $el;
+  this.root = el;
 
   // delegate click events on each <button>
-  this.$root.on('click', 'button', function (ev) {
-    var $button = $(this);
-    var expanded = $button.attr('aria-expanded') === 'true';
-    ev.preventDefault();
-    self.hideAll();
-    if (!expanded) {
-      self.show($button);
+  var buttons = select('button', this.root);
+  buttons.forEach(function (el) {
+    if (el.attachEvent) {
+      el.attachEvent('onclick', showPanelListener.bind(self, el));
+    } else {
+      el.addEventListener('click', showPanelListener.bind(self, el));
     }
   });
 
   // find the first expanded button
-  var $expanded = this.$('button[aria-expanded=true]');
+  var expanded = this.$('button[aria-expanded=true]')[ 0 ];
   this.hideAll();
-  if ($expanded.length) {
-    this.show($expanded);
+  if (expanded !== undefined) {
+    this.show(expanded);
   }
 }
 
 /**
  * @param {String} selector
- * @return {jQuery}
+ * @return {Array}
  */
 Accordion.prototype.$ = function (selector) {
-  return this.$root.find(selector);
+  return select(selector, this.root);
 };
 
 /**
- * @param {jQuery} button
+ * @param {HTMLElement} button
  * @return {Accordion}
  */
-Accordion.prototype.hide = function ($button) {
-  var selector = $button.attr('aria-controls'),
-    $content = this.$('#' + selector);
+Accordion.prototype.hide = function (button) {
+  var selector = button.getAttribute('aria-controls'),
+    content = this.$('#' + selector)[ 0 ];
 
-  $button.attr('aria-expanded', false);
-  $content.attr('aria-hidden', true);
+  button.setAttribute('aria-expanded', false);
+  content.setAttribute('aria-hidden', true);
   return this;
 };
 
 /**
- * @param {jQuery} button
+ * @param {HTMLElement} button
  * @return {Accordion}
  */
-Accordion.prototype.show = function ($button) {
-  var selector = $button.attr('aria-controls'),
-    $content = this.$('#' + selector);
+Accordion.prototype.show = function (button) {
+  var selector = button.getAttribute('aria-controls'),
+    content = this.$('#' + selector)[ 0 ];
 
-  $button.attr('aria-expanded', true);
-  $content.attr('aria-hidden', false);
+  button.setAttribute('aria-expanded', true);
+  content.setAttribute('aria-hidden', false);
   return this;
 };
 
@@ -70,8 +83,9 @@ Accordion.prototype.show = function ($button) {
  */
 Accordion.prototype.hideAll = function () {
   var self = this;
-  this.$('ul > li > button, .usa-accordion-button').each(function () {
-    self.hide($(this));
+  var buttons = this.$('ul > li > button, .usa-accordion-button');
+  buttons.forEach(function (button) {
+    self.hide(button);
   });
   return this;
 };

vendor/assets/javascripts/components/footer.js

@@ -0,0 +1,60 @@
+var select = require('../utils/select');
+var addClass = require('../utils/add-class');
+var removeClass = require('../utils/remove-class');
+var dispatch = require('../utils/dispatch');
+
+function getSiblings (el) {
+  var n = el.parentNode.firstChild;
+  var matches = [];
+
+  while (n) {
+    if (n.nodeType == 1 && n != el) {
+      matches.push(n);
+    }
+    n = n.nextSibling;
+  }
+
+  return matches;
+}
+
+var showPanelListener = function () {
+  var panelToShow = this.parentNode;
+  var otherPanels = getSiblings(panelToShow);
+  removeClass(panelToShow, 'hidden');
+  otherPanels.forEach(function (el) {
+    addClass(el, 'hidden');
+  });
+};
+
+var events= [];
+
+module.exports = function footerAccordion () {
+
+  var navList = select('.usa-footer-big nav ul');
+  var primaryLink = select('.usa-footer-big nav .usa-footer-primary-link');
+
+  if (events.length) {
+    events.forEach(function (e) {
+      e.off();
+    });
+    events = [];
+  }
+
+  if (window.innerWidth < 600) {
+
+    navList.forEach(function (el) {
+      addClass(el, 'hidden');
+    });
+
+    primaryLink.forEach(function (el) {
+      events.push(
+        dispatch(el, 'click', showPanelListener)
+      );
+    });
+
+  } else {
+    navList.forEach(function (el) {
+      removeClass(el, 'hidden');
+    });
+  }
+};

vendor/assets/javascripts/components/header/mobile.js

@@ -0,0 +1,25 @@
+var select = require('../../utils/select');
+var addClass = require('../../utils/add-class');
+var removeClass = require('../../utils/remove-class');
+var dispatch = require('../../utils/dispatch');
+
+var navElements = select('.usa-menu-btn, .usa-overlay, .usa-nav-close');
+var toggleElements = select('.usa-overlay, .usa-nav');
+var navCloseElement = select('.usa-nav-close')[ 0 ];
+
+navElements.forEach(function (element) {
+  dispatch(element, 'click touchstart', function (e) {
+    toggleElements.forEach(function (element) {
+      toggleClass(element, 'is-visible');
+    });
+    toggleClass(document.body, 'usa-mobile_nav-active');
+    navCloseElement.focus();
+    return false;
+  });
+});
+
+function toggleClass (element, className) {
+  if (element.classList) {
+    element.classList.toggle(className);
+  }
+}

vendor/assets/javascripts/components/header/search.js

@@ -0,0 +1,52 @@
+var select = require('../../utils/select');
+var addClass = require('../../utils/add-class');
+var removeClass = require('../../utils/remove-class');
+var dispatch = require('../../utils/dispatch');
+
+var searchForm = select('.js-search-form')[ 0 ];
+var searchButton = select('.js-search-button')[ 0 ];
+var searchButtonContainer = select('.js-search-button-container')[ 0 ];
+var searchDispatcher;
+
+if (searchButton && searchForm) {
+  dispatch(searchButton, 'click touchstart', searchButtonClickHandler);
+}
+
+function searchButtonClickHandler (event) {
+  if (isOpen(searchForm)) {
+    closeSearch();
+  } else {
+    openSearch();
+    searchDispatcher = dispatch(document.body, 'click touchstart', searchOpenClickHandler);
+  }
+
+  return false;
+}
+
+function searchOpenClickHandler (event) {
+  var target = event.target;
+  if (! searchFormContains(target)) {
+    closeSearch();
+    searchDispatcher.off();
+  }
+}
+
+function openSearch () {
+  addClass(searchForm, 'is-visible');
+  addClass(searchButton, 'is-hidden');
+}
+
+function closeSearch () {
+  removeClass(searchForm, 'is-visible');
+  removeClass(searchButton, 'is-hidden');
+}
+
+function isOpen (element) {
+  var classRegexp = new RegExp('(^| )is-visible( |$)', 'gi');
+  return classRegexp.test(element.className);
+}
+
+function searchFormContains (element) {
+  return (searchForm && searchForm.contains(element)) ||
+         (searchButtonContainer && searchButtonContainer.contains(element));
+}

vendor/assets/javascripts/components/toggle-field-mask.js

@@ -1,5 +1,12 @@
-module.exports = function ($field, showing) {
-  $field.attr('autocapitalize', 'off');
-  $field.attr('autocorrect', 'off');
-  $field.attr('type', showing ? 'password' : 'text');
+/**
+ * Flips given INPUT elements between masked (hiding the field value) and unmasked
+ * @param {Array.HTMLElement} fields - An array of INPUT elements
+ * @param {Boolean} mask - Whether the mask should be applied, hiding the field value
+ */
+module.exports = function (fields, mask) {
+  fields.forEach(function (field) {
+    field.setAttribute('autocapitalize', 'off');
+    field.setAttribute('autocorrect', 'off');
+    field.setAttribute('type', mask ? 'password' : 'text');
+  });
 };