@atlaskit/contextual-survey 2.0.11

package/CHANGELOG.md

@@ -0,0 +1,258 @@
+# @atlaskit/contextual-survey
+
+## 2.0.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.9
+
+### Patch Changes
+
+- [`cad4332df17`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cad4332df17) - [ux] Fixed flickering in context survey by removing theme overrides
+- Updated dependencies
+
+## 2.0.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.7
+
+### Patch Changes
+
+- [`d3265f19be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d3265f19be) - Transpile packages using babel rather than tsc
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.5
+
+### Patch Changes
+
+- [`5f58283e1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f58283e1f) - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option.
+  This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started
+  Also add `typescript` to `devDependencies` to denote version that the package was built with.
+
+## 2.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.1
+
+### Patch Changes
+
+- [`6c525a8229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c525a8229) - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0
+
+  Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade
+  to prevent duplicates of tslib being bundled.
+
+## 2.0.0
+
+### Major Changes
+
+- [`87f4720f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87f4720f27) - Officially dropping IE11 support, from this version onwards there are no warranties of the package working in IE11.
+  For more information see: https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/39534
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.10
+
+### Patch Changes
+
+- [`3ba793cffa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ba793cffa) - Update all the theme imports in contextual-survey
+
+## 1.0.9
+
+### Patch Changes
+
+- [`4560b65a4f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4560b65a4f) - upgrade react-transition-group to latest
+
+## 1.0.8
+
+### Patch Changes
+
+- [patch][dd7e8b4bc7](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd7e8b4bc7):
+
+  Change imports to comply with Atlassian conventions
+
+## 1.0.7
+
+### Patch Changes
+
+- [patch][6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
+
+  Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies [6548261c9a](https://bitbucket.org/atlassian/atlassian-frontend/commits/6548261c9a):
+
+  - @atlaskit/docs@8.3.2
+  - @atlaskit/button@13.3.7
+  - @atlaskit/checkbox@10.1.7
+  - @atlaskit/form@7.1.2
+  - @atlaskit/icon@20.0.1
+  - @atlaskit/textarea@2.2.4
+  - @atlaskit/theme@9.5.1
+  - @atlaskit/tooltip@15.2.3
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [c0102a3ea2](https://bitbucket.org/atlassian/atlassian-frontend/commits/c0102a3ea2):
+  - @atlaskit/icon@20.0.0
+  - @atlaskit/form@7.1.1
+  - @atlaskit/docs@8.3.1
+  - @atlaskit/button@13.3.6
+  - @atlaskit/checkbox@10.1.6
+  - @atlaskit/tooltip@15.2.2
+
+## 1.0.5
+
+### Patch Changes
+
+- [patch][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+  Pull in update to form to fix a bug which could cause the internal fieldId to be incorrectly set- [patch][24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+  Form has been converted to Typescript. TypeScript consumers will now get static type safety. Flow types are no longer provided. No API changes.- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+- Updated dependencies [24865cfaff](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/24865cfaff):
+  - @atlaskit/tooltip@15.2.0
+  - @atlaskit/form@7.0.0
+  - @atlaskit/checkbox@10.1.4
+  - @atlaskit/textarea@2.2.3
+
+## 1.0.4
+
+### Patch Changes
+
+- [patch][35d2229b2a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/35d2229b2a):
+
+  Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
+
+## 1.0.3
+
+- Updated dependencies [97bab7fd28](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/97bab7fd28):
+  - @atlaskit/button@13.3.1
+  - @atlaskit/form@6.2.3
+  - @atlaskit/checkbox@10.0.0
+  - @atlaskit/docs@8.1.7
+
+## 1.0.2
+
+### Patch Changes
+
+- [patch][097b696613](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/097b696613):
+
+  Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
+
+## 1.0.1
+
+### Patch Changes
+
+- [patch][f34776be97](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f34776be97):
+
+  Type definition files are now referenced in package.json
+
+## 1.0.0
+
+### Major Changes
+
+- [major][271b7db35b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/271b7db35b):
+
+  _💥 Most of the changes listed are breaking changes from the 0.x release_
+
+  ### New component for placement: `<SurveyMarshal />`
+
+  We no longer require consumers to know anything about `react-transition-group` to use this package. The `<SurveyMarshal />` takes care of the placement and mounting / unmounting animation of the component. It accepts a _function as a child_ which needs to return the `<ContextualSurvey />`. This pattern also allows the `<ContextualSurvey />` to not be evaluated when it is not mounted
+
+  ```js
+  import { SurveyMarshal, ContextualSurvey } from '@atlaskit/contextual-survey';
+
+  <SurveyMarshal shouldShow={showSurvey}>
+    {() => <ContextualSurvey />}
+  </SurveyMarshal>;
+  ```
+
+  ### Other
+
+  - `getUserHasAnsweredMailingList: () => boolean | () => Promise<boolean>` has been streamlined to just be `() => Promise<boolean>`.
+  - ~~`onSignUp() => Promise<void>`~~ has become `onMailingListAnswer(answer) => Promise<void>`. Previously `onSignUp` was only called if the user selected they wanted to sign up. `onMailingListAnswer` will be called when the user selects they want to sign up, as well as if they select that they do not want to sign up.
+  - 💄 `<ContextualSurvey />` now animates in as well as out
+  - 💄 No more scrollbars during closing animation
+  - 💄 Fixing spacing for `FeedbackAcknowledgement` screen
+  - 💄 Audit dismiss button alignment
+  - 🛠Preventing double calls to `onDismiss()`
+  - 🛠`onDismiss()` now provided with a `enum:DismissTrigger` to give more information about the reason for the dismiss
+  - 🛠If `<ContextualSurvey />` is dismissed while `onSubmit` is resolving, then `getUserHasAnsweredMailingList()` is not called. We do this as we won't be showing the email sign up
+  - 🛠If the user marks that they do not want to be contacted, then `getUserHasAnsweredMailingList()` is not called. Previously `getUserHasAnsweredMailingList()` was always called _regardless_ of whether the user wanted to be contacted. The email sign up is only showed if the user states that they want to be contacted and if `getUserHasAnsweredMailingList` returns `false`. We now don't call `getUserHasAnsweredMailingList` if the user has stated they don't want to be contacted as it is a precondition.
+  - 🚀 The user is able to dismiss the form at any time using the `escape` key
+  - 🕵️‍ After clicking a score the response `textarea` is given browser focus.
+  - ✅ New behaviour for the _can contact_ checkbox. It is now not selected by default. When a user types into the response text area for the first time we swap it to checked. From that point the user is welcome to change it's value and we do not automatically swap it to checked again. This allows people to select a score but not be contacted for it. It also recognises that the engagement platform would like to be able to respond to people who provide feedback.
+  - ♿️ Added `aria-pressed` to currently selected score
+  - 📖 Documentation explaining application flow
+  - 👩‍🔬 Added automated test for happy path
+  - ❌ No longer exporting `surveyWidth` and `surveyMargin`. All placement is handled by `<SurveyMarshal />`
+
+## 0.1.3
+
+- Updated dependencies [87a2638655](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/87a2638655):
+  - @atlaskit/button@13.0.10
+  - @atlaskit/form@6.1.2
+  - @atlaskit/checkbox@9.0.0
+
+## 0.1.2
+
+- Updated dependencies [06326ef3f7](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/06326ef3f7):
+  - @atlaskit/docs@8.1.3
+  - @atlaskit/button@13.0.9
+  - @atlaskit/checkbox@8.0.5
+  - @atlaskit/form@6.1.1
+  - @atlaskit/tooltip@15.0.2
+  - @atlaskit/icon@19.0.0
+
+## 0.1.1
+
+### Patch Changes
+
+- [patch][0fc1ac28e8](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0fc1ac28e8):
+
+  Fixed missing background colour.
+
+## 0.1.0
+
+### Minor Changes
+
+- [minor][25f45f87f4](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/25f45f87f4):
+
+  Create contextual survey component

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,13 @@
+# Contextual Survey
+
+This component is used to ask for feedback from the user, without blocking them from continuing using the product.
+
+## Installation
+
+```sh
+yarn add @atlaskit/contextual-survey
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/engagement-platform/contextual-survey).

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "paths": {}
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/constants/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/contextual-survey/constants",
+  "main": "../dist/cjs/constants.js",
+  "module": "../dist/esm/constants.js",
+  "module:es2019": "../dist/es2019/constants.js",
+  "types": "../dist/types/constants.d.ts"
+}

package/dist/cjs/components/ContextualSurvey.js

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AUTO_DISAPPEAR_DURATION = exports.DismissTrigger = void 0;
+
+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 = _interopRequireWildcard(require("react"));
+
+var _FeedbackAcknowledgement = _interopRequireDefault(require("./FeedbackAcknowledgement"));
+
+var _SignUpPrompt = _interopRequireDefault(require("./SignUpPrompt"));
+
+var _SignUpSuccess = _interopRequireDefault(require("./SignUpSuccess"));
+
+var _SurveyContainer = _interopRequireDefault(require("./SurveyContainer"));
+
+var _SurveyForm = _interopRequireDefault(require("./SurveyForm"));
+
+var _useEscapeToDismiss = _interopRequireDefault(require("./useEscapeToDismiss"));
+
+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 DismissTrigger;
+exports.DismissTrigger = DismissTrigger;
+
+(function (DismissTrigger) {
+  DismissTrigger["AutoDismiss"] = "AUTO_DISMISS";
+  DismissTrigger["Manual"] = "MANUAL";
+  DismissTrigger["Finished"] = "FINISHED";
+  DismissTrigger["Unmount"] = "UNMOUNT";
+})(DismissTrigger || (exports.DismissTrigger = DismissTrigger = {}));
+
+var AUTO_DISAPPEAR_DURATION = 8000;
+exports.AUTO_DISAPPEAR_DURATION = AUTO_DISAPPEAR_DURATION;
+
+var _default = function _default(_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 = (0, _react.useRef)(null); // only allow a single dismiss for a component
+
+  var isDismissedRef = (0, _react.useRef)(false);
+  var tryDismiss = (0, _react.useCallback)(function (trigger) {
+    // Already called dismiss once
+    if (isDismissedRef.current) {
+      return;
+    }
+
+    isDismissedRef.current = true;
+    onDismissRef.current({
+      trigger: trigger
+    });
+  }, []);
+
+  var _useState = (0, _react.useState)('SURVEY'),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentStep = _useState2[0],
+      setCurrentStep = _useState2[1];
+
+  var trySetCurrentStep = (0, _react.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 = (0, _react.useRef)(onDismiss);
+  (0, _react.useEffect)(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  var tryClearTimeout = (0, _react.useCallback)(function () {
+    var id = autoDisappearTimeoutRef.current;
+
+    if (id) {
+      clearTimeout(id);
+      autoDisappearTimeoutRef.current = null;
+    }
+  }, []); // Cleanup any auto dismiss after dismiss
+
+  (0, _react.useEffect)(function () {
+    return function unmount() {
+      tryClearTimeout();
+      tryDismiss(DismissTrigger.Unmount);
+    };
+  }, [tryClearTimeout, tryDismiss]);
+  var onSurveySubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(formValues, form) {
+      var callback,
+          userHasAnswered,
+          _args = arguments;
+      return _regenerator.default.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 = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(answer) {
+      return _regenerator.default.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
+
+  (0, _react.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]);
+  (0, _useEscapeToDismiss.default)({
+    onDismiss: function onDismiss() {
+      return tryDismiss(DismissTrigger.Manual);
+    }
+  });
+
+  var content = function () {
+    if (currentStep === 'SURVEY') {
+      return /*#__PURE__*/_react.default.createElement(_SurveyForm.default, {
+        question: question,
+        statement: statement,
+        textLabel: textLabel,
+        textPlaceholder: textPlaceholder,
+        onSubmit: onSurveySubmit
+      });
+    }
+
+    if (currentStep === 'SIGN_UP_PROMPT') {
+      return /*#__PURE__*/_react.default.createElement(_SignUpPrompt.default, {
+        onAnswer: onMailingListResponse
+      });
+    }
+
+    if (currentStep === 'SIGN_UP_SUCCESS') {
+      return /*#__PURE__*/_react.default.createElement(_SignUpSuccess.default, null);
+    }
+
+    if (currentStep === 'POST_SURVEY_NO_CONSENT' || currentStep === 'POST_SURVEY_HAS_SIGN_UP') {
+      return /*#__PURE__*/_react.default.createElement(_FeedbackAcknowledgement.default, null);
+    }
+
+    return null;
+  }();
+
+  var manualDismiss = (0, _react.useCallback)(function () {
+    // clear any pending timers
+    tryClearTimeout();
+    tryDismiss(DismissTrigger.Manual);
+  }, [tryDismiss, tryClearTimeout]);
+  return /*#__PURE__*/_react.default.createElement(_SurveyContainer.default, {
+    onDismiss: manualDismiss
+  }, content);
+};
+
+exports.default = _default;