🤖 Merge PR DefinitelyTyped#58077 Add Guide to @wordpress/components by …

…@sirbrillig * Add Guide to wordpress/components * Run Prettier * Add detailed deprecation message for children in Guide Co-authored-by: martin-badin <[email protected]> Co-authored-by: martin-badin <[email protected]>
martin-badin · Feb 23, 2022 · 4011d2a · 4011d2a
1 parent e8327ff
commit 4011d2a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/types/wordpress__components/guide/index.d.ts b/types/wordpress__components/guide/index.d.ts
@@ -0,0 +1,23 @@
+import type { ComponentType, ReactNode } from 'react';
+
+interface GuidePage {
+    content: ReactNode;
+    image?: ReactNode;
+}
+
+interface GuideProps {
+    className?: string;
+    contentLabel?: string;
+    finishButtonText?: ReactNode;
+    onFinish?: () => void;
+    pages?: GuidePage[];
+
+    /**
+     * @deprecated use the `pages` prop instead
+     * @since 5.5
+     */
+    children?: ReactNode;
+}
+
+declare const Guide: ComponentType<GuideProps>;
+export default Guide;
diff --git a/types/wordpress__components/index.d.ts b/types/wordpress__components/index.d.ts
@@ -48,6 +48,7 @@ export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
+export { default as Guide } from './guide';
 export { default as Icon } from './icon';
 export { default as IconButton } from './icon-button';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';

diff --git a/types/wordpress__components/wordpress__components-tests.tsx b/types/wordpress__components/wordpress__components-tests.tsx
@@ -404,6 +404,23 @@ const buttonGroupRef = createRef<HTMLDivElement>();
     onChange={tokens => console.log(tokens)}
 />;
 
+//
+// guide
+//
+<C.Guide
+    finishButtonText="Finish"
+    contentLabel="Guide title"
+    onFinish={ () => {
+        console.log('finished');
+    } }
+    pages={ [
+        {
+            content: <h1>My Page</h1>,
+            image: <h1>My Page Image</h1>,
+        }
+    ] }
+/>;
+
 //
 // icon
 //