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

apps/meteor/client/sidebar/Item/Extended.stories.tsx

@@ -0,0 +1,97 @@
+import { Box, IconButton, Badge } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import Extended from './Extended';
+import * as Status from '../../components/UserStatus';
+
+export default {
+	component: Extended,
+	decorators: [
+		(fn) => (
+			<Box maxWidth='x300' backgroundColor='dark' borderRadius='x4'>
+				{fn()}
+			</Box>
+		),
+	],
+} satisfies Meta<typeof Extended>;
+
+const Template: StoryFn<typeof Extended> = (args) => (
+	<Extended
+		{...args}
+		title='John Doe'
+		subtitle={
+			<Box display='flex' flexDirection='row' width='full' alignItems='center'>
+				<Box flexGrow='1' withTruncatedText>
+					John Doe: test 123
+				</Box>
+				<Badge
+					{...({
+						style: {
+							backgroundColor: '#6c727a',
+							color: 'var(--rcx-color-surface, white)',
+							flexShrink: 0,
+						},
+					} as any)}
+				>
+					99
+				</Badge>
+			</Box>
+		}
+		titleIcon={
+			<Box marginInline={4}>
+				<Status.Online />
+			</Box>
+		}
+		avatar={<UserAvatar username='john.doe' size='x16' url='https://via.placeholder.com/16' />}
+	/>
+);
+
+export const Normal = {
+	render: Template,
+};
+
+export const Selected = {
+	render: Template,
+
+	args: {
+		selected: true,
+	},
+};
+
+export const Menu = {
+	render: Template,
+
+	args: {
+		menuOptions: {
+			hide: {
+				label: { label: 'Hide', icon: 'eye-off' },
+				action: action('action'),
+			},
+			read: {
+				label: { label: 'Mark_read', icon: 'flag' },
+				action: action('action'),
+			},
+			favorite: {
+				label: { label: 'Favorite', icon: 'star' },
+				action: action('action'),
+			},
+		},
+	},
+};
+
+export const Actions = {
+	render: Template,
+
+	args: {
+		actions: (
+			<>
+				<IconButton secondary success icon='phone' />
+				<IconButton secondary danger icon='circle-cross' />
+				<IconButton secondary info icon='trash' />
+				<IconButton secondary icon='phone' />
+			</>
+		),
+	},
+};