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 ? [
] : [])
]