Merge branch 'trunk' into ts-sandbox

WordPress · Jan 7, 2023 · 6b3b3e2 · 6b3b3e2
2 parents 4cd035b + 47a5fc3
commit 6b3b3e2
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -7,6 +7,7 @@
 -   `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)).
 -   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
 -   `SandBox`: Convert to TypeScript ([#46478](https://github.com/WordPress/gutenberg/pull/46478)).
+-   `ResponsiveWrapper`: Convert to TypeScript ([#46480](https://github.com/WordPress/gutenberg/pull/46480)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/responsive-wrapper/README.md b/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
diff --git a/...omponents/src/responsive-wrapper/index.js → ...mponents/src/responsive-wrapper/index.tsx b/...omponents/src/responsive-wrapper/index.js → ...mponents/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 + '%',
 	};

diff --git a/packages/components/src/responsive-wrapper/stories/index.tsx b/packages/components/src/responsive-wrapper/stories/index.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ResponsiveWrapper from '..';
+
+const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+	component: ResponsiveWrapper,
+	title: 'Components/ResponsiveWrapper',
+	argTypes: {
+		children: { control: { type: null } },
+	},
+	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"
+		/>
+	),
+};
diff --git a/packages/components/src/responsive-wrapper/types.ts b/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;
+};
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -62,7 +62,6 @@
 		"src/palette-edit",
 		"src/panel",
 		"src/query-controls",
-		"src/responsive-wrapper",
 		"src/toolbar",
 		"src/toolbar-button",
 		"src/toolbar-context",