Skip to content

Commit 759b178

Browse files
aleksandernsilvaaleksandernsilva
authored
feat: Added annotation to WizardActions component (RocketChat#36575)
1 parent eed22e5 commit 759b178

6 files changed

Lines changed: 180 additions & 4 deletions

File tree

‎.changeset/popular-trees-hunt.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@rocket.chat/ui-client": patch
3+
---
4+
5+
Adds an annotation prop to the WizardActions component, enabling the display of a contextual description alongside the action buttons.

‎packages/ui-client/src/components/Wizard/WizardActions.spec.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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 './WizardActions.stories';
6+
7+
const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
8+
9+
test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
10+
const tree = render(<Story />);
11+
expect(tree.baseElement).toMatchSnapshot();
12+
});
13+
14+
test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
15+
const { container } = render(<Story />);
16+
17+
const results = await axe(container);
18+
expect(results).toHaveNoViolations();
19+
});

‎packages/ui-client/src/components/Wizard/WizardActions.stories.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Box } from '@rocket.chat/fuselage';
2+
import type { Meta, StoryFn } from '@storybook/react';
3+
import { ComponentProps } from 'react';
4+
5+
import Wizard from './Wizard';
6+
import WizardActions from './WizardActions';
7+
import WizardBackButton from './WizardBackButton';
8+
import WizardNextButton from './WizardNextButton';
9+
import { useWizard } from './useWizard';
10+
11+
export default {
12+
title: 'Components/Wizard/WizardActions',
13+
component: WizardActions,
14+
decorators: (Story) => {
15+
const wizardApi = useWizard({
16+
steps: [
17+
{ id: 'first-step', title: 'First step' },
18+
{ id: 'second-step', title: 'Second step' },
19+
{ id: 'third-step', title: 'Third step' },
20+
],
21+
});
22+
23+
return (
24+
<Box width={600}>
25+
<Wizard api={wizardApi}>
26+
<Story />
27+
</Wizard>
28+
</Box>
29+
);
30+
},
31+
parameters: {
32+
layout: 'centered',
33+
},
34+
} satisfies Meta<typeof WizardActions>;
35+
36+
const Template: StoryFn<ComponentProps<typeof WizardActions>> = (args) => (
37+
<WizardActions {...args}>
38+
<WizardBackButton />
39+
<WizardNextButton />
40+
</WizardActions>
41+
);
42+
43+
export const Default = Template.bind({});
44+
Default.args = {};
45+
46+
export const WithAnnotation = Template.bind({});
47+
WithAnnotation.args = {
48+
annotation: 'This is a sample annotation',
49+
};

‎packages/ui-client/src/components/Wizard/WizardActions.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,18 @@ import { Box, ButtonGroup } from '@rocket.chat/fuselage';
22
import type { ReactNode } from 'react';
33

44
type WizardActionsProps = {
5+
annotation?: string;
56
children: ReactNode;
67
};
78

8-
const WizardActions = ({ children }: WizardActionsProps) => (
9-
<Box className='steps-wizard-footer' pbs={24} display='flex' justifyContent='end'>
9+
const WizardActions = ({ annotation, children }: WizardActionsProps) => (
10+
<Box className='steps-wizard-footer' pbs={24} display='flex' alignItems='center' justifyContent='end'>
11+
{annotation ? (
12+
<Box mie='auto' fontScale='c1' color='annotation'>
13+
{annotation}
14+
</Box>
15+
) : null}
16+
1017
<ButtonGroup>{children}</ButtonGroup>
1118
</Box>
1219
);

‎packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ exports[`renders BasicWizard without crashing 1`] = `
6464
</div>
6565
</div>
6666
<div
67-
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-h2s0k0"
67+
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
6868
>
6969
<div
7070
class="rcx-button-group rcx-button-group--align-start"
@@ -153,7 +153,7 @@ exports[`renders OrderedTabsWizard without crashing 1`] = `
153153
</div>
154154
</div>
155155
<div
156-
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-h2s0k0"
156+
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
157157
>
158158
<div
159159
class="rcx-button-group rcx-button-group--align-start"

‎packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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-1lvbc7v"
8+
>
9+
<div
10+
class="steps-wizard"
11+
>
12+
<div
13+
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
14+
>
15+
<div
16+
class="rcx-button-group rcx-button-group--align-start"
17+
role="group"
18+
>
19+
<button
20+
class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
21+
disabled=""
22+
type="button"
23+
>
24+
<span
25+
class="rcx-button--content"
26+
>
27+
Back
28+
</span>
29+
</button>
30+
<button
31+
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
32+
type="button"
33+
>
34+
<span
35+
class="rcx-button--content"
36+
>
37+
Next
38+
</span>
39+
</button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</body>
46+
`;
47+
48+
exports[`renders WithAnnotation without crashing 1`] = `
49+
<body>
50+
<div>
51+
<div
52+
class="rcx-box rcx-box--full rcx-css-1lvbc7v"
53+
>
54+
<div
55+
class="steps-wizard"
56+
>
57+
<div
58+
class="rcx-box rcx-box--full steps-wizard-footer rcx-css-7vikfg"
59+
>
60+
<div
61+
class="rcx-box rcx-box--full rcx-css-kqd92f"
62+
>
63+
This is a sample annotation
64+
</div>
65+
<div
66+
class="rcx-button-group rcx-button-group--align-start"
67+
role="group"
68+
>
69+
<button
70+
class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
71+
disabled=""
72+
type="button"
73+
>
74+
<span
75+
class="rcx-button--content"
76+
>
77+
Back
78+
</span>
79+
</button>
80+
<button
81+
class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
82+
type="button"
83+
>
84+
<span
85+
class="rcx-button--content"
86+
>
87+
Next
88+
</span>
89+
</button>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</body>
96+
`;

0 commit comments

Comments
 (0)