From 66ffa8515bf6a58c6a240ceff245d70f98e1274e Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 20 Oct 2024 11:32:12 +0900
Subject: [PATCH] Refactor help modal with wordpress components

---
 src/settings/global-settings/help-modal.tsx | 126 +++++++++++---------
 src/settings/global-settings/style.scss     |  13 --
 2 files changed, 72 insertions(+), 67 deletions(-)

diff --git a/src/settings/global-settings/help-modal.tsx b/src/settings/global-settings/help-modal.tsx
index 50aae51..3029a24 100644
--- a/src/settings/global-settings/help-modal.tsx
+++ b/src/settings/global-settings/help-modal.tsx
@@ -8,7 +8,13 @@ import type { Dispatch, SetStateAction } from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
-import { Modal, ExternalLink } from '@wordpress/components';
+import {
+	Modal,
+	ExternalLink,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+	__experimentalHeading as Heading,
+} from '@wordpress/components';
 
 type Props = {
 	setIsHelpModalOpen: Dispatch< SetStateAction< boolean > >;
@@ -21,59 +27,71 @@ export default function HelpModal( { setIsHelpModalOpen }: Props ) {
 			className="ftb-global-help-modal"
 			onRequestClose={ () => setIsHelpModalOpen( false ) }
 		>
-			<h2>{ __( 'About default table style', 'flexible-table-block' ) }</h2>
-			<p>
-				{ __(
-					'Flexible Table Block is a block that allows you to create tables in various styles. First of all, it is recommended to set the default style of the table from "Global Setting".',
-					'flexible-table-block'
-				) }
-			</p>
-			<h2>{ __( 'Select multiple cells', 'flexible-table-block' ) }</h2>
-			<p>
-				{ createInterpolateElement(
-					__(
-						'Hold <code>Ctrl</code> key to select multiple cells or hold <code>Shift</code> key to select the range. Selecting multiple cells is used to merge cells or to change styles of multiple cells.',
-						'flexible-table-block'
-					),
-					{ code: <code /> }
-				) }
-			</p>
-			<h2>{ __( 'About scroll table', 'flexible-table-block' ) }</h2>
-			<p>
-				{ __(
-					'If table scrolling is enabled, set "Table Width" or "Table Min Width" larger than the content width.',
-					'flexible-table-block'
-				) }
-			</p>
-			<h2>{ __( 'About accessibility', 'flexible-table-block' ) }</h2>
-			<p>
-				{ createInterpolateElement(
-					__(
-						'You can tell screenreaders exactly by properly defining <code>id</code>, <code>headers</code>, and <code>scope</code> attributes for each cell.',
-						'flexible-table-block'
-					),
-					{ code: <code /> }
-				) }
-			</p>
-			<p>
-				{ createInterpolateElement(
-					__(
-						'Refer to <Link>this page</Link> for the specifications of each attribute.',
-						'flexible-table-block'
-					),
-					{
-						Link: (
-							// @ts-ignore
-							<ExternalLink
-								href={ __(
-									'https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced',
-									'flexible-table-block'
-								) }
-							/>
-						),
-					}
-				) }
-			</p>
+			<VStack spacing={ 4 }>
+				<VStack>
+					<Heading level={ 5 }>
+						{ __( 'About default table style', 'flexible-table-block' ) }
+					</Heading>
+					<Text as="p">
+						{ __(
+							'Flexible Table Block is a block that allows you to create tables in various styles. First of all, it is recommended to set the default style of the table from "Global Setting".',
+							'flexible-table-block'
+						) }
+					</Text>
+				</VStack>
+				<VStack>
+					<Heading level={ 5 }>{ __( 'Select multiple cells', 'flexible-table-block' ) }</Heading>
+					<Text as="p">
+						{ createInterpolateElement(
+							__(
+								'Hold <code>Ctrl</code> key to select multiple cells or hold <code>Shift</code> key to select the range. Selecting multiple cells is used to merge cells or to change styles of multiple cells.',
+								'flexible-table-block'
+							),
+							{ code: <code /> }
+						) }
+					</Text>
+				</VStack>
+				<VStack>
+					<Heading level={ 5 }>{ __( 'About scroll table', 'flexible-table-block' ) }</Heading>
+					<Text as="p">
+						{ __(
+							'If table scrolling is enabled, set "Table Width" or "Table Min Width" larger than the content width.',
+							'flexible-table-block'
+						) }
+					</Text>
+				</VStack>
+				<VStack>
+					<Heading level={ 5 }>{ __( 'About accessibility', 'flexible-table-block' ) }</Heading>
+					<Text as="p">
+						{ createInterpolateElement(
+							__(
+								'You can tell screenreaders exactly by properly defining <code>id</code>, <code>headers</code>, and <code>scope</code> attributes for each cell.',
+								'flexible-table-block'
+							),
+							{ code: <code /> }
+						) }
+					</Text>
+					<Text as="p">
+						{ createInterpolateElement(
+							__(
+								'Refer to <Link>this page</Link> for the specifications of each attribute.',
+								'flexible-table-block'
+							),
+							{
+								Link: (
+									// @ts-ignore
+									<ExternalLink
+										href={ __(
+											'https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced',
+											'flexible-table-block'
+										) }
+									/>
+								),
+							}
+						) }
+					</Text>
+				</VStack>
+			</VStack>
 		</Modal>
 	);
 }
diff --git a/src/settings/global-settings/style.scss b/src/settings/global-settings/style.scss
index 9e133eb..7a5d084 100644
--- a/src/settings/global-settings/style.scss
+++ b/src/settings/global-settings/style.scss
@@ -216,17 +216,4 @@
 
 .ftb-global-help-modal {
 	max-width: 600px;
-
-	h2 {
-		margin: 1.5em 0 0.5em;
-		font-size: 0.9rem;
-	}
-
-	p {
-		margin: 0 0 1em;
-	}
-
-	hr {
-		margin: 1.5em 0;
-	}
 }