@atlaskit/status 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/status
 
+## 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

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

@@ -37,6 +37,11 @@ var messages = (0, _reactIntlNext.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/version.json

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

package/dist/es2019/components/Status.js

@@ -49,7 +49,7 @@ class StatusInternal extends PureComponent {
       text,
       color,
       style,
-      localId,
+      role,
       onClick
     } = this.props;
 
@@ -67,7 +67,7 @@ class StatusInternal extends PureComponent {
       "data-node-type": "status",
       "data-color": color,
       "data-style": style,
-      id: localId
+      role: role
     }, /*#__PURE__*/React.createElement(Lozenge, {
       appearance: appearance,
       maxWidth: MAX_WIDTH

package/dist/es2019/components/StatusPicker.js

@@ -2,13 +2,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorPalette from './internal/color-palette';
+import { messages } from './i18n';
 const FieldTextWrapper = styled.div`
   margin: 0 ${gridSize()}px;
 `;
-export class StatusPicker extends PureComponent {
+
+class Picker extends PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -41,9 +44,9 @@ export class StatusPicker extends PureComponent {
     const {
       text,
       selectedColor,
-      localId,
       onColorClick,
-      onColorHover
+      onColorHover,
+      intl
     } = this.props; // Using <React.Fragment> instead of [] to workaround Enzyme
     // (https://github.com/airbnb/enzyme/issues/1149)
 
@@ -57,7 +60,7 @@ export class StatusPicker extends PureComponent {
       onKeyPress: this.onKeyPress,
       spellCheck: false,
       autoComplete: "off",
-      "aria-labelledby": localId
+      "aria-label": intl.formatMessage(messages.statusInputLabel)
     })), /*#__PURE__*/React.createElement(ColorPalette, {
       key: this.colorPaletteKey,
       onClick: onColorClick,
@@ -68,6 +71,8 @@ export class StatusPicker extends PureComponent {
 
 }
 
-_defineProperty(StatusPicker, "defaultProps", {
+_defineProperty(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+
+export const StatusPicker = injectIntl(Picker);

package/dist/es2019/components/i18n.js

@@ -29,5 +29,10 @@ export const messages = 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'
   }
 });

package/dist/es2019/version.json

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

package/dist/esm/components/Status.js

@@ -76,7 +76,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) {
@@ -93,7 +93,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-node-type": "status",
         "data-color": color,
         "data-style": style,
-        id: localId
+        role: role
       }, /*#__PURE__*/React.createElement(Lozenge, {
         appearance: appearance,
         maxWidth: MAX_WIDTH

package/dist/esm/components/StatusPicker.js

@@ -16,19 +16,22 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorPalette from './internal/color-palette';
+import { messages } from './i18n';
 var FieldTextWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
-export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
-  _inherits(StatusPicker, _PureComponent);
 
-  var _super = _createSuper(StatusPicker);
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Picker, _PureComponent);
 
-  function StatusPicker() {
+  var _super = _createSuper(Picker);
+
+  function Picker() {
     var _this;
 
-    _classCallCheck(this, StatusPicker);
+    _classCallCheck(this, Picker);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -63,15 +66,15 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     return _this;
   }
 
-  _createClass(StatusPicker, [{
+  _createClass(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
@@ -84,7 +87,7 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
         onKeyPress: this.onKeyPress,
         spellCheck: false,
         autoComplete: "off",
-        "aria-labelledby": localId
+        "aria-label": intl.formatMessage(messages.statusInputLabel)
       })), /*#__PURE__*/React.createElement(ColorPalette, {
         key: this.colorPaletteKey,
         onClick: onColorClick,
@@ -94,9 +97,11 @@ export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
 
-  return StatusPicker;
+  return Picker;
 }(PureComponent);
 
-_defineProperty(StatusPicker, "defaultProps", {
+_defineProperty(Picker, "defaultProps", {
   autoFocus: true
-});
+});
+
+export var StatusPicker = injectIntl(Picker);

package/dist/esm/components/analytics.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-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) { _defineProperty(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) { _defineProperty(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; }
 
 import { name as packageName, version as packageVersion } from '../version.json';
 export var ELEMENTS_CHANNEL = 'fabric-elements';

package/dist/esm/components/i18n.js

@@ -29,5 +29,10 @@ export var messages = 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'
   }
 });

package/dist/esm/version.json

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

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

@@ -9,6 +9,7 @@ export interface OwnProps {
     localId?: string;
     onClick?: (event: React.SyntheticEvent<any>) => void;
     onHover?: () => void;
+    role?: string;
 }
 export declare type Props = OwnProps & WithAnalyticsEventsProps;
-export declare const Status: React.ForwardRefExoticComponent<Pick<Props, "text" | "color" | "style" | "localId" | "onClick" | "onHover"> & React.RefAttributes<any>>;
+export declare const Status: React.ForwardRefExoticComponent<Pick<Props, "text" | "color" | "style" | "localId" | "onClick" | "onHover" | "role"> & React.RefAttributes<any>>;

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

@@ -1,4 +1,5 @@
-import { PureComponent } from 'react';
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
 import { Color } from './Status';
 export declare type ColorType = Color;
 export interface Props {
@@ -9,16 +10,7 @@ export interface Props {
     onColorHover?: (value: ColorType) => void;
     onTextChanged: (value: string) => void;
     autoFocus?: boolean;
-    localId?: string;
-}
-export declare class StatusPicker extends PureComponent<Props, any> {
-    private fieldTextWrapperKey;
-    private colorPaletteKey;
-    static defaultProps: {
-        autoFocus: boolean;
-    };
-    render(): JSX.Element;
-    private onChange;
-    private onKeyPress;
-    private handleInputRef;
 }
+export declare const StatusPicker: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

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

@@ -29,4 +29,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    statusInputLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.9.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
     "@babel/runtime": "^7.0.0",
     "styled-components": "^3.2.6"
   },
@@ -39,13 +39,14 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^16.0.0",
+    "@atlaskit/editor-test-helpers": "^16.1.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-next": "npm:react-intl@^5.18.1",
     "typescript": "3.9.6"
   },
   "keywords": [