@atlaskit/contextual-survey 2.0.11

package/dist/cjs/components/SurveyMarshal.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SurveyMarshal;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _constants2 = require("../constants");
+
+var _templateObject;
+
+var animationDuration = 300;
+var offscreen = {
+  translateX: "".concat(_constants2.surveyInnerWidth + _constants2.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;
+      }
+  }
+};
+
+function SurveyMarshal(props) {
+  var children = props.children,
+      shouldShow = props.shouldShow;
+  return (0, _core.jsx)(_reactTransitionGroup.Transition, {
+    in: shouldShow,
+    timeout: animationDuration,
+    unmountOnExit: true
+  }, function (state) {
+    var _getAnimationProps = getAnimationProps(state),
+        translateX = _getAnimationProps.translateX,
+        opacity = _getAnimationProps.opacity;
+
+    return (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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            "])), _constants2.surveyOffset, _constants2.surveyOffset, _constants.layers.flag(), translateX, opacity, animationDuration)
+    }, children());
+  });
+}

package/dist/cjs/components/useEscapeToDismiss.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useEscapeToDismiss;
+exports.escape = void 0;
+
+var _react = require("react");
+
+var escape = 27;
+exports.escape = escape;
+
+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;
+}
+
+function useEscapeToDismiss(_ref) {
+  var onDismiss = _ref.onDismiss;
+  var onDismissRef = (0, _react.useRef)(onDismiss); // Defensively accounting for consumer passing in a new function
+  // each time. We just want to call the latest one
+
+  (0, _react.useEffect)(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  (0, _react.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;
+  }, []);
+}

package/dist/cjs/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.surveyOffset = exports.surveyInnerWidth = void 0;
+
+var _constants = require("@atlaskit/theme/constants");
+
+var surveyInnerWidth = (0, _constants.gridSize)() * 55; // 440
+
+exports.surveyInnerWidth = surveyInnerWidth;
+var surveyOffset = (0, _constants.gridSize)() * 6; // 48
+
+exports.surveyOffset = surveyOffset;

package/dist/cjs/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ContextualSurvey", {
+  enumerable: true,
+  get: function get() {
+    return _ContextualSurvey.default;
+  }
+});
+Object.defineProperty(exports, "DismissTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _ContextualSurvey.DismissTrigger;
+  }
+});
+Object.defineProperty(exports, "SurveyMarshal", {
+  enumerable: true,
+  get: function get() {
+    return _SurveyMarshal.default;
+  }
+});
+
+var _ContextualSurvey = _interopRequireWildcard(require("./components/ContextualSurvey"));
+
+var _SurveyMarshal = _interopRequireDefault(require("./components/SurveyMarshal"));
+
+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; }

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/contextual-survey",
+	"version": "2.0.11",
+	"sideEffects": false
+}

package/dist/es2019/components/ContextualSurvey.js

@@ -0,0 +1,178 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import FeedbackAcknowledgement from './FeedbackAcknowledgement';
+import SignUpPrompt from './SignUpPrompt';
+import SignUpSuccess from './SignUpSuccess';
+import SurveyContainer from './SurveyContainer';
+import SurveyForm from './SurveyForm';
+import useEscapeToDismiss from './useEscapeToDismiss';
+export let DismissTrigger;
+
+(function (DismissTrigger) {
+  DismissTrigger["AutoDismiss"] = "AUTO_DISMISS";
+  DismissTrigger["Manual"] = "MANUAL";
+  DismissTrigger["Finished"] = "FINISHED";
+  DismissTrigger["Unmount"] = "UNMOUNT";
+})(DismissTrigger || (DismissTrigger = {}));
+
+export const AUTO_DISAPPEAR_DURATION = 8000;
+export default (({
+  question,
+  statement,
+  onDismiss,
+  onSubmit,
+  onMailingListAnswer,
+  getUserHasAnsweredMailingList,
+  textLabel = 'Why did you give that rating',
+  textPlaceholder = 'Tell us why'
+}) => {
+  const autoDisappearTimeoutRef = useRef(null); // only allow a single dismiss for a component
+
+  const isDismissedRef = useRef(false);
+  const tryDismiss = useCallback(trigger => {
+    // Already called dismiss once
+    if (isDismissedRef.current) {
+      return;
+    }
+
+    isDismissedRef.current = true;
+    onDismissRef.current({
+      trigger
+    });
+  }, []);
+  const [currentStep, setCurrentStep] = useState('SURVEY');
+  const trySetCurrentStep = useCallback(step => {
+    // Already dismissed - cannot update the step
+    if (isDismissedRef.current) {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.log(`not setting step "${step}" as survey is already dismissed`);
+      }
+
+      return;
+    }
+
+    setCurrentStep(step);
+  }, [setCurrentStep]); // using a ref so that we don't break all of our caches if a consumer is using an arrow function
+
+  const onDismissRef = useRef(onDismiss);
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  const tryClearTimeout = useCallback(() => {
+    const id = autoDisappearTimeoutRef.current;
+
+    if (id) {
+      clearTimeout(id);
+      autoDisappearTimeoutRef.current = null;
+    }
+  }, []); // Cleanup any auto dismiss after dismiss
+
+  useEffect(() => {
+    return function unmount() {
+      tryClearTimeout();
+      tryDismiss(DismissTrigger.Unmount);
+    };
+  }, [tryClearTimeout, tryDismiss]);
+  const onSurveySubmit = useCallback(async (formValues, form, callback = () => {}) => {
+    // Submitting form: Phase 1 complete
+    await onSubmit(formValues); // Note: need to call callback just before we navigate away
+    // It cleans up the form (required)
+    // Optional Phase 2: Asking to join Atlassian Research Group
+    // Only enter phase 2 if:
+    // 1. not already dismissed; AND
+    // 2. permission given to contact; AND
+    // 3. user has previously not answered mailing list question (getUserHasAnsweredMailingList returns false)
+    // Not entering phase 2: User has dismissed while the submit promise was resolving
+
+    if (isDismissedRef.current) {
+      callback();
+      return;
+    } // Not entering phase 2: no permission given to respond to feedback
+
+
+    if (!formValues.canContact) {
+      callback();
+      trySetCurrentStep('POST_SURVEY_NO_CONSENT');
+      return;
+    }
+
+    const userHasAnswered = await getUserHasAnsweredMailingList();
+    callback(); // Not entering phase 2: user has already answered this question
+
+    if (userHasAnswered) {
+      trySetCurrentStep('POST_SURVEY_HAS_SIGN_UP');
+      return;
+    } // Enter phase 2
+
+
+    trySetCurrentStep('SIGN_UP_PROMPT');
+  }, [getUserHasAnsweredMailingList, onSubmit, trySetCurrentStep]);
+  const onMailingListResponse = useCallback(async answer => {
+    await onMailingListAnswer(answer);
+
+    if (answer) {
+      trySetCurrentStep('SIGN_UP_SUCCESS');
+      return;
+    } // We have already thanked to user, we can simply close
+
+
+    tryDismiss(DismissTrigger.Finished);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [tryDismiss, trySetCurrentStep]); // Start the auto disappear when we are finished
+
+  useEffect(() => {
+    // Already dismissed
+    if (isDismissedRef.current) {
+      return;
+    } // Timeout already scheduled
+
+
+    if (autoDisappearTimeoutRef.current) {
+      return;
+    }
+
+    if (['SIGN_UP_SUCCESS', 'POST_SURVEY_NO_CONSENT', 'POST_SURVEY_HAS_SIGN_UP'].includes(currentStep)) {
+      autoDisappearTimeoutRef.current = window.setTimeout(() => tryDismiss(DismissTrigger.AutoDismiss), AUTO_DISAPPEAR_DURATION);
+    }
+  }, [currentStep, tryDismiss]);
+  useEscapeToDismiss({
+    onDismiss: () => tryDismiss(DismissTrigger.Manual)
+  });
+
+  const content = (() => {
+    if (currentStep === 'SURVEY') {
+      return /*#__PURE__*/React.createElement(SurveyForm, {
+        question: question,
+        statement: statement,
+        textLabel: textLabel,
+        textPlaceholder: textPlaceholder,
+        onSubmit: onSurveySubmit
+      });
+    }
+
+    if (currentStep === 'SIGN_UP_PROMPT') {
+      return /*#__PURE__*/React.createElement(SignUpPrompt, {
+        onAnswer: onMailingListResponse
+      });
+    }
+
+    if (currentStep === 'SIGN_UP_SUCCESS') {
+      return /*#__PURE__*/React.createElement(SignUpSuccess, null);
+    }
+
+    if (currentStep === 'POST_SURVEY_NO_CONSENT' || currentStep === 'POST_SURVEY_HAS_SIGN_UP') {
+      return /*#__PURE__*/React.createElement(FeedbackAcknowledgement, null);
+    }
+
+    return null;
+  })();
+
+  const manualDismiss = useCallback(() => {
+    // clear any pending timers
+    tryClearTimeout();
+    tryDismiss(DismissTrigger.Manual);
+  }, [tryDismiss, tryClearTimeout]);
+  return /*#__PURE__*/React.createElement(SurveyContainer, {
+    onDismiss: manualDismiss
+  }, content);
+});

package/dist/es2019/components/FeedbackAcknowledgement.js

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import SuccessContainer from './SuccessContainer';
+export default (() => jsx(SuccessContainer, null, jsx("h1", {
+  css: css`
+        font-size: ${fontSize()}px;
+        font-weight: 600;
+        margin-top: 0;
+        line-height: ${gridSize() * 3}px;
+      `
+}, "Thanks for your feedback")));

package/dist/es2019/components/FeedbackScoreButtons.js

@@ -0,0 +1,69 @@
+/** @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';
+const tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
+export default (({
+  onChange,
+  value
+}) => jsx("div", null, jsx("div", {
+  css: css`
+        display: flex;
+        justify-content: space-between;
+
+        & > * + * {
+          margin-left: ${gridSize()}px;
+        }
+
+        & > * {
+          flex: 1;
+
+          & > button {
+            justify-content: center;
+          }
+        }
+      `
+}, Array.from({
+  length: 7
+}, (_, i) => {
+  const score = i + 1;
+  const isSelected = value === score;
+  return jsx(Tooltip, {
+    content: tooltipMessage[i],
+    key: score,
+    hideTooltipOnClick: true
+  }, jsx(Button, {
+    onClick: () => onChange(score),
+    isSelected: isSelected,
+    "aria-pressed": isSelected,
+    "aria-describedby": "contextualSurveyStatement",
+    "aria-label": tooltipMessage[i],
+    shouldFitContainer: true
+  }, score));
+})), jsx("div", {
+  css: css`
+        font-size: 12px;
+        font-weight: 600;
+        color: ${N200};
+        display: flex;
+        margin-top: ${gridSize()}px;
+        margin-bottom: ${gridSize() * 3}px;
+
+        & > span {
+          width: ${gridSize() * 10}px;
+        }
+      `,
+  "aria-hidden": true
+}, jsx("span", null, "Strongly disagree"), jsx("span", {
+  css: css`
+          text-align: center;
+          margin: 0 auto;
+          padding: 0 ${gridSize() * 6}px;
+        `
+}, "Neutral"), jsx("span", {
+  css: css`
+          text-align: right;
+        `
+}, "Strongly agree"))));