Add HelpSectionTitle component

WordPress · May 13, 2022 · 61bb555 · 61bb555
1 parent d6f5639
commit 61bb555
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/packages/editor/src/components/editor-help/help-section-title.native.js b/packages/editor/src/components/editor-help/help-section-title.native.js
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const HelpSectionTitle = ( { children } ) => {
+	const helpSectionTitle = usePreferredColorSchemeStyle(
+		styles.helpSectionTitle,
+		styles.helpSectionTitleDark
+	);
+
+	return (
+		<View style={ styles.helpSectionTitleContainer }>
+			<Text style={ helpSectionTitle }>{ children }</Text>
+		</View>
+	);
+};
+
+export default HelpSectionTitle;
diff --git a/packages/editor/src/components/editor-help/index.native.js b/packages/editor/src/components/editor-help/index.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -17,7 +17,6 @@ import { __ } from '@wordpress/i18n';
 import { helpFilled, plusCircleFilled, trash, cog } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
 	requestContactCustomerSupport,
 	requestGotoCustomerSupportOptions,
@@ -35,7 +34,8 @@ import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
 import RemoveBlocks from './remove-blocks';
 import CustomizeBlocks from './customize-blocks';
-import moveBlocksIcon from './icon-move-blocks.native';
+import moveBlocksIcon from './icon-move-blocks';
+import HelpSectionTitle from './help-section-title';
 
 const HELP_TOPICS = [
 	{
@@ -62,11 +62,6 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
-	const sectionTitle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
-	);
-
 	const title =
 		postType === 'page'
 			? __( 'How to edit your page' )
@@ -125,9 +120,9 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 											} }
 										>
 											<PanelBody>
-												<Text style={ sectionTitle }>
+												<HelpSectionTitle>
 													{ __( 'The basics' ) }
-												</Text>
+												</HelpSectionTitle>
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
 													( { label, icon } ) => {
@@ -149,11 +144,9 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 													}
 												) }
 												{
-													<Text
-														style={ sectionTitle }
-													>
+													<HelpSectionTitle>
 														{ __( 'Get support' ) }
-													</Text>
+													</HelpSectionTitle>
 												}
 												{
 													<HelpGetSupportButton

diff --git a/packages/editor/src/components/editor-help/style.scss b/packages/editor/src/components/editor-help/style.scss
@@ -31,6 +31,21 @@
 	padding: 0;
 }
 
+.helpSectionTitleContainer {
+	margin-top: 24px;
+	margin-bottom: 16px;
+}
+
+.helpSectionTitle {
+	color: $light-primary;
+	font-weight: 600;
+	font-size: 16px;
+}
+
+.helpSectionTitleDark {
+	color: $dark-secondary;
+}
+
 .helpDetailContainer {
 	padding: 0 16px;
 }