@atlaskit/status 0.12.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @atlaskit/status
 
+## 1.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   neutralColor: {
     id: 'fabric.status.color.grey',
     defaultMessage: 'Grey',

package/dist/cjs/components/internal/color.js

@@ -31,7 +31,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -108,7 +108,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           value = _this$props2.value;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (label) {
+      return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
         return /*#__PURE__*/_react.default.createElement(Button, {
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
@@ -116,14 +116,14 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: label,
+          title: labels[0],
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
           }
         }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
           primaryColor: borderColor,
-          label: label
+          label: labels[0]
         }));
       }));
     }

package/dist/cjs/i18n/index.js

@@ -5,34 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "cs", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _cs.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -53,16 +59,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _hu.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "is", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _is.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -89,6 +95,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -107,22 +119,22 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ru", {
+Object.defineProperty(exports, "ro", {
   enumerable: true,
   get: function get() {
-    return _ru.default;
+    return _ro.default;
   }
 });
-Object.defineProperty(exports, "sk", {
+Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
-    return _sk.default;
+    return _ru.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sk", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sk.default;
   }
 });
 Object.defineProperty(exports, "sv", {
@@ -155,28 +167,16 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "en", {
-  enumerable: true,
-  get: function get() {
-    return _en.default;
-  }
-});
-Object.defineProperty(exports, "en_GB", {
-  enumerable: true,
-  get: function get() {
-    return _en_GB.default;
-  }
-});
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "ro", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _ro.default;
+    return _zh_TW.default;
   }
 });
 

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.12.0"
+	"version": "1.0.0"
 }

package/dist/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   neutralColor: {
     id: 'fabric.status.color.grey',

package/dist/es2019/components/internal/color.js

@@ -3,7 +3,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
 import React from 'react';
 import { PureComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
@@ -77,21 +77,21 @@ export default class Color extends PureComponent {
       value
     } = this.props;
     const borderStyle = `1px solid ${borderColor}`;
-    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], label => /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Button, {
       onClick: this.onClick,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       onMouseDown: this.onMouseDown,
       tabIndex: tabIndex,
       className: `${isSelected ? 'selected' : ''}`,
-      title: label,
+      title: labels[0],
       style: {
         backgroundColor: backgroundColor || 'transparent',
         border: borderStyle
       }
     }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
       primaryColor: borderColor,
-      label: label
+      label: labels[0]
     }))));
   }
 

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.12.0"
+	"version": "1.0.0"
 }

package/dist/esm/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   neutralColor: {
     id: 'fabric.status.color.grey',

package/dist/esm/components/internal/color.js

@@ -17,7 +17,7 @@ import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
 import React from 'react';
 import { PureComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import styled from 'styled-components';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
@@ -85,7 +85,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           value = _this$props2.value;
       var borderStyle = "1px solid ".concat(borderColor);
-      return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (label) {
+      return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
         return /*#__PURE__*/React.createElement(Button, {
           onClick: _this2.onClick,
           onMouseEnter: _this2.onMouseEnter,
@@ -93,14 +93,14 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: label,
+          title: labels[0],
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
           }
         }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
           primaryColor: borderColor,
-          label: label
+          label: labels[0]
         }));
       }));
     }

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "0.12.0"
+	"version": "1.0.0"
 }

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

@@ -1,2 +1,32 @@
-import { Messages } from 'react-intl';
-export declare const messages: Messages;
+export declare const messages: {
+    neutralColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    purpleColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    blueColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    redColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    yellowColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    greenColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/components/internal/color-palette.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Color as ColorType } from '../Status';
 interface ColorPaletteProps {
     selectedColor?: ColorType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "0.12.0",
+  "version": "1.0.0",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,18 +35,17 @@
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-intl": "^2.6.0"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^15.6.0",
+    "@atlaskit/editor-test-helpers": "^16.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "react": "^16.8.0",
-    "react-intl": "^2.6.0",
     "typescript": "3.9.6"
   },
   "keywords": [