chore: Translate dynamic row props (#4266)

* add inputs to translate screen * a11y descriptions/labels --------- Co-authored-by: Dave Samojlenko <[email protected]>
cds-snc · Sep 11, 2024 · 3070872 · 3070872
1 parent bdb9821
commit 3070872
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 1 deletion.
diff --git a/...orm administration)/form-builder/[id]/edit/translate/components/TranslateCustomizeSet.tsx b/...orm administration)/form-builder/[id]/edit/translate/components/TranslateCustomizeSet.tsx
@@ -0,0 +1,162 @@
+import { Language } from "@lib/types/form-builder-types";
+import { FieldsetLegend } from ".";
+import { LanguageLabel } from "./LanguageLabel";
+import { useTranslation } from "@i18n/client";
+import { useTemplateStore } from "@lib/store/useTemplateStore";
+import { FormElement } from "@lib/types";
+
+export const TranslateCustomizeSet = ({
+  element,
+  primaryLanguage,
+  secondaryLanguage,
+}: {
+  element: FormElement;
+  primaryLanguage: Language;
+  secondaryLanguage: Language;
+}) => {
+  const { t } = useTranslation("form-builder");
+
+  const { updateField, localizeField, propertyPath } = useTemplateStore((s) => ({
+    updateField: s.updateField,
+    localizeField: s.localizeField,
+    propertyPath: s.propertyPath,
+  }));
+
+  const dynamicRowProps = element.properties.dynamicRow;
+
+  if (!dynamicRowProps) {
+    return null;
+  }
+
+  // Add button
+  const addButtonText = "addButtonText";
+
+  const addButtonPropEn = localizeField(addButtonText, primaryLanguage);
+  const addButtonEnValue = dynamicRowProps[addButtonPropEn];
+  const addButtonPropFr = localizeField(addButtonText, secondaryLanguage);
+  const addButtonFrValue = dynamicRowProps[addButtonPropFr];
+
+  // Remove button
+  const removeButtonText = "removeButtonText";
+
+  const removeButtonPropEn = localizeField(removeButtonText, primaryLanguage);
+  const removeButtonEnValue = dynamicRowProps[removeButtonPropEn];
+  const removeButtonPropFr = localizeField(removeButtonText, secondaryLanguage);
+  const removeButtonFrValue = dynamicRowProps[removeButtonPropFr];
+
+  return (
+    <>
+      {/* Start add button inputs */}
+      <fieldset>
+        <FieldsetLegend>
+          {t("dynamicRow.translate.repeatingSet")} {":"} {t("dynamicRow.translate.addButtonText")}
+        </FieldsetLegend>
+        {/* English */}
+        <div className="mb-10 flex gap-px divide-x-2 border border-gray-300" key={primaryLanguage}>
+          <label htmlFor={`add-button-text-english-${element.id}`} className="sr-only">
+            <>{primaryLanguage}</>
+          </label>
+          <div className="relative w-1/2 flex-1">
+            <LanguageLabel id={`add-button-text-english-desc-${element.id}`} lang={primaryLanguage}>
+              <>{primaryLanguage}</>
+            </LanguageLabel>
+            <textarea
+              className="size-full p-4 focus:outline-blue-focus"
+              id={`add-button-text-english-${element.id}`}
+              aria-describedby={`add-button-text-english-desc-${element.id}`}
+              value={addButtonEnValue}
+              onChange={(e) => {
+                updateField(
+                  propertyPath(element.id, `dynamicRow.${addButtonText}`, primaryLanguage),
+                  e.target.value
+                );
+              }}
+            />
+          </div>
+          {/* French */}
+          <div className="relative w-1/2 flex-1">
+            <label htmlFor={`add-button-text-french-${element.id}`} className="sr-only">
+              <>{secondaryLanguage}</>
+            </label>
+            <LanguageLabel
+              id={`add-button-text-french-desc-${element.id}`}
+              lang={secondaryLanguage}
+            >
+              <>{secondaryLanguage}</>
+            </LanguageLabel>
+            <textarea
+              className="size-full p-4 focus:outline-blue-focus"
+              id={`add-button-text-french-${element.id}`}
+              aria-describedby={`add-button-text-french-desc-${element.id}`}
+              value={addButtonFrValue}
+              onChange={(e) => {
+                updateField(
+                  propertyPath(element.id, `dynamicRow.${addButtonText}`, secondaryLanguage),
+                  e.target.value
+                );
+              }}
+            />
+          </div>
+        </div>
+      </fieldset>
+      {/* End add button inputs */}
+
+      {/* Start remove button inputs */}
+      <fieldset>
+        <FieldsetLegend>
+          {t("dynamicRow.translate.repeatingSet")} {":"}{" "}
+          {t("dynamicRow.translate.removeButtonText")}
+        </FieldsetLegend>
+        <div className="mb-10 flex gap-px divide-x-2 border border-gray-300" key={primaryLanguage}>
+          <div className="relative w-1/2 flex-1">
+            <label htmlFor={`remove-button-text-english-${element.id}`} className="sr-only">
+              <>{primaryLanguage}</>
+            </label>
+            <LanguageLabel
+              id={`remove-button-text-english-desc-${element.id}`}
+              lang={primaryLanguage}
+            >
+              <>{primaryLanguage}</>
+            </LanguageLabel>
+            <textarea
+              className="size-full p-4 focus:outline-blue-focus"
+              id={`remove-button-text-french-${element.id}`}
+              aria-describedby={`remove-button-text-english-desc-${element.id}`}
+              value={removeButtonEnValue}
+              onChange={(e) => {
+                updateField(
+                  propertyPath(element.id, `dynamicRow.${removeButtonText}`, primaryLanguage),
+                  e.target.value
+                );
+              }}
+            />
+          </div>
+          <div className="relative w-1/2 flex-1">
+            <label htmlFor={`remove-button-text-french-${element.id}`} className="sr-only">
+              <>{secondaryLanguage}</>
+            </label>
+            <LanguageLabel
+              id={`remove-button-text-french-desc-${element.id}`}
+              lang={secondaryLanguage}
+            >
+              <>{secondaryLanguage}</>
+            </LanguageLabel>
+            <textarea
+              className="size-full p-4 focus:outline-blue-focus"
+              id={`remove-button-text-french-${element.id}`}
+              aria-describedby={`remove-button-text-french-desc-${element.id}`}
+              value={removeButtonFrValue}
+              onChange={(e) => {
+                updateField(
+                  propertyPath(element.id, `dynamicRow.${removeButtonText}`, secondaryLanguage),
+                  e.target.value
+                );
+              }}
+            />
+          </div>
+        </div>
+      </fieldset>
+      {/* End remove button inputs */}
+    </>
+  );
+};
diff --git a/...(form administration)/form-builder/[id]/edit/translate/components/TranslateWithGroups.tsx b/...(form administration)/form-builder/[id]/edit/translate/components/TranslateWithGroups.tsx
@@ -22,6 +22,7 @@ import { SkipLinkReusable } from "@clientComponents/globals/SkipLinkReusable";
 import { alphabet } from "@lib/utils/form-builder";
 import { sortGroup } from "@lib/utils/form-builder/groupedFormHelpers";
 import { Group } from "@lib/formContext";
+import { TranslateCustomizeSet } from "./TranslateCustomizeSet";
 
 const GroupSection = ({
   groupId,
@@ -99,11 +100,13 @@ const Element = ({
   element,
   index,
   primaryLanguage,
+  secondaryLanguage,
   questionNumber,
 }: {
   element: FormElement;
   index: number;
   primaryLanguage: Language;
+  secondaryLanguage: Language;
   questionNumber?: string;
 }) => {
   let subElements;
@@ -126,6 +129,7 @@ const Element = ({
           index={subElement.id}
           questionNumber={questionNumber}
           primaryLanguage={primaryLanguage}
+          secondaryLanguage={secondaryLanguage}
         />
       );
     });
@@ -171,6 +175,15 @@ const Element = ({
           {subElements}
         </>
       )}
+      {element.type === "dynamicRow" && (
+        <>
+          <TranslateCustomizeSet
+            element={element}
+            primaryLanguage={primaryLanguage}
+            secondaryLanguage={secondaryLanguage}
+          />
+        </>
+      )}
     </>
   );
 };
@@ -384,7 +397,12 @@ export const TranslateWithGroups = () => {
             sortGroup({ form, group: groups["start"] }).map((element, index) => {
               return (
                 <div className="section" id={`section-${index}`} key={element.id}>
-                  <Element index={index} element={element} primaryLanguage={primaryLanguage} />
+                  <Element
+                    index={index}
+                    element={element}
+                    primaryLanguage={primaryLanguage}
+                    secondaryLanguage={secondaryLanguage}
+                  />
                 </div>
               );
             })}
@@ -418,6 +436,7 @@ export const TranslateWithGroups = () => {
                           index={index}
                           element={element}
                           primaryLanguage={primaryLanguage}
+                          secondaryLanguage={secondaryLanguage}
                         />
                       </div>
                     );

diff --git a/i18n/translations/en/form-builder.json b/i18n/translations/en/form-builder.json
@@ -1076,6 +1076,11 @@
     "removeButtonText": "Remove",
     "removeButtonTextA11yEn": "Remove button text (english)",
     "removeButtonTextA11yFr": "Remove button text (french)",
+    "translate": {
+      "repeatingSet": "Repeating set",
+      "addButtonText": "Button label - Add to set",
+      "removeButtonText": "Button label - Remove from set"
+    },
     "dialog": {
       "customizeElement": "Customize element",
       "title": "Customize set",

diff --git a/i18n/translations/fr/form-builder.json b/i18n/translations/fr/form-builder.json
@@ -1076,6 +1076,11 @@
     "removeButtonText": "Remove [FR]",
     "removeButtonTextA11yEn": "Remove button text (english) [FR] ",
     "removeButtonTextA11yFr": "Remove button text (french) [FR] ",
+    "translate": {
+      "repeatingSet": "Repeating set [FR]",
+      "addButtonText": "Button label - Add to set [FR]",
+      "removeButtonText": "Button label - Remove from set [FR]"
+    },
     "dialog": {
       "customizeElement": "Customize element [FR]",
       "title": "Customize set [FR]",