Merge pull request #79 from Vizzuality/staging

deployment to main

components.json

@@ -0,0 +1,14 @@
+{
+  "style": "default",
+  "rsc": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

next.config.js

@@ -19,7 +19,6 @@ const nextConfig = {
 
     return config;
   },
-
   // ? https://nextjs.org/docs/advanced-features/compiler#why-swc
   swcMinify: false,
   // ? https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files

package.json

@@ -25,8 +25,10 @@
     "@deck.gl/mapbox": "8.7.8",
     "@deck.gl/mesh-layers": "8.7.8",
     "@floating-ui/react-dom-interactions": "0.10.1",
+    "@headlessui/react": "1.7.17",
     "@luma.gl/constants": "8.4.5",
     "@popperjs/core": "2.9.2",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@react-aria/overlays": "3.10.0",
     "@react-three/drei": "9.32.3",
     "@react-three/fiber": "8.8.6",
@@ -45,6 +47,7 @@
     "autoprefixer": "10.4.7",
     "axios": "0.21.1",
     "classnames": "2.3.1",
+    "clsx": "2.0.0",
     "downshift": "6.1.3",
     "final-form": "4.20.2",
     "framer-motion": "7.4.0",
@@ -63,10 +66,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-final-form": "6.5.3",
+    "react-icons": "4.11.0",
     "react-map-gl": "7.0.17",
     "react-player": "2.11.0",
     "react-popper": "2.2.5",
     "react-use-cookie": "1.4.0",
+    "tailwind-merge": "1.14.0",
     "tailwindcss": "3.1.7",
     "three": "0.144.0",
     "use-breakpoint": "^3.0.3",

src/components/button/constants.ts

@@ -4,7 +4,7 @@ export const THEME = {
   secondary:
     'text-white bg-transparent border border-white whitespace-nowrap hover:bg-brand-800 hover:border-brand-800 transition ease-in-out delay-150 duration-300',
   tertiary:
-    'text-black bg-transparent border border-black hover:text-white whitespace-nowrap hover:bg-brand-800 hover:border-brand-800 transition ease-in-out delay-150 duration-300',
+    'text-gray-900 bg-transparent border border-gray-900 hover:text-white whitespace-nowrap hover:bg-brand-800 hover:border-brand-800 transition ease-in-out delay-150 duration-300',
 };
 
 export const SIZE = {

src/components/forms/select/toggle/component.tsx

@@ -6,7 +6,7 @@ import THEME from 'components/forms/select/constants/theme';
 import { SelectToggleProps } from 'components/forms/select/types';
 import Icon from 'components/icon';
 
-import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
+import ARROW_DOWN_SVG from 'svgs/ui/arrow-right.svg?sprite';
 
 export const SelectToggle: FC<SelectToggleProps> = ({
   options,

src/containers/home/common/link-arrow/component.tsx → src/components/link-arrow/index.tsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 
 import Icon from 'components/icon';
 
-import ARROW_RIGHT_SVG from 'svgs/arrow-right.svg?sprite';
+import ARROW_RIGHT_SVG from 'svgs/ui/arrow-right.svg?sprite';
 
 import type { LinkArrowProps } from './types';
 

src/components/modal/content/component.tsx

@@ -6,7 +6,7 @@ import { motion } from 'framer-motion';
 
 import Icon from 'components/icon';
 
-import CLOSE_SVG from 'svgs/close.svg?sprite';
+import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 
 import { CONTENT_CLASSES } from './constants';
 import type { ModalContentProps } from './types';

src/components/toast/constants.ts

@@ -1,7 +1,7 @@
-import SUCCESS_SVG from 'svgs/checkmark.svg?sprite';
-import ERROR_SVG from 'svgs/checkmark.svg?sprite';
-import INFO_SVG from 'svgs/checkmark.svg?sprite';
-import WARNING_SVG from 'svgs/checkmark.svg?sprite';
+import SUCCESS_SVG from 'svgs/ui/checkmark.svg?sprite';
+import ERROR_SVG from 'svgs/ui/checkmark.svg?sprite';
+import INFO_SVG from 'svgs/ui/checkmark.svg?sprite';
+import WARNING_SVG from 'svgs/ui/checkmark.svg?sprite';
 
 import type { ToastTheme } from './types';
 

src/components/ui/accordion.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { motion } from 'framer-motion';
+import { HiMinusSmall, HiPlusSmall } from 'react-icons/hi2';
+import { MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowUp } from 'react-icons/md';
+
+import { IN_VIEW_PROPS } from 'constants/motion';
+import { cn } from 'utils/cn';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-none text-gray-800', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <motion.div {...IN_VIEW_PROPS}>
+      <AccordionPrimitive.Header
+        className={cn({
+          flex: true,
+          '[&[data-state=open]>button]:bg-cream-700': className.includes('plus-minus'),
+          '[&[data-state=open]>button]:bg-cream-400': className.includes('default'),
+        })}
+      >
+        <AccordionPrimitive.Trigger
+          onClick={() => setOpen(!open)}
+          ref={ref}
+          className={cn(
+            'bg-cream-400 text-base md:text-lg rounded-lg flex flex-1 items-center justify-between p-6 text-left md:font-semibold transition-all [&[data-state=open]>svg]:rotate-180',
+            className
+          )}
+          {...props}
+        >
+          <div className="w-2/3 md:w-5/6">{children}</div>
+
+          {className.includes('plus-minus') && (
+            <>
+              {open && <HiMinusSmall size={24} className="fill-gray-800 h-7 w-7 shrink-0" />}
+              {!open && <HiPlusSmall size={24} className="fill-gray-800 h-7 w-7 shrink-0" />}
+            </>
+          )}
+
+          {className.includes('default') && (
+            <>
+              {open && (
+                <MdOutlineKeyboardArrowDown size={20} className="fill-gray-80 h-7 w-7 shrink-0" />
+              )}
+              {!open && (
+                <MdOutlineKeyboardArrowUp
+                  size={20}
+                  className="fill-gray-800 h-7 w-7 shrink-0 rotate-180"
+                />
+              )}
+            </>
+          )}
+        </AccordionPrimitive.Trigger>
+      </AccordionPrimitive.Header>
+    </motion.div>
+  );
+});
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      '-mt-2 overflow-hidden rounded-b-lg bg-cream-700 text-base p-6 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0 font-sans">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };