feat: add paragraph and message list

RocketChat · May 6, 2022 · 2d459bc · 2d459bc
1 parent 18a4d7c
commit 2d459bc
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 0 deletions.
diff --git a/packages/fuselage/src/components/Message/MessageOrderedList.tsx b/packages/fuselage/src/components/Message/MessageOrderedList.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageOrderedListProps = {
+  children?: ReactNode;
+};
+
+export const MessageOrderedList = (props: MessageOrderedListProps) => (
+  <ol className='rcx-box rcx-box--full rcx-message-ordered-list' {...props} />
+);
diff --git a/packages/fuselage/src/components/Message/MessageOrderedListItem.tsx b/packages/fuselage/src/components/Message/MessageOrderedListItem.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageOrderedListItemProps = {
+  children?: ReactNode;
+};
+
+export const MessageOrderedListItem = (props: MessageOrderedListItemProps) => (
+  <li
+    className='rcx-box rcx-box--full rcx-message-ordered-list__item'
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/MessageParagraph.tsx b/packages/fuselage/src/components/Message/MessageParagraph.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageParagraphProps = {
+  children?: ReactNode;
+};
+
+export const MessageParagraph = (props: MessageParagraphProps) => (
+  <p className='rcx-box rcx-box--full rcx-message-paragraph' {...props} />
+);
diff --git a/packages/fuselage/src/components/Message/MessageUnorderedList.tsx b/packages/fuselage/src/components/Message/MessageUnorderedList.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageUnorderedListProps = {
+  children?: ReactNode;
+};
+
+export const MessageUnorderedList = (props: MessageUnorderedListProps) => (
+  <ul className='rcx-box rcx-box--full rcx-message-unordered-list' {...props} />
+);
diff --git a/packages/fuselage/src/components/Message/MessageUnorderedListItem.tsx b/packages/fuselage/src/components/Message/MessageUnorderedListItem.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type MessageUnorderedListItemProps = {
+  children?: ReactNode;
+};
+
+export const MessageUnorderedListItem = (
+  props: MessageUnorderedListItemProps
+) => (
+  <li
+    className='rcx-box rcx-box--full rcx-message-unordered-list__item'
+    {...props}
+  />
+);
diff --git a/packages/fuselage/src/components/Message/Messages.stories.tsx b/packages/fuselage/src/components/Message/Messages.stories.tsx
@@ -421,6 +421,98 @@ export const MessageEditing = () => (
   </Box>
 );
 
+export const MessageUnorderedList = () => (
+  <Box>
+    <MessageDivider>May, 24, 2020</MessageDivider>
+    <Message className='customclass' clickable>
+      <Message.LeftContainer>
+        <Avatar url={avatarUrl} size={'x36'} />
+      </Message.LeftContainer>
+      <Message.Container>
+        <Message.Header>
+          <Message.Name>Haylie George</Message.Name>
+          <Message.Username>@haylie.george</Message.Username>
+          <Message.Role>Admin</Message.Role>
+          <Message.Role>User</Message.Role>
+          <Message.Role>Owner</Message.Role>
+          <Message.Timestamp>12:00 PM</Message.Timestamp>
+        </Message.Header>
+        <Message.Body>
+          <Message.Paragraph>Unordered list</Message.Paragraph>
+          <Message.UnorderedList>
+            <Message.UnorderedListItem>
+              ut enim ad minim
+            </Message.UnorderedListItem>
+            <Message.UnorderedListItem>
+              incididunt ut labore
+            </Message.UnorderedListItem>
+            <Message.UnorderedListItem>
+              labore et dolore
+            </Message.UnorderedListItem>
+          </Message.UnorderedList>
+        </Message.Body>
+        <MessageReactions>
+          <MessageReactions.Reaction counter={1} />
+          <MessageReactions.Reaction counter={2} />
+          <MessageReactions.Reaction counter={3} />
+          <MessageReactions.Action />
+        </MessageReactions>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
+  </Box>
+);
+
+export const MessageOrderedList = () => (
+  <Box>
+    <MessageDivider>May, 24, 2020</MessageDivider>
+    <Message className='customclass' clickable>
+      <Message.LeftContainer>
+        <Avatar url={avatarUrl} size={'x36'} />
+      </Message.LeftContainer>
+      <Message.Container>
+        <Message.Header>
+          <Message.Name>Haylie George</Message.Name>
+          <Message.Username>@haylie.george</Message.Username>
+          <Message.Role>Admin</Message.Role>
+          <Message.Role>User</Message.Role>
+          <Message.Role>Owner</Message.Role>
+          <Message.Timestamp>12:00 PM</Message.Timestamp>
+        </Message.Header>
+        <Message.Body>
+          <Message.Paragraph>Ordered list</Message.Paragraph>
+          <Message.OrderedList>
+            <Message.OrderedListItem>ut enim ad minim</Message.OrderedListItem>
+            <Message.OrderedListItem>
+              incididunt ut labore
+            </Message.OrderedListItem>
+            <Message.OrderedListItem>labore et dolore</Message.OrderedListItem>
+          </Message.OrderedList>
+        </Message.Body>
+        <MessageReactions>
+          <MessageReactions.Reaction counter={1} />
+          <MessageReactions.Reaction counter={2} />
+          <MessageReactions.Reaction counter={3} />
+          <MessageReactions.Action />
+        </MessageReactions>
+      </Message.Container>
+      <MessageToolbox.Wrapper>
+        <MessageToolbox>
+          <MessageToolbox.Item icon='quote' />
+          <MessageToolbox.Item icon='clock' />
+          <MessageToolbox.Item icon='thread' />
+        </MessageToolbox>
+      </MessageToolbox.Wrapper>
+    </Message>
+  </Box>
+);
+
 export const MessageHighlighted = () => (
   <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
@@ -196,6 +196,34 @@ $message-background-color-highlight: functions.theme(
     flex-direction: column;
   }
 
+  &-paragraph {
+    margin: 0;
+    padding: 0;
+
+    &:empty::before {
+      display: inline-block;
+
+      content: '';
+    }
+  }
+
+  &-unordered-list {
+    list-style: none;
+
+    &__item {
+      list-style-position: inside;
+      list-style-type: '- ';
+    }
+  }
+
+  &-ordered-list {
+    list-style: decimal;
+
+    &__item {
+      list-style-position: inside;
+    }
+  }
+
   &__emoji {
     display: inline-block;
 

diff --git a/packages/fuselage/src/components/Message/index.tsx b/packages/fuselage/src/components/Message/index.tsx
@@ -8,10 +8,15 @@ import { MessageHeader } from './MessageHeader';
 import { MessageLeftContainer } from './MessageLeftContainer';
 import MessageMetrics from './MessageMetrics';
 import { MessageName } from './MessageName';
+import { MessageOrderedList } from './MessageOrderedList';
+import { MessageOrderedListItem } from './MessageOrderedListItem';
+import { MessageParagraph } from './MessageParagraph';
 import { MessageRole } from './MessageRole';
 import { MessageRoles } from './MessageRoles';
 import { MessageTimestamp } from './MessageTimestamp';
 import MessageToolbox from './MessageToolbox';
+import { MessageUnorderedList } from './MessageUnorderedList';
+import { MessageUnorderedListItem } from './MessageUnorderedListItem';
 import { MessageUsername } from './MessageUsername';
 
 export * from './MessageDivider';
@@ -34,6 +39,11 @@ export * from './MessageRoles';
 export * from './MessageTimestamp';
 export * from './MessageUsername';
 export * from './MessageEmoji';
+export * from './MessageParagraph';
+export * from './MessageUnorderedList';
+export * from './MessageUnorderedListItem';
+export * from './MessageOrderedList';
+export * from './MessageOrderedListItem';
 
 export default Object.assign(Message, {
   Metrics: MessageMetrics,
@@ -44,6 +54,11 @@ export default Object.assign(Message, {
   Header: MessageHeader,
   Body: MessageBody,
   Block: MessageBlock,
+  Paragraph: MessageParagraph,
+  OrderedList: MessageOrderedList,
+  OrderedListItem: MessageOrderedListItem,
+  UnorderedList: MessageUnorderedList,
+  UnorderedListItem: MessageUnorderedListItem,
   Timestamp: MessageTimestamp,
   Name: MessageName,
   Username: MessageUsername,