copy amends

components/elements/index.js

@@ -243,6 +243,7 @@ export function MultiLinefield(props) {
         parentFieldShowOnValue,
         validation,
         maxFieldLength,
+        hint,
     } = props;
     const required = (value) => (value ? undefined : "Is required");
 
@@ -258,6 +259,7 @@ export function MultiLinefield(props) {
         showIfHasParentShowValue;
 
     //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
+    let { t } = useTranslation();
 
     return (
         <>
@@ -272,6 +274,9 @@ export function MultiLinefield(props) {
                             id={props.name + "-hint"}
                             className="govuk-hint govuk-!-font-size-14"
                         >
+                            {props.hasOwnProperty("hint") &&
+                                props.hint != false &&
+                                t(props.hint)}{" "}
                             Do not include personal or financial information.
                         </div>
                         <Field
@@ -296,6 +301,9 @@ export function MultiLinefield(props) {
                         id={props.name + "-hint"}
                         className="govuk-hint govuk-!-font-size-14"
                     >
+                        {props.hasOwnProperty("hint") &&
+                            props.hint != false &&
+                            t(props.hint)}{" "}
                         Do not include personal or financial information.
                     </div>
 
@@ -394,7 +402,7 @@ export function RichMultiLinefield(props) {
         showIfHasParentShowValue;
 
     //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
-
+    let { t } = useTranslation();
     return (
         <>
             {parentField != false ? (
@@ -407,6 +415,9 @@ export function RichMultiLinefield(props) {
                             id={props.name + "-hint"}
                             className="govuk-hint govuk-!-font-size-14"
                         >
+                            {props.hasOwnProperty("hint") &&
+                                props.hint != false &&
+                                t(props.hint)}{" "}
                             Do not include personal or financial information.
                         </div>
                         <Field
@@ -431,6 +442,9 @@ export function RichMultiLinefield(props) {
                         id={props.name + "-hint"}
                         className="govuk-hint govuk-!-font-size-14"
                     >
+                        {props.hasOwnProperty("hint") &&
+                            props.hint != false &&
+                            t(props.hint)}{" "}
                         Do not include personal or financial information.
                     </div>
 
@@ -1194,19 +1208,28 @@ const RenderPickList = ({
 };
 
 export function PickList(props) {
-    const { name, label, datafieldname } = props;
-
+    const { name, label, datafieldname, hint } = props;
+    let { t } = useTranslation();
     return (
         <div className="govuk-form-group">
             <label className="govuk-label govuk-body-m" htmlFor={props.name}>
                 {FieldsTranslations(label)}
             </label>
+            <div
+                id={props.name + "-hint"}
+                className="govuk-hint govuk-!-font-size-14"
+            >
+                {props.hasOwnProperty("hint") &&
+                    props.hint != false &&
+                    t(props.hint)}{" "}
+            </div>
             <Field
                 name={props.name}
                 label={props.name}
                 component={RenderPickList}
                 datafieldname={datafieldname}
                 picklistData={props.picklistData}
+                hint={props.hint}
             />
         </div>
     );
@@ -1389,8 +1412,10 @@ export const FieldsTranslations = (label) => {
 
     let labelTrans =
         router.locale == "cy"
-            ? jsonpath("$..[?(@.value=='" + label + "')].value_cy", formObj)
+            ? jsonpath('$..[?(@.value=="' + label + '")].value_cy', formObj)
             : label;
+
+    console.log(label, labelTrans);
     return labelTrans;
 };
 
@@ -1413,7 +1438,9 @@ const PickListTranslations = (optionValue) => {
 export function FileUploadField(props) {
     return (
         <>
-            <h2 className="govuk-heading-s">{props.label} </h2>
+            <h2 className="govuk-heading-s">
+                {FieldsTranslations(props.label)}{" "}
+            </h2>
             <Field
                 name={props.name}
                 id={props.name}