From 091162b016e839925f1d1330dd4cec0b95478216 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 30 Jul 2025 14:06:07 -0300 Subject: [PATCH 1/6] feat: added annotation to WizardActions --- .../ui-client/src/components/Wizard/WizardActions.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/ui-client/src/components/Wizard/WizardActions.tsx b/packages/ui-client/src/components/Wizard/WizardActions.tsx index 29d5928e9551f..8a891cbbc874f 100644 --- a/packages/ui-client/src/components/Wizard/WizardActions.tsx +++ b/packages/ui-client/src/components/Wizard/WizardActions.tsx @@ -2,11 +2,18 @@ import { Box, ButtonGroup } from '@rocket.chat/fuselage'; import type { ReactNode } from 'react'; type WizardActionsProps = { + annotation?: string; children: ReactNode; }; -const WizardActions = ({ children }: WizardActionsProps) => ( - +const WizardActions = ({ annotation, children }: WizardActionsProps) => ( + + {annotation ? ( + + {annotation} + + ) : null} + {children} ); From d4da2f298de3a051a7bcf07c1fe157ae05869aa7 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 30 Jul 2025 14:06:45 -0300 Subject: [PATCH 2/6] chore: added storybook stories --- .../Wizard/WizardActions.stories.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 packages/ui-client/src/components/Wizard/WizardActions.stories.tsx diff --git a/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx new file mode 100644 index 0000000000000..b52b5c2e28d57 --- /dev/null +++ b/packages/ui-client/src/components/Wizard/WizardActions.stories.tsx @@ -0,0 +1,49 @@ +import { Box } from '@rocket.chat/fuselage'; +import type { Meta, StoryFn } from '@storybook/react'; +import { ComponentProps } from 'react'; + +import Wizard from './Wizard'; +import WizardActions from './WizardActions'; +import WizardBackButton from './WizardBackButton'; +import WizardNextButton from './WizardNextButton'; +import { useWizard } from './useWizard'; + +export default { + title: 'Components/Wizard/WizardActions', + component: WizardActions, + decorators: (Story) => { + const wizardApi = useWizard({ + steps: [ + { id: 'first-step', title: 'First step' }, + { id: 'second-step', title: 'Second step' }, + { id: 'third-step', title: 'Third step' }, + ], + }); + + return ( + + + + + + ); + }, + parameters: { + layout: 'centered', + }, +} satisfies Meta; + +const Template: StoryFn> = (args) => ( + + + + +); + +export const Default = Template.bind({}); +Default.args = {}; + +export const WithAnnotation = Template.bind({}); +WithAnnotation.args = { + annotation: 'This is a sample annotation', +}; From ec23b194609c288c7795bf764d1a98d9e751aba3 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 30 Jul 2025 14:07:11 -0300 Subject: [PATCH 3/6] test: added unit tests --- .../components/Wizard/WizardActions.spec.tsx | 20 ++++ .../__snapshots__/WizardActions.spec.tsx.snap | 96 +++++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 packages/ui-client/src/components/Wizard/WizardActions.spec.tsx create mode 100644 packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap diff --git a/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx b/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx new file mode 100644 index 0000000000000..a1988ad7650fe --- /dev/null +++ b/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx @@ -0,0 +1,20 @@ +import { composeStories } from '@storybook/react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; + +import * as stories from './WizardActions.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); + +test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); +}); + +test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); +}); + diff --git a/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap b/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap new file mode 100644 index 0000000000000..cb0259b40eba3 --- /dev/null +++ b/packages/ui-client/src/components/Wizard/__snapshots__/WizardActions.spec.tsx.snap @@ -0,0 +1,96 @@ +// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing + +exports[`renders Default without crashing 1`] = ` + +
+
+
+
+
+ + +
+
+
+
+
+ +`; + +exports[`renders WithAnnotation without crashing 1`] = ` + +
+
+
+
+
+ This is a sample annotation +
+
+ + +
+
+
+
+
+ +`; From f8c6a24de94500b607ab33bd80305d10d0a53d06 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 30 Jul 2025 14:11:48 -0300 Subject: [PATCH 4/6] chore: changeset --- .changeset/popular-trees-hunt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/popular-trees-hunt.md diff --git a/.changeset/popular-trees-hunt.md b/.changeset/popular-trees-hunt.md new file mode 100644 index 0000000000000..2adaa5ce5df00 --- /dev/null +++ b/.changeset/popular-trees-hunt.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/ui-client": patch +--- + +Adds an annotation prop to the WizardActions component, enabling the display of a contextual description alongside the action buttons. From f646406d802c36d76f78899c0a460b972801c14c Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 30 Jul 2025 14:19:42 -0300 Subject: [PATCH 5/6] chore: removed break line --- packages/ui-client/src/components/Wizard/WizardActions.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx b/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx index a1988ad7650fe..ec0735482bda7 100644 --- a/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx +++ b/packages/ui-client/src/components/Wizard/WizardActions.spec.tsx @@ -17,4 +17,3 @@ test.each(testCases)('%s should have no a11y violations', async (_storyname, Sto const results = await axe(container); expect(results).toHaveNoViolations(); }); - From baea9b3260686d1e41de6b5987caec9520c5083f Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Wed, 30 Jul 2025 14:21:25 -0300 Subject: [PATCH 6/6] test: updated snapshots --- .../src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap b/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap index 98e98ea793020..9ccdb31495766 100644 --- a/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap +++ b/packages/ui-client/src/components/Wizard/__snapshots__/Wizard.spec.tsx.snap @@ -64,7 +64,7 @@ exports[`renders BasicWizard without crashing 1`] = `