Merge pull request #574 from fedspendingtransparency/update-config-ba…

…nners Update config banners
fedspendingtransparency · Dec 13, 2017 · 19c7876 · 19c7876
2 parents 59999f2 + 90c8f8f
commit 19c7876
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 55 deletions.
diff --git a/sampleGlobalConstants_dev.js b/sampleGlobalConstants_dev.js
@@ -7,6 +7,7 @@ const kGlobalConstants = {
     LOCAL: false,
     DEV: true,
     PERF_LOG: false,
+    IN_BETA: true,
     MAPBOX_TOKEN: ''
 };
 

diff --git a/sampleGlobalConstants_prod.js b/sampleGlobalConstants_prod.js
@@ -7,6 +7,7 @@ const kGlobalConstants = {
     LOCAL: false,
     DEV: false,
     PERF_LOG: false,
+    IN_BETA: true,
     MAPBOX_TOKEN: ''
 };
 

diff --git a/src/_scss/layouts/default/header/_warning.scss b/src/_scss/layouts/default/header/_warning.scss
@@ -1,53 +1,50 @@
 .warning-banner-wrap {
     @import "mixins/fullSectionWrap";
-    background: as-alpha($color-gold-lightest, 0.95);
-    min-height: rem(60);
+    background: $color-primary-alt-lightest;
     overflow: hidden;
-    padding: rem(15) 0;
     width: 100%;
-    border-bottom: 1px solid $color-gold-lighter;
+    border: 3px solid #BCE8EB;
     .warning-banner {
-        @include fullSectionWrap(0, 0);
         @include display(flex);
-        & p {
+        margin: auto;
+        width: fit-content;
+        p {
             flex: 1;
-            font-size: $small-font-size;
             display: block;
+            margin: rem(8) rem(30) rem(8) 0;
         }
-        & .top-alert-icon {
-            margin: rem(15) rem(10) 0 0;
-            @include media($large-screen) {
-                margin: rem(10) rem(10) 0 0;
-            }
-            & .usa-da-icon {
+        .top-alert-icon {
+            margin: rem(5) rem(10) 0 rem(10);
+            height: 21px;
+            .usa-da-icon {
                 flex: 1;
-                height: rem(20);
-                width: rem(30);
                 & svg {
-                    fill: $color-gray-dark;
-                    height: rem(30);
-                    width: rem(30);
+                    margin-top: rem(4);
+                    height: rem(21);
+                    width: rem(21);
+                    fill: #5BC0DE;
                 }
             }
         }
-    }
-
-    &.info {
-        background: as-alpha($color-cool-blue-lightest, 0.95);
-        border-bottom: 1px solid $color-cool-blue-lighter;
 
-        .warning-banner {
-            .top-alert-icon {
-                .usa-da-icon {
-                    & svg {
-                        fill: $color-cool-blue;
-                    }
-                }
-            }
+        .good-news {
+            font-weight: $font-semibold;
+        }
+    }
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        @include button-unstyled;
+        margin: rem(15);
+        @include media($large-screen) {
+            margin: rem(15) rem(30);
+        }
 
-            .good-news {
-                font-weight: $font-semibold;
-            }
+        svg {
+            fill: $color-gray;
+            width: rem(16);
+            height: rem(16);
         }
     }
 }
diff --git a/src/index.html b/src/index.html
@@ -6,19 +6,19 @@
 
     <!-- Facebook Open Graph -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://beta.usaspending.gov/" />
-    <meta property="og:title" content="Beta.USAspending.gov" />
-    <meta property="og:description" content="Beta.USAspending.gov is the new official source of accessible, searchable and reliable spending data for the U.S. Government." />
-    <meta property="og:site_name" content="Beta.USAspending.gov" />
-    <meta property="og:image" content="https://beta.usaspending.gov/img/FacebookOG.png" />
+    <meta property="og:url" content="https://www.usaspending.gov/" />
+    <meta property="og:title" content="USAspending.gov" />
+    <meta property="og:description" content="USAspending.gov is the new official source of accessible, searchable and reliable spending data for the U.S. Government." />
+    <meta property="og:site_name" content="USAspending.gov" />
+    <meta property="og:image" content="https://www.usaspending.gov/img/FacebookOG.png" />
 
     <!-- Twitter Card Tags -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:domain" value="usaspending.gov" />
-    <meta name="twitter:title" value="Beta.USAspending.gov" />
-    <meta name="twitter:description" value="Beta.USAspending.gov is the new official source of accessible, searchable and reliable spending data for the U.S. Government." />
-    <meta name="twitter:image" content="https://beta.usaspending.gov/img/TwitterCard.png" />
-    <meta name="twitter:url" value="https://beta.usaspending.gov/" />
+    <meta name="twitter:title" value="USAspending.gov" />
+    <meta name="twitter:description" value="USAspending.gov is the new official source of accessible, searchable and reliable spending data for the U.S. Government." />
+    <meta name="twitter:image" content="https://www.usaspending.gov/img/TwitterCard.png" />
+    <meta name="twitter:url" value="https://www.usaspending.gov/" />
     <meta name="twitter:label1" value="" />
     <meta name="twitter:data1" value="" />
     <meta name="twitter:label2" value="" />

diff --git a/src/js/components/homepage/Homepage.jsx b/src/js/components/homepage/Homepage.jsx
@@ -4,13 +4,16 @@
   **/
 
 import React from 'react';
+import Cookies from 'js-cookie';
 import { isCancel } from 'axios';
 
 import * as HomepageHelper from 'helpers/homepageHelper';
 import * as MetaTagHelper from 'helpers/metaTagHelper';
 
 import GlossaryContainer from 'containers/glossary/GlossaryContainer';
 
+import kGlobalConstants from 'GlobalConstants';
+
 import HomepageStateModel from 'models/homepage/HomepageStateModel';
 import MetaTags from '../sharedComponents/metaTags/MetaTags';
 
@@ -23,7 +26,7 @@ import CategoryMap from './visualizations/categoryMap/CategoryMap';
 import SearchSection from './SearchSection';
 import Footer from '../sharedComponents/Footer';
 import WarningBanner from '../sharedComponents/header/WarningBanner';
-// import InfoBanner from '../sharedComponents/header/InfoBanner';
+import InfoBanner from '../sharedComponents/header/InfoBanner';
 
 require('pages/homepage/homePage.scss');
 
@@ -53,24 +56,41 @@ export default class Homepage extends React.Component {
                     populations: []
                 },
                 table: []
-            }
+            },
+            showBanner: false
         };
 
         this.dataRequests = [];
         this.mounted = false;
 
         this.skippedNav = this.skippedNav.bind(this);
+        this.closeBanner = this.closeBanner.bind(this);
     }
 
     componentWillMount() {
         this.mounted = true;
         this.loadHomepageData();
+        // check if the info banner cookie exists
+        if (!Cookies.get('usaspending_info_banner')) {
+            // cookie does not exist, show the banner
+            this.setState({
+                showBanner: true
+            });
+        }
     }
 
     componentWillUnmount() {
         this.mounted = false;
     }
 
+    closeBanner() {
+        // set a cookie to hide the banner in the future
+        Cookies.set('usaspending_info_banner', 'hide', { expires: 730 });
+        this.setState({
+            showBanner: false
+        });
+    }
+
     loadHomepageData() {
         if (this.dataRequests.length > 0) {
             // there are in-flight requests, cancel them
@@ -171,6 +191,17 @@ export default class Homepage extends React.Component {
     }
 
     render() {
+        let banner = (
+            <InfoBanner
+                closeBanner={this.closeBanner} />);
+        if (kGlobalConstants.IN_BETA) {
+            banner = (<WarningBanner
+                closeBanner={this.closeBanner} />);
+        }
+        if (!this.state.showBanner) {
+            banner = null;
+        }
+
         return (
             <div className="usa-da-home-page">
                 <div className="site-header">
@@ -183,7 +214,7 @@ export default class Homepage extends React.Component {
                 </div>
                 <MetaTags {...MetaTagHelper.homePageMetaTags} />
                 <GlossaryContainer />
-                <WarningBanner />
+                {banner}
                 <Landing
                     total={this.state.total} />
                 <TreeMapIntro />

diff --git a/src/js/components/sharedComponents/header/Header.jsx b/src/js/components/sharedComponents/header/Header.jsx
@@ -1,15 +1,32 @@
 import React from 'react';
+import Cookies from 'js-cookie';
 
 import GlossaryContainer from 'containers/glossary/GlossaryContainer';
+import kGlobalConstants from 'GlobalConstants';
 
 import WarningBanner from './WarningBanner';
+import InfoBanner from './InfoBanner';
 import NavBar from './NavBar';
 
 export default class Header extends React.Component {
     constructor(props) {
         super(props);
+
+        this.state = {
+            showBanner: false
+        };
         // bind functions
         this.skippedNav = this.skippedNav.bind(this);
+        this.closeBanner = this.closeBanner.bind(this);
+    }
+    componentWillMount() {
+        // check if the info banner cookie exists
+        if (!Cookies.get('usaspending_info_banner')) {
+            // cookie does not exist, show the banner
+            this.setState({
+                showBanner: true
+            });
+        }
     }
     skippedNav(e) {
         // don't update the URL due to potential React Router conflicts
@@ -18,7 +35,27 @@ export default class Header extends React.Component {
         const yPos = document.querySelector('#main-content').getBoundingClientRect().top;
         window.scrollTo(0, yPos);
     }
+    closeBanner() {
+        // set a cookie to hide the banner in the future
+        Cookies.set('usaspending_info_banner', 'hide', { expires: 730 });
+        this.setState({
+            showBanner: false
+        });
+    }
     render() {
+        let banner = (
+            <InfoBanner
+                closeBanner={this.closeBanner} />
+        );
+        if (!this.state.showBanner) {
+            banner = null;
+        }
+        else if (kGlobalConstants.IN_BETA) {
+            banner = (
+                <WarningBanner
+                    closeBanner={this.closeBanner} />
+            );
+        }
         return (
             <div className="site-header">
                 <a
@@ -28,7 +65,7 @@ export default class Header extends React.Component {
                         Skip to main content
                 </a>
                 <header>
-                    <WarningBanner />
+                    {banner}
                     <NavBar />
                 </header>
                 <GlossaryContainer />

diff --git a/src/js/components/sharedComponents/header/InfoBanner.jsx b/src/js/components/sharedComponents/header/InfoBanner.jsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import { InfoCircle } from '../icons/Icons';
+import PropTypes from 'prop-types';
+import { InfoCircle, Close } from 'components/sharedComponents/icons/Icons';
+
+const propTypes = {
+    closeBanner: PropTypes.func
+};
 
 export default class InfoBanner extends React.Component {
     render() {
@@ -22,7 +27,17 @@ export default class InfoBanner extends React.Component {
                         </p>
                     </div>
                 </div>
+                <button
+                    className="close"
+                    title="Dismiss message"
+                    aria-label="Dismiss message"
+                    onClick={this.props.closeBanner}>
+                    <Close alt="Dismiss message" />
+                </button>
             </div>
         );
     }
 }
+
+InfoBanner.propTypes = propTypes;
+
diff --git a/src/js/components/sharedComponents/header/NavBar.jsx b/src/js/components/sharedComponents/header/NavBar.jsx
@@ -4,6 +4,8 @@ import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 import GlossaryButtonWrapperContainer from 'containers/glossary/GlossaryButtonWrapperContainer';
 
+import kGlobalConstants from 'GlobalConstants';
+
 import NavBarGlossaryLink from './NavBarGlossaryLink';
 import ProfileButton from './ProfileButton';
 import MobileNav from './mobile/MobileNav';
@@ -61,6 +63,11 @@ export default class NavBar extends React.Component {
             homepageClass = 'homepage';
         }
 
+        let betaClass = '';
+        if (kGlobalConstants.IN_BETA) {
+            betaClass = 'beta';
+        }
+
         let mobileNav = null;
         if (this.state.showMobileNav) {
             mobileNav = (
@@ -74,7 +81,7 @@ export default class NavBar extends React.Component {
                 className="nav-container"
                 role="navigation">
                 <div className="logo">
-                    <div className={`usa-logo ${homepageClass}`} id="logo">
+                    <div className={`usa-logo ${homepageClass} ${betaClass}`} id="logo">
                         <a href="#/" title="USAspending.gov Home" aria-label="USAspending.gov Home">
                             <span className="logo-sr">USAspending.gov</span>
                         </a>