snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/InvitationBadge/InvitationBadge.spec.tsx

@@ -0,0 +1,18 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './InvitationBadge.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});

apps/meteor/client/components/InvitationBadge/InvitationBadge.stories.tsx

@@ -0,0 +1,32 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta } from '@storybook/react';
+
+import InvitationBadge from './InvitationBadge';
+
+const meta = {
+	component: InvitationBadge,
+	parameters: {
+		layout: 'centered',
+	},
+	decorators: [
+		mockAppRoot()
+			.withTranslations('en', 'core', {
+				Invited__date__: 'Invited {{date}}',
+			})
+			.buildStoryDecorator(),
+	],
+} satisfies Meta<typeof InvitationBadge>;
+
+export default meta;
+
+export const WithISOStringDate = {
+	args: {
+		invitationDate: '2025-01-01T12:00:00Z',
+	},
+};
+
+export const WithDateObject = {
+	args: {
+		invitationDate: new Date('2025-01-01T12:00:00Z'),
+	},
+};

apps/meteor/client/components/InvitationBadge/InvitationBadge.tsx

@@ -0,0 +1,28 @@
+import { Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useTimeAgo } from '../../hooks/useTimeAgo';
+
+export type InvitationBadgeProps = Omit<ComponentProps<typeof Icon>, 'name' | 'color' | 'role'> & {
+	invitationDate: string | Date;
+};
+
+const InvitationBadge = ({ invitationDate, ...props }: InvitationBadgeProps) => {
+	const { t } = useTranslation();
+	const timeAgo = useTimeAgo();
+
+	return (
+		<Icon
+			size='x20'
+			{...props}
+			role='status'
+			color='info'
+			name='mail'
+			aria-hidden='false'
+			title={t('Invited__date__', { date: timeAgo(invitationDate) })}
+		/>
+	);
+};
+
+export default InvitationBadge;

apps/meteor/client/components/InvitationBadge/__snapshots__/InvitationBadge.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders WithDateObject without crashing 1`] = `
+<body>
+  <div>
+    <i
+      aria-hidden="false"
+      class="rcx-box rcx-box--full rcx-icon--name-mail rcx-icon rcx-css-oq4j9d"
+      role="status"
+      title="Invited January 1st, 2025"
+    >
+      
+    </i>
+  </div>
+</body>
+`;
+
+exports[`renders WithISOStringDate without crashing 1`] = `
+<body>
+  <div>
+    <i
+      aria-hidden="false"
+      class="rcx-box rcx-box--full rcx-icon--name-mail rcx-icon rcx-css-oq4j9d"
+      role="status"
+      title="Invited January 1st, 2025"
+    >
+      
+    </i>
+  </div>
+</body>
+`;

apps/meteor/client/components/InvitationBadge/index.ts

@@ -0,0 +1 @@
+export { default } from './InvitationBadge';