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

apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx

@@ -0,0 +1,32 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import LegendSymbol from './LegendSymbol';
+import { monochromaticColors, polychromaticColors } from './colors';
+
+export default {
+	component: LegendSymbol,
+	decorators: [(fn) => <Margins all='x16'>{fn()}</Margins>],
+} satisfies Meta<typeof LegendSymbol>;
+
+export const WithoutColor: StoryFn<typeof LegendSymbol> = () => (
+	<Box>
+		<LegendSymbol />
+		Legend text
+	</Box>
+);
+
+export const WithColor: StoryFn<typeof LegendSymbol> = () => (
+	<>
+		{monochromaticColors.map((color) => (
+			<Box key={color}>
+				<LegendSymbol color={color} /> {color}
+			</Box>
+		))}
+		{polychromaticColors.map((color) => (
+			<Box key={color}>
+				<LegendSymbol color={color} /> {color}
+			</Box>
+		))}
+	</>
+);

apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.tsx

@@ -0,0 +1,25 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import type { CSSProperties } from 'react';
+
+export type LegendSymbolProps = {
+	color?: CSSProperties['backgroundColor'];
+};
+
+const LegendSymbol = ({ color = 'currentColor' }: LegendSymbolProps) => (
+	<Margins inlineEnd={8}>
+		<Box
+			is='span'
+			aria-hidden='true'
+			style={{
+				display: 'inline-block',
+				width: 12,
+				height: 12,
+				borderRadius: 2,
+				backgroundColor: color,
+				verticalAlign: 'baseline',
+			}}
+		/>
+	</Margins>
+);
+
+export default LegendSymbol;

apps/meteor/client/views/admin/engagementDashboard/dataView/colors.ts

@@ -0,0 +1,14 @@
+import colors from '@rocket.chat/fuselage-tokens/dist/colors.json';
+
+export const monochromaticColors = [
+	colors.b100,
+	colors.b200,
+	colors.b300,
+	colors.b400,
+	colors.b500,
+	colors.b600,
+	colors.b700,
+	colors.b800,
+	colors.b900,
+];
+export const polychromaticColors = [colors.y500, colors.g500, colors.b500];