feat: add tooltips on preview navigator icon buttons

Refs: PREV-139 (#120)

docs/api/carbonio-ui-preview.previewnavigatorprops.md

@@ -90,6 +90,25 @@ boolean
 _(Optional)_ Flag to disable the Portal implementation
 
 
+</td></tr>
+<tr><td>
+
+[nextTooltip?](./carbonio-ui-preview.previewnavigatorprops.nexttooltip.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+_(Optional)_ Tooltip for the next icon button
+
+
 </td></tr>
 <tr><td>
 
@@ -166,6 +185,25 @@ _(Optional)_ Callback invoked when the preview overlay is clicked
 _(Optional)_ Callback invoked when the previous preview is requested
 
 
+</td></tr>
+<tr><td>
+
+[previousTooltip?](./carbonio-ui-preview.previewnavigatorprops.previoustooltip.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+_(Optional)_ Tooltip for the previous icon button
+
+
 </td></tr>
 <tr><td>
 

docs/api/carbonio-ui-preview.previewnavigatorprops.nexttooltip.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [PreviewNavigatorProps](./carbonio-ui-preview.previewnavigatorprops.md) &gt; [nextTooltip](./carbonio-ui-preview.previewnavigatorprops.nexttooltip.md)
+
+## PreviewNavigatorProps.nextTooltip property
+
+Tooltip for the next icon button
+
+**Signature:**
+
+```typescript
+nextTooltip?: string;
+```

docs/api/carbonio-ui-preview.previewnavigatorprops.previoustooltip.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [PreviewNavigatorProps](./carbonio-ui-preview.previewnavigatorprops.md) &gt; [previousTooltip](./carbonio-ui-preview.previewnavigatorprops.previoustooltip.md)
+
+## PreviewNavigatorProps.previousTooltip property
+
+Tooltip for the previous icon button
+
+**Signature:**
+
+```typescript
+previousTooltip?: string;
+```

etc/carbonio-ui-preview.api.md

@@ -116,10 +116,12 @@ interface PreviewNavigatorProps extends Partial<Omit<HeaderProps, 'closeAction'>
     closeAction?: Omit<HeaderAction, 'onClick'>;
     container?: Element;
     disablePortal?: boolean;
+    nextTooltip?: string;
     onClose: (e: React_2.SyntheticEvent | KeyboardEvent) => void;
     onNextPreview?: (e: React_2.SyntheticEvent | KeyboardEvent) => void;
     onOverlayClick?: React_2.JSX.IntrinsicElements['div']['onClick'];
     onPreviousPreview?: (e: React_2.SyntheticEvent | KeyboardEvent) => void;
+    previousTooltip?: string;
     show: boolean;
 }
 

src/preview/ImagePreview.tsx

@@ -32,7 +32,9 @@ export const ImagePreview = forwardRef<HTMLDivElement, ImagePreviewProps>(functi
 		onClose,
 		alt,
 		onNextPreview,
-		onPreviousPreview
+		onPreviousPreview,
+		previousTooltip,
+		nextTooltip
 	},
 	ref
 ) {
@@ -76,6 +78,8 @@ export const ImagePreview = forwardRef<HTMLDivElement, ImagePreviewProps>(functi
 			onOverlayClick={onOverlayClick}
 			closeAction={closeAction}
 			onClose={onClose}
+			previousTooltip={previousTooltip}
+			nextTooltip={nextTooltip}
 		>
 			<div ref={previewRef} className={styles.previewContainer}>
 				<img

src/preview/PdfPreview.tsx

@@ -101,7 +101,9 @@ export const PdfPreview = React.forwardRef<HTMLDivElement, PdfPreviewProps>(func
 		pageLabel,
 		errorLabel = 'Failed to load document preview.',
 		loadingLabel = 'Loading document preview…',
-		printActionTooltipLabel = 'Print'
+		printActionTooltipLabel = 'Print',
+		previousTooltip,
+		nextTooltip
 	},
 	ref
 ) {
@@ -390,6 +392,8 @@ export const PdfPreview = React.forwardRef<HTMLDivElement, PdfPreviewProps>(func
 			onOverlayClick={onOverlayClick}
 			closeAction={closeAction}
 			onClose={onClose}
+			previousTooltip={previousTooltip}
+			nextTooltip={nextTooltip}
 		>
 			<>
 				{!$customContent && (

src/preview/PreviewNavigator.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { PreviewNavigator } from './PreviewNavigator.js';
+import { setup, screen } from '../tests/utils.js';
+
+describe('PreviewNavigator', () => {
+	describe('Previous/Next icon buttons', () => {
+		it('render the "previous" button', () => {
+			setup(<PreviewNavigator onClose={jest.fn()} show onPreviousPreview={jest.fn()} />);
+			expect(screen.getByRoleWithIcon('button', { icon: 'icon: ArrowBackOutline' })).toBeVisible();
+		});
+
+		it('render the tooltip "Previous" when the user hovers on the previous button', async () => {
+			const { user } = setup(
+				<PreviewNavigator onClose={jest.fn()} show onPreviousPreview={jest.fn()} />
+			);
+			await user.hover(screen.getByRoleWithIcon('button', { icon: 'icon: ArrowBackOutline' }));
+			expect(await screen.findByText(/previous/i)).toBeVisible();
+		});
+
+		it('render the "next" button', () => {
+			setup(<PreviewNavigator onClose={jest.fn()} show onNextPreview={jest.fn()} />);
+			expect(
+				screen.getByRoleWithIcon('button', { icon: 'icon: ArrowForwardOutline' })
+			).toBeVisible();
+		});
+
+		it('render the tooltip "Next" when the user hovers on the next button', async () => {
+			const { user } = setup(
+				<PreviewNavigator onClose={jest.fn()} show onNextPreview={jest.fn()} />
+			);
+			await user.hover(screen.getByRoleWithIcon('button', { icon: 'icon: ArrowForwardOutline' }));
+			expect(await screen.findByText(/next/i)).toBeVisible();
+		});
+	});
+});

src/preview/PreviewNavigator.tsx

@@ -6,7 +6,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import * as React from 'react';
 
-import { IconButton, Portal, Container } from '@zextras/carbonio-design-system';
+import { IconButton, Portal, Container, Tooltip } from '@zextras/carbonio-design-system';
 
 import FocusWithin from './FocusWithin.js';
 import Header, { HeaderAction, HeaderProps } from './Header.js';
@@ -49,6 +49,10 @@ export interface PreviewNavigatorProps extends Partial<Omit<HeaderProps, 'closeA
 	onPreviousPreview?: (e: React.SyntheticEvent | KeyboardEvent) => void;
 	/** Callback invoked when the preview overlay is clicked */
 	onOverlayClick?: React.JSX.IntrinsicElements['div']['onClick'];
+	/** Tooltip for the previous icon button */
+	previousTooltip?: string;
+	/** Tooltip for the next icon button */
+	nextTooltip?: string;
 }
 
 /** Define the preview main layout, allowing the navigation between multiple previews. */
@@ -65,7 +69,9 @@ export const PreviewNavigator = ({
 	size = '',
 	onOverlayClick,
 	closeAction,
-	onClose
+	onClose,
+	previousTooltip = 'Previous',
+	nextTooltip = 'Next'
 }: React.PropsWithChildren<PreviewNavigatorProps>): React.JSX.Element => {
 	const eventListener = useCallback<(e: KeyboardEvent) => void>(
 		(event) => {
@@ -114,27 +120,33 @@ export const PreviewNavigator = ({
 						/>
 						<Container orientation="horizontal" crossAlignment="unset" minHeight={0} flexGrow={1}>
 							{onPreviousPreview ? (
-								<IconButton
-									className={styles.absoluteLeftIconButton}
-									icon="ArrowBackOutline"
-									size="medium"
-									backgroundColor="gray0"
-									iconColor="gray6"
-									borderRadius="round"
-									onClick={onPreviousPreview}
-								/>
+								<div className={styles.absoluteLeftIconButton}>
+									<Tooltip label={previousTooltip}>
+										<IconButton
+											icon="ArrowBackOutline"
+											size="medium"
+											backgroundColor="gray0"
+											iconColor="gray6"
+											borderRadius="round"
+											onClick={onPreviousPreview}
+										/>
+									</Tooltip>
+								</div>
 							) : null}
 							{children}
 							{onNextPreview ? (
-								<IconButton
-									className={styles.absoluteRightIconButton}
-									icon="ArrowForwardOutline"
-									size="medium"
-									backgroundColor="gray0"
-									iconColor="gray6"
-									borderRadius="round"
-									onClick={onNextPreview}
-								/>
+								<div className={styles.absoluteRightIconButton}>
+									<Tooltip label={nextTooltip}>
+										<IconButton
+											icon="ArrowForwardOutline"
+											size="medium"
+											backgroundColor="gray0"
+											iconColor="gray6"
+											borderRadius="round"
+											onClick={onNextPreview}
+										/>
+									</Tooltip>
+								</div>
 							) : null}
 						</Container>
 					</div>

src/preview/VideoPreview.tsx

@@ -37,7 +37,9 @@ export const VideoPreview = forwardRef<HTMLDivElement, VideoPreviewProps>(functi
 		closeAction,
 		onClose,
 		onNextPreview,
-		onPreviousPreview
+		onPreviousPreview,
+		previousTooltip,
+		nextTooltip
 	},
 	ref
 ) {
@@ -113,6 +115,8 @@ export const VideoPreview = forwardRef<HTMLDivElement, VideoPreviewProps>(functi
 			onOverlayClick={onOverlayClick}
 			closeAction={closeAction}
 			onClose={onClose}
+			previousTooltip={previousTooltip}
+			nextTooltip={nextTooltip}
 		>
 			<div ref={previewRef} className={styles.previewContainer}>
 				{!canPlayType || videoFailed ? (