[APP-1048] Add tooltip to accessibility statement (#159)

* add: tooltip to accessibility statement

* update: hide infotip when statement link is set

* update: infotip's text

* fix: infotip naming and logic

Author: nirbhayel

modules/settings/assets/js/components/sidebar-menu/index.js

@@ -55,6 +55,9 @@ const SidebarMenu = () => {
 							<ListItemIcon>{item.icon}</ListItemIcon>
 
 							<ListItemText primary={item.name} hidden={!openSidebar} />
+
+							{/* Show infotip */ item?.infotip}
+
 							{item?.children && (
 								<ListItemIcon
 									sx={{

modules/settings/assets/js/components/sidebar-menu/menu.js

@@ -2,6 +2,7 @@ import { PagesIcon } from '@elementor/icons';
 import { WidgetIcon } from '@ea11y/icons';
 import { AccessibilityStatement, Menu, IconSettings } from '@ea11y/pages';
 import { __ } from '@wordpress/i18n';
+import AccessibilityStatementTooltip from './tooltips/accessibility-statement';
 
 export const MenuItems = {
 	widget: {
@@ -26,5 +27,6 @@ export const MenuItems = {
 		key: 'accessibility-statement',
 		page: <AccessibilityStatement />,
 		icon: <PagesIcon size="small" sx={{ color: 'common.black' }} />,
+		infotip: <AccessibilityStatementTooltip />,
 	},
 };

modules/settings/assets/js/components/sidebar-menu/tooltips/accessibility-statement.js

@@ -0,0 +1,56 @@
+import { InfoCircleIcon } from '@elementor/icons';
+import { CardActions } from '@elementor/ui';
+import Button from '@elementor/ui/Button';
+import Card from '@elementor/ui/Card';
+import CardContent from '@elementor/ui/CardContent';
+import CardHeader from '@elementor/ui/CardHeader';
+import Infotip from '@elementor/ui/Infotip';
+import Typography from '@elementor/ui/Typography';
+import { useSettings } from '@ea11y/hooks';
+import { __ } from '@wordpress/i18n';
+
+const AccessibilityStatementTooltip = () => {
+	const { selectedMenu, setSelectedMenu, accessibilityStatementData } =
+		useSettings();
+
+	if (accessibilityStatementData?.link) {
+		return null;
+	}
+
+	const TooltipCard = (
+		<Card elevation={0} sx={{ maxWidth: 300 }}>
+			<CardHeader
+				title={__('Accessibility statement generator', 'pojo-accessibility')}
+			/>
+			<CardContent>
+				<Typography variant="body2" color="text.secondary">
+					{__(
+						'You can now create an accessibility statement and page in seconds—this way visitors know your site is inclusive.',
+						'pojo-accessibility',
+					)}
+				</Typography>
+			</CardContent>
+			<CardActions>
+				<Button
+					size="small"
+					variant="contained"
+					onClick={() => {
+						if ('accessibility-statement' !== selectedMenu) {
+							setSelectedMenu('accessibility-statement');
+						}
+					}}
+				>
+					{__('Take me there', 'pojo-accessibility')}
+				</Button>
+			</CardActions>
+		</Card>
+	);
+
+	return (
+		<Infotip placement="right" content={TooltipCard}>
+			<InfoCircleIcon color="info" sx={{ ml: 1 }} />
+		</Infotip>
+	);
+};
+
+export default AccessibilityStatementTooltip;