From 58b5643e9f69d88fe0bc9875241f386c7e9a2fbb Mon Sep 17 00:00:00 2001 From: Amberley Romo Date: Wed, 12 Dec 2018 11:50:10 -0600 Subject: [PATCH 1/5] feat(www): add unbird feedback form component --- www/package.json | 1 + www/src/components/unbird.js | 239 +++++++++++++++++++++++++ www/src/utils/typography.js | 2 +- www/src/views/starter-library/index.js | 10 +- 4 files changed, 249 insertions(+), 3 deletions(-) create mode 100644 www/src/components/unbird.js diff --git a/www/package.json b/www/package.json index baa245e83b71f..ace5cd6c2dc53 100644 --- a/www/package.json +++ b/www/package.json @@ -5,6 +5,7 @@ "author": "Kyle Mathews ", "dependencies": { "@reach/skip-nav": "^0.1.1", + "axios": "^0.18.0", "bluebird": "^3.5.1", "dotenv": "^6.0.0", "email-validator": "^1.1.1", diff --git a/www/src/components/unbird.js b/www/src/components/unbird.js new file mode 100644 index 0000000000000..91fedf20980b2 --- /dev/null +++ b/www/src/components/unbird.js @@ -0,0 +1,239 @@ +import React from "react" +import PropTypes from "prop-types" +import axios from "axios" +import styled from "react-emotion" +import { rhythm, options } from "../utils/typography" +import { colors } from "../utils/presets" +import EnvelopeIcon from "react-icons/lib/fa/envelope-o" +import CancelIcon from "react-icons/lib/md/close" +import SendIcon from "react-icons/lib/io/paper-airplane" + +const FeedbackComponent = styled(`section`)` + box-sizing: border-box; + position: relative; +` + +const FeedbackToggle = styled(`div`)` + width: 60px; + height: 60px; + background-color: ${colors.gatsby}; + color: #fff; + border-radius: 100%; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); + position: fixed; + bottom: 30px; + right: 30px; + z-index: 99999; + background-size: 30px 30px; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + &:hover { + background-color: ${colors.gatsbyDarker}; + } +` + +const IconWrapper = styled(`div`)` + position: relative; + width: 60px; + height: 60px; +` + +const StatusMessage = styled(`span`)` + position: absolute; + width: 100%; + background: ${colors.gray.dark}; + bottom: 60px; + color: #fff; + font-size: 16px; + padding: 0.4rem 0.8rem; + text-align: left; +` + +const FeedbackForm = styled(`div`)` + position: fixed; + right: 30px; + bottom: 100px; + width: 350px; + height: 300px; + background-color: ${colors.gatsby}; + box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.2); + border-radius: 3px; + overflow: hidden; + flex-direction: column; + justify-content: space-between; + text-align: center; + font-family: ${options.systemFontFamily.join(`,`)}; +` + +const Label = styled(`label`)` + width: 100%; + height: 240px; + background-color: ${colors.gatsby}; + color: #fff; + font-weight: 200; + display: flex; + justify-content: center; + align-items: center; + padding: 40px; + font-size: 22px; +` + +const Form = styled(`form`)` + height: 100%; + position: relative; +` + +const Input = styled(`input`)` + height: 60px; + width: 100%; + font-size: 14px; + padding: 20px 60px 20px 20px; + border: none; + resize: none; + + &:hover { + outline: none; + } +` + +const Send = styled(`button`)` + width: 30px; + height: 30px; + position: absolute; + right: 20px; + bottom: 15px; + cursor: pointer; + background-size: 30px 30px; + background-repeat: no-repeat; + background-position: center; + border: none; +` + +class Unbird extends React.Component { + state = { + visible: false, + feedbackInput: ``, + statusMessage: ``, + } + + static defaultProps = { + feedbackPrompt: `How can we improve your experience?`, + feedbackPlaceholder: `Send feedback...`, + } + + render() { + return ( + + + + {this.state.visible ? ( + + ) : ( + + )} + + + + {this.state.visible && ( + +
+ + {this.state.statusMessage && ( + {this.state.statusMessage} + )} + + + + +
+ + )} + + ) + } + + toggleFeedbackForm = () => { + this.setState({ + visible: !this.state.visible, + statusMessage: ``, + feedbackInput: ``, + }) + } + + handleFeedbackInput = e => { + this.setState({ feedbackInput: event.target.value }) + } + + setStatusMessage = msg => { + this.setState({ statusMessage: msg }) + } + + submitFeedback = async e => { + e.preventDefault() + + const { dataSetId, publicKey } = this.props + const Unbird = `https://app.unbird.com/widget/entry/${dataSetId}/${publicKey}` + + return axios + .post(Unbird, { + entry: this.state.feedbackInput, + }) + .then(_ => { + this.setStatusMessage(`Sent! Thanks :)`) + this.setState({ feedbackInput: `` }) + }) + .catch(_ => { + this.setStatusMessage(`Oops. Something went wrong...`) + }) + } +} + +Unbird.propTypes = { + dataSetId: PropTypes.string.isRequired, + publicKey: PropTypes.string.isRequired, + feedbackPrompt: PropTypes.string, + feedbackPlaceholder: PropTypes.string, +} + +export default Unbird diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js index 500a970540fa5..3a81263e54b85 100644 --- a/www/src/utils/typography.js +++ b/www/src/utils/typography.js @@ -97,7 +97,7 @@ const _options = { paddingTop: `0.2em`, paddingBottom: `0.2em`, }, - "tt, code, kbd, .gatsby-code-title": { + "tt, code, kbd, label, .gatsby-code-title": { fontFamily: options.monospaceFontFamily.join(`,`), fontSize: `80%`, }, diff --git a/www/src/views/starter-library/index.js b/www/src/views/starter-library/index.js index 5217530824de1..2702ca4a958a3 100644 --- a/www/src/views/starter-library/index.js +++ b/www/src/views/starter-library/index.js @@ -1,6 +1,7 @@ import React, { Component } from "react" import Helmet from "react-helmet" import Layout from "../../components/layout" +import Unbird from "../../components/unbird" import RRSM from "../../utils/reach-router-state-manager" import queryString from "query-string" @@ -19,8 +20,8 @@ class StarterLibraryPage extends Component { urlState.s !== undefined ? urlState.s // if theres a search term : urlState.d && !Array.isArray(urlState.d) - ? urlState.d // if theres a single dependency - : `Library` // if no search term or single dependency + ? urlState.d // if theres a single dependency + : `Library` // if no search term or single dependency return ( @@ -55,6 +56,11 @@ class StarterLibraryPage extends Component { )} defaultSearchState={{ v: [`2`] }} /> + ) } From a000e0912b40bfa56951e4febccf320729f7bed0 Mon Sep 17 00:00:00 2001 From: Amberley Romo Date: Thu, 13 Dec 2018 09:34:54 -0600 Subject: [PATCH 2/5] fix: prettier --- www/src/views/starter-library/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/views/starter-library/index.js b/www/src/views/starter-library/index.js index 2702ca4a958a3..72ebaff6f569a 100644 --- a/www/src/views/starter-library/index.js +++ b/www/src/views/starter-library/index.js @@ -20,8 +20,8 @@ class StarterLibraryPage extends Component { urlState.s !== undefined ? urlState.s // if theres a search term : urlState.d && !Array.isArray(urlState.d) - ? urlState.d // if theres a single dependency - : `Library` // if no search term or single dependency + ? urlState.d // if theres a single dependency + : `Library` // if no search term or single dependency return ( From ef84f5ab29be5a166e1e48e3149ae504d5d4fe9a Mon Sep 17 00:00:00 2001 From: Dustin Schau Date: Thu, 13 Dec 2018 10:41:51 -0600 Subject: [PATCH 3/5] fix: mistaken event param Co-Authored-By: amberleyromo --- www/src/components/unbird.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/unbird.js b/www/src/components/unbird.js index 91fedf20980b2..705b37ad42a85 100644 --- a/www/src/components/unbird.js +++ b/www/src/components/unbird.js @@ -202,7 +202,7 @@ class Unbird extends React.Component { } handleFeedbackInput = e => { - this.setState({ feedbackInput: event.target.value }) + this.setState({ feedbackInput: e.target.value }) } setStatusMessage = msg => { From 0f82d4a98fbccf66439d40cbfc569b7e9e398d35 Mon Sep 17 00:00:00 2001 From: Amberley Date: Thu, 13 Dec 2018 10:43:29 -0600 Subject: [PATCH 4/5] fix: input required --- www/src/components/unbird.js | 1 + 1 file changed, 1 insertion(+) diff --git a/www/src/components/unbird.js b/www/src/components/unbird.js index 705b37ad42a85..01cd05942d042 100644 --- a/www/src/components/unbird.js +++ b/www/src/components/unbird.js @@ -173,6 +173,7 @@ class Unbird extends React.Component { value={this.state.feedbackInput} onChange={this.handleFeedbackInput} placeholder={this.props.feedbackPlaceholder} + required /> Date: Fri, 14 Dec 2018 09:54:43 -0600 Subject: [PATCH 5/5] fix: styling review edits from @greglobinski --- www/src/components/unbird.js | 142 ++++++++++++++++------------------- 1 file changed, 63 insertions(+), 79 deletions(-) diff --git a/www/src/components/unbird.js b/www/src/components/unbird.js index 91fedf20980b2..be82474480c45 100644 --- a/www/src/components/unbird.js +++ b/www/src/components/unbird.js @@ -3,9 +3,9 @@ import PropTypes from "prop-types" import axios from "axios" import styled from "react-emotion" import { rhythm, options } from "../utils/typography" -import { colors } from "../utils/presets" -import EnvelopeIcon from "react-icons/lib/fa/envelope-o" -import CancelIcon from "react-icons/lib/md/close" +import presets, { colors } from "../utils/presets" +import EnvelopeFaIcon from "react-icons/lib/fa/envelope-o" +import CancelMdIcon from "react-icons/lib/md/close" import SendIcon from "react-icons/lib/io/paper-airplane" const FeedbackComponent = styled(`section`)` @@ -16,28 +16,43 @@ const FeedbackComponent = styled(`section`)` const FeedbackToggle = styled(`div`)` width: 60px; height: 60px; + bottom: 64px; background-color: ${colors.gatsby}; color: #fff; border-radius: 100%; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); position: fixed; - bottom: 30px; - right: 30px; + right: 20px; z-index: 99999; - background-size: 30px 30px; - background-repeat: no-repeat; - background-position: center; cursor: pointer; - &:hover { - background-color: ${colors.gatsbyDarker}; + :hover { + background-color: ${colors.gatsbyDark}; + } + + ${presets.Tablet} { + bottom: 30px; + right: 30px; } ` const IconWrapper = styled(`div`)` - position: relative; - width: 60px; - height: 60px; + align-items: center; + display: flex; + height: 100%; + justify-content: center; + width: 100%; + + svg { + height: auto; + } +` + +const EnvelopeIcon = styled(EnvelopeFaIcon)` + font-size: ${rhythm(1)}; +` +const CancelIcon = styled(CancelMdIcon)` + font-size: ${rhythm(1.2)}; ` const StatusMessage = styled(`span`)` @@ -49,66 +64,69 @@ const StatusMessage = styled(`span`)` font-size: 16px; padding: 0.4rem 0.8rem; text-align: left; + left: 0; ` const FeedbackForm = styled(`div`)` position: fixed; - right: 30px; - bottom: 100px; - width: 350px; - height: 300px; + right: 5%; + bottom: 134px; + width: 90%; background-color: ${colors.gatsby}; box-shadow: 0 0 40px 5px rgba(0, 0, 0, 0.2); - border-radius: 3px; - overflow: hidden; - flex-direction: column; - justify-content: space-between; - text-align: center; + border-radius: ${presets.radiusLg}px; font-family: ${options.systemFontFamily.join(`,`)}; + + ${presets.Tablet} { + width: 350px; + right: 30px; + bottom: 100px; + } ` const Label = styled(`label`)` - width: 100%; + font-family: ${options.headerFontFamily.join(`,`)}; + font-weight: 600; height: 240px; - background-color: ${colors.gatsby}; color: #fff; - font-weight: 200; display: flex; justify-content: center; align-items: center; padding: 40px; font-size: 22px; + float: left; ` const Form = styled(`form`)` - height: 100%; - position: relative; + margin: 0; ` const Input = styled(`input`)` + float: left; height: 60px; - width: 100%; + width: calc(100% - 60px); font-size: 14px; - padding: 20px 60px 20px 20px; + padding: 20px; border: none; resize: none; - - &:hover { - outline: none; - } + border-right: 1px solid #ddd; + border-radius: 0; ` const Send = styled(`button`)` - width: 30px; - height: 30px; - position: absolute; - right: 20px; - bottom: 15px; + float: left; + width: 60px; + height: 60px; cursor: pointer; - background-size: 30px 30px; - background-repeat: no-repeat; - background-position: center; border: none; + background: #fff; + padding: 0; + + svg { + width: 50%; + height: auto; + fill: ${colors.gatsby}; + } ` class Unbird extends React.Component { @@ -128,33 +146,7 @@ class Unbird extends React.Component { - {this.state.visible ? ( - - ) : ( - - )} + {this.state.visible ? : } @@ -173,18 +165,10 @@ class Unbird extends React.Component { value={this.state.feedbackInput} onChange={this.handleFeedbackInput} placeholder={this.props.feedbackPlaceholder} + required /> - + @@ -202,7 +186,7 @@ class Unbird extends React.Component { } handleFeedbackInput = e => { - this.setState({ feedbackInput: event.target.value }) + this.setState({ feedbackInput: e.target.value }) } setStatusMessage = msg => {