atlas-feedback-form - npm Package Compare versions

Comparing version 0.0.2 to 1.0.0-beta

lib/FeedbackButton.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -15,10 +17,28 @@
 
+var _reactGa = _interopRequireDefault(require("react-ga"));
+
 var _Prompt = _interopRequireDefault(require("./Prompt"));
 
-var _reactGa = _interopRequireDefault(require("react-ga"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position:fixed;\n  bottom:40%;\n  right:0px;\n  display: inline-block;\n  border-radius: 0px;\n  background-color: #3497c5;\n  border: none;\n  color: white;\n  text-align: center;\n  font-size: 18px;\n  padding: 2px;\n  width: 120px;\n  height: 30px;\n  transition: all 0.2s;\n  margin: -40px;\n  &:hover {\n    background-color: #2f5767;\n    cursor: pointer;\n  }\n  box-shadow: 2px 2px 3px #999;\n  -ms-transform: rotate(-90deg); /* IE 9 */\n  -webkit-transform: rotate(-90deg); /* Safari 3-8 */\n  transform: rotate(-90deg);\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: fixed;\n  bottom: 50%;\n  right: 0;\n  display: inline-block;\n  background-color: #3497c5;\n  color: white;\n  font-size: 1.2rem;\n  padding: 0.25rem 0.25rem 1rem 0.25rem;\n  transition: all 0.2s;\n  margin: -45px;\n  :hover {\n    background-color: #2f5767;\n    cursor: pointer;\n  }\n  box-shadow: 2px 2px 3px #999;\n  transform: rotate(-90deg);\n"]);
 
@@ -34,67 +54,96 @@ _templateObject = function _templateObject() {
 
-_reactGa.default.initialize('UA-131036461-1');
-
-_reactGa.default.pageview(window.location.pathname + window.location.search);
-
 var FeedbackButtonDiv = _styledComponents.default.button(_templateObject());
 
-var FeedbackButton = function FeedbackButton() {
-  return _react.default.createElement("div", null, _react.default.createElement(_reactPopup.default, null), _react.default.createElement(FeedbackButtonDiv, {
-    onClick: onClick
-  }, _react.default.createElement("i", {
-    className: "icon icon-common icon-comment-alt"
-  }), " Feedback"));
-};
+var FeedbackButton =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(FeedbackButton, _React$Component);
 
-var onClick = function onClick() {
-  _reactPopup.default.registerPlugin("prompt", function (defaultValue, placeholder, callback) {
-    var promptValue,
-        smiley = null;
+  function FeedbackButton(props) {
+    var _this;
 
-    var promptChange = function promptChange(inputValue) {
-      promptValue = inputValue;
-    };
+    _classCallCheck(this, FeedbackButton);
 
-    var smileyChange = function smileyChange(smileyValue) {
-      smiley = smileyValue;
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FeedbackButton).call(this, props));
+    _this.state = {
+      smileyScore: null
     };
+    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
+    _this.smileyChange = _this.smileyChange.bind(_assertThisInitialized(_this));
 
-    this.create({
-      title: "Your feedback",
-      content: _react.default.createElement(_Prompt.default, {
-        onChange: promptChange,
-        onSelect: smileyChange,
-        placeholder: placeholder,
-        value: defaultValue
-      }),
-      buttons: {
-        left: ["cancel"],
-        right: [{
-          text: "Save",
-          key: "\u2318+s",
-          className: "success",
-          action: function action() {
-            callback(promptValue);
-            smiley && _reactGa.default.event({
-              category: "Satisfaction",
-              action: "smiley"
-            });
-            smiley && _reactPopup.default.close();
-          }
-        }]
-      }
+    _reactPopup.default.registerPlugin("prompt", function (smileyScore, smileyChange, callback) {
+      _reactPopup.default.create({
+        title: "Your feedback",
+        content: _react.default.createElement(_Prompt.default, {
+          feedbackFormLink: props.feedbackFormLink,
+          onSelect: smileyChange
+        }),
+        buttons: {
+          left: ["cancel"],
+          right: smileyScore ? [{
+            text: "Submit",
+            className: "success",
+            action: function action() {
+              callback();
+              smileyScore && _reactGa.default.event({
+                category: "Satisfaction",
+                action: smileyScore.toString()
+              });
+              smileyScore && _reactPopup.default.close();
+            }
+          }] : []
+        }
+      });
     });
-  });
 
-  _reactPopup.default.plugins().prompt("", "Type your comment", function (value) {
-    _reactPopup.default.alert("Thank you for submitting your feedback.");
+    return _this;
+  }
 
-    _reactGa.default.event({
-      category: 'Comments',
-      action: value
-    });
-  });
+  _createClass(FeedbackButton, [{
+    key: "smileyChange",
+    value: function smileyChange(smileyScore) {
+      var _this2 = this;
+
+      this.setState({
+        smileyScore: smileyScore
+      }, function () {
+        _reactPopup.default.close();
+
+        _this2.onClick();
+      });
+    }
+  }, {
+    key: "onClick",
+    value: function onClick() {
+      _reactPopup.default.plugins().prompt(this.state.smileyScore, this.smileyChange, function () {
+        _reactPopup.default.alert("Thank you for submitting your feedback.");
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      _reactGa.default.initialize(this.props.gaId);
+
+      _reactGa.default.pageview(window.location.pathname + window.location.search);
+
+      return _react.default.createElement("div", null, _react.default.createElement(_reactPopup.default, null), _react.default.createElement(FeedbackButtonDiv, {
+        onClick: this.onClick
+      }, _react.default.createElement("i", {
+        className: "icon icon-functional",
+        "data-icon": "n",
+        style: {
+          paddingRight: "0.5rem"
+        }
+      }), "Feedback"));
+    }
+  }]);
+
+  return FeedbackButton;
+}(_react.default.Component);
+
+FeedbackButton.propTypes = {
+  feedbackFormLink: _propTypes.default.oneOf(["https://www.ebi.ac.uk/support/gxa", "https://www.ebi.ac.uk/support/gxasc"]).isRequired,
+  gaId: _propTypes.default.string.isRequired
 };
-
 var _default = FeedbackButton;
 exports.default = _default;

lib/Prompt.js

@@ -10,6 +10,10 @@ "use strict";
 
-var _emojiMart = require("emoji-mart");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _smileyData = _interopRequireDefault(require("./smileyData"));
+
+var _Smiley = _interopRequireDefault(require("./Smiley"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,2 +33,4 @@
 
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
@@ -34,17 +40,5 @@
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _templateObject2() {
+function _templateObject() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-around;\n"]);
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  transition: all 0.5s;\n  cursor: pointer;\n  opacity: ", ";\n  &:hover {\n    opacity: 1.0\n  };\n"]);
-
   _templateObject = function _templateObject() {
@@ -59,8 +53,4 @@ return data;
 
-var SmileyFace = _styledComponents.default.div(_templateObject(), function (props) {
-  return props.status ? 1.0 : 0.2;
-});
+var SmileyContainer = _styledComponents.default.div(_templateObject());
 
-var SmileyContainer = _styledComponents.default.div(_templateObject2());
-
 var Prompt =
@@ -78,13 +68,5 @@ /*#__PURE__*/
     _this.state = {
-      value: _this.props.defaultValue,
-      smileyDescription: "",
-      chosenSmiley: "",
-      required: _this.props.required
+      selectedSmileyScore: 0
     };
-
-    _this.onChange = function (e) {
-      return _this._onChange(e);
-    };
-
-    _this.onClick = _this.onClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
     return _this;
@@ -94,23 +76,8 @@ }
   _createClass(Prompt, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevState.value !== this.state.value) {
-        this.props.onChange(this.state.value, this.state.chosenSmiley);
-      }
-    }
-  }, {
-    key: "_onChange",
-    value: function _onChange(e) {
-      var value = e.target.value;
-      this.setState({
-        value: value
-      });
-    }
-  }, {
     key: "onClick",
-    value: function onClick(description) {
+    value: function onClick(selectedSmileyScore) {
       this.setState({
-        chosenSmiley: description
+        selectedSmileyScore: selectedSmileyScore
       });
-      this.props.onSelect(description);
+      this.props.onSelect(selectedSmileyScore);
     }
@@ -122,64 +89,25 @@ }, {
 
-      var _this$state = this.state,
-          smileyDescription = _this$state.smileyDescription,
-          chosenSmiley = _this$state.chosenSmiley,
-          value = _this$state.value;
-      var smileyScale = ["Terrible", "Bad", "Okay", "Good", "Great"];
-      var smileyId = ["disappointed", "slightly_frowning_face", "neutral_face", "grin", "satisfied"];
-      return [_react.default.createElement("p", null, "How satisfied are you ?"), _react.default.createElement("br", null), _react.default.createElement(SmileyContainer, null, smileyScale.map(function (scale, idx) {
-        return _react.default.createElement(SmileyFace, {
-          key: scale,
-          status: chosenSmiley === scale
-        }, _react.default.createElement(_emojiMart.Emoji, {
-          emoji: {
-            id: smileyId[idx],
-            skin: 3
+      return _react.default.createElement("div", null, _react.default.createElement("p", {
+        style: {
+          paddingBottom: "1rem"
+        }
+      }, "How satisfied are you?"), _react.default.createElement(SmileyContainer, null, _smileyData.default.map(function (smiley, idx) {
+        return _react.default.createElement(_Smiley.default, {
+          key: idx,
+          onClick: function onClick() {
+            return _this2.onClick(smiley.score);
           },
-          size: 40,
-          set: "emojione",
-          onLeave: function onLeave() {
-            return _this2.setState({
-              smileyDescription: ""
-            });
-          },
-          onOver: function onOver() {
-            return _this2.setState({
-              smileyDescription: scale
-            });
-          },
-          onClick: function onClick() {
-            return _this2.onClick(scale, idx);
-          }
-        }));
+          emoji: smiley.emoji,
+          label: smiley.label,
+          selected: smiley.score === _this2.state.selectedSmileyScore
+        });
       })), _react.default.createElement("p", {
-        id: "scale",
         style: {
-          visibility: chosenSmiley || smileyDescription ? "visible" : "hidden",
-          textAlign: "center"
+          paddingTop: "1rem"
         }
-      }, chosenSmiley || smileyDescription ? smileyDescription ? smileyDescription : chosenSmiley : "empty"), _react.default.createElement("p", {
-        style: {
-          visibility: value && !chosenSmiley ? "visible" : "hidden",
-          color: "red"
-        }
-      }, "This is required field."), _react.default.createElement("br", null), _react.default.createElement("p", null, "Would you like to add a comment ?"), _react.default.createElement("input", {
-        type: "text",
-        placeholder: this.props.placeholder,
-        className: "mm-popup__input",
-        value: this.state.value,
-        onChange: this.onChange
-      })];
+      }, _react.default.createElement("a", {
+        href: this.props.feedbackFormLink,
+        target: "_blank"
+      }, "Click here if you need support.")));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.required !== state.required) {
-        return {
-          required: props.required
-        };
-      } // No state update necessary
-
-
-      return null;
-    }
   }]);
@@ -190,3 +118,7 @@
 
+Prompt.propTypes = {
+  onSelect: _propTypes.default.func.isRequired,
+  feedbackFormLink: _propTypes.default.string.isRequired
+};
 var _default = Prompt;
 exports.default = _default;

package.json

 {
   "name": "atlas-feedback-form",
-  "version": "0.0.2",
+  "version": "1.0.0-beta",
   "description": "This feedback form is triggered by clicking a right-side button, which contains a mandatory five-scale smiley score bar and an optional comments textbox.",
@@ -29,35 +29,34 @@ "main": "lib/index.js",
     "type": "git",
-    "url": "https://github.com/gxa/my-package.git"
+    "url": "https://github.com/ebi-gene-expression-group/atlas-smileys-feedback-form"
   },
   "dependencies": {
-    "emoji-mart": "^2.9.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.3",
-    "react-ga": "^2.5.6",
-    "react-popup": "^0.9.3",
-    "styled-components": "^4.1.2"
+    "prop-types": "^15.7.2",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-ga": "^2.5.7",
+    "react-popup": "^0.10.0",
+    "styled-components": "^4.1.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.0",
-    "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.2.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.3.4",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^8.0.4",
-    "clean-webpack-plugin": "^1.0.0",
-    "coveralls": "^3.0.2",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "eslint": "^5.10.0",
+    "babel-jest": "^24.1.0",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.1",
+    "coveralls": "^3.0.3",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "eslint": "^5.14.1",
     "eslint-config-gene-expression": "^0.4.2",
-    "fetch-mock": "^7.2.5",
-    "jest": "^23.6.0",
-    "react-test-renderer": "^16.6.3",
-    "webpack": "^4.27.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "fetch-mock": "^7.3.0",
+    "jest": "^24.1.0",
+    "react-test-renderer": "^16.8.3",
+    "webpack": "^4.29.5",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
   }
 }

README.md

@@ -1,9 +0,16 @@
-# Atlas Smiley Feedback form 
+# Atlas Feedback Form [![Coverage Status](https://coveralls.io/repos/github/ebi-gene-expression-group/atlas-smileys-feedback-form/badge.svg?branch=master)](https://coveralls.io/github/ebi-gene-expression-group/atlas-smileys-feedback-form?branch=master) [![Build Status](https://travis-ci.org/ebi-gene-expression-group/atlas-smileys-feedback-form.svg?branch=master)](https://travis-ci.org/ebi-gene-expression-group/atlas-smileys-feedback-form)
 
 ## Description
-This feedback form is triggered by clicking a right-side button, which contains a mandatory five-scale smiley score bar and an optional comments text box.
+This feedback form is triggered by clicking a right-side button, which contains a mandatory five-scale smiley score bar
+and a link to an externally-served feedback form.
 
-The smiley score and comments are sent to **Google Analytics** as an event.
+The smiley score is sent to **Google Analytics** as an event.
 
 
+## Dependencies
+The feedback button uses an icon from [EBI Icon Fonts](https://www.ebi.ac.uk/style-lab/general/fonts/v1.3/). In case
+you don’t include them in your environment nothing will be shown, only the *Feedback* label text. Have a look at
+`/html/index.html` for more details. To deploy in production remember to add `react-popup.css` as well.
+
+
 ## Run it on your browser
@@ -10,0 +17,0 @@ Use Webpack-Dev-Server:

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16984

increased by27.65%

Dependency count

6

decreased by-14.29%

Number of package files

7

increased by40%

Lines of code

271

increased by15.81%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

22

increased by46.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-popup@0.10.0(transitive)

• - Removedemoji-mart@^2.9.2

• - Removedemoji-mart@2.11.2(transitive)

• - Removedreact-popup@0.9.3(transitive)

• Updatedprop-types@^15.7.2

• Updatedreact@^16.8.3

• Updatedreact-dom@^16.8.3

• Updatedreact-ga@^2.5.7

• Updatedreact-popup@^0.10.0

• Updatedstyled-components@^4.1.3