From b8441ee5f0b91a9a4a78d058a0da063582b9576a Mon Sep 17 00:00:00 2001 From: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Date: Fri, 2 Aug 2024 17:50:10 -0300 Subject: [PATCH] feat(fuselage): Update message metric styles and add Avatar row (#1417) Co-authored-by: dougfabris --- .changeset/two-doors-clean.md | 5 + .../fuselage/src/components/Badge/Badge.tsx | 4 +- .../src/components/Message/MessageBlock.tsx | 25 +- .../MessageMetrics/MessageMetrics.stories.tsx | 59 ++++- .../MessageMetrics/MessageMetrics.styles.scss | 19 ++ .../MessageMetricsFollowing.tsx | 18 +- .../MessageMetricsItem/MessageMetricsItem.tsx | 12 +- .../MessageMetricsItemAvatarRow.tsx | 15 ++ .../MessageMetricsItemAvatarRowContent.tsx | 18 ++ .../MessageMetricsItem/index.ts | 10 +- .../MessageMetrics/MessageMetricsReply.tsx | 2 +- .../MessageMetrics.spec.tsx.snap | 221 +++++++++++++++++- .../Message/MessageMetrics/index.tsx | 4 + 13 files changed, 381 insertions(+), 31 deletions(-) create mode 100644 .changeset/two-doors-clean.md create mode 100644 packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRow.tsx create mode 100644 packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRowContent.tsx diff --git a/.changeset/two-doors-clean.md b/.changeset/two-doors-clean.md new file mode 100644 index 0000000000..3a8f1f6188 --- /dev/null +++ b/.changeset/two-doors-clean.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": minor +--- + +Updated message metric styles and added Avatar row diff --git a/packages/fuselage/src/components/Badge/Badge.tsx b/packages/fuselage/src/components/Badge/Badge.tsx index 41d83a3061..796b6c70fb 100644 --- a/packages/fuselage/src/components/Badge/Badge.tsx +++ b/packages/fuselage/src/components/Badge/Badge.tsx @@ -1,4 +1,4 @@ -import type { ElementType } from 'react'; +import type { ElementType, HTMLAttributes } from 'react'; import { prependClassName } from '../../helpers/prependClassName'; @@ -10,7 +10,7 @@ export type BadgeProps = { className?: string; children?: any; title?: any; -}; +} & HTMLAttributes; export function Badge({ is: Tag = 'span', diff --git a/packages/fuselage/src/components/Message/MessageBlock.tsx b/packages/fuselage/src/components/Message/MessageBlock.tsx index a0c80fb436..9e7212aa6c 100644 --- a/packages/fuselage/src/components/Message/MessageBlock.tsx +++ b/packages/fuselage/src/components/Message/MessageBlock.tsx @@ -1,4 +1,5 @@ -import type { ComponentProps } from 'react'; +import type { ComponentProps, Ref } from 'react'; +import { forwardRef } from 'react'; import Box from '../Box'; @@ -6,14 +7,16 @@ type MessageBlockProps = { fixedWidth?: boolean; } & ComponentProps; -export const MessageBlock = ({ - className: _className, - fixedWidth, - ...props -}: MessageBlockProps) => ( - +export const MessageBlock = forwardRef( + ( + { className: _className, fixedWidth, ...props }: MessageBlockProps, + ref: Ref + ) => ( + + ) ); diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx index fb33b98687..6fca61858e 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import { Title, Primary } from '@storybook/addon-docs'; import type { ComponentMeta } from '@storybook/react'; import { @@ -9,22 +8,19 @@ import { MessageMetricsFollowing, MessageMetricsItemIcon, MessageMetricsItemLabel, + MessageMetricsItemAvatarRowContent, + MessageMetricsItemAvatarRow, } from '.'; +import { Avatar } from '../../Avatar'; +import { Badge } from '../../Badge'; import { BasicMessageTemplate } from '../helpers'; +const imgUrl = + 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; + export default { title: 'Message/MessageMetrics', component: MessageMetrics, - parameters: { - docs: { - page: () => ( - <> - - <Primary /> - </> - ), - }, - }, } as ComponentMeta<typeof MessageMetrics>; const metrics = ( @@ -44,7 +40,48 @@ const metrics = ( </MessageMetrics> ); +const metricsThread = ( + <MessageMetrics> + <MessageMetricsReply + onClick={action('click view thread')} + overflow='visible' + > + View thread + </MessageMetricsReply> + <MessageMetricsItem> + <MessageMetricsFollowing + title={'Following'} + name={'bell'} + onClick={action('click follow thread')} + badge={<Badge small variant={'danger'} />} + /> + </MessageMetricsItem> + <MessageMetricsItem title={'Participants'}> + <MessageMetricsItemAvatarRow> + <MessageMetricsItemAvatarRowContent> + <Avatar alt='gazzolia' size='x16' url={imgUrl} /> + </MessageMetricsItemAvatarRowContent> + <MessageMetricsItemAvatarRowContent> + <Avatar alt='gazzolia' size='x16' url={imgUrl} /> + </MessageMetricsItemAvatarRowContent> + </MessageMetricsItemAvatarRow> + <MessageMetricsItemLabel>+ 3 followers</MessageMetricsItemLabel> + </MessageMetricsItem> + <MessageMetricsItem title={'Last message: 12th July, 2024'}> + <MessageMetricsItemIcon name='thread' /> + <MessageMetricsItemLabel> + 5 messages, 12th July, 2024 + </MessageMetricsItemLabel> + </MessageMetricsItem> + </MessageMetrics> +); + export const Default = BasicMessageTemplate.bind({}); +export const ThreadMetrics = BasicMessageTemplate.bind({}); + Default.args = { metrics, }; +ThreadMetrics.args = { + metrics: metricsThread, +}; diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.styles.scss b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.styles.scss index 291924ba05..0316258fb0 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.styles.scss +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.styles.scss @@ -34,5 +34,24 @@ &-label { margin-inline-start: lengths.margin(4); } + + &__follow-badge { + position: absolute; + top: 0; + right: 0; + + transform: translate(40%, -40%); + } + } + + &__avatar-row { + display: flex; + flex-direction: row; + + margin-inline: lengths.margin(-2); + + &__content { + margin-inline: lengths.margin(2); + } } } diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx index 93087967de..59dbf500d1 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx @@ -1,12 +1,26 @@ -import type { ComponentProps } from 'react'; +import type { ComponentProps, ReactElement } from 'react'; import { IconButton } from '../../Button'; type MessageMetricsFollowingProps = { name: 'bell' | 'bell-off'; + badge?: ReactElement; } & Omit<ComponentProps<typeof IconButton>, 'icon'>; export const MessageMetricsFollowing = ({ name, + badge, ...props -}: MessageMetricsFollowingProps) => <IconButton {...props} small icon={name} />; +}: MessageMetricsFollowingProps) => ( + <IconButton + position='relative' + overflow='visible' + {...props} + small + icon={name} + > + {badge && ( + <div className='rcx-message-metrics__item__follow-badge'>{badge}</div> + )} + </IconButton> +); diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx index 7f8fb98fae..6753630200 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItem.tsx @@ -1,7 +1,15 @@ import type { HTMLAttributes } from 'react'; +import { prependClassName } from '../../../../helpers/prependClassName'; + type MessageMetricsItemProps = HTMLAttributes<HTMLDivElement>; -export const MessageMetricsItem = (props: MessageMetricsItemProps) => ( - <div className='rcx-message-metrics__item' {...props} /> +export const MessageMetricsItem = ({ + className, + ...props +}: MessageMetricsItemProps) => ( + <div + className={prependClassName(className, 'rcx-message-metrics__item')} + {...props} + /> ); diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRow.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRow.tsx new file mode 100644 index 0000000000..c9ceb46b52 --- /dev/null +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRow.tsx @@ -0,0 +1,15 @@ +import type { HTMLAttributes } from 'react'; + +import { prependClassName } from '../../../../helpers/prependClassName'; + +type MessageMetricsItemProps = HTMLAttributes<HTMLDivElement>; + +export const MessageMetricsItemAvatarRow = ({ + className, + ...props +}: MessageMetricsItemProps) => ( + <div + className={prependClassName(className, 'rcx-message-metrics__avatar-row')} + {...props} + /> +); diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRowContent.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRowContent.tsx new file mode 100644 index 0000000000..0edbef6e14 --- /dev/null +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemAvatarRowContent.tsx @@ -0,0 +1,18 @@ +import type { HTMLAttributes } from 'react'; + +import { prependClassName } from '../../../../helpers/prependClassName'; + +type MessageMetricsItemProps = HTMLAttributes<HTMLDivElement>; + +export const MessageMetricsItemAvatarRowContent = ({ + className, + ...props +}: MessageMetricsItemProps) => ( + <div + className={prependClassName( + className, + 'rcx-message-metrics__avatar-row__content' + )} + {...props} + /> +); diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts index d2917e46c6..6379806bfc 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts @@ -1,4 +1,6 @@ import { MessageMetricsItem } from './MessageMetricsItem'; +import { MessageMetricsItemAvatarRow } from './MessageMetricsItemAvatarRow'; +import { MessageMetricsItemAvatarRowContent } from './MessageMetricsItemAvatarRowContent'; import { MessageMetricsItemIcon } from './MessageMetricsItemIcon'; import { MessageMetricsItemLabel } from './MessageMetricsItemLabel'; @@ -13,4 +15,10 @@ export default Object.assign(MessageMetricsItem, { Label: MessageMetricsItemLabel, }); -export { MessageMetricsItem, MessageMetricsItemIcon, MessageMetricsItemLabel }; +export { + MessageMetricsItem, + MessageMetricsItemIcon, + MessageMetricsItemLabel, + MessageMetricsItemAvatarRowContent, + MessageMetricsItemAvatarRow, +}; diff --git a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsReply.tsx b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsReply.tsx index e7178510fa..bfa3a269e0 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsReply.tsx +++ b/packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsReply.tsx @@ -7,6 +7,6 @@ type MessageMetricsReplyProps = ComponentProps<typeof Button>; export const MessageMetricsReply = (props: MessageMetricsReplyProps) => ( <MessageMetricsItem> - <Button {...props} small primary /> + <Button primary {...props} small /> </MessageMetricsItem> ); diff --git a/packages/fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap b/packages/fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap index 09173037e9..af0632250f 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap +++ b/packages/fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap @@ -150,7 +150,7 @@ exports[`[MessageMetrics Rendering] renders Default without crashing 1`] = ` class="rcx-message-metrics__item" > <button - class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button" + class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ll6zd0" title="Following" type="button" > @@ -171,3 +171,222 @@ exports[`[MessageMetrics Rendering] renders Default without crashing 1`] = ` </div> </body> `; + +exports[`[MessageMetrics Rendering] renders ThreadMetrics without crashing 1`] = ` +<body> + <div> + <div + class="rcx-box rcx-box--full" + > + <div + class="rcx-message-divider" + role="separator" + > + <div + class="rcx-message-divider__bar" + /> + <div + class="rcx-message-divider__wrapper" + > + May, 24, 2020 + </div> + + <div + class="rcx-message-divider__bar" + /> + </div> + <div + class="rcx-message rcx-message--clickable customclass" + tabindex="0" + > + <div + class="rcx-box rcx-box--full rcx-message-container rcx-message-container--left" + > + <figure + class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x36" + > + <img + alt="" + class="rcx-avatar__element rcx-avatar__element--x36" + src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z" + /> + </figure> + </div> + <div + class="rcx-box rcx-box--full rcx-message-container" + > + <div + class="rcx-box rcx-box--full rcx-message-header" + > + <div + class="rcx-box rcx-box--full rcx-message-header__wrapper" + > + <span + class="rcx-box rcx-box--full rcx-message-header__name-container" + > + <span + class="rcx-box rcx-box--full rcx-message-header__name" + > + Haylie George + </span> + + <span + class="rcx-box rcx-box--full rcx-message-header__username" + > + @haylie.george + </span> + </span> + <div + class="rcx-box rcx-box--full rcx-message-header__roles" + > + <span + class="rcx-box rcx-box--full rcx-tag rcx-box rcx-box--full rcx-message-header__role" + > + <span + class="rcx-tag__inner" + > + Admin + </span> + </span> + <span + class="rcx-box rcx-box--full rcx-tag rcx-box rcx-box--full rcx-message-header__role" + > + <span + class="rcx-tag__inner" + > + User + </span> + </span> + <span + class="rcx-box rcx-box--full rcx-tag rcx-box rcx-box--full rcx-message-header__role" + > + <span + class="rcx-tag__inner" + > + Owner + </span> + </span> + </div> + <span + class="rcx-box rcx-box--full rcx-message-header__time" + > + 12:00 PM + </span> + </div> + </div> + <div + class="rcx-message-body" + > + Ut enim ad minim veniam + </div> + <div + class="rcx-box rcx-box--full rcx-message-block" + > + <div + class="rcx-message-metrics__content-item" + > + <div + class="rcx-message-metrics__content-wrapper" + > + <div + class="rcx-message-metrics__item" + > + <button + class="rcx-box rcx-box--full rcx-button--small rcx-button--primary rcx-button rcx-css-yendf2" + type="button" + > + <span + class="rcx-button--content" + > + View thread + </span> + </button> + </div> + <div + class="rcx-message-metrics__item" + > + <button + class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ll6zd0" + title="Following" + type="button" + > + <i + aria-hidden="true" + class="rcx-box rcx-box--full rcx-icon--name-bell rcx-icon rcx-css-4pvxx3" + > +  + </i> + <div + class="rcx-message-metrics__item__follow-badge" + > + <span + class="rcx-box rcx-box--full rcx-badge rcx-badge--danger rcx-badge--small" + /> + </div> + </button> + </div> + <div + class="rcx-message-metrics__item" + title="Participants" + > + <div + class="rcx-message-metrics__avatar-row" + > + <div + class="rcx-message-metrics__avatar-row__content" + > + <figure + class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x16" + > + <img + alt="gazzolia" + class="rcx-avatar__element rcx-avatar__element--x16" + src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z" + /> + </figure> + </div> + <div + class="rcx-message-metrics__avatar-row__content" + > + <figure + class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x16" + > + <img + alt="gazzolia" + class="rcx-avatar__element rcx-avatar__element--x16" + src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z" + /> + </figure> + </div> + </div> + <div + class="rcx-message-metrics__item-label" + > + + 3 followers + </div> + </div> + <div + class="rcx-message-metrics__item" + title="Last message: 12th July, 2024" + > + <i + aria-hidden="true" + class="rcx-box rcx-box--full rcx-icon--name-thread rcx-icon rcx-css-4pvxx3" + > +  + </i> + <div + class="rcx-message-metrics__item-label" + > + 5 messages, 12th July, 2024 + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</body> +`; diff --git a/packages/fuselage/src/components/Message/MessageMetrics/index.tsx b/packages/fuselage/src/components/Message/MessageMetrics/index.tsx index 77c193e3d6..3d3695d0fc 100644 --- a/packages/fuselage/src/components/Message/MessageMetrics/index.tsx +++ b/packages/fuselage/src/components/Message/MessageMetrics/index.tsx @@ -2,6 +2,8 @@ import { MessageMetrics } from './MessageMetrics'; import { MessageMetricsFollowing } from './MessageMetricsFollowing'; import MessageMetricsItem, { MessageMetricsItemIcon, + MessageMetricsItemAvatarRowContent, + MessageMetricsItemAvatarRow, MessageMetricsItemLabel, } from './MessageMetricsItem'; import { MessageMetricsReply } from './MessageMetricsReply'; @@ -23,6 +25,8 @@ export default Object.assign(MessageMetrics, { export { MessageMetrics, + MessageMetricsItemAvatarRow, + MessageMetricsItemAvatarRowContent, MessageMetricsItem, MessageMetricsItemIcon, MessageMetricsItemLabel,