From 73994a8f83df09abd49e269ae234666d7237da9a Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Tue, 7 Jan 2020 14:58:53 +0100
Subject: [PATCH] [RNMobile] Page Template Picker UI Improvements (#19307)

* RNMobile - Page template picker: styles and icons, scroll and accessibility text

* Update Page templates picker for web

* RNMobile - Layout template picker: accessibility hint added

* RNMobile - Layout template picker: style improvements, removed unneeded icons

* Page layout picker: remove Icon dependency
---
 .../components/page-template-picker/button.js |  3 +-
 .../page-template-picker/button.native.js     | 40 ++++++++++++++-----
 .../page-template-picker/container.js         |  9 ++++-
 .../page-template-picker/container.native.js  | 24 ++++++++++-
 .../page-template-picker/default-templates.js |  4 +-
 .../components/page-template-picker/picker.js | 22 +++++-----
 .../page-template-picker/styles.native.scss   | 36 +++++++++++++++++
 .../src/components/layout/index.native.js     |  2 +-
 8 files changed, 110 insertions(+), 30 deletions(-)
 create mode 100644 packages/block-editor/src/components/page-template-picker/styles.native.scss

diff --git a/packages/block-editor/src/components/page-template-picker/button.js b/packages/block-editor/src/components/page-template-picker/button.js
index 6677fb87af5bc..7d5b03479816d 100644
--- a/packages/block-editor/src/components/page-template-picker/button.js
+++ b/packages/block-editor/src/components/page-template-picker/button.js
@@ -5,13 +5,14 @@ import { Button } from '@wordpress/components';
 
 const PickerButton = ( props ) => {
 	const {
+		icon,
 		label,
 		onPress,
 	} = props;
 
 	return (
 		<Button onClick={ onPress }>
-			{ label }
+			{ icon } { label }
 		</Button>
 	);
 };
diff --git a/packages/block-editor/src/components/page-template-picker/button.native.js b/packages/block-editor/src/components/page-template-picker/button.native.js
index 36f9a97eb6c43..897ceb20dd41f 100644
--- a/packages/block-editor/src/components/page-template-picker/button.native.js
+++ b/packages/block-editor/src/components/page-template-picker/button.native.js
@@ -1,20 +1,40 @@
 /**
  * External dependencies
  */
-import { Button } from 'react-native';
+import { TouchableOpacity, Text } from 'react-native';
 
-const PickerButton = ( props ) => {
-	const {
-		label,
-		onPress,
-	} = props;
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const PickerButton = ( {
+	icon,
+	label,
+	onPress,
+	getStylesFromColorScheme,
+} ) => {
+	const butonStyles = getStylesFromColorScheme( styles.button, styles.buttonDark );
+	const butonTextStyles = getStylesFromColorScheme( styles.buttonText, styles.buttonTextDark );
 
 	return (
-		<Button
+		<TouchableOpacity
+			accessibilityLabel={ label }
+			accessibilityHint={ __( 'Double tap to select layout' ) }
+			activeOpacity={ 0.7 }
 			onPress={ onPress }
-			title={ label }
-		/>
+			style={ butonStyles }
+		>
+			<Text style={ styles.buttonIcon }>{ icon }</Text>
+			<Text style={ butonTextStyles }>{ label }</Text>
+		</TouchableOpacity>
 	);
 };
 
-export default PickerButton;
+export default withPreferredColorScheme( PickerButton );
diff --git a/packages/block-editor/src/components/page-template-picker/container.js b/packages/block-editor/src/components/page-template-picker/container.js
index de666e9bfb9ae..26b4aca637234 100644
--- a/packages/block-editor/src/components/page-template-picker/container.js
+++ b/packages/block-editor/src/components/page-template-picker/container.js
@@ -1,8 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import __experimentalBlockListFooter from '../block-list-footer';
+
 const Container = ( { children } ) => {
 	return (
-		<>
+		<__experimentalBlockListFooter>
 			{ children }
-		</>
+		</__experimentalBlockListFooter>
 	);
 };
 
diff --git a/packages/block-editor/src/components/page-template-picker/container.native.js b/packages/block-editor/src/components/page-template-picker/container.native.js
index d987d01c2638b..7d1aa596a5184 100644
--- a/packages/block-editor/src/components/page-template-picker/container.native.js
+++ b/packages/block-editor/src/components/page-template-picker/container.native.js
@@ -1,6 +1,26 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { ScrollView } from 'react-native';
 
-export default View;
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const Container = ( { style, children } ) => {
+	return (
+		<ScrollView
+			alwaysBounceHorizontal={ false }
+			contentContainerStyle={ styles.content }
+			horizontal={ true }
+			keyboardShouldPersistTaps="always"
+			showsHorizontalScrollIndicator={ false }
+			style={ [ styles.container, style ] }
+		>
+			{ children }
+		</ScrollView >
+	);
+};
+
+export default Container;
diff --git a/packages/block-editor/src/components/page-template-picker/default-templates.js b/packages/block-editor/src/components/page-template-picker/default-templates.js
index e37c051b4f15f..4e8a1a53e0088 100644
--- a/packages/block-editor/src/components/page-template-picker/default-templates.js
+++ b/packages/block-editor/src/components/page-template-picker/default-templates.js
@@ -1,6 +1,6 @@
 const defaultTemplates = [
-	{ name: 'About', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Visitors will want to know who is on the other side of the page. Use this space to write about yourself, your site, your business, or anything you want. Use the testimonials below to quote others, talking about the same thing – in their own words.</p><!-- /wp:paragraph -->' },
-	{ name: 'Contact', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Let\'s talk 👋 Don\'t hesitate to reach out with the contact information below, or send a message using the form.</p><!-- /wp:paragraph -->' },
+	{ name: 'About', icon: '👋', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Visitors will want to know who is on the other side of the page. Use this space to write about yourself, your site, your business, or anything you want. Use the testimonials below to quote others, talking about the same thing – in their own words.</p><!-- /wp:paragraph -->' },
+	{ name: 'Contact', icon: '✉️', content: '<!-- wp:paragraph {"align":"left"} --><p class="has-text-align-left">Let\'s talk 👋 Don\'t hesitate to reach out with the contact information below, or send a message using the form.</p><!-- /wp:paragraph -->' },
 ];
 
 export default defaultTemplates;
diff --git a/packages/block-editor/src/components/page-template-picker/picker.js b/packages/block-editor/src/components/page-template-picker/picker.js
index 886c6492e64d0..6e22180b4bd33 100644
--- a/packages/block-editor/src/components/page-template-picker/picker.js
+++ b/packages/block-editor/src/components/page-template-picker/picker.js
@@ -7,24 +7,22 @@ import { withDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import __experimentalBlockListFooter from '../block-list-footer';
 import Button from './button';
 import Container from './container';
 import defaultTemplates from './default-templates';
 
 const __experimentalPageTemplatePicker = ( { templates = defaultTemplates, resetContent } ) => {
 	return (
-		<__experimentalBlockListFooter>
-			<Container style={ { flexDirection: 'row' } }>
-				{ templates.map( ( { name, content } ) => (
-					<Button
-						key={ name }
-						onPress={ () => resetContent( content ) }
-						label={ name }
-					/>
-				) ) }
-			</Container>
-		</__experimentalBlockListFooter>
+		<Container>
+			{ templates.map( ( { name, content, icon } ) => (
+				<Button
+					icon={ icon }
+					key={ name }
+					label={ name }
+					onPress={ () => resetContent( content ) }
+				/>
+			) ) }
+		</Container>
 	);
 };
 
diff --git a/packages/block-editor/src/components/page-template-picker/styles.native.scss b/packages/block-editor/src/components/page-template-picker/styles.native.scss
new file mode 100644
index 0000000000000..8c6a5663f1972
--- /dev/null
+++ b/packages/block-editor/src/components/page-template-picker/styles.native.scss
@@ -0,0 +1,36 @@
+.container {
+	margin: 10px 0;
+}
+
+.content {
+	padding: 0 12px;
+}
+
+.button {
+	background-color: rgba($black, 0.04);
+	border-radius: 20px;
+	flex-direction: row;
+	margin-right: 8px;
+	padding: 9px 18px 9px 14px;
+	align-items: center;
+}
+
+.buttonDark {
+	background-color: rgba($white, 0.08);
+}
+
+.buttonIcon {
+	margin-right: 6px;
+	font-size: 18px;
+}
+
+.buttonText {
+	color: $dark-opacity-800;
+	font-size: 14px;
+	font-weight: 600;
+	letter-spacing: 0.25px;
+}
+
+.buttonTextDark {
+	color: $light-opacity-700;
+}
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
index 2423dd1dabfd1..f4925702eb2a5 100644
--- a/packages/edit-post/src/components/layout/index.native.js
+++ b/packages/edit-post/src/components/layout/index.native.js
@@ -129,10 +129,10 @@ class Layout extends Component {
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
 					>
+						{ showPageTemplatePicker && <__experimentalPageTemplatePicker /> }
 						<Header />
 						<BottomSheetSettings />
 					</KeyboardAvoidingView> ) }
-				{ showPageTemplatePicker && <__experimentalPageTemplatePicker /> }
 			</SafeAreaView>
 		);
 	}