diff --git a/packages/components/src/components/ProgressBar/ProgressBar.tsx b/packages/components/src/components/ProgressBar/ProgressBar.tsx index dcd2a0908..665864f59 100644 --- a/packages/components/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/components/src/components/ProgressBar/ProgressBar.tsx @@ -3,10 +3,11 @@ import type { FC, PropsWithChildren } from "react"; import React from "react"; import styles from "./ProgressBar.module.scss"; import clsx from "clsx"; -import { useNumberFormatter } from "react-aria"; +import { useLocalizedStringFormatter, useNumberFormatter } from "react-aria"; import type { PropsWithStatus } from "@/lib/types/props"; import type { PropsContext } from "@/lib/propsContext"; import { PropsContextProvider } from "@/lib/propsContext"; +import locales from "./locales/*.locale.json"; export interface ProgressBarProps extends PropsWithChildren>, @@ -33,6 +34,8 @@ export const ProgressBar: FC = (props) => { styles[status], ); + const stringFormatter = useLocalizedStringFormatter(locales); + const formatter = useNumberFormatter(props.formatOptions); const maxValueText = @@ -53,7 +56,9 @@ export const ProgressBar: FC = (props) => { {children} - {maxValueText ? `${valueText} of ${maxValueText}` : valueText} + {maxValueText + ? `${valueText} ${stringFormatter.format("progressBar.of")} ${maxValueText}` + : valueText}
diff --git a/packages/components/src/components/ProgressBar/locales/de-DE.locale.json b/packages/components/src/components/ProgressBar/locales/de-DE.locale.json new file mode 100644 index 000000000..040089220 --- /dev/null +++ b/packages/components/src/components/ProgressBar/locales/de-DE.locale.json @@ -0,0 +1,3 @@ +{ + "progressBar.of": "von" +} diff --git a/packages/components/src/components/ProgressBar/locales/en-EN.locale.json b/packages/components/src/components/ProgressBar/locales/en-EN.locale.json new file mode 100644 index 000000000..e5ea20c4f --- /dev/null +++ b/packages/components/src/components/ProgressBar/locales/en-EN.locale.json @@ -0,0 +1,3 @@ +{ + "progressBar.of": "of" +}