feat(fuselage): Add message status indicator text component (#757)

* fix: message status private indicator props

* feat: add status indicator text

* style: add space on example

* Remove resting props

* Make status indicator text unselectable

* Ensure status indicator is ARIA-hidden for now

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: Filipe Marins

packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.stories.tsx

@@ -6,6 +6,7 @@ import { Box, Avatar } from '../..';
 import { MessageDivider } from '../MessageDivider';
 import MessageReactions from '../MessageReactions';
 import MessageToolbox from '../MessageToolbox';
+import { MessageStatusIndicatorText } from './MessageStatusIndicatorText';
 
 export default {
   title: 'Message/MessageStatusIndicator',
@@ -103,5 +104,26 @@ export const Default = () => (
         </MessageToolbox>
       </MessageToolbox.Wrapper>
     </Message>
+    <Message className='customclass' clickable sequential>
+      <Message.LeftContainer>
+        <MessageStatusIndicator>
+          <MessageStatusIndicatorText>
+            <MessageStatusIndicatorItem name='star-filled' /> Status
+          </MessageStatusIndicatorText>
+        </MessageStatusIndicator>
+      </Message.LeftContainer>
+      <Message.Container>
+        <Message.Body>
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+        </Message.Body>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
   </Box>
 );

packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicator.styles.scss

@@ -11,10 +11,21 @@ $variants: (
 );
 
 .rcx-message-status-indicator {
+  margin-block: lengths.margin(2);
+
+  user-select: none;
+
   &:empty {
     display: none;
   }
 
+  &__text {
+    white-space: nowrap;
+
+    color: colors.foreground('info');
+    @include typography.use-font-scale(c1);
+  }
+
   &__item {
     color: colors.foreground('hint');
     @each $name, $color in $variants {

packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusIndicatorText.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageStatusIndicatorTextProps = {
+  children: ReactNode;
+};
+
+export const MessageStatusIndicatorText = ({
+  children,
+}: MessageStatusIndicatorTextProps) => (
+  <span className='rcx-message-status-indicator__text' aria-hidden>
+    {children}
+  </span>
+);

packages/fuselage/src/components/Message/MessageStatusIndicator/MessageStatusPrivateIndicator.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 
 import type { MessageStatusIndicatorItem } from './MessageStatusIndicatorItem';
 
-type MessageStatusIndicatorItemProps = ComponentProps<
-  typeof MessageStatusIndicatorItem
+type MessageStatusIndicatorItemProps = Pick<
+  ComponentProps<typeof MessageStatusIndicatorItem>,
+  'variant'
 >;
 
 export const MessageStatusPrivateIndicator = ({