@atlaskit/empty-state 7.1.8 → 7.3.1

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlaskit/empty-state
 
+## 7.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.3.0
+
+### Minor Changes
+
+- [`b5c96b26bf3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5c96b26bf3) - Instrumented empty-state 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.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.2.1
+
+### Patch Changes
+
+- [`7465c0f0e1d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7465c0f0e1d) - Fix to account for the size/width fallback behaviour. Previously if a user provided a value for the the `width` property it would always be ignored, this is no longer the case.
+
+## 7.2.0
+
+### Minor Changes
+
+- [`20ea31c9fdf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20ea31c9fdf) - **Deprecation Warning**
+  The `size` prop and `Sizes` type have been flagged as deprecated. Both are better described as a width and so internally have been renamed.
+  The `size` prop will continue to work in the shortrun before it's formally removed in the component's next major release.
+
+  Housekeeping:
+
+  - Component now uses the new entrypoint format.
+  - Prop descriptions have been updated to better describe component behaviors.
+  - Small bug fix related to additional props being spread in to some of the component's internals.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.1.8
 
 ### Patch Changes

package/dist/cjs/{EmptyState/index.js → empty-state.js}

@@ -13,7 +13,7 @@ var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _styled = require("../styled");
+var _styled = require("./styled");
 
 /**
  * __Empty state__
@@ -25,13 +25,14 @@ var _styled = require("../styled");
  * ```tsx
  * import EmptyState from '@atlaskit/empty-state';
  *
+ * // An example of a 404 state
  * export default () => {
  *  <EmptyState
- *   header="I am the header"
- *   imageUrl="link/to/image"
- *   description="some description"
- *   primaryAction={<Button appearance="primary" />}
- *   secondaryAction={<Button />}
+ *   header="Page not found"
+ *   imageUrl="https://cdn.io/images/404"
+ *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
+ *   primaryAction={<Button appearance="primary">Home Page</Button>}
+ *   secondaryAction={<Button>Report a problem</Button>}
  *  />;
  * };
  * ```
@@ -50,15 +51,15 @@ var EmptyState = function EmptyState(_ref) {
       primaryAction = _ref.primaryAction,
       renderImage = _ref.renderImage,
       secondaryAction = _ref.secondaryAction,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'wide' : _ref$size,
-      tertiaryAction = _ref.tertiaryAction;
+      width = _ref.width,
+      size = _ref.size,
+      tertiaryAction = _ref.tertiaryAction,
+      testId = _ref.testId;
   var actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/_react.default.createElement(_styled.ActionsContainer, null, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, secondaryAction, primaryAction), /*#__PURE__*/_react.default.createElement(_styled.SpinnerContainer, null, isLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, null))) : null;
   return /*#__PURE__*/_react.default.createElement(_styled.Container, {
-    size: size
+    testId: testId,
+    width: width || size || 'wide'
   }, imageUrl ? /*#__PURE__*/_react.default.createElement(_styled.Image, {
-    alt: "",
-    role: "presentation",
     src: imageUrl,
     maxWidth: maxImageWidth,
     maxHeight: maxImageHeight,

package/dist/cjs/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _EmptyState.default;
+    return _emptyState.default;
   }
 });
 
-var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+var _emptyState = _interopRequireDefault(require("./empty-state"));

package/dist/cjs/styled/actions-container.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -30,10 +26,11 @@ var actionsStyles = (0, _core.css)({
  * @internal
  */
 
-var ActionsContainer = function ActionsContainer(props) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+var ActionsContainer = function ActionsContainer(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
     css: actionsStyles
-  }, props));
+  }, children);
 };
 
 var _default = ActionsContainer;

package/dist/cjs/styled/container.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -38,10 +34,14 @@ var narrowContainerStyles = (0, _core.css)({
  * @internal
  */
 
-var Container = function Container(props) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: [containerStyles, props.size === 'narrow' ? narrowContainerStyles : wideContainerStyles]
-  }, props));
+var Container = function Container(_ref) {
+  var children = _ref.children,
+      width = _ref.width,
+      testId = _ref.testId;
+  return (0, _core.jsx)("div", {
+    "data-testid": testId,
+    css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
+  }, children);
 };
 
 var _default = Container;

package/dist/cjs/styled/description.js

@@ -1,25 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 /** @jsx jsx */
 var descriptionStyles = (0, _core.css)({
   marginTop: 0,
   marginBottom: "".concat((0, _constants.gridSize)() * 3, "px"),
-  color: _colors.N800
+  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800)
 });
 /**
  * __Description__
@@ -29,10 +27,11 @@ var descriptionStyles = (0, _core.css)({
  * @internal
  */
 
-var Description = function Description(props) {
-  return (0, _core.jsx)("p", (0, _extends2.default)({
+var Description = function Description(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("p", {
     css: descriptionStyles
-  }, props));
+  }, children);
 };
 
 var _default = Description;

package/dist/cjs/styled/header.js

@@ -1,16 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -32,11 +26,10 @@ var headerStyles = (0, _core.css)([(0, _typography.h600)(), {
  */
 
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
-  var children = _ref.children,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["children"]);
-  return (0, _core.jsx)("h4", (0, _extends2.default)({
+  var children = _ref.children;
+  return (0, _core.jsx)("h4", {
     css: headerStyles
-  }, props), children);
+  }, children);
 };
 
 var _default = EmptyStateHeader;

package/dist/cjs/styled/image.js

@@ -7,26 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
-var CSS_VAR_WIDTH = '--width';
 var CSS_VAR_MAX_WIDTH = '--max-width';
-var CSS_VAR_HEIGHT = '--height';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
 var imageStyles = (0, _core.css)({
   display: 'block',
-  width: "var(".concat(CSS_VAR_WIDTH, ")"),
   maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
-  height: "var(".concat(CSS_VAR_HEIGHT, ")"),
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
   margin: "0 auto ".concat((0, _constants.gridSize)() * 3, "px")
 });
@@ -41,15 +33,22 @@ var imageStyles = (0, _core.css)({
 var Image = function Image(_ref) {
   var _ref2;
 
-  var alt = _ref.alt,
-      maxHeight = _ref.maxHeight,
+  var maxHeight = _ref.maxHeight,
       maxWidth = _ref.maxWidth,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["alt", "maxHeight", "maxWidth"]);
-  return (0, _core.jsx)("img", (0, _extends2.default)({
-    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, CSS_VAR_WIDTH, props.width || 'auto'), (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), (0, _defineProperty2.default)(_ref2, CSS_VAR_HEIGHT, props.height || 'auto'), (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 'auto' : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
+      src = _ref.src;
+  return (0, _core.jsx)("img", {
+    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), (0, _defineProperty2.default)(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
+    width: width,
+    height: height,
+    alt: "",
+    role: "presentation",
     css: imageStyles,
-    alt: alt
-  }, props));
+    src: src
+  });
 };
 
 var _default = Image;

package/dist/cjs/styled/spinner-container.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -27,10 +23,11 @@ var spinnerContainerStyles = (0, _core.css)({
  * @internal
  */
 
-var SpinnerContainer = function SpinnerContainer(props) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+var SpinnerContainer = function SpinnerContainer(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
     css: spinnerContainerStyles
-  }, props));
+  }, children);
 };
 
 var _default = SpinnerContainer;

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.1.8",
+	"version": "7.3.1",
 	"sideEffects": false
 }

package/dist/es2019/{EmptyState/index.js → empty-state.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Spinner from '@atlaskit/spinner';
-import { ActionsContainer, Container, Description, Header, Image, SpinnerContainer } from '../styled';
+import { ActionsContainer, Container, Description, Header, Image, SpinnerContainer } from './styled';
 
 /**
  * __Empty state__
@@ -13,13 +13,14 @@ import { ActionsContainer, Container, Description, Header, Image, SpinnerContain
  * ```tsx
  * import EmptyState from '@atlaskit/empty-state';
  *
+ * // An example of a 404 state
  * export default () => {
  *  <EmptyState
- *   header="I am the header"
- *   imageUrl="link/to/image"
- *   description="some description"
- *   primaryAction={<Button appearance="primary" />}
- *   secondaryAction={<Button />}
+ *   header="Page not found"
+ *   imageUrl="https://cdn.io/images/404"
+ *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
+ *   primaryAction={<Button appearance="primary">Home Page</Button>}
+ *   secondaryAction={<Button>Report a problem</Button>}
  *  />;
  * };
  * ```
@@ -36,15 +37,16 @@ const EmptyState = ({
   primaryAction,
   renderImage,
   secondaryAction,
-  size = 'wide',
-  tertiaryAction
+  width,
+  size,
+  tertiaryAction,
+  testId
 }) => {
   const actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction, primaryAction), /*#__PURE__*/React.createElement(SpinnerContainer, null, isLoading && /*#__PURE__*/React.createElement(Spinner, null))) : null;
   return /*#__PURE__*/React.createElement(Container, {
-    size: size
+    testId: testId,
+    width: width || size || 'wide'
   }, imageUrl ? /*#__PURE__*/React.createElement(Image, {
-    alt: "",
-    role: "presentation",
     src: imageUrl,
     maxWidth: maxImageWidth,
     maxHeight: maxImageHeight,

package/dist/es2019/index.js

@@ -1 +1 @@
-export { default } from './EmptyState';
+export { default } from './empty-state';

package/dist/es2019/styled/actions-container.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -19,8 +17,10 @@ const actionsStyles = css({
  * @internal
  */
 
-const ActionsContainer = props => jsx("div", _extends({
+const ActionsContainer = ({
+  children
+}) => jsx("div", {
   css: actionsStyles
-}, props));
+}, children);
 
 export default ActionsContainer;

package/dist/es2019/styled/container.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -27,8 +25,13 @@ const narrowContainerStyles = css({
  * @internal
  */
 
-const Container = props => jsx("div", _extends({
-  css: [containerStyles, props.size === 'narrow' ? narrowContainerStyles : wideContainerStyles]
-}, props));
+const Container = ({
+  children,
+  width,
+  testId
+}) => jsx("div", {
+  "data-testid": testId,
+  css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
+}, children);
 
 export default Container;

package/dist/es2019/styled/description.js

@@ -1,13 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { N800 } from '@atlaskit/theme/colors';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 const descriptionStyles = css({
   marginTop: 0,
   marginBottom: `${getGridSize() * 3}px`,
-  color: N800
+  color: token('color.text.highEmphasis', N800)
 });
 /**
  * __Description__
@@ -17,8 +16,10 @@ const descriptionStyles = css({
  * @internal
  */
 
-const Description = props => jsx("p", _extends({
+const Description = ({
+  children
+}) => jsx("p", {
   css: descriptionStyles
-}, props));
+}, children);
 
 export default Description;

package/dist/es2019/styled/header.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -18,10 +16,9 @@ const headerStyles = css([h600(), {
  */
 
 const EmptyStateHeader = ({
-  children,
-  ...props
-}) => jsx("h4", _extends({
+  children
+}) => jsx("h4", {
   css: headerStyles
-}, props), children);
+}, children);
 
 export default EmptyStateHeader;

package/dist/es2019/styled/image.js

@@ -1,17 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const CSS_VAR_WIDTH = '--width';
 const CSS_VAR_MAX_WIDTH = '--max-width';
-const CSS_VAR_HEIGHT = '--height';
 const CSS_VAR_MAX_HEIGHT = '--max-height';
 const imageStyles = css({
   display: 'block',
-  width: `var(${CSS_VAR_WIDTH})`,
   maxWidth: `var(${CSS_VAR_MAX_WIDTH})`,
-  height: `var(${CSS_VAR_HEIGHT})`,
   maxHeight: `var(${CSS_VAR_MAX_HEIGHT})`,
   margin: `0 auto ${getGridSize() * 3}px`
 });
@@ -24,19 +18,22 @@ const imageStyles = css({
  */
 
 const Image = ({
-  alt,
   maxHeight,
   maxWidth,
-  ...props
-}) => jsx("img", _extends({
+  height = 'auto',
+  width = 'auto',
+  src
+}) => jsx("img", {
   style: {
-    [CSS_VAR_WIDTH]: props.width || 'auto',
     [CSS_VAR_MAX_WIDTH]: `${maxWidth}px`,
-    [CSS_VAR_HEIGHT]: props.height || 'auto',
     [CSS_VAR_MAX_HEIGHT]: `${maxHeight}px`
   },
+  width: width,
+  height: height,
+  alt: "",
+  role: "presentation",
   css: imageStyles,
-  alt: alt
-}, props));
+  src: src
+});
 
 export default Image;

package/dist/es2019/styled/spinner-container.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -16,8 +14,10 @@ const spinnerContainerStyles = css({
  * @internal
  */
 
-const SpinnerContainer = props => jsx("div", _extends({
+const SpinnerContainer = ({
+  children
+}) => jsx("div", {
   css: spinnerContainerStyles
-}, props));
+}, children);
 
 export default SpinnerContainer;

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.1.8",
+	"version": "7.3.1",
 	"sideEffects": false
 }

package/dist/esm/{EmptyState/index.js → empty-state.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Spinner from '@atlaskit/spinner';
-import { ActionsContainer, Container, Description, Header, Image, SpinnerContainer } from '../styled';
+import { ActionsContainer, Container, Description, Header, Image, SpinnerContainer } from './styled';
 
 /**
  * __Empty state__
@@ -13,13 +13,14 @@ import { ActionsContainer, Container, Description, Header, Image, SpinnerContain
  * ```tsx
  * import EmptyState from '@atlaskit/empty-state';
  *
+ * // An example of a 404 state
  * export default () => {
  *  <EmptyState
- *   header="I am the header"
- *   imageUrl="link/to/image"
- *   description="some description"
- *   primaryAction={<Button appearance="primary" />}
- *   secondaryAction={<Button />}
+ *   header="Page not found"
+ *   imageUrl="https://cdn.io/images/404"
+ *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
+ *   primaryAction={<Button appearance="primary">Home Page</Button>}
+ *   secondaryAction={<Button>Report a problem</Button>}
  *  />;
  * };
  * ```
@@ -38,15 +39,15 @@ var EmptyState = function EmptyState(_ref) {
       primaryAction = _ref.primaryAction,
       renderImage = _ref.renderImage,
       secondaryAction = _ref.secondaryAction,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'wide' : _ref$size,
-      tertiaryAction = _ref.tertiaryAction;
+      width = _ref.width,
+      size = _ref.size,
+      tertiaryAction = _ref.tertiaryAction,
+      testId = _ref.testId;
   var actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, null, secondaryAction, primaryAction), /*#__PURE__*/React.createElement(SpinnerContainer, null, isLoading && /*#__PURE__*/React.createElement(Spinner, null))) : null;
   return /*#__PURE__*/React.createElement(Container, {
-    size: size
+    testId: testId,
+    width: width || size || 'wide'
   }, imageUrl ? /*#__PURE__*/React.createElement(Image, {
-    alt: "",
-    role: "presentation",
     src: imageUrl,
     maxWidth: maxImageWidth,
     maxHeight: maxImageHeight,

package/dist/esm/index.js

@@ -1 +1 @@
-export { default } from './EmptyState';
+export { default } from './empty-state';

package/dist/esm/styled/actions-container.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -19,10 +17,11 @@ var actionsStyles = css({
  * @internal
  */
 
-var ActionsContainer = function ActionsContainer(props) {
-  return jsx("div", _extends({
+var ActionsContainer = function ActionsContainer(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
     css: actionsStyles
-  }, props));
+  }, children);
 };
 
 export default ActionsContainer;

package/dist/esm/styled/container.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -27,10 +25,14 @@ var narrowContainerStyles = css({
  * @internal
  */
 
-var Container = function Container(props) {
-  return jsx("div", _extends({
-    css: [containerStyles, props.size === 'narrow' ? narrowContainerStyles : wideContainerStyles]
-  }, props));
+var Container = function Container(_ref) {
+  var children = _ref.children,
+      width = _ref.width,
+      testId = _ref.testId;
+  return jsx("div", {
+    "data-testid": testId,
+    css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
+  }, children);
 };
 
 export default Container;

package/dist/esm/styled/description.js

@@ -1,13 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { N800 } from '@atlaskit/theme/colors';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 var descriptionStyles = css({
   marginTop: 0,
   marginBottom: "".concat(getGridSize() * 3, "px"),
-  color: N800
+  color: token('color.text.highEmphasis', N800)
 });
 /**
  * __Description__
@@ -17,10 +16,11 @@ var descriptionStyles = css({
  * @internal
  */
 
-var Description = function Description(props) {
-  return jsx("p", _extends({
+var Description = function Description(_ref) {
+  var children = _ref.children;
+  return jsx("p", {
     css: descriptionStyles
-  }, props));
+  }, children);
 };
 
 export default Description;

package/dist/esm/styled/header.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -19,12 +16,10 @@ var headerStyles = css([h600(), {
  */
 
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["children"]);
-
-  return jsx("h4", _extends({
+  var children = _ref.children;
+  return jsx("h4", {
     css: headerStyles
-  }, props), children);
+  }, children);
 };
 
 export default EmptyStateHeader;

package/dist/esm/styled/image.js

@@ -1,19 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var CSS_VAR_WIDTH = '--width';
 var CSS_VAR_MAX_WIDTH = '--max-width';
-var CSS_VAR_HEIGHT = '--height';
 var CSS_VAR_MAX_HEIGHT = '--max-height';
 var imageStyles = css({
   display: 'block',
-  width: "var(".concat(CSS_VAR_WIDTH, ")"),
   maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
-  height: "var(".concat(CSS_VAR_HEIGHT, ")"),
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
   margin: "0 auto ".concat(getGridSize() * 3, "px")
 });
@@ -28,16 +22,22 @@ var imageStyles = css({
 var Image = function Image(_ref) {
   var _ref2;
 
-  var alt = _ref.alt,
-      maxHeight = _ref.maxHeight,
+  var maxHeight = _ref.maxHeight,
       maxWidth = _ref.maxWidth,
-      props = _objectWithoutProperties(_ref, ["alt", "maxHeight", "maxWidth"]);
-
-  return jsx("img", _extends({
-    style: (_ref2 = {}, _defineProperty(_ref2, CSS_VAR_WIDTH, props.width || 'auto'), _defineProperty(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), _defineProperty(_ref2, CSS_VAR_HEIGHT, props.height || 'auto'), _defineProperty(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 'auto' : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
+      src = _ref.src;
+  return jsx("img", {
+    style: (_ref2 = {}, _defineProperty(_ref2, CSS_VAR_MAX_WIDTH, "".concat(maxWidth, "px")), _defineProperty(_ref2, CSS_VAR_MAX_HEIGHT, "".concat(maxHeight, "px")), _ref2),
+    width: width,
+    height: height,
+    alt: "",
+    role: "presentation",
     css: imageStyles,
-    alt: alt
-  }, props));
+    src: src
+  });
 };
 
 export default Image;

package/dist/esm/styled/spinner-container.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -16,10 +14,11 @@ var spinnerContainerStyles = css({
  * @internal
  */
 
-var SpinnerContainer = function SpinnerContainer(props) {
-  return jsx("div", _extends({
+var SpinnerContainer = function SpinnerContainer(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
     css: spinnerContainerStyles
-  }, props));
+  }, children);
 };
 
 export default SpinnerContainer;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/empty-state",
-	"version": "7.1.8",
+	"version": "7.3.1",
 	"sideEffects": false
 }

package/dist/types/empty-state.d.ts

@@ -0,0 +1,25 @@
+import type { EmptyStateProps } from './types';
+/**
+ * __Empty state__
+ *
+ * A component used for presenting various empty states.
+ * e.g. (no items, empty search, broken link, welcome screen etc.)
+ *
+ * @example
+ * ```tsx
+ * import EmptyState from '@atlaskit/empty-state';
+ *
+ * // An example of a 404 state
+ * export default () => {
+ *  <EmptyState
+ *   header="Page not found"
+ *   imageUrl="https://cdn.io/images/404"
+ *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
+ *   primaryAction={<Button appearance="primary">Home Page</Button>}
+ *   secondaryAction={<Button>Report a problem</Button>}
+ *  />;
+ * };
+ * ```
+ */
+declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
+export default EmptyState;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './EmptyState';
-export type { Sizes, RenderImageProps } from './EmptyState';
+export { default } from './empty-state';
+export type { Sizes, Width, RenderImageProps, EmptyStateProps } from './types';

package/dist/types/styled/container.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { Sizes } from '../index';
+import type { Width } from '../index';
 /**
  * __Container__
  *
@@ -9,6 +9,7 @@ import { Sizes } from '../index';
  * @internal
  */
 declare const Container: FC<{
-    size: Sizes;
+    testId?: string;
+    width: Width;
 }>;
 export default Container;

package/dist/types/styled/image.d.ts

@@ -4,9 +4,7 @@ declare type ImageProps = {
     height?: number;
     maxHeight: number;
     maxWidth: number;
-    alt: string;
     width?: number;
-    role: string;
     src: string;
 };
 /**

package/dist/types/types.d.ts

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+export interface RenderImageProps {
+    maxImageWidth?: number;
+    maxImageHeight?: number;
+    imageWidth?: number;
+    imageHeight?: number;
+}
+export declare type Sizes = 'narrow' | 'wide';
+export declare type Width = Sizes;
+export interface EmptyStateProps {
+    /**
+     * Title that briefly describes the page to the user.
+     */
+    header: string;
+    /**
+     * The main block of text that holds additional supporting information.
+     */
+    description?: ReactNode;
+    /**
+     * Controls how much horizontal space the component fills. Defaults to "wide".
+     */
+    width?: Width;
+    /**
+     * @deprecated
+     * Duplicates the `width` prop. Use `width instead`.
+     */
+    size?: Width;
+    /**
+     * The url of image that will be shown above the title, fed directly into the `src` prop of an <img> element.
+     * Note, this image will be constrained by the `maxWidth` and `maxHeight` props.
+     */
+    imageUrl?: string;
+    /**
+     * Maximum width (in pixels) of the image, default value is 160.
+     */
+    maxImageWidth?: number;
+    /**
+     * Maximum height (in pixels) of the image, default value is 160.
+     */
+    maxImageHeight?: number;
+    /**
+     * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
+     */
+    primaryAction?: ReactNode;
+    /**
+     * An alternative API to supply an image using a render prop. Only rendered if no `imageUrl` is supplied.
+     */
+    renderImage?: (props: RenderImageProps) => React.ReactNode;
+    /**
+     * Secondary action button for the page.
+     */
+    secondaryAction?: ReactNode;
+    /**
+     * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
+     */
+    tertiaryAction?: ReactNode;
+    /**
+     * A hook for automated testing
+     */
+    testId?: string;
+    /**
+     * Used to indicate a loading state. Will show a spinner next to the action buttons when true.
+     */
+    isLoading?: boolean;
+    /**
+     * Width of the image that is rendered in EmptyState component.
+     * Useful when you want image to be of exact width to stop it bouncing around when loading in.
+     */
+    imageWidth?: number;
+    /**
+     * Height of the image that is rendered in EmptyState component.
+     * Useful when you want image to be of exact height to stop it bouncing around when loading in.
+     * Only set `height` if you want the image to resize down on smaller devices.
+     */
+    imageHeight?: number;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/empty-state",
-  "version": "7.1.8",
-  "description": "A React component used for presenting various empty states (no items, empty search, broken link, welcome screen etc.)",
+  "version": "7.3.1",
+  "description": "An empty state appears when there is no data to display and describes what the user can do next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "deprecatedAutoEntryPoints": true,
     "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
@@ -26,7 +25,8 @@
   "dependencies": {
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -39,6 +39,7 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "typescript": "3.9.6",
@@ -50,11 +51,15 @@
     },
     "@repo/internal": {
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "styling": "emotion",
       "design-system": "v1",
       "deprecation": "no-deprecated-imports"
     }
   },
+  "af:exports": {
+    "./types": "./src/types.tsx",
+    ".": "./src/index.tsx"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/types/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/empty-state/types",
+  "main": "../dist/cjs/types.js",
+  "module": "../dist/esm/types.js",
+  "module:es2019": "../dist/es2019/types.js",
+  "types": "../dist/types/types.d.ts"
+}

package/dist/types/EmptyState/index.d.ts

@@ -1,85 +0,0 @@
-import React, { ReactNode } from 'react';
-export interface RenderImageProps {
-    maxImageWidth?: number;
-    maxImageHeight?: number;
-    imageWidth?: number;
-    imageHeight?: number;
-}
-export declare type Sizes = 'narrow' | 'wide';
-interface EmptyStateProps {
-    /**
-     * Title that briefly describes the page to the user.
-     */
-    header: string;
-    /**
-     * The main block of text that holds some additional information.
-     */
-    description?: ReactNode;
-    /**
-     * It affects the width of the main container of this component, "wide" is a default one.
-     */
-    size?: Sizes;
-    /**
-     * Image that will be shown above the title. Goes directly into the src prop of an <img> element. The larger side of this image will be shrunk to 160px.
-     */
-    imageUrl?: string;
-    /**
-     * Maximum width (in pixels) of the image, default value is 160.
-     */
-    maxImageWidth?: number;
-    /**
-     * Maximum height (in pixels) of the image, default value is 160.
-     */
-    maxImageHeight?: number;
-    /**
-     * Primary action button for the page, usually it will be something like "Create" (or "Retry" for error pages).
-     */
-    primaryAction?: ReactNode;
-    /**
-     * Image that will be shown above the title. Only rendered if no imageUrl given.
-     */
-    renderImage?: (props: RenderImageProps) => React.ReactNode;
-    /**
-     * Secondary action button for the page.
-     */
-    secondaryAction?: ReactNode;
-    /**
-     * Button with link to some external resource like documentation or tutorial, it will be opened in a new tab.
-     */
-    tertiaryAction?: ReactNode;
-    /**
-     * Shows spinner next to the action buttons. Primary and secondary action buttons are disabled when this prop is set to true.
-     */
-    isLoading?: boolean;
-    /**
-     * Width of the image that is rendered in EmptyState component. It is useful when you want image to be of exact width to stop it bouncing around when loading in. Only set `height` if you want the image to resize down on smaller devices.
-     */
-    imageWidth?: number;
-    /**
-     * Height of the image that is rendered in EmptyState component. It is useful when you want image to be of exact height to stop it bouncing around when loading in. Only set `height` if you want the image to resize down on smaller devices.
-     */
-    imageHeight?: number;
-}
-/**
- * __Empty state__
- *
- * A component used for presenting various empty states.
- * e.g. (no items, empty search, broken link, welcome screen etc.)
- *
- * @example
- * ```tsx
- * import EmptyState from '@atlaskit/empty-state';
- *
- * export default () => {
- *  <EmptyState
- *   header="I am the header"
- *   imageUrl="link/to/image"
- *   description="some description"
- *   primaryAction={<Button appearance="primary" />}
- *   secondaryAction={<Button />}
- *  />;
- * };
- * ```
- */
-declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, size, tertiaryAction, }: EmptyStateProps) => JSX.Element;
-export default EmptyState;