WIP

Vizzuality · Sep 12, 2023 · 718066f · 718066f
1 parent 829e1ea
commit 718066f
Show file tree

Hide file tree

Showing 18 changed files with 615 additions and 126 deletions.
diff --git a/app/components/collapsible/index.tsx b/app/components/collapsible/index.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/app/components/map/legend/component.tsx b/app/components/map/legend/component.tsx
@@ -1,11 +1,7 @@
-import React, { useMemo, useCallback, Children, isValidElement } from 'react';
+import React, { useMemo, Children, isValidElement } from 'react';
 
-import cx from 'classnames';
-
-import Icon from 'components/icon';
-
-import LEGEND_SVG from 'svgs/map/legend.svg?sprite';
-import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
+import { ScrollArea } from 'components/scroll-area';
+import { cn } from 'utils/cn';
 
 import SortableList from './sortable/list';
 
@@ -29,65 +25,36 @@ export const Legend: React.FC<LegendProps> = ({
   className = '',
   maxHeight,
   sortable,
-  onChangeOpen,
   onChangeOrder,
 }: LegendProps) => {
   const isChildren = useMemo(() => {
     return !!Children.count(Children.toArray(children).filter((c) => isValidElement(c)));
   }, [children]);
 
-  const onToggleOpen = useCallback(() => {
-    onChangeOpen(!open);
-  }, [open, onChangeOpen]);
-
   return (
     <div
-      className={cx({
-        'flex w-full flex-grow flex-col overflow-hidden rounded-3xl bg-black': true,
+      className={cn({
         hidden: !isChildren,
         [className]: !!className,
       })}
     >
-      <button
-        type="button"
-        className="relative flex w-full items-center space-x-2 px-5 py-3 font-heading text-xs uppercase text-white focus:outline-none"
-        onClick={onToggleOpen}
-      >
-        <Icon icon={LEGEND_SVG} className="h-4 w-4 text-gray-300" />
-        <span>Legend</span>
-
-        <Icon
-          icon={ARROW_DOWN_SVG}
-          className={cx({
-            'absolute right-5 top-1/2 h-3 w-3 -translate-y-1/2 transform text-primary-500 transition-transform':
-              true,
-            'rotate-180': !open,
-            'rotate-0': open,
-          })}
-        />
-      </button>
-
       {open && isChildren && (
-        <div
-          className="relative flex flex-grow flex-col"
+        <ScrollArea
+          className="relative flex w-full flex-grow flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black"
           style={{
             maxHeight,
           }}
         >
-          <div className="pointer-events-none absolute left-0 top-0 z-10 h-3 w-full bg-gradient-to-b from-black via-black" />
-          <div className="overflow-y-auto overflow-x-hidden">
-            <div className="divide-y divide-gray-600 divide-opacity-50 py-2">
-              {!!sortable && (
-                <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
-                  {children}
-                </SortableList>
-              )}
-
-              {!sortable && children}
-            </div>
+          <div className="divide-y divide-gray-600 divide-opacity-50 py-2">
+            {!!sortable && (
+              <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
+                {children}
+              </SortableList>
+            )}
+
+            {!sortable && children}
           </div>
-          <div className="pointer-events-none absolute bottom-0 left-0 z-10 h-3 w-full bg-gradient-to-t from-black via-black" />
-        </div>
+        </ScrollArea>
       )}
     </div>
   );

diff --git a/app/components/map/legend/group/index.tsx b/app/components/map/legend/group/index.tsx
@@ -0,0 +1,45 @@
+import { ComponentProps, PropsWithChildren, useState } from 'react';
+
+import { HiChevronDown, HiChevronUp } from 'react-icons/hi';
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/collapsible';
+import { cn } from 'utils/cn';
+
+const ICON_COMMON_CLASSES = 'text-white group-data-[state=open]:text-blue-400';
+
+const LegendGroup = ({
+  title,
+  children,
+  defaultOpen = false,
+  className,
+}: PropsWithChildren<
+  Pick<ComponentProps<typeof Collapsible>, 'defaultOpen' | 'className'> & {
+    title: string;
+  }
+>): JSX.Element => {
+  const [isOpen, setOpen] = useState(defaultOpen);
+
+  return (
+    <Collapsible
+      defaultOpen={defaultOpen}
+      onOpenChange={setOpen}
+      className={cn({
+        [className]: Boolean(className),
+      })}
+    >
+      <CollapsibleTrigger className="group py-2">
+        <header className="flex items-center space-x-1">
+          {isOpen ? (
+            <HiChevronUp className={ICON_COMMON_CLASSES} />
+          ) : (
+            <HiChevronDown className={ICON_COMMON_CLASSES} />
+          )}
+          <h4 className="text-sm font-semibold group-data-[state=open]:text-blue-400">{title}</h4>
+        </header>
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export default LegendGroup;
diff --git a/app/components/map/legend/item/component.tsx b/app/components/map/legend/item/component.tsx
@@ -1,6 +1,7 @@
 import React, { Children, isValidElement, ReactNode, useMemo, useState } from 'react';
 
 import { useNumberFormatter } from '@react-aria/i18n';
+import { HiEye, HiEyeOff } from 'react-icons/hi';
 
 import Slider from 'components/forms/slider';
 import Icon from 'components/icon';
@@ -35,7 +36,7 @@ export interface LegendItemProps {
   };
   theme?: 'dark' | 'light';
   className?: string;
-  onChangeOpacity?: () => void;
+  onChangeOpacity?: (opacity: number) => void;
   onChangeVisibility?: () => void;
 }
 
@@ -74,21 +75,20 @@ export const LegendItem: React.FC<LegendItemProps> = ({
     <div
       key={id}
       className={cn({
-        'px-5 py-2.5': !className,
+        'space-y-2.5 px-5 py-2': true,
         [className]: !!className,
       })}
     >
-      <header className="relative mb-1 flex justify-between">
+      <header className="relative flex justify-between">
         <div
           className={cn({
-            relative: true,
-            'pl-5': icon,
+            'flex items-center space-x-2': true,
           })}
         >
-          {icon && <div className="absolute left-0 top-0">{icon}</div>}
+          {icon ?? null}
           <div
             className={cn({
-              'font-heading text-sm': true,
+              'text-sm': true,
               'text-white': theme === 'dark' || !theme,
               'text-gray-700': theme === 'light',
             })}
@@ -109,7 +109,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
           </button>
         )}
 
-        <div className="flex space-x-3">
+        <div className="flex space-x-[10px]">
           {settingsManager?.opacity && (
             <div className="flex">
               <Tooltip
@@ -155,8 +155,8 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                       aria-label="manage-opacity"
                       type="button"
                       className={cn({
-                        'flex h-5 w-5 items-center justify-center text-white': true,
-                        'text-gray-300': opacity !== 1,
+                        'flex h-5 w-5 items-center justify-center text-gray-300': true,
+                        'text-white': opacity,
                       })}
                     >
                       <Icon className="h-4 w-4 pt-px" icon={OPACITY_SVG} />
@@ -183,17 +183,21 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                     'text-gray-300': !visibility,
                   })}
                 >
-                  <Icon className="h-4 w-4" icon={visibility ? SHOW_SVG : HIDE_SVG} />
+                  {visibility ? (
+                    <HiEye className="h-4 w-4 text-blue-400" />
+                  ) : (
+                    <HiEyeOff className="h-4 w-4" />
+                  )}
                 </button>
               </Tooltip>
             </div>
           )}
         </div>
       </header>
 
-      <div className="text-sm text-gray-300">{description}</div>
+      {description && <div className="text-sm text-gray-300">{description}</div>}
 
-      {validChildren && <div className="mt-2.5">{children}</div>}
+      {validChildren && children}
     </div>
   );
 };

diff --git a/app/components/map/legend/types/basic/component.tsx b/app/components/map/legend/types/basic/component.tsx
@@ -14,6 +14,8 @@ export const LegendTypeBasic: React.FC<LegendTypeBasicProps> = ({
   className = '',
   items,
 }: LegendTypeBasicProps) => {
+  if (items.length === 0) return null;
+
   return (
     <div
       className={cx({

diff --git a/app/components/map/legend/types/gradient/component.tsx b/app/components/map/legend/types/gradient/component.tsx
@@ -32,7 +32,7 @@ export const LegendTypeGradient: React.FC<LegendTypeGradientProps> = ({
     >
       <div
         className={cn({
-          'flex h-2 w-full': true,
+          'flex h-2 w-full rounded-[37px]': true,
           [className?.bar]: className?.bar,
         })}
         style={{