@atlaskit/contextual-survey 2.0.11

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import SuccessContainer from './SuccessContainer';
+export default (function () {
+  return jsx(SuccessContainer, null, jsx("h1", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        margin-top: 0;\n        line-height: ", "px;\n      "])), fontSize(), gridSize() * 3)
+  }, "Thanks for your feedback"));
+});

package/dist/esm/components/FeedbackScoreButtons.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { N200 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+import Tooltip from '@atlaskit/tooltip';
+var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
+export default (function (_ref) {
+  var onChange = _ref.onChange,
+      value = _ref.value;
+  return jsx("div", null, jsx("div", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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      "])), gridSize())
+  }, Array.from({
+    length: 7
+  }, function (_, i) {
+    var score = i + 1;
+    var isSelected = value === score;
+    return jsx(Tooltip, {
+      content: tooltipMessage[i],
+      key: score,
+      hideTooltipOnClick: true
+    }, jsx(Button, {
+      onClick: function onClick() {
+        return onChange(score);
+      },
+      isSelected: isSelected,
+      "aria-pressed": isSelected,
+      "aria-describedby": "contextualSurveyStatement",
+      "aria-label": tooltipMessage[i],
+      shouldFitContainer: true
+    }, score));
+  })), jsx("div", {
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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      "])), N200, gridSize(), gridSize() * 3, gridSize() * 10),
+    "aria-hidden": true
+  }, jsx("span", null, "Strongly disagree"), jsx("span", {
+    css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "])), gridSize() * 6)
+  }, "Neutral"), jsx("span", {
+    css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          text-align: right;\n        "])))
+  }, "Strongly agree")));
+});

package/dist/esm/components/SignUpPrompt.js

@@ -0,0 +1,66 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import SuccessContainer from './SuccessContainer';
+export default (function (_ref) {
+  var onAnswer = _ref.onAnswer;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      pending = _useState2[0],
+      setPending = _useState2[1];
+
+  var answeredWith = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(answer) {
+      return _regeneratorRuntime.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 jsx(SuccessContainer, null, jsx("h1", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n          margin: 0;\n          line-height: ", "px;\n        "])), fontSize(), gridSize() * 3)
+  }, "Thanks for your feedback"), jsx("p", null, "Are you interested in participating in our research?"), jsx("p", null, "Sign up for the", ' ', jsx("a", {
+    href: "https://www.atlassian.com/research-group"
+  }, "Atlassian Research Group"), ' ', "and we may contact you in the future with research opportunities."), jsx("div", {
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          margin-top: ", "px;\n          display: flex;\n          justify-content: flex-end;\n\n          & > * + * {\n            margin-left: ", "px;\n          }\n        "])), gridSize() * 4, gridSize())
+  }, jsx(Button, {
+    appearance: "subtle",
+    onClick: function onClick() {
+      return answeredWith(false);
+    },
+    isDisabled: isDisabled,
+    isLoading: pending === 'no'
+  }, "No, thanks"), jsx(Button, {
+    appearance: "primary",
+    onClick: function onClick() {
+      return answeredWith(true);
+    },
+    isDisabled: isDisabled,
+    isLoading: pending === 'yes'
+  }, "Yes, sign me up")));
+});

package/dist/esm/components/SignUpSuccess.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import SuccessContainer from './SuccessContainer';
+export default (function (_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  return jsx(SuccessContainer, null, jsx("h1", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        font-size: ", "px;\n        font-weight: 600;\n        line-height: ", "px;\n        margin: 0;\n      "])), fontSize(), gridSize() * 3)
+  }, "Thanks for signing up"), jsx("p", null, "We may reach out to you in the future to participate in additional research."));
+});

package/dist/esm/components/SuccessContainer.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import { G300 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+export default (function (_ref) {
+  var children = _ref.children;
+  return jsx("section", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin-left: ", "px;\n    "])), gridSize() * 5)
+  }, jsx("div", {
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: ", "px;\n        left: ", "px;\n      "])), gridSize() * 3, gridSize() * 3)
+  }, jsx(CheckCircleIcon, {
+    label: "",
+    "aria-hidden": true,
+    primaryColor: G300
+  })), children);
+});

package/dist/esm/components/SurveyContainer.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { N0, N50 } from '@atlaskit/theme/colors';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { e500 } from '@atlaskit/theme/elevation';
+import { surveyInnerWidth } from '../constants';
+var padding = gridSize() * 3;
+export default (function (_ref) {
+  var children = _ref.children,
+      onDismiss = _ref.onDismiss;
+  return jsx("div", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        ", "\n        width: ", "px;\n      "])), N0, borderRadius(), padding, e500(), surveyInnerWidth)
+  }, jsx("div", {
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "])), padding - gridSize(), padding - gridSize())
+  }, jsx(Button, {
+    iconBefore: jsx(CrossIcon, {
+      label: "",
+      primaryColor: N50
+    }),
+    "aria-label": "Dismiss",
+    appearance: "subtle",
+    onClick: onDismiss
+  })), children);
+});

package/dist/esm/components/SurveyForm.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2;
+
+/** @jsx jsx */
+import { useCallback, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import { Transition } from 'react-transition-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import { Checkbox } from '@atlaskit/checkbox';
+import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
+import Textarea from '@atlaskit/textarea';
+import { fontSize } from '@atlaskit/theme/constants';
+import FeedbackScoreButtons from './FeedbackScoreButtons';
+
+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;
+export default (function (_ref) {
+  var question = _ref.question,
+      statement = _ref.statement,
+      textPlaceholder = _ref.textPlaceholder,
+      textLabel = _ref.textLabel,
+      onSubmit = _ref.onSubmit;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      canContactDefault = _useState4[0],
+      setCanContactDefault = _useState4[1];
+
+  var hasAutoFilledCanContactRef = useRef(false);
+  var expandedAreaRef = useRef(null);
+  var onScoreSelect = 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 = useCallback(function () {
+    if (hasAutoFilledCanContactRef.current) {
+      return;
+    }
+
+    hasAutoFilledCanContactRef.current = true;
+    setCanContactDefault(true);
+  }, []);
+  return jsx("section", {
+    "aria-labelledby": "contextualSurveyQuestion"
+  }, jsx("h1", {
+    id: "contextualSurveyQuestion",
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), fontSize())
+  }, question), statement && jsx("p", {
+    id: "contextualSurveyStatement"
+  }, statement), jsx(Form, {
+    onSubmit: onSubmit
+  }, function (_ref2) {
+    var formProps = _ref2.formProps,
+        submitting = _ref2.submitting;
+    return jsx("form", formProps, jsx(Field, {
+      name: "feedbackScore",
+      isDisabled: submitting,
+      isRequired: true
+    }, function (_ref3) {
+      var fieldProps = _ref3.fieldProps;
+      return jsx(FeedbackScoreButtons, _extends({}, fieldProps, {
+        onChange: function onChange(score) {
+          fieldProps.onChange(score);
+          onScoreSelect();
+        }
+      }));
+    }), jsx(Transition, {
+      in: expanded,
+      timeout: transitionDuration,
+      mountOnEnter: true
+    }, function (state) {
+      return jsx("div", {
+        css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "])), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
+        ref: expandedAreaRef
+      }, jsx(Field, {
+        name: "writtenFeedback",
+        defaultValue: "",
+        isDisabled: submitting
+      }, function (_ref4) {
+        var fieldProps = _ref4.fieldProps;
+        return jsx(Textarea, _extends({}, fieldProps, {
+          "aria-label": textLabel,
+          placeholder: textPlaceholder,
+          onChange: function onChange(event) {
+            fieldProps.onChange(event);
+            onFeedbackChange();
+          }
+        }));
+      }), jsx(CheckboxField, {
+        name: "canContact",
+        isDisabled: submitting,
+        defaultIsChecked: canContactDefault
+      }, function (_ref5) {
+        var fieldProps = _ref5.fieldProps;
+        return jsx(Checkbox, _extends({}, fieldProps, {
+          label: "Atlassian can contact me about this feedback"
+        }));
+      }), jsx(FormFooter, null, jsx(Button, {
+        type: "submit",
+        appearance: "primary",
+        isLoading: submitting
+      }, "Submit")));
+    }));
+  }));
+});

package/dist/esm/components/SurveyMarshal.js

@@ -0,0 +1,55 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Transition } from 'react-transition-group';
+import { layers } from '@atlaskit/theme/constants';
+import { surveyInnerWidth, surveyOffset } from '../constants';
+var animationDuration = 300;
+var offscreen = {
+  translateX: "".concat(surveyInnerWidth + surveyOffset, "px"),
+  opacity: '0'
+};
+
+var getAnimationProps = function getAnimationProps(state) {
+  switch (state) {
+    case 'entering':
+      {
+        return offscreen;
+      }
+
+    case 'entered':
+      {
+        return {
+          translateX: '0',
+          opacity: '1'
+        };
+      }
+
+    case 'exited':
+    case 'exiting':
+      {
+        return offscreen;
+      }
+  }
+};
+
+export default function SurveyMarshal(props) {
+  var children = props.children,
+      shouldShow = props.shouldShow;
+  return jsx(Transition, {
+    in: shouldShow,
+    timeout: animationDuration,
+    unmountOnExit: true
+  }, function (state) {
+    var _getAnimationProps = getAnimationProps(state),
+        translateX = _getAnimationProps.translateX,
+        opacity = _getAnimationProps.opacity;
+
+    return jsx("div", {
+      css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              position: fixed;\n              right: ", "px;\n              bottom: ", "px;\n              z-index: ", ";\n              transform: translateX(", ");\n              opacity: ", ";\n              transition: all ", "ms ease-in-out;\n              transition-property: transform, opacity;\n            "])), surveyOffset, surveyOffset, layers.flag(), translateX, opacity, animationDuration)
+    }, children());
+  });
+}

package/dist/esm/components/useEscapeToDismiss.js

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react';
+export var escape = 27;
+
+function bind(target, eventName, handler, options) {
+  target.addEventListener(eventName, handler, options);
+  return function unbind() {
+    target.removeEventListener(eventName, handler, options);
+  };
+}
+
+function shouldDismiss(target) {
+  if (!target) {
+    return true;
+  }
+
+  if (!(target instanceof HTMLElement)) {
+    return true;
+  } // Closest doesn't exist for ie11
+  // Because we cannot be sure if in a text area - just don't allow dismissing
+
+
+  if (!target.closest) {
+    return false;
+  }
+
+  var inTextArea = Boolean(target.closest('textarea')); // Allow dismissing if not in a textarea
+
+  return !inTextArea;
+}
+
+export default function useEscapeToDismiss(_ref) {
+  var onDismiss = _ref.onDismiss;
+  var onDismissRef = useRef(onDismiss); // Defensively accounting for consumer passing in a new function
+  // each time. We just want to call the latest one
+
+  useEffect(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  useEffect(function () {
+    var unbind;
+
+    function onKeyDown(event) {
+      if (event.keyCode !== escape) {
+        return;
+      } // Escape pressed
+      // We don't want to close if the user is typing in the text area
+
+
+      if (!shouldDismiss(event.target)) {
+        return;
+      }
+
+      if (unbind) {
+        // only want to call dismiss once
+        unbind();
+      }
+
+      onDismissRef.current();
+    }
+
+    unbind = bind(window, 'keydown', // @ts-ignore: the typescript for this is lame
+    onKeyDown, {
+      passive: true
+    }); // double calls to unbind is fine
+
+    return unbind;
+  }, []);
+}