sumup-oss · connor-baer · Dec 4, 2024 · Nov 19, 2024 · Nov 20, 2024 · Nov 20, 2024
@@ -0,0 +1,14 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Added default translations for labels that don't change with the usage of the component. Translations are included for all locales where SumUp operates, namely `bg-BG`, `cs-CZ`, `da-DK`, `de-AT`, `de-CH`, `de-DE`, `de-LU`, `el-CY`, `el-GR`, `en-AU`, `en-GB`, `en-IE`, `en-MT`, `en-US`, `es-CL`, `es-CO`, `es-ES`, `es-MX`, `es-PE`, `es-US`, `et-EE`, `fi-FI`, `fr-BE`, `fr-CH`, `fr-FR`, `fr-LU`, `hr-HR`, `hu-HU`, `it-CH`, `it-IT`, `lt-LT`, `lv-LV`, `nb-NO`, `nl-BE`, `nl-NL`, `pl-PL`, `pt-BR`, `pt-PT`, `ro-RO`, `sk-SK`, `sl-SI`, and `sv-SE`. The current locale is determined based on the `locale` prop or the `navigator.language` API in environments that support it. If no supported locale is found, `en-US` is used as a fallback.
+
+The following component props are now optional:
+
+- Button, IconButton: `loadingLabel`
+- Calendar: `prevMonthButtonLabel`, `nextMonthButtonLabel`
+- DateInput: `yearInputLabel`, `monthInputLabel`, `dayInputLabel`, `openCalendarButtonLabel`, `closeCalendarButtonLabel`, `applyDateButtonLabel`, `clearDateButtonLabel`
+- Toggletip: `closeButtonLabel`
+
+We'll add default translations to more components in the future.
@@ -110,6 +110,5 @@ export const Loading = (args: ButtonProps) => {
 };
 
 Loading.args = {
-  loadingLabel: 'Loading',
   isLoading: true,
 };
@@ -90,7 +90,6 @@ export const Loading = (args: IconButtonProps) => {
 };
 
 Loading.args = {
-  loadingLabel: 'Loading',
   isLoading: true,
   icon: Plus,
 };
@@ -53,7 +53,7 @@ describe('Button', () => {
     });
 
     it('should render loading button with loading label', () => {
-      const loadingLabel = 'Loading';
+      const loadingLabel = 'Submitting form';
       render(<Button isLoading loadingLabel={loadingLabel} />);
       expect(screen.getByText(loadingLabel)).toBeVisible();
     });
@@ -76,15 +76,15 @@ describe('Button', () => {
     });
 
     it('should render as disabled when loading', () => {
-      render(<Button isLoading loadingLabel="Loading" />);
+      render(<Button isLoading />);
 
       const button = screen.getByRole('button');
 
       expect(button).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('should render as disabled when not loading', () => {
-      render(<Button disabled isLoading={false} loadingLabel="Loading" />);
+      render(<Button disabled isLoading={false} />);
 
       const button = screen.getByRole('button');
 
@@ -134,17 +134,13 @@ describe('Button', () => {
     });
 
     it('should meet accessibility guidelines for Loading button', async () => {
-      const { container } = render(
-        <Button isLoading={true} loadingLabel="Loading">
-          Button
-        </Button>,
-      );
+      const { container } = render(<Button isLoading={true}>Button</Button>);
       const actual = await axe(container);
       expect(actual).toHaveNoViolations();
     });
 
     it('should have aria-busy and aria-live for a loading button', () => {
-      render(<Button isLoading loadingLabel="Loading" />);
+      render(<Button isLoading />);
       const button = screen.getByRole('button');
 
       expect(button).toHaveAttribute('aria-live', 'polite');

@@ -32,8 +32,11 @@ import {
 } from '../../util/errors.js';
 import { utilClasses } from '../../styles/utility.js';
 import { clsx } from '../../styles/clsx.js';
+import { useI18n } from '../../hooks/useI18n/useI18n.js';
+import type { Locale } from '../../util/i18n.js';
 
 import classes from './base.module.css';
+import { translations } from './translations/index.js';
 
 type LinkElProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>;
 type ButtonElProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
@@ -89,6 +92,13 @@ export type SharedButtonProps = LinkElProps &
      * Render the Button using any element.
      */
     'as'?: AsPropType;
+    /**
+     * One or more [IETF BCP 47](https://en.wikipedia.org/wiki/IETF_language_tag)
+     * locale identifiers such as `'de-DE'` or `['GB', 'en-US']`.
+     * When passing an array, the first supported locale is used.
+     * Defaults to `navigator.language` in supported environments.
+     */
+    locale?: Locale;
   };
 
 export type CreateButtonComponentProps = SharedButtonProps & {
@@ -141,8 +151,9 @@ export function createButtonComponent<Props>(
       icon: LeadingIcon,
       navigationIcon: TrailingIcon,
       as,
+      locale,
       ...sharedProps
-    } = mapProps(props);
+    } = useI18n(mapProps(props), translations);
 
     const components = useComponents();
     const Link = components.Link as AsPropType;
@@ -163,18 +174,6 @@ export function createButtonComponent<Props>(
       event.nativeEvent.stopImmediatePropagation();
     };
 
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      process.env.NODE_ENV !== 'test' &&
-      hasLoadingState &&
-      !isSufficientlyLabelled(loadingLabel)
-    ) {
-      throw new AccessibilityError(
-        componentName,
-        "The `loadingLabel` prop is missing or invalid. Remove the `isLoading` prop if you don't intend to use the Button's loading state.",
-      );
-    }
-
     if (
       process.env.NODE_ENV !== 'production' &&
       process.env.NODE_ENV !== 'test' &&

@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Зареждане"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Načítám"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Henter"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Lade"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Lade"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Lade"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Lade"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Φόρτωση"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Φόρτωση"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Loading"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Loading"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Loading"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Loading"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Loading"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Cargando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Cargando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Cargando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Cargando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Cargando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Cargando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Laeb"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Lataa..."
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Chargement"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Chargement"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Chargement"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Chargement"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Učitavanje"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Betöltés"
+}
@@ -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,
+  }),
+);
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "In caricamento"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "In caricamento"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Įkeliama"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Ielādē"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Laster"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Laden"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Laden"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Wczytuje dane"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Carregando"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "A carregar"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Se încarcă"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Prebieha načítavanie…"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Nalaganje"
+}
@@ -0,0 +1,3 @@
+{
+  "loadingLabel": "Hämtar"
+}
@@ -45,8 +45,6 @@ function wait(ms: number) {
 describe('Calendar', () => {
   const baseProps = {
     selection: new Temporal.PlainDate(2020, 3, 15),
-    prevMonthButtonLabel: 'Previous month',
-    nextMonthButtonLabel: 'Next month',
   };
 
   function getDayElement(day: number) {

@@ -46,38 +46,15 @@ Base.args = {
   selection: today.add({ days: 3 }),
   minDate: today.subtract({ days: 7 }),
   maxDate: today.add({ months: 3 }),
-  prevMonthButtonLabel: 'Previous month',
-  nextMonthButtonLabel: 'Next month',
 };
 
 export const Localized = ({ selection, ...args }: CalendarProps) => {
   const [date, setDate] = useState(selection);
   return (
     <Stack>
-      <Calendar
-        {...args}
-        selection={date}
-        onSelect={setDate}
-        locale="de-DE"
-        prevMonthButtonLabel="Vorheriger Monat"
-        nextMonthButtonLabel="Nächster Monat"
-      />
-      <Calendar
-        {...args}
-        selection={date}
-        onSelect={setDate}
-        locale="bg-BG"
-        prevMonthButtonLabel="Предишния месец"
-        nextMonthButtonLabel="Следващият месец"
-      />
-      <Calendar
-        {...args}
-        selection={date}
-        onSelect={setDate}
-        locale="pt-BR"
-        prevMonthButtonLabel="Mês anterior"
-        nextMonthButtonLabel="Mês próximo"
-      />
+      <Calendar {...args} selection={date} onSelect={setDate} locale="de-DE" />
+      <Calendar {...args} selection={date} onSelect={setDate} locale="bg-BG" />
+      <Calendar {...args} selection={date} onSelect={setDate} locale="pt-BR" />
     </Stack>
   );
 };
@@ -98,8 +75,6 @@ Modifiers.args = {
   selection: today.add({ days: 3 }),
   minDate: today.subtract({ days: 7 }),
   maxDate: today.add({ months: 3 }),
-  prevMonthButtonLabel: 'Previous month',
-  nextMonthButtonLabel: 'Next month',
   modifiers: {
     [today.subtract({ days: 10 }).toString()]: {
       description: 'Booked',