From 4474d01bc88d7ee4edadbf3227852e43e141fb56 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 20 Sep 2021 16:44:33 +0200
Subject: [PATCH] `Heading`: refactor away from the `createComponent` function,
 fix TS errors (#34921)

---
 packages/components/src/heading/component.ts  | 25 -------------
 packages/components/src/heading/component.tsx | 37 +++++++++++++++++++
 packages/components/src/heading/hook.ts       |  9 +++--
 3 files changed, 42 insertions(+), 29 deletions(-)
 delete mode 100644 packages/components/src/heading/component.ts
 create mode 100644 packages/components/src/heading/component.tsx

diff --git a/packages/components/src/heading/component.ts b/packages/components/src/heading/component.ts
deleted file mode 100644
index 70a572171c4e6d..00000000000000
--- a/packages/components/src/heading/component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Internal dependencies
- */
-import { createComponent } from '../ui/utils';
-import { useHeading } from './hook';
-
-/**
- * `Heading` renders headings and titles using the library's typography system.
- *
- * @example
- * ```jsx
- * import { Heading } from `@wordpress/components/ui`
- *
- * function Example() {
- *   return <Heading>Code is Poetry</Heading>;
- * }
- * ```
- */
-const Heading = createComponent( {
-	as: 'h1',
-	useHook: useHeading,
-	name: 'Heading',
-} );
-
-export default Heading;
diff --git a/packages/components/src/heading/component.tsx b/packages/components/src/heading/component.tsx
new file mode 100644
index 00000000000000..b83a96e3b0c8e1
--- /dev/null
+++ b/packages/components/src/heading/component.tsx
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../ui/context';
+import { View } from '../view';
+import { useHeading, HeadingProps } from './hook';
+
+function Heading(
+	props: WordPressComponentProps< HeadingProps, 'h1' >,
+	forwardedRef: Ref< any >
+) {
+	const headerProps = useHeading( props );
+
+	return <View { ...headerProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `Heading` renders headings and titles using the library's typography system.
+ *
+ * @example
+ * ```jsx
+ * import { Heading } from `@wordpress/components`
+ *
+ * function Example() {
+ *   return <Heading>Code is Poetry</Heading>;
+ * }
+ * ```
+ */
+const ConnectedHeading = contextConnect( Heading, 'Heading' );
+
+export default ConnectedHeading;
diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts
index 238e4e244c0f14..28f07bfcd5c3ac 100644
--- a/packages/components/src/heading/hook.ts
+++ b/packages/components/src/heading/hook.ts
@@ -25,7 +25,7 @@ export interface HeadingProps extends Omit< TextProps, 'size' > {
 	/**
 	 * `Heading` will typically render the sizes `1`, `2`, `3`, `4`, `5`, or `6`, which map to `h1`-`h6`.
 	 *
-	 * @default 3
+	 * @default 2
 	 *
 	 * @example
 	 * ```jsx
@@ -56,16 +56,17 @@ export function useHeading(
 		'Heading'
 	);
 
-	const as = asProp || `h${ level }`;
+	const as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;
 
 	const a11yProps: {
 		role?: string;
-		'aria-level'?: string | number;
+		'aria-level'?: number;
 	} = {};
 	if ( typeof as === 'string' && as[ 0 ] !== 'h' ) {
 		// if not a semantic `h` element, add a11y props:
 		a11yProps.role = 'heading';
-		a11yProps[ 'aria-level' ] = level;
+		a11yProps[ 'aria-level' ] =
+			typeof level === 'string' ? parseInt( level ) : level;
 	}
 
 	const textProps = useText( {