Skip to content

Commit c31e428

Browse files
MartinSchoelerdougfabris
MartinSchoeler
and
dougfabris
authored
chore: add the ability to use info icon on InfoPanelLabel (RocketChat#37164)
Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
1 parent 67f9939 commit c31e428

4 files changed

Lines changed: 117 additions & 5 deletions

File tree

‎apps/meteor/client/components/InfoPanel/InfoPanel.spec.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { composeStories } from '@storybook/react';
2+
import { render } from '@testing-library/react';
3+
import { axe } from 'jest-axe';
4+
5+
import * as stories from './InfoPanel.stories';
6+
7+
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
8+
test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
9+
const { baseElement } = render(<Story />);
10+
expect(baseElement).toMatchSnapshot();
11+
});
12+
13+
test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
14+
const { container } = render(<Story />);
15+
16+
const results = await axe(container);
17+
expect(results).toHaveNoViolations();
18+
});

‎apps/meteor/client/components/InfoPanel/InfoPanel.stories.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export const Default: StoryFn<typeof InfoPanel> = () => (
3838
<InfoPanelSection>
3939
<InfoPanelTitle title='rocketchat-frontend-team' icon='hashtag' />
4040
</InfoPanelSection>
41-
4241
<InfoPanelSection>
4342
<InfoPanelField>
4443
<InfoPanelLabel>Description</InfoPanelLabel>
@@ -55,7 +54,7 @@ export const Default: StoryFn<typeof InfoPanel> = () => (
5554
</InfoPanelText>
5655
</InfoPanelField>
5756
<InfoPanelField>
58-
<InfoPanelLabel>Topic</InfoPanelLabel>
57+
<InfoPanelLabel title='This is helpful information about the label'>Topic</InfoPanelLabel>
5958
<InfoPanelText>
6059
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit
6160
libero
@@ -67,4 +66,3 @@ export const Default: StoryFn<typeof InfoPanel> = () => (
6766
</InfoPanelSection>
6867
</InfoPanel>
6968
);
70-
Default.storyName = 'InfoPanel';

‎apps/meteor/client/components/InfoPanel/InfoPanelLabel.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import { Box } from '@rocket.chat/fuselage';
1+
import { Box, Icon } from '@rocket.chat/fuselage';
22
import type { ComponentPropsWithoutRef } from 'react';
33

44
type InfoPanelLabelProps = ComponentPropsWithoutRef<typeof Box>;
55

6-
const InfoPanelLabel = (props: InfoPanelLabelProps) => <Box mb={8} fontScale='p2m' color='default' {...props} />;
6+
const InfoPanelLabel = ({ title, children, ...props }: InfoPanelLabelProps) => (
7+
<Box mb={8} fontScale='p2m' color='default' {...props}>
8+
{children}
9+
{title && <Icon name='info' color='font-secondary-info' mi={4} size='x16' title={title} />}
10+
</Box>
11+
);
712

813
export default InfoPanelLabel;

‎apps/meteor/client/components/InfoPanel/__snapshots__/InfoPanel.spec.tsx.snap‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2+
3+
exports[`renders Default without crashing 1`] = `
4+
<body>
5+
<div>
6+
<div
7+
class="rcx-box rcx-box--full rcx-css-19lqiwa"
8+
>
9+
<div
10+
class="rcx-box rcx-box--full rcx-css-13kmycs"
11+
/>
12+
<div
13+
class="rcx-box rcx-box--full rcx-css-6jv9ad"
14+
>
15+
<div
16+
class="rcx-box rcx-box--full rcx-css-1rn5ews"
17+
>
18+
<i
19+
aria-hidden="true"
20+
class="rcx-box rcx-box--full rcx-icon--name-hashtag rcx-icon rcx-css-tqjil4"
21+
>
22+
23+
</i>
24+
<div
25+
class="rcx-box rcx-box--full rcx-css-dredvr"
26+
title="rocketchat-frontend-team"
27+
>
28+
rocketchat-frontend-team
29+
</div>
30+
</div>
31+
</div>
32+
<div
33+
class="rcx-box rcx-box--full rcx-css-6jv9ad"
34+
>
35+
<div
36+
class="rcx-box rcx-box--full rcx-css-1jagyun"
37+
>
38+
<div
39+
class="rcx-box rcx-box--full rcx-css-f0ql1y"
40+
>
41+
Description
42+
</div>
43+
<div
44+
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
45+
>
46+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero
47+
</div>
48+
</div>
49+
<div
50+
class="rcx-box rcx-box--full rcx-css-1jagyun"
51+
>
52+
<div
53+
class="rcx-box rcx-box--full rcx-css-f0ql1y"
54+
>
55+
Announcement
56+
</div>
57+
<div
58+
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
59+
>
60+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero
61+
</div>
62+
</div>
63+
<div
64+
class="rcx-box rcx-box--full rcx-css-1jagyun"
65+
>
66+
<div
67+
class="rcx-box rcx-box--full rcx-css-f0ql1y"
68+
>
69+
Topic
70+
<i
71+
aria-hidden="true"
72+
class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-gji86h"
73+
title="This is helpful information about the label"
74+
>
75+
76+
</i>
77+
</div>
78+
<div
79+
class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
80+
>
81+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis nisi vel arcu bibendum vehicula. Integer vitae suscipit libero
82+
</div>
83+
</div>
84+
</div>
85+
<div
86+
class="rcx-box rcx-box--full rcx-css-6jv9ad"
87+
/>
88+
</div>
89+
</div>
90+
</body>
91+
`;

0 commit comments

Comments
 (0)