@atlaskit/contextual-survey 2.0.11

package/dist/cjs/components/FeedbackAcknowledgement.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
+
+var _templateObject;
+
+var _default = function _default() {
+  return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", "px;\n      "])), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
+  }, "Thanks for your feedback"));
+};
+
+exports.default = _default;

package/dist/cjs/components/FeedbackScoreButtons.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
+
+var _default = function _default(_ref) {
+  var onChange = _ref.onChange,
+      value = _ref.value;
+  return (0, _core.jsx)("div", null, (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        justify-content: space-between;\n\n        & > * + * {\n          margin-left: ", "px;\n        }\n\n        & > * {\n          flex: 1;\n\n          & > button {\n            justify-content: center;\n          }\n        }\n      "])), (0, _constants.gridSize)())
+  }, Array.from({
+    length: 7
+  }, function (_, i) {
+    var score = i + 1;
+    var isSelected = value === score;
+    return (0, _core.jsx)(_tooltip.default, {
+      content: tooltipMessage[i],
+      key: score,
+      hideTooltipOnClick: true
+    }, (0, _core.jsx)(_customThemeButton.default, {
+      onClick: function onClick() {
+        return onChange(score);
+      },
+      isSelected: isSelected,
+      "aria-pressed": isSelected,
+      "aria-describedby": "contextualSurveyStatement",
+      "aria-label": tooltipMessage[i],
+      shouldFitContainer: true
+    }, score));
+  })), (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), _colors.N200, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 10),
+    "aria-hidden": true
+  }, (0, _core.jsx)("span", null, "Strongly disagree"), (0, _core.jsx)("span", {
+    css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "])), (0, _constants.gridSize)() * 6)
+  }, "Neutral"), (0, _core.jsx)("span", {
+    css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: right;\n        "])))
+  }, "Strongly agree")));
+};
+
+exports.default = _default;

package/dist/cjs/components/SignUpPrompt.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
+
+var _templateObject, _templateObject2;
+
+var _default = function _default(_ref) {
+  var onAnswer = _ref.onAnswer;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      pending = _useState2[0],
+      setPending = _useState2[1];
+
+  var answeredWith = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(answer) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setPending(answer ? 'yes' : 'no');
+              _context.next = 3;
+              return onAnswer(answer);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [setPending, onAnswer]);
+  var isDisabled = Boolean(pending);
+  return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", "px;\n        "])), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
+  }, "Thanks for your feedback"), (0, _core.jsx)("p", null, "Are you interested in participating in our research?"), (0, _core.jsx)("p", null, "Sign up for the", ' ', (0, _core.jsx)("a", {
+    href: "https://www.atlassian.com/research-group"
+  }, "Atlassian Research Group"), ' ', "and we may contact you in the future with research opportunities."), (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          margin-top: ", "px;\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", "px;\n          }\n        "])), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)())
+  }, (0, _core.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    onClick: function onClick() {
+      return answeredWith(false);
+    },
+    isDisabled: isDisabled,
+    isLoading: pending === 'no'
+  }, "No, thanks"), (0, _core.jsx)(_customThemeButton.default, {
+    appearance: "primary",
+    onClick: function onClick() {
+      return answeredWith(true);
+    },
+    isDisabled: isDisabled,
+    isLoading: pending === 'yes'
+  }, "Yes, sign me up")));
+};
+
+exports.default = _default;

package/dist/cjs/components/SignUpSuccess.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
+
+var _templateObject;
+
+var _default = function _default(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return (0, _core.jsx)(_SuccessContainer.default, null, (0, _core.jsx)("h1", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", "px;\n        margin: 0;\n      "])), (0, _constants.fontSize)(), (0, _constants.gridSize)() * 3)
+  }, "Thanks for signing up"), (0, _core.jsx)("p", null, "We may reach out to you in the future to participate in additional research."));
+};
+
+exports.default = _default;

package/dist/cjs/components/SuccessContainer.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2;
+
+var _default = function _default(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("section", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      margin-left: ", "px;\n    "])), (0, _constants.gridSize)() * 5)
+  }, (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3)
+  }, (0, _core.jsx)(_checkCircle.default, {
+    label: "",
+    "aria-hidden": true,
+    primaryColor: _colors.G300
+  })), children);
+};
+
+exports.default = _default;

package/dist/cjs/components/SurveyContainer.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _elevation = require("@atlaskit/theme/elevation");
+
+var _constants2 = require("../constants");
+
+var _templateObject, _templateObject2;
+
+var padding = (0, _constants.gridSize)() * 3;
+
+var _default = function _default(_ref) {
+  var children = _ref.children,
+      onDismiss = _ref.onDismiss;
+  return (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        ", "\n        width: ", "px;\n      "])), _colors.N0, (0, _constants.borderRadius)(), padding, (0, _elevation.e500)(), _constants2.surveyInnerWidth)
+  }, (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "])), padding - (0, _constants.gridSize)(), padding - (0, _constants.gridSize)())
+  }, (0, _core.jsx)(_customThemeButton.default, {
+    iconBefore: (0, _core.jsx)(_cross.default, {
+      label: "",
+      primaryColor: _colors.N50
+    }),
+    "aria-label": "Dismiss",
+    appearance: "subtle",
+    onClick: onDismiss
+  })), children);
+};
+
+exports.default = _default;

package/dist/cjs/components/SurveyForm.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _checkbox = require("@atlaskit/checkbox");
+
+var _form = _interopRequireWildcard(require("@atlaskit/form"));
+
+var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var getExpandedHeight = function getExpandedHeight(ref, state) {
+  if (!ref.current) {
+    return '0';
+  }
+
+  switch (state) {
+    case 'entering':
+      return "".concat(ref.current.scrollHeight, "px");
+
+    case 'entered':
+      // needed for TextField auto height expand
+      return "none";
+
+    default:
+      return '0';
+  }
+};
+
+var transitionDuration = 200;
+
+var _default = function _default(_ref) {
+  var question = _ref.question,
+      statement = _ref.statement,
+      textPlaceholder = _ref.textPlaceholder,
+      textLabel = _ref.textLabel,
+      onSubmit = _ref.onSubmit;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      canContactDefault = _useState4[0],
+      setCanContactDefault = _useState4[1];
+
+  var hasAutoFilledCanContactRef = (0, _react.useRef)(false);
+  var expandedAreaRef = (0, _react.useRef)(null);
+  var onScoreSelect = (0, _react.useCallback)(function () {
+    setExpanded(true);
+  }, [setExpanded]); // On the first type the user types some feedback we auto select
+  // the option for allowing feedback. This automatic selection only
+  // happens once. After that it is up to the user to control
+
+  var onFeedbackChange = (0, _react.useCallback)(function () {
+    if (hasAutoFilledCanContactRef.current) {
+      return;
+    }
+
+    hasAutoFilledCanContactRef.current = true;
+    setCanContactDefault(true);
+  }, []);
+  return (0, _core.jsx)("section", {
+    "aria-labelledby": "contextualSurveyQuestion"
+  }, (0, _core.jsx)("h1", {
+    id: "contextualSurveyQuestion",
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), (0, _constants.fontSize)())
+  }, question), statement && (0, _core.jsx)("p", {
+    id: "contextualSurveyStatement"
+  }, statement), (0, _core.jsx)(_form.default, {
+    onSubmit: onSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps,
+        submitting = _ref2.submitting;
+    return (0, _core.jsx)("form", formProps, (0, _core.jsx)(_form.Field, {
+      name: "feedbackScore",
+      isDisabled: submitting,
+      isRequired: true
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return (0, _core.jsx)(_FeedbackScoreButtons.default, (0, _extends2.default)({}, fieldProps, {
+        onChange: function onChange(score) {
+          fieldProps.onChange(score);
+          onScoreSelect();
+        }
+      }));
+    }), (0, _core.jsx)(_reactTransitionGroup.Transition, {
+      in: expanded,
+      timeout: transitionDuration,
+      mountOnEnter: true
+    }, function (state) {
+      return (0, _core.jsx)("div", {
+        css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "])), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
+        ref: expandedAreaRef
+      }, (0, _core.jsx)(_form.Field, {
+        name: "writtenFeedback",
+        defaultValue: "",
+        isDisabled: submitting
+      }, function (_ref4) {
+        var fieldProps = _ref4.fieldProps;
+        return (0, _core.jsx)(_textarea.default, (0, _extends2.default)({}, fieldProps, {
+          "aria-label": textLabel,
+          placeholder: textPlaceholder,
+          onChange: function onChange(event) {
+            fieldProps.onChange(event);
+            onFeedbackChange();
+          }
+        }));
+      }), (0, _core.jsx)(_form.CheckboxField, {
+        name: "canContact",
+        isDisabled: submitting,
+        defaultIsChecked: canContactDefault
+      }, function (_ref5) {
+        var fieldProps = _ref5.fieldProps;
+        return (0, _core.jsx)(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
+          label: "Atlassian can contact me about this feedback"
+        }));
+      }), (0, _core.jsx)(_form.FormFooter, null, (0, _core.jsx)(_customThemeButton.default, {
+        type: "submit",
+        appearance: "primary",
+        isLoading: submitting
+      }, "Submit")));
+    }));
+  }));
+};
+
+exports.default = _default;