@atlaskit/heading 1.3.8 → 1.4.0

package/CHANGELOG.md

@@ -1,58 +1,64 @@
 # @atlaskit/heading
 
+## 1.4.0
+
+### Minor Changes
+
+- [#40254](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40254) [`9cc7e23c65b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cc7e23c65b) - [ux] Adds additional heading types via the `variant` prop. This prop has been added to aid deprecation of the previous `level` prop. The `level` prop will be removed in a future release.
+
 ## 1.3.8
 
 ### Patch Changes
 
-- [`ff79902b24c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff79902b24c) - This package is now onboarded onto the product push model.
+- [#40040](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40040) [`ff79902b24c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ff79902b24c) - This package is now onboarded onto the product push model.
 
 ## 1.3.7
 
 ### 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.
+- [#36754](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/36754) [`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.
 
 ## 1.3.6
 
 ### Patch Changes
 
-- [`529814693a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/529814693a1) - Pin version of @atlaskit/primitives so it resolves to correct version
+- [#35337](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/35337) [`529814693a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/529814693a1) - Pin version of @atlaskit/primitives so it resolves to correct version
 
 ## 1.3.5
 
 ### Patch Changes
 
-- [`b8b41649492`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8b41649492) - Update how certain background colors are referenced by name. Internal changes only.
+- [#33833](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33833) [`b8b41649492`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b8b41649492) - Update how certain background colors are referenced by name. Internal changes only.
 
 ## 1.3.4
 
 ### Patch Changes
 
-- [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
+- [#34922](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34922) [`779727e307a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/779727e307a) - Internal change only. Replace all instances of Box with stable @atlaskit/primitives version.
 
 ## 1.3.3
 
 ### Patch Changes
 
-- [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
+- [#34443](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/34443) [`61cb5313358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cb5313358) - Removing unused dependencies and dev dependencies
 
 ## 1.3.2
 
 ### Patch Changes
 
-- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+- [#33793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33793) [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
 
 ## 1.3.1
 
 ### Patch Changes
 
-- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+- [#33649](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33649) [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
 
 ## 1.3.0
 
 ### Minor Changes
 
-- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+- [#33258](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/33258) [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
 
 ### Patch Changes
 
@@ -62,25 +68,25 @@
 
 ### Patch Changes
 
-- [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages of `process` are now guarded by a `typeof` check.
+- [#32294](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/32294) [`e0460d5d989`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0460d5d989) - Usages of `process` are now guarded by a `typeof` check.
 
 ## 1.2.0
 
 ### Minor Changes
 
-- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- [#31206](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31206) [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
 
 ## 1.1.4
 
 ### Patch Changes
 
-- [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
+- [#31242](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31242) [`cfe48bb7ece`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cfe48bb7ece) - Internal change only. Replace usages of Inline/Stack with stable version from `@atlaskit/primitives`.
 
 ## 1.1.3
 
 ### Patch Changes
 
-- [`b6c5779d358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6c5779d358) - Internal changes only to restrict usage of `Box` from the primitives package.
+- [#31185](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/31185) [`b6c5779d358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b6c5779d358) - Internal changes only to restrict usage of `Box` from the primitives package.
 
 ## 1.1.2
 
@@ -92,13 +98,13 @@
 
 ### Patch Changes
 
-- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+- [#29390](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/29390) [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
 
 ## 1.1.0
 
 ### Minor Changes
 
-- [`fce52a022f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fce52a022f5) - Adds typography tokens to @atlaskit/heading.
+- [#28493](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/28493) [`fce52a022f5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fce52a022f5) - Adds typography tokens to @atlaskit/heading.
 
 ## 1.0.4
 
@@ -116,7 +122,7 @@
 
 ### Patch Changes
 
-- [`95fdae34c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95fdae34c94) - Revert experimental change to `@compiled/react` from `@emotion/react`.
+- [#27341](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27341) [`95fdae34c94`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95fdae34c94) - Revert experimental change to `@compiled/react` from `@emotion/react`.
 
 ## 1.0.1
 
@@ -128,7 +134,7 @@
 
 ### Major Changes
 
-- [`7d92ed50264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d92ed50264) - [ux] This package is still considered to be in an experimental state and is discouraged for use in production. The major is to simplify consumption and versioning in product.
+- [#27238](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/27238) [`7d92ed50264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d92ed50264) - [ux] This package is still considered to be in an experimental state and is discouraged for use in production. The major is to simplify consumption and versioning in product.
 
   Other changes:
 
@@ -139,38 +145,38 @@
 
 ### Patch Changes
 
-- [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
+- [#26488](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/26488) [`bc989043572`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc989043572) - Internal changes to apply spacing tokens. This should be a no-op change.
 
 ## 0.1.17
 
 ### Patch Changes
 
-- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+- [#24874](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24874) [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
 
 ## 0.1.16
 
 ### Patch Changes
 
-- [`30b11aab9fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30b11aab9fb) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+- [#24004](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24004) [`30b11aab9fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30b11aab9fb) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
 - Updated dependencies
 
 ## 0.1.15
 
 ### Patch Changes
 
-- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+- [#24492](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/24492) [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
 
 ## 0.1.14
 
 ### Patch Changes
 
-- [`47b01007f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47b01007f27) - Introduces color prop with values default and inverse.
+- [#23381](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/23381) [`47b01007f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47b01007f27) - Introduces color prop with values default and inverse.
 
 ## 0.1.13
 
 ### Patch Changes
 
-- [`354050b68da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354050b68da) - Revert font size calculations to raw pixels.
+- [#22642](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/22642) [`354050b68da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/354050b68da) - Revert font size calculations to raw pixels.
 
 ## 0.1.12
 
@@ -182,7 +188,7 @@
 
 ### Patch Changes
 
-- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- [#20650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/20650) [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
 
 ## 0.1.10
 
@@ -206,7 +212,7 @@
 
 ### Patch Changes
 
-- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- [#16752](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/16752) [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
 - Updated dependencies
 
 ## 0.1.6
@@ -219,7 +225,7 @@
 
 ### Patch Changes
 
-- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- [#15998](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/15998) [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
 - Updated dependencies
 
 ## 0.1.4
@@ -244,7 +250,7 @@
 
 ### Patch Changes
 
-- [`d7a9a4ff7ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7a9a4ff7ec) - Instrumented heading with the new theming package, `@atlaskit/tokens`.
+- [#13864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/13864) [`d7a9a4ff7ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7a9a4ff7ec) - Instrumented heading 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.
@@ -254,7 +260,7 @@
 
 ### Minor Changes
 
-- [`ee15e59ba60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee15e59ba60) - This is the initial release of the Heading package. Typography styles have been duplicated from the `@atlaskit/theme` package as standalone components.
+- [#12837](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/12837) [`ee15e59ba60`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee15e59ba60) - This is the initial release of the Heading package. Typography styles have been duplicated from the `@atlaskit/theme` package as standalone components.
 
 ### Patch Changes
 

package/dist/cjs/heading-context.js

@@ -8,15 +8,22 @@ exports.useHeadingElement = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var HeadingContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+// Allows support for heading levels 1-9 via aria-level
+
+var HeadingLevelContext = /*#__PURE__*/(0, _react.createContext)(0);
+
+/**
+ * @internal
+ * @returns The current heading level context.
+ */
 var useHeadingElement = function useHeadingElement() {
-  return Math.min((0, _react.useContext)(HeadingContext) || 0, 6);
+  return (0, _react.useContext)(HeadingLevelContext);
 };
 exports.useHeadingElement = useHeadingElement;
 /**
- * __Heading context__
+ * __Heading level provider__
  *
- * The HeadingContext
+ * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx
@@ -29,14 +36,14 @@ exports.useHeadingElement = useHeadingElement;
  * </HeadingContext>
  * ```
  */
-var HeadingContextProvider = function HeadingContextProvider(_ref) {
+var HeadingLevelContextProvider = function HeadingLevelContextProvider(_ref) {
   var children = _ref.children,
     value = _ref.value;
   var parentHeadingLevel = useHeadingElement();
   var headingLevel = parentHeadingLevel + 1;
-  return /*#__PURE__*/_react.default.createElement(HeadingContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(HeadingLevelContext.Provider, {
     value: value || headingLevel
   }, children);
 };
-var _default = HeadingContextProvider;
+var _default = HeadingLevelContextProvider;
 exports.default = _default;

package/dist/cjs/heading.js

@@ -1,13 +1,17 @@
 "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 _react = require("@emotion/react");
 var _headingContext = require("./heading-context");
+var _heading = _interopRequireDefault(require("./heading.temp"));
+var _excluded = ["level", "variant"];
 /** @jsx jsx */
-
 // https://atlassian.design/foundations/typography
 var levelMap = {
   h900: 'h1',
@@ -22,9 +26,8 @@ var levelMap = {
   h100: 'div'
 };
 var headingResetStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-0, 0px)",
-  color: "var(--ds-text, #172B4D)"
+  color: "var(--ds-text, #172B4D)",
+  marginBlock: "var(--ds-space-0, 0px)"
 });
 var h900Styles = (0, _react.css)({
   fontSize: "var(--ds-font-size-600, 35px)",
@@ -121,18 +124,27 @@ var Heading = function Heading(_ref) {
    * 2. inferred a11y level
    * 3. default final fallback
    */
-  var Markup = as || hLevel && "h".concat(hLevel) || levelMap[level];
+  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[level];
   var isSubtleHeading = level === 'h200' || level === 'h100';
   return (0, _react.jsx)(Markup, {
     id: id,
-    "data-testid": testId
-    // @ts-ignore
-    // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
-    ,
-    css: [headingResetStyles,
-    // This can be refactored when @compiled supports style maps
-    level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
   }, children);
 };
-var _default = Heading;
+var _default = function _default(_ref2) {
+  var level = _ref2.level,
+    variant = _ref2.variant,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  return level ?
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  (0, _react.jsx)(Heading, (0, _extends2.default)({
+    level: level
+  }, props)) :
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  (0, _react.jsx)(_heading.default, (0, _extends2.default)({
+    variant: variant
+  }, props));
+};
 exports.default = _default;

package/dist/cjs/heading.temp.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _headingContext = require("./heading-context");
+/** @jsx jsx */
+
+// https://atlassian.design/foundations/typography
+var levelMap = {
+  xxlarge: 'h1',
+  xlarge: 'h2',
+  large: 'h3',
+  medium: 'h4',
+  small: 'h5',
+  xsmall: 'h6',
+  xxsmall: 'div'
+};
+var headingResetStyles = (0, _react.css)({
+  color: "var(--ds-text, #172B4D)",
+  letterSpacing: 'normal',
+  marginBlock: 0,
+  textTransform: 'none'
+});
+var inverseStyles = (0, _react.css)({
+  color: "var(--ds-text-inverse, #FFF)"
+});
+
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxlarge">XXL</Heading>
+ * );
+ * ```
+ */
+var Heading = function Heading(_ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    id = _ref.id,
+    testId = _ref.testId,
+    as = _ref.as,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color;
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+  var hLevel = (0, _headingContext.useHeadingElement)();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+  var Markup = as || hLevel && (hLevel > 6 ? 'div' : "h".concat(hLevel)) || levelMap[variant];
+  return (0, _react.jsx)(Markup, {
+    id: id,
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
+  }, children);
+};
+
+/**
+ * @codegenStart
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
+ */
+var headingVariantStylesMap = {
+  large: (0, _react.css)({
+    font: "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))"
+  }),
+  medium: (0, _react.css)({
+    font: "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))"
+  }),
+  small: (0, _react.css)({
+    font: "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))"
+  }),
+  xlarge: (0, _react.css)({
+    font: "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))"
+  }),
+  xsmall: (0, _react.css)({
+    font: "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))"
+  }),
+  xxlarge: (0, _react.css)({
+    font: "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))"
+  }),
+  xxsmall: (0, _react.css)({
+    font: "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
+  })
+};
+/**
+ * @codegenEnd
+ */
+var _default = Heading;
+exports.default = _default;

package/dist/es2019/heading-context.js

@@ -1,12 +1,20 @@
 import React, { createContext, useContext } from 'react';
-const HeadingContext = /*#__PURE__*/createContext(undefined);
+
+// Allows support for heading levels 1-9 via aria-level
+
+const HeadingLevelContext = /*#__PURE__*/createContext(0);
+
+/**
+ * @internal
+ * @returns The current heading level context.
+ */
 export const useHeadingElement = () => {
-  return Math.min(useContext(HeadingContext) || 0, 6);
+  return useContext(HeadingLevelContext);
 };
 /**
- * __Heading context__
+ * __Heading level provider__
  *
- * The HeadingContext
+ * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx
@@ -19,14 +27,14 @@ export const useHeadingElement = () => {
  * </HeadingContext>
  * ```
  */
-const HeadingContextProvider = ({
+const HeadingLevelContextProvider = ({
   children,
   value
 }) => {
   const parentHeadingLevel = useHeadingElement();
   const headingLevel = parentHeadingLevel + 1;
-  return /*#__PURE__*/React.createElement(HeadingContext.Provider, {
+  return /*#__PURE__*/React.createElement(HeadingLevelContext.Provider, {
     value: value || headingLevel
   }, children);
 };
-export default HeadingContextProvider;
+export default HeadingLevelContextProvider;

package/dist/es2019/heading.js

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/react';
 import { useHeadingElement } from './heading-context';
+import NewHeading from './heading.temp';
 // https://atlassian.design/foundations/typography
 const levelMap = {
   h900: 'h1',
@@ -16,9 +17,8 @@ const levelMap = {
   h100: 'div'
 };
 const headingResetStyles = css({
-  marginTop: "var(--ds-space-0, 0px)",
-  marginBottom: "var(--ds-space-0, 0px)",
-  color: "var(--ds-text, #172B4D)"
+  color: "var(--ds-text, #172B4D)",
+  marginBlock: "var(--ds-space-0, 0px)"
 });
 const h900Styles = css({
   fontSize: "var(--ds-font-size-600, 35px)",
@@ -115,17 +115,27 @@ const Heading = ({
    * 2. inferred a11y level
    * 3. default final fallback
    */
-  const Markup = as || hLevel && `h${hLevel}` || levelMap[level];
+  const Markup = as || hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || levelMap[level];
   const isSubtleHeading = level === 'h200' || level === 'h100';
   return jsx(Markup, {
     id: id,
-    "data-testid": testId
-    // @ts-ignore
-    // Resolved by https://github.com/atlassian-labs/compiled/pull/1321
-    ,
-    css: [headingResetStyles,
-    // This can be refactored when @compiled supports style maps
-    level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, level === 'h100' && h100Styles, level === 'h200' && h200Styles, level === 'h300' && h300Styles, level === 'h400' && h400Styles, level === 'h500' && h500Styles, level === 'h600' && h600Styles, level === 'h700' && h700Styles, level === 'h800' && h800Styles, level === 'h900' && h900Styles, color === 'inverse' && inverseStyles, color === 'default' && isSubtleHeading && subtlestStyles]
   }, children);
 };
-export default Heading;
+export default (({
+  level,
+  variant,
+  ...props
+}) => {
+  return level ?
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  jsx(Heading, _extends({
+    level: level
+  }, props)) :
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  jsx(NewHeading, _extends({
+    variant: variant
+  }, props));
+});

package/dist/es2019/heading.temp.js

@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { useHeadingElement } from './heading-context';
+// https://atlassian.design/foundations/typography
+const levelMap = {
+  xxlarge: 'h1',
+  xlarge: 'h2',
+  large: 'h3',
+  medium: 'h4',
+  small: 'h5',
+  xsmall: 'h6',
+  xxsmall: 'div'
+};
+const headingResetStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  letterSpacing: 'normal',
+  marginBlock: 0,
+  textTransform: 'none'
+});
+const inverseStyles = css({
+  color: "var(--ds-text-inverse, #FFF)"
+});
+
+/**
+ * __Heading__
+ *
+ * A heading is a typography component used to display text in different sizes and formats.
+ *
+ * @example
+ *
+ * ```jsx
+ * import Heading from '@atlaskit/heading';
+ *
+ * const HeadingXXL = () => (
+ *   <Heading level="xxlarge">XXL</Heading>
+ * );
+ * ```
+ */
+const Heading = ({
+  children,
+  variant,
+  id,
+  testId,
+  as,
+  color = 'default'
+}) => {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
+    throw new Error('`as` prop should be a string.');
+  }
+  const hLevel = useHeadingElement();
+  /**
+   * Order here is important, we for now apply
+   * 1. user choice
+   * 2. inferred a11y level
+   * 3. default final fallback
+   */
+  const Markup = as || hLevel && (hLevel > 6 ? 'div' : `h${hLevel}`) || levelMap[variant];
+  return jsx(Markup, {
+    id: id,
+    "data-testid": testId,
+    role: Markup === 'div' ? 'heading' : undefined,
+    css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
+  }, children);
+};
+
+/**
+ * @codegenStart
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
+ */
+const headingVariantStylesMap = {
+  large: css({
+    font: "var(--ds-font-heading-lg, normal 500 24px/28px var(--ds-font-family-heading))"
+  }),
+  medium: css({
+    font: "var(--ds-font-heading-md, normal 500 20px/24px var(--ds-font-family-heading))"
+  }),
+  small: css({
+    font: "var(--ds-font-heading-sm, normal 600 16px/20px var(--ds-font-family-heading))"
+  }),
+  xlarge: css({
+    font: "var(--ds-font-heading-xl, normal 600 29px/32px var(--ds-font-family-heading))"
+  }),
+  xsmall: css({
+    font: "var(--ds-font-heading-xs, normal 600 14px/16px var(--ds-font-family-heading))"
+  }),
+  xxlarge: css({
+    font: "var(--ds-font-heading-xxl, normal 500 35px/40px var(--ds-font-family-heading))"
+  }),
+  xxsmall: css({
+    font: "var(--ds-font-heading-xxs, normal 600 12px/16px var(--ds-font-family-heading))"
+  })
+};
+/**
+ * @codegenEnd
+ */
+
+export default Heading;