diff --git a/packages/module/src/Shortcut/Shortcut.test.tsx b/packages/module/src/Shortcut/Shortcut.test.tsx index fb059ffa..a545b822 100644 --- a/packages/module/src/Shortcut/Shortcut.test.tsx +++ b/packages/module/src/Shortcut/Shortcut.test.tsx @@ -1,8 +1,27 @@ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import Shortcut from './Shortcut'; describe('Shortcut component', () => { it('should render correctly', () => { expect(render()).toMatchSnapshot(); }); + + it('should render custom i18n labels for mouse actions', () => { + render( + + ); + + expect(screen.getByText('Survoler')).toBeInTheDocument(); + expect(screen.getByText('Cliquer')).toBeInTheDocument(); + expect(screen.getByText('Clic droit')).toBeInTheDocument(); + expect(screen.getByText('Glisser')).toBeInTheDocument(); + expect(screen.getByText('Glisser + Déposer')).toBeInTheDocument(); + }); }); diff --git a/packages/module/src/Shortcut/Shortcut.tsx b/packages/module/src/Shortcut/Shortcut.tsx index 7fd8741c..ff5915e0 100644 --- a/packages/module/src/Shortcut/Shortcut.tsx +++ b/packages/module/src/Shortcut/Shortcut.tsx @@ -21,6 +21,16 @@ export interface ShortcutProps { drag?: boolean; /** Show drag and drop in the shortcut */ dragAndDrop?: boolean; + /** Custom label for the "Hover" mouse action. Defaults to "Hover" */ + hoverLabel?: string; + /** Custom label for the "Click" mouse action. Defaults to "Click" */ + clickLabel?: string; + /** Custom label for the "Right click" mouse action. Defaults to "Right click" */ + rightClickLabel?: string; + /** Custom label for the "Drag" mouse action. Defaults to "Drag" */ + dragLabel?: string; + /** Custom label for the "Drag + Drop" mouse action. Defaults to "Drag + Drop" */ + dragAndDropLabel?: string; /** Shortcut className */ className?: string; /** Custom OUIA ID */ @@ -54,6 +64,11 @@ const Shortcut: FunctionComponent = ({ drag, rightClick, dragAndDrop, + hoverLabel = 'Hover', + clickLabel = 'Click', + rightClickLabel = 'Right click', + dragLabel = 'Drag', + dragAndDropLabel = 'Drag + Drop', className, ouiaId = 'Shortcut', ...props @@ -62,7 +77,7 @@ const Shortcut: FunctionComponent = ({ const badges = [ ...(hover ? [ ] : []), ...keys.map((key) => { @@ -75,22 +90,22 @@ const Shortcut: FunctionComponent = ({ )}), ...(click ? [ ] : []), ...(rightClick ? [ ] : []), ...(drag ? [ ] : []), ...(dragAndDrop ? [ ] : []) ]