Add i18n keys for Image component; define en values. (#310)

Author: mathewjordan

src/components/Image/Controls/Controls.tsx

@@ -9,6 +9,7 @@ import { CanvasNormalized } from "@iiif/presentation-3";
 import { Options } from "openseadragon";
 import React, { useEffect } from "react";
 import { Wrapper } from "src/components/Image/Controls/Controls.styled";
+import { useTranslation } from "react-i18next";
 
 const ZoomIn = () => {
   return (
@@ -73,6 +74,7 @@ const Controls = ({
   _cloverViewerHasPlaceholder: boolean;
   config: Options;
 }) => {
+  const { t } = useTranslation();
   const viewerState: ViewerContextStore = useViewerState();
   const { activeCanvas, plugins, vault, openSeadragonViewer } = viewerState;
 
@@ -116,31 +118,40 @@ const Controls = ({
     >
       {config.showZoomControl && (
         <>
-          <Button id={config.zoomInButton as string} label="zoom in">
+          <Button id={config.zoomInButton as string} label={t("imageZoomIn")}>
             <ZoomIn />
           </Button>
-          <Button id={config.zoomOutButton as string} label="zoom out">
+          <Button id={config.zoomOutButton as string} label={t("imageZoomOut")}>
             <ZoomOut />
           </Button>
         </>
       )}
       {config.showFullPageControl && (
-        <Button id={config.fullPageButton as string} label="full page">
+        <Button
+          id={config.fullPageButton as string}
+          label={t("imageFullScreen")}
+        >
           <ZoomFullScreen />
         </Button>
       )}
       {config.showRotationControl && (
         <>
-          <Button id={config.rotateRightButton as string} label="rotate right">
+          <Button
+            id={config.rotateRightButton as string}
+            label={t("imageRotateRight")}
+          >
             <Rotate />
           </Button>
-          <Button id={config.rotateLeftButton as string} label="rotate left">
+          <Button
+            id={config.rotateLeftButton as string}
+            label={t("imageRotateLeft")}
+          >
             <Rotate />
           </Button>
         </>
       )}
       {config.showHomeControl && (
-        <Button id={config.homeButton as string} label="reset">
+        <Button id={config.homeButton as string} label={t("imageResetZoom")}>
           <Reset />
         </Button>
       )}

src/components/Image/index.tsx

@@ -1,3 +1,5 @@
+import "src/i18n/config";
+
 import { Annotation, InternationalString } from "@iiif/presentation-3";
 import OpenSeadragon, { Options } from "openseadragon";
 import { parseImageBody, parseSrc } from "src/lib/openseadragon-helpers";

src/components/Viewer/Painting/Toggle.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { ToggleStyled } from "./Painting.styled";
+import { useTranslation } from "react-i18next";
 
 interface ToggleProps {
   handleToggle: () => void;
   isInteractive: boolean;
   isMedia: boolean;
 }
 
-const CloseIcon = () => {
+const CloseIcon = ({ label }: { label: string }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -16,13 +17,13 @@ const CloseIcon = () => {
       viewBox="0 0 512 512"
       role="img"
     >
-      <title id="close-svg-title">close</title>
+      <title id="close-svg-title">{label}</title>
       <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" />
     </svg>
   );
 };
 
-const OpenIcon = ({ isMedia }: { isMedia: boolean }) => {
+const OpenIcon = ({ isMedia, label }: { isMedia: boolean; label: string }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +32,7 @@ const OpenIcon = ({ isMedia }: { isMedia: boolean }) => {
       viewBox="0 0 512 512"
       role="img"
     >
-      <title id="open-svg-title">open</title>
+      <title id="open-svg-title">{label}</title>
 
       {isMedia ? (
         <path d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z" />
@@ -50,14 +51,20 @@ const Toggle: React.FC<ToggleProps> = ({
   isInteractive,
   isMedia,
 }) => {
+  const { t } = useTranslation();
+
   return (
     <ToggleStyled
       onClick={handleToggle}
       isInteractive={isInteractive}
       isMedia={isMedia}
       data-testid="placeholder-toggle"
     >
-      {isInteractive ? <CloseIcon /> : <OpenIcon isMedia={isMedia} />}
+      {isInteractive ? (
+        <CloseIcon label={t("commonClose")} />
+      ) : (
+        <OpenIcon isMedia={isMedia} label={t("commonOpen")} />
+      )}
     </ToggleStyled>
   );
 };

src/i18n/locales/en.json

@@ -1,6 +1,7 @@
 {
   "commonClose": "Close",
   "commonNext": "Next",
+  "commonOpen": "Open",
   "commonPrevious": "Previous",
   "commonSearch": "Search",
   "commonSearchPlaceholder": "Search...",
@@ -12,6 +13,12 @@
   "contentSearchPlaceholder": "Search",
   "contentSearchResultsNone": "No Results",
   "contentSearchResultsMore": "More Results",
+  "imageFullScreen": "Full screen",
+  "imageResetZoom": "Reset zoom",
+  "imageRotateLeft": "Rotate left",
+  "imageRotateRight": "Rotate right",
+  "imageZoomIn": "Zoom in",
+  "imageZoomOut": "Zoom out",
   "informationPanelTabs": "Select",
   "informationPanelTabsClose": "Viewer",
   "informationPanelTabsAbout": "About",