@atlaskit/contextual-survey 2.0.11 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/contextual-survey
 
+## 2.1.2
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.0
+
+### Minor Changes
+
+- [`d943a822f6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d943a822f6a) - [ux] Instrumented `@atlaskit/contextual-survey` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
 ## 2.0.11
 
 ### Patch Changes

package/dist/cjs/components/ContextualSurvey.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.AUTO_DISAPPEAR_DURATION = exports.DismissTrigger = void 0;
+exports.default = exports.DismissTrigger = exports.AUTO_DISAPPEAR_DURATION = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 

package/dist/cjs/components/FeedbackScoreButtons.js

@@ -17,6 +17,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -48,7 +50,7 @@ var _default = function _default(_ref) {
       shouldFitContainer: true
     }, score));
   })), (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), _colors.N200, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 10),
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), (0, _tokens.token)('color.text.subtlest', _colors.N200), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 10),
     "aria-hidden": true
   }, (0, _core.jsx)("span", null, "Strongly disagree"), (0, _core.jsx)("span", {
     css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "])), (0, _constants.gridSize)() * 6)

package/dist/cjs/components/SuccessContainer.js

@@ -17,6 +17,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 var _default = function _default(_ref) {
@@ -28,7 +30,7 @@ var _default = function _default(_ref) {
   }, (0, _core.jsx)(_checkCircle.default, {
     label: "",
     "aria-hidden": true,
-    primaryColor: _colors.G300
+    primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300)
   })), children);
 };
 

package/dist/cjs/components/SurveyContainer.js

@@ -19,7 +19,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
+var _tokens = require("@atlaskit/tokens");
 
 var _constants2 = require("../constants");
 
@@ -31,13 +31,13 @@ var _default = function _default(_ref) {
   var children = _ref.children,
       onDismiss = _ref.onDismiss;
   return (0, _core.jsx)("div", {
-    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        ", "\n        width: ", "px;\n      "])), _colors.N0, (0, _constants.borderRadius)(), padding, (0, _elevation.e500)(), _constants2.surveyInnerWidth)
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        box-shadow: ", ";\n        width: ", "px;\n      "])), (0, _tokens.token)('elevation.surface.overlay', _colors.N0), (0, _constants.borderRadius)(), padding, (0, _tokens.token)('elevation.shadow.overlay', "0 20px 32px -8px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)), _constants2.surveyInnerWidth)
   }, (0, _core.jsx)("div", {
     css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "])), padding - (0, _constants.gridSize)(), padding - (0, _constants.gridSize)())
   }, (0, _core.jsx)(_customThemeButton.default, {
     iconBefore: (0, _core.jsx)(_cross.default, {
       label: "",
-      primaryColor: _colors.N50
+      primaryColor: (0, _tokens.token)('color.icon.subtle', _colors.N50)
     }),
     "aria-label": "Dismiss",
     appearance: "subtle",

package/dist/cjs/version.json

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

package/dist/es2019/components/FeedbackScoreButtons.js

@@ -3,6 +3,7 @@ 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 { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 const tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 export default (({
@@ -46,7 +47,7 @@ export default (({
   css: css`
         font-size: 12px;
         font-weight: 600;
-        color: ${N200};
+        color: ${token('color.text.subtlest', N200)};
         display: flex;
         margin-top: ${gridSize()}px;
         margin-bottom: ${gridSize() * 3}px;

package/dist/es2019/components/SuccessContainer.js

@@ -3,6 +3,7 @@ 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';
+import { token } from '@atlaskit/tokens';
 export default (({
   children
 }) => jsx("section", {
@@ -18,5 +19,5 @@ export default (({
 }, jsx(CheckCircleIcon, {
   label: "",
   "aria-hidden": true,
-  primaryColor: G300
+  primaryColor: token('color.icon.success', G300)
 })), children));

package/dist/es2019/components/SurveyContainer.js

@@ -2,9 +2,9 @@
 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 { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { e500 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 import { surveyInnerWidth } from '../constants';
 const padding = gridSize() * 3;
 export default (({
@@ -13,10 +13,10 @@ export default (({
 }) => {
   return jsx("div", {
     css: css`
-        background-color: ${N0};
+        background-color: ${token('elevation.surface.overlay', N0)};
         border-radius: ${borderRadius()}px;
         padding: ${padding}px;
-        ${e500()}
+        box-shadow: ${token('elevation.shadow.overlay', `0 20px 32px -8px ${N50A}, 0 0 1px ${N60A}`)};
         width: ${surveyInnerWidth}px;
       `
   }, jsx("div", {
@@ -28,7 +28,7 @@ export default (({
   }, jsx(Button, {
     iconBefore: jsx(CrossIcon, {
       label: "",
-      primaryColor: N50
+      primaryColor: token('color.icon.subtle', N50)
     }),
     "aria-label": "Dismiss",
     appearance: "subtle",

package/dist/es2019/version.json

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

package/dist/esm/components/FeedbackScoreButtons.js

@@ -7,6 +7,7 @@ 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 { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 var tooltipMessage = ['Strongly disagree', 'Disagree', 'Slightly disagree', 'Neutral', 'Slightly agree', 'Agree', 'Strongly agree'];
 export default (function (_ref) {
@@ -34,7 +35,7 @@ export default (function (_ref) {
       shouldFitContainer: true
     }, score));
   })), jsx("div", {
-    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), N200, gridSize(), gridSize() * 3, gridSize() * 10),
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 12px;\n        font-weight: 600;\n        color: ", ";\n        display: flex;\n        margin-top: ", "px;\n        margin-bottom: ", "px;\n\n        & > span {\n          width: ", "px;\n        }\n      "])), token('color.text.subtlest', N200), gridSize(), gridSize() * 3, gridSize() * 10),
     "aria-hidden": true
   }, jsx("span", null, "Strongly disagree"), jsx("span", {
     css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          text-align: center;\n          margin: 0 auto;\n          padding: 0 ", "px;\n        "])), gridSize() * 6)

package/dist/esm/components/SuccessContainer.js

@@ -7,6 +7,7 @@ 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';
+import { token } from '@atlaskit/tokens';
 export default (function (_ref) {
   var children = _ref.children;
   return jsx("section", {
@@ -16,6 +17,6 @@ export default (function (_ref) {
   }, jsx(CheckCircleIcon, {
     label: "",
     "aria-hidden": true,
-    primaryColor: G300
+    primaryColor: token('color.icon.success', G300)
   })), children);
 });

package/dist/esm/components/SurveyContainer.js

@@ -6,22 +6,22 @@ var _templateObject, _templateObject2;
 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 { N0, N50, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { e500 } from '@atlaskit/theme/elevation';
+import { token } from '@atlaskit/tokens';
 import { surveyInnerWidth } from '../constants';
 var padding = gridSize() * 3;
 export default (function (_ref) {
   var children = _ref.children,
       onDismiss = _ref.onDismiss;
   return jsx("div", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        ", "\n        width: ", "px;\n      "])), N0, borderRadius(), padding, e500(), surveyInnerWidth)
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        background-color: ", ";\n        border-radius: ", "px;\n        padding: ", "px;\n        box-shadow: ", ";\n        width: ", "px;\n      "])), token('elevation.surface.overlay', N0), borderRadius(), padding, token('elevation.shadow.overlay', "0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A)), surveyInnerWidth)
   }, jsx("div", {
     css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          top: ", "px;\n          right: ", "px;\n        "])), padding - gridSize(), padding - gridSize())
   }, jsx(Button, {
     iconBefore: jsx(CrossIcon, {
       label: "",
-      primaryColor: N50
+      primaryColor: token('color.icon.subtle', N50)
     }),
     "aria-label": "Dismiss",
     appearance: "subtle",

package/dist/esm/version.json

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormValues } from '../types';
 export declare enum DismissTrigger {
     AutoDismiss = "AUTO_DISMISS",

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     onChange: (value: number) => void;
     value: number | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Props {
 }
 declare const _default: ({}: Props) => JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { OnSubmitHandler } from '@atlaskit/form';
 import { FormValues } from '../types';
 interface Props {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/contextual-survey",
-  "version": "2.0.11",
+  "version": "2.1.2",
   "description": "A React component used to ask the user for feedback",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,12 +23,13 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/checkbox": "^12.1.0",
-    "@atlaskit/form": "^8.4.0",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/textarea": "^4.0.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/form": "^8.5.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/textarea": "^4.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -42,7 +43,7 @@
     "@atlaskit/docs": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^8.0.1",
-    "typescript": "3.9.6"
+    "typescript": "4.2.4"
   },
   "keywords": [
     "atlaskit",
@@ -52,6 +53,9 @@
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
+    },
+    "@repo/internal": {
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"