chore: Review Component

RocketChat · Aug 18, 2022 · 8a2d435 · 8a2d435
1 parent 1264ae4
commit 8a2d435
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 53 deletions.
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
@@ -5,6 +5,10 @@ import type { ReactElement } from 'react';
 import '@rocket.chat/icons/dist/rocketchat.css';
 import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
 import VideoConfMessageSkeleton from './VideoConfMessageSkeleton';
+import VideoConfMessageFooter from './VideoConfMessageFooter';
+import VideoConfMessageUserStack from './VideoConfMessageUserStack';
+import VideoConfMessageAction from './VideoConfMessageAction';
+import VideoConfMessageFooterText from './VideoConfMessageFooterText';
 
 export default {
 	title: 'Components/VideoConfMessage',
@@ -42,79 +46,64 @@ const avatarUrl =
 export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
-			<VideoConfMessageIcon name='phone-in' backgroundColor='primary-200' color='primary-600' />
-			<VideoConfMessageText fontScale='c2'>Calling...</VideoConfMessageText>
-		</VideoConfMessageRow>
-		<VideoConfMessageRow backgroundColor='neutral-100'>
-			<Button small primary>
-				Join
-			</Button>
-			<VideoConfMessageText>Waiting for answer</VideoConfMessageText>
+			<VideoConfMessageIcon variant='incoming' />
+			<VideoConfMessageText>Calling...</VideoConfMessageText>
 		</VideoConfMessageRow>
+		<VideoConfMessageFooter>
+			<VideoConfMessageAction primary>Join</VideoConfMessageAction>
+			<VideoConfMessageFooterText>Waiting for answer</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
 	</VideoConfMessage>
 );
 
 export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
-			<VideoConfMessageIcon name='phone-off' backgroundColor='neutral-400' color='neutral-700' />
-			<VideoConfMessageText fontScale='c2'>Call ended</VideoConfMessageText>
-		</VideoConfMessageRow>
-		<VideoConfMessageRow backgroundColor='neutral-100'>
-			<Button small secondary>
-				Call back
-			</Button>
-			<VideoConfMessageText>Call was not answered</VideoConfMessageText>
+			<VideoConfMessageIcon />
+			<VideoConfMessageText>Call ended</VideoConfMessageText>
 		</VideoConfMessageRow>
+		<VideoConfMessageFooter>
+			<VideoConfMessageAction>Call Back</VideoConfMessageAction>
+			<VideoConfMessageFooterText>Call was not answered</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
 	</VideoConfMessage>
 );
 
 export const CallOngoing: ComponentStory<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
-			<VideoConfMessageIcon name='phone' backgroundColor='success-200' color='success-800' />
-			<VideoConfMessageText fontScale='c2'>Call ongoing</VideoConfMessageText>
+			<VideoConfMessageIcon variant='outgoing' />
+			<VideoConfMessageText>Call ongoing</VideoConfMessageText>
 		</VideoConfMessageRow>
-		<VideoConfMessageRow backgroundColor='neutral-100'>
-			<Button small primary>
-				Join
-			</Button>
-			<Box display='flex' alignItems='center' mis='x8'>
+		<VideoConfMessageFooter>
+			<VideoConfMessageAction primary>Join</VideoConfMessageAction>
+			<VideoConfMessageUserStack>
 				{Array(3)
 					.fill('')
 					.map((_, index) => (
-						<Box mie='x4'>
-							<Avatar key={index} size='x28' url={avatarUrl} />
-						</Box>
+						<Avatar key={index} size='x28' url={avatarUrl} />
 					))}
-				<Box fontScale='c1' mis='x4'>
-					Joined
-				</Box>
-			</Box>
-		</VideoConfMessageRow>
+			</VideoConfMessageUserStack>
+			<VideoConfMessageFooterText>Joined</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
 	</VideoConfMessage>
 );
 
 export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
-			<VideoConfMessageIcon name='phone-off' backgroundColor='neutral-400' color='neutral-700' />
-			<VideoConfMessageText fontScale='c2'>Call ended</VideoConfMessageText>
+			<VideoConfMessageIcon />
+			<VideoConfMessageText>Call ended</VideoConfMessageText>
 		</VideoConfMessageRow>
-		<VideoConfMessageRow backgroundColor='neutral-100'>
-			<Box display='flex' alignItems='center' mis='x8'>
+		<VideoConfMessageFooter>
+			<VideoConfMessageUserStack>
 				{Array(3)
 					.fill('')
 					.map((_, index) => (
-						<Box mie='x4'>
-							<Avatar key={index} size='x28' url={avatarUrl} />
-						</Box>
+						<Avatar key={index} size='x28' url={avatarUrl} />
 					))}
-				<Box fontScale='c1' mis='x4'>
-					Joined
-				</Box>
-			</Box>
-		</VideoConfMessageRow>
+			</VideoConfMessageUserStack>
+		</VideoConfMessageFooter>
 	</VideoConfMessage>
 );
 

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageAction.tsx
@@ -0,0 +1,11 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import type { ReactElement, ReactNode } from 'react';
+
+const VideoConfMessageAction = ({ children, primary }: { children: ReactNode; primary?: boolean }): ReactElement => (
+	<Box mi='x4'>
+		<Button small primary={primary}>
+			{children}
+		</Button>
+	</Box>
+);
+export default VideoConfMessageAction;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
@@ -0,0 +1,14 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactElement, ReactNode } from 'react';
+
+import VideoConfMessageRow from './VideoConfMessageRow';
+
+const VideoConfMessageFooter = ({ children, ...props }: { children: ReactNode }): ReactElement => (
+	<VideoConfMessageRow backgroundColor='neutral-100' {...props}>
+		<Box mi='neg-x4' display='flex' alignItems='center'>
+			{children}
+		</Box>
+	</VideoConfMessageRow>
+);
+
+export default VideoConfMessageFooter;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
@@ -0,0 +1,9 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import type { ReactElement, ReactNode } from 'react';
+
+const VideoConfMessageFooterText = ({ children }: { children: ReactNode }): ReactElement => (
+	<Box fontScale='c1' mi='x4'>
+		{children}
+	</Box>
+);
+export default VideoConfMessageFooterText;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageIcon.tsx
@@ -2,12 +2,37 @@ import { Box, Icon } from '@rocket.chat/fuselage';
 import type { ReactElement, ComponentProps } from 'react';
 
 type VideoConfMessageIconProps = {
-	name: ComponentProps<typeof Icon>['name'];
-} & ComponentProps<typeof Box>;
+	variant?: keyof typeof styles;
+};
 
-const VideoConfMessageIcon = ({ name, color, backgroundColor }: VideoConfMessageIconProps): ReactElement => (
-	<Box size='x28' alignItems='center' justifyContent='center' display='flex' borderRadius='x4' backgroundColor={backgroundColor}>
-		<Icon size='x20' name={name} color={color} />
+const styles = {
+	ended: {
+		icon: 'phone-off',
+		color: 'neutral-700',
+		backgroundColor: 'neutral-400',
+	},
+	incoming: {
+		icon: 'phone-in',
+		color: 'primary-600',
+		backgroundColor: 'primary-200',
+	},
+	outgoing: {
+		icon: 'phone',
+		color: 'success-800',
+		backgroundColor: 'success-200',
+	},
+} as const;
+
+const VideoConfMessageIcon = ({ variant = 'ended' }: VideoConfMessageIconProps): ReactElement => (
+	<Box
+		size='x28'
+		alignItems='center'
+		justifyContent='center'
+		display='flex'
+		borderRadius='x4'
+		backgroundColor={styles[variant].backgroundColor}
+	>
+		<Icon size='x20' name={styles[variant].icon} color={styles[variant].color} />
 	</Box>
 );
 

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
@@ -7,10 +7,10 @@ import VideoConfMessageRow from './VideoConfMessageRow';
 const VideoConfMessageSkeleton = (): ReactElement => (
 	<VideoConfMessage>
 		<VideoConfMessageRow>
-			<Skeleton width='full' />
+			<Skeleton width='full' pb='x4' />
 		</VideoConfMessageRow>
 		<VideoConfMessageRow backgroundColor='neutral-100'>
-			<Skeleton width='full' />
+			<Skeleton width='full' pb='x4' />
 		</VideoConfMessageRow>
 	</VideoConfMessage>
 );

diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
@@ -1,8 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement, ComponentProps } from 'react';
 
-const VideoConfMessageText = ({ fontScale = 'c1', ...props }: ComponentProps<typeof Box>): ReactElement => (
-	<Box fontScale={fontScale} mis='x8' {...props} />
-);
+const VideoConfMessageText = ({ ...props }: ComponentProps<typeof Box>): ReactElement => <Box fontScale='c2' mis='x8' {...props} />;
 
 export default VideoConfMessageText;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
@@ -0,0 +1,16 @@
+import { Box } from '@rocket.chat/fuselage';
+import { Children, ReactElement } from 'react';
+
+import VideoConfMessageRow from './VideoConfMessageRow';
+
+const VideoConfMessageUserStack = ({ children }: { children: ReactElement | ReactElement[] }): ReactElement => (
+	<Box mi='x4'>
+		<Box display='flex' alignItems='center' mi='neg-x2'>
+			{Children.map(Children.toArray(children), (child) => (
+				<Box mi='x2'> {child}</Box>
+			))}
+		</Box>
+	</Box>
+);
+
+export default VideoConfMessageUserStack;