@atlaskit/empty-state 7.5.2 → 7.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/empty-state
 
+## 7.6.1
+
+### Patch Changes
+
+- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
+
+## 7.6.0
+
+### Minor Changes
+
+- [`56d11ec914b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56d11ec914b) - Add a new prop `headingLevel` to set the heading level in the header element.
+
 ## 7.5.2
 
 ### Patch Changes

package/dist/cjs/empty-state.js

@@ -34,6 +34,8 @@ var _styled = require("./styled");
 var EmptyState = function EmptyState(_ref) {
   var description = _ref.description,
     header = _ref.header,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 4 : _ref$headingLevel,
     imageHeight = _ref.imageHeight,
     imageUrl = _ref.imageUrl,
     imageWidth = _ref.imageWidth,
@@ -66,7 +68,9 @@ var EmptyState = function EmptyState(_ref) {
     maxImageHeight: maxImageHeight,
     imageWidth: imageWidth,
     imageHeight: imageHeight
-  }), /*#__PURE__*/_react.default.createElement(_styled.Header, null, header), description && /*#__PURE__*/_react.default.createElement(_styled.Description, null, description), actionsContainer, tertiaryAction);
+  }), /*#__PURE__*/_react.default.createElement(_styled.Header, {
+    level: headingLevel
+  }, header), description && /*#__PURE__*/_react.default.createElement(_styled.Description, null, description), actionsContainer, tertiaryAction);
 };
 var _default = EmptyState;
 exports.default = _default;

package/dist/cjs/styled/container.js

@@ -15,7 +15,7 @@ var verticalMarginSize = "var(--ds-space-600, 48px)";
 var columnWidth = gridSize * 8;
 var gutter = gridSize * 2;
 var containerStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: "".concat(verticalMarginSize, " auto"),
   textAlign: 'center'
 });

package/dist/cjs/styled/header.js

@@ -8,7 +8,7 @@ var _react = require("@emotion/react");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var headerStyles = (0, _react.css)([(0, _typography.h600)(), {
   marginTop: "var(--ds-space-0, 0px)",
   marginBottom: "var(--ds-space-200, 16px)"
@@ -22,8 +22,11 @@ var headerStyles = (0, _react.css)([(0, _typography.h600)(), {
  * @internal
  */
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
-  var children = _ref.children;
-  return (0, _react.jsx)("h4", {
+  var children = _ref.children,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 4 : _ref$level;
+  var Tag = "h".concat(level > 0 && level < 7 ? level : level > 6 ? 6 : 4);
+  return (0, _react.jsx)(Tag, {
     css: headerStyles
   }, children);
 };

package/dist/cjs/styled/image.js

@@ -15,7 +15,7 @@ var imageStyles = (0, _react.css)({
   display: 'block',
   maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: "0 auto ".concat("var(--ds-space-300, 24px)")
 });
 

package/dist/cjs/version.json

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

package/dist/es2019/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 as HeaderImage, SpinnerContainer } from './styled';
 /**
  * __Empty state__
  *
@@ -27,6 +27,7 @@ import { ActionsContainer, Container, Description, Header, Image, SpinnerContain
 const EmptyState = ({
   description,
   header,
+  headingLevel = 4,
   imageHeight,
   imageUrl,
   imageWidth,
@@ -47,7 +48,7 @@ const EmptyState = ({
   return /*#__PURE__*/React.createElement(Container, {
     testId: testId,
     width: width || size || 'wide'
-  }, imageUrl ? /*#__PURE__*/React.createElement(Image, {
+  }, imageUrl ? /*#__PURE__*/React.createElement(HeaderImage, {
     src: imageUrl,
     maxWidth: maxImageWidth,
     maxHeight: maxImageHeight,
@@ -58,6 +59,8 @@ const EmptyState = ({
     maxImageHeight,
     imageWidth,
     imageHeight
-  }), /*#__PURE__*/React.createElement(Header, null, header), description && /*#__PURE__*/React.createElement(Description, null, description), actionsContainer, tertiaryAction);
+  }), /*#__PURE__*/React.createElement(Header, {
+    level: headingLevel
+  }, header), description && /*#__PURE__*/React.createElement(Description, null, description), actionsContainer, tertiaryAction);
 };
 export default EmptyState;

package/dist/es2019/styled/container.js

@@ -9,7 +9,7 @@ const verticalMarginSize = "var(--ds-space-600, 48px)";
 const columnWidth = gridSize * 8;
 const gutter = gridSize * 2;
 const containerStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: `${verticalMarginSize} auto`,
   textAlign: 'center'
 });

package/dist/es2019/styled/header.js

@@ -2,7 +2,7 @@
 
 import { css, jsx } from '@emotion/react';
 import { h600 } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const headerStyles = css([h600(), {
   marginTop: "var(--ds-space-0, 0px)",
   marginBottom: "var(--ds-space-200, 16px)"
@@ -16,8 +16,12 @@ const headerStyles = css([h600(), {
  * @internal
  */
 const EmptyStateHeader = ({
-  children
-}) => jsx("h4", {
-  css: headerStyles
-}, children);
+  children,
+  level = 4
+}) => {
+  const Tag = `h${level > 0 && level < 7 ? level : level > 6 ? 6 : 4}`;
+  return jsx(Tag, {
+    css: headerStyles
+  }, children);
+};
 export default EmptyStateHeader;

package/dist/es2019/styled/image.js

@@ -7,7 +7,7 @@ const imageStyles = css({
   display: 'block',
   maxWidth: `var(${CSS_VAR_MAX_WIDTH})`,
   maxHeight: `var(${CSS_VAR_MAX_HEIGHT})`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: `0 auto ${"var(--ds-space-300, 24px)"}`
 });
 

package/dist/es2019/version.json

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

package/dist/esm/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 as HeaderImage, SpinnerContainer } from './styled';
 /**
  * __Empty state__
  *
@@ -27,6 +27,8 @@ import { ActionsContainer, Container, Description, Header, Image, SpinnerContain
 var EmptyState = function EmptyState(_ref) {
   var description = _ref.description,
     header = _ref.header,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 4 : _ref$headingLevel,
     imageHeight = _ref.imageHeight,
     imageUrl = _ref.imageUrl,
     imageWidth = _ref.imageWidth,
@@ -48,7 +50,7 @@ var EmptyState = function EmptyState(_ref) {
   return /*#__PURE__*/React.createElement(Container, {
     testId: testId,
     width: width || size || 'wide'
-  }, imageUrl ? /*#__PURE__*/React.createElement(Image, {
+  }, imageUrl ? /*#__PURE__*/React.createElement(HeaderImage, {
     src: imageUrl,
     maxWidth: maxImageWidth,
     maxHeight: maxImageHeight,
@@ -59,6 +61,8 @@ var EmptyState = function EmptyState(_ref) {
     maxImageHeight: maxImageHeight,
     imageWidth: imageWidth,
     imageHeight: imageHeight
-  }), /*#__PURE__*/React.createElement(Header, null, header), description && /*#__PURE__*/React.createElement(Description, null, description), actionsContainer, tertiaryAction);
+  }), /*#__PURE__*/React.createElement(Header, {
+    level: headingLevel
+  }, header), description && /*#__PURE__*/React.createElement(Description, null, description), actionsContainer, tertiaryAction);
 };
 export default EmptyState;

package/dist/esm/styled/container.js

@@ -9,7 +9,7 @@ var verticalMarginSize = "var(--ds-space-600, 48px)";
 var columnWidth = gridSize * 8;
 var gutter = gridSize * 2;
 var containerStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: "".concat(verticalMarginSize, " auto"),
   textAlign: 'center'
 });

package/dist/esm/styled/header.js

@@ -2,7 +2,7 @@
 
 import { css, jsx } from '@emotion/react';
 import { h600 } from '@atlaskit/theme/typography';
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var headerStyles = css([h600(), {
   marginTop: "var(--ds-space-0, 0px)",
   marginBottom: "var(--ds-space-200, 16px)"
@@ -16,8 +16,11 @@ var headerStyles = css([h600(), {
  * @internal
  */
 var EmptyStateHeader = function EmptyStateHeader(_ref) {
-  var children = _ref.children;
-  return jsx("h4", {
+  var children = _ref.children,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 4 : _ref$level;
+  var Tag = "h".concat(level > 0 && level < 7 ? level : level > 6 ? 6 : 4);
+  return jsx(Tag, {
     css: headerStyles
   }, children);
 };

package/dist/esm/styled/image.js

@@ -8,7 +8,7 @@ var imageStyles = css({
   display: 'block',
   maxWidth: "var(".concat(CSS_VAR_MAX_WIDTH, ")"),
   maxHeight: "var(".concat(CSS_VAR_MAX_HEIGHT, ")"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   margin: "0 auto ".concat("var(--ds-space-300, 24px)")
 });
 

package/dist/esm/version.json

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

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

@@ -22,5 +22,5 @@ import type { EmptyStateProps } from './types';
  * };
  * ```
  */
-declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
+declare const EmptyState: ({ description, header, headingLevel, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
 export default EmptyState;

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

@@ -1,5 +1,9 @@
 /** @jsx jsx */
 import { FC } from 'react';
+type HeaderProps = {
+    children: string;
+    level?: number;
+};
 /**
  * __Header__
  *
@@ -7,7 +11,5 @@ import { FC } from 'react';
  *
  * @internal
  */
-declare const EmptyStateHeader: FC<{
-    children: string;
-}>;
+declare const EmptyStateHeader: FC<HeaderProps>;
 export default EmptyStateHeader;

package/dist/types/types.d.ts

@@ -12,6 +12,11 @@ export interface EmptyStateProps {
      * Title that briefly describes the page to the user.
      */
     header: string;
+    /**
+     * The value used to set the heading level of the header element.
+     * Must be in the range of 1 to 6. Defaults to 4.
+     */
+    headingLevel?: number;
     /**
      * The main block of text that holds additional supporting information.
      */

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

@@ -22,5 +22,5 @@ import type { EmptyStateProps } from './types';
  * };
  * ```
  */
-declare const EmptyState: ({ description, header, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
+declare const EmptyState: ({ description, header, headingLevel, imageHeight, imageUrl, imageWidth, isLoading, maxImageHeight, maxImageWidth, primaryAction, renderImage, secondaryAction, width, size, tertiaryAction, testId, }: EmptyStateProps) => JSX.Element;
 export default EmptyState;

package/dist/types-ts4.5/styled/header.d.ts

@@ -1,5 +1,9 @@
 /** @jsx jsx */
 import { FC } from 'react';
+type HeaderProps = {
+    children: string;
+    level?: number;
+};
 /**
  * __Header__
  *
@@ -7,7 +11,5 @@ import { FC } from 'react';
  *
  * @internal
  */
-declare const EmptyStateHeader: FC<{
-    children: string;
-}>;
+declare const EmptyStateHeader: FC<HeaderProps>;
 export default EmptyStateHeader;

package/dist/types-ts4.5/types.d.ts

@@ -12,6 +12,11 @@ export interface EmptyStateProps {
      * Title that briefly describes the page to the user.
      */
     header: string;
+    /**
+     * The value used to set the heading level of the header element.
+     * Must be in the range of 1 to 6. Defaults to 4.
+     */
+    headingLevel?: number;
     /**
      * The main block of text that holds additional supporting information.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/empty-state",
-  "version": "7.5.2",
+  "version": "7.6.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/"
@@ -25,17 +25,17 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Empty state",
       "category": "Components"
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -43,7 +43,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -22,6 +23,7 @@ import type { ReactNode } from 'react';
 const EmptyState: ({
   description,
   header,
+  headingLevel,
   imageHeight,
   imageUrl,
   imageWidth,
@@ -42,6 +44,7 @@ export default EmptyState;
 export interface EmptyStateProps {
   description?: ReactNode;
   header: string;
+  headingLevel?: number;
   imageHeight?: number;
   imageUrl?: string;
   imageWidth?: number;
@@ -80,3 +83,15 @@ export type Width = Sizes;
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->