@atlaskit/heading 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/heading
 
+## 1.8.0
+
+### Minor Changes
+
+- [#80528](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80528) [`8877e9b57d55`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8877e9b57d55) - Added `size` prop which will replace `variant` prop in the next major version.
+
+## 1.7.1
+
+### Patch Changes
+
+- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - Update input border color token and width to meet 3:1 color contrast
+- Updated dependencies
+
 ## 1.7.0
 
 ### Minor Changes

package/codemods/{1.6.0-level-to-variant.tsx → 1.6.0-level-to-size.tsx}

@@ -17,12 +17,12 @@ export default function transformer(
     return;
   }
 
-  replaceLevelWithVariant(j, base, headingSpecifier);
+  replaceLevelWithSize(j, base, headingSpecifier);
 
   return base.toSource();
 }
 
-const levelToVariantMap = {
+const levelToSizeMap = {
   h900: 'xxlarge',
   h800: 'xlarge',
   h700: 'large',
@@ -35,7 +35,7 @@ const levelToVariantMap = {
   // h100: 'xxsmall',
 };
 
-function replaceLevelWithVariant(
+function replaceLevelWithSize(
   j: core.JSCodeshift,
   source: ReturnType<typeof j>,
   specifier: string,
@@ -47,13 +47,11 @@ function replaceLevelWithVariant(
         const attrValue = j(attr).nodes()[0].value;
         if (attrValue.type === 'StringLiteral') {
           const replacementValue =
-            levelToVariantMap[
-              attrValue.value as keyof typeof levelToVariantMap
-            ];
+            levelToSizeMap[attrValue.value as keyof typeof levelToSizeMap];
           if (replacementValue) {
             j(attr).replaceWith(
               j.jsxAttribute(
-                j.jsxIdentifier('variant'),
+                j.jsxIdentifier('size'),
                 j.stringLiteral(replacementValue),
               ),
             );

package/codemods/__tests__/{next-level-to-variant.tsx → 1.6.0-level-to-size.tsx}

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

package/dist/cjs/heading.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _headingContext = require("./heading-context");
 var _heading = _interopRequireDefault(require("./heading.partial"));
-var _excluded = ["level", "variant"];
+var _excluded = ["level", "size", "variant"];
 /** @jsx jsx */
 // https://atlassian.design/foundations/typography
 var levelMap = {
@@ -135,6 +135,7 @@ var Heading = function Heading(_ref) {
 };
 var _default = exports.default = function _default(_ref2) {
   var level = _ref2.level,
+    size = _ref2.size,
     variant = _ref2.variant,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return level ?
@@ -144,6 +145,7 @@ var _default = exports.default = function _default(_ref2) {
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content
   (0, _react.jsx)(_heading.default, (0, _extends2.default)({
-    variant: variant
+    variant: variant,
+    size: size
   }, props));
 };

package/dist/cjs/heading.partial.js

@@ -10,8 +10,7 @@ var _react = require("@emotion/react");
 var _headingContext = require("./heading-context");
 /** @jsx jsx */
 
-// https://atlassian.design/foundations/typography
-var variantTagMap = {
+var sizeTagMap = {
   xxlarge: 'h1',
   xlarge: 'h1',
   large: 'h2',
@@ -38,11 +37,12 @@ var inverseStyles = (0, _react.css)({
  * @example
  *
  * ```jsx
- * <Heading variant="xxlarge">Page title</Heading>
+ * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
 var Heading = function Heading(_ref) {
   var children = _ref.children,
+    size = _ref.size,
     variant = _ref.variant,
     id = _ref.id,
     testId = _ref.testId,
@@ -53,9 +53,12 @@ var Heading = function Heading(_ref) {
     throw new Error('`as` prop should be a string.');
   }
 
-  // Technically variant can be undefined here due to how the types work.
-  // Once removing the level prop this assertion can be removed since variant will be a required prop.
-  var _useHeading = (0, _headingContext.useHeading)(variantTagMap[variant]),
+  // TODO: Temporary to move variant over to size
+  var localSize = variant || size;
+
+  // Technically size can be undefined here due to how the types work.
+  // Once removing the level prop this assertion can be removed since size will be a required prop.
+  var _useHeading = (0, _headingContext.useHeading)(sizeTagMap[localSize]),
     _useHeading2 = (0, _slicedToArray2.default)(_useHeading, 2),
     hLevel = _useHeading2[0],
     inferredElement = _useHeading2[1];
@@ -66,17 +69,17 @@ var Heading = function Heading(_ref) {
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, localSize && headingSizeStylesMap[localSize], color === 'inverse' && inverseStyles]
   }, children);
 };
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e846dd958c335ee435433cfe1a6ffe77>>
+ * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
-var headingVariantStylesMap = {
+var headingSizeStylesMap = {
   xxlarge: (0, _react.css)({
     font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),

package/dist/es2019/heading.js

@@ -122,6 +122,7 @@ const Heading = ({
 };
 export default (({
   level,
+  size,
   variant,
   ...props
 }) => {
@@ -132,6 +133,7 @@ export default (({
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content
   jsx(NewHeading, _extends({
-    variant: variant
+    variant: variant,
+    size: size
   }, props));
 });

package/dist/es2019/heading.partial.js

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
-// https://atlassian.design/foundations/typography
-const variantTagMap = {
+const sizeTagMap = {
   xxlarge: 'h1',
   xlarge: 'h1',
   large: 'h2',
@@ -29,11 +28,12 @@ const inverseStyles = css({
  * @example
  *
  * ```jsx
- * <Heading variant="xxlarge">Page title</Heading>
+ * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
 const Heading = ({
   children,
+  size,
   variant,
   id,
   testId,
@@ -44,9 +44,12 @@ const Heading = ({
     throw new Error('`as` prop should be a string.');
   }
 
-  // Technically variant can be undefined here due to how the types work.
-  // Once removing the level prop this assertion can be removed since variant will be a required prop.
-  const [hLevel, inferredElement] = useHeading(variantTagMap[variant]);
+  // TODO: Temporary to move variant over to size
+  const localSize = variant || size;
+
+  // Technically size can be undefined here due to how the types work.
+  // Once removing the level prop this assertion can be removed since size will be a required prop.
+  const [hLevel, inferredElement] = useHeading(sizeTagMap[localSize]);
   const Component = as || inferredElement;
   const needsAriaRole = Component === 'div' && hLevel;
   return jsx(Component, {
@@ -54,17 +57,17 @@ const Heading = ({
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, localSize && headingSizeStylesMap[localSize], color === 'inverse' && inverseStyles]
   }, children);
 };
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e846dd958c335ee435433cfe1a6ffe77>>
+ * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
-const headingVariantStylesMap = {
+const headingSizeStylesMap = {
   xxlarge: css({
     font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),

package/dist/esm/heading.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["level", "variant"];
+var _excluded = ["level", "size", "variant"];
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
@@ -128,6 +128,7 @@ var Heading = function Heading(_ref) {
 };
 export default (function (_ref2) {
   var level = _ref2.level,
+    size = _ref2.size,
     variant = _ref2.variant,
     props = _objectWithoutProperties(_ref2, _excluded);
   return level ?
@@ -137,6 +138,7 @@ export default (function (_ref2) {
   }, props)) :
   // eslint-disable-next-line jsx-a11y/heading-has-content
   jsx(NewHeading, _extends({
-    variant: variant
+    variant: variant,
+    size: size
   }, props));
 });

package/dist/esm/heading.partial.js

@@ -2,8 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useHeading } from './heading-context';
-// https://atlassian.design/foundations/typography
-var variantTagMap = {
+var sizeTagMap = {
   xxlarge: 'h1',
   xlarge: 'h1',
   large: 'h2',
@@ -30,11 +29,12 @@ var inverseStyles = css({
  * @example
  *
  * ```jsx
- * <Heading variant="xxlarge">Page title</Heading>
+ * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
 var Heading = function Heading(_ref) {
   var children = _ref.children,
+    size = _ref.size,
     variant = _ref.variant,
     id = _ref.id,
     testId = _ref.testId,
@@ -45,9 +45,12 @@ var Heading = function Heading(_ref) {
     throw new Error('`as` prop should be a string.');
   }
 
-  // Technically variant can be undefined here due to how the types work.
-  // Once removing the level prop this assertion can be removed since variant will be a required prop.
-  var _useHeading = useHeading(variantTagMap[variant]),
+  // TODO: Temporary to move variant over to size
+  var localSize = variant || size;
+
+  // Technically size can be undefined here due to how the types work.
+  // Once removing the level prop this assertion can be removed since size will be a required prop.
+  var _useHeading = useHeading(sizeTagMap[localSize]),
     _useHeading2 = _slicedToArray(_useHeading, 2),
     hLevel = _useHeading2[0],
     inferredElement = _useHeading2[1];
@@ -58,17 +61,17 @@ var Heading = function Heading(_ref) {
     "data-testid": testId,
     role: needsAriaRole ? 'heading' : undefined,
     "aria-level": needsAriaRole ? hLevel : undefined,
-    css: [headingResetStyles, variant && headingVariantStylesMap[variant], color === 'inverse' && inverseStyles]
+    css: [headingResetStyles, localSize && headingSizeStylesMap[localSize], color === 'inverse' && inverseStyles]
   }, children);
 };
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e846dd958c335ee435433cfe1a6ffe77>>
+ * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
-var headingVariantStylesMap = {
+var headingSizeStylesMap = {
   xxlarge: css({
     font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }),

package/dist/types/heading.d.ts

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

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

@@ -9,17 +9,17 @@ import type { HeadingProps } from './types';
  * @example
  *
  * ```jsx
- * <Heading variant="xxlarge">Page title</Heading>
+ * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ children, size, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e846dd958c335ee435433cfe1a6ffe77>>
+ * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
-declare const headingVariantStylesMap: {
+declare const headingSizeStylesMap: {
     xxlarge: import("@emotion/react").SerializedStyles;
     xlarge: import("@emotion/react").SerializedStyles;
     large: import("@emotion/react").SerializedStyles;
@@ -28,7 +28,7 @@ declare const headingVariantStylesMap: {
     xsmall: import("@emotion/react").SerializedStyles;
     xxsmall: import("@emotion/react").SerializedStyles;
 };
-export type HeadingVariant = keyof typeof headingVariantStylesMap;
+export type HeadingSize = keyof typeof headingSizeStylesMap;
 /**
  * @codegenEnd
  */

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { HeadingVariant } from './heading.partial';
+import { HeadingSize } from './heading.partial';
 export type HeadingProps = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -27,7 +27,7 @@ export type HeadingProps = {
 } & ({
     /**
      * @private
-     * @deprecated Use `variant` prop instead.
+     * @deprecated Use `size` prop instead.
      * The heading level as defined by the Atlassian Design [typography foundations](/foundations/typography/). The `level` prop affects the actual HTML element rendered in the DOM:
      * @example
      * ```js
@@ -49,17 +49,21 @@ export type HeadingProps = {
      */
     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.
+     * Heading size. Use instead of the deprecated `level` prop.
      */
+    size?: never;
     variant?: never;
 } | {
     level?: never;
     /**
-     * Heading style variant. This style is detached from the specific heading level applied to allow for more flexibility.
+     * Heading size. This value 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.
+     * This prop will only work if the typography tokens theme is applied on the page.
+     */
+    size?: HeadingSize;
+    /**
+     * @deprecated. Use `size` instead.
      */
-    variant: HeadingVariant;
+    variant?: HeadingSize;
 });

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

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

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

@@ -9,17 +9,17 @@ import type { HeadingProps } from './types';
  * @example
  *
  * ```jsx
- * <Heading variant="xxlarge">Page title</Heading>
+ * <Heading size="xxlarge">Page title</Heading>
  * ```
  */
-declare const Heading: ({ children, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
+declare const Heading: ({ children, size, variant, id, testId, as, color, }: HeadingProps) => jsx.JSX.Element;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e846dd958c335ee435433cfe1a6ffe77>>
+ * @codegen <<SignedSource::057c0fe2015c2071afe3d694c5afcc0e>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
-declare const headingVariantStylesMap: {
+declare const headingSizeStylesMap: {
     xxlarge: import("@emotion/react").SerializedStyles;
     xlarge: import("@emotion/react").SerializedStyles;
     large: import("@emotion/react").SerializedStyles;
@@ -28,7 +28,7 @@ declare const headingVariantStylesMap: {
     xsmall: import("@emotion/react").SerializedStyles;
     xxsmall: import("@emotion/react").SerializedStyles;
 };
-export type HeadingVariant = keyof typeof headingVariantStylesMap;
+export type HeadingSize = keyof typeof headingSizeStylesMap;
 /**
  * @codegenEnd
  */

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { HeadingVariant } from './heading.partial';
+import { HeadingSize } from './heading.partial';
 export type HeadingProps = {
     /**
      * A `testId` prop is provided for specified elements, which is a unique
@@ -27,7 +27,7 @@ export type HeadingProps = {
 } & ({
     /**
      * @private
-     * @deprecated Use `variant` prop instead.
+     * @deprecated Use `size` prop instead.
      * The heading level as defined by the Atlassian Design [typography foundations](/foundations/typography/). The `level` prop affects the actual HTML element rendered in the DOM:
      * @example
      * ```js
@@ -49,17 +49,21 @@ export type HeadingProps = {
      */
     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.
+     * Heading size. Use instead of the deprecated `level` prop.
      */
+    size?: never;
     variant?: never;
 } | {
     level?: never;
     /**
-     * Heading style variant. This style is detached from the specific heading level applied to allow for more flexibility.
+     * Heading size. This value 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.
+     * This prop will only work if the typography tokens theme is applied on the page.
+     */
+    size?: HeadingSize;
+    /**
+     * @deprecated. Use `size` instead.
      */
-    variant: HeadingVariant;
+    variant?: HeadingSize;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "codegen": "ts-node ./scripts/codegen.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.40.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/scripts/codegen.tsx

@@ -26,7 +26,7 @@ export const createTypographyStylesFromTemplate = () => {
   return (
     prettier.format(
       `
-const headingVariantStylesMap = {
+const headingSizeStylesMap = {
   ${headingTokens
     .map(token => {
       return `
@@ -46,7 +46,7 @@ const headingVariantStylesMap = {
         parser: 'typescript',
         plugins: [parserTypeScript],
       },
-    ) + `\nexport type HeadingVariant = keyof typeof headingVariantStylesMap;\n`
+    ) + `\nexport type HeadingSize = keyof typeof headingSizeStylesMap;\n`
   );
 };