From 4011d2a310d6906d71f2521ee14aff240cb1cd51 Mon Sep 17 00:00:00 2001
From: Payton Swick <payton@foolord.com>
Date: Mon, 10 Jan 2022 13:56:48 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#58077=20Add=20Guid?=
 =?UTF-8?q?e=20to=20@wordpress/components=20by=20@sirbrillig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add Guide to wordpress/components

* Run Prettier

* Add detailed deprecation message for children in Guide

Co-authored-by: martin-badin <martin.badin@gmail.com>

Co-authored-by: martin-badin <martin.badin@gmail.com>
---
 types/wordpress__components/guide/index.d.ts  | 23 +++++++++++++++++++
 types/wordpress__components/index.d.ts        |  1 +
 .../wordpress__components-tests.tsx           | 17 ++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 types/wordpress__components/guide/index.d.ts

diff --git a/types/wordpress__components/guide/index.d.ts b/types/wordpress__components/guide/index.d.ts
new file mode 100644
index 000000000000000..ebb175df7d7568a
--- /dev/null
+++ 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
index bbb46e277f89c31..be6de75b13a48a0 100644
--- 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
index cc4548f8ded49a9..5ec7f9f7b8d6c6b 100644
--- 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
 //