Merge pull request #34 from Vizzuality/SKY30-87-fe-navigation-to-the-…

…data-table

[SKY30-87] FE - Navigation to the data table + design tweaks

frontend/src/components/ui/button.tsx

@@ -20,13 +20,18 @@ const buttonVariants = cva(
         //   'bg-slate-100 text-slate-900 hover:bg-slate-100/80',
         ghost: 'hover:bg-gray-50 hover:text-gray-900 focus-visible:ring-black',
         // link: 'text-slate-900 underline-offset-4 hover:underline',
+        white: 'bg-white border border-black',
+        'sidebar-details':
+          'bg-blue text-black text-black text-sm justify-start text-left text-sm hover:brightness-90 font-bold uppercase md:px-8 focus-visible:ring-black',
+        'text-link': 'text-sm font-semibold uppercase underline focus-visible:ring-black',
       },
       size: {
         default: 'h-10 px-4 py-2',
         sm: 'px-2 py-2',
         // lg: 'h-11 px-8',
         icon: 'h-10 w-10',
         'icon-sm': 'h-6 w-6',
+        full: 'h-full w-full',
       },
     },
     defaultVariants: {

frontend/src/containers/data-tool/content/details/index.tsx

@@ -0,0 +1,40 @@
+import DashboardTable from '@/components/dashboard-table';
+import { Button } from '@/components/ui/button';
+import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings';
+
+import { mockedData } from './mocked-data';
+
+const DataToolDetails: React.FC = () => {
+  const [, setSettings] = useSyncDataToolContentSettings();
+
+  const handleOnCloseClick = () => {
+    setSettings((prevSettings) => ({ ...prevSettings, showDetails: false }));
+  };
+
+  return (
+    <div className="absolute h-full w-full overflow-scroll bg-white px-4 py-4 md:px-6">
+      <div className="mb-8 flex gap-8 md:justify-between">
+        <span className="max-w-lg">
+          <h2 className="text-4xl font-extrabold">
+            Marine Conservation at National and Regional Levels
+          </h2>
+        </span>
+        <Button variant="text-link" className="m-0 cursor-pointer p-0" onClick={handleOnCloseClick}>
+          Close
+        </Button>
+      </div>
+      <div className="overflow-scroll">
+        {/* NOTE: Div to test the horizontal overflow */}
+        <div className="mt-4" style={{ width: '130%' }}>
+          {/*
+            NOTE: We don't need a separate table component, but it's easier
+            to have one while using mocked data in order to keep this component clean
+          */}
+          <DashboardTable data={mockedData} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DataToolDetails;

frontend/src/containers/data-tool/content/details/mocked-data.ts

@@ -0,0 +1,67 @@
+import { DashboardTableItem } from '@/components/dashboard-table';
+
+export const mockedData: DashboardTableItem[] = [
+  {
+    location: 'United Kingdom',
+    locationId: 'GB',
+    type: 'country',
+    signedInitiative: true,
+    score: 0.6,
+    ecosystems: ['Mangroves', 'Open ocean', 'Kelp forest'],
+    updated: new Date('2023-08-01'),
+  },
+  {
+    location: 'Mexico',
+    locationId: 'MX',
+    type: 'country',
+    signedInitiative: false,
+    score: undefined,
+    ecosystems: [],
+    updated: new Date('2023-07-01'),
+  },
+  {
+    location: 'Spain',
+    locationId: 'ES',
+    type: 'country',
+    signedInitiative: true,
+    score: 3.0,
+    ecosystems: ['Open ocean'],
+    updated: new Date('2022-10-01'),
+  },
+  {
+    location: 'Brazil',
+    locationId: 'BR',
+    type: 'country',
+    signedInitiative: false,
+    score: undefined,
+    ecosystems: [],
+    updated: new Date('2023-01-01'),
+  },
+  {
+    location: 'France',
+    locationId: 'FR',
+    type: 'country',
+    signedInitiative: true,
+    score: 12.7,
+    ecosystems: ['Mangroves'],
+    updated: new Date('2021-12-01'),
+  },
+  {
+    location: 'Netherlands',
+    locationId: 'NL',
+    type: 'country',
+    signedInitiative: true,
+    score: 1.6,
+    ecosystems: ['Kelp forest', 'Open ocean'],
+    updated: new Date('2022-02-01'),
+  },
+  {
+    location: 'Worldwide',
+    locationId: 'worldwide',
+    type: 'region',
+    signedInitiative: true,
+    score: 1.6,
+    ecosystems: ['Coral reefs', 'Kelp forest', 'Open ocean'],
+    updated: new Date('2023-04-01'),
+  },
+];

frontend/src/containers/data-tool/content/index.tsx

@@ -1,8 +1,17 @@
+import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings';
+
+import Details from './details';
 import Map from './map';
-// import Table from './table';
 
 const DataToolContent: React.FC = () => {
-  return <Map />;
+  const [{ showDetails }] = useSyncDataToolContentSettings();
+
+  return (
+    <div className="relative h-full w-full">
+      <Map />
+      {showDetails && <Details />}
+    </div>
+  );
 };
 
 export default DataToolContent;

frontend/src/containers/data-tool/content/map/index.tsx

@@ -85,7 +85,7 @@ const DataToolMap: React.FC = () => {
   );
 
   return (
-    <div className="relative flex h-full w-full flex-col md:flex-row">
+    <div className="absolute flex h-full w-full flex-col md:flex-row">
       <Map
         className="absolute left-0 w-full"
         initialViewState={{

frontend/src/containers/data-tool/sidebar/details-button/index.tsx

@@ -0,0 +1,26 @@
+import { ArrowRight } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings';
+
+const DetailsButton: React.FC = () => {
+  const [, setSettings] = useSyncDataToolContentSettings();
+
+  const handleButtonClick = () => {
+    setSettings((prevSettings) => ({ ...prevSettings, showDetails: true }));
+  };
+
+  return (
+    <Button
+      className="flex justify-between"
+      variant="sidebar-details"
+      size="full"
+      onClick={handleButtonClick}
+    >
+      <span className="pt-1">Marine Conservation Details</span>
+      <ArrowRight aria-hidden />
+    </Button>
+  );
+};
+
+export default DetailsButton;

frontend/src/containers/data-tool/sidebar/index.tsx

@@ -8,6 +8,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
 import { cn } from '@/lib/classnames';
 import { locationAtom } from '@/store/location';
 
+import DetailsButton from './details-button';
 import LocationSelector from './location-selector';
 import Widgets from './widgets';
 
@@ -25,8 +26,8 @@ const DataToolSidebar: React.FC = () => {
       <CollapsibleTrigger asChild>
         <Button
           type="button"
-          size="icon"
-          className={cn('absolute bottom-3 z-10', {
+          variant="white"
+          className={cn('absolute bottom-0 z-10 h-12 border-l-0 px-1', {
             'hidden md:flex': true,
             'left-0': !sidebarOpen,
             'left-[430px] transition-[left] delay-500': sidebarOpen,
@@ -37,15 +38,18 @@ const DataToolSidebar: React.FC = () => {
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent className="relative top-0 left-0 z-20 h-full flex-shrink-0 bg-white fill-mode-none data-[state=closed]:animate-out-absolute data-[state=open]:animate-in-absolute data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left md:w-[430px]">
-        <div className="h-full w-full overflow-y-scroll">
+        <div className="h-full w-full overflow-y-scroll border-r border-black pb-12">
           <div className="border-b border-black px-4 pt-4 pb-2 md:px-8">
             <h1 className="text-5xl font-black">{location.name}</h1>
             <LocationSelector className="my-2" />
           </div>
-          <div className="h-full">
+          <div className="">
             <Widgets />
           </div>
         </div>
+        <div className="absolute bottom-0 left-0 right-px h-12 border-y border-black">
+          <DetailsButton />
+        </div>
       </CollapsibleContent>
     </Collapsible>
   );

frontend/src/containers/data-tool/sync-settings.ts

@@ -0,0 +1,15 @@
+import { useQueryState } from 'next-usequerystate';
+import { parseAsJson } from 'next-usequerystate/parsers';
+
+const DEFAULT_SYNC_CONTENT_SETTINGS: {
+  showDetails: boolean;
+} = {
+  showDetails: false,
+};
+
+export const useSyncDataToolContentSettings = () => {
+  return useQueryState(
+    'content',
+    parseAsJson<typeof DEFAULT_SYNC_CONTENT_SETTINGS>().withDefault(DEFAULT_SYNC_CONTENT_SETTINGS)
+  );
+};