add strings prop to PresenceBadge and update demos to support new default strings

change/@fluentui-react-badge-33169962-f7bf-42f9-b764-c872ceebc15c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add strings prop to PresenceBadge and update demos to support new default strings",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-badge/etc/react-badge.api.md

@@ -57,7 +57,7 @@ export const presenceBadgeClassName = "fui-PresenceBadge";
 export const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
 
 // @public (undocumented)
-export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;
+export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size' | 'strings'>>;
 
 // @public (undocumented)
 export type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;

packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts

@@ -22,9 +22,11 @@ type PresenceBadgeCommons = {
    * @default false
    */
   outOfOffice: boolean;
+
+  strings: Partial<Record<PresenceBadgeStatus, string>>;
 } & BadgeCommons;
 
 export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> &
-  Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;
+  Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size' | 'strings'>>;
 
 export type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;

packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx

@@ -37,6 +37,16 @@ const iconMap = (
   }
 };
 
+export const DEFAULT_STRINGS: PresenceBadgeProps['strings'] = {
+  busy: 'busy',
+  outOfOffice: 'out of office',
+  away: 'away',
+  available: 'available',
+  offline: 'offline',
+  doNotDisturb: 'do not disturb',
+  unknown: 'unknown',
+};
+
 /**
  * Returns the props and state required to render the component
  */
@@ -55,13 +65,17 @@ export const usePresenceBadge_unstable = (
       },
       ref,
     ),
+    strings: {
+      ...DEFAULT_STRINGS,
+      ...props.strings,
+    },
     status: props.status ?? 'available',
     outOfOffice: props.outOfOffice ?? false,
   };
 
   const IconElement = iconMap(state.status, state.outOfOffice, state.size);
   if (IconElement) {
-    state.icon!.children = <IconElement />;
+    state.icon!.children = <IconElement aria-label={state.strings[state.status]} />;
   }
 
   return state;

packages/react-badge/src/stories/PresenceBadge.stories.tsx

@@ -7,6 +7,7 @@ export { Default } from './PresenceBadgeDefault.stories';
 export { Sizes } from './PresenceBadgeSizes.stories';
 export { Status } from './PresenceBadgeStatus.stories';
 export { OutOfOffice } from './PresenceBadgeOutOfOffice.stories';
+export { Strings } from './PresenceBadgeStrings.stories';
 
 export default {
   title: 'Components/Presence Badge',

packages/react-badge/src/stories/PresenceBadgeStrings.stories.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { PresenceBadge, PresenceBadgeProps } from '../index';
+export const Strings = () => {
+  const spanishStrings: PresenceBadgeProps['strings'] = {
+    busy: 'ocupado',
+    outOfOffice: 'fuera de la oficina',
+    away: 'fuera',
+    available: 'disponible',
+    offline: 'desconectado',
+    doNotDisturb: 'no molestar',
+    unknown: 'desconocido',
+  };
+  return (
+    <>
+      <PresenceBadge strings={spanishStrings} lang="es" status="available" />
+      <PresenceBadge strings={spanishStrings} lang="es" status="away" />
+      <PresenceBadge strings={spanishStrings} lang="es" status="busy" />
+      <PresenceBadge strings={spanishStrings} lang="es" status="doNotDisturb" />
+      <PresenceBadge strings={spanishStrings} lang="es" status="offline" />
+      <PresenceBadge strings={spanishStrings} lang="es" status="outOfOffice" />
+      <PresenceBadge strings={spanishStrings} lang="es" status="unknown" />
+    </>
+  );
+};
+
+Strings.parameters = {
+  docs: {
+    description: {
+      story: `A presence badge supports custom status strings whether
+      to support a different language, or to customize individual strings.
+      The example below is using a Spanish translation.`,
+    },
+  },
+};

packages/react-components/react-avatar/src/AvatarBadge.stories.tsx

@@ -3,27 +3,18 @@ import { Avatar } from './index';
 
 export const Badge = () => (
   <>
-    <Avatar name="Lydia Bauer" badge={{ status: 'available', 'aria-label': 'available' }} />
-    <Avatar name="Amanda Brady" badge={{ status: 'busy', 'aria-label': 'busy' }} />
-    <Avatar name="Henry Brill" badge={{ status: 'outOfOffice', 'aria-label': 'out of office' }} />
-    <Avatar name="Robin Counts" badge={{ status: 'away', 'aria-label': 'away' }} />
-    <Avatar name="Tim Deboer" badge={{ status: 'offline', 'aria-label': 'offline' }} />
-    <Avatar name="Cameron Evans" badge={{ status: 'doNotDisturb', 'aria-label': 'do not disturb' }} />
-    <Avatar
-      name="Mona Kane"
-      badge={{ status: 'available', outOfOffice: true, 'aria-label': 'available out of office' }}
-    />
-    <Avatar name="Allan Munger" badge={{ status: 'busy', outOfOffice: true, 'aria-label': 'busy out of office' }} />
-    <Avatar name="Erik Nason" badge={{ status: 'outOfOffice', outOfOffice: true, 'aria-label': 'out of office' }} />
-    <Avatar name="Daisy Phillips" badge={{ status: 'away', outOfOffice: true, 'aria-label': 'away out of office' }} />
-    <Avatar
-      name="Kevin Sturgis"
-      badge={{ status: 'offline', outOfOffice: true, 'aria-label': 'offline out of office' }}
-    />
-    <Avatar
-      name="Elliot Woodward"
-      badge={{ status: 'doNotDisturb', outOfOffice: true, 'aria-label': 'do not disturb out of office' }}
-    />
+    <Avatar name="Lydia Bauer" badge={{ status: 'available' }} />
+    <Avatar name="Amanda Brady" badge={{ status: 'busy' }} />
+    <Avatar name="Henry Brill" badge={{ status: 'outOfOffice' }} />
+    <Avatar name="Robin Counts" badge={{ status: 'away' }} />
+    <Avatar name="Tim Deboer" badge={{ status: 'offline' }} />
+    <Avatar name="Cameron Evans" badge={{ status: 'doNotDisturb' }} />
+    <Avatar name="Mona Kane" badge={{ status: 'available', outOfOffice: true }} />
+    <Avatar name="Allan Munger" badge={{ status: 'busy', outOfOffice: true }} />
+    <Avatar name="Erik Nason" badge={{ status: 'outOfOffice', outOfOffice: true }} />
+    <Avatar name="Daisy Phillips" badge={{ status: 'away', outOfOffice: true }} />
+    <Avatar name="Kevin Sturgis" badge={{ status: 'offline', outOfOffice: true }} />
+    <Avatar name="Elliot Woodward" badge={{ status: 'doNotDisturb', outOfOffice: true }} />
   </>
 );