@atlaskit/empty-state 7.2.0 → 7.3.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/empty-state
 
+## 7.3.2
+
+### Patch Changes
+
+- [`0397fedf294`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0397fedf294) - Added documentation homepage URL to package.json
+
+## 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

package/dist/cjs/empty-state.js

@@ -51,14 +51,14 @@ var EmptyState = function EmptyState(_ref) {
       primaryAction = _ref.primaryAction,
       renderImage = _ref.renderImage,
       secondaryAction = _ref.secondaryAction,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'wide' : _ref$width,
-      _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, {
-    width: size || width
+    testId: testId,
+    width: width || size || 'wide'
   }, imageUrl ? /*#__PURE__*/_react.default.createElement(_styled.Image, {
     src: imageUrl,
     maxWidth: maxImageWidth,

package/dist/cjs/styled/container.js

@@ -36,8 +36,10 @@ var narrowContainerStyles = (0, _core.css)({
 
 var Container = function Container(_ref) {
   var children = _ref.children,
-      width = _ref.width;
+      width = _ref.width,
+      testId = _ref.testId;
   return (0, _core.jsx)("div", {
+    "data-testid": testId,
     css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
   }, children);
 };

package/dist/cjs/styled/description.js

@@ -11,11 +11,13 @@ 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__

package/dist/cjs/version.json

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

package/dist/es2019/empty-state.js

@@ -37,13 +37,15 @@ const EmptyState = ({
   primaryAction,
   renderImage,
   secondaryAction,
-  width = 'wide',
-  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, {
-    width: size || width
+    testId: testId,
+    width: width || size || 'wide'
   }, imageUrl ? /*#__PURE__*/React.createElement(Image, {
     src: imageUrl,
     maxWidth: maxImageWidth,

package/dist/es2019/styled/container.js

@@ -27,8 +27,10 @@ const narrowContainerStyles = css({
 
 const Container = ({
   children,
-  width
+  width,
+  testId
 }) => jsx("div", {
+  "data-testid": testId,
   css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
 }, children);
 

package/dist/es2019/styled/description.js

@@ -2,10 +2,11 @@
 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__

package/dist/es2019/version.json

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

package/dist/esm/empty-state.js

@@ -39,14 +39,14 @@ var EmptyState = function EmptyState(_ref) {
       primaryAction = _ref.primaryAction,
       renderImage = _ref.renderImage,
       secondaryAction = _ref.secondaryAction,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'wide' : _ref$width,
-      _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, {
-    width: size || width
+    testId: testId,
+    width: width || size || 'wide'
   }, imageUrl ? /*#__PURE__*/React.createElement(Image, {
     src: imageUrl,
     maxWidth: maxImageWidth,

package/dist/esm/styled/container.js

@@ -27,8 +27,10 @@ var narrowContainerStyles = css({
 
 var Container = function Container(_ref) {
   var children = _ref.children,
-      width = _ref.width;
+      width = _ref.width,
+      testId = _ref.testId;
   return jsx("div", {
+    "data-testid": testId,
     css: [containerStyles, width === 'narrow' ? narrowContainerStyles : wideContainerStyles]
   }, children);
 };

package/dist/esm/styled/description.js

@@ -2,10 +2,11 @@
 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__

package/dist/esm/version.json

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

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

@@ -1,68 +1,4 @@
-import React, { ReactNode } from 'react';
-import type { RenderImageProps, Width } from './types';
-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;
-    /**
-     * 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;
-}
+import type { EmptyStateProps } from './types';
 /**
  * __Empty state__
  *
@@ -85,5 +21,5 @@ export interface EmptyStateProps {
  * };
  * ```
  */
-declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, }: EmptyStateProps) => JSX.Element;
+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/styled/container.d.ts

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

package/dist/types/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface RenderImageProps {
     maxImageWidth?: number;
     maxImageHeight?: number;
@@ -6,4 +7,70 @@ export interface RenderImageProps {
 }
 export declare type Sizes = 'narrow' | 'wide';
 export declare type Width = Sizes;
-export type { EmptyStateProps } from './empty-state';
+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,11 +1,12 @@
 {
   "name": "@atlaskit/empty-state",
-  "version": "7.2.0",
-  "description": "A React component used for presenting various empty states (no items, empty search, broken link, welcome screen etc.)",
+  "version": "7.3.2",
+  "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/"
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "homepage": "https://atlassian.design/components/empty-state/",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -25,7 +26,8 @@
   "dependencies": {
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/spinner": "^15.1.0",
-    "@atlaskit/theme": "^11.5.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -38,6 +40,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",
@@ -49,7 +52,7 @@
     },
     "@repo/internal": {
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "styling": "emotion",
       "design-system": "v1",
       "deprecation": "no-deprecated-imports"