@12-apps/ui 6.78.4 → 6.80.0

package/src/components/typography/Code/Code.tsx

@@ -4,21 +4,32 @@ import Box from '@mui/material/Box/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Tooltip from '@mui/material/Tooltip/index.js';
 import { alpha, styled } from '@mui/material/styles/index.js';
+import type { Theme } from '@mui/material/styles/index.js';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';
 import { modeInk, neutralTones } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
 
+/**
+ * The badge's inset, its own height (12px type at the block's 1.5 line height,
+ * 2px padding and a 1px border, each twice) and a gap of the same inset again.
+ */
+const languageClearance = (theme: Theme): string =>
+  `calc(${theme.spacing(2)} + ${rem(theme, 12 * 1.5 + 4 + 2)})`;
+
 const StyledCodeContainer = styled(Box, {
   shouldForwardProp: (prop) =>
-    !['customVariant', 'customSize', 'copyable'].includes(prop as string),
+    !['customVariant', 'customSize', 'copyable', 'labelled'].includes(prop as string),
 })<{
   customVariant?: string;
   customSize?: string;
   copyable?: boolean;
+  /** A language badge sits in the top-left corner. */
+  labelled?: boolean;
   component?: React.ElementType;
-}>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
+}>(({ theme, customVariant = 'inline', customSize = 'md', copyable, labelled }) => {
   // Size mapping
   const sizeMap = {
     xs: { fontSize: rem(theme, 12), padding: rems(theme, 2, 4) },
@@ -87,7 +98,11 @@ const StyledCodeContainer = styled(Box, {
     },
   };
 
-  return variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.inline;
+  return {
+    ...(variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.inline),
+    // The first line starts below the language badge rather than under it.
+    ...(labelled && { paddingTop: languageClearance(theme) }),
+  };
 });
 
 const StyledCode = styled('code')({
@@ -188,7 +203,11 @@ const resolveCodeFlags = (
 // means the copied/not-copied branches do not count against the main render, and
 // the flash re-renders only the button. Non-string children are still a no-op on
 // click, exactly as before.
-const CodeCopyButton: React.FC<{ source: React.ReactNode }> = ({ source }) => {
+const CodeCopyButton: React.FC<{ source: React.ReactNode; copyLabel: string; copiedLabel: string }> = ({
+  source,
+  copyLabel,
+  copiedLabel,
+}) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -203,7 +222,7 @@ const CodeCopyButton: React.FC<{ source: React.ReactNode }> = ({ source }) => {
   };
 
   return (
-    <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+    <Tooltip title={copied ? copiedLabel : copyLabel}>
       <CopyButton onClick={handleCopy} size="small" color={copied ? 'success' : 'default'}>
         {copied ? <Check /> : <ContentCopy />}
       </CopyButton>
@@ -217,6 +236,8 @@ export const Code = React.forwardRef<HTMLElement, CodeProps>(
       variant = 'inline',
       language,
       copyable = false,
+      copyLabel = EN_US_UI_LABELS.code.copy,
+      copiedLabel = EN_US_UI_LABELS.code.copied,
       lineNumbers = false,
       size = 'md',
       children,
@@ -242,13 +263,14 @@ export const Code = React.forwardRef<HTMLElement, CodeProps>(
         customVariant={variant}
         customSize={size}
         copyable={showCopy}
+        labelled={showLanguage}
         {...props}
       >
         {showLanguage && <LanguageLabel>{language}</LanguageLabel>}
 
         <StyledCode>{processedChildren}</StyledCode>
 
-        {showCopy && <CodeCopyButton source={children} />}
+        {showCopy && <CodeCopyButton source={children} copyLabel={copyLabel} copiedLabel={copiedLabel} />}
       </StyledCodeContainer>
     );
   },

package/src/components/typography/Code/Code.types.ts

@@ -7,6 +7,10 @@ export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   variant?: CodeVariant;
   language?: string;
   copyable?: boolean;
+  /** The copy button's tooltip and name; defaults to `UI_LABELS['en-US'].code.copy`. */
+  copyLabel?: string;
+  /** The same button right after a copy; defaults to `UI_LABELS['en-US'].code.copied`. */
+  copiedLabel?: string;
   lineNumbers?: boolean;
   size?: SizeValue;
   children: React.ReactNode;

package/src/components/utility/AnimatedIcon/AnimatedIcon.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { withDefaults } from '../../../utils/withDefaults';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 
 import { iconSx, sizeConfigs } from './AnimatedIcon.styles';
 import type { IconStyleFlags } from './AnimatedIcon.styles';
@@ -61,7 +62,7 @@ export const AnimatedIcon: FC<AnimatedIconProps> = (props) => {
       className={className}
       style={style}
       role="img"
-      aria-label={ariaLabel || `Animated ${variant} icon`}
+      aria-label={ariaLabel || EN_US_UI_LABELS.animatedIcon.name(variant)}
       onClick={onClick}
       tabIndex={tabIndex}
       onFocus={onFocus}

package/src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx

@@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography/index.js';
 import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
 import { rem } from '../../../tokens/relative';
 
 import type { InfiniteScrollProps } from './InfiniteScroll.types';
@@ -38,9 +39,12 @@ export const DefaultEndMessage: React.FC<{ endText: string }> = ({ endText }) =>
   </Box>
 );
 
-export const DefaultError: React.FC<{ error: Error }> = ({ error }) => (
+export const DefaultError: React.FC<{ error: Error; errorText?: string }> = ({
+  error,
+  errorText = EN_US_UI_LABELS.infiniteScroll.loadFailed,
+}) => (
   <Alert severity="error" sx={{ m: 2 }}>
-    {error.message || 'An error occurred while loading more items'}
+    {error.message || errorText}
   </Alert>
 );
 

package/src/components/utility/InfiniteScroll/InfiniteScroll.tsx

@@ -25,6 +25,7 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   endText,
   endMessage,
   error,
+  errorText,
   errorComponent,
   onError,
   className,
@@ -54,7 +55,7 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   // spinner, or the sentinel that asks for the next page.
   const renderSentinel = () => {
     if (!hasMore) return endMessage || <DefaultEndMessage endText={endText} />;
-    if (error) return errorComponent || <DefaultError error={error} />;
+    if (error) return errorComponent || <DefaultError error={error} errorText={errorText} />;
     if (loading) return loader || <DefaultLoader loadingText={loadingText} />;
 
     return (

package/src/components/utility/InfiniteScroll/InfiniteScroll.types.ts

@@ -22,6 +22,12 @@ export interface InfiniteScrollProps {
   loader?: ReactNode;
   endMessage?: ReactNode;
   error?: Error | null;
+  /**
+   * The error line when `error` carries no message of its own. Defaults to the
+   * English it always read; a pt-BR host passes
+   * `UI_LABELS['pt-BR'].infiniteScroll.loadFailed`.
+   */
+  errorText?: string;
   errorComponent?: ReactNode;
   onError?: (error: Error) => void;
   className?: string;

package/src/components/utility/WorkflowStep/WorkflowStep.helpers.ts

@@ -1,6 +1,9 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
 import type { WorkflowStepItem, WorkflowStepProps } from './WorkflowStep.types';
+import type { WorkflowStepLabels } from '../../../copy/labels';
+import { EN_US_UI_LABELS } from '../../../en-US.labels';
+import { resolveLabels } from '../../../utils/resolve-labels';
 import { neutralTones } from '../../../tokens/ink';
 import { paletteKey } from '../../../tokens/scales';
 
@@ -158,6 +161,10 @@ export const resolveWorkflowStepProps = (
 ): ResolvedWorkflowStepProps =>
   ({ ...WORKFLOW_DEFAULTS, ...definedProps(props) }) as ResolvedWorkflowStepProps;
 
+/** The caller's labels over the English ones, key by key. */
+export const workflowLabels = (labels?: Partial<WorkflowStepLabels>): WorkflowStepLabels =>
+  resolveLabels(EN_US_UI_LABELS.workflowStep, labels);
+
 /**
  * The progressbar's `aria-valuetext`: `Step N of M: <title>` while `currentStep`
  * names a step, and `Step N of M` when it does not (past the end, below zero, or
@@ -167,8 +174,9 @@ export const resolveWorkflowStepProps = (
 export const progressValueText = (
   steps: readonly WorkflowStepItem[],
   currentStep: number,
+  labels?: Partial<WorkflowStepLabels>,
 ): string => {
-  const position = `Step ${currentStep + 1} of ${steps.length}`;
+  const position = workflowLabels(labels).progress(currentStep + 1, steps.length);
   const step = steps[currentStep];
   return step === undefined ? position : `${position}: ${step.title}`;
 };

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -4,7 +4,7 @@ import { styled } from '@mui/material/styles/index.js';
 import React, { forwardRef, useCallback } from 'react';
 
 import type { StepColors } from './WorkflowStep.helpers';
-import { indicatorSizeFor, stepColors, stepPalette } from './WorkflowStep.helpers';
+import { indicatorSizeFor, stepColors, stepPalette, workflowLabels } from './WorkflowStep.helpers';
 import type {
   StepConnectorProps,
   StepContentProps,
@@ -227,6 +227,7 @@ const StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({
   animated,
   disabled,
   onClick,
+  labels,
   'data-testid': dataTestId,
 }, ref) => {
   const isDisabled = Boolean(disabled || step.disabled);
@@ -278,7 +279,7 @@ const StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({
       onKeyDown={handleKeyDown}
       role={interactive ? 'button' : undefined}
       tabIndex={!interactive ? undefined : isDisabled ? -1 : 0}
-      aria-label={`Step ${index + 1}: ${step.title}`}
+      aria-label={workflowLabels(labels).step(index + 1, step.title)}
       aria-current={isActive ? 'step' : undefined}
       aria-disabled={interactive && isDisabled ? true : undefined}
       data-testid={dataTestId}

package/src/components/utility/WorkflowStep/WorkflowStep.tsx

@@ -46,6 +46,7 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
     errorIcon,
     onStepClick,
     disabled,
+    labels,
     className,
     style,
     'data-testid': dataTestId,
@@ -75,7 +76,7 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
       aria-valuemin={0}
       aria-valuemax={valueMax}
       aria-valuenow={valueNow}
-      aria-valuetext={progressValueText(steps, currentStep)}
+      aria-valuetext={progressValueText(steps, currentStep, labels)}
       data-testid={dataTestId}
       {...other}
     >
@@ -98,6 +99,7 @@ export const WorkflowStep = forwardRef<HTMLDivElement, WorkflowStepProps>((rawPr
           animated={animated}
           disabled={disabled}
           onClick={handleStepClick}
+          labels={labels}
           dataTestId={dataTestId}
         />
       ))}

package/src/components/utility/WorkflowStep/WorkflowStep.types.ts

@@ -1,6 +1,8 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { ComponentProps } from 'react';
 
+import type { WorkflowStepLabels } from '../../../copy/labels';
+
 /**
  * Status of an individual workflow step
  */
@@ -78,6 +80,12 @@ export interface WorkflowStepProps extends Omit<ComponentProps<'div'>, 'onError'
   onStepClick?: (stepIndex: number, step: WorkflowStepItem) => void;
   /** Disable all interactions */
   disabled?: boolean;
+  /**
+   * The indicators' accessible names and the progressbar's value text. Any key
+   * left out keeps its English wording; a host passes
+   * `UI_LABELS[locale].workflowStep`.
+   */
+  labels?: Partial<WorkflowStepLabels>;
   /** Additional CSS class names */
   className?: string;
   /** Inline styles */
@@ -106,6 +114,8 @@ export interface StepIndicatorProps {
   animated: boolean;
   disabled: boolean;
   onClick?: (index: number, step: WorkflowStepItem) => void;
+  /** Names the indicator; English when omitted. */
+  labels?: Partial<WorkflowStepLabels>;
   'data-testid'?: string;
 }
 

package/src/components/utility/WorkflowStep/WorkflowStepRow.tsx

@@ -25,6 +25,7 @@ interface StepRowProps {
   animated: boolean;
   disabled: boolean;
   onClick: (index: number, step: WorkflowStepItem) => void;
+  labels?: WorkflowStepProps['labels'];
   dataTestId?: string;
 }
 
@@ -46,6 +47,7 @@ export const StepRow: React.FC<StepRowProps> = ({
   animated,
   disabled,
   onClick,
+  labels,
   dataTestId,
 }) => {
   const isCompleted = step.status === 'completed';
@@ -69,6 +71,7 @@ export const StepRow: React.FC<StepRowProps> = ({
         animated={animated}
         disabled={disabled}
         onClick={onClick}
+        labels={labels}
         data-testid={`${dataTestId}-indicator-${index}`}
       />
 

package/src/copy/data-display.ts

@@ -44,12 +44,31 @@ export interface MapPreviewCopy {
   mapType: string;
   fullscreen: string;
   search: string;
+  /**
+   * Everything below is optional so a host's existing pack keeps compiling; the
+   * shipped packs always carry it and the component falls back to the English one.
+   */
+  /** The search field's placeholder, unless the `searchPlaceholder` prop wins. */
+  searchPlaceholder?: string;
+  /** The map's accessible name, read again whenever the view moves. */
+  viewDescription?: (lat: string, lng: string, zoom: number) => string;
+  /** The map-type button's tooltip, given the type's name from `mapTypeNames`. */
+  mapTypeTitle?: (name: string) => string;
+  mapTypeNames?: { roadmap: string; satellite: string; hybrid: string; terrain: string };
+  /** The marker caption under the map: coordinates, then the zoom level. */
+  coordinates?: (lat: string, lng: string) => string;
+  zoomLevel?: (zoom: number) => string;
 }
 
 /** The carousel's two arrows, which carry a glyph and nothing else. */
 export interface CarouselCopy {
   previous: string;
   next: string;
+  /**
+   * Each indicator's accessible name, from its 1-based position. Optional so a
+   * host's existing pack keeps compiling; the shipped packs always carry it.
+   */
+  goToSlide?: (position: number) => string;
 }
 
 /** The request-timing diagram's own words: its region, its phases, its totals. */

package/src/copy/feedback.ts

@@ -27,6 +27,10 @@ export interface TutorialCopy {
   finish: string;
   /** The next/finish button's title while `requiresActionBeforeNext` blocks it. */
   requiresAction: string;
+  /** The "2 of 5" line under the step, when `showProgress` is on. Optional; the shipped packs carry it. */
+  progress?: (current: number, total: number) => string;
+  /** The close (×) button's accessible name, beside the title. Optional; the shipped packs carry it. */
+  close?: string;
 }
 
 /** Chrome that carries a glyph and no text, across several small surfaces. */

package/src/copy/form.ts

@@ -21,6 +21,31 @@ export interface AddressAutocompleteCopy {
   mapsLoadFailed: string;
   /** The pin button's tooltip, which is also its accessible name. */
   useCurrentLocation: string;
+  /**
+   * Everything below is optional so a host's existing pack keeps compiling; the
+   * shipped packs carry all of it and the field falls back to the English pack.
+   */
+  /** The field's label and placeholder, unless the `label`/`placeholder` props win. */
+  label?: string;
+  placeholder?: string;
+  /** The empty list's text: nothing typed yet, then typed with no match. */
+  typeToSearch?: string;
+  noAddressesFound?: string;
+  /** The list's row while suggestions are being fetched. */
+  loadingSuggestions?: string;
+  /** Shown as the field's helper text when Google Maps or Places fails. */
+  mapsApiLoadFailed?: string;
+  mapsServicesInitFailed?: string;
+  fetchSuggestionsFailed?: string;
+  addressDetailsNotFound?: string;
+  addressDetailsFailed?: string;
+  /** The current-location button's failures. */
+  noMockLocation?: string;
+  mockLocationNotFound?: string;
+  locationAddressFailed?: string;
+  geolocationUnsupported?: string;
+  geocoderUnavailable?: string;
+  locationFailed?: string;
 }
 
 /** What an `Autocomplete` renders that is not one of the host's own options. */
@@ -107,6 +132,12 @@ export interface RichEditorToolbarCopy {
   backgroundColor: string;
   /** The browser prompt the link button opens, asking for the URL. */
   linkPrompt: string;
+  /**
+   * The editing area's accessible name when the field has no placeholder to
+   * lend it. Optional; the shipped packs carry it and the field falls back to
+   * the English one.
+   */
+  editorLabel?: string;
 }
 
 /**
@@ -124,6 +155,24 @@ export interface PhoneInputCopy {
   invalidNumber(countryName: string): string;
   /** Stands in for the country's name before one has been resolved. */
   unknownCountry: string;
+  /**
+   * A country's name in the picker and in `invalidNumber`, from its ISO 3166
+   * code and the English name the field ships. Optional: without it the
+   * English name is shown, as it always was. The pt-BR pack answers through
+   * `Intl.DisplayNames`, so every country the field lists is covered.
+   */
+  countryName?: (code: string, englishName: string) => string;
+  /**
+   * The field's label when the host passes no `label` prop. Optional: without
+   * it the field reads "Phone Number", as it always did.
+   */
+  label?: string;
+  /**
+   * The field's placeholder when the host passes no `placeholder` prop.
+   * Optional: without it the field reads "Enter phone number", as it always
+   * did. Keep it short — it shares a 320px field with the country picker.
+   */
+  placeholder?: string;
 }
 
 /**
@@ -151,6 +200,15 @@ export interface UploadButtonCopy {
   uploadInProgress(percent: number): string;
   /** The component's own error, announced. Takes the message it wraps. */
   errorAnnouncement(message: string): string;
+  /**
+   * The two errors the control raises itself. Optional so a host's existing
+   * pack keeps compiling; the shipped packs carry both and the control falls
+   * back to the English one.
+   */
+  /** A file over `maxSizeMB`. */
+  fileTooLarge?: (maxSizeMB: number) => string;
+  /** `onUpload` rejected with something that is not an `Error`. */
+  uploadFailed?: string;
 }
 
 /**