Merge branch 'develop' into GMW-756

src/components/checkbox/index.tsx

@@ -31,7 +31,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn({
-      'shrink-0 rounded border-2 border-brand-800/50 text-brand-800 disabled:cursor-not-allowed disabled:opacity-50 data-[state-checked]:border-4 data-[state-checked]:bg-brand-800':
+      'shrink-0 rounded border-2 border-brand-800/50 text-brand-800 disabled:cursor-not-allowed disabled:opacity-50 data-[state-checked]:border-4 data-[state-checked]:bg-brand-800 data-[state-checked]:text-white':
         true,
       [className]: !!className,
     })}

src/containers/map/index.tsx

@@ -397,12 +397,6 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                 latitude={locationPopUp?.popup[0]}
                 onClose={() => removePopup('location')}
               >
-                <button
-                  className="absolute -right-9 top-8 -right-[40px] h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] bg-white/70 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
-                  onClick={() => removePopup('location')}
-                >
-                  <Icon icon={CLOSE_SVG} className="ml-1 h-6 w-6" description="Close" />
-                </button>
                 {!isEmpty(locationPopUp?.info) ? (
                   <LocationPopup
                     locationPopUpInfo={locationPopUp}
@@ -414,6 +408,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                     nonExpansible={
                       isEmpty(iucnEcoregionPopUp?.popupInfo) && isEmpty(restorationPopUp?.popupInfo)
                     }
+                    onClose={() => removePopup('location')}
                   />
                 ) : null}
                 {!isEmpty(restorationPopUp?.popupInfo) ? (

src/containers/map/location-pop-up/index.tsx

@@ -19,16 +19,16 @@ import type { LocationPopUp } from 'types/map';
 const LocationPopUP = ({
   locationPopUpInfo,
   nonExpansible,
-
   className,
+  onClose,
 }: {
   locationPopUpInfo: {
     info: LocationPopUp;
     feature: MapboxGeoJSONFeature;
   };
   nonExpansible: boolean;
-
   className?: string;
+  onClose: () => void;
 }) => {
   const [open, setOpen] = useState(nonExpansible);
   const [locationBounds, setLocationBounds] = useRecoilState(locationBoundsAtom);
@@ -82,12 +82,17 @@ const LocationPopUP = ({
   return (
     <div
       className={cn({
-        'box-border flex !w-[500px] cursor-pointer flex-col items-start rounded-t-3xl border-t border-slate-100 bg-white p-6 font-sans':
+        'relative box-border flex !w-[500px] cursor-pointer flex-col items-start rounded-t-3xl border-t border-slate-100 bg-white p-6 font-sans':
           true,
-        'max-h-[86px] w-full overflow-hidden': !open,
         [className]: !!className,
       })}
     >
+      <button
+        className="absolute top-8 -right-[40px] h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] bg-white/70 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
+        onClick={onClose}
+      >
+        <Icon icon={CLOSE_SVG} className="ml-1 h-6 w-6" description="Close" />
+      </button>
       <button
         className="flex w-full items-center justify-between"
         disabled={nonExpansible}

src/containers/widgets/constants.ts

@@ -174,7 +174,7 @@ const widgets_prod = [
       slug: 'mangrove_iucn_ecoregion',
       locationType: ['worldwide'],
       applicability: 'Global',
-      categoryIds: ['all_datasets', 'distribution_and_change'],
+      categoryIds: ['all_datasets', 'distribution_and_change', 'restoration_and_conservation'],
       layersIds: ['ecoregion'],
     }),
   },
@@ -229,4 +229,91 @@ export const ANALYSIS_WIDGETS_SLUGS: WidgetTypes['slug'][] = [
 
 export const MAP_SETTINGS_SLUGS: string[] = ['mangrove_contextual_basemaps'];
 
+export const WIDGETS_BY_CATEGORY = [
+  {
+    distribution_and_change: [
+      'mangrove_national_dashboard',
+      'mangrove_habitat_extent',
+      'mangrove_net_change',
+      'mangrove_habitat_change',
+      'mangrove_alerts',
+      'mangrove_species_location',
+      'mangrove_species_distribution',
+      'mangrove_species_threatened',
+      'mangrove_iucn_ecoregion',
+    ],
+  },
+  {
+    restoration_and_conservation: [
+      'mangrove_restoration_sites',
+      'mangrove_habitat_extent',
+      'mangrove_net_change',
+      'mangrove_alerts',
+      'mangrove_species_location',
+      'mangrove_species_distribution',
+      'mangrove_species_threatened',
+      'mangrove_protection',
+      'mangrove_restoration',
+      'mangrove_drivers_change',
+      'mangrove_iucn_ecoregion',
+    ],
+  },
+  {
+    climate_and_policy: [
+      'mangrove_blue_carbon',
+      'mangrove_emissions_mitigation',
+      'mangrove_international_status',
+      'mangrove_carbon_market_potential',
+    ],
+  },
+  {
+    ecosystem_services: [
+      'mangrove_biomass',
+      'mangrove_height',
+      'mangrove_blue_carbon',
+      'mangrove_fisheries',
+      'mangrove_flood_protection',
+    ],
+  },
+  {
+    contextual_layers: [
+      'mangrove_protected_areas',
+      'mangrove_allen_coral_reef',
+      'mangrove_salt_marsh',
+      'mangrove_tidal_flats',
+      'mangrove_global_tidal_wetland_change',
+    ],
+  },
+  {
+    all_datasets: [
+      'mangrove_national_dashboard',
+      'mangrove_restoration_sites',
+      'mangrove_habitat_extent',
+      'mangrove_net_change',
+      'mangrove_habitat_change',
+      'mangrove_alerts',
+      'mangrove_species_location',
+      'mangrove_species_distribution',
+      'mangrove_species_threatened',
+      'mangrove_protection',
+      'mangrove_restoration',
+      'mangrove_biomass',
+      'mangrove_height',
+      'mangrove_blue_carbon',
+      'mangrove_emissions_mitigation',
+      'mangrove_international_status',
+      'mangrove_carbon_market_potential',
+      'mangrove_drivers_change',
+      'mangrove_fisheries',
+      'mangrove_flood_protection',
+      'mangrove_iucn_ecoregion',
+      'mangrove_protected_areas',
+      'mangrove_allen_coral_reef',
+      'mangrove_salt_marsh',
+      'mangrove_tidal_flats',
+      'mangrove_global_tidal_wetland_change',
+    ],
+  },
+];
+
 export default widgets;

src/containers/widgets/hooks.tsx

@@ -9,6 +9,9 @@ import { activeWidgetsAtom } from 'store/widgets';
 
 import { useRecoilValue } from 'recoil';
 
+import { WIDGETS_BY_CATEGORY } from 'containers/widgets/constants';
+
+import type { Category } from 'types/category';
 import type { WidgetSlugType, WidgetTypes } from 'types/widget';
 
 import widgets, { ANALYSIS_WIDGETS_SLUGS, MAP_SETTINGS_SLUGS } from './constants';
@@ -59,3 +62,18 @@ export function useWidgetsIdsByLocation(): WidgetSlugType[] {
     [currentLocation]
   );
 }
+
+export function useWidgetsIdsByCategory(widgets): Category {
+  const widgetsKey = widgets.slice().sort().join(',');
+
+  for (const cat of WIDGETS_BY_CATEGORY) {
+    const [category, slugsCategory] = Object.entries(cat)[0];
+    const slugsCategoryKey = slugsCategory.slice().sort().join(',');
+
+    if (widgetsKey === slugsCategoryKey) {
+      return category as Category;
+    }
+  }
+
+  return 'all_datasets';
+}

src/containers/widgets/widgets-menu/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, FC } from 'react';
+import React, { useCallback, FC, useEffect } from 'react';
 
 import flatten from 'lodash-es/flatten';
 import uniq from 'lodash-es/uniq';
@@ -16,6 +16,7 @@ import { useRecoilState } from 'recoil';
 
 import { LAYERS } from 'containers/layers/constants';
 import widgets from 'containers/widgets/constants';
+import { useWidgetsIdsByCategory } from 'containers/widgets/hooks';
 import { useWidgetsIdsByLocation } from 'containers/widgets/hooks';
 
 import { CheckboxIndicator } from 'components/checkbox';
@@ -27,8 +28,15 @@ const WidgetsMenu: FC = () => {
   const [activeWidgets, setActiveWidgets] = useRecoilState(activeWidgetsAtom);
   const activeLayersIds = activeLayers.map((layer) => layer.id);
   const widgetsIds = widgets.map((widget) => widget.slug);
+
   const enabledWidgets = useWidgetsIdsByLocation();
 
+  const cat = useWidgetsIdsByCategory(activeWidgets);
+  useEffect(() => {
+    if (categorySelected !== cat) {
+      setCategory(cat);
+    }
+  }, [categorySelected, setCategory, cat]);
   const handleWidgets = useCallback(
     (e) => {
       // activate or deactivate widget accordingly
@@ -51,12 +59,9 @@ const WidgetsMenu: FC = () => {
     [activeWidgets, setActiveWidgets, setCategory, categorySelected]
   );
 
-  const handleAllWidgets = useCallback(
-    (e) => {
-      e ? setActiveWidgets(widgetsIds) : setActiveWidgets([]);
-    },
-    [widgetsIds, setActiveWidgets]
-  );
+  const handleAllWidgets = useCallback(() => {
+    activeWidgets.length === widgets.length ? setActiveWidgets([]) : setActiveWidgets(widgetsIds);
+  }, [widgetsIds, setActiveWidgets, activeWidgets]);
 
   const handleAllLayers = useCallback(
     (e) => {
@@ -102,21 +107,19 @@ const WidgetsMenu: FC = () => {
             id="all-widgets"
             data-testid="all-widgets-checkbox"
             onCheckedChange={handleAllWidgets}
-            defaultChecked={false}
+            checked={widgets.length === activeWidgets.length}
+            defaultChecked={categorySelected === 'all_datasets'}
             className={cn({
-              'text-brand-500 m-auto h-3 w-3 rounded-sm border border-black/15 bg-white': true,
-              'bg-brand-800 text-white': widgets.length === activeWidgets.length,
+              'text-brand-500 m-auto h-3 w-3 rounded-sm border border-black/15 bg-white text-white':
+                true,
+              'bg-brand-800': widgets.length === activeWidgets.length,
             })}
           >
             <CheckboxIndicator>
-              <FaCheck
-                className={cn({
-                  'h-2.5 w-2.5 fill-current font-bold': true,
-                  'text-white': widgets.length === activeWidgets.length,
-                })}
-              />
+              <FaCheck className="h-2.5 w-2.5 fill-current font-bold text-white" />
             </CheckboxIndicator>
           </Checkbox>
+
           <Checkbox
             id="all-layers"
             data-testid="all-layers-checkbox"
@@ -128,19 +131,14 @@ const WidgetsMenu: FC = () => {
             })}
           >
             <CheckboxIndicator>
-              <FaCheck
-                className={cn({
-                  'h-2.5 w-2.5 fill-current font-bold': true,
-                  'text-white': LAYERS.length === activeLayers.length,
-                })}
-              />
+              <FaCheck className="h-2.5 w-2.5 fill-current font-bold text-white" />
             </CheckboxIndicator>
           </Checkbox>
           <p
             className={cn({
               'col-span-4 col-start-3 col-end-6': true,
               'font-bold text-brand-800':
-                LAYERS.length === activeLayers.length || widgets.length === activeWidgets.length,
+                LAYERS.length === activeLayers.length && widgets.length === activeWidgets.length,
             })}
           >
             Select all
@@ -163,17 +161,20 @@ const WidgetsMenu: FC = () => {
                 checked={activeWidgets.includes(slug)}
                 className={cn({
                   'text-brand-500 m-auto h-3 w-3 rounded-sm border border-black/15 bg-white': true,
-                  'bg-brand-800 text-white': activeWidgets.includes(slug),
+                  'bg-brand-800 text-white':
+                    activeWidgets.includes(slug) && enabledWidgets.includes(slug),
                 })}
               >
-                <CheckboxIndicator>
-                  <FaCheck
-                    className={cn({
-                      'h-2.5 w-2.5 fill-current font-bold': true,
-                      'text-white': activeWidgets.includes(slug),
-                    })}
-                  />
-                </CheckboxIndicator>
+                {enabledWidgets.includes(slug) && (
+                  <CheckboxIndicator>
+                    <FaCheck
+                      className={cn({
+                        'h-2.5 w-2.5 fill-current font-bold': true,
+                        'text-white': activeWidgets.includes(slug),
+                      })}
+                    />
+                  </CheckboxIndicator>
+                )}
               </Checkbox>
               {!!layersIds && !!layersIds.length && (
                 <Checkbox

src/layouts/widgets/index.tsx

@@ -1,6 +1,9 @@
 import { PropsWithChildren } from 'react';
 
+import cn from 'lib/classnames';
+
 import { fullScreenAtom } from 'store/map-settings';
+import { printModeState } from 'store/print-mode';
 
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
@@ -10,6 +13,7 @@ import LocationWidget from 'containers/location-widget';
 const WidgetsLayout = (props: PropsWithChildren) => {
   const { children } = props;
   const isFullScreen = useRecoilValue(fullScreenAtom);
+  const isPrintingMode = useRecoilValue(printModeState);
 
   return (
     <AnimatePresence initial={false}>