Merge pull request #365 from fedspendingtransparency/staging

Staging -> Master

.babelrc

@@ -1,7 +1,12 @@
 {
   "presets": [
     "es2015",
-    "react"
+    "react",
+    ["env", {
+        "targets": {
+            "node": "current"
+        }
+    }]
   ],
   "plugins": [
     ["module-resolver", {

README.md

@@ -16,13 +16,9 @@ Assumptions:
 
 ### Install Prerequisites and Code
 
-1. If you're not already running Node.js, download and run the installer for your operating system. We build using version 4.x: [https://nodejs.org/en/](https://nodejs.org/en/ "Node.js installer").
+1. If you're not already running Node.js, download and run the installer for your operating system. We build using **Node.js 6.11.x (LTS)**: [https://nodejs.org/en/](https://nodejs.org/en/ "Node.js installer").
 
-2. Use *npm* (Node's package manager, which is part of the Node.js install) to install the latest version of gulp. This is necessary for runing the babel version of the `gulpfile`):
-
-    ```bash
-        $ npm install gulp && npm install gulp -g
-    ```
+2. You should also have *npm* (Node's package manager). This is typically included as part of the Node.js install. We use version 3.10.x. This is used to install the software dependencies the web site and the build system require.
 
 3. From the command line, clone the USAspending website repository from GitHub to your local machine:
 
@@ -44,50 +40,53 @@ The `usaspending-website` folder provides three sample `GlobalConstants` files:
 
 Use these sample files to create files named `GlobalConstants_dev.js` and `GlobalConstants_prod.js` respectively.
 
+You **must** have *both* `GlobalConstants_dev.js` and `GlobalConstants_prod.js` created before building the application. 
+
 The sample files require you to provide values for:
 
-* `API` (string) is the base API URL for the server that is hosting the API. It should start with an `https://` or `http://` protocol and end with `/v1/`, including the trailing slash.
+* `API` (string) is the base API URL for the server that is hosting the API.
+	* The USAspending API is located at `https://api.usaspending.gov/api/`, with the trailing slash included.
 * `DEV` (boolean) indicates if you are running the application in development mode or for production use. Enabling development mode activates certain debugging functionality at the expense of some performance.
 * `PERF_LOG` (boolean) indicates if you want to enable performance logging data in the JavaScript console. This requires `DEV` to be enabled as well.
 
 `DEV` and `PERF_LOG` should be disabled when deploying to a hosted public, staging, or production environment.
 
 **TIP!** You can use separate `GlobalConstants_dev.js` and `GlobalConstants_prod.js` files to point to different API endpoints that align with different environments.
 
-### Run gulp tasks:
+### Build Application
 
-Several Gulp tasks are available to build the frontend web site for various use cases.
+Several Webpack configurations are available to build the frontend web site for various use cases.
 
 #### Hosted Production
 
 If you are building the web site for a hosted production environment, run:
 
 ```bash
-	$ gulp production
+	$ npm run prod
 ```
 This will build the frontend files to the `/public` directory, which you can then deploy on your host. In this mode, JavaScript files are minified, debugging tools are disabled, and the `GlobalConstants_prod.js` file is used as the GlobalConstants file.
 
-#### Hosted Development (Build-only)
-
-If you are deploying the frontend to a hosted environment for development/testing purposes, use:
-
-```bash
-	$ gulp buildDev
-```
-This will build the frontend files to the `/public` directory, which you can then deploy on your host. In this mode, JavaScript files are uncompressed and sourcemapped, debugging tools are enabled, and the `GlobalConstants_dev.js` file is used as the GlobalConstants file.
-
 #### Local Development
 
 Finally, if you are a frontend developer, use:
 
 ```bash
-	$ gulp dev
+	$ npm start
 ```
 
 This will build the frontend files to the `/public` directory and also start a web server on port 3000. In this mode, JavaScript files are uncompressed and sourcemapped, debugging tools are enabled and the `GlobalConstants_dev.js` file is used as the GlobalConstants file. Additionally, SASS files in the `/src/_scss` and `/src/css` folders are watched, along with JS files in the `/src/js` folder, and these files are recompiled (and the browser automatically refreshed) whenever a change is detected.
 
 This mode also differs from `production` by using incremental Webpack builds. This means that the code is recompiled every time a change is detected in a source JS/JSX file, but the builds are *incremental*, meaning they take significantly less time than a complete build by recycling compiled code for unmodified parts. When making changes to the source code, you should always develop in `dev` mode to take advantage of this feature.
 
-## Running Tests
+#### Running Tests
 
 To run the automated test suite, run `npm test`.
+
+#### Additional Configurations
+
+Additional Webpack configurations are available for common tasks:
+
+* `npm run lint` runs the linter for JavaScript ES6 style checking.
+* `npm run dev` builds the web application in development mode, but generates static files rather than creating a web server. This is useful if you are hosting a remote development environment.
+* `npm run sass` builds the web application in development mode with a local server (the same as `npm start`), but also includes sourcemapping for Sass files. However, this does result in slower builds.
+* `npm run travis` is reserved for the Travis CI system and runs the linter and Jest tests in a single thread with error reporting.

criticalVersions.json

@@ -0,0 +1,4 @@
+{
+    "react": "15.6.1",
+    "redux": "3.7.1"
+}

package.json

@@ -2,6 +2,7 @@
   "name": "usaspending-website",
   "version": "2.5.0",
   "description": "USAspending Website",
+  "repository": "fedspendingtransparency/usaspending-website",
   "main": "src/entry.js",
   "scripts": {
     "start": "./node_modules/.bin/webpack-dev-server --progress --config ./webpack/webpack.dev.config.js",
@@ -32,11 +33,12 @@
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.1.0",
     "babel-plugin-module-resolver": "^2.7.1",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.4",
-    "enzyme": "^2.7.0",
+    "enzyme": "^2.9.1",
     "eslint": "^3.17.1",
     "eslint-config-airbnb": "^13.0.0",
     "eslint-plugin-import": "^2.1.0",
@@ -46,13 +48,13 @@
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.28.0",
-    "jest": "^18.1.0",
+    "jest": "^20.0.4",
     "json-loader": "^0.5.4",
     "node-sass": "^4.5.3",
-    "react-dom": "15.4.2",
-    "react-test-renderer": "15.4.2",
+    "react-dom": "^15.6.0",
+    "react-test-renderer": "^15.6.0",
     "sass-loader": "^6.0.6",
-    "sinon": "^2.3.5",
+    "sinon": "^2.3.8",
     "style-loader": "^0.18.2",
     "webpack": "^2.6.1",
     "webpack-bundle-analyzer": "^2.8.2",
@@ -73,8 +75,9 @@
     "fixed-data-table": "0.6.3",
     "history": "^4.6.1",
     "immutable": "^3.8.1",
-    "jest-cli": "^18.1.0",
+    "jest-cli": "^20.0.4",
     "js-cookie": "^2.1.0",
+    "js-search": "^1.4.2",
     "keyboardjs": "^2.3.3",
     "lodash": "^4.6.1",
     "mapbox-gl": "^0.32.1",
@@ -83,25 +86,26 @@
     "mousetrap": "^1.6.1",
     "node-uuid": "^1.4.7",
     "path-to-regexp": "^1.7.0",
+    "prop-types": "15.5.10",
     "query-string": "^4.3.4",
     "r-dom": "^2.3.2",
-    "react": "15.4.2",
+    "react": "15.6.1",
     "react-addons-perf": "15.4.2",
-    "react-addons-test-utils": "15.4.2",
-    "react-addons-update": "^15.4.2",
+    "react-addons-update": "15.6.0",
     "react-aria-modal": "^2.6.0",
     "react-custom-scrollbars": "^4.1.2",
-    "react-day-picker": "^3.1.1",
+    "react-day-picker": "^6.1.0",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
-    "react-dom": "15.4.2",
+    "react-dom": "15.6.1",
     "react-ga": "^2.1.2",
     "react-helmet": "^5.0.0",
     "react-map-gl": "^2.0.2",
     "react-markdown": "^2.5.0",
-    "react-redux": "4.4.6",
+    "react-redux": "5.0.5",
+    "react-string-replace": "^0.4.0",
     "react-transition-group": "^1.1.2",
-    "redux": "3.6.0",
+    "redux": "3.7.1",
     "redux-perf-middleware": "^1.2.2",
     "svg4everybody": "^2.0.3",
     "tinycolor2": "^1.3.0",

src/_scss/all.scss

@@ -1,5 +1,4 @@
 // Vendor -------------- //
-
 @import 'lib/bourbon/bourbon';
 @import 'lib/neat/neat';
 @import 'lib/normalize';

src/_scss/custom.scss

@@ -13,5 +13,6 @@
 @import './pages/glossary/glossaryPage';
 @import './layouts/article/aboutArticle';
 @import './pages/testStyle/testStyle';
+@import './pages/agencyLanding/agencyLandingPage';
 // ***** MODALS
 @import './pages/modals/all';

src/_scss/elements/filters/_selectedFilterBtn.scss

@@ -28,6 +28,7 @@
             vertical-align: middle;
             & svg {
                 width: rem(8);
+                height: rem(8);
                 fill: $color-gray;
             }
         }
@@ -37,11 +38,15 @@
             cursor: pointer;
             @include transition(all 0.25s $ease-in-out-sine);
             & .close {
-                & svg {
+                cursor: pointer;
+                fill: $color-cool-blue;
+
+                & svg,
+                & path {
                     cursor: pointer;
                     fill: $color-cool-blue;
                 }
             }
         }
     }
-}
+}

src/_scss/layouts/default/footer/_footerCopyright.scss

@@ -1,8 +1,57 @@
-@mixin footerCopyright {
-        @include span-columns(16);
-        background:  darken( #333, 5% );
-        color:  darken( #fff, 20% );
-        margin-top: 1.5rem;
-        padding: 0.5rem 0 0.9rem;
-        text-align: center;
+.copyright-block {
+    width: 100%;
+    padding: rem(10) 0;
+    background:  darken( #333, 5% );
+    color:  darken( #fff, 20% );
+
+    .copyright-content {
+        @include media($tablet-screen) {
+            @include display(flex);
+            @include flex-direction(row);
+            @include align-items(center);
+            @include justify-content(center);
+            position: relative;
+        }
+
+        .copyright-notice {
+            display: block;
+            width: 100%;
+            text-align: center;
+
+            padding-left: rem(20);
+
+            @include media($tablet-screen) {
+                @include flex(1 1 auto);
+                width: 50%;
+                text-align: left;
+            }
+        }
+
+        .important-db {
+            display: block;
+            text-align: center;
+            width: 100%;
+            margin-bottom: rem(50);
+            margin-right: rem(155);
+            margin-top: rem(15);
+
+            @include media($tablet-screen) {
+                @include flex(1 1 auto);
+                text-align: right;
+                width: 50%;
+                margin-bottom: 0;
+                margin-top: 0;
+            }
+
+            font-size: $small-font-size;
+            a {
+                color: #9BDAF1;
+                text-decoration: underline;
+
+                &:hover, &:active {
+                    text-decoration: none;
+                }
+            }
+        }
+    }
 }