@atlaskit/contextual-survey 2.2.14 → 2.2.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/contextual-survey
 
+## 2.2.15
+
+### Patch Changes
+
+- [#84829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84829) [`a6299ec57bc3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6299ec57bc3) - Internal change to replace hardcoded font fallback values with an exported constant. There is no expected visual difference.
+
 ## 2.2.14
 
 ### Patch Changes

package/dist/cjs/components/FeedbackAcknowledgement.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
+var _typography = require("@atlaskit/theme/typography");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 /** @jsx jsx */
 
 var styles = (0, _react.css)({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
   marginTop: 0
 });
 var _default = exports.default = function _default() {

package/dist/cjs/components/SignUpPrompt.js

@@ -11,11 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _typography = require("@atlaskit/theme/typography");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 /** @jsx jsx */
 
 var styles = (0, _react2.css)({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
   margin: 0
 });
 var _default = exports.default = function _default(_ref) {

package/dist/cjs/components/SignUpSuccess.js

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = require("@emotion/react");
+var _typography = require("@atlaskit/theme/typography");
 var _SuccessContainer = _interopRequireDefault(require("./SuccessContainer"));
 /** @jsx jsx */
 
 var styles = (0, _react.css)({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-xsmall, ".concat(_typography.fontFallback.heading.xsmall, ")"),
   margin: 0
 });
 var _default = exports.default = function _default(_ref) {

package/dist/cjs/components/SurveyForm.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -18,10 +17,14 @@ var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
 var _constants = require("@atlaskit/theme/constants");
 var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
-var _templateObject, _templateObject2;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/** @jsx jsx */
+
+var headingStyles = (0, _react2.css)({
+  fontSize: "".concat((0, _constants.fontSize)(), "px"),
+  fontWeight: 600
+});
 var getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
     return '0';
@@ -71,7 +74,7 @@ var _default = exports.default = function _default(_ref) {
     "aria-labelledby": "contextualSurveyQuestion"
   }, (0, _react2.jsx)("h1", {
     id: "contextualSurveyQuestion",
-    css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), (0, _constants.fontSize)())
+    css: headingStyles
   }, question), statement && (0, _react2.jsx)("p", {
     id: "contextualSurveyStatement"
   }, statement), (0, _react2.jsx)(_form.default, {
@@ -97,7 +100,11 @@ var _default = exports.default = function _default(_ref) {
       mountOnEnter: true
     }, function (state) {
       return (0, _react2.jsx)("div", {
-        css: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n                    transition: max-height ", "ms ease-in-out;\n                    overflow: hidden;\n                    max-height: ", ";\n                  "])), transitionDuration, getExpandedHeight(expandedAreaRef, state)),
+        css: (0, _react2.css)({
+          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          overflow: 'hidden',
+          maxHeight: getExpandedHeight(expandedAreaRef, state)
+        }),
         ref: expandedAreaRef
       }, (0, _react2.jsx)(_form.Field, {
         name: "writtenFeedback",

package/dist/cjs/components/SurveyMarshal.js

@@ -1,17 +1,15 @@
 "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 _react = require("@emotion/react");
 var _reactTransitionGroup = require("react-transition-group");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
-var _templateObject;
 /** @jsx jsx */
+
 var animationDuration = 300;
 var offscreen = {
   translateX: "".concat(_constants2.surveyInnerWidth + _constants2.surveyOffset, "px"),
@@ -19,10 +17,6 @@ var offscreen = {
 };
 var getAnimationProps = function getAnimationProps(state) {
   switch (state) {
-    case 'entering':
-      {
-        return offscreen;
-      }
     case 'entered':
       {
         return {
@@ -30,6 +24,8 @@ var getAnimationProps = function getAnimationProps(state) {
           opacity: '1'
         };
       }
+    case 'entering':
+    case 'unmounted':
     case 'exited':
     case 'exiting':
       {
@@ -49,7 +45,16 @@ function SurveyMarshal(props) {
       translateX = _getAnimationProps.translateX,
       opacity = _getAnimationProps.opacity;
     return (0, _react.jsx)("div", {
-      css: (0, _react.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)
+      css: (0, _react.css)({
+        position: 'fixed',
+        right: "".concat(_constants2.surveyOffset, "px"),
+        bottom: "".concat(_constants2.surveyOffset, "px"),
+        zIndex: _constants.layers.flag(),
+        transform: "translateX(".concat(translateX, ")"),
+        opacity: opacity,
+        transition: "all ".concat(animationDuration, "ms ease-in-out"),
+        transitionProperty: 'transform, opacity'
+      })
     }, children());
   });
 }

package/dist/es2019/components/FeedbackAcknowledgement.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
 const styles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
   marginTop: 0
 });
 export default (() => jsx(SuccessContainer, null, jsx("h1", {

package/dist/es2019/components/SignUpPrompt.js

@@ -2,9 +2,10 @@
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
 const styles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
   margin: 0
 });
 export default (({

package/dist/es2019/components/SignUpSuccess.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
 const styles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: `var(--ds-font-heading-xsmall, ${fontFallback.heading.xsmall})`,
   margin: 0
 });
 export default (({}) => jsx(SuccessContainer, null, jsx("h1", {

package/dist/es2019/components/SurveyForm.js

@@ -9,6 +9,10 @@ import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
 import Textarea from '@atlaskit/textarea';
 import { fontSize } from '@atlaskit/theme/constants';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+const headingStyles = css({
+  fontSize: `${fontSize()}px`,
+  fontWeight: 600
+});
 const getExpandedHeight = (ref, state) => {
   if (!ref.current) {
     return '0';
@@ -53,10 +57,7 @@ export default (({
     "aria-labelledby": "contextualSurveyQuestion"
   }, jsx("h1", {
     id: "contextualSurveyQuestion",
-    css: css`
-          font-size: ${fontSize()}px;
-          font-weight: 600;
-        `
+    css: headingStyles
   }, question), statement && jsx("p", {
     id: "contextualSurveyStatement"
   }, statement), jsx(Form, {
@@ -80,11 +81,11 @@ export default (({
     timeout: transitionDuration,
     mountOnEnter: true
   }, state => jsx("div", {
-    css: css`
-                    transition: max-height ${transitionDuration}ms ease-in-out;
-                    overflow: hidden;
-                    max-height: ${getExpandedHeight(expandedAreaRef, state)};
-                  `,
+    css: css({
+      transition: `max-height ${transitionDuration}ms ease-in-out`,
+      overflow: 'hidden',
+      maxHeight: getExpandedHeight(expandedAreaRef, state)
+    }),
     ref: expandedAreaRef
   }, jsx(Field, {
     name: "writtenFeedback",

package/dist/es2019/components/SurveyMarshal.js

@@ -11,10 +11,6 @@ const offscreen = {
 };
 const getAnimationProps = state => {
   switch (state) {
-    case 'entering':
-      {
-        return offscreen;
-      }
     case 'entered':
       {
         return {
@@ -22,6 +18,8 @@ const getAnimationProps = state => {
           opacity: '1'
         };
       }
+    case 'entering':
+    case 'unmounted':
     case 'exited':
     case 'exiting':
       {
@@ -44,16 +42,16 @@ export default function SurveyMarshal(props) {
       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;
-            `
+      css: css({
+        position: 'fixed',
+        right: `${surveyOffset}px`,
+        bottom: `${surveyOffset}px`,
+        zIndex: layers.flag(),
+        transform: `translateX(${translateX})`,
+        opacity: opacity,
+        transition: `all ${animationDuration}ms ease-in-out`,
+        transitionProperty: 'transform, opacity'
+      })
     }, children());
   });
 }

package/dist/esm/components/FeedbackAcknowledgement.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
 var styles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
   marginTop: 0
 });
 export default (function () {

package/dist/esm/components/SignUpPrompt.js

@@ -5,9 +5,10 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
 var styles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
   margin: 0
 });
 export default (function (_ref) {

package/dist/esm/components/SignUpSuccess.js

@@ -1,9 +1,10 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { fontFallback } from '@atlaskit/theme/typography';
 import SuccessContainer from './SuccessContainer';
 var styles = css({
-  font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-xsmall, ".concat(fontFallback.heading.xsmall, ")"),
   margin: 0
 });
 export default (function (_ref) {

package/dist/esm/components/SurveyForm.js

@@ -1,7 +1,5 @@
 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/react';
@@ -12,6 +10,10 @@ import Form, { CheckboxField, Field, FormFooter } from '@atlaskit/form';
 import Textarea from '@atlaskit/textarea';
 import { fontSize } from '@atlaskit/theme/constants';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+var headingStyles = css({
+  fontSize: "".concat(fontSize(), "px"),
+  fontWeight: 600
+});
 var getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
     return '0';
@@ -61,7 +63,7 @@ export default (function (_ref) {
     "aria-labelledby": "contextualSurveyQuestion"
   }, jsx("h1", {
     id: "contextualSurveyQuestion",
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          font-weight: 600;\n        "])), fontSize())
+    css: headingStyles
   }, question), statement && jsx("p", {
     id: "contextualSurveyStatement"
   }, statement), jsx(Form, {
@@ -87,7 +89,11 @@ export default (function (_ref) {
       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)),
+        css: css({
+          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          overflow: 'hidden',
+          maxHeight: getExpandedHeight(expandedAreaRef, state)
+        }),
         ref: expandedAreaRef
       }, jsx(Field, {
         name: "writtenFeedback",

package/dist/esm/components/SurveyMarshal.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
@@ -13,10 +11,6 @@ var offscreen = {
 };
 var getAnimationProps = function getAnimationProps(state) {
   switch (state) {
-    case 'entering':
-      {
-        return offscreen;
-      }
     case 'entered':
       {
         return {
@@ -24,6 +18,8 @@ var getAnimationProps = function getAnimationProps(state) {
           opacity: '1'
         };
       }
+    case 'entering':
+    case 'unmounted':
     case 'exited':
     case 'exiting':
       {
@@ -43,7 +39,16 @@ export default function SurveyMarshal(props) {
       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)
+      css: css({
+        position: 'fixed',
+        right: "".concat(surveyOffset, "px"),
+        bottom: "".concat(surveyOffset, "px"),
+        zIndex: layers.flag(),
+        transform: "translateX(".concat(translateX, ")"),
+        opacity: opacity,
+        transition: "all ".concat(animationDuration, "ms ease-in-out"),
+        transitionProperty: 'transform, opacity'
+      })
     }, children());
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/contextual-survey",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "description": "A React component used to ask the user for feedback",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,12 +35,12 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.8.0",
     "@atlaskit/checkbox": "^13.1.0",
     "@atlaskit/form": "^9.1.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/textarea": "^5.2.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.42.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",