Tip: Covert component to TypeScript

packages/components/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 -   `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)).
 -   `TextHighlight`: Convert to TypeScript ([#41698](https://github.com/WordPress/gutenberg/pull/41698)).
+-   `Tip`: Convert to TypeScript ([#42262](https://github.com/WordPress/gutenberg/pull/42262)).
 -   `Scrollable`: Convert to TypeScript ([#42016](https://github.com/WordPress/gutenberg/pull/42016)).
 -   `Spacer`: Complete TypeScript migration ([#42013](https://github.com/WordPress/gutenberg/pull/42013)).
 -   `TreeSelect`: Refactor away from `_.repeat()` ([#42070](https://github.com/WordPress/gutenberg/pull/42070/)).

packages/components/src/tip/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, tip } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import type { TipProps } from './types';
+
+export function Tip( props: TipProps ) {
+	const { children } = props;
+
+	return (
+		<div className="components-tip">
+			<Icon icon={ tip } />
+			<p>{ children }</p>
+		</div>
+	);
+}
+
+export default Tip;

packages/components/src/tip/stories/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Tip from '..';
+
+const meta: ComponentMeta< typeof Tip > = {
+	component: Tip,
+	title: 'Components/Tip',
+	argTypes: {
+		children: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Tip > = ( args ) => {
+	return <Tip { ...args } />;
+};
+
+export const Default: ComponentStory< typeof Tip > = Template.bind( {} );
+Default.args = {
+	children: 'An example tip',
+};

packages/components/src/tip/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export type TipProps = {
+	/**
+	 * Children to render in the tip.
+	 */
+	children: ReactNode;
+};