@atlaskit/status 1.0.0 → 1.1.0

package/dist/cjs/i18n/nb.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.
  */
-// Norwegian Bokmål
+//Norwegian (Bokmål)
 var _default = {
   'fabric.status.color.blue': 'Blå',
   'fabric.status.color.green': 'Grønn',
   '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': 'Angi en status'
 };
 exports.default = _default;

package/dist/cjs/i18n/nl.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.
  */
-// Dutch
+//Dutch (Netherlands)
 var _default = {
   'fabric.status.color.blue': 'Blauw',
   'fabric.status.color.green': 'Groen',
   'fabric.status.color.grey': 'Grijs',
   'fabric.status.color.purple': 'Paars',
   'fabric.status.color.red': 'Rood',
-  'fabric.status.color.yellow': 'Geel'
+  'fabric.status.color.yellow': 'Geel',
+  'fabric.status.input.label': 'Status instellen'
 };
 exports.default = _default;

package/dist/cjs/i18n/pl.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.
  */
-// Polish
+//Polish (Poland)
 var _default = {
   'fabric.status.color.blue': 'Niebieski',
   'fabric.status.color.green': 'Zielony',
   'fabric.status.color.grey': 'Szary',
   'fabric.status.color.purple': 'Fioletowy',
   'fabric.status.color.red': 'Czerwony',
-  'fabric.status.color.yellow': 'Żółty'
+  'fabric.status.color.yellow': 'Żółty',
+  'fabric.status.input.label': 'Ustaw status'
 };
 exports.default = _default;

package/dist/cjs/i18n/pt_BR.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.
  */
-// Portuguese (Brazil)
+//Portuguese (Brazil)
 var _default = {
   'fabric.status.color.blue': 'Azul',
   'fabric.status.color.green': 'Verde',
   'fabric.status.color.grey': 'Cinza',
   'fabric.status.color.purple': 'Roxo',
   'fabric.status.color.red': 'Vermelho',
-  'fabric.status.color.yellow': 'Amarelo'
+  'fabric.status.color.yellow': 'Amarelo',
+  'fabric.status.input.label': 'Definir status'
 };
 exports.default = _default;

package/dist/cjs/i18n/pt_PT.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.
  */
-// Portuguese (Portugal)
+//Portuguese (Portugal)
 var _default = {
   'fabric.status.color.blue': 'Azul',
   'fabric.status.color.green': 'Verde',

package/dist/cjs/i18n/ru.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.
  */
-// Russian
+//Russian
 var _default = {
   'fabric.status.color.blue': 'Синий',
   'fabric.status.color.green': 'Зеленый',
   'fabric.status.color.grey': 'Серый',
   'fabric.status.color.purple': 'Фиолетовый',
   'fabric.status.color.red': 'Красный',
-  'fabric.status.color.yellow': 'Желтый'
+  'fabric.status.color.yellow': 'Желтый',
+  'fabric.status.input.label': 'Задать статус'
 };
 exports.default = _default;

package/dist/cjs/i18n/sk.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.
  */
-// Slovak
+//Slovak
 var _default = {
   'fabric.status.color.blue': 'Modrá',
   'fabric.status.color.green': 'Zelená',

package/dist/cjs/i18n/sv.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.
  */
-// Swedish
+//Swedish
 var _default = {
   'fabric.status.color.blue': 'Blå',
   'fabric.status.color.green': 'Grön',
   'fabric.status.color.grey': 'Grå',
   'fabric.status.color.purple': 'Lila',
   'fabric.status.color.red': 'Röd',
-  'fabric.status.color.yellow': 'Gul'
+  'fabric.status.color.yellow': 'Gul',
+  'fabric.status.input.label': 'Ange status'
 };
 exports.default = _default;

package/dist/cjs/i18n/th.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.
  */
-// Thai
+//Thai (Thailand)
 var _default = {
   'fabric.status.color.blue': 'น้ำเงิน',
   'fabric.status.color.green': 'เขียว',
   'fabric.status.color.grey': 'เทา',
   'fabric.status.color.purple': 'ม่วง',
   'fabric.status.color.red': 'แดง',
-  'fabric.status.color.yellow': 'เหลือง'
+  'fabric.status.color.yellow': 'เหลือง',
+  'fabric.status.input.label': 'ตั้งค่าสถานะ'
 };
 exports.default = _default;

package/dist/cjs/i18n/tr.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.
  */
-// Turkish
+//Turkish (Turkey)
 var _default = {
   'fabric.status.color.blue': 'Mavi',
   'fabric.status.color.green': 'Yeşil',
   'fabric.status.color.grey': 'Gri',
   'fabric.status.color.purple': 'Mor',
   'fabric.status.color.red': 'Kırmızı',
-  'fabric.status.color.yellow': 'Sarı'
+  'fabric.status.color.yellow': 'Sarı',
+  'fabric.status.input.label': 'Durum ayarlayın'
 };
 exports.default = _default;

package/dist/cjs/i18n/uk.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.
  */
-// Ukrainian
+//Ukrainian (Ukraine)
 var _default = {
   'fabric.status.color.blue': 'Синій',
   'fabric.status.color.green': 'Зелений',
   'fabric.status.color.grey': 'Сірий',
   'fabric.status.color.purple': 'Фіолетовий',
   'fabric.status.color.red': 'Червоний',
-  'fabric.status.color.yellow': 'Жовтий'
+  'fabric.status.color.yellow': 'Жовтий',
+  'fabric.status.input.label': 'Додати статус'
 };
 exports.default = _default;

package/dist/cjs/i18n/vi.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.
  */
-// Vietnamese
+//Vietnamese (Vietnam)
 var _default = {
   'fabric.status.color.blue': 'Xanh lam',
   'fabric.status.color.green': 'Xanh lục',
   'fabric.status.color.grey': 'Xám',
   'fabric.status.color.purple': 'Tím',
   'fabric.status.color.red': 'Đỏ',
-  'fabric.status.color.yellow': 'Vàng'
+  'fabric.status.color.yellow': 'Vàng',
+  'fabric.status.input.label': 'Đặt trạng thái'
 };
 exports.default = _default;

package/dist/cjs/i18n/zh.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.
  */
-// Chinese
+//Chinese (Simplified)
 var _default = {
   'fabric.status.color.blue': '蓝色',
   'fabric.status.color.green': '绿色',
   'fabric.status.color.grey': '灰色',
   'fabric.status.color.purple': '紫色',
   'fabric.status.color.red': '红色',
-  'fabric.status.color.yellow': '黄色'
+  'fabric.status.color.yellow': '黄色',
+  'fabric.status.input.label': '设置状态'
 };
 exports.default = _default;

package/dist/cjs/i18n/zh_TW.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.
  */
-// undefined
+//Chinese (Traditional)
 var _default = {
   'fabric.status.color.blue': '藍色',
   'fabric.status.color.green': '綠色',
   'fabric.status.color.grey': '灰色',
   'fabric.status.color.purple': '紫色',
   'fabric.status.color.red': '紅色',
-  'fabric.status.color.yellow': '黃色'
+  'fabric.status.color.yellow': '黃色',
+  'fabric.status.input.label': '設定狀態'
 };
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/components/Status.js

@@ -5,6 +5,8 @@ import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
 import { ANALYTICS_HOVER_DELAY } from './constants';
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 const colorToLozengeAppearanceMap = {
   neutral: 'default',
   purple: 'new',
@@ -13,6 +15,8 @@ const colorToLozengeAppearanceMap = {
   yellow: 'moved',
   green: 'success'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 const DEFAULT_APPEARANCE = 'default';
 const MAX_WIDTH = 200;
 
@@ -49,7 +53,7 @@ class StatusInternal extends PureComponent {
       text,
       color,
       style,
-      localId,
+      role,
       onClick
     } = this.props;
 
@@ -67,7 +71,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

@@ -1,14 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
-import React from 'react';
-import { PureComponent } from 'react';
-import styled from 'styled-components';
+import React, { PureComponent } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
-const FieldTextWrapper = styled.div`
+import { messages } from './i18n';
+const fieldTextWrapperStyles = css`
   margin: 0 ${gridSize()}px;
 `;
-export class StatusPicker extends PureComponent {
+
+class Picker extends PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -41,15 +45,16 @@ 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)
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
+    return jsx(React.Fragment, null, jsx("div", {
+      css: fieldTextWrapperStyles,
       key: this.fieldTextWrapperKey
-    }, /*#__PURE__*/React.createElement(TextField, {
+    }, jsx(TextField, {
       value: text,
       isCompact: true,
       ref: this.handleInputRef,
@@ -57,8 +62,8 @@ export class StatusPicker extends PureComponent {
       onKeyPress: this.onKeyPress,
       spellCheck: false,
       autoComplete: "off",
-      "aria-labelledby": localId
-    })), /*#__PURE__*/React.createElement(ColorPalette, {
+      "aria-label": intl.formatMessage(messages.statusInputLabel)
+    })), jsx(ColorPalette, {
       key: this.colorPaletteKey,
       onClick: onColorClick,
       onHover: onColorHover,
@@ -68,6 +73,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/components/internal/color-palette.js

@@ -1,33 +1,92 @@
+/** @jsx jsx */
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import React from 'react';
-import styled from 'styled-components';
+import { token } from '@atlaskit/tokens';
+import React, { useEffect, useRef, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import Color from './color'; // color value, label, background, borderColor
 
-const palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
-const ColorPaletteWrapper = styled.div`
+const palette = [['neutral', token('color.background.neutral', colors.N40), token('color.text', colors.N400)], ['purple', token('color.background.discovery', colors.P50), token('color.text.discovery', colors.P400)], ['blue', token('color.background.information', colors.B50), token('color.text.information', colors.B400)], ['red', token('color.background.danger', colors.R50), token('color.text.danger', colors.R400)], ['yellow', token('color.background.warning', colors.Y75), token('color.text.warning', colors.Y400)], ['green', token('color.background.success', colors.G50), token('color.text.success', colors.G400)]];
+const colorPaletteWrapperStyles = css`
   margin: ${gridSize()}px ${gridSize()}px 0 ${gridSize()}px;
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
   display: flex;
   flex-wrap: wrap;
 `;
+const VK_LEFT = 37; //ArrowLeft
+
+const VK_RIGHT = 39; //ArrowRight
+
+const VK_UP = 38; //ArrowUp
+
+const VK_DOWN = 40; //ArrowDown
+
 export default (({
   cols = 7,
   onClick,
   selectedColor,
   className,
   onHover
-}) => /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
-  className: className,
-  style: {
-    maxWidth: cols * 32
-  }
-}, palette.map(([colorValue, backgroundColor, borderColor]) => /*#__PURE__*/React.createElement(Color, {
-  key: colorValue,
-  value: colorValue,
-  backgroundColor: backgroundColor,
-  borderColor: borderColor,
-  onClick: onClick,
-  onHover: onHover,
-  isSelected: colorValue === selectedColor
-}))));
+}) => {
+  const colorRefs = useRef([]);
+  useEffect(() => {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  const memoizedHandleKeyDown = useCallback(e => {
+    const colorIndex = palette.findIndex(([colorValue]) => colorValue === selectedColor);
+    let 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;
+    }
+
+    const newColorValue = palette[newColorIndex][0];
+    const newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+    onClick(newColorValue);
+  }, [selectedColor, onClick, colorRefs]);
+  return (
+    /**
+      We need to disable below eslint rule becuase of role "radiogroup". This role was added
+      in https://a11y-internal.atlassian.net/browse/AK-832 to fix accessibility issue.
+      When we migrated to emotion from styled component, we started getting this error.
+      Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+     */
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    jsx("div", {
+      css: colorPaletteWrapperStyles,
+      className: className,
+      role: "radiogroup",
+      style: {
+        maxWidth: cols * 32
+      },
+      onKeyDown: memoizedHandleKeyDown
+    }, palette.map(([colorValue, backgroundColor, borderColor], i) => {
+      return jsx(Color, {
+        key: colorValue,
+        value: colorValue,
+        backgroundColor: backgroundColor,
+        borderColor: borderColor,
+        onClick: onClick,
+        onHover: onHover,
+        isSelected: colorValue === selectedColor,
+        tabIndex: colorValue === selectedColor ? 0 : -1,
+        setRef: el => colorRefs.current[i] = el
+      });
+    }))
+  );
+});

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

@@ -1,25 +1,27 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 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 { token } from '@atlaskit/tokens';
+import React, { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
-const Button = styled.button`
+const buttonStyles = css`
   height: 24px;
   width: 24px;
-  background: ${N900};
+  background: ${token('color.background.neutral', N900)};
   padding: 0;
   border-radius: 4px;
-  border: 1px solid ${N0};
+  border: 1px solid ${token('color.border', N0)};
   cursor: pointer;
   display: block;
   box-sizing: border-box;
   overflow: hidden;
 `;
-const ButtonWrapper = styled.span`
+const buttonWrapperStyles = css`
   border: 1px solid transparent;
   margin: 0 2px;
   font-size: 0;
@@ -28,7 +30,7 @@ const ButtonWrapper = styled.span`
   padding: 1px;
   border-radius: 6px;
   &:hover {
-    border: 1px solid ${N50};
+    border: 1px solid ${token('color.border', N50)};
   }
 `;
 export default class Color extends PureComponent {
@@ -74,22 +76,32 @@ export default class Color extends PureComponent {
       backgroundColor,
       isSelected,
       borderColor,
-      value
+      value,
+      setRef
     } = this.props;
     const borderStyle = `1px solid ${borderColor}`;
-    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Button, {
+    return jsx("span", {
+      css: buttonWrapperStyles
+    }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx("button", {
+      css: buttonStyles,
       onClick: this.onClick,
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       onMouseDown: this.onMouseDown,
       tabIndex: tabIndex,
       className: `${isSelected ? 'selected' : ''}`,
-      title: labels[0],
+      title: labels[0] // button element does not support aria-selected.
+      // For button selected (to be precise pressed) or not
+      //  use aria-pressed as per
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+      ,
+      "aria-pressed": isSelected,
       style: {
         backgroundColor: backgroundColor || 'transparent',
         border: borderStyle
-      }
-    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      },
+      ref: setRef
+    }, isSelected && jsx(EditorDoneIcon, {
       primaryColor: borderColor,
       label: labels[0]
     }))));

package/dist/es2019/i18n/cs.js

@@ -1,15 +1,16 @@
 /**
  * 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
 export 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'
 };

package/dist/es2019/i18n/da.js

@@ -1,15 +1,16 @@
 /**
  * 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)
 export 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'
 };