Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(fuselage): MessageMetrics props types #1342

Merged
merged 4 commits into from
Apr 1, 2024
Merged

fix(fuselage): MessageMetrics props types #1342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b4eb263
fix: `MessageMetrics` props types
dougfabris Mar 28, 2024
6e77156
Merge branch 'main' into fix/messageMetricsProps
dougfabris Mar 28, 2024
df2df29
chore: changeset
dougfabris Mar 28, 2024
c3ab7ee
fix: import default
dougfabris Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/angry-avocados-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": patch
---

fix(fuselage): MessageMetrics props types
33 changes: 25 additions & 8 deletions packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,31 @@
import { composeStories } from '@storybook/testing-react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';
import React from 'react';

import MessageMetrics from '.';
import * as stories from './MessageMetrics.stories';

it('renders without crashing', () => {
render(
<MessageMetrics>
<MessageMetrics.Reply />
<MessageMetrics.Item />
<MessageMetrics.Following name='bell' />
</MessageMetrics>
const testCases = Object.values(composeStories(stories)).map((Story) => [
Story.storyName || 'Story',
Story,
]);

describe('[MessageMetrics Rendering]', () => {
test.each(testCases)(
`renders %s without crashing`,
async (_storyname, Story) => {
const tree = render(<Story />);
expect(tree.baseElement).toMatchSnapshot();
}
);

test.each(testCases)(
'%s should have no a11y violations',
async (_storyname, Story) => {
const { container } = render(<Story />);

const results = await axe(container);
expect(results).toHaveNoViolations();
}
);
});
51 changes: 51 additions & 0 deletions packages/fuselage/src/components/Message/MessageMetrics/MessageMetrics.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { action } from '@storybook/addon-actions';
import { Title, Primary } from '@storybook/addon-docs';
import type { ComponentMeta } from '@storybook/react';
import React from 'react';

import {
MessageMetrics,
MessageMetricsReply,
MessageMetricsItem,
MessageMetricsFollowing,
MessageMetricsItemIcon,
MessageMetricsItemLabel,
} from '.';
import { BasicMessageTemplate } from '../helpers';

export default {
title: 'Message/MessageMetrics',
component: MessageMetrics,
parameters: {
docs: {
page: () => (
<>
<Title />
<Primary />
</>
),
},
},
} as ComponentMeta<typeof MessageMetrics>;

const metrics = (
<MessageMetrics>
<MessageMetricsReply>Reply</MessageMetricsReply>
<MessageMetricsItem title='Replies'>
<MessageMetricsItemIcon name='thread' />
<MessageMetricsItemLabel>10</MessageMetricsItemLabel>
</MessageMetricsItem>
<MessageMetricsItem>
<MessageMetricsFollowing
title='Following'
name='bell'
onClick={action('click')}
/>
</MessageMetricsItem>
</MessageMetrics>
);

export const Default = BasicMessageTemplate.bind({});
Default.args = {
metrics,
};
12 changes: 4 additions & 8 deletions packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import type { ReactNode } from 'react';
import type { HTMLAttributes } from 'react';
import React from 'react';

type ContentProps = {
children?: ReactNode;
};

export const Content = (props: ContentProps) => (
<div className='rcx-message-metrics__content' {...props} />
);
export const MessageMetricsContent = (
props: HTMLAttributes<HTMLDivElement>
) => <div className='rcx-message-metrics__content' {...props} />;
8 changes: 2 additions & 6 deletions packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsContentItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import type { ReactNode } from 'react';
import type { HTMLAttributes } from 'react';
import React from 'react';

type MessageMetricsContentItemProps = {
children?: ReactNode;
};

export const MessageMetricsContentItem = (
props: MessageMetricsContentItemProps
props: HTMLAttributes<HTMLDivElement>
) => <div className='rcx-message-metrics__content-item' {...props} />;
8 changes: 6 additions & 2 deletions packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsFollowing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import type { ComponentProps } from 'react';
import React from 'react';

import { IconButton } from '../../Button';

type MessageMetricsFollowingProps = { name: 'bell' | 'bell-off' };
type MessageMetricsFollowingProps = {
name: 'bell' | 'bell-off';
} & Omit<ComponentProps<typeof IconButton>, 'icon'>;

export const MessageMetricsFollowing = ({
name,
}: MessageMetricsFollowingProps) => <IconButton small icon={name} />;
...props
}: MessageMetricsFollowingProps) => <IconButton {...props} small icon={name} />;
8 changes: 2 additions & 6 deletions ...lage/src/components/Message/MessageMetrics/MessageMetricsItem/MessageMetricsItemLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import type { ReactNode } from 'react';
import type { HTMLAttributes } from 'react';
import React from 'react';

type MessageMetricsItemLabelProps = {
children?: ReactNode;
};

export const MessageMetricsItemLabel = (
props: MessageMetricsItemLabelProps
props: HTMLAttributes<HTMLDivElement>
) => <div className='rcx-message-metrics__item-label' {...props} />;
8 changes: 8 additions & 0 deletions packages/fuselage/src/components/Message/MessageMetrics/MessageMetricsItem/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ import { MessageMetricsItemIcon } from './MessageMetricsItemIcon';
import { MessageMetricsItemLabel } from './MessageMetricsItemLabel';

export default Object.assign(MessageMetricsItem, {
/**
* @deprecated prefer using named imports
* */
Icon: MessageMetricsItemIcon,
/**
* @deprecated prefer using named imports
* */
Label: MessageMetricsItemLabel,
});

export { MessageMetricsItem, MessageMetricsItemIcon, MessageMetricsItemLabel };
173 changes: 173 additions & 0 deletions ...fuselage/src/components/Message/MessageMetrics/__snapshots__/MessageMetrics.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`[MessageMetrics Rendering] renders Default without crashing 1`] = `
<body>
<div>
<div
class="rcx-box rcx-box--full"
>
<div
class="rcx-message-divider"
role="separator"
>
<div
class="rcx-message-divider__bar"
/>
<div
class="rcx-message-divider__wrapper"
>
May, 24, 2020
</div>

<div
class="rcx-message-divider__bar"
/>
</div>
<div
class="rcx-message rcx-message--clickable customclass"
tabindex="0"
>
<div
class="rcx-box rcx-box--full rcx-message-container rcx-message-container--left"
>
<figure
class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x36"
>
<img
alt=""
class="rcx-avatar__element rcx-avatar__element--x36"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
/>
</figure>
</div>
<div
class="rcx-box rcx-box--full rcx-message-container"
>
<div
class="rcx-box rcx-box--full rcx-message-header"
>
<div
class="rcx-box rcx-box--full rcx-message-header__wrapper"
>
<span
class="rcx-box rcx-box--full rcx-message-header__name-container"
>
<span
class="rcx-box rcx-box--full rcx-message-header__name"
>
Haylie George
</span>

<span
class="rcx-box rcx-box--full rcx-message-header__username"
>
@haylie.george
</span>
</span>
<div
class="rcx-box rcx-box--full rcx-message-header__roles"
>
<span
class="rcx-box rcx-box--full rcx-tag rcx-box rcx-box--full rcx-message-header__role"
>
<span
class="rcx-tag__inner"
>
Admin
</span>
</span>
<span
class="rcx-box rcx-box--full rcx-tag rcx-box rcx-box--full rcx-message-header__role"
>
<span
class="rcx-tag__inner"
>
User
</span>
</span>
<span
class="rcx-box rcx-box--full rcx-tag rcx-box rcx-box--full rcx-message-header__role"
>
<span
class="rcx-tag__inner"
>
Owner
</span>
</span>
</div>
<span
class="rcx-box rcx-box--full rcx-message-header__time"
>
12:00 PM
</span>
</div>
</div>
<div
class="rcx-message-body"
>
Ut enim ad minim veniam
</div>
<div
class="rcx-box rcx-box--full rcx-message-block"
>
<div
class="rcx-message-metrics__content-item"
>
<div
class="rcx-message-metrics__content-wrapper"
>
<div
class="rcx-message-metrics__item"
>
<button
class="rcx-box rcx-box--full rcx-button--small rcx-button--primary rcx-button"
type="button"
>
<span
class="rcx-button--content"
>
Reply
</span>
</button>
</div>
<div
class="rcx-message-metrics__item"
title="Replies"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-thread rcx-icon rcx-css-4pvxx3"
>
</i>
<div
class="rcx-message-metrics__item-label"
>
10
</div>
</div>
<div
class="rcx-message-metrics__item"
>
<button
class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button"
title="Following"
type="button"
>
<i
aria-hidden="true"
class="rcx-box rcx-box--full rcx-icon--name-bell rcx-icon rcx-css-4pvxx3"
>
</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;
17 changes: 11 additions & 6 deletions packages/fuselage/src/components/Message/MessageMetrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,19 @@ import MessageMetricsItem from './MessageMetricsItem';
import { MessageMetricsReply } from './MessageMetricsReply';

export default Object.assign(MessageMetrics, {
/**
* @deprecated prefer using named imports
* */
Reply: MessageMetricsReply,
/**
* @deprecated prefer using named imports
* */
Item: MessageMetricsItem,
/**
* @deprecated prefer using named imports
* */
Following: MessageMetricsFollowing,
});

export {
MessageMetrics,
MessageMetricsFollowing,
MessageMetricsItem,
MessageMetricsReply,
};
export { MessageMetrics, MessageMetricsFollowing, MessageMetricsReply };
export * from './MessageMetricsItem';
3 changes: 3 additions & 0 deletions packages/fuselage/src/components/Message/helpers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ export const avatarUrl =
export const BasicMessageTemplate: Story = ({
reactions,
toolbar,
metrics,
}: {
reactions?: ReactNode;
toolbar?: ReactNode;
metrics?: ReactNode;
}) => (
<Box>
<MessageDivider>May, 24, 2020</MessageDivider>
Expand All @@ -38,6 +40,7 @@ export const BasicMessageTemplate: Story = ({
</Message.Header>
<Message.Body>Ut enim ad minim veniam</Message.Body>
{reactions}
{metrics && <Message.Block>{metrics}</Message.Block>}
</Message.Container>
{toolbar}
</Message>
Expand Down
Loading