Survey (#328)

Elements promoting the survey inside Maputnik

package.json

@@ -49,6 +49,7 @@
     "react-codemirror2": "^4.2.1",
     "react-collapse": "^4.0.3",
     "react-color": "^2.14.1",
+    "react-cookie": "^2.1.6",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.3.2",
     "react-file-reader-input": "^1.1.4",

src/components/App.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
+import {instanceOf} from 'prop-types';
 import Mousetrap from 'mousetrap'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import {arrayMove} from 'react-sortable-hoc';
+import {withCookies, Cookies} from 'react-cookie'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -18,6 +20,7 @@ import ExportModal from './modals/ExportModal'
 import SourcesModal from './modals/SourcesModal'
 import OpenModal from './modals/OpenModal'
 import ShortcutsModal from './modals/ShortcutsModal'
+import SurveyModal from './modals/SurveyModal'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
 import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
@@ -50,7 +53,11 @@ function updateRootSpec(spec, fieldName, newValues) {
   }
 }
 
-export default class App extends React.Component {
+class App extends React.Component {
+  static propTypes = {
+    cookies: instanceOf(Cookies).isRequired
+  }
+
   constructor(props) {
     super(props)
     this.revisionStore = new RevisionStore()
@@ -172,6 +179,7 @@ export default class App extends React.Component {
         open: false,
         shortcuts: false,
         export: false,
+        survey: this.props.cookies.get('survey') ? false : true
       },
       mapOptions: {
         showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
@@ -449,6 +457,10 @@ export default class App extends React.Component {
         [modalName]: !this.state.isOpen[modalName]
       }
     })
+
+    if(modalName === 'survey') {
+      this.props.cookies.set('survey');
+    }
   }
 
   render() {
@@ -528,6 +540,10 @@ export default class App extends React.Component {
         isOpen={this.state.isOpen.sources}
         onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
+      <SurveyModal
+        isOpen={this.state.isOpen.survey}
+        onOpenToggle={this.toggleModal.bind(this, 'survey')}
+      />
     </div>
 
     return <AppLayout
@@ -540,3 +556,5 @@ export default class App extends React.Component {
     />
   }
 }
+
+export default withCookies(App)

src/components/Toolbar.jsx

@@ -16,6 +16,7 @@ import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
 import MdFontDownload from 'react-icons/lib/md/font-download'
 import HelpIcon from 'react-icons/lib/md/help-outline'
 import InspectionIcon from 'react-icons/lib/md/find-in-page'
+import SurveyIcon from 'react-icons/lib/md/assignment-turned-in'
 
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 import pkgJson from '../../package.json'
@@ -52,6 +53,28 @@ class ToolbarLink extends React.Component {
   }
 }
 
+class ToolbarLinkHighlighted extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    href: PropTypes.string,
+    onToggleModal: PropTypes.func
+  }
+
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted2", this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <span className="maputnik-toolbar-link-wrapper">
+        {this.props.children}
+      </span>
+    </a>
+  }
+}
+
 class ToolbarAction extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -146,6 +169,10 @@ export default class Toolbar extends React.Component {
             <HelpIcon />
             <IconText>Help</IconText>
           </ToolbarLink>
+          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
+            <SurveyIcon />
+            <IconText>Take the Maputnik Survey</IconText>
+          </ToolbarLinkHighlighted>
         </div>
       </div>
     </div>

src/components/modals/SurveyModal.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+import Logo from './../../img/maputnik.png'
+
+class SurveyModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) { super(props); }
+
+  render() {
+    return <Modal
+      data-wd-key="modal-survey"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title={'Maputnik Survey'}
+    >
+      <div style={{width: 372, paddingBottom: "0"}}>
+        <img src="./../../img/maputnik.png" alt="" width="128" style={{display:"block",margin:"0 auto"}} />
+        <h1>You + Maputnik = Maputnik better for you</h1>
+        <p style={{lineHeight:1.5}}>We don’t track you, so we don’t know how you use Maputnik. Help us make Maputnik better for you by completing a 7–minute survey carried out by our contributing designer.
+</p>
+        <a href="https://gregorywolanski.typeform.com/to/cPgaSY" target="_blank" rel="noopener noreferrer" className="maputnik-button maputnik-big-button maputnik-white-button maputnik-green-hover-button maputnik-wide-button">Take the Maputnik Survey</a>
+        <p className="green" style={{margin:"16px 0 0"}}>It takes 7 minutes, tops! Every question is optional.</p>
+      </div>
+    </Modal>
+  }
+}
+
+export default SurveyModal

src/index.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import { CookiesProvider } from 'react-cookie'
+
 import './favicon.ico'
 import './styles/index.scss'
 import App from './components/App';
 
-ReactDOM.render(<App/>, document.querySelector("#app"));
+ReactDOM.render(<CookiesProvider><App/></CookiesProvider>, document.querySelector("#app"));

src/styles/_base.scss

@@ -80,3 +80,7 @@ a {
 .hide {
   display: none !important;
 }
+
+.green {
+  color: $color-green;
+}

src/styles/_components.scss

@@ -56,6 +56,7 @@
   border-width: 0;
   border-radius: 2px;
   box-sizing: border-box;
+  text-decoration: none;
 
   &:hover {
     background-color: lighten($color-midgray, 12);
@@ -70,6 +71,25 @@
   font-size: $font-size-5;
 }
 
+.maputnik-wide-button {
+  padding: $margin-2 $margin-3;
+}
+
+.maputnik-green-button {
+  background-color: $color-green;
+  color: $color-black;
+}
+
+.maputnik-green-hover-button:hover, .maputnik-green-hover-button:focus {
+  background-color: $color-green;
+  color: $color-white;
+}
+
+.maputnik-white-button {
+  background-color: $color-white;
+  color: $color-black;
+}
+
 .maputnik-icon-button {
   background-color: transparent;
 
@@ -135,9 +155,3 @@
     color: $color-red;
   }
 }
-
-.maputnik-dialog {
-  &__buttons {
-    text-align: right;
-  }
-}

src/styles/_toolbar.scss

@@ -57,6 +57,33 @@
   }
 }
 
+.maputnik-toolbar-link--highlighted {
+  color: $color-green; 
+}
+
+.maputnik-toolbar-link--highlighted2 {
+  line-height: 1;
+  padding: $margin-2 $margin-3;
+
+  .maputnik-toolbar-link-wrapper {
+    background-color: $color-white;
+    border-radius: 2px;
+    padding: $margin-2;
+    margin-top: $margin-1;
+    color: $color-black;
+    display: block;
+  }
+
+  &:hover {
+    background-color: $color-black;
+  }
+
+  &:hover .maputnik-toolbar-link-wrapper {
+    background-color: $color-green;
+    color: $color-white;
+  }
+}
+
 .maputnik-toolbar-version {
   font-size: 10px;
   margin-left: 4px;

src/styles/index.scss

@@ -4,6 +4,7 @@ $color-midgray: #36383e;
 $color-lowgray: #8e8e8e;
 $color-white: #f0f0f0;
 $color-red: #cf4a4a;
+$color-green: #53b972;
 $margin-1: 3px;
 $margin-2: 5px;
 $margin-3: 10px;