@atlaskit/contextual-survey 2.0.11

package/dist/es2019/components/SignUpPrompt.js

@@ -0,0 +1,46 @@
+/** @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 (({
+  onAnswer
+}) => {
+  const [pending, setPending] = useState(null);
+  const answeredWith = useCallback(async answer => {
+    setPending(answer ? 'yes' : 'no');
+    await onAnswer(answer);
+  }, [setPending, onAnswer]);
+  const isDisabled = Boolean(pending);
+  return jsx(SuccessContainer, null, jsx("h1", {
+    css: css`
+          font-size: ${fontSize()}px;
+          font-weight: 600;
+          margin: 0;
+          line-height: ${gridSize() * 3}px;
+        `
+  }, "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`
+          margin-top: ${gridSize() * 4}px;
+          display: flex;
+          justify-content: flex-end;
+
+          & > * + * {
+            margin-left: ${gridSize()}px;
+          }
+        `
+  }, jsx(Button, {
+    appearance: "subtle",
+    onClick: () => answeredWith(false),
+    isDisabled: isDisabled,
+    isLoading: pending === 'no'
+  }, "No, thanks"), jsx(Button, {
+    appearance: "primary",
+    onClick: () => answeredWith(true),
+    isDisabled: isDisabled,
+    isLoading: pending === 'yes'
+  }, "Yes, sign me up")));
+});

package/dist/es2019/components/SignUpSuccess.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;
+        line-height: ${gridSize() * 3}px;
+        margin: 0;
+      `
+}, "Thanks for signing up"), jsx("p", null, "We may reach out to you in the future to participate in additional research.")));

package/dist/es2019/components/SuccessContainer.js

@@ -0,0 +1,22 @@
+/** @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 (({
+  children
+}) => jsx("section", {
+  css: css`
+      margin-left: ${gridSize() * 5}px;
+    `
+}, jsx("div", {
+  css: css`
+        position: absolute;
+        top: ${gridSize() * 3}px;
+        left: ${gridSize() * 3}px;
+      `
+}, jsx(CheckCircleIcon, {
+  label: "",
+  "aria-hidden": true,
+  primaryColor: G300
+})), children));

package/dist/es2019/components/SurveyContainer.js

@@ -0,0 +1,37 @@
+/** @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';
+const padding = gridSize() * 3;
+export default (({
+  children,
+  onDismiss
+}) => {
+  return jsx("div", {
+    css: css`
+        background-color: ${N0};
+        border-radius: ${borderRadius()}px;
+        padding: ${padding}px;
+        ${e500()}
+        width: ${surveyInnerWidth}px;
+      `
+  }, jsx("div", {
+    css: css`
+          position: absolute;
+          top: ${padding - gridSize()}px;
+          right: ${padding - gridSize()}px;
+        `
+  }, jsx(Button, {
+    iconBefore: jsx(CrossIcon, {
+      label: "",
+      primaryColor: N50
+    }),
+    "aria-label": "Dismiss",
+    appearance: "subtle",
+    onClick: onDismiss
+  })), children);
+});

package/dist/es2019/components/SurveyForm.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+
+const getExpandedHeight = (ref, state) => {
+  if (!ref.current) {
+    return '0';
+  }
+
+  switch (state) {
+    case 'entering':
+      return `${ref.current.scrollHeight}px`;
+
+    case 'entered':
+      // needed for TextField auto height expand
+      return `none`;
+
+    default:
+      return '0';
+  }
+};
+
+const transitionDuration = 200;
+export default (({
+  question,
+  statement,
+  textPlaceholder,
+  textLabel,
+  onSubmit
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [canContactDefault, setCanContactDefault] = useState(false);
+  const hasAutoFilledCanContactRef = useRef(false);
+  const expandedAreaRef = useRef(null);
+  const onScoreSelect = useCallback(() => {
+    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
+
+  const onFeedbackChange = useCallback(() => {
+    if (hasAutoFilledCanContactRef.current) {
+      return;
+    }
+
+    hasAutoFilledCanContactRef.current = true;
+    setCanContactDefault(true);
+  }, []);
+  return jsx("section", {
+    "aria-labelledby": "contextualSurveyQuestion"
+  }, jsx("h1", {
+    id: "contextualSurveyQuestion",
+    css: css`
+          font-size: ${fontSize()}px;
+          font-weight: 600;
+        `
+  }, question), statement && jsx("p", {
+    id: "contextualSurveyStatement"
+  }, statement), jsx(Form, {
+    onSubmit: onSubmit
+  }, ({
+    formProps,
+    submitting
+  }) => jsx("form", formProps, jsx(Field, {
+    name: "feedbackScore",
+    isDisabled: submitting,
+    isRequired: true
+  }, ({
+    fieldProps
+  }) => jsx(FeedbackScoreButtons, _extends({}, fieldProps, {
+    onChange: score => {
+      fieldProps.onChange(score);
+      onScoreSelect();
+    }
+  }))), jsx(Transition, {
+    in: expanded,
+    timeout: transitionDuration,
+    mountOnEnter: true
+  }, state => jsx("div", {
+    css: css`
+                    transition: max-height ${transitionDuration}ms ease-in-out;
+                    overflow: hidden;
+                    max-height: ${getExpandedHeight(expandedAreaRef, state)};
+                  `,
+    ref: expandedAreaRef
+  }, jsx(Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting
+  }, ({
+    fieldProps
+  }) => jsx(Textarea, _extends({}, fieldProps, {
+    "aria-label": textLabel,
+    placeholder: textPlaceholder,
+    onChange: event => {
+      fieldProps.onChange(event);
+      onFeedbackChange();
+    }
+  }))), jsx(CheckboxField, {
+    name: "canContact",
+    isDisabled: submitting,
+    defaultIsChecked: canContactDefault
+  }, ({
+    fieldProps
+  }) => 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/es2019/components/SurveyMarshal.js

@@ -0,0 +1,62 @@
+/** @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';
+const animationDuration = 300;
+const offscreen = {
+  translateX: `${surveyInnerWidth + surveyOffset}px`,
+  opacity: '0'
+};
+
+const 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) {
+  const {
+    children,
+    shouldShow
+  } = props;
+  return jsx(Transition, {
+    in: shouldShow,
+    timeout: animationDuration,
+    unmountOnExit: true
+  }, state => {
+    const {
+      translateX,
+      opacity
+    } = getAnimationProps(state);
+    return jsx("div", {
+      css: css`
+              position: fixed;
+              right: ${surveyOffset}px;
+              bottom: ${surveyOffset}px;
+              z-index: ${layers.flag()};
+              transform: translateX(${translateX});
+              opacity: ${opacity};
+              transition: all ${animationDuration}ms ease-in-out;
+              transition-property: transform, opacity;
+            `
+    }, children());
+  });
+}

package/dist/es2019/components/useEscapeToDismiss.js

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from 'react';
+export const 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;
+  }
+
+  const inTextArea = Boolean(target.closest('textarea')); // Allow dismissing if not in a textarea
+
+  return !inTextArea;
+}
+
+export default function useEscapeToDismiss({
+  onDismiss
+}) {
+  const onDismissRef = useRef(onDismiss); // Defensively accounting for consumer passing in a new function
+  // each time. We just want to call the latest one
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  useEffect(() => {
+    let 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/es2019/constants.js

@@ -0,0 +1,4 @@
+import { gridSize } from '@atlaskit/theme/constants';
+export const surveyInnerWidth = gridSize() * 55; // 440
+
+export const surveyOffset = gridSize() * 6; // 48

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+export { default as ContextualSurvey, DismissTrigger } from './components/ContextualSurvey';
+export { default as SurveyMarshal } from './components/SurveyMarshal';

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

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

package/dist/esm/components/ContextualSurvey.js

@@ -0,0 +1,244 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 var DismissTrigger;
+
+(function (DismissTrigger) {
+  DismissTrigger["AutoDismiss"] = "AUTO_DISMISS";
+  DismissTrigger["Manual"] = "MANUAL";
+  DismissTrigger["Finished"] = "FINISHED";
+  DismissTrigger["Unmount"] = "UNMOUNT";
+})(DismissTrigger || (DismissTrigger = {}));
+
+export var AUTO_DISAPPEAR_DURATION = 8000;
+export default (function (_ref) {
+  var question = _ref.question,
+      statement = _ref.statement,
+      onDismiss = _ref.onDismiss,
+      onSubmit = _ref.onSubmit,
+      onMailingListAnswer = _ref.onMailingListAnswer,
+      getUserHasAnsweredMailingList = _ref.getUserHasAnsweredMailingList,
+      _ref$textLabel = _ref.textLabel,
+      textLabel = _ref$textLabel === void 0 ? 'Why did you give that rating' : _ref$textLabel,
+      _ref$textPlaceholder = _ref.textPlaceholder,
+      textPlaceholder = _ref$textPlaceholder === void 0 ? 'Tell us why' : _ref$textPlaceholder;
+  var autoDisappearTimeoutRef = useRef(null); // only allow a single dismiss for a component
+
+  var isDismissedRef = useRef(false);
+  var tryDismiss = useCallback(function (trigger) {
+    // Already called dismiss once
+    if (isDismissedRef.current) {
+      return;
+    }
+
+    isDismissedRef.current = true;
+    onDismissRef.current({
+      trigger: trigger
+    });
+  }, []);
+
+  var _useState = useState('SURVEY'),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentStep = _useState2[0],
+      setCurrentStep = _useState2[1];
+
+  var trySetCurrentStep = useCallback(function (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 \"".concat(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
+
+  var onDismissRef = useRef(onDismiss);
+  useEffect(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  var tryClearTimeout = useCallback(function () {
+    var id = autoDisappearTimeoutRef.current;
+
+    if (id) {
+      clearTimeout(id);
+      autoDisappearTimeoutRef.current = null;
+    }
+  }, []); // Cleanup any auto dismiss after dismiss
+
+  useEffect(function () {
+    return function unmount() {
+      tryClearTimeout();
+      tryDismiss(DismissTrigger.Unmount);
+    };
+  }, [tryClearTimeout, tryDismiss]);
+  var onSurveySubmit = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(formValues, form) {
+      var callback,
+          userHasAnswered,
+          _args = arguments;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              callback = _args.length > 2 && _args[2] !== undefined ? _args[2] : function () {};
+              _context.next = 3;
+              return onSubmit(formValues);
+
+            case 3:
+              if (!isDismissedRef.current) {
+                _context.next = 6;
+                break;
+              }
+
+              callback();
+              return _context.abrupt("return");
+
+            case 6:
+              if (formValues.canContact) {
+                _context.next = 10;
+                break;
+              }
+
+              callback();
+              trySetCurrentStep('POST_SURVEY_NO_CONSENT');
+              return _context.abrupt("return");
+
+            case 10:
+              _context.next = 12;
+              return getUserHasAnsweredMailingList();
+
+            case 12:
+              userHasAnswered = _context.sent;
+              callback(); // Not entering phase 2: user has already answered this question
+
+              if (!userHasAnswered) {
+                _context.next = 17;
+                break;
+              }
+
+              trySetCurrentStep('POST_SURVEY_HAS_SIGN_UP');
+              return _context.abrupt("return");
+
+            case 17:
+              // Enter phase 2
+              trySetCurrentStep('SIGN_UP_PROMPT');
+
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [getUserHasAnsweredMailingList, onSubmit, trySetCurrentStep]);
+  var onMailingListResponse = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(answer) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return onMailingListAnswer(answer);
+
+            case 2:
+              if (!answer) {
+                _context2.next = 5;
+                break;
+              }
+
+              trySetCurrentStep('SIGN_UP_SUCCESS');
+              return _context2.abrupt("return");
+
+            case 5:
+              // We have already thanked to user, we can simply close
+              tryDismiss(DismissTrigger.Finished);
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function (_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [tryDismiss, trySetCurrentStep]); // Start the auto disappear when we are finished
+
+  useEffect(function () {
+    // 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(function () {
+        return tryDismiss(DismissTrigger.AutoDismiss);
+      }, AUTO_DISAPPEAR_DURATION);
+    }
+  }, [currentStep, tryDismiss]);
+  useEscapeToDismiss({
+    onDismiss: function onDismiss() {
+      return tryDismiss(DismissTrigger.Manual);
+    }
+  });
+
+  var content = function () {
+    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;
+  }();
+
+  var manualDismiss = useCallback(function () {
+    // clear any pending timers
+    tryClearTimeout();
+    tryDismiss(DismissTrigger.Manual);
+  }, [tryDismiss, tryClearTimeout]);
+  return /*#__PURE__*/React.createElement(SurveyContainer, {
+    onDismiss: manualDismiss
+  }, content);
+});