@atlaskit/heading 1.4.3 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/heading
 
+## 1.4.4
+
+### Patch Changes
+
+- [#63526](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63526) [`cae958047771`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cae958047771) - Internal change to how typography tokens are imported. There is no expected behaviour change.
+- Updated dependencies
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/cjs/heading-context.js

@@ -35,7 +35,7 @@ var useHeading = exports.useHeading = function useHeading(fallback) {
 /**
  * __Heading level provider__
  *
- * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
+ * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx

package/dist/cjs/heading.partial.js

@@ -73,11 +73,17 @@ var Heading = function Heading(_ref) {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
+ * @codegen <<SignedSource::ea7494a514c27f0cf258be1e089043d0>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 var headingVariantStylesMap = {
+  xxlarge: (0, _react.css)({
+    font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
+  }),
+  xlarge: (0, _react.css)({
+    font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
+  }),
   large: (0, _react.css)({
     font: "var(--ds-font-heading-large, normal 500 24px/28px var(--ds-font-family-heading))"
   }),
@@ -87,15 +93,9 @@ var headingVariantStylesMap = {
   small: (0, _react.css)({
     font: "var(--ds-font-heading-small, normal 600 16px/20px var(--ds-font-family-heading))"
   }),
-  xlarge: (0, _react.css)({
-    font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
-  }),
   xsmall: (0, _react.css)({
     font: "var(--ds-font-heading-xsmall, normal 600 14px/16px var(--ds-font-family-heading))"
   }),
-  xxlarge: (0, _react.css)({
-    font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
-  }),
   xxsmall: (0, _react.css)({
     font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px var(--ds-font-family-heading))"
   })

package/dist/es2019/heading-context.js

@@ -27,7 +27,7 @@ export const useHeading = fallback => {
 /**
  * __Heading level provider__
  *
- * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
+ * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx

package/dist/es2019/heading.partial.js

@@ -61,11 +61,17 @@ const Heading = ({
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
+ * @codegen <<SignedSource::ea7494a514c27f0cf258be1e089043d0>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 const headingVariantStylesMap = {
+  xxlarge: css({
+    font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
+  }),
+  xlarge: css({
+    font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
+  }),
   large: css({
     font: "var(--ds-font-heading-large, normal 500 24px/28px var(--ds-font-family-heading))"
   }),
@@ -75,15 +81,9 @@ const headingVariantStylesMap = {
   small: css({
     font: "var(--ds-font-heading-small, normal 600 16px/20px var(--ds-font-family-heading))"
   }),
-  xlarge: css({
-    font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
-  }),
   xsmall: css({
     font: "var(--ds-font-heading-xsmall, normal 600 14px/16px var(--ds-font-family-heading))"
   }),
-  xxlarge: css({
-    font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
-  }),
   xxsmall: css({
     font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px var(--ds-font-family-heading))"
   })

package/dist/esm/heading-context.js

@@ -27,7 +27,7 @@ export var useHeading = function useHeading(fallback) {
 /**
  * __Heading level provider__
  *
- * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
+ * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx

package/dist/esm/heading.partial.js

@@ -65,11 +65,17 @@ var Heading = function Heading(_ref) {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::cabcd4e0313e10dd81733a6ffcdbc90f>>
+ * @codegen <<SignedSource::ea7494a514c27f0cf258be1e089043d0>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 var headingVariantStylesMap = {
+  xxlarge: css({
+    font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
+  }),
+  xlarge: css({
+    font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
+  }),
   large: css({
     font: "var(--ds-font-heading-large, normal 500 24px/28px var(--ds-font-family-heading))"
   }),
@@ -79,15 +85,9 @@ var headingVariantStylesMap = {
   small: css({
     font: "var(--ds-font-heading-small, normal 600 16px/20px var(--ds-font-family-heading))"
   }),
-  xlarge: css({
-    font: "var(--ds-font-heading-xlarge, normal 600 29px/32px var(--ds-font-family-heading))"
-  }),
   xsmall: css({
     font: "var(--ds-font-heading-xsmall, normal 600 14px/16px var(--ds-font-family-heading))"
   }),
-  xxlarge: css({
-    font: "var(--ds-font-heading-xxlarge, normal 500 35px/40px var(--ds-font-family-heading))"
-  }),
   xxsmall: css({
     font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px var(--ds-font-family-heading))"
   })

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

@@ -16,14 +16,14 @@ export interface HeadingLevelContextProps {
      */
     value?: HeadingLevel;
     /**
-     * Semantic heirarchy of content below the heading context.
+     * Semantic hierarchy of content below the heading context.
      */
     children: ReactNode;
 }
 /**
  * __Heading level provider__
  *
- * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
+ * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx

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

@@ -19,17 +19,17 @@ import type { HeadingProps } from './types';
 declare const Heading: ({ children, 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::cabcd4e0313e10dd81733a6ffcdbc90f>>
+ * @codegen <<SignedSource::ea7494a514c27f0cf258be1e089043d0>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 declare const headingVariantStylesMap: {
+    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;
-    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;

package/dist/types/types.d.ts

@@ -28,7 +28,7 @@ export type HeadingProps = {
     /**
      * @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:
+     * 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
      * const levelMap = {

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

@@ -19,14 +19,14 @@ export interface HeadingLevelContextProps {
      */
     value?: HeadingLevel;
     /**
-     * Semantic heirarchy of content below the heading context.
+     * Semantic hierarchy of content below the heading context.
      */
     children: ReactNode;
 }
 /**
  * __Heading level provider__
  *
- * The Heading level provider injectes the heading level to all `Heading` components below it in the component tree.
+ * The Heading level provider injects the heading level to all `Heading` components below it in the component tree.
  *
  * @example
  * ```tsx

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

@@ -19,17 +19,17 @@ import type { HeadingProps } from './types';
 declare const Heading: ({ children, 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::cabcd4e0313e10dd81733a6ffcdbc90f>>
+ * @codegen <<SignedSource::ea7494a514c27f0cf258be1e089043d0>>
  * @codegenId typography
  * @codegenCommand yarn workspace @atlaskit/heading codegen
  */
 declare const headingVariantStylesMap: {
+    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;
-    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;

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

@@ -28,7 +28,7 @@ export type HeadingProps = {
     /**
      * @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:
+     * 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
      * const levelMap = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/heading",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "A heading is a typography component used to display text in different sizes and formats.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
       "name": "Heading",
       "category": "Components",
       "status": {
-        "type": "closed-beta"
+        "type": "beta"
       }
     }
   },
@@ -32,7 +32,7 @@
     "codegen": "ts-node ./scripts/codegen.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -85,4 +85,4 @@
   },
   "homepage": "https://atlassian.design/components/heading/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/scripts/codegen.tsx

@@ -8,7 +8,7 @@ import parserTypeScript from 'prettier/parser-typescript';
 import { createPartialSignedArtifact } from '@atlassian/codegen';
 
 // eslint-disable-next-line import/order
-import { typography as tokens } from '@atlaskit/tokens/tokens-raw';
+import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
 
 const constructTokenFunctionCall = (tokenName: string, fallback: string) => {
   return `token('${tokenName}', '${fallback}')`;
@@ -28,7 +28,6 @@ export const createTypographyStylesFromTemplate = () => {
       `
 const headingVariantStylesMap = {
   ${headingTokens
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
     .map(token => {
       return `
         '${removeVerbosity(

package/tmp/api-report-tmp.d.ts

@@ -1,58 +0,0 @@
-## API Report File for "@atlaskit/heading"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { jsx } from '@emotion/react';
-import { ReactNode } from 'react';
-import { SerializedStyles } from '@emotion/react';
-
-// @public (undocumented)
-const _default: ({ level, variant, ...props }: HeadingProps) => jsx.JSX.Element;
-export default _default;
-
-// @public
-export const HeadingContextProvider: ({ children, value, }: HeadingLevelContextProps) => JSX.Element;
-
-// @public (undocumented)
-type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
-
-// @public (undocumented)
-interface HeadingLevelContextProps {
-    children: ReactNode;
-    value?: HeadingLevel;
-}
-
-// @public (undocumented)
-export type HeadingProps = {
-    testId?: string;
-    children: ReactNode;
-    id?: string;
-    as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
-    color?: 'default' | 'inverse';
-} & ({
-    level?: 'h100' | 'h200' | 'h300' | 'h400' | 'h500' | 'h600' | 'h700' | 'h800' | 'h900';
-    variant?: never;
-} | {
-    level?: never;
-    variant?: HeadingVariant;
-});
-
-// @public (undocumented)
-type HeadingVariant = keyof typeof headingVariantStylesMap;
-
-// @public
-const headingVariantStylesMap: {
-    large: SerializedStyles;
-    medium: SerializedStyles;
-    small: SerializedStyles;
-    xlarge: SerializedStyles;
-    xsmall: SerializedStyles;
-    xxlarge: SerializedStyles;
-    xxsmall: SerializedStyles;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```