Merge pull request #335 from gregorywolanski/survey

Survey

src/components/App.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Mousetrap from 'mousetrap'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
-import {arrayMove} from 'react-sortable-hoc';
+import {arrayMove} from 'react-sortable-hoc'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -18,6 +18,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'
@@ -172,6 +173,7 @@ export default class App extends React.Component {
         open: false,
         shortcuts: false,
         export: false,
+        survey: localStorage.hasOwnProperty('survey') ? false : true
       },
       mapOptions: {
         showTileBoundaries: queryUtil.asBool(queryObj, "show-tile-boundaries")
@@ -449,6 +451,10 @@ export default class App extends React.Component {
         [modalName]: !this.state.isOpen[modalName]
       }
     })
+
+    if(modalName === 'survey') {
+      localStorage.setItem('survey', '');
+    }
   }
 
   render() {
@@ -528,6 +534,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

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--highlighted", 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,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Button from '../Button'
+import Modal from './Modal'
+
+import logoImage from 'maputnik-design/logos/logo-color.svg'
+
+class SurveyModal extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
+  }
+
+  constructor(props) { super(props); }
+
+  onClick = () => {
+    window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
+
+    this.props.onOpenToggle();
+  }
+
+  render() {
+    return <Modal
+      data-wd-key="modal-survey"
+      isOpen={this.props.isOpen}
+      onOpenToggle={this.props.onOpenToggle}
+      title="Maputnik Survey"
+    >
+      <div className="maputnik-modal-survey">
+        <img className="maputnik-modal-survey__logo" src={logoImage} alt="" width="128" />
+        <h1>You + Maputnik = Maputnik better for you</h1>
+        <p className="maputnik-modal-survey__description">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>
+        <Button onClick={this.onClick} className="maputnik-big-button maputnik-white-button maputnik-wide-button">Take the Maputnik Survey</Button>
+        <p className="maputnik-modal-survey__footnote">It takes 7 minutes, tops! Every question is optional.</p>
+      </div>
+    </Modal>
+  }
+}
+
+export default SurveyModal

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,20 @@
   font-size: $font-size-5;
 }
 
+.maputnik-wide-button {
+  padding: $margin-2 $margin-3;
+}
+
+.maputnik-green-button {
+  background-color: $color-green;
+  color: $color-black;
+}
+
+.maputnik-white-button {
+  background-color: $color-white;
+  color: $color-black;
+}
+
 .maputnik-icon-button {
   background-color: transparent;
 
@@ -135,9 +150,3 @@
     color: $color-red;
   }
 }
-
-.maputnik-dialog {
-  &__buttons {
-    text-align: right;
-  }
-}

src/styles/_modal.scss

@@ -240,3 +240,21 @@
     margin-bottom: 4px;
   }
 }
+
+.maputnik-modal-survey {
+  width: 372px;
+}
+
+.maputnik-modal-survey__logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.maputnik-modal-survey__description {
+  line-height: 1.5;
+}
+
+.maputnik-modal-survey__footnote {
+  color: $color-green;
+  margin-top: 16px;
+}

src/styles/_toolbar.scss

@@ -57,6 +57,29 @@
   }
 }
 
+.maputnik-toolbar-link--highlighted {
+  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: lighten($color-midgray, 12);
+    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;