diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx index ad8ca9878f..c297b7a5b5 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx +++ b/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) => , @@ -46,7 +44,7 @@ describe('ImageInput', () => { .mockResolvedValue('/images/illustration-coffee.jpg'); const mockClearFn = vi.fn(); - function StatefulInput() { + function StatefulInput(props: Partial) { const [imageUrl, setImageUrl] = useState(''); const [error, setError] = useState(''); @@ -68,15 +66,14 @@ describe('ImageInput', () => { return ( } + component={(componentProps) => } /> ); } @@ -148,7 +145,10 @@ describe('ImageInput', () => { }); it('should clear an uploaded image', async () => { - const { container } = render(); + const clearButtonLabel = 'Clear file'; + const { container } = render( + , + ); 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(() => { diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx index 50144833fb..46ec270af7 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx +++ b/packages/circuit-ui/components/ImageInput/ImageInput.stories.tsx @@ -31,10 +31,8 @@ export const Base = (args: ImageInputProps) => ; Base.args = { label: 'Upload an image', - clearButtonLabel: 'Clear', onChange: () => Promise.resolve(), onClear: () => {}, - loadingLabel: 'Uploading', component: Avatar, disabled: false, }; @@ -42,11 +40,9 @@ Base.args = { export const WithImage = () => ( Promise.resolve()} onClear={() => {}} - loadingLabel="Uploading" component={(props) => } /> ); @@ -55,13 +51,11 @@ export const Invalid = (args: ImageInputProps) => ( 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) => } /> ); @@ -70,11 +64,9 @@ export const Disabled = (args: ImageInputProps) => ( Promise.resolve()} onClear={() => {}} disabled - loadingLabel="Uploading" component={(props) => } hideLabel={false} /> @@ -123,13 +115,11 @@ export const Stateful = () => { return ( } /> ); @@ -138,10 +128,8 @@ export const Stateful = () => { export const CustomComponentImg = () => ( Promise.resolve()} onClear={() => {}} - loadingLabel="Uploading" component={({ src, ...props }) => ( ( Promise.resolve()} onClear={() => {}} - loadingLabel="Uploading" component={({ src, ...props }) => (
, '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} /> ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore import.meta.glob is supported by Vite + import.meta.glob('./*.json', { + eager: true, + }), +); diff --git a/packages/circuit-ui/components/ImageInput/translations/it-CH.json b/packages/circuit-ui/components/ImageInput/translations/it-CH.json new file mode 100644 index 0000000000..3b93b4ee1c --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/it-CH.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Cancella", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/it-IT.json b/packages/circuit-ui/components/ImageInput/translations/it-IT.json new file mode 100644 index 0000000000..3b93b4ee1c --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/it-IT.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Cancella", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/lt-LT.json b/packages/circuit-ui/components/ImageInput/translations/lt-LT.json new file mode 100644 index 0000000000..b30920ec62 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/lt-LT.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Išvalyti", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/lv-LV.json b/packages/circuit-ui/components/ImageInput/translations/lv-LV.json new file mode 100644 index 0000000000..871533a4e7 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/lv-LV.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Notīrīt", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/nb-NO.json b/packages/circuit-ui/components/ImageInput/translations/nb-NO.json new file mode 100644 index 0000000000..6184c00ec9 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/nb-NO.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Tøm", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/nl-BE.json b/packages/circuit-ui/components/ImageInput/translations/nl-BE.json new file mode 100644 index 0000000000..1e93f887d4 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/nl-BE.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Wissen", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/nl-NL.json b/packages/circuit-ui/components/ImageInput/translations/nl-NL.json new file mode 100644 index 0000000000..1e93f887d4 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/nl-NL.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Wissen", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/pl-PL.json b/packages/circuit-ui/components/ImageInput/translations/pl-PL.json new file mode 100644 index 0000000000..9e9e47ca3c --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/pl-PL.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Wyczyść", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/pt-BR.json b/packages/circuit-ui/components/ImageInput/translations/pt-BR.json new file mode 100644 index 0000000000..a1c954dc76 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/pt-BR.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Limpar", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/pt-PT.json b/packages/circuit-ui/components/ImageInput/translations/pt-PT.json new file mode 100644 index 0000000000..a1c954dc76 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/pt-PT.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Limpar", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/ro-RO.json b/packages/circuit-ui/components/ImageInput/translations/ro-RO.json new file mode 100644 index 0000000000..f364a12aa7 --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/ro-RO.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Șterge tot", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/sk-SK.json b/packages/circuit-ui/components/ImageInput/translations/sk-SK.json new file mode 100644 index 0000000000..b118dc7c2f --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/sk-SK.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Vymazať", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/sl-SI.json b/packages/circuit-ui/components/ImageInput/translations/sl-SI.json new file mode 100644 index 0000000000..dfdb08e4cb --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/sl-SI.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Počisti", + "loadingLabel": "Uploading..." +} diff --git a/packages/circuit-ui/components/ImageInput/translations/sv-SE.json b/packages/circuit-ui/components/ImageInput/translations/sv-SE.json new file mode 100644 index 0000000000..2b655dee7a --- /dev/null +++ b/packages/circuit-ui/components/ImageInput/translations/sv-SE.json @@ -0,0 +1,4 @@ +{ + "clearButtonLabel": "Rensa", + "loadingLabel": "Uploading..." +}