@atlaskit/status 0.12.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @atlaskit/status
 
+## 1.0.2
+
+### Patch Changes
+
+- [`56cf7af34be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56cf7af34be) - AK-832 implementation navigation arrows for status color palette
+
+## 1.0.1
+
+### Patch Changes
+
+- [`b5375cd4f66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5375cd4f66) - AK-316: add aria-label for the status picker input field
+- [`85c4e5a71ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85c4e5a71ee) - [AK-837] added role prop for Status component
+
+## 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/Status.js

@@ -97,7 +97,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
           text = _this$props.text,
           color = _this$props.color,
           style = _this$props.style,
-          localId = _this$props.localId,
+          role = _this$props.role,
           onClick = _this$props.onClick;
 
       if (text.trim().length === 0) {
@@ -114,7 +114,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-node-type": "status",
         "data-color": color,
         "data-style": style,
-        id: localId
+        role: role
       }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/cjs/components/StatusPicker.js

@@ -31,10 +31,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
 
+var _i18n = require("./i18n");
+
 var _templateObject;
 
 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); }
@@ -47,15 +51,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var FieldTextWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", "px;\n"])), (0, _constants.gridSize)());
 
-var StatusPicker = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(StatusPicker, _PureComponent);
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(Picker, _PureComponent);
 
-  var _super = _createSuper(StatusPicker);
+  var _super = _createSuper(Picker);
 
-  function StatusPicker() {
+  function Picker() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, StatusPicker);
+    (0, _classCallCheck2.default)(this, Picker);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -84,15 +88,15 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  (0, _createClass2.default)(StatusPicker, [{
+  (0, _createClass2.default)(Picker, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
           text = _this$props.text,
           selectedColor = _this$props.selectedColor,
-          localId = _this$props.localId,
           onColorClick = _this$props.onColorClick,
-          onColorHover = _this$props.onColorHover; // Using <React.Fragment> instead of [] to workaround Enzyme
+          onColorHover = _this$props.onColorHover,
+          intl = _this$props.intl; // Using <React.Fragment> instead of [] to workaround Enzyme
       // (https://github.com/airbnb/enzyme/issues/1149)
 
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldTextWrapper, {
@@ -105,7 +109,7 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
         onKeyPress: this.onKeyPress,
         spellCheck: false,
         autoComplete: "off",
-        "aria-labelledby": localId
+        "aria-label": intl.formatMessage(_i18n.messages.statusInputLabel)
       })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
@@ -114,10 +118,11 @@ var StatusPicker = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-  return StatusPicker;
+  return Picker;
 }(_react.PureComponent);
 
-exports.StatusPicker = StatusPicker;
-(0, _defineProperty2.default)(StatusPicker, "defaultProps", {
+(0, _defineProperty2.default)(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+var StatusPicker = (0, _reactIntlNext.injectIntl)(Picker);
+exports.StatusPicker = StatusPicker;

package/dist/cjs/components/analytics.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _version = require("../version.json");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;

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',
@@ -37,6 +37,11 @@ var messages = (0, _reactIntl.defineMessages)({
     id: 'fabric.status.color.green',
     defaultMessage: 'Green',
     description: 'Tooltip for the green color in color palette'
+  },
+  statusInputLabel: {
+    id: 'fabric.status.input.label',
+    defaultMessage: 'Set a status',
+    description: 'Aria label text for the status input field'
   }
 });
 exports.messages = messages;

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

@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -34,6 +34,14 @@ var palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colo
 
 var ColorPaletteWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)());
 
+var VK_LEFT = 37; //ArrowLeft
+
+var VK_RIGHT = 39; //ArrowRight
+
+var VK_UP = 38; //ArrowUp
+
+var VK_DOWN = 40; //ArrowDown
+
 var _default = function _default(_ref) {
   var _ref$cols = _ref.cols,
       cols = _ref$cols === void 0 ? 7 : _ref$cols,
@@ -41,16 +49,54 @@ var _default = function _default(_ref) {
       selectedColor = _ref.selectedColor,
       className = _ref.className,
       onHover = _ref.onHover;
+  var colorRefs = (0, _react.useRef)([]);
+  (0, _react.useEffect)(function () {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  var memoizedHandleKeyDown = (0, _react.useCallback)(function (e) {
+    var colorIndex = palette.findIndex(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+          colorValue = _ref3[0];
+
+      return colorValue === selectedColor;
+    });
+    var newColorIndex = null;
+
+    switch (e.keyCode) {
+      case VK_RIGHT:
+      case VK_DOWN:
+        e.preventDefault();
+        newColorIndex = colorIndex + 1 > palette.length - 1 ? 0 : colorIndex + 1;
+        break;
+
+      case VK_LEFT:
+      case VK_UP:
+        e.preventDefault();
+        newColorIndex = colorIndex - 1 < 0 ? palette.length - 1 : colorIndex - 1;
+        break;
+    }
+
+    if (newColorIndex === null) {
+      return;
+    }
+
+    var newColorValue = palette[newColorIndex][0];
+    var newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    onClick(newColorValue);
+  }, [selectedColor, onClick, colorRefs]);
   return /*#__PURE__*/_react.default.createElement(ColorPaletteWrapper, {
     className: className,
+    role: "radiogroup",
     style: {
       maxWidth: cols * 32
-    }
-  }, palette.map(function (_ref2) {
-    var _ref3 = (0, _slicedToArray2.default)(_ref2, 3),
-        colorValue = _ref3[0],
-        backgroundColor = _ref3[1],
-        borderColor = _ref3[2];
+    },
+    onKeyDown: memoizedHandleKeyDown
+  }, palette.map(function (_ref4, i) {
+    var _ref5 = (0, _slicedToArray2.default)(_ref4, 3),
+        colorValue = _ref5[0],
+        backgroundColor = _ref5[1],
+        borderColor = _ref5[2];
 
     return /*#__PURE__*/_react.default.createElement(_color.default, {
       key: colorValue,
@@ -59,7 +105,11 @@ var _default = function _default(_ref) {
       borderColor: borderColor,
       onClick: onClick,
       onHover: onHover,
-      isSelected: colorValue === selectedColor
+      isSelected: colorValue === selectedColor,
+      tabIndex: colorValue === selectedColor ? 0 : -1,
+      setRef: function setRef(el) {
+        return colorRefs.current[i] = el;
+      }
     });
   }));
 };

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"));
 
@@ -106,9 +106,10 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           backgroundColor = _this$props2.backgroundColor,
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
-          value = _this$props2.value;
+          value = _this$props2.value,
+          setRef = _this$props2.setRef;
       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 +117,16 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: label,
+          title: labels[0],
+          "aria-checked": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
             border: borderStyle
-          }
+          },
+          innerRef: setRef
         }, isSelected && /*#__PURE__*/_react.default.createElement(_done.default, {
           primaryColor: borderColor,
-          label: label
+          label: labels[0]
         }));
       }));
     }

package/dist/cjs/i18n/cs.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Czech
+//Czech
 var _default = {
   'fabric.status.color.blue': 'Modrá',
   'fabric.status.color.green': 'Zelená',
   'fabric.status.color.grey': 'Šedá',
   'fabric.status.color.purple': 'Fialová',
   'fabric.status.color.red': 'Červená',
-  'fabric.status.color.yellow': 'Žlutá'
+  'fabric.status.color.yellow': 'Žlutá',
+  'fabric.status.input.label': 'Nastavit stav'
 };
 exports.default = _default;

package/dist/cjs/i18n/da.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Danish
+//Danish (Denmark)
 var _default = {
   'fabric.status.color.blue': 'Blå',
   'fabric.status.color.green': 'Grøn',
   'fabric.status.color.grey': 'Grå',
   'fabric.status.color.purple': 'Lilla',
   'fabric.status.color.red': 'Rød',
-  'fabric.status.color.yellow': 'Gul'
+  'fabric.status.color.yellow': 'Gul',
+  'fabric.status.input.label': 'Angiv en status'
 };
 exports.default = _default;

package/dist/cjs/i18n/de.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// German
+//German (Germany)
 var _default = {
   'fabric.status.color.blue': 'Blau',
   'fabric.status.color.green': 'Grün',
   'fabric.status.color.grey': 'Grau',
   'fabric.status.color.purple': 'Violett',
   'fabric.status.color.red': 'Rot',
-  'fabric.status.color.yellow': 'Gelb'
+  'fabric.status.color.yellow': 'Gelb',
+  'fabric.status.input.label': 'Status festlegen'
 };
 exports.default = _default;

package/dist/cjs/i18n/en_ZZ.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//
+var _default = {
+  'fabric.status.color.blue': '⁣⁢Blue‍⁠‌‌⁠‍⁠؜‍⁠؜؜⁣⁤',
+  'fabric.status.color.green': '⁣⁢Green⁡⁡⁡⁠‌‌⁡‌‌⁣⁤',
+  'fabric.status.color.grey': '⁣⁢Grey⁠‌؜؜⁠‍⁡⁡⁡⁠‌؜⁡⁡⁣⁤',
+  'fabric.status.color.purple': '⁣⁢Purple⁡؜‍⁡⁠؜؜؜⁡⁣⁤',
+  'fabric.status.color.red': '⁣⁢Red⁡‌‌‌‌⁠‍‌؜؜⁡‍⁣⁤',
+  'fabric.status.color.yellow': '⁣⁢Yellow‍⁡‍⁣⁤',
+  'fabric.status.input.label': '⁣⁢Set a status‍‌؜‌⁡‍‍؜‍؜‍⁠⁣⁤'
+};
+exports.default = _default;

package/dist/cjs/i18n/es.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Spanish
+//Spanish (International)
 var _default = {
   'fabric.status.color.blue': 'Azul',
   'fabric.status.color.green': 'Verde',
   'fabric.status.color.grey': 'Gris',
   'fabric.status.color.purple': 'Morado',
   'fabric.status.color.red': 'Rojo',
-  'fabric.status.color.yellow': 'Amarillo'
+  'fabric.status.color.yellow': 'Amarillo',
+  'fabric.status.input.label': 'Establecer un estado'
 };
 exports.default = _default;

package/dist/cjs/i18n/et.js

@@ -8,10 +8,10 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Estonian
+//Estonian
 var _default = {
   'fabric.status.color.blue': 'Sinine',
   'fabric.status.color.green': 'Roheline',

package/dist/cjs/i18n/fi.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Finnish
+//Finnish
 var _default = {
   'fabric.status.color.blue': 'Sininen',
   'fabric.status.color.green': 'Vihreä',
   'fabric.status.color.grey': 'Harmaa',
   'fabric.status.color.purple': 'Violetti',
   'fabric.status.color.red': 'Punainen',
-  'fabric.status.color.yellow': 'Keltainen'
+  'fabric.status.color.yellow': 'Keltainen',
+  'fabric.status.input.label': 'Aseta tila'
 };
 exports.default = _default;

package/dist/cjs/i18n/fr.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// French
+//French (France)
 var _default = {
   'fabric.status.color.blue': 'Bleu',
   'fabric.status.color.green': 'Vert',
   'fabric.status.color.grey': 'Gris',
   'fabric.status.color.purple': 'Violet',
   'fabric.status.color.red': 'Rouge',
-  'fabric.status.color.yellow': 'Jaune'
+  'fabric.status.color.yellow': 'Jaune',
+  'fabric.status.input.label': 'Définir un état'
 };
 exports.default = _default;

package/dist/cjs/i18n/hu.js

@@ -8,16 +8,17 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Hungarian
+//Hungarian
 var _default = {
   'fabric.status.color.blue': 'Kék',
   'fabric.status.color.green': 'Zöld',
   'fabric.status.color.grey': 'Szürke',
   'fabric.status.color.purple': 'Lila',
   'fabric.status.color.red': 'Piros',
-  'fabric.status.color.yellow': 'Sárga'
+  'fabric.status.color.yellow': 'Sárga',
+  'fabric.status.input.label': 'Állapot beállítása'
 };
 exports.default = _default;