Adds input text labels

Author: antonis

packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -12,6 +12,10 @@ const defaultStyles = StyleSheet.create({
     marginBottom: 20,
     textAlign: 'center',
   },
+  label: {
+    marginBottom: 4,
+    fontSize: 16,
+  },
   input: {
     height: 50,
     borderColor: '#ccc',

packages/core/src/js/feedback/FeedbackForm.tsx

@@ -7,15 +7,20 @@ import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import {
   CANCEL_BUTTON_LABEL,
   EMAIL_ERROR,
+  EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
   ERROR_TITLE,
   FORM_ERROR,
   FORM_TITLE,
+  IS_REQUIRED_LABEL,
+  MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
+  NAME_LABEL,
   NAME_PLACEHOLDER,
   SUBMIT_BUTTON_LABEL} from './constants';
 import defaultStyles from './FeedbackForm.styles';
 import type { FeedbackFormProps, FeedbackFormState } from './FeedbackForm.types';
+import LabelText from './LabelText';
 
 /**
  * @beta
@@ -72,21 +77,37 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     <View style={styles?.container || defaultStyles.container}>
       <Text style={styles?.title || defaultStyles.title}>{text?.formTitle || FORM_TITLE}</Text>
 
+      <LabelText
+          label={text?.nameLabel || NAME_LABEL}
+          isRequired={true}
+          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
+          styles={styles?.label || defaultStyles.label}
+        />
       <TextInput
         style={styles?.input || defaultStyles.input}
         placeholder={text?.namePlaceholder || NAME_PLACEHOLDER}
         value={name}
         onChangeText={(value) => this.setState({ name: value })}
         />
-
+      <LabelText
+          label={text?.emailLabel || EMAIL_LABEL}
+          isRequired={true}
+          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
+          styles={styles?.label || defaultStyles.label}
+        />
       <TextInput
         style={styles?.input || defaultStyles.input}
         placeholder={text?.emailPlaceholder || EMAIL_PLACEHOLDER}
         keyboardType={'email-address' as KeyboardTypeOptions}
         value={email}
         onChangeText={(value) => this.setState({ email: value })}
         />
-
+      <LabelText
+          label={text?.descriptionLabel || MESSAGE_LABEL}
+          isRequired={true}
+          isRequiredLabel={text?.isRequiredLabel || IS_REQUIRED_LABEL}
+          styles={styles?.label || defaultStyles.label}
+        />
       <TextInput
         style={[styles?.input || defaultStyles.input, styles?.textArea || defaultStyles.textArea]}
         placeholder={text?.descriptionPlaceholder || MESSAGE_PLACEHOLDER}

packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -8,9 +8,13 @@ export interface FeedbackFormProps {
 
 export interface FeedbackFormText {
   formTitle?: string;
+  nameLabel?: string;
   namePlaceholder?: string;
+  emailLabel?: string;
   emailPlaceholder?: string;
+  descriptionLabel?: string;
   descriptionPlaceholder?: string;
+  isRequiredLabel?: string;
   submitButton?: string;
   cancelButton?: string;
   errorTitle?: string;
@@ -21,6 +25,7 @@ export interface FeedbackFormText {
 export interface FeedbackFormStyles {
   container?: ViewStyle;
   title?: TextStyle;
+  label?: TextStyle;
   input?: TextStyle;
   textArea?: ViewStyle;
   submitButton?: ViewStyle;

packages/core/src/js/feedback/LabelText.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TextStyle } from 'react-native';
+import { Text } from 'react-native';
+
+interface LabelTextProps {
+  label: string;
+  isRequired: boolean;
+  isRequiredLabel: string;
+  styles: TextStyle;
+}
+
+const LabelText: React.FC<LabelTextProps> = ({ label, isRequired, isRequiredLabel, styles }) => {
+  return (
+    <Text style={styles}>
+      {label}
+      {isRequired && ` ${isRequiredLabel}`}
+    </Text>
+  );
+};
+
+export default LabelText;

packages/core/src/js/feedback/constants.ts

@@ -1,7 +1,11 @@
 export const FORM_TITLE = 'Report a Bug';
-export const NAME_PLACEHOLDER = 'Name';
-export const EMAIL_PLACEHOLDER = 'Email';
-export const MESSAGE_PLACEHOLDER = 'Description';
+export const NAME_PLACEHOLDER = 'Your Name';
+export const NAME_LABEL = 'Name';
+export const EMAIL_PLACEHOLDER = '[email protected]';
+export const EMAIL_LABEL = 'Email';
+export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+export const MESSAGE_LABEL = 'Description';
+export const IS_REQUIRED_LABEL = '(required)';
 export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
 export const CANCEL_BUTTON_LABEL = 'Cancel';
 export const ERROR_TITLE = 'Error';