@atlaskit/feedback-collector 9.0.1 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/feedback-collector
 
+## 10.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.0.0
+
+### Major Changes
+
+- [`2f210d2f476`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2f210d2f476) - [ux] Add feedback button and place it above proforma form builder
+
+## 9.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.1
 
 ### Patch Changes

package/dist/cjs/components/FeedbackButton.js

@@ -0,0 +1,77 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+
+var _flag = require("@atlaskit/flag");
+
+var _feedback = _interopRequireDefault(require("@atlaskit/icon/glyph/feedback"));
+
+var _FeedbackCollector = _interopRequireDefault(require("./FeedbackCollector"));
+
+var _FeedbackFlag = _interopRequireDefault(require("./FeedbackFlag"));
+
+var _messages = require("./messages");
+
+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 FeedbackButton = function FeedbackButton(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      displayFlag = _useState4[0],
+      setDisplayFlag = _useState4[1];
+
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+
+  var embeddableKey = props.embeddableKey,
+      requestTypeId = props.requestTypeId,
+      email = props.email;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: function onClick() {
+      return setIsOpen(true);
+    },
+    iconBefore: /*#__PURE__*/_react.default.createElement(_feedback.default, {
+      label: formatMessage(_messages.messages.feedbackIconLabel),
+      size: "small"
+    })
+  }, formatMessage(_messages.messages.giveFeedback)), isOpen && /*#__PURE__*/_react.default.createElement(_FeedbackCollector.default, {
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    onSubmit: function onSubmit() {
+      return setDisplayFlag(true);
+    },
+    email: email,
+    requestTypeId: requestTypeId,
+    embeddableKey: embeddableKey
+  }), /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, {
+    onDismissed: function onDismissed() {
+      return setDisplayFlag(false);
+    }
+  }, displayFlag && /*#__PURE__*/_react.default.createElement(_FeedbackFlag.default, null)));
+};
+
+var _default = FeedbackButton;
+exports.default = _default;

package/dist/cjs/components/FeedbackCollector.js

@@ -31,7 +31,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _truncate = _interopRequireDefault(require("lodash/truncate"));
+var _Truncate = _interopRequireDefault(require("../utils/Truncate"));
 
 var _FeedbackForm = _interopRequireDefault(require("./FeedbackForm"));
 
@@ -52,9 +52,7 @@ var MAX_SUMMARY_LENGTH_CHARS = 100;
 var singleLineTruncatedText = function singleLineTruncatedText(text) {
   var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SUMMARY_LENGTH_CHARS;
   var singleLineText = text.replace(/\n/g, ' ');
-  return (0, _truncate.default)(singleLineText, {
-    length: length
-  });
+  return (0, _Truncate.default)(singleLineText, length);
 };
 
 var FeedbackCollector = /*#__PURE__*/function (_Component) {

package/dist/cjs/components/messages.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  giveFeedback: {
+    defaultMessage: 'Give feedback',
+    id: 'proforma-form-builder.give-feedback',
+    description: 'The button that allows users to give feedback'
+  },
+  feedbackIconLabel: {
+    defaultMessage: 'Feedback',
+    id: 'proforma-form-builder.feedback-icon-label',
+    description: 'Accessibility text used for the feedback icon'
+  }
+});
+exports.messages = messages;

package/dist/cjs/index.js

@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "FeedbackButton", {
+  enumerable: true,
+  get: function get() {
+    return _FeedbackButton.default;
+  }
+});
 Object.defineProperty(exports, "FeedbackFlag", {
   enumerable: true,
   get: function get() {
@@ -19,6 +25,8 @@ Object.defineProperty(exports, "FeedbackForm", {
 });
 exports.default = void 0;
 
+var _FeedbackButton = _interopRequireDefault(require("./components/FeedbackButton"));
+
 var _FeedbackCollector = _interopRequireDefault(require("./components/FeedbackCollector"));
 
 var _FeedbackFlag = _interopRequireDefault(require("./components/FeedbackFlag"));

package/dist/cjs/utils/Truncate.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = truncate;
+
+function truncate(text, maxLength) {
+  if (!text || !maxLength) {
+    return text;
+  }
+
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  return text.substring(0, maxLength) + '...';
+}

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/feedback-collector",
-	"version": "9.0.1",
+	"version": "10.0.1",
 	"sideEffects": false
 }

package/dist/es2019/components/FeedbackButton.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { FlagGroup } from '@atlaskit/flag';
+import FeedbackIcon from '@atlaskit/icon/glyph/feedback';
+import FeedbackCollector from './FeedbackCollector';
+import FeedbackFlag from './FeedbackFlag';
+import { messages } from './messages';
+
+const FeedbackButton = props => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [displayFlag, setDisplayFlag] = useState(false);
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    embeddableKey,
+    requestTypeId,
+    email
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setIsOpen(true),
+    iconBefore: /*#__PURE__*/React.createElement(FeedbackIcon, {
+      label: formatMessage(messages.feedbackIconLabel),
+      size: "small"
+    })
+  }, formatMessage(messages.giveFeedback)), isOpen && /*#__PURE__*/React.createElement(FeedbackCollector, {
+    onClose: () => setIsOpen(false),
+    onSubmit: () => setDisplayFlag(true),
+    email: email,
+    requestTypeId: requestTypeId,
+    embeddableKey: embeddableKey
+  }), /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: () => setDisplayFlag(false)
+  }, displayFlag && /*#__PURE__*/React.createElement(FeedbackFlag, null)));
+};
+
+export default FeedbackButton;

package/dist/es2019/components/FeedbackCollector.js

@@ -1,14 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
-import truncate from 'lodash/truncate';
+import truncate from '../utils/Truncate';
 import FeedbackForm from './FeedbackForm';
 const MAX_SUMMARY_LENGTH_CHARS = 100;
 
 const singleLineTruncatedText = (text, length = MAX_SUMMARY_LENGTH_CHARS) => {
   const singleLineText = text.replace(/\n/g, ' ');
-  return truncate(singleLineText, {
-    length
-  });
+  return truncate(singleLineText, length);
 };
 
 export default class FeedbackCollector extends Component {

package/dist/es2019/components/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  giveFeedback: {
+    defaultMessage: 'Give feedback',
+    id: 'proforma-form-builder.give-feedback',
+    description: 'The button that allows users to give feedback'
+  },
+  feedbackIconLabel: {
+    defaultMessage: 'Feedback',
+    id: 'proforma-form-builder.feedback-icon-label',
+    description: 'Accessibility text used for the feedback icon'
+  }
+});

package/dist/es2019/index.js

@@ -1,5 +1,6 @@
+import FeedbackButton from './components/FeedbackButton';
 import FeedbackCollector from './components/FeedbackCollector';
 import FeedbackFlag from './components/FeedbackFlag';
 import FeedbackForm from './components/FeedbackForm';
 export default FeedbackCollector;
-export { FeedbackFlag, FeedbackForm };
+export { FeedbackFlag, FeedbackForm, FeedbackButton };

package/dist/es2019/utils/Truncate.js

@@ -0,0 +1,11 @@
+export default function truncate(text, maxLength) {
+  if (!text || !maxLength) {
+    return text;
+  }
+
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  return text.substring(0, maxLength) + '...';
+}

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/feedback-collector",
-	"version": "9.0.1",
+	"version": "10.0.1",
 	"sideEffects": false
 }

package/dist/esm/components/FeedbackButton.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { FlagGroup } from '@atlaskit/flag';
+import FeedbackIcon from '@atlaskit/icon/glyph/feedback';
+import FeedbackCollector from './FeedbackCollector';
+import FeedbackFlag from './FeedbackFlag';
+import { messages } from './messages';
+
+var FeedbackButton = function FeedbackButton(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      displayFlag = _useState4[0],
+      setDisplayFlag = _useState4[1];
+
+  var _useIntl = useIntl(),
+      formatMessage = _useIntl.formatMessage;
+
+  var embeddableKey = props.embeddableKey,
+      requestTypeId = props.requestTypeId,
+      email = props.email;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setIsOpen(true);
+    },
+    iconBefore: /*#__PURE__*/React.createElement(FeedbackIcon, {
+      label: formatMessage(messages.feedbackIconLabel),
+      size: "small"
+    })
+  }, formatMessage(messages.giveFeedback)), isOpen && /*#__PURE__*/React.createElement(FeedbackCollector, {
+    onClose: function onClose() {
+      return setIsOpen(false);
+    },
+    onSubmit: function onSubmit() {
+      return setDisplayFlag(true);
+    },
+    email: email,
+    requestTypeId: requestTypeId,
+    embeddableKey: embeddableKey
+  }), /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: function onDismissed() {
+      return setDisplayFlag(false);
+    }
+  }, displayFlag && /*#__PURE__*/React.createElement(FeedbackFlag, null)));
+};
+
+export default FeedbackButton;

package/dist/esm/components/FeedbackCollector.js

@@ -18,16 +18,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React, { Component } from 'react';
-import truncate from 'lodash/truncate';
+import truncate from '../utils/Truncate';
 import FeedbackForm from './FeedbackForm';
 var MAX_SUMMARY_LENGTH_CHARS = 100;
 
 var singleLineTruncatedText = function singleLineTruncatedText(text) {
   var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MAX_SUMMARY_LENGTH_CHARS;
   var singleLineText = text.replace(/\n/g, ' ');
-  return truncate(singleLineText, {
-    length: length
-  });
+  return truncate(singleLineText, length);
 };
 
 var FeedbackCollector = /*#__PURE__*/function (_Component) {

package/dist/esm/components/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  giveFeedback: {
+    defaultMessage: 'Give feedback',
+    id: 'proforma-form-builder.give-feedback',
+    description: 'The button that allows users to give feedback'
+  },
+  feedbackIconLabel: {
+    defaultMessage: 'Feedback',
+    id: 'proforma-form-builder.feedback-icon-label',
+    description: 'Accessibility text used for the feedback icon'
+  }
+});

package/dist/esm/index.js

@@ -1,5 +1,6 @@
+import FeedbackButton from './components/FeedbackButton';
 import FeedbackCollector from './components/FeedbackCollector';
 import FeedbackFlag from './components/FeedbackFlag';
 import FeedbackForm from './components/FeedbackForm';
 export default FeedbackCollector;
-export { FeedbackFlag, FeedbackForm };
+export { FeedbackFlag, FeedbackForm, FeedbackButton };

package/dist/esm/utils/Truncate.js

@@ -0,0 +1,11 @@
+export default function truncate(text, maxLength) {
+  if (!text || !maxLength) {
+    return text;
+  }
+
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  return text.substring(0, maxLength) + '...';
+}

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/feedback-collector",
-	"version": "9.0.1",
+	"version": "10.0.1",
 	"sideEffects": false
 }

package/dist/types/components/FeedbackButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    embeddableKey: string;
+    requestTypeId: string;
+    email?: string;
+}
+declare const FeedbackButton: (props: Props) => JSX.Element;
+export default FeedbackButton;

package/dist/types/components/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    giveFeedback: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    feedbackIconLabel: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+};

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
+import FeedbackButton from './components/FeedbackButton';
 import FeedbackCollector from './components/FeedbackCollector';
 import FeedbackFlag from './components/FeedbackFlag';
 import FeedbackForm from './components/FeedbackForm';
 export type { FormFields } from './types';
 export default FeedbackCollector;
-export { FeedbackFlag, FeedbackForm };
+export { FeedbackFlag, FeedbackForm, FeedbackButton };

package/dist/types/utils/Truncate.d.ts

@@ -0,0 +1 @@
+export default function truncate(text: string, maxLength: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/feedback-collector",
-  "version": "9.0.1",
+  "version": "10.0.1",
   "description": "A component that collects feedback across Atlassian products.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,7 +26,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/button": "^16.1.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/flag": "^14.5.0",
     "@atlaskit/form": "^8.5.0",
@@ -35,9 +35,9 @@
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.8.0",
     "@babel/runtime": "^7.0.0",
-    "lodash": "^4.17.21"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -45,7 +45,6 @@
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/logo": "^13.5.0",
-    "@atlaskit/navigation-next": "^9.0.0",
     "@atlaskit/ssr": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",