ResponsiveWrapper: Convert to TypeScript

packages/components/CHANGELOG.md

@@ -43,6 +43,7 @@
 -   `useBaseField`: Convert to TypeScript ([#45712](https://github.com/WordPress/gutenberg/pull/45712)).
 -   `Dashicon`: Convert to TypeScript ([#45924](https://github.com/WordPress/gutenberg/pull/45924)).
 -   `PaletteEdit`: add follow up changelog for #45681 and tests [#46095](https://github.com/WordPress/gutenberg/pull/46095).
+-   `ResponsiveWrapper`: Convert to TypeScript ([#46480](https://github.com/WordPress/gutenberg/pull/46480)).
 -   `AlignmentMatrixControl`: Convert to TypeScript ([#46162](https://github.com/WordPress/gutenberg/pull/46162)).
 
 ### Documentation

packages/components/src/responsive-wrapper/README.md

@@ -1,5 +1,7 @@
 # ResponsiveWrapper
 
+A wrapper component that maintains its aspect ratio when resized.
+
 ## Usage
 
 ```jsx
@@ -14,3 +16,30 @@ const MyResponsiveWrapper = () => (
 	</ResponsiveWrapper>
 );
 ```
+
+## Props
+
+### `children`: `React.ReactElement`
+
+The element to wrap.
+
+-   Required: Yes
+
+### `isInline`: `boolean`
+
+If true, the wrapper will be `span` instead of `div`.
+
+-   Required: No
+-   Default: `false`
+
+### `naturalHeight`: `number`
+
+The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes
+
+### `naturalWidth`: `number`
+
+The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+
+-   Required: Yes

packages/components/src/responsive-wrapper/index.js → packages/components/src/responsive-wrapper/index.tsx

@@ -9,20 +9,41 @@ import classnames from 'classnames';
 import { cloneElement, Children } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveWrapperProps } from './types';
+
+/**
+ * A wrapper component that maintains its aspect ratio when resized.
+ *
+ * ```jsx
+ * import { ResponsiveWrapper } from '@wordpress/components';
+ *
+ * const MyResponsiveWrapper = () => (
+ * 	<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
+ * 		<img
+ * 			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+ * 			alt="WordPress"
+ * 		/>
+ * 	</ResponsiveWrapper>
+ * );
+ * ```
+ */
 function ResponsiveWrapper( {
 	naturalWidth,
 	naturalHeight,
 	children,
 	isInline = false,
-} ) {
+}: ResponsiveWrapperProps ) {
 	const [ containerResizeListener, { width: containerWidth } ] =
 		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}
 	const imageStyle = {
 		paddingBottom:
-			naturalWidth < containerWidth
+			naturalWidth < ( containerWidth ?? 0 )
 				? naturalHeight
 				: ( naturalHeight / naturalWidth ) * 100 + '%',
 	};

packages/components/src/responsive-wrapper/stories/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResponsiveWrapper from '..';
+
+const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+	component: ResponsiveWrapper,
+	title: 'Components/ResponsiveWrapper',
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ResponsiveWrapper > = ( args ) => (
+	<ResponsiveWrapper { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	naturalWidth: 2000,
+	naturalHeight: 680,
+	children: (
+		<img
+			src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
+			alt="WordPress"
+		/>
+	),
+};

packages/components/src/responsive-wrapper/types.ts

@@ -0,0 +1,20 @@
+export type ResponsiveWrapperProps = {
+	/**
+	 * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalWidth: number;
+	/**
+	 * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
+	 */
+	naturalHeight: number;
+	/**
+	 * The element to wrap.
+	 */
+	children: React.ReactElement;
+	/**
+	 * If true, the wrapper will be `span` instead of `div`.
+	 *
+	 * @default false
+	 */
+	isInline?: boolean;
+};

packages/components/tsconfig.json

@@ -62,7 +62,6 @@
 		"src/palette-edit",
 		"src/panel",
 		"src/query-controls",
-		"src/responsive-wrapper",
 		"src/sandbox",
 		"src/toolbar",
 		"src/toolbar-button",