Skip to content

Commit 2d459bc

Browse files
author
Filipe Marins
committed
feat: add paragraph and message list
1 parent 18a4d7c commit 2d459bc

8 files changed

+193
-0
lines changed

‎packages/fuselage/src/components/Message/MessageOrderedList.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
type MessageOrderedListProps = {
5+
children?: ReactNode;
6+
};
7+
8+
export const MessageOrderedList = (props: MessageOrderedListProps) => (
9+
<ol className='rcx-box rcx-box--full rcx-message-ordered-list' {...props} />
10+
);

‎packages/fuselage/src/components/Message/MessageOrderedListItem.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
type MessageOrderedListItemProps = {
5+
children?: ReactNode;
6+
};
7+
8+
export const MessageOrderedListItem = (props: MessageOrderedListItemProps) => (
9+
<li
10+
className='rcx-box rcx-box--full rcx-message-ordered-list__item'
11+
{...props}
12+
/>
13+
);

‎packages/fuselage/src/components/Message/MessageParagraph.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
type MessageParagraphProps = {
5+
children?: ReactNode;
6+
};
7+
8+
export const MessageParagraph = (props: MessageParagraphProps) => (
9+
<p className='rcx-box rcx-box--full rcx-message-paragraph' {...props} />
10+
);

‎packages/fuselage/src/components/Message/MessageUnorderedList.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
type MessageUnorderedListProps = {
5+
children?: ReactNode;
6+
};
7+
8+
export const MessageUnorderedList = (props: MessageUnorderedListProps) => (
9+
<ul className='rcx-box rcx-box--full rcx-message-unordered-list' {...props} />
10+
);

‎packages/fuselage/src/components/Message/MessageUnorderedListItem.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { ReactNode } from 'react';
2+
import React from 'react';
3+
4+
type MessageUnorderedListItemProps = {
5+
children?: ReactNode;
6+
};
7+
8+
export const MessageUnorderedListItem = (
9+
props: MessageUnorderedListItemProps
10+
) => (
11+
<li
12+
className='rcx-box rcx-box--full rcx-message-unordered-list__item'
13+
{...props}
14+
/>
15+
);

‎packages/fuselage/src/components/Message/Messages.stories.tsx

+92
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,98 @@ export const MessageEditing = () => (
421421
</Box>
422422
);
423423

424+
export const MessageUnorderedList = () => (
425+
<Box>
426+
<MessageDivider>May, 24, 2020</MessageDivider>
427+
<Message className='customclass' clickable>
428+
<Message.LeftContainer>
429+
<Avatar url={avatarUrl} size={'x36'} />
430+
</Message.LeftContainer>
431+
<Message.Container>
432+
<Message.Header>
433+
<Message.Name>Haylie George</Message.Name>
434+
<Message.Username>@haylie.george</Message.Username>
435+
<Message.Role>Admin</Message.Role>
436+
<Message.Role>User</Message.Role>
437+
<Message.Role>Owner</Message.Role>
438+
<Message.Timestamp>12:00 PM</Message.Timestamp>
439+
</Message.Header>
440+
<Message.Body>
441+
<Message.Paragraph>Unordered list</Message.Paragraph>
442+
<Message.UnorderedList>
443+
<Message.UnorderedListItem>
444+
ut enim ad minim
445+
</Message.UnorderedListItem>
446+
<Message.UnorderedListItem>
447+
incididunt ut labore
448+
</Message.UnorderedListItem>
449+
<Message.UnorderedListItem>
450+
labore et dolore
451+
</Message.UnorderedListItem>
452+
</Message.UnorderedList>
453+
</Message.Body>
454+
<MessageReactions>
455+
<MessageReactions.Reaction counter={1} />
456+
<MessageReactions.Reaction counter={2} />
457+
<MessageReactions.Reaction counter={3} />
458+
<MessageReactions.Action />
459+
</MessageReactions>
460+
</Message.Container>
461+
<MessageToolbox.Wrapper>
462+
<MessageToolbox>
463+
<MessageToolbox.Item icon='quote' />
464+
<MessageToolbox.Item icon='clock' />
465+
<MessageToolbox.Item icon='thread' />
466+
</MessageToolbox>
467+
</MessageToolbox.Wrapper>
468+
</Message>
469+
</Box>
470+
);
471+
472+
export const MessageOrderedList = () => (
473+
<Box>
474+
<MessageDivider>May, 24, 2020</MessageDivider>
475+
<Message className='customclass' clickable>
476+
<Message.LeftContainer>
477+
<Avatar url={avatarUrl} size={'x36'} />
478+
</Message.LeftContainer>
479+
<Message.Container>
480+
<Message.Header>
481+
<Message.Name>Haylie George</Message.Name>
482+
<Message.Username>@haylie.george</Message.Username>
483+
<Message.Role>Admin</Message.Role>
484+
<Message.Role>User</Message.Role>
485+
<Message.Role>Owner</Message.Role>
486+
<Message.Timestamp>12:00 PM</Message.Timestamp>
487+
</Message.Header>
488+
<Message.Body>
489+
<Message.Paragraph>Ordered list</Message.Paragraph>
490+
<Message.OrderedList>
491+
<Message.OrderedListItem>ut enim ad minim</Message.OrderedListItem>
492+
<Message.OrderedListItem>
493+
incididunt ut labore
494+
</Message.OrderedListItem>
495+
<Message.OrderedListItem>labore et dolore</Message.OrderedListItem>
496+
</Message.OrderedList>
497+
</Message.Body>
498+
<MessageReactions>
499+
<MessageReactions.Reaction counter={1} />
500+
<MessageReactions.Reaction counter={2} />
501+
<MessageReactions.Reaction counter={3} />
502+
<MessageReactions.Action />
503+
</MessageReactions>
504+
</Message.Container>
505+
<MessageToolbox.Wrapper>
506+
<MessageToolbox>
507+
<MessageToolbox.Item icon='quote' />
508+
<MessageToolbox.Item icon='clock' />
509+
<MessageToolbox.Item icon='thread' />
510+
</MessageToolbox>
511+
</MessageToolbox.Wrapper>
512+
</Message>
513+
</Box>
514+
);
515+
424516
export const MessageHighlighted = () => (
425517
<Box>
426518
<MessageDivider>May, 24, 2020</MessageDivider>

‎packages/fuselage/src/components/Message/Messages.styles.scss

+28
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,34 @@ $message-background-color-highlight: functions.theme(
196196
flex-direction: column;
197197
}
198198

199+
&-paragraph {
200+
margin: 0;
201+
padding: 0;
202+
203+
&:empty::before {
204+
display: inline-block;
205+
206+
content: '';
207+
}
208+
}
209+
210+
&-unordered-list {
211+
list-style: none;
212+
213+
&__item {
214+
list-style-position: inside;
215+
list-style-type: '- ';
216+
}
217+
}
218+
219+
&-ordered-list {
220+
list-style: decimal;
221+
222+
&__item {
223+
list-style-position: inside;
224+
}
225+
}
226+
199227
&__emoji {
200228
display: inline-block;
201229

‎packages/fuselage/src/components/Message/index.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,15 @@ import { MessageHeader } from './MessageHeader';
88
import { MessageLeftContainer } from './MessageLeftContainer';
99
import MessageMetrics from './MessageMetrics';
1010
import { MessageName } from './MessageName';
11+
import { MessageOrderedList } from './MessageOrderedList';
12+
import { MessageOrderedListItem } from './MessageOrderedListItem';
13+
import { MessageParagraph } from './MessageParagraph';
1114
import { MessageRole } from './MessageRole';
1215
import { MessageRoles } from './MessageRoles';
1316
import { MessageTimestamp } from './MessageTimestamp';
1417
import MessageToolbox from './MessageToolbox';
18+
import { MessageUnorderedList } from './MessageUnorderedList';
19+
import { MessageUnorderedListItem } from './MessageUnorderedListItem';
1520
import { MessageUsername } from './MessageUsername';
1621

1722
export * from './MessageDivider';
@@ -34,6 +39,11 @@ export * from './MessageRoles';
3439
export * from './MessageTimestamp';
3540
export * from './MessageUsername';
3641
export * from './MessageEmoji';
42+
export * from './MessageParagraph';
43+
export * from './MessageUnorderedList';
44+
export * from './MessageUnorderedListItem';
45+
export * from './MessageOrderedList';
46+
export * from './MessageOrderedListItem';
3747

3848
export default Object.assign(Message, {
3949
Metrics: MessageMetrics,
@@ -44,6 +54,11 @@ export default Object.assign(Message, {
4454
Header: MessageHeader,
4555
Body: MessageBody,
4656
Block: MessageBlock,
57+
Paragraph: MessageParagraph,
58+
OrderedList: MessageOrderedList,
59+
OrderedListItem: MessageOrderedListItem,
60+
UnorderedList: MessageUnorderedList,
61+
UnorderedListItem: MessageUnorderedListItem,
4762
Timestamp: MessageTimestamp,
4863
Name: MessageName,
4964
Username: MessageUsername,

0 commit comments

Comments
 (0)