Migrate Section component to TS (#36298)

* Convert to ts

* Add changelog

* Fix style

* Remove propTypes

* Remove unused import

* Only allow false

* Update packages/js/components/src/section/section.tsx

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

* Update packages/js/components/src/section/section.tsx

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

* Update packages/js/components/src/section/section.tsx

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com>

packages/js/components/changelog/dev-migrate-section-component-to-ts

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Migrate Section component to TS

packages/js/components/src/section/header.tsx

@@ -15,7 +15,7 @@ import { Level } from './context';
  *
  * @type {HTMLElement}
  */
-export function H( props ) {
+export function H( props: React.HTMLAttributes< HTMLHeadingElement > ) {
 	const level = useContext( Level );
 
 	const Heading = 'h' + Math.min( level, 6 );

packages/js/components/src/section/section.js

@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-import { createElement } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { Level } from './context';
-
-/**
- * The section wrapper, used to indicate a sub-section (and change the header level context).
- *
- * @param {Object}                         props
- * @param {import('react').ComponentType=} props.component
- * @param {import('react').ReactNode}      props.children  Children to render in the tip.
- * @param {string=}                        props.className
- * @return {JSX.Element} -
- */
-export function Section( { component, children, ...props } ) {
-	const Component = component || 'div';
-	return (
-		<Level.Consumer>
-			{ ( level ) => (
-				<Level.Provider value={ level + 1 }>
-					{ component === false ? (
-						children
-					) : (
-						<Component { ...props }>{ children }</Component>
-					) }
-				</Level.Provider>
-			) }
-		</Level.Consumer>
-	);
-}
-
-Section.propTypes = {
-	/**
-	 * The wrapper component for this section. Optional, defaults to `div`. If passed false, no wrapper is used. Additional props
-	 * passed to Section are passed on to the component.
-	 */
-	component: PropTypes.oneOfType( [
-		PropTypes.func,
-		PropTypes.string,
-		PropTypes.bool,
-	] ),
-	/**
-	 * The children inside this section, rendered in the `component`. This increases the context level for the next heading used.
-	 */
-	children: PropTypes.node,
-	/**
-	 * Optional classname
-	 */
-	className: PropTypes.string,
-};

packages/js/components/src/section/section.tsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Level } from './context';
+
+type SectionProps = {
+	/** The wrapper component for this section. Optional, defaults to `div`. If passed false, no wrapper is used. Additional props passed to Section are passed on to the component. */
+	component?: React.ComponentType | string | false;
+	/** Optional classname */
+	className?: string;
+	/** The children inside this section, rendered in the `component`. This increases the context level for the next heading used. */
+	children: React.ReactNode;
+};
+
+/**
+ * The section wrapper, used to indicate a sub-section (and change the header level context).
+ */
+export const Section: React.VFC< SectionProps > = ( {
+	component,
+	children,
+	...props
+} ) => {
+	const Component = component || 'div';
+	return (
+		<Level.Consumer>
+			{ ( level ) => (
+				<Level.Provider value={ level + 1 }>
+					{ component === false ? (
+						children
+					) : (
+						<Component { ...props }>{ children }</Component>
+					) }
+				</Level.Provider>
+			) }
+		</Level.Consumer>
+	);
+};

packages/js/components/src/section/stories/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { H, Section } from '@woocommerce/components';
+import { createElement } from '@wordpress/element';
 
 export const Basic = () => (
 	<div>