From 18ba59997e4e168a09375715264c04d35396eb4a Mon Sep 17 00:00:00 2001
From: David Inga <david.inga@vizzuality.com>
Date: Thu, 7 Mar 2024 10:25:20 +0100
Subject: [PATCH] added legend styles

---
 client/src/components/ui/popover.tsx          | 22 ++++----
 .../analysis-eudr/map/component.tsx           |  4 +-
 .../analysis-eudr/map/legend/component.tsx    | 51 +++++++++++++++++--
 .../analysis-eudr/map/legend/item.tsx         | 33 ++++++++++++
 4 files changed, 94 insertions(+), 16 deletions(-)
 create mode 100644 client/src/containers/analysis-eudr/map/legend/item.tsx

diff --git a/client/src/components/ui/popover.tsx b/client/src/components/ui/popover.tsx
index bbba7e0eb..325d7b703 100644
--- a/client/src/components/ui/popover.tsx
+++ b/client/src/components/ui/popover.tsx
@@ -1,29 +1,29 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx
index 5aa2189c2..fc4ad8070 100644
--- a/client/src/containers/analysis-eudr/map/component.tsx
+++ b/client/src/containers/analysis-eudr/map/component.tsx
@@ -32,6 +32,8 @@ const EUDRMap = () => {
     autoHighlight: true,
   });
 
+  const layers = [layer];
+
   const handleMapStyleChange = useCallback((newStyle: BasemapValue) => {
     setMapStyle(newStyle);
   }, []);
@@ -52,7 +54,7 @@ const EUDRMap = () => {
         viewState={{ ...viewState }}
         onViewStateChange={({ viewState }) => setViewState(viewState as MapViewState)}
         controller={{ dragRotate: false }}
-        layers={[layer]}
+        layers={layers}
       >
         <Map reuseMaps mapStyle={MAP_STYLES[mapStyle]} styleDiffing={false} />
       </DeckGL>
diff --git a/client/src/containers/analysis-eudr/map/legend/component.tsx b/client/src/containers/analysis-eudr/map/legend/component.tsx
index 53c7d138e..54da03733 100644
--- a/client/src/containers/analysis-eudr/map/legend/component.tsx
+++ b/client/src/containers/analysis-eudr/map/legend/component.tsx
@@ -1,11 +1,16 @@
 import { useState } from 'react';
 import classNames from 'classnames';
+import { MinusIcon, PlusIcon } from '@heroicons/react/outline';
 
-import SandwichIcon from 'components/icons/sandwich';
+import LegendItem from './item';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import SandwichIcon from '@/components/icons/sandwich';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 
 const EURDLegend = () => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   return (
     <div>
@@ -14,14 +19,52 @@ const EURDLegend = () => {
           <button
             type="button"
             className={classNames(
-              'relative flex h-10 w-10 items-center justify-center rounded-lg bg-white p-1.5 text-black transition-colors hover:text-navy-400',
+              'relative flex h-10 w-10 items-center justify-center rounded-lg p-1.5 text-black transition-colors hover:text-navy-400',
+              isOpen ? 'bg-navy-400 text-white hover:text-white' : 'bg-white',
             )}
           >
             <SandwichIcon />
           </button>
         </PopoverTrigger>
-        <PopoverContent align="end" side="left">
-          Place content for the popover here.
+        <PopoverContent align="end" side="left" className="p-0">
+          <div className="divide-y">
+            <h2 className="px-4 py-2 text-sm font-normal">Legend</h2>
+            <div>
+              <LegendItem
+                title="Suppliers with specified splot of land"
+                description="Suppliers with necessary geographical data of land to assess deforestation risk linked to a commodity."
+                iconClassName="border-2 border-orange-500 bg-orange-500/30"
+              />
+            </div>
+            <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
+              <CollapsibleTrigger asChild>
+                <div className="flex items-center justify-end px-4 py-2">
+                  <button type="button" className="flex items-center space-x-2">
+                    <div className="text-xs text-navy-400">Add contextual layers</div>
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-navy-400">
+                      {isExpanded ? (
+                        <MinusIcon className="h-4 w-4 text-white" />
+                      ) : (
+                        <PlusIcon className="h-4 w-4 text-white" />
+                      )}
+                    </div>
+                  </button>
+                </div>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="bg-navy-50">
+                <LegendItem
+                  title="Forest Cover 2020 (EC JRC)"
+                  description="Spatial explicit description of forest presence and absence in the year 2020."
+                  iconClassName="bg-[#72A950]"
+                />
+                <LegendItem
+                  title="Real time deforestation alerts since 2020 (UMD/GLAD)"
+                  description="Monitor forest disturbance in near-real-time using integrated alerts from three alerting systems."
+                  iconClassName="bg-[#C92A6D]"
+                />
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
         </PopoverContent>
       </Popover>
     </div>
diff --git a/client/src/containers/analysis-eudr/map/legend/item.tsx b/client/src/containers/analysis-eudr/map/legend/item.tsx
new file mode 100644
index 000000000..3946119f2
--- /dev/null
+++ b/client/src/containers/analysis-eudr/map/legend/item.tsx
@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+
+import type { FC, PropsWithChildren } from 'react';
+
+type LegendItemProps = { title: string; description: string; iconClassName?: string };
+
+const LegendItem: FC<PropsWithChildren<LegendItemProps>> = ({
+  title,
+  description,
+  children,
+  iconClassName,
+}) => {
+  return (
+    <div className="flex space-x-2 p-4">
+      <div
+        className={classNames(
+          'mt-0.5 h-3 w-3 shrink-0',
+          iconClassName ?? 'border-2 border-gray-500 bg-gray-500/30',
+        )}
+      />
+      <div className="flex-1 space-y-1">
+        <div>
+          <h3 className="text-xs font-normal">{title}</h3>
+          <div></div>
+        </div>
+        <p className="text-xs text-gray-500">{description}</p>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default LegendItem;