@atlaskit/heading 2.2.0 → 2.3.0

package/dist/cjs/heading.partial.js

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.headingColorStylesMap = exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
 var _headingContext = require("./heading-context");
 /** @jsx jsx */
 
@@ -20,14 +21,22 @@ var sizeTagMap = {
   xxsmall: 'h6'
 };
 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)"
-});
+var useColor = function useColor(colorProp) {
+  var surface = (0, _primitives.UNSAFE_useSurface)();
+
+  /**
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (_primitives.UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
+    return _primitives.UNSAFE_inverseColorMap[surface];
+  }
+  return colorProp || 'color.text';
+};
 
 /**
  * __Heading__
@@ -46,8 +55,7 @@ var Heading = function Heading(_ref) {
     id = _ref.id,
     testId = _ref.testId,
     as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
+    colorProp = _ref.color;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
@@ -60,18 +68,32 @@ var Heading = function Heading(_ref) {
     inferredElement = _useHeading2[1];
   var Component = as || inferredElement;
   var needsAriaRole = Component === 'div' && hLevel;
+  var color = useColor(colorProp);
   return (0, _react.jsx)(Component, {
     id: id,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, size && headingSizeStylesMap[size], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css
+var headingColorStylesMap = exports.headingColorStylesMap = {
+  'color.text': (0, _react.css)({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'color.text.inverse': (0, _react.css)({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  'color.text.warning.inverse': (0, _react.css)({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  })
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/es2019/heading.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
@@ -142,7 +143,6 @@ const OldHeading = ({
  */
 const Heading = ({
   level,
-  size,
   ...props
 }) => {
   return level ?
@@ -151,8 +151,6 @@ const Heading = ({
     level: level
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(NewHeading, _extends({
-    size: size
-  }, props));
+  jsx(NewHeading, props);
 };
 export default Heading;

package/dist/es2019/heading.partial.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
 import { useHeading } from './heading-context';
 const sizeTagMap = {
   xxlarge: 'h1',
@@ -11,14 +12,22 @@ const sizeTagMap = {
   xxsmall: 'h6'
 };
 const headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
   letterSpacing: 'normal',
   marginBlock: 0,
   textTransform: 'none'
 });
-const inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
+const useColor = colorProp => {
+  const surface = UNSAFE_useSurface();
+
+  /**
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
+    return UNSAFE_inverseColorMap[surface];
+  }
+  return colorProp || 'color.text';
+};
 
 /**
  * __Heading__
@@ -37,7 +46,7 @@ const Heading = ({
   id,
   testId,
   as,
-  color = 'default'
+  color: colorProp
 }) => {
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
@@ -48,18 +57,32 @@ const Heading = ({
   const [hLevel, inferredElement] = useHeading(sizeTagMap[size]);
   const Component = as || inferredElement;
   const needsAriaRole = Component === 'div' && hLevel;
+  const color = useColor(colorProp);
   return jsx(Component, {
     id: id,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, size && headingSizeStylesMap[size], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css
+export const headingColorStylesMap = {
+  'color.text': css({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'color.text.inverse': css({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  'color.text.warning.inverse': css({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  })
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/esm/heading.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["level", "size"];
+var _excluded = ["level"];
+/* eslint-disable @atlaskit/design-system/no-deprecated-design-token-usage */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
@@ -148,7 +149,6 @@ var OldHeading = function OldHeading(_ref) {
  */
 var Heading = function Heading(_ref2) {
   var level = _ref2.level,
-    size = _ref2.size,
     props = _objectWithoutProperties(_ref2, _excluded);
   return level ?
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
@@ -156,8 +156,6 @@ var Heading = function Heading(_ref2) {
     level: level
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content, @repo/internal/react/no-unsafe-spread-props
-  jsx(NewHeading, _extends({
-    size: size
-  }, props));
+  jsx(NewHeading, props);
 };
 export default Heading;

package/dist/esm/heading.partial.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { UNSAFE_inverseColorMap, UNSAFE_useSurface } from '@atlaskit/primitives';
 import { useHeading } from './heading-context';
 var sizeTagMap = {
   xxlarge: 'h1',
@@ -12,14 +13,22 @@ var sizeTagMap = {
   xxsmall: 'h6'
 };
 var headingResetStyles = css({
-  color: "var(--ds-text, #172B4D)",
   letterSpacing: 'normal',
   marginBlock: 0,
   textTransform: 'none'
 });
-var inverseStyles = css({
-  color: "var(--ds-text-inverse, #FFF)"
-});
+var useColor = function useColor(colorProp) {
+  var surface = UNSAFE_useSurface();
+
+  /**
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (UNSAFE_inverseColorMap.hasOwnProperty(surface)) {
+    return UNSAFE_inverseColorMap[surface];
+  }
+  return colorProp || 'color.text';
+};
 
 /**
  * __Heading__
@@ -38,8 +47,7 @@ var Heading = function Heading(_ref) {
     id = _ref.id,
     testId = _ref.testId,
     as = _ref.as,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
+    colorProp = _ref.color;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && as && typeof as !== 'string') {
     throw new Error('`as` prop should be a string.');
   }
@@ -52,18 +60,32 @@ var Heading = function Heading(_ref) {
     inferredElement = _useHeading2[1];
   var Component = as || inferredElement;
   var needsAriaRole = Component === 'div' && hLevel;
+  var color = useColor(colorProp);
   return jsx(Component, {
     id: id,
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, size && headingSizeStylesMap[size], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, size && headingSizeStylesMap[size], headingColorStylesMap[color]]
   }, children);
 };
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css
+export var headingColorStylesMap = {
+  'color.text': css({
+    color: "var(--ds-text, #172B4D)"
+  }),
+  'color.text.inverse': css({
+    color: "var(--ds-text-inverse, #FFFFFF)"
+  }),
+  'color.text.warning.inverse': css({
+    color: "var(--ds-text-warning-inverse, #172B4D)"
+  })
+};
+
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */

package/dist/types/heading.d.ts

@@ -20,5 +20,5 @@ import type { HeadingProps } from './types';
  * );
  * ```
  */
-declare const Heading: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
 export default Heading;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import type { HeadingProps } from './types';
+import { jsx, type SerializedStyles } from '@emotion/react';
+import type { HeadingColor, NewHeadingProps } from './types';
 /**
  * __Heading__
  *
@@ -12,21 +12,22 @@ import type { HeadingProps } from './types';
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ children, size, id, testId, as, color: colorProp, }: NewHeadingProps) => jsx.JSX.Element;
+export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 declare const headingSizeStylesMap: {
-    xxlarge: import("@emotion/react").SerializedStyles;
-    xlarge: import("@emotion/react").SerializedStyles;
-    large: import("@emotion/react").SerializedStyles;
-    medium: import("@emotion/react").SerializedStyles;
-    small: import("@emotion/react").SerializedStyles;
-    xsmall: import("@emotion/react").SerializedStyles;
-    xxsmall: import("@emotion/react").SerializedStyles;
+    xxlarge: SerializedStyles;
+    xlarge: SerializedStyles;
+    large: SerializedStyles;
+    medium: SerializedStyles;
+    small: SerializedStyles;
+    xsmall: SerializedStyles;
+    xxsmall: SerializedStyles;
 };
 export type HeadingSize = keyof typeof headingSizeStylesMap;
 /**

package/dist/types/types.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { HeadingSize } from './heading.partial';
-export type HeadingProps = {
+import { type ReactNode } from 'react';
+import { type HeadingSize } from './heading.partial';
+type HeadingPropsBase = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -19,12 +19,13 @@ export type HeadingProps = {
      * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
      */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+};
+export type OldHeadingProps = HeadingPropsBase & {
     /**
      * Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
      * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
-} & ({
     /**
      * @private
      * @deprecated Use `size` prop instead.
@@ -52,8 +53,15 @@ export type HeadingProps = {
      * Heading size. Use instead of the deprecated `level` prop.
      */
     size?: never;
-} | {
-    level?: never;
+};
+export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
+export type NewHeadingProps = HeadingPropsBase & {
+    /**
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `color.text`.
+     */
+    color?: HeadingColor;
     /**
      * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
      * Use instead of the deprecated `level` prop.
@@ -61,4 +69,7 @@ export type HeadingProps = {
      * This prop will only work if the typography tokens theme is applied on the page.
      */
     size: HeadingSize;
-});
+    level?: never;
+};
+export type HeadingProps = OldHeadingProps | NewHeadingProps;
+export {};

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

@@ -20,5 +20,5 @@ import type { HeadingProps } from './types';
  * );
  * ```
  */
-declare const Heading: ({ level, size, ...props }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ level, ...props }: HeadingProps) => jsx.JSX.Element;
 export default Heading;

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import type { HeadingProps } from './types';
+import { jsx, type SerializedStyles } from '@emotion/react';
+import type { HeadingColor, NewHeadingProps } from './types';
 /**
  * __Heading__
  *
@@ -12,21 +12,22 @@ import type { HeadingProps } from './types';
  * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, size, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ children, size, id, testId, as, color: colorProp, }: NewHeadingProps) => jsx.JSX.Element;
+export declare const headingColorStylesMap: Record<HeadingColor, SerializedStyles>;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
+ * @codegen <<SignedSource::d7d7bb136aa9b7935c15f8e85d0916d7>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 declare const headingSizeStylesMap: {
-    xxlarge: import("@emotion/react").SerializedStyles;
-    xlarge: import("@emotion/react").SerializedStyles;
-    large: import("@emotion/react").SerializedStyles;
-    medium: import("@emotion/react").SerializedStyles;
-    small: import("@emotion/react").SerializedStyles;
-    xsmall: import("@emotion/react").SerializedStyles;
-    xxsmall: import("@emotion/react").SerializedStyles;
+    xxlarge: SerializedStyles;
+    xlarge: SerializedStyles;
+    large: SerializedStyles;
+    medium: SerializedStyles;
+    small: SerializedStyles;
+    xsmall: SerializedStyles;
+    xxsmall: SerializedStyles;
 };
 export type HeadingSize = keyof typeof headingSizeStylesMap;
 /**

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { HeadingSize } from './heading.partial';
-export type HeadingProps = {
+import { type ReactNode } from 'react';
+import { type HeadingSize } from './heading.partial';
+type HeadingPropsBase = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -19,12 +19,13 @@ export type HeadingProps = {
      * Allows the component to be rendered as the specified DOM element, overriding a default element set by `level` prop.
      */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
+};
+export type OldHeadingProps = HeadingPropsBase & {
     /**
      * Text color of the heading. Use `"inverse"` option for a light text color over a dark background.
      * Defaults to `"default"`.
      */
     color?: 'inverse' | 'default';
-} & ({
     /**
      * @private
      * @deprecated Use `size` prop instead.
@@ -52,8 +53,15 @@ export type HeadingProps = {
      * Heading size. Use instead of the deprecated `level` prop.
      */
     size?: never;
-} | {
-    level?: never;
+};
+export type HeadingColor = 'color.text' | 'color.text.inverse' | 'color.text.warning.inverse';
+export type NewHeadingProps = HeadingPropsBase & {
+    /**
+     * Token representing text color with a built-in fallback value.
+     * Will apply inverse text color automatically if placed within a Box with bold background color.
+     * Defaults to `color.text`.
+     */
+    color?: HeadingColor;
     /**
      * Heading size. This value is detached from the specific heading level applied to allow for more flexibility.
      * Use instead of the deprecated `level` prop.
@@ -61,4 +69,7 @@ export type HeadingProps = {
      * This prop will only work if the typography tokens theme is applied on the page.
      */
     size: HeadingSize;
-});
+    level?: never;
+};
+export type HeadingProps = OldHeadingProps | NewHeadingProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,8 @@
     "codegen": "ts-node ./scripts/codegen.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/primitives": "^6.0.0",
+    "@atlaskit/tokens": "^1.45.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -42,14 +43,15 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/formatting": "*",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^13.1.0",
     "@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",
     "jscodeshift": "^0.13.0",
-    "prettier": "^2.8.0",
     "react-dom": "^16.8.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.4.2"

package/scripts/codegen.tsx

@@ -1,17 +1,15 @@
 import { writeFileSync } from 'fs';
 import { join } from 'path';
 
-import prettier from 'prettier';
-import parserTypeScript from 'prettier/parser-typescript';
-
+import format from '@af/formatting/sync';
 // eslint-disable-next-line import/order
 import { createPartialSignedArtifact } from '@atlassian/codegen';
 
 // eslint-disable-next-line import/order
 import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 
-const constructTokenFunctionCall = (tokenName: string, fallback: string) => {
-  return `token('${tokenName}', '${fallback}')`;
+const constructTokenFunctionCall = (tokenName: string) => {
+  return `token('${tokenName}')`;
 };
 
 const headingTokens = tokens
@@ -24,7 +22,7 @@ const removeVerbosity = (name: string): string => {
 
 export const createTypographyStylesFromTemplate = () => {
   return (
-    prettier.format(
+    format(
       `
 const headingSizeStylesMap = {
   ${headingTokens
@@ -32,20 +30,12 @@ const headingSizeStylesMap = {
       return `
         '${removeVerbosity(
           token.name,
-        )}': css({ font: ${constructTokenFunctionCall(
-        token.cleanName,
-        token.value,
-      )} })
+        )}': css({ font: ${constructTokenFunctionCall(token.cleanName)} })
       `.trim();
     })
     .join(',\n\t')}
 };`,
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-        parser: 'typescript',
-        plugins: [parserTypeScript],
-      },
+      'typescript',
     ) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
   );
 };

package/codemods/__tests__/1.6.0-level-to-size.tsx

@@ -1,80 +0,0 @@
-jest.autoMockOff();
-
-import transformer from '../1.6.0-level-to-size';
-
-import { check } from './_framework';
-
-check({
-  transformer,
-  it: 'should replace level with size only on Heading component',
-  original: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading level="h700" as="h3">hello</Heading>
-        <SomethingElse level="h700">still here</SomethingElse>
-      </>;
-    }
-  `,
-  expected: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="large" as="h3">hello</Heading>
-        <SomethingElse level="h700">still here</SomethingElse>
-      </>;
-    }
-  `,
-});
-
-check({
-  transformer,
-  it: 'should do nothing if level is h200 or h100',
-  original: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading level="h300">hello</Heading>
-        <Heading level="h200">hello</Heading>
-        <Heading level="h100">hello</Heading>
-      </>;
-    }
-  `,
-  expected: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="xxsmall">hello</Heading>
-        <Heading level="h200">hello</Heading>
-        <Heading level="h100">hello</Heading>
-      </>;
-    }
-  `,
-});
-
-check({
-  transformer,
-  it: 'should do nothing if size already exists',
-  original: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="large">hello</Heading>
-      </>;
-    }
-  `,
-  expected: `
-    import Heading from '@atlaskit/heading';
-
-    function App() {
-      return <>
-        <Heading size="large">hello</Heading>
-      </>;
-    }
-  `,
-});