fix(fuselage): Adding heading tag styles to messages (#904)

* fix: adding heading tag styles to messages * adding story to heading message Co-authored-by: Guilherme Jun Grillo <[email protected]>
RocketChat · Nov 18, 2022 · ade27ba · ade27ba
1 parent 1156f01
commit ade27ba
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 8 deletions.
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -67,7 +67,7 @@ export const Default: ComponentStory<typeof Message> = () => (
   </Box>
 );
 
-export const WithSequential = () => (
+export const WithSequential: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
@@ -182,7 +182,7 @@ export const WithSequential = () => (
   </Box>
 );
 
-export const MessageWithThread = () => (
+export const MessageWithThread: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider unreadLabel='Unread'>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
@@ -300,7 +300,7 @@ export const MessageWithThread = () => (
   </Box>
 );
 
-export const MessageSelected = () => {
+export const MessageSelected: ComponentStory<typeof Message> = () => {
   const [selected, setSelected] = useState(true);
   return (
     <Box>
@@ -359,7 +359,7 @@ export const MessageSelected = () => {
   );
 };
 
-export const MessageEditing = () => (
+export const MessageEditing: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
@@ -443,7 +443,7 @@ export const MessageEditing = () => (
   </Box>
 );
 
-export const MessageUnorderedList = () => (
+export const MessageUnorderedList: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
@@ -489,7 +489,7 @@ export const MessageUnorderedList = () => (
   </Box>
 );
 
-export const MessageOrderedList = () => (
+export const MessageOrderedList: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' clickable>
@@ -535,7 +535,7 @@ export const MessageOrderedList = () => (
   </Box>
 );
 
-export const MessageHighlighted = () => (
+export const MessageHighlighted: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' highlight>
@@ -619,7 +619,7 @@ export const MessageHighlighted = () => (
   </Box>
 );
 
-export const MessagePending = () => (
+export const MessagePending: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
     <Message className='customclass' isPending>
@@ -696,6 +696,7 @@ export const MessagePending = () => (
     </Message>
   </Box>
 );
+
 export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>
@@ -749,6 +750,54 @@ export const MessageWithMetrics: ComponentStory<typeof Message> = () => (
   </Box>
 );
 
+export const MessageWithHeadings: ComponentStory<typeof Message> = () => (
+  <Box>
+    <MessageDivider>May, 24, 2020</MessageDivider>
+    <Message className='customclass' clickable>
+      <Message.LeftContainer>
+        <Avatar url={avatarUrl} size={'x36'} />
+      </Message.LeftContainer>
+      <Message.Container>
+        <Message.Header>
+          <Message.NameContainer>
+            <Message.Name>Haylie George</Message.Name>{' '}
+            <Message.Username>@haylie.george</Message.Username>
+          </Message.NameContainer>
+          <Message.Roles>
+            <Message.Role>Admin</Message.Role>
+            <Message.Role>User</Message.Role>
+            <Message.Role>Owner</Message.Role>
+          </Message.Roles>
+          <Message.Timestamp>12:00 PM</Message.Timestamp>
+        </Message.Header>
+        <Message.Body>
+          <h1 style={{ marginTop: 0 }}>Heading 1</h1>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+          <h2>Heading 2</h2>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          <h3>Heading 3</h3>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          <h4>Heading 4</h4>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        </Message.Body>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
+  </Box>
+);
+
 export const LotsOfReactions: ComponentStory<typeof Message> = () => (
   <Box>
     <MessageDivider>May, 24, 2020</MessageDivider>

diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -178,6 +178,22 @@ $message-background-color-highlight: functions.theme(
 
     color: colors.font(default);
 
+    & h1 {
+      @include typography.use-font-scale(h1);
+    }
+
+    & h2 {
+      @include typography.use-font-scale(h2);
+    }
+
+    & h3 {
+      @include typography.use-font-scale(h3);
+    }
+
+    & h4 {
+      @include typography.use-font-scale(h4);
+    }
+
     & ul,
     ol {
       margin: 0;