Merge pull request #500 from devinit/development

release/v3.5.2

Author: edwinmp

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@devinit/dh-app",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "config": {
     "API": "http://212.111.41.68:3000/graphql",
     "API_DEV": "http://212.111.41.68:9090/graphql",

package.json

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { css } from 'glamor';
+import { Container, Grid, Message } from 'semantic-ui-react';
+import * as localforage from 'localforage';
+
+const messageStyles = css({
+  textAlign: 'center',
+  marginBottom: '0 !important',
+  backgroundColor: '#fee7c1 !important',
+  color: '#794b02 !important'
+});
+const textStyle = css({
+  fontWeight: 'bold',
+  paddingRight: '3rem !important'
+});
+const closeButtonStyles = css({
+  position: 'absolute',
+  top: '38px',
+  right: '16px',
+  cursor: 'pointer'
+});
+
+class Banner extends React.Component {
+  state = { showBanner: false };
+
+  render() {
+    if (this.state.showBanner) {
+      return (
+        <Container style={ { padding: '1rem' } }>
+          <Message warning { ...messageStyles } floating size="large">
+            <Grid columns={ 2 } container stackable>
+              <Grid.Row>
+                <Grid.Column width={ 1 }>
+                  <i aria-hidden="true" className="icon warning sign big"/>
+                </Grid.Column>
+                <Grid.Column width={ 15 } { ...textStyle }>
+                  The Development Data Hub is not currently displaying the most up-to-date data,
+                  as it is soon to undergo redevelopment.
+                  If you have any data-related questions please email info@devinit.org
+                </Grid.Column>
+              </Grid.Row>
+            <i aria-hidden="true" className="icon close" { ...closeButtonStyles } onClick={ this.onClose }/>
+            </Grid>
+          </Message>
+        </Container>
+      );
+    }
+
+    return null;
+  }
+
+  componentDidMount() {
+    localforage.getItem('showBanner').then(showBanner => {
+      if (showBanner === null) {
+        this.setState({ showBanner: true });
+        localforage.setItem('showBanner', true);
+      } else {
+        this.setState({ showBanner });
+      }
+    });
+  }
+
+  private onClose = () => {
+    this.setState({ showBanner: false });
+    localforage.setItem('showBanner', false);
+  }
+}
+
+export default Banner;

src/components/molecules/Banner/Banner.tsx

@@ -0,0 +1 @@
+export * from './Banner';

src/components/molecules/Banner/index.ts

@@ -1,3 +1,4 @@
+import { css } from 'glamor';
 import glamorous from 'glamorous';
 import { red, white } from '../../theme/semantic';
 import { Container } from 'semantic-ui-react';
@@ -22,13 +23,15 @@ const MenuContainer = glamorous.div({
   height: '57px'
 });
 
+const containerStyles = css({ overflow: 'hidden !important' });
+
 export type Props = Menu & {
   nextLink?: React.ComponentClass<LinkState>;
 };
 
 const menu = (props: Props) =>
   <MenuContainer>
-    <Container>
+    <Container { ...containerStyles }>
       <Logo />
       <DesktopMenu { ...props } />
       <MobileMenu { ...props } />

src/components/molecules/Menu/index.tsx

@@ -1,8 +1,9 @@
+import Link from 'next/link';
 import * as React from 'react';
 import { Container } from 'semantic-ui-react';
+import Banner from '../../molecules/Banner/Banner';
 import Footer from '../../molecules/Footer';
 import Menu from '../../molecules/Menu';
-import Link from 'next/link';
 import { menuData } from './data';
 
 interface Props {
@@ -11,11 +12,12 @@ interface Props {
 
 const Generic: React.SFC<Props> = ({ children }) =>
   <Container fluid>
-      <Menu menu={ menuData.menu } nextLink={ Link } />
-      <div style={ { marginTop: '4em' } }>
-        { children }
-      </div>
-      <Footer />
+    <Menu menu={ menuData.menu } nextLink={ Link } />
+    <div style={ { marginTop: '4em' } }>
+      <Banner/>
+      { children }
+    </div>
+    <Footer />
   </Container>;
 
 export default Generic;

src/components/templates/Generic/index.tsx

@@ -1,5 +1,7 @@
 import { capitalize } from '@devinit/prelude/lib/strings';
+import { css } from 'glamor';
 import { Div, H4, Img } from 'glamorous';
+import Link from 'next/link';
 import router from 'next/router';
 import * as React from 'react';
 import { Container, Grid, Icon } from 'semantic-ui-react';
@@ -10,11 +12,9 @@ import DynamicMap from '../../organisms/Map/DynamicMap';
 import SpotLightNavTabsKe, { SpotlightKeProps } from '../../organisms/NavBarTabs/spotlightKe';
 import SpotLightNavTabsUg, { SpotlightUgProps } from '../../organisms/NavBarTabs/spotlightUg';
 import { getSpotlightPageData } from '../../pageData';
+import { mediaQueries } from '../../theme';
 import { Country } from '../../types';
 import Generic from '../Generic';
-import Link from 'next/link';
-import { css } from 'glamor';
-import { mediaQueries } from '../../theme';
 
 const responsiveCountryProfile = css({
   [mediaQueries.phone]: {
@@ -41,7 +41,7 @@ export default class Spotlight extends React.Component<Props> {
     const navState = { state: this.props.state } as SpotlightKeProps | SpotlightUgProps;
 
     return (
-      <Generic >
+      <Generic>
         <Container>
           <H4 paddingTop="2em" position="absolute" right="20%" { ...responsiveCountryProfile }>
             { this.renderCountryFlag() }