From a81fce99224821263e5a0b947813eb8dae3b87b7 Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Mon, 9 Feb 2015 15:50:42 -0500
Subject: [PATCH 1/7] Add modal__block for spacing in modals.

---
 .../dosomething_campaign.module               |  2 +
 .../dosomething_helpers/modal-links.tpl.php   | 66 +++++++++++--------
 .../dosomething_signup.signup_data_form.inc   | 14 ++--
 .../includes/auth/login.inc                   |  4 +-
 .../includes/auth/register.inc                |  4 +-
 .../scss/content/_modal-creator.scss          |  4 --
 .../templates/campaign/node--campaign.tpl.php |  4 +-
 .../partials/campaign-creator.tpl.php         |  4 +-
 .../old-reportback-submitted-images.tpl.php   |  4 +-
 9 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module b/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module
index 08c0621ce..b61b11749 100644
--- a/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module
+++ b/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module
@@ -549,7 +549,9 @@ function dosomething_campaign_add_signup_data_form_vars(&$node) {
   if (!$sid) {
     // Staff is viewing a campaign which they haven't signed up for.
     $node->content['signup_data_form'] = array(
+      '#prefix' => '<div class="modal__block">',
       '#markup' => "You haven't signed up for this campaign!",
+      '#suffix' => '</div>',
     );
     return;
   }
diff --git a/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php b/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php
index bd2fe0df6..b441bd395 100644
--- a/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php
+++ b/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php
@@ -20,12 +20,16 @@
 <?php if (isset($modals['faq'])): ?>
 <div data-modal id="modal-faq" role="dialog">
   <h2 class="heading -banner"><?php print t('FAQs'); ?></h2>
-  <?php foreach ($modals['faq'] as $item): ?>
-    <h4><?php print $item['header']; ?></h4>
-    <?php print $item['copy'] ?>
-  <?php endforeach; ?>
-  <div class="form-actions">
-    <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a>
+  <div class="modal__block">
+    <?php foreach ($modals['faq'] as $item): ?>
+      <h4><?php print $item['header']; ?></h4>
+      <?php print $item['copy'] ?>
+    <?php endforeach; ?>
+  </div>
+  <div class="modal__block">
+    <div class="form-actions">
+      <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a>
+    </div>
   </div>
 </div>
 <?php endif; ?>
@@ -33,22 +37,28 @@
 <?php if (isset($modals['more_facts'])): ?>
 <div data-modal id="modal-facts" role="dialog">
   <h2 class="heading -banner"><?php print t('Facts'); ?></h2>
-  <ul class="list">
-  <?php foreach ($modals['more_facts']['facts'] as $key => $fact): ?>
-    <li><?php print $fact['fact']; ?><sup><?php print $fact['footnotes']; ?></sup></li>
-  <?php endforeach; ?>
-  </ul>
-
-  <section class="sources">
-    <h3 class="__title js-toggle-sources"><?php print t('Sources'); ?></h3>
-    <ul class="__body legal">
-    <?php foreach ($modals['more_facts']['sources'] as $key => $source): ?>
-      <li><sup><?php print ($key + 1); ?></sup> <?php print $source; ?></li>
-    <?php endforeach; ?>
+  <div class="modal__block">
+    <ul class="list">
+      <?php foreach ($modals['more_facts']['facts'] as $key => $fact): ?>
+        <li><?php print $fact['fact']; ?><sup><?php print $fact['footnotes']; ?></sup></li>
+      <?php endforeach; ?>
     </ul>
-  </section>
-  <div class="form-actions">
-    <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a>
+  </div>
+
+  <div class="modal__block">
+    <section class="footnote">
+      <h4 class="js-footnote-toggle"><?php print t('Sources'); ?></h4>
+      <ul class="js-footnote-hidden">
+        <?php foreach ($modals['more_facts']['sources'] as $key => $source): ?>
+          <li><sup><?php print ($key + 1); ?></sup> <?php print $source; ?></li>
+        <?php endforeach; ?>
+      </ul>
+    </section>
+  </div>
+  <div class="modal__block">
+    <div class="form-actions">
+      <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a>
+    </div>
   </div>
 </div>
 <?php endif; ?>
@@ -57,11 +67,15 @@
   <?php foreach ($modals['partner_info'] as $delta => $partner): ?>
     <div data-modal id="modal-partner-<?php print $delta; ?>" role="dialog">
       <h2 class="heading -banner"><?php print t('We &lt;3 @partner', array('@partner' => $partner['name'])); ?></h2>
-      <?php print $partner['copy']; ?>
-      <?php if (isset($partner['video'])): print $partner['video']; ?>
-      <?php elseif (isset($partner['image'])): print $partner['image']; endif; ?>
-      <div class="form-actions">
-        <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a>
+      <div class="modal__block">
+        <?php print $partner['copy']; ?>
+        <?php if (isset($partner['video'])): print $partner['video']; ?>
+        <?php elseif (isset($partner['image'])): print $partner['image']; endif; ?>
+      </div>
+      <div class="modal__block">
+        <div class="form-actions">
+          <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a>
+        </div>
       </div>
     </div>
   <?php endforeach; ?>
diff --git a/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc b/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc
index 6314f786d..d97ba910c 100644
--- a/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc
+++ b/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc
@@ -300,18 +300,18 @@ function dosomething_signup_user_signup_data_form($form, &$form_state, $signup)
     $copy = dosomething_signup_filter_form_submitted_copy($config['form_submitted_copy'], $timestamp);
     // Display the form submitted copy:
     $form['submitted_copy'] = array(
-      '#prefix' => '<p>',
+      '#prefix' => '<div class="modal__block"><p>',
       '#markup' => $copy,
-      '#suffix' => '</p>',
+      '#suffix' => '</p></div>',
     );
     // Return form as is (without a submit button).
     return $form;
   }
 
   $form['copy'] = array(
-    '#prefix' => '<p>',
+    '#prefix' => '<div class="modal__block"><p>',
     '#markup' => $config['form_copy'],
-    '#suffix' => '</p>',
+    '#suffix' => '</div></p>',
   );
 
   // If we are collecting User address:
@@ -334,6 +334,8 @@ function dosomething_signup_user_signup_data_form($form, &$form_state, $signup)
   // If we are collecting User school:
   if ($config['collect_user_school']) {
     $form['school_finder'] = array(
+      '#prefix' => '<div class="modal__block">',
+      '#suffix' => '</div>',
       '#type' => 'fieldset',
       '#attributes' => array(
         'data-validate' => 'school_finder',
@@ -425,8 +427,8 @@ function dosomething_signup_user_signup_data_form($form, &$form_state, $signup)
 
   $form['actions'] = array(
     '#type' => 'markup',
-    '#prefix' => '<div class="form-actions">',
-    '#suffix' => '</div>',
+    '#prefix' => '<div class="modal__block"><div class="form-actions">',
+    '#suffix' => '</div></div>',
   );
 
   $form['actions']['submit'] = array(
diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc b/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc
index 39c17cdb0..43b4a56dd 100644
--- a/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc
+++ b/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc
@@ -8,8 +8,8 @@
 function paraneue_dosomething_page_alter_login(&$page) {
   if (!user_is_logged_in()){
     $page['page_bottom']['login'] = array(
-      '#prefix' => '<div data-modal id="modal--login" role="dialog" hidden>',
-      '#suffix' => '</div>',
+      '#prefix' => '<div data-modal id="modal--login" role="dialog" hidden><div class="modal__block">',
+      '#suffix' => '</div></div>',
       'login' => drupal_get_form('user_login_block')
     );
   }
diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc
index ae7814f0f..b70dcda4c 100644
--- a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc
+++ b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc
@@ -8,8 +8,8 @@
 function paraneue_dosomething_page_alter_register(&$page) {
   if (!user_is_logged_in()){
     $page['page_bottom']['register'] = array(
-      '#prefix' => '<div data-modal id="modal--register" role="dialog" hidden>',
-      '#suffix' => '</div>',
+      '#prefix' => '<div data-modal id="modal--register" role="dialog" hidden><div class="modal__block">',
+      '#suffix' => '</div></div>',
       'register' => drupal_get_form('user_register_form')
     );
   }
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss
index 4070d0e05..b9c9dd6cd 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss
@@ -2,10 +2,6 @@
   max-width: 700px;
   padding: 0;
 
-  .heading.-banner {
-    margin: 0;
-  }
-
   > .wrapper {
     overflow: hidden;
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
index 39ebed340..5c969740e 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
@@ -329,7 +329,9 @@
           <?php if (isset($reportback_form)): ?>
             <div data-modal id="modal-report-back" class="modal--reportback inline--alt-bg" role="dialog">
               <h2 class="heading -banner"><?php print t('Prove It'); ?></h2>
-              <?php print render($reportback_form); ?>
+              <div class="modal__block">
+                <?php print render($reportback_form); ?>
+              </div>
             </div>
           <?php endif; ?>
         </div>
diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php
index 53c4801cd..d95bf0d46 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php
@@ -26,7 +26,9 @@
         <h4 class="__title heading -delta"><?php print $first_name; ?> <?php print $last_initial; ?></h4>
         <p class="__location"><?php print $city; ?>, <?php print $state; ?></p>
         <div class="copy"><?php print $copy; ?></div>
-        <a href="#" class="js-close-modal">Back to main page</a>
+        <div class="form-actions">
+          <a href="#" class="js-close-modal">Back to main page</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php
index 25ca019cc..6a4d01571 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php
@@ -1,6 +1,6 @@
 <div class="submitted-image">
-  <p class="legal"><?php print t("Last updated: @updated", array("@updated" => $updated)); ?></p>
+  <p class="footnote"><?php print t("Last updated: @updated", array("@updated" => $updated)); ?></p>
   <?php foreach ($images as $image): ?>
     <?php print $image; ?>
   <?php endforeach; ?>
-</div>
\ No newline at end of file
+</div>

From fd10c4d3442dbfa7d4a314cd64493e4ac581a7df Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Mon, 9 Feb 2015 15:52:11 -0500
Subject: [PATCH 2/7] Add new Footnote pattern in place of legal, sources, and
 disclaimer.

---
 .../includes/auth/register.inc                |  2 +-
 .../js/campaign/sources.js                    | 38 -------------------
 .../paraneue_dosomething/scss/app.scss        |  3 +-
 .../scss/content/_modal-reportback.scss       |  2 +-
 .../scss/patterns/_disclaimer.scss            |  8 ----
 .../scss/patterns/_sources.scss               | 37 ------------------
 .../templates/campaign/node--campaign.tpl.php |  8 ++--
 7 files changed, 7 insertions(+), 91 deletions(-)
 delete mode 100644 lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js
 delete mode 100644 lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss
 delete mode 100644 lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss

diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc
index b70dcda4c..d70e848b5 100644
--- a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc
+++ b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc
@@ -44,7 +44,7 @@ function paraneue_dosomething_form_alter_register(&$form, &$form_state, $form_id
     ));
     $form['legal-text'] = array(
       '#type' => 'item',
-      '#markup' => '<p class="legal">' . $copy . '</p>',
+      '#markup' => '<p class="footnote">' . $copy . '</p>',
       '#weight' => 501,
     );
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js
deleted file mode 100644
index b050c985c..000000000
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js
+++ /dev/null
@@ -1,38 +0,0 @@
-define(function(require) {
-  "use strict";
-
-  var $ = require("jquery");
-  var Events = require("neue/events");
-
-
-  var toggleSources = function(container) {
-    var $list = container.find("ul, div:first");
-
-    // Hide the fact sources list if present.
-    $list.hide();
-
-    // Toggle visibility of fact sources.
-    $(".js-toggle-sources").on("click", function() {
-
-      // Toggle visibility of fact sources list.
-      $list.slideToggle();
-
-    });
-  };
-
-
-  var $sources = $(".sources") || null;
-
-  // If there's a list of sources output in a modal, activate the toggle.
-  Events.subscribe("Modal:opened", function() {
-    var $sources = $(".modal .sources") || null;
-    toggleSources($sources);
-  });
-
-
-  // If there's a list of sources output on the page, activate the toggle.
-  if ($sources) {
-    toggleSources($sources);
-  }
-
-});
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss
index 06e86bae5..bc2ce7a43 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss
@@ -25,9 +25,8 @@ $asset-path: "";
 
 // Local patterns
 @import "patterns/carousel";
-@import "patterns/disclaimer";
+@import "patterns/footnote";
 @import "patterns/promotion"; // @TODO: Move to Neue!
-@import "patterns/sources"; // @TODO: Move to Neue!
 @import "patterns/statistic"; // @TODO: Move to Neue!
 @import "patterns/tile";
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
index 2747dbab5..5a0fed060 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss
@@ -54,7 +54,7 @@
   .submitted-image {
     text-align: center;
 
-    .legal {
+    .footnote {
       color: rgba(255, 255, 255, 0.6);
       font-weight: $weight-bold;
       margin-bottom: $base-spacing;
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss b/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss
deleted file mode 100644
index 3ecd86c56..000000000
--- a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.disclaimer {
-  clear: both;
-  padding-top: 36px;
-
-  p, a {
-    color: darken($med-gray, 10%);
-  }
-}
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss b/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss
deleted file mode 100644
index 79da8bb01..000000000
--- a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.sources {
-  clear: both;
-  word-wrap: break-word;
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li + li {
-      margin-top: 9px;
-    }
-  }
-
-  sup, p {
-    display: inline;
-  }
-
-  .__title {
-    color: $med-gray;
-    cursor: pointer;
-    font-size: $font-regular;
-    font-weight: $weight-normal;
-    margin-bottom: 0;
-    text-decoration: underline;
-  }
-
-
-  .__body {
-    padding-top: 18px;
-  }
-
-  + .container__title {
-    margin-top: 27px;
-  }
-}
-
diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
index 5c969740e..1faba6ead 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
@@ -79,9 +79,9 @@
 
       <div class="container__block -narrow">
         <?php if (isset($campaign->fact_sources)): ?>
-          <section class="sources">
-            <h3 class="__title js-toggle-sources"><?php print t('Sources'); ?></h3>
-            <ul class="__body legal">
+          <section class="footnote">
+            <h4 class="js-footnote-toggle"><?php print t('Sources'); ?></h4>
+            <ul class="js-footnote-hidden">
               <?php foreach ($campaign->fact_sources as $key => $source): ?>
                 <li><sup><?php print ($key + 1); ?></sup> <?php print $source; ?></li>
               <?php endforeach; ?>
@@ -361,7 +361,7 @@
 
       <?php if (isset($official_rules)): ?>
         <div class="container__block -narrow">
-          <div class="disclaimer">
+          <div class="footnote">
             <a class="official-rules" href="<?php print $official_rules_src; ?>"><?php print t('Official Rules'); ?></a>
           </div>
         </div>

From 4288de8134f7e50361cc68528746aa65ae41dd0a Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Mon, 9 Feb 2015 16:00:14 -0500
Subject: [PATCH 3/7] Update to use separate Modal and Validation packages.

---
 .../includes/preprocess.inc                   |  2 +-
 .../paraneue_dosomething/js/Analytics.js      | 16 ++++++------
 .../paraneue_dosomething/js/app.js            | 14 ++++++-----
 .../js/campaign/SchoolFinder.js               |  2 +-
 .../paraneue_dosomething/js/campaign/tips.js  | 25 -------------------
 .../paraneue_dosomething/js/config.js         | 19 ++++++++++++--
 .../js/images/ImageUploadBeta.js              |  5 ++--
 .../js/reportback/Reportback.js               |  4 +--
 .../js/{validation => validators}/address.js  |  2 +-
 .../js/{validation => validators}/auth.js     |  2 +-
 .../js/{validation => validators}/donate.js   |  2 +-
 .../{validation => validators}/reportback.js  |  2 +-
 .../paraneue_dosomething/scss/app.scss        |  4 ++-
 13 files changed, 46 insertions(+), 53 deletions(-)
 delete mode 100644 lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js
 rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/address.js (99%)
 rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/auth.js (99%)
 rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/donate.js (99%)
 rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/reportback.js (98%)

diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc b/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc
index 1240b0801..407cb4390 100644
--- a/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc
+++ b/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc
@@ -373,7 +373,7 @@ function paraneue_dosomething_preprocess_node_campaign(&$vars) {
       $closeButton = 'skip';
     }
 
-    $js = 'require(["neue/modal"], function(Modal) { Modal.open( jQuery("#' . $id . '"), {animated: false, closeButton: "' . $closeButton . '", skipForm: "' . $skipForm . '"}); });';
+    $js = 'require(["modal"], function(Modal) { Modal.open( jQuery("#' . $id . '"), {animated: false, closeButton: "' . $closeButton . '", skipForm: "' . $skipForm . '"}); });';
     drupal_add_js($js, 'inline');
   }
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js b/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js
index c93f4c9e5..7459d5295 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js
@@ -3,38 +3,38 @@
  * Uses Google Analytics custom events API to fire events for client-side
  * Modal and Form Validation flows.
  */
-define(["neue/events"], function(Events) {
+define(["validation", "modal"], function(Validation, Modal) {
   "use strict";
 
   // We'll only fire GA Custom Events if the GA object exists
   if(typeof(_gaq) !== "undefined" && _gaq !== null) {
     // Validation
-    Events.subscribe("Validation:InlineError", function(topic, args) {
+    Validation.Events.subscribe("Validation:InlineError", function(topic, args) {
       _gaq.push(["_trackEvent", "Form", "Inline Validation Error", args, null, true]);
     });
 
-    Events.subscribe("Validation:Suggestion", function(topic, args) {
+    Validation.Events.subscribe("Validation:Suggestion", function(topic, args) {
       _gaq.push(["_trackEvent", "Form", "Suggestion", args, null, true]);
     });
 
-    Events.subscribe("Validation:SuggestionUsed", function(topic, args) {
+    Validation.Events.subscribe("Validation:SuggestionUsed", function(topic, args) {
       _gaq.push(["_trackEvent", "Form", "Suggestion Used", args, null, true]);
     });
 
-    Events.subscribe("Validation:Submitted", function(topic, args) {
+    Validation.Events.subscribe("Validation:Submitted", function(topic, args) {
       _gaq.push(["_trackEvent", "Form", "Submitted", args, null, false]);
     });
 
-    Events.subscribe("Validation:SubmitError", function(topic, args) {
+    Validation.Events.subscribe("Validation:SubmitError", function(topic, args) {
       _gaq.push(["_trackEvent", "Form", "Validation Error on submit", args, null, true]);
     });
 
     // Modals
-    Events.subscribe("Modal:Open", function(topic, args) {
+    Modal.Events.subscribe("Modal:Open", function(topic, args) {
       _gaq.push(["_trackEvent", "Modal", "Open", "#" + args.attr("id"), null, true]);
     });
 
-    Events.subscribe("Modal:Close", function(topic, args) {
+    Modal.Events.subscribe("Modal:Close", function(topic, args) {
       _gaq.push(["_trackEvent", "Modal", "Close", "#" + args.attr("id"), null, true]);
     });
   }
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/app.js b/lib/themes/dosomething/paraneue_dosomething/js/app.js
index f4c26c412..639927eba 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/app.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/app.js
@@ -15,14 +15,16 @@ define("app", function (require) {
   var Reportback = require("reportback/Reportback");
 
   // Initialize modules on load
-  require("neue/main");
+  require("neue");
+  require("modal");
+  require("validation");
+
   require("campaign/SchoolFinder");
-  require("campaign/sources");
   require("campaign/ImageUploader");
-  require("validation/auth");
-  require("validation/reportback");
-  require("validation/address");
-  require("validation/donate");
+  require("validators/auth");
+  require("validators/reportback");
+  require("validators/address");
+  require("validators/donate");
   require("Analytics");
   require("tiles");
 
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js
index e123c9868..99affb167 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js
@@ -3,7 +3,7 @@ define(function(require) {
 
   var $ = require("jquery");
   var _ = require("lodash");
-  var Validation = require("neue/validation");
+  var Validation = require("validation");
 
   var shouldValidateForm = true;
   var resultTpl = _.template("<li><a class='js-schoolfinder-result' data-gsid='<%- gsid %>' href='#'><span><%- name %></span> <em><%- city %>, <%- state %></em></a></li>");
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js
deleted file mode 100644
index 878bb718b..000000000
--- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js
+++ /dev/null
@@ -1,25 +0,0 @@
-define(function(require) {
-  "use strict";
-
-  var $ = require("jquery");
-
-  // View other tips on click
-  $(".js-show-tip").on("click", function(event) {
-    event.preventDefault();
-
-    // Cache $(this) and reference to parent wrapper
-    var $this = $(this);
-    var $thisParent = $this.closest(".tips--wrapper");
-
-    // Pass "active" class to move tip indicator
-    $thisParent.find(".tip-header").removeClass("active");
-    $this.addClass("active");
-
-    // Get current tip number
-    var tipNumber = $this.attr("href").slice(1);
-
-    // Show current tip
-    $thisParent.find(".tip-body").hide();
-    $thisParent.find("." + tipNumber).show();
-  });
-});
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/config.js b/lib/themes/dosomething/paraneue_dosomething/js/config.js
index fde635c59..a49b2121c 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/config.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/config.js
@@ -18,9 +18,24 @@ require.config({
     "jquery-iecors": "../bower_components/jquery.iecors/jquery.iecors",
     "lodash": "../bower_components/lodash/dist/lodash",
     "mailcheck": "../bower_components/mailcheck/src/mailcheck",
-    "neue": "../bower_components/neue/js",
-    "text": "../bower_components/requirejs-text/text",
+    "text": "../bower_components/requirejs-text/text"
   },
+  packages: [
+    {
+      name: "neue",
+      location: "../../bower_components/neue/js"
+    },
+    {
+      name: "modal",
+      location: "../../bower_components/dosomething-modal/js",
+      main: "modal"
+    },
+    {
+      name: "validation",
+      location: "../../bower_components/dosomething-validation/js",
+      main: "validation"
+    }
+  ],
   stubModules: ["text"],
   shim: {
     "jquery-once": { deps: ["jquery"] },
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js
index 54aecdc77..d1da80df6 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js
@@ -2,10 +2,9 @@ define(function(require) {
   "use strict";
 
   var $                = require("jquery");
-  var Events           = require("neue/events");
+  var Modal            = require("modal");
   var ImageCrop        = require("images/ImageCrop");
   var ImageCropPreview = require("../images/ImageCropPreview");
-  var Modal            = require("neue/modal");
 
 
   /**
@@ -117,7 +116,7 @@ define(function(require) {
       Modal.close();
     });
 
-    Events.subscribe("Modal:Close", function() {
+    Modal.Events.subscribe("Modal:Close", function() {
       _this.resetFileField();
     });
   };
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js b/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js
index e5499bd27..016e36b66 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js
@@ -3,7 +3,7 @@ define(function(require) {
 
   var $                = require("jquery");
   var _                = require("lodash");
-  var Events           = require("neue/events");
+  var Modal            = require("modal");
   var ImageUploadBeta  = require("../images/ImageUploadBeta");
   var reportbackTplSrc = require("text!reportback/templates/reportback.tpl.html");
 
@@ -78,7 +78,7 @@ define(function(require) {
       }
 
       // Show the caption field when the user is done with the modal.
-      Events.subscribe("Modal:Close", function() {
+      Modal.Events.subscribe("Modal:Close", function() {
         _this.$captionField.show();
       });
     },
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/address.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/address.js
similarity index 99%
rename from lib/themes/dosomething/paraneue_dosomething/js/validation/address.js
rename to lib/themes/dosomething/paraneue_dosomething/js/validators/address.js
index 94915c098..4e2f68477 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/validation/address.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/address.js
@@ -2,7 +2,7 @@ define(function(require) {
   "use strict";
 
   var $ = require("jquery");
-  var Validation= require("neue/validation");
+  var Validation= require("validation");
 
   /** @NOTE: Temporary, testing out some new ideas. */
   var requiredValidator = function(string, done, args) {
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/auth.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/auth.js
similarity index 99%
rename from lib/themes/dosomething/paraneue_dosomething/js/validation/auth.js
rename to lib/themes/dosomething/paraneue_dosomething/js/validators/auth.js
index 8f1a8b3c6..a3c52cb5b 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/validation/auth.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/auth.js
@@ -1,7 +1,7 @@
 define(function(require) {
   "use strict";
 
-  var Validation= require("neue/validation");
+  var Validation= require("validation");
   var mailcheck = require("mailcheck");
 
   // # Helpers
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/donate.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/donate.js
similarity index 99%
rename from lib/themes/dosomething/paraneue_dosomething/js/validation/donate.js
rename to lib/themes/dosomething/paraneue_dosomething/js/validators/donate.js
index d86d170bf..2fd5dcf39 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/validation/donate.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/donate.js
@@ -1,7 +1,7 @@
 define(function(require) {
   "use strict";
 
-  var Validation= require("neue/validation");
+  var Validation= require("validation");
 
   // Credit card types
   var cardTypes = {
diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/reportback.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/reportback.js
similarity index 98%
rename from lib/themes/dosomething/paraneue_dosomething/js/validation/reportback.js
rename to lib/themes/dosomething/paraneue_dosomething/js/validators/reportback.js
index a2ca4edf8..c61c49e38 100644
--- a/lib/themes/dosomething/paraneue_dosomething/js/validation/reportback.js
+++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/reportback.js
@@ -1,7 +1,7 @@
 define(function(require) {
   "use strict";
 
-  var Validation = require("neue/validation");
+  var Validation = require("validation");
   var $          = require("jquery");
 
   // validate number of items
diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss
index bc2ce7a43..486ada8c8 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss
@@ -17,6 +17,9 @@ $asset-path: "";
 @import "../bower_components/susy/sass/susy";
 @import "../bower_components/neue/scss/neue";
 
+@import "../bower_components/dosomething-modal/scss/modal";
+@import "../bower_components/dosomething-validation/scss/validation";
+
 // Import our local variables and helpers
 @import "helpers/mixins";
 
@@ -25,7 +28,6 @@ $asset-path: "";
 
 // Local patterns
 @import "patterns/carousel";
-@import "patterns/footnote";
 @import "patterns/promotion"; // @TODO: Move to Neue!
 @import "patterns/statistic"; // @TODO: Move to Neue!
 @import "patterns/tile";

From 28d9339b560240d81d8fa590763427ba7cbb7400 Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Mon, 9 Feb 2015 16:39:55 -0500
Subject: [PATCH 4/7] Update Bower dependencies for Neue 6.0.0-beta5.

---
 lib/themes/dosomething/paraneue_dosomething/bower.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/bower.json b/lib/themes/dosomething/paraneue_dosomething/bower.json
index 0f44e5c18..d9d086b28 100644
--- a/lib/themes/dosomething/paraneue_dosomething/bower.json
+++ b/lib/themes/dosomething/paraneue_dosomething/bower.json
@@ -20,7 +20,9 @@
     "tests"
   ],
   "dependencies": {
-    "neue": "DoSomething/neue#6.0.0-beta4",
+    "neue": "DoSomething/neue#6.0.0-beta5",
+    "dosomething-validation": "DoSomething/validation#~0.1.0",
+    "dosomething-modal": "DoSomething/modal#~0.1.0",
     "jquery": "1.8.3",
     "mailcheck": "~1.0.3",
     "html5shiv": "~3.7.0",

From b370811ac954a15403b4f10f2869b5f2375ebe1a Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Mon, 9 Feb 2015 16:58:47 -0500
Subject: [PATCH 5/7] Update t-shirt form with new modal__block containers.

---
 .../campaign/reward-redeem-reportback-count.tpl.php       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php
index f1a810514..4c979f934 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php
@@ -49,8 +49,12 @@
       <?php // "Free T-shirts" Modals ?>
       <div data-modal id="modal-redeem-form" role="dialog">
         <h2 class="heading -banner"><?php print ($form_header); ?></h2>
-        <?php print $form_copy; ?>
-        <?php print render($form); ?>
+        <div class="modal__block">
+          <?php print $form_copy; ?>
+        </div>
+        <div class="modal__block">
+          <?php print render($form); ?>
+        </div>
       </div>
     </div>
   </section>

From 1bec4f7161f495dfeea56b559aba859254916bb8 Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Mon, 9 Feb 2015 17:47:32 -0500
Subject: [PATCH 6/7] Update to use new media-options markup.

---
 .../paraneue_dosomething/includes/form.inc    | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/form.inc b/lib/themes/dosomething/paraneue_dosomething/includes/form.inc
index f2ad97c5d..9752c98f6 100644
--- a/lib/themes/dosomething/paraneue_dosomething/includes/form.inc
+++ b/lib/themes/dosomething/paraneue_dosomething/includes/form.inc
@@ -19,15 +19,16 @@ function paraneue_dosomething_form_element($variables) {
   $element = &$variables['element'];
   $output = theme_form_element($variables);
 
-  // If rendering a radio button, create rendered element for label
-  if($element['#type'] === 'radio') {
-    $variables['rendered_element'] = $element['#children'] . '<span class="option__indicator"></span>' . "\n";
-    $output = theme('form_element_label', $variables);
-  }
+  // If rendering a radio button or checkbox, create rendered element for label
+  if($element['#type'] === 'radio' || $element['#type'] === 'checkbox') {
+    // If not set to 'attribute' display setting, add an option indicator
+    if($element['#title_display'] !== 'attribute') {
+      $variables['rendered_element'] = $element['#children'] . '<span class="option__indicator"></span>' . "\n";
+    }
+    else {
+      $variables['rendered_element'] = $element['#children'] . "\n";
+    }
 
-  // If rendering a checkbox, create rendered element for label
-  if($element['#type'] === 'checkbox') {
-    $variables['rendered_element'] = $element['#children'] . '<span class="option__indicator"></span>' . "\n";
     $output = theme('form_element_label', $variables);
   }
 
@@ -59,12 +60,15 @@ function paraneue_dosomething_form_element_label($variables) {
     $attributes['class'] = 'option -checkbox';
   }
   elseif ($element['#type'] === 'radio' && $element['#title_display'] !== 'attribute') {
-    dpm($element);
     $attributes['class'] = 'option -radio';
   }
   else {
+    // If displaying with an attribute, use element's class
+    if ($element['#title_display'] === 'attribute' && !empty($element['#custom_label_class'])) {
+      $attributes['class'] = $element['#custom_label_class'];
+    }
     // Style the label as class option to display inline with the element.
-    if ($element['#title_display'] === 'after') {
+    elseif ($element['#title_display'] === 'after') {
       $attributes['class'] = 'element-label-after';
     }
     // Show label only to screen readers to avoid disruption in visual flows.
@@ -80,6 +84,7 @@ function paraneue_dosomething_form_element_label($variables) {
     $attributes['for'] = $element['#id'];
   }
 
+
   // Return with rendered element if it exists
   if (!empty($variables['rendered_element'])) {
     return ' <label' . drupal_attributes($attributes) . '>' . $variables['rendered_element'] . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n";
@@ -213,9 +218,8 @@ function paraneue_dosomething_form_alter_shirt_options(&$form, &$form_state, $fo
     'data-validate-required' => '',
   );
   foreach ($form['item']['#options'] as $key => $option) {
-    $form['item'][$key]['#prefix'] = '<div class="media-options__item -radio">';
-    $form['item'][$key]['#suffix'] = '</div>';
     $form['item'][$key]['#title_display'] = 'attribute';
+    $form['item'][$key]['#custom_label_class'] = array('media-option', '-radio');
   }
   $shirt_style_prefix = '<div data-validate="shirt_style" data-validate-required class="js-media-options">';
   $shirt_style_suffix = '</div>';
@@ -225,9 +229,8 @@ function paraneue_dosomething_form_alter_shirt_options(&$form, &$form_state, $fo
   $form['item_option']['#attributes'] = $shirt_size_attributes;
   if (isset($form['item_additional'])) {
     foreach ($form['item_additional']['#options'] as $key => $option) {
-      $form['item_additional'][$key]['#prefix'] = '<div class="media-options__item -radio">';
-      $form['item_additional'][$key]['#suffix'] = '</div>';
       $form['item_additional'][$key]['#title_display'] = 'attribute';
+      $form['item_additional'][$key]['#custom_label_class'] = array('media-option', '-radio');
     }
     $form['item_additional_header']['#markup'] = '<h4>' . t("Your Friend's Shirt") . '</h4>';
     $form['item_additional']['#prefix'] = $shirt_style_prefix;

From 7aba5b2e297ad47ac6c64d2981033f7712ac558d Mon Sep 17 00:00:00 2001
From: David Furnes <david@dfurnes.com>
Date: Tue, 10 Feb 2015 10:44:33 -0500
Subject: [PATCH 7/7] Visual fixes to caption modal with new modal__block
 containers.

---
 .../scss/content/_modal-crop.scss             |  4 ++--
 .../templates/campaign/node--campaign.tpl.php | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
index 371af6b38..85b73376b 100644
--- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
+++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss
@@ -1,13 +1,14 @@
 .modal--crop {
 
   .heading.-banner {
-    margin: (-$base-spacing) (-$base-spacing) 0px;
+    margin: 0;
   }
 
   .image-editor {
     padding-top: 10px;
 
     .__buttons {
+      padding: 0 $base-spacing;
       text-align: right;
 
       .button {
@@ -45,7 +46,6 @@
   }
 
   .image-preview {
-    margin: 0 (-$base-spacing);
     text-align: center;
     background: #000;
     line-height: 0;
diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
index 1faba6ead..6d1bfb986 100644
--- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
+++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php
@@ -298,15 +298,17 @@
                 This is a purely frontend form that will grab crop options and a caption
                 And then when the user submits the form, it will populate the drupal form with these values.
                 */?>
-                <form action="#" method="post" id="dosomething-reportback-image-form" accept-charset="UTF-8" data-validation-passed="false">
-                  <div class="form-item">
-                    <label class="field-label" for="caption">Caption</label>
-                    <input class="text-field" placeholder="Write something in 60 characters or less" type="text" id="caption" name="caption" <?php //data-validate="caption-modal" data-validate-required ?> maxlength="60" >
-                  </div>
-                  <div class="form-actions">
-                    <input type="submit" value="done" class="button -done" />
-                  </div>
-                </form>
+                <div class="modal__block">
+                  <form action="#" method="post" id="dosomething-reportback-image-form" accept-charset="UTF-8" data-validation-passed="false">
+                    <div class="form-item">
+                      <label class="field-label" for="caption">Caption</label>
+                      <input class="text-field" placeholder="Write something in 60 characters or less" type="text" id="caption" name="caption" <?php //data-validate="caption-modal" data-validate-required ?> maxlength="60" >
+                    </div>
+                    <div class="form-actions">
+                      <input type="submit" value="done" class="button -done" />
+                    </div>
+                  </form>
+                </div>
               </div>
             </div>