feat: remove dependency on o-utils from o3-form, require inputId

apps/website/plugins/remark-branded-content.mjs

@@ -1,4 +1,4 @@
-import visit from 'unist-util-visit';
+import {visit} from 'unist-util-visit';
 
 export default function remarkBrandedContent() {
 	/**

components/o3-form/package.json

@@ -35,7 +35,6 @@
 		"check:type": "tsc --noEmit"
 	},
 	"peerDependencies": {
-		"@financial-times/o-utils": "^2.2.1",
 		"@financial-times/o3-foundation": "^3.0.0"
 	},
 	"devDependencies": {

components/o3-form/src/tsx/CheckBox.tsx

@@ -1,16 +1,9 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {TitledFormField, FormFieldset} from './fieldComponents/FormField';
 import type {CheckBoxProps, FormFieldsetProps} from '../types/index';
 
-const uniqueId = uidBuilder('o3-form-checkbox-input');
-
 export const CheckBoxItem = (props: CheckBoxProps) => {
 	let {inputId, checkboxDescription, attributes, optional, error} = props;
 
-	if (!inputId) {
-		inputId = uniqueId('_');
-	}
-
 	const classNames = ['o3-form-input-checkbox__input', 'o3-visually-hidden'];
 
 	if (error) {
@@ -45,6 +38,7 @@ export const CheckBox = (props: CheckBoxProps) => {
 	const newProps = {
 		...props,
 		labelId: props.inputId,
+		labelsElement: props.inputId,
 		descriptionId: props.inputId,
 	};
 

components/o3-form/src/tsx/DateInput.tsx

@@ -1,11 +1,8 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {DateInputProps} from '../types';
 import {LabeledFormField} from './fieldComponents/FormField';
 import {useEffect, useRef} from 'react';
 import {DateInputMask} from './DateInputMask';
 
-const uniqueId = uidBuilder('o3-form-date-input');
-
 export const DateInput = ({
 																label,
 																feedback,
@@ -17,8 +14,6 @@ export const DateInput = ({
 															}: DateInputProps) => {
 	let inputRef = useRef<HTMLInputElement | null>(null);
 
-	const id = inputId || uniqueId('_');
-
 	const inputClasses = [
 		'o3-form',
 		'o3-form-text-input',
@@ -41,11 +36,11 @@ export const DateInput = ({
 				label={label}
 				feedback={feedback}
 				description={description}
-				inputId={id}
+				labelsElement={inputId}
 				optional={optional}>
 					<input
 						{...attributes}
-						id={id}
+						id={inputId}
 						ref={inputRef}
 						disabled={disabled}
 						className={inputClasses.join(' ')}

components/o3-form/src/tsx/DateInputPicker.tsx

@@ -1,9 +1,6 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {DateInputProps} from '../types';
 import {LabeledFormField} from './fieldComponents/FormField';
 
-const uniqueId = uidBuilder('o3-form-date-input');
-
 export const DateInputPicker = ({
 																	label,
 																	feedback,
@@ -13,7 +10,6 @@ export const DateInputPicker = ({
 																	inputId,
 																	optional,
 																}: DateInputProps) => {
-	const id = inputId || uniqueId('_');
 
 	const inputClasses = [
 		'o3-form',
@@ -29,11 +25,11 @@ export const DateInputPicker = ({
 			label={label}
 			feedback={feedback}
 			description={description}
-			inputId={id}
+			labelsElement={inputId}
 			optional={optional}>
 			<input
 				{...attributes}
-				id={id}
+				id={inputId}
 				disabled={disabled}
 				className={inputClasses.join(' ')}
 				required={!optional}

components/o3-form/src/tsx/FileInput.tsx

@@ -1,10 +1,7 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {FileInputProps} from '../types';
 import {LabeledFormField} from './fieldComponents/FormField';
 import {ChangeEvent, useState} from "react";
 
-const uniqueId = uidBuilder('o3-form-file-input');
-
 export const FileInput = ({
 							  label,
 							  feedback,
@@ -15,7 +12,7 @@ export const FileInput = ({
 							  optional,
 							  isUploading
 						  }: FileInputProps) => {
-	const id: string = inputId || uniqueId('_');
+
 	const [file, setFile] = useState<File | null>(null);
 
 	const onUpload = (event: ChangeEvent<HTMLInputElement>) => {
@@ -37,11 +34,11 @@ export const FileInput = ({
 			label={label}
 			feedback={feedback}
 			description={description}
-			inputId={id}
+			labelsElement={inputId}
 			optional={optional}>
 			<>
 				<div className={inputClasses.join(' ')}>
-					<label htmlFor={id} className="o3-form-file-input__label">
+					<label htmlFor={inputId} className="o3-form-file-input__label">
 						<span
 							className="o3-form-file-input__label-button o3-button o3-button--primary o3-button-icon o3-button-icon--upload">
 							File Upload
@@ -51,7 +48,7 @@ export const FileInput = ({
 					</label>
 					<input
 						{...attributes}
-						id={id}
+						id={inputId}
 						className="o3-form-file-input__input-field"
 						disabled={disabled}
 						required={!optional}

components/o3-form/src/tsx/PasswordInput.tsx

@@ -1,11 +1,8 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {PasswordInputProps} from '../types';
 import {LabeledFormField} from './fieldComponents/FormField';
 import {PasswordInputToggle as PasswordInputToggleController} from './PasswordInputToggle';
 import {useEffect, useRef} from 'react';
 
-const uniqueId = uidBuilder('o3-form-password-input');
-
 export const PasswordInput = ({
 	label,
 	feedback,
@@ -16,7 +13,6 @@ export const PasswordInput = ({
 	optional,
 	forgotPasswordLink,
 }: PasswordInputProps) => {
-	const id = inputId || uniqueId('_');
 
 	let inputRef = useRef<HTMLInputElement | null>(null);
 	let buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -54,12 +50,12 @@ export const PasswordInput = ({
 				label={label}
 				feedback={feedback}
 				description={description}
-				inputId={id}
+				labelsElement={inputId}
 				optional={optional}>
 				<div className="o3-password-input__container">
 					<input
 						{...attributes}
-						id={id}
+						id={inputId}
 						ref={inputRef}
 						disabled={disabled}
 						data-testid="o3-password-input"

components/o3-form/src/tsx/RadioButton.tsx

@@ -1,14 +1,9 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {FormFieldset} from './fieldComponents/FormField';
 import type {RadioButtonProps, FormFieldsetProps} from '../types';
 
-const uniqueId = uidBuilder('o3-form-radio-button-input');
-
 export const RadioButtonItem = (props: RadioButtonProps) => {
 	let {inputId, attributes, optional, error} = props;
-	if (!inputId) {
-		inputId = uniqueId('_');
-	}
+
 	const classNames = ['o3-form-input-radio-button', 'o3-visually-hidden'];
 
 	if (error) {

components/o3-form/src/tsx/SelectInput.tsx

@@ -1,9 +1,6 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {SelectInputProps} from '../types/index';
 import {LabeledFormField} from './fieldComponents/FormField';
 
-const uniqueId = uidBuilder('o3-form-select-input');
-
 export const SelectInput = ({
 	label,
 	feedback,
@@ -15,7 +12,6 @@ export const SelectInput = ({
 	children,
 	length,
 }: SelectInputProps) => {
-	const id = inputId || uniqueId('_');
 	const inputClasses = ['o3-form', 'o3-form-select-input'];
 
 	if (feedback && feedback.type === 'error') {
@@ -27,15 +23,15 @@ export const SelectInput = ({
 			label={label}
 			feedback={feedback}
 			description={description}
-			inputId={id}
+			labelsElement={inputId}
 			optional={optional}>
 			<div
 				className={`o3-form-select-input__container ${
 					length ? `o3-form-select-input--short-${length}` : ''
 				}`}>
 				<select
 					{...attributes}
-					id={id}
+					id={inputId}
 					disabled={disabled}
 					className={inputClasses.join(' ')}
 					required={!optional}

components/o3-form/src/tsx/TextInput.tsx

@@ -1,9 +1,6 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {TextInputProps} from '../types/index';
 import {LabeledFormField} from './fieldComponents/FormField';
 
-const uniqueId = uidBuilder('o3-form-text-input');
-
 export const TextInput = ({
 	label,
 	feedback,
@@ -14,7 +11,6 @@ export const TextInput = ({
 	inputId,
 	optional,
 }: TextInputProps) => {
-	const id = inputId || uniqueId('_');
 	const inputClasses = ['o3-form', 'o3-form-text-input'];
 
 	if (feedback && feedback.type === 'error') {
@@ -29,11 +25,11 @@ export const TextInput = ({
 			label={label}
 			feedback={feedback}
 			description={description}
-			inputId={id}
+			labelsElement={inputId}
 			optional={optional}>
 			<input
 				{...attributes}
-				id={id}
+				id={inputId}
 				disabled={disabled}
 				className={inputClasses.join(' ')}
 				required={!optional}

components/o3-form/src/tsx/fieldComponents/FormField.tsx

@@ -1,27 +1,24 @@
-import {uidBuilder} from '@financial-times/o-utils';
 import {Feedback} from './Feedback';
 
 import type {FormFieldProps, FormFieldsetProps} from '../../types';
 
-const uniqueId = uidBuilder('o3-form');
-
 export const LabeledFormField = ({
-	inputId,
 	label,
+	labelsElement,
 	description,
 	feedback,
 	children,
 	optional,
 }: FormFieldProps) => {
-	const id = inputId || uniqueId('input_');
-	const descriptionId = description ? uniqueId('description_') : undefined;
+	const descriptionId = description ? `description_${labelsElement}` : undefined;
+	const labelId = `label_${labelsElement}`;
 	const labelClasses = ['o3-form-field__label'];
 	if (optional) {
 		labelClasses.push('o3-form-field--optional');
 	}
 	return (
 		<div className="o3-form-field">
-			<label className={labelClasses.join(' ')} htmlFor={id}>
+			<label className={labelClasses.join(' ')} id={labelId} htmlFor={labelsElement}>
 				{label}
 			</label>
 
@@ -38,13 +35,14 @@ export const LabeledFormField = ({
 
 export const TitledFormField = ({
 	label,
+	labelsElement,
 	description,
 	feedback,
 	children,
 	optional,
 }: FormFieldProps) => {
-	const descriptionId = description ? uniqueId('description_') : undefined;
-	const labelId = uniqueId('label_');
+	const descriptionId = description ? `description_${labelsElement}` : undefined;
+	const labelId = `label_${labelsElement}`;
 	const labelClasses = ['o3-form-field__title'];
 	if (optional) {
 		labelClasses.push('o3-form-field--optional');
@@ -71,8 +69,9 @@ export const FormFieldset = ({
 	feedback,
 	children,
 	optional,
+	inputId
 }: FormFieldsetProps) => {
-	const descriptionId = uniqueId('checkbox_');
+	const descriptionId = `checkbox_${inputId}`;
 	const labelClasses = ['o3-form-field__legend'];
 	if (optional) {
 		labelClasses.push('o3-form-field--optional');

components/o3-form/src/types/index.ts

@@ -1,7 +1,7 @@
 // Base Input Props
 export type BaseInputProps = {
-	inputId?: string;
-	label?: string;
+	inputId: string;
+	label: string;
 	description?: string;
 	optional?: boolean;
 	error?: boolean;
@@ -30,8 +30,8 @@ export interface SelectInputProps {
 	disabled?: boolean;
 	feedback?: FeedbackProps;
 	children?: React.JSX.Element[];
-	inputId?: string;
-	label?: string;
+	inputId: string;
+	label: string;
 	length?: 1 | 3;
 	description?: string;
 	optional?: boolean;
@@ -58,14 +58,16 @@ export interface RadioButtonProps extends BaseInputProps {
 	radioButtonLabel: string; // Label specifically for the radio button.
 }
 export interface FormFieldsetProps {
+	inputId: string;
 	label: string;
 	description?: string;
 	children: React.JSX.Element | React.JSX.Element[];
 	feedback?: FeedbackProps;
 	optional?: boolean;
 }
 
-export interface FormFieldProps extends BaseInputProps {
+export interface FormFieldProps extends Omit<BaseInputProps, 'inputId'> {
+	labelsElement: string;
 	feedback?: FeedbackProps;
 	children: React.JSX.Element & JSX.IntrinsicElements['input'];
 }

libraries/o3-figma-sb-links/src/figma-links.json

@@ -149,6 +149,7 @@
   "o3-form--error-summary": "",
   "o3-form--file-input": "",
   "o3-form--file-input-error-state": "",
+  "o3-form--file-input-javascript": "",
   "o3-form--password-input": "",
   "o3-form--password-input-error-state": "",
   "o3-form--radio-button": "",
@@ -225,6 +226,8 @@
   "sustainable-views-o3-tooltip--toggle-tooltip": "https://www.figma.com/design/Y7u0SwIJ1mCNDE0dpzgHCJ/%F0%9F%92%A0-Sustainable-Views---Origami-(o3)?node-id=6318-473&t=jZcQ882g8fhmd6uu-4",
   "sustainable-views-o3-typography-orderedlist--ordered-list-story": "",
   "sustainable-views-o3-typography-unorderedlist--unordered-list-story": "",
+  "tests-o3-form--file-input-javascript-delete-button": "",
+  "tests-o3-form--file-input-javascript-upload-display": "",
   "tests-o3-form--password-input-test": "",
   "tests-o3-tooltip--onboarding-tooltip-test": "",
   "tests-o3-tooltip--toggle-tooltip-test": "",