SKY30-495 - Info about terrestrial protected area

Vizzuality · Oct 18, 2024 · e193300 · e193300
1 parent 3ebbc80
commit e193300
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/frontend/src/components/terrestrial-data-disclaimer-dialog.tsx b/frontend/src/components/terrestrial-data-disclaimer-dialog.tsx
@@ -13,10 +13,15 @@ import {
 import Icon from '@/components/ui/icon';
 import { terrestrialDataDisclaimerDialogAtom } from '@/containers/map/store';
 import Notification from '@/styles/icons/notification.svg';
+import { FCWithMessages } from '@/types';
 
-interface TerrestrialDataDisclaimerDialogProps {}
+interface TerrestrialDataDisclaimerDialogProps {
+  onClose?: () => void;
+}
 
-const TerrestrialDataDisclaimerDialog = ({}: TerrestrialDataDisclaimerDialogProps) => {
+const TerrestrialDataDisclaimerDialog: FCWithMessages<TerrestrialDataDisclaimerDialogProps> = ({
+  onClose,
+}) => {
   const t = useTranslations('pages.progress-tracker');
   const [, setOpen] = useAtom(terrestrialDataDisclaimerDialogAtom);
 
@@ -39,7 +44,7 @@ const TerrestrialDataDisclaimerDialog = ({}: TerrestrialDataDisclaimerDialogProp
           <Button
             type="button"
             className="font-mono text-xs font-normal normal-case"
-            onClick={() => setOpen(false)}
+            onClick={() => (onClose ? onClose() : setOpen(false))}
           >
             {t('i-understand')}
           </Button>
@@ -49,4 +54,6 @@ const TerrestrialDataDisclaimerDialog = ({}: TerrestrialDataDisclaimerDialogProp
   );
 };
 
+TerrestrialDataDisclaimerDialog.messages = ['pages.progress-tracker'];
+
 export default TerrestrialDataDisclaimerDialog;
diff --git a/frontend/src/containers/homepage/intro/index.tsx b/frontend/src/containers/homepage/intro/index.tsx
@@ -1,7 +1,10 @@
+import { useState } from 'react';
+
 import Image from 'next/image';
 
 import { useLocale, useTranslations } from 'next-intl';
 
+import TerrestrialDataDisclaimerDialog from '@/components/terrestrial-data-disclaimer-dialog';
 import Icon from '@/components/ui/icon';
 import SidebarItem from '@/containers/homepage/intro/sidebar-item';
 import { formatPercentage } from '@/lib/utils/formats';
@@ -17,6 +20,8 @@ const Intro: FCWithMessages<IntroProps> = ({ onScrollClick }) => {
   const t = useTranslations('containers.homepage-intro');
   const locale = useLocale();
 
+  const [openDisclaimer, setOpenDisclaimer] = useState(false);
+
   const { data: protectionStatsData } = useGetProtectionCoverageStats<{
     marine?: string;
     terrestrial?: string;
@@ -117,7 +122,11 @@ const Intro: FCWithMessages<IntroProps> = ({ onScrollClick }) => {
               percentage={protectionStatsData.terrestrial}
               text={t('current-total-protected-area')}
               icon="icon2"
+              onClickInfoButton={() => setOpenDisclaimer(true)}
             />
+            {openDisclaimer && (
+              <TerrestrialDataDisclaimerDialog onClose={() => setOpenDisclaimer(false)} />
+            )}
             <div className="flex h-full w-full justify-center">
               <button
                 type="button"
@@ -134,6 +143,10 @@ const Intro: FCWithMessages<IntroProps> = ({ onScrollClick }) => {
   );
 };
 
-Intro.messages = ['containers.homepage-intro', ...SidebarItem.messages];
+Intro.messages = [
+  'containers.homepage-intro',
+  ...SidebarItem.messages,
+  ...TerrestrialDataDisclaimerDialog.messages,
+];
 
 export default Intro;
diff --git a/frontend/src/containers/homepage/intro/sidebar-item/index.tsx b/frontend/src/containers/homepage/intro/sidebar-item/index.tsx
@@ -1,7 +1,9 @@
 import Image from 'next/image';
 
+import { Info } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
+import { Button } from '@/components/ui/button';
 import { FCWithMessages } from '@/types';
 
 const ICONS = {
@@ -13,16 +15,35 @@ type SidebarItemProps = {
   text: string;
   percentage: number | string;
   icon?: keyof typeof ICONS;
+  onClickInfoButton?: () => void;
 };
 
-const SidebarItem: FCWithMessages<SidebarItemProps> = ({ text, percentage, icon = 'icon1' }) => {
+const SidebarItem: FCWithMessages<SidebarItemProps> = ({
+  text,
+  percentage,
+  icon = 'icon1',
+  onClickInfoButton,
+}) => {
   const t = useTranslations('containers.homepage-intro');
 
   return (
     <div className="flex flex-row gap-6 border-b border-white px-10 py-6">
       <div className="flex flex-1 flex-col gap-2 font-mono">
-        <span className="text-6xl font-light">{percentage}%</span>
-        <span className="text-xs">{text}</span>
+        <div className="text-6xl font-light">{percentage}%</div>
+        <div className="text-xs">
+          {text}
+          {!!onClickInfoButton && (
+            <Button
+              className="ml-1.5 h-auto w-auto align-middle hover:bg-transparent hover:text-white"
+              size="icon"
+              variant="ghost"
+              onClick={onClickInfoButton}
+            >
+              <span className="sr-only">{t('info')}</span>
+              <Info className="h-4 w-4" aria-hidden="true" />
+            </Button>
+          )}
+        </div>
       </div>
       <div className="items-en flex w-[64px] items-end">
         <Image

diff --git a/frontend/translations/en.json b/frontend/translations/en.json
@@ -146,7 +146,8 @@
       "product-powered-by": "Product powered by",
       "current-ocean-protected-area": "Current global ocean protected area",
       "current-total-protected-area": "Current global land and inland waters protected area",
-      "statistics-icon": "Statistics icon"
+      "statistics-icon": "Statistics icon",
+      "info": "Info"
     },
     "homepage-link-cards": {
       "card-1-title": "Progress Tracker",