Add translations for ImageInput component

packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx

@@ -31,8 +31,6 @@ import { ImageInput, type ImageInputProps } from './ImageInput.js';
 
 const defaultProps: ImageInputProps = {
   label: 'Upload an image',
-  loadingLabel: 'Uploading',
-  clearButtonLabel: 'Clear',
   onChange: () => Promise.resolve(),
   onClear: () => {},
   component: (props) => <Avatar {...props} alt="" />,
@@ -46,7 +44,7 @@ describe('ImageInput', () => {
     .mockResolvedValue('/images/illustration-coffee.jpg');
   const mockClearFn = vi.fn();
 
-  function StatefulInput() {
+  function StatefulInput(props: Partial<ImageInputProps>) {
     const [imageUrl, setImageUrl] = useState<string>('');
     const [error, setError] = useState<string>('');
 
@@ -68,15 +66,14 @@ describe('ImageInput', () => {
 
     return (
       <ImageInput
+        {...props}
         label="Upload an image"
-        clearButtonLabel="Clear"
         src={imageUrl}
         onChange={onChange}
         onClear={onClear}
         invalid={!!error}
         validationHint={error}
-        loadingLabel="Uploading"
-        component={(props) => <Avatar {...props} alt="" />}
+        component={(componentProps) => <Avatar {...componentProps} alt="" />}
       />
     );
   }
@@ -148,7 +145,10 @@ describe('ImageInput', () => {
     });
 
     it('should clear an uploaded image', async () => {
-      const { container } = render(<StatefulInput />);
+      const clearButtonLabel = 'Clear file';
+      const { container } = render(
+        <StatefulInput clearButtonLabel={clearButtonLabel} />,
+      );
       const inputEl = screen.getByLabelText(defaultProps.label);
 
       await userEvent.upload(inputEl, file);
@@ -160,7 +160,7 @@ describe('ImageInput', () => {
       );
 
       await userEvent.click(
-        screen.getByRole('button', { name: defaultProps.clearButtonLabel }),
+        screen.getByRole('button', { name: clearButtonLabel }),
       );
 
       await waitFor(() => {

packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx

@@ -31,22 +31,18 @@ export const Base = (args: ImageInputProps) => <ImageInput {...args} />;
 
 Base.args = {
   label: 'Upload an image',
-  clearButtonLabel: 'Clear',
   onChange: () => Promise.resolve(),
   onClear: () => {},
-  loadingLabel: 'Uploading',
   component: Avatar,
   disabled: false,
 };
 
 export const WithImage = () => (
   <ImageInput
     label="Upload an image"
-    clearButtonLabel="Clear"
     src="/images/illustration-coffee.jpg"
     onChange={() => Promise.resolve()}
     onClear={() => {}}
-    loadingLabel="Uploading"
     component={(props) => <Avatar {...props} alt="" />}
   />
 );
@@ -55,13 +51,11 @@ export const Invalid = (args: ImageInputProps) => (
   <ImageInput
     {...args}
     label="Upload an image"
-    clearButtonLabel="Clear"
     src="/images/illustration-coffee.jpg"
     onChange={() => Promise.resolve()}
     onClear={() => {}}
     invalid
     validationHint="The uploaded image exceeds the maximum allowed size. Please use an image with a size below 20MB."
-    loadingLabel="Uploading"
     component={(props) => <Avatar {...props} alt="" />}
   />
 );
@@ -70,11 +64,9 @@ export const Disabled = (args: ImageInputProps) => (
   <ImageInput
     {...args}
     label="Upload an image"
-    clearButtonLabel="Clear"
     onChange={() => Promise.resolve()}
     onClear={() => {}}
     disabled
-    loadingLabel="Uploading"
     component={(props) => <Avatar {...props} alt="" />}
     hideLabel={false}
   />
@@ -123,13 +115,11 @@ export const Stateful = () => {
   return (
     <ImageInput
       label="Upload an image"
-      clearButtonLabel="Clear"
       src={imageUrl}
       onChange={onChange}
       onClear={onClear}
       invalid={!!error}
       validationHint={error}
-      loadingLabel="Uploading"
       component={(props) => <Avatar {...props} alt="" />}
     />
   );
@@ -138,10 +128,8 @@ export const Stateful = () => {
 export const CustomComponentImg = () => (
   <ImageInput
     label="Upload an image"
-    clearButtonLabel="Clear"
     onChange={() => Promise.resolve()}
     onClear={() => {}}
-    loadingLabel="Uploading"
     component={({ src, ...props }) => (
       <img
         style={{
@@ -168,10 +156,8 @@ CustomComponentImg.storyName = 'Custom Component (with an img element)';
 export const CustomComponentDiv = () => (
   <ImageInput
     label="Upload an image"
-    clearButtonLabel="Clear"
     onChange={() => Promise.resolve()}
     onClear={() => {}}
-    loadingLabel="Uploading"
     component={({ src, ...props }) => (
       <div
         {...props}

packages/circuit-ui/components/ImageInput/ImageInput.tsx

@@ -42,8 +42,10 @@ import {
   isSufficientlyLabelled,
 } from '../../util/errors.js';
 import { clsx } from '../../styles/clsx.js';
+import { useI18n } from '../../hooks/useI18n/useI18n.js';
 
 import classes from './ImageInput.module.css';
+import { translations } from './translations/index.js';
 
 export interface ImageInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
@@ -68,11 +70,11 @@ export interface ImageInputProps
   /**
    * An accessible label for the "clear" icon button.
    */
-  clearButtonLabel: string;
+  clearButtonLabel?: string;
   /**
    * An accessible label to communicate the input's loading state.
    */
-  loadingLabel: string;
+  loadingLabel?: string;
   /**
    * The source URL of an existing Avatar to be displayed in the ImageInput.
    */
@@ -104,26 +106,28 @@ export interface ImageInputProps
 /**
  * The ImageInput component allows users to upload images.
  */
-export const ImageInput = ({
-  label,
-  src,
-  id: customId,
-  clearButtonLabel,
-  onChange,
-  onClear,
-  disabled,
-  validationHint,
-  required,
-  invalid = false,
-  optionalLabel,
-  loadingLabel,
-  hideLabel = true,
-  component: Component,
-  className,
-  style,
-  'aria-describedby': descriptionId,
-  ...props
-}: ImageInputProps) => {
+export const ImageInput = (props: ImageInputProps) => {
+  const {
+    label,
+    src,
+    id: customId,
+    clearButtonLabel,
+    onChange,
+    onClear,
+    disabled,
+    validationHint,
+    required,
+    invalid = false,
+    optionalLabel,
+    loadingLabel,
+    hideLabel = true,
+    component: Component,
+    className,
+    style,
+    'aria-describedby': descriptionId,
+    ...rest
+  } = useI18n(props, translations);
+
   if (
     process.env.NODE_ENV !== 'production' &&
     process.env.NODE_ENV !== 'test'
@@ -264,7 +268,7 @@ export const ImageInput = ({
           disabled={disabled || isLoading}
           aria-invalid={invalid && 'true'}
           aria-describedby={descriptionIds}
-          {...props}
+          {...rest}
         />
         <FieldLabel
           htmlFor={inputId}

packages/circuit-ui/components/ImageInput/translations/bg-BG.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Изчистване",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/cs-CZ.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Vymazat",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/da-DK.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Ryd",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/de-AT.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Auswahl aufheben",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/de-CH.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Auswahl aufheben",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/de-DE.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Auswahl aufheben",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/de-LU.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Auswahl aufheben",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/el-CY.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Εκκαθάριση",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/el-GR.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Εκκαθάριση",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/en-AU.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Clear",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/en-GB.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Clear",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/en-IE.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Clear",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/en-MT.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Clear",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/en-US.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Clear",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/es-CL.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Borrar",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/es-CO.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Borrar",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/es-ES.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Borrar",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/es-MX.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Borrar",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/es-PE.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Borrar",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/es-US.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Borrar",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/et-EE.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Tühjenda",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/fi-FI.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Tyhjennä",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/fr-BE.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Réinitialiser",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/fr-CH.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Réinitialiser",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/fr-FR.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Réinitialiser",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/fr-LU.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Réinitialiser",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/hr-HR.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Očisti",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/hu-HU.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Törlés",
+  "loadingLabel": "Uploading..."
+}

packages/circuit-ui/components/ImageInput/translations/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2024, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { transformModulesToTranslations } from '../../../util/i18n.js';
+
+export const translations = transformModulesToTranslations<
+  typeof import('./en-US.json')
+>(
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore import.meta.glob is supported by Vite
+  import.meta.glob('./*.json', {
+    eager: true,
+  }),
+);

packages/circuit-ui/components/ImageInput/translations/it-CH.json

@@ -0,0 +1,4 @@
+{
+  "clearButtonLabel": "Cancella",
+  "loadingLabel": "Uploading..."
+}