@atlaskit/heading 1.3.7 → 1.4.0

package/dist/esm/heading-context.js

@@ -1,12 +1,20 @@
 import React, { createContext, useContext } from 'react';
-var HeadingContext = /*#__PURE__*/createContext(undefined);
+
+// Allows support for heading levels 1-9 via aria-level
+
+var HeadingLevelContext = /*#__PURE__*/createContext(0);
+
+/**
+ * @internal
+ * @returns The current heading level context.
+ */
 export var useHeadingElement = function 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,13 +27,13 @@ export var useHeadingElement = function 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.createElement(HeadingContext.Provider, {
+  return /*#__PURE__*/React.createElement(HeadingLevelContext.Provider, {
     value: value || headingLevel
   }, children);
 };
-export default HeadingContextProvider;
+export default HeadingLevelContextProvider;

package/dist/esm/heading.js

@@ -1,7 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["level", "variant"];
 /** @jsx jsx */
-
 import { css, jsx } from '@emotion/react';
 import { useHeadingElement } from './heading-context';
+import NewHeading from './heading.temp';
 // https://atlassian.design/foundations/typography
 var levelMap = {
   h900: 'h1',
@@ -16,9 +19,8 @@ var levelMap = {
   h100: 'div'
 };
 var 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)"
 });
 var h900Styles = css({
   fontSize: "var(--ds-font-size-600, 35px)",
@@ -115,17 +117,26 @@ 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 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 (function (_ref2) {
+  var level = _ref2.level,
+    variant = _ref2.variant,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  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/esm/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
+var levelMap = {
+  xxlarge: 'h1',
+  xlarge: 'h2',
+  large: 'h3',
+  medium: 'h4',
+  small: 'h5',
+  xsmall: 'h6',
+  xxsmall: 'div'
+};
+var headingResetStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  letterSpacing: 'normal',
+  marginBlock: 0,
+  textTransform: 'none'
+});
+var 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>
+ * );
+ * ```
+ */
+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 = 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 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: 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;

package/dist/types/heading-context.d.ts

@@ -1,17 +1,24 @@
-import { FC, ReactNode } from 'react';
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
+import { ReactNode } from 'react';
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/**
+ * @internal
+ * @returns The current heading level context.
+ */
 export declare const useHeadingElement: () => HeadingElement;
-export interface HeadingContextProps {
+export interface HeadingLevelContextProps {
     /**
      * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
      */
     value?: HeadingElement;
+    /**
+     * Semantic heirarchy of content below the heading context.
+     */
     children: ReactNode;
 }
 /**
- * __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
@@ -24,5 +31,5 @@ export interface HeadingContextProps {
  * </HeadingContext>
  * ```
  */
-declare const HeadingContextProvider: FC<HeadingContextProps>;
-export default HeadingContextProvider;
+declare const HeadingLevelContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
+export default HeadingLevelContextProvider;

package/dist/types/heading.d.ts

@@ -1,20 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { jsx } from '@emotion/react';
 import type { HeadingProps } from './types';
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-declare const Heading: FC<HeadingProps>;
-export default Heading;
+declare const _default: ({ level, variant, ...props }: HeadingProps) => jsx.JSX.Element;
+export default _default;

package/dist/types/heading.temp.d.ts

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { HeadingProps } from './types';
+/**
+ * __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>
+ * );
+ * ```
+ */
+declare const Heading: ({ children, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+/**
+ * @codegenStart
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
+ */
+declare const headingVariantStylesMap: {
+    large: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    xlarge: import("@emotion/react").SerializedStyles;
+    xsmall: import("@emotion/react").SerializedStyles;
+    xxlarge: import("@emotion/react").SerializedStyles;
+    xxsmall: import("@emotion/react").SerializedStyles;
+};
+export type HeadingVariant = keyof typeof headingVariantStylesMap;
+/**
+ * @codegenEnd
+ */
+export default Heading;

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { HeadingVariant } from './heading.temp';
 export type HeadingProps = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -10,29 +11,6 @@ export type HeadingProps = {
      * The text of the heading.
      */
     children: ReactNode;
-    /**
-     The headling level as defined by the Atlasian Design [typography foundations](/foundations/typography/).
-     
-     The `level` prop affects the actual HTML element rendered in the DOM:
-     
-     ```
-     const levelMap = {
-        h900: 'h1',
-        h800: 'h1',
-        h700: 'h2',
-        h600: 'h3',
-        h500: 'h4',
-        h400: 'h5',
-        h300: 'h6',
-        h200: 'div',
-        h100: 'div',
-     }
-     ```
-     
-     It's important to note that the final DOM may be impacted by the parent heading level context because of inferred accessibility level correction.
-     Therefore, it is recommended to check the final DOM to confirm the actual rendered HTML element.
-     */
-    level: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
     /**
      * Unique identifier for the heading DOM element.
      */
@@ -46,4 +24,42 @@ export type HeadingProps = {
      * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
-};
+} & ({
+    /**
+     * @private
+     * @deprecated Use `variant` prop instead.
+     * The headling level as defined by the Atlasian Design [typography foundations](/foundations/typography/). The `level` prop affects the actual HTML element rendered in the DOM:
+     * @example
+     * ```js
+     * const levelMap = {
+     *    h900: 'h1',
+     *    h800: 'h1',
+     *    h700: 'h2',
+     *    h600: 'h3',
+     *    h500: 'h4',
+     *    h400: 'h5',
+     *    h300: 'h6',
+     *    h200: 'div',
+     *    h100: 'div',
+     * };
+     * ```
+     *
+     * It's important to note that the final DOM may be impacted by the parent heading level context because of inferred accessibility level correction.
+     * Therefore, it is recommended to check the final DOM to confirm the actual rendered HTML element.
+     */
+    level?: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
+    /**
+     * Heading style variant. This style is detached from the specific heading level applied to allow for more flexibility.
+     * Use instead of the deprecated `level` prop.
+     */
+    variant?: never;
+} | {
+    level?: never;
+    /**
+     * Heading style variant. This style is detached from the specific heading level applied to allow for more flexibility.
+     * Use instead of the deprecated `level` prop.
+     *
+     * This prop will only work if the typography theme is applied.
+     */
+    variant?: HeadingVariant;
+});

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

@@ -1,17 +1,24 @@
-import { FC, ReactNode } from 'react';
-type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6;
+import { ReactNode } from 'react';
+type HeadingElement = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+/**
+ * @internal
+ * @returns The current heading level context.
+ */
 export declare const useHeadingElement: () => HeadingElement;
-export interface HeadingContextProps {
+export interface HeadingLevelContextProps {
     /**
      * Optional - only apply this value if the intent is to reset the heading context outside the normal content flow, for example inside a `section`.
      */
     value?: HeadingElement;
+    /**
+     * Semantic heirarchy of content below the heading context.
+     */
     children: ReactNode;
 }
 /**
- * __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
@@ -24,5 +31,5 @@ export interface HeadingContextProps {
  * </HeadingContext>
  * ```
  */
-declare const HeadingContextProvider: FC<HeadingContextProps>;
-export default HeadingContextProvider;
+declare const HeadingLevelContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
+export default HeadingLevelContextProvider;

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

@@ -1,20 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { jsx } from '@emotion/react';
 import type { HeadingProps } from './types';
-/**
- * __Heading__
- *
- * A heading is a typography component used to display text in different sizes and formats.
- *
- * @example
- *
- * ```jsx
- * import Heading from '@atlaskit/heading';
- *
- * const H100 = () => (
- *   <Heading level="h100">h100</Heading>
- * );
- * ```
- */
-declare const Heading: FC<HeadingProps>;
-export default Heading;
+declare const _default: ({ level, variant, ...props }: HeadingProps) => jsx.JSX.Element;
+export default _default;

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

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { HeadingProps } from './types';
+/**
+ * __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>
+ * );
+ * ```
+ */
+declare const Heading: ({ children, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+/**
+ * @codegenStart
+ * @codegenId typography
+ * @codegenCommand yarn workspace @atlaskit/heading codegen
+ */
+declare const headingVariantStylesMap: {
+    large: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    xlarge: import("@emotion/react").SerializedStyles;
+    xsmall: import("@emotion/react").SerializedStyles;
+    xxlarge: import("@emotion/react").SerializedStyles;
+    xxsmall: import("@emotion/react").SerializedStyles;
+};
+export type HeadingVariant = keyof typeof headingVariantStylesMap;
+/**
+ * @codegenEnd
+ */
+export default Heading;

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { HeadingVariant } from './heading.temp';
 export type HeadingProps = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -10,29 +11,6 @@ export type HeadingProps = {
      * The text of the heading.
      */
     children: ReactNode;
-    /**
-     The headling level as defined by the Atlasian Design [typography foundations](/foundations/typography/).
-     
-     The `level` prop affects the actual HTML element rendered in the DOM:
-     
-     ```
-     const levelMap = {
-        h900: 'h1',
-        h800: 'h1',
-        h700: 'h2',
-        h600: 'h3',
-        h500: 'h4',
-        h400: 'h5',
-        h300: 'h6',
-        h200: 'div',
-        h100: 'div',
-     }
-     ```
-     
-     It's important to note that the final DOM may be impacted by the parent heading level context because of inferred accessibility level correction.
-     Therefore, it is recommended to check the final DOM to confirm the actual rendered HTML element.
-     */
-    level: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
     /**
      * Unique identifier for the heading DOM element.
      */
@@ -46,4 +24,42 @@ export type HeadingProps = {
      * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
-};
+} & ({
+    /**
+     * @private
+     * @deprecated Use `variant` prop instead.
+     * The headling level as defined by the Atlasian Design [typography foundations](/foundations/typography/). The `level` prop affects the actual HTML element rendered in the DOM:
+     * @example
+     * ```js
+     * const levelMap = {
+     *    h900: 'h1',
+     *    h800: 'h1',
+     *    h700: 'h2',
+     *    h600: 'h3',
+     *    h500: 'h4',
+     *    h400: 'h5',
+     *    h300: 'h6',
+     *    h200: 'div',
+     *    h100: 'div',
+     * };
+     * ```
+     *
+     * It's important to note that the final DOM may be impacted by the parent heading level context because of inferred accessibility level correction.
+     * Therefore, it is recommended to check the final DOM to confirm the actual rendered HTML element.
+     */
+    level?: 'h900' | 'h800' | 'h700' | 'h600' | 'h500' | 'h400' | 'h300' | 'h200' | 'h100';
+    /**
+     * Heading style variant. This style is detached from the specific heading level applied to allow for more flexibility.
+     * Use instead of the deprecated `level` prop.
+     */
+    variant?: never;
+} | {
+    level?: never;
+    /**
+     * Heading style variant. This style is detached from the specific heading level applied to allow for more flexibility.
+     * Use instead of the deprecated `level` prop.
+     *
+     * This prop will only work if the typography theme is applied.
+     */
+    variant?: HeadingVariant;
+});

package/package.json

@@ -1,43 +1,38 @@
 {
   "name": "@atlaskit/heading",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
+    "productPushConsumption": [
+      "jira"
+    ],
     "releaseModel": "continuous",
     "website": {
       "name": "Heading",
       "category": "Components",
       "status": {
-        "type": "beta"
+        "type": "closed-beta"
       }
     }
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "sideEffects": false,
-  "atlaskit:src": "src/index.tsx",
-  "af:exports": {
-    ".": "./src/index.tsx"
+  "scripts": {
+    "codegen": "ts-node ./scripts/codegen.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -50,10 +45,12 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@atlassian/codegen": "^0.1.0",
     "@testing-library/react": "^12.1.5",
+    "prettier": "^2.8.0",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5",
-    "wait-for-expect": "^1.2.0"
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.5"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -75,6 +72,17 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
   "homepage": "https://atlassian.design/components/heading/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}