diff --git a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx index 16faef64fd..817e134789 100644 --- a/packages/fuselage-ui-kit/src/stories/Message.stories.tsx +++ b/packages/fuselage-ui-kit/src/stories/Message.stories.tsx @@ -1,5 +1,17 @@ /* eslint-disable new-cap */ -import { Message, Avatar } from '@rocket.chat/fuselage'; +import { + Message, + Avatar, + MessageLeftContainer, + MessageHeader, + MessageContainer, + MessageName, + MessageUsername, + MessageRole, + MessageTimestamp, + MessageToolbox, + MessageBody, +} from '@rocket.chat/fuselage'; import * as UiKit from '@rocket.chat/ui-kit'; import { action } from '@storybook/addon-actions'; import React from 'react'; @@ -23,7 +35,7 @@ const createStory = (blocks: readonly UiKit.LayoutBlock[]) => { errors: Record; }) => ( - + - - - - Haylie George - @haylie.george - Admin - User - Owner - 12:00 PM - - + + + + Haylie George + @haylie.george + Admin + User + Owner + 12:00 PM + + { > {UiKitMessage(blocks)} - - - - - - - - - + + + + + + + + + ); story.args = { diff --git a/packages/fuselage-ui-kit/src/version.ts b/packages/fuselage-ui-kit/src/version.ts index 5cd2f3335b..aeb3ef2310 100644 --- a/packages/fuselage-ui-kit/src/version.ts +++ b/packages/fuselage-ui-kit/src/version.ts @@ -1 +1 @@ -export default '0.29.0'; +export default '0.30.0'; diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Default.png index 5dbd41ac42..0094f6fac5 100644 Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Message_With_Thread.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Message_With_Thread.png new file mode 100644 index 0000000000..3e0b570f2c Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_Message_With_Thread.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_With_Sequential.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_With_Sequential.png new file mode 100644 index 0000000000..a355579e4a Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Message_With_Sequential.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Attachment.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Attachment.png new file mode 100644 index 0000000000..60da6fc472 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Attachment.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Default.png new file mode 100644 index 0000000000..9ec3ab39b5 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Large_Footer.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Large_Footer.png new file mode 100644 index 0000000000..8d9b38cf8f Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Large_Footer.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Large_Title.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Large_Title.png new file mode 100644 index 0000000000..f96c5fef3b Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Large_Title.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_No_Preview.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_No_Preview.png new file mode 100644 index 0000000000..420972cee4 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_No_Preview.png differ diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Thumb.png b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Thumb.png new file mode 100644 index 0000000000..f260d13b2a Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_iphone7_Messages_Preview_Thumb.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Default.png index acbfe2c36e..739830a12a 100644 Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Message_With_Thread.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Message_With_Thread.png new file mode 100644 index 0000000000..c72c7862a1 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_Message_With_Thread.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_With_Sequential.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_With_Sequential.png new file mode 100644 index 0000000000..fcaf684a69 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Message_With_Sequential.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Attachment.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Attachment.png new file mode 100644 index 0000000000..313d050205 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Attachment.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Default.png new file mode 100644 index 0000000000..6bce89a2a5 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Default.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Large_Footer.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Large_Footer.png new file mode 100644 index 0000000000..961f621303 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Large_Footer.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Large_Title.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Large_Title.png new file mode 100644 index 0000000000..7cebf35401 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Large_Title.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_No_Preview.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_No_Preview.png new file mode 100644 index 0000000000..9f01f0107a Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_No_Preview.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Thumb.png b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Thumb.png new file mode 100644 index 0000000000..ef6929b5e9 Binary files /dev/null and b/packages/fuselage/.loki/reference/chrome_laptop_Messages_Preview_Thumb.png differ diff --git a/packages/fuselage/src/components/Message/Message.tsx b/packages/fuselage/src/components/Message/Message.tsx index a81e9460eb..498ce890e2 100644 --- a/packages/fuselage/src/components/Message/Message.tsx +++ b/packages/fuselage/src/components/Message/Message.tsx @@ -10,17 +10,17 @@ import './Messages.styles.scss'; import { prependClassName } from '../../helpers/prependClassName'; import { Tag } from '../Tag'; -import { Divider } from './Divider'; -import { Metrics } from './Metrics'; -import { Toolbox } from './Toolbox'; +import { MessageDivider } from './MessageDivider'; +import { MessageMetrics } from './MessageMetrics'; +import { MessageToolbox } from './MessageToolbox'; -const Container: FC = function Container(props) { +export const MessageContainer: FC = function MessageContainer(props) { return (
); }; -const ContainerFixed: FC = function Container(props) { +export const MessageContainerFixed: FC = function MessageContainerFixed(props) { return (
); -const Header: FC = function Header({ children }) { +export const MessageHeader: FC = function MessageHeader({ children }) { return (
@@ -56,7 +56,7 @@ type MessageBodyProps = AllHTMLAttributes & { clamp?: 2 | 3 | 4; }; -const MessageBody = ({ +export const MessageBody = ({ clamp, className, ...props @@ -99,44 +99,49 @@ type MessageProps = AllHTMLAttributes & { sequential?: boolean; }; -const Message = forwardRef(function Message( - { - // is: Tag = 'div', - className, - clickable, - sequential, - ...props - }, - ref -) { - return ( -
- ); -}); - -const Timestamp: FC<{ children: string }> = function Timestamp(props) { - return ( - - ); -}; +export const Message = forwardRef( + function Message( + { + // is: Tag = 'div', + className, + clickable, + sequential, + ...props + }, + ref + ) { + return ( +
+ ); + } +); -const Name: FC<{ children: string }> = function Name(props) { +export const MessageTimestamp: FC<{ children: string }> = + function MessageTimestamp(props) { + return ( + + ); + }; + +export const MessageName: FC<{ children: string }> = function MessageName( + props +) { return ( = function Name(props) { /> ); }; -const Username: FC<{ children: string }> = function Name(props) { - return ( - - ); -}; - -const Role: FC<{ children: string }> = function Role(props) { +export const MessageUsername: FC<{ children: string }> = + function MessageUsername(props) { + return ( + + ); + }; + +export const MessageRole: FC<{ children: string }> = function MessageRole( + props +) { return ( = function Role(props) { ); }; -const Roles: FC = function Role(props) { +export const MessageRoles: FC = function MessageRoles(props) { return (
@@ -10,11 +10,11 @@ import { Box } from '../..'; - Text - Text - + Text + Text + - + diff --git a/packages/fuselage/src/components/Message/Divider/index.tsx b/packages/fuselage/src/components/Message/MessageDivider/index.tsx similarity index 92% rename from packages/fuselage/src/components/Message/Divider/index.tsx rename to packages/fuselage/src/components/Message/MessageDivider/index.tsx index c5d3aa63a1..6aaa39da46 100644 --- a/packages/fuselage/src/components/Message/Divider/index.tsx +++ b/packages/fuselage/src/components/Message/MessageDivider/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -const Divider: FC<{ +const MessageDivider: FC<{ unreadLabel?: string; }> = ({ children, unreadLabel, ...props }) => (
); -export { Divider }; +export { MessageDivider }; diff --git a/packages/fuselage/src/components/Message/Divider/spec.js b/packages/fuselage/src/components/Message/MessageDivider/spec.js similarity index 100% rename from packages/fuselage/src/components/Message/Divider/spec.js rename to packages/fuselage/src/components/Message/MessageDivider/spec.js diff --git a/packages/fuselage/src/components/Message/Divider/styles.scss b/packages/fuselage/src/components/Message/MessageDivider/styles.scss similarity index 100% rename from packages/fuselage/src/components/Message/Divider/styles.scss rename to packages/fuselage/src/components/Message/MessageDivider/styles.scss diff --git a/packages/fuselage/src/components/Message/Metrics/Metrics.styles.scss b/packages/fuselage/src/components/Message/MessageMetrics/Metrics.styles.scss similarity index 100% rename from packages/fuselage/src/components/Message/Metrics/Metrics.styles.scss rename to packages/fuselage/src/components/Message/MessageMetrics/Metrics.styles.scss diff --git a/packages/fuselage/src/components/Message/Metrics/index.tsx b/packages/fuselage/src/components/Message/MessageMetrics/index.tsx similarity index 81% rename from packages/fuselage/src/components/Message/Metrics/index.tsx rename to packages/fuselage/src/components/Message/MessageMetrics/index.tsx index 7e4aa6c7fe..2455bd653c 100644 --- a/packages/fuselage/src/components/Message/Metrics/index.tsx +++ b/packages/fuselage/src/components/Message/MessageMetrics/index.tsx @@ -21,12 +21,12 @@ const MetricsItemLabel: FC = (props) => (
); -const MetricsItem: FC & { +export const MessageMetricsItem: FC & { Icon: FC; Label: FC; } = (props) =>
; -export const Metrics: FC & { +export const MessageMetrics: FC & { Item: FC & { Icon: FC; Label: FC }; Following: FC; Reply: FC; @@ -42,15 +42,15 @@ const MetricsFollowing: FC = ({ name }) => ( ); export const Reply: FC> = (props) => ( - +