Revert "Add validation errors to form fields for callouts"

dotcom-rendering/src/web/components/Callout/CheckboxSelect.tsx

@@ -1,27 +1,17 @@
 import { Checkbox, CheckboxGroup } from '@guardian/source-react-components';
-import type { CampaignFieldCheckbox } from 'src/types/content';
+import { CampaignFieldCheckbox } from '../../../types/content';
+import { FieldLabel } from './FieldLabel';
 
 type Props = {
 	formField: CampaignFieldCheckbox;
 	formData: { [key in string]: string[] };
 	setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>;
-	validationErrors?: { [key in string]: string };
 };
 
-export const CheckboxSelect = ({
-	formField,
-	formData,
-	setFormData,
-	validationErrors,
-}: Props) => (
+export const CheckboxSelect = ({ formField, formData, setFormData }: Props) => (
 	<>
-		<CheckboxGroup
-			error={validationErrors?.[formField.id]}
-			hideLabel={formField.hideLabel}
-			name={formField.name}
-			label={formField.label}
-			supporting={formField.description}
-		>
+		<FieldLabel formField={formField} />
+		<CheckboxGroup name={formField.name}>
 			{formField.options.map((option, index) => {
 				// data related to this field is mapped to `formData` using `formField.id`
 				// We cannot assume that the data exists, so we need to check if `formField.id` key exists in `formData`
@@ -49,7 +39,6 @@ export const CheckboxSelect = ({
 						label={option.label}
 						value={option.value}
 						checked={isCheckboxChecked}
-						error={validationErrors?.[formField.id] ? true : false}
 						onChange={() => {
 							setFormData({
 								...formData,

dotcom-rendering/src/web/components/Callout/FieldLabel.tsx

@@ -1,10 +1,6 @@
 import { css } from '@emotion/react';
-import {
-	neutral,
-	textSans,
-	visuallyHidden,
-} from '@guardian/source-foundations';
-import type { CampaignFieldType } from 'src/types/content';
+import { neutral, textSans } from '@guardian/source-foundations';
+import { CampaignFieldType } from '../../../types/content';
 
 const fieldLabelStyles = css`
 	${textSans.medium({ fontWeight: 'bold' })}
@@ -20,22 +16,15 @@ const optionalTextStyles = css`
 	padding-left: 5px;
 `;
 
-type Props = {
-	formField: CampaignFieldType;
-	hideLabel?: boolean;
-};
-
-export const FieldLabel = ({ formField, hideLabel }: Props) => (
-	<label
-		css={[fieldLabelStyles, hideLabel && visuallyHidden]}
-		htmlFor={formField.name}
-		hidden={formField.hideLabel}
-	>
+export const FieldLabel = ({ formField }: { formField: CampaignFieldType }) => (
+	<label css={fieldLabelStyles} htmlFor={formField.name}>
 		{formField.label}
 		{!formField.required && <span css={optionalTextStyles}>Optional</span>}
 		{!!formField.description && (
 			<div>
-				<span css={fieldDescription}>{`${formField.description}`}</span>
+				<span css={fieldDescription}>
+					{`(${formField.description})`}
+				</span>
 			</div>
 		)}
 	</label>

dotcom-rendering/src/web/components/Callout/FileUpload.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import { space, text, textSans } from '@guardian/source-foundations';
 import { useState } from 'react';
-import type { CampaignFieldFile } from './../../../types/content';
-import { stringifyFileBase64 } from './../../lib/stringifyFileBase64';
+import { CampaignFieldFile } from '../../../types/content';
+import { stringifyFileBase64 } from '../../lib/stringifyFileBase64';
 import { FieldLabel } from './FieldLabel';
 
 const fileUploadInputStyles = css`

dotcom-rendering/src/web/components/Callout/Form.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { text, textSans } from '@guardian/source-foundations';
 import { Button, Link } from '@guardian/source-react-components';
 import { useState } from 'react';
-import type { CampaignFieldType } from '../../../types/content';
+import { CampaignFieldType } from '../../../types/content';
 import { FileUpload } from './FileUpload';
 import { MultiSelect } from './MultiSelect';
 import { Select } from './Select';

dotcom-rendering/src/web/components/Callout/MultiSelect.tsx

@@ -1,20 +1,18 @@
 import type {
 	CampaignFieldCheckbox,
 	CampaignFieldRadio,
-} from 'src/types/content';
+} from '../../../types/content';
 import { CheckboxSelect } from './CheckboxSelect';
 import { RadioSelect } from './RadioSelect';
 
 type Props = {
-	validationErrors?: { [key in string]: string };
 	formField: CampaignFieldCheckbox | CampaignFieldRadio;
 	formData: { [key in string]: any };
 	setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>;
 	multiple: boolean;
 };
 
 export const MultiSelect = ({
-	validationErrors,
 	formField,
 	formData,
 	setFormData,
@@ -23,14 +21,12 @@ export const MultiSelect = ({
 	<div data-testid={`form-field-${formField.id}`}>
 		{multiple ? (
 			<CheckboxSelect
-				validationErrors={validationErrors ?? undefined}
 				formField={formField as CampaignFieldCheckbox}
 				formData={formData}
 				setFormData={setFormData}
 			/>
 		) : (
 			<RadioSelect
-				validationErrors={validationErrors ?? undefined}
 				formField={formField as CampaignFieldRadio}
 				formData={formData}
 				setFormData={setFormData}

dotcom-rendering/src/web/components/Callout/RadioSelect.tsx

@@ -1,17 +1,15 @@
 import { css } from '@emotion/react';
 import { Radio, RadioGroup } from '@guardian/source-react-components';
-import type { CampaignFieldRadio } from 'src/types/content';
+import type { CampaignFieldRadio } from '../../../types/content';
 import { FieldLabel } from './FieldLabel';
 
 type FieldProp = {
-	validationErrors?: { [key in string]: string };
 	formField: CampaignFieldRadio;
 	formData: { [key in string]: any };
 	setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>;
 };
 
 export const RadioSelect = ({
-	validationErrors,
 	formField,
 	formData,
 	setFormData,
@@ -27,7 +25,6 @@ export const RadioSelect = ({
 	>
 		<FieldLabel formField={formField} />
 		<RadioGroup
-			error={validationErrors?.[formField.id]}
 			name={formField.name}
 			orientation={
 				formField.options.length > 2 ? 'vertical' : 'horizontal'

dotcom-rendering/src/web/components/Callout/Select.tsx

@@ -1,37 +1,36 @@
-import { Select as SourceSelect } from '@guardian/source-react-components';
-import type { CampaignFieldSelect } from 'src/types/content';
+import { CampaignFieldSelect } from '../../../types/content';
+import { FieldLabel } from './FieldLabel';
 
 type Props = {
-	validationErrors?: { [key in string]: string };
 	formField: CampaignFieldSelect;
 	formData: { [key in string]: any };
 	setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>;
 };
 
-export const Select = ({
-	validationErrors,
-	formField,
-	formData,
-	setFormData,
-}: Props) => (
-	<SourceSelect
-		hideLabel={formField.hideLabel}
-		data-testid={`form-field-${formField.id}`}
-		error={validationErrors?.[formField.id]}
-		label={formField.label}
-		supporting={formField.description}
-		value={formField.id in formData ? formData[formField.id] : ''}
-		onChange={(e) =>
-			setFormData({
-				...formData,
-				[formField.id]: e.target.value,
-			})
-		}
-		optional={!formField.required}
-		children={formField.options.map((option, index) => (
-			<option key={index} value={option.value}>
-				{option.value}
-			</option>
-		))}
-	/>
+export const Select = ({ formField, formData, setFormData }: Props) => (
+	<>
+		<FieldLabel formField={formField} />
+		<select
+			data-testid={`form-field-${formField.id}`}
+			required={formField.required}
+			value={
+				formField.id && formField.id in formData
+					? formData[formField.id]
+					: ''
+			}
+			onChange={(e) =>
+				setFormData({
+					...formData,
+					[formField.id]: e.target.value,
+				})
+			}
+		>
+			{formField.options &&
+				formField.options.map((option, index) => (
+					<option key={index} value={option.value}>
+						{option.value}
+					</option>
+				))}
+		</select>
+	</>
 );

dotcom-rendering/src/web/components/Callout/TextArea.tsx

@@ -1,36 +1,27 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source-foundations';
 import { TextArea as SourceTextArea } from '@guardian/source-react-components';
-import type { CampaignFieldTextArea } from 'src/types/content';
+import { CampaignFieldTextArea } from '../../../types/content';
 
 const textAreaStyles = css`
 	width: 100%;
 	margin-top: ${space[2]}px;
 `;
 
 type Props = {
-	validationErrors?: { [key in string]: string };
 	formField: CampaignFieldTextArea;
 	formData: { [key in string]: any };
 	setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>;
 };
 
-export const TextArea = ({
-	validationErrors,
-	formField,
-	formData,
-	setFormData,
-}: Props) => (
+export const TextArea = ({ formField, formData, setFormData }: Props) => (
 	<>
 		<SourceTextArea
-			hideLabel={formField.hideLabel}
 			data-testid={`form-field-${formField.id}`}
 			label={formField.label}
-			supporting={formField.description}
 			css={textAreaStyles}
 			optional={!formField.required}
 			value={formField.id in formData ? formData[formField.id] : ''}
-			error={validationErrors?.[formField.id]}
 			onChange={(e) =>
 				setFormData({
 					...formData,

dotcom-rendering/src/web/components/Callout/TextInput.tsx

@@ -1,28 +1,20 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source-foundations';
 import { TextInput as SourceTextInput } from '@guardian/source-react-components';
-import type { CampaignFieldText } from 'src/types/content';
+import { CampaignFieldText } from '../../../types/content';
 
 const textInputStyles = css`
 	margin-top: ${space[2]}px;
 `;
 
 type Props = {
-	validationErrors?: { [key in string]: string };
 	formField: CampaignFieldText;
 	formData: { [key in string]: any };
 	setFormData: React.Dispatch<React.SetStateAction<{ [x: string]: any }>>;
 };
 
-export const TextInput = ({
-	validationErrors,
-	formField,
-	formData,
-	setFormData,
-}: Props) => (
+export const TextInput = ({ formField, formData, setFormData }: Props) => (
 	<SourceTextInput
-		hideLabel={formField.hideLabel}
-		error={validationErrors?.[formField.id]}
 		css={textInputStyles}
 		data-testid={`form-field-${formField.id}`}
 		type={formField.type}