From f5676980dddc08fa380f7ce2b833d0b40478cbfd Mon Sep 17 00:00:00 2001
From: mateuszmiko <dmastah92@gmail.com>
Date: Thu, 28 Sep 2023 11:29:46 +0200
Subject: [PATCH] Feature/add drawer ui
---
next-env.d.ts | 1 -
.../Map/Drawer/Drawer.component.test.tsx | 12 +++++
.../Map/Drawer/Drawer.component.tsx | 44 +++++++++++++++++++
src/components/Map/Drawer/index.ts | 1 +
src/components/Map/Map.component.tsx | 6 ++-
src/shared/Icon/Icon.component.tsx | 28 ++++++------
.../icons => shared/Icon/Icons}/AdminIcon.tsx | 0
.../icons => shared/Icon/Icons}/ArrowIcon.tsx | 0
.../Icon/Icons}/ChevronDownIcon.tsx | 0
.../Icon/Icons}/ChevronLeftIcon.tsx | 0
.../Icon/Icons}/ChevronRightIcon.tsx | 0
.../Icon/Icons}/ChevronUpIcon.tsx | 0
src/shared/Icon/Icons/CloseIcon.tsx | 23 ++++++++++
.../icons => shared/Icon/Icons}/DotsIcon.tsx | 0
.../Icon/Icons}/ExportIcon.tsx | 0
.../icons => shared/Icon/Icons}/InfoIcon.tsx | 0
.../Icon/Icons}/LegendIcon.tsx | 0
.../icons => shared/Icon/Icons}/PageIcon.tsx | 0
.../Icon/Icons}/PluginIcon.tsx | 0
.../icons => shared/Icon/Icons}/PlusIcon.tsx | 0
.../IconButton/IconButton.component.tsx | 3 ++
src/types/iconTypes.ts | 3 +-
tailwind.config.ts | 4 ++
23 files changed, 108 insertions(+), 17 deletions(-)
create mode 100644 src/components/Map/Drawer/Drawer.component.test.tsx
create mode 100644 src/components/Map/Drawer/Drawer.component.tsx
create mode 100644 src/components/Map/Drawer/index.ts
rename src/{assets/vectors/icons => shared/Icon/Icons}/AdminIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/ArrowIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/ChevronDownIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/ChevronLeftIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/ChevronRightIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/ChevronUpIcon.tsx (100%)
create mode 100644 src/shared/Icon/Icons/CloseIcon.tsx
rename src/{assets/vectors/icons => shared/Icon/Icons}/DotsIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/ExportIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/InfoIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/LegendIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/PageIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/PluginIcon.tsx (100%)
rename src/{assets/vectors/icons => shared/Icon/Icons}/PlusIcon.tsx (100%)
diff --git a/next-env.d.ts b/next-env.d.ts
index fd36f949..53e1f337 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,5 +1,4 @@
/// <reference types="next" />
-/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
diff --git a/src/components/Map/Drawer/Drawer.component.test.tsx b/src/components/Map/Drawer/Drawer.component.test.tsx
new file mode 100644
index 00000000..af462cab
--- /dev/null
+++ b/src/components/Map/Drawer/Drawer.component.test.tsx
@@ -0,0 +1,12 @@
+import { screen, render, RenderResult } from '@testing-library/react';
+import { Drawer } from './Drawer.component';
+
+const renderComponent = (): RenderResult => render(<Drawer />);
+
+describe('Drawer - component', () => {
+ it('should render Drawer', () => {
+ renderComponent();
+
+ expect(screen.getByRole('drawer')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Map/Drawer/Drawer.component.tsx b/src/components/Map/Drawer/Drawer.component.tsx
new file mode 100644
index 00000000..b1b085ec
--- /dev/null
+++ b/src/components/Map/Drawer/Drawer.component.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Button } from '@/shared/Button';
+import { twMerge } from 'tailwind-merge';
+import { IconButton } from '@/shared/IconButton';
+
+const drawerRole = 'drawer';
+const closeButtonRole = 'close-drawer-button';
+
+export const Drawer = (): JSX.Element | null => {
+ const [open, setOpenDrawer] = useState(false);
+
+ return (
+ <>
+ <Button
+ className="absolute top-[110px] left-[100px] z-10 peer"
+ onClick={(): void => setOpenDrawer(true)}
+ >
+ Open Drawer
+ </Button>
+
+ <div
+ className={twMerge(
+ 'absolute top-[104px] left-[88px] z-10 w-[432px] h-calc-drawer bg-white-pearl text-font-500 transition-all duration-500 transform -translate-x-full',
+ open && 'translate-x-0',
+ )}
+ role={drawerRole}
+ >
+ <div className="flex justify-between items-center text-xl px-6 py-8 border-b border-b-divide">
+ <div>
+ <span className="font-normal">Search: </span>
+ <span className="font-semibold">NADH</span>
+ </div>
+ <IconButton
+ className="bg-white-pearl"
+ classNameIcon="fill-font-500"
+ icon="close"
+ role={closeButtonRole}
+ onClick={(): void => setOpenDrawer(false)}
+ />
+ </div>
+ </div>
+ </>
+ );
+};
diff --git a/src/components/Map/Drawer/index.ts b/src/components/Map/Drawer/index.ts
new file mode 100644
index 00000000..1c73307c
--- /dev/null
+++ b/src/components/Map/Drawer/index.ts
@@ -0,0 +1 @@
+export { Drawer } from './Drawer.component';
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index 8c11af5f..b2b8b6cb 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -1,8 +1,10 @@
import mapImg from '@/assets/images/image.jpg';
+import { Drawer } from '@/components/Map/Drawer';
import Image from 'next/image';
export const Map = (): JSX.Element => (
- <div className="w-100 h-screen bg-black" data-testid="map-container">
- <Image src={mapImg} fill sizes="100vw" alt="map" />
+ <div className="w-100 h-screen bg-black relative z-0" data-testid="map-container">
+ <Drawer />
+ <Image src={mapImg} fill sizes="100vw" alt="map" className="z-0" />
</div>
);
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index 09ab33c8..b23a3ad4 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -1,16 +1,17 @@
-import { ChevronRightIcon } from '@/assets/vectors/icons/ChevronRightIcon';
-import { ChevronLeftIcon } from '@/assets/vectors/icons/ChevronLeftIcon';
-import { ChevronUpIcon } from '@/assets/vectors/icons/ChevronUpIcon';
-import { ChevronDownIcon } from '@/assets/vectors/icons/ChevronDownIcon';
-import { PlusIcon } from '@/assets/vectors/icons/PlusIcon';
-import { ArrowIcon } from '@/assets/vectors/icons/ArrowIcon';
-import { DotsIcon } from '@/assets/vectors/icons/DotsIcon';
-import { AdminIcon } from '@/assets/vectors/icons/AdminIcon';
-import { ExportIcon } from '@/assets/vectors/icons/ExportIcon';
-import { InfoIcon } from '@/assets/vectors/icons/InfoIcon';
-import { LegendIcon } from '@/assets/vectors/icons/LegendIcon';
-import { PageIcon } from '@/assets/vectors/icons/PageIcon';
-import { PluginIcon } from '@/assets/vectors/icons/PluginIcon';
+import { ChevronRightIcon } from '@/shared/Icon/Icons/ChevronRightIcon';
+import { ChevronLeftIcon } from '@/shared/Icon/Icons/ChevronLeftIcon';
+import { AdminIcon } from '@/shared/Icon/Icons/AdminIcon';
+import { ArrowIcon } from '@/shared/Icon/Icons/ArrowIcon';
+import { ChevronDownIcon } from '@/shared/Icon/Icons/ChevronDownIcon';
+import { ChevronUpIcon } from '@/shared/Icon/Icons/ChevronUpIcon';
+import { DotsIcon } from '@/shared/Icon/Icons/DotsIcon';
+import { ExportIcon } from '@/shared/Icon/Icons/ExportIcon';
+import { InfoIcon } from '@/shared/Icon/Icons/InfoIcon';
+import { LegendIcon } from '@/shared/Icon/Icons/LegendIcon';
+import { PageIcon } from '@/shared/Icon/Icons/PageIcon';
+import { PluginIcon } from '@/shared/Icon/Icons/PluginIcon';
+import { PlusIcon } from '@/shared/Icon/Icons/PlusIcon';
+import { CloseIcon } from '@/shared/Icon/Icons/CloseIcon';
import type { IconTypes } from '@/types/iconTypes';
@@ -33,6 +34,7 @@ const icons = {
legend: LegendIcon,
page: PageIcon,
plugin: PluginIcon,
+ close: CloseIcon,
} as const;
export const Icon = ({ name, className = '' }: IconProps): JSX.Element => {
diff --git a/src/assets/vectors/icons/AdminIcon.tsx b/src/shared/Icon/Icons/AdminIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/AdminIcon.tsx
rename to src/shared/Icon/Icons/AdminIcon.tsx
diff --git a/src/assets/vectors/icons/ArrowIcon.tsx b/src/shared/Icon/Icons/ArrowIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ArrowIcon.tsx
rename to src/shared/Icon/Icons/ArrowIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronDownIcon.tsx b/src/shared/Icon/Icons/ChevronDownIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronDownIcon.tsx
rename to src/shared/Icon/Icons/ChevronDownIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronLeftIcon.tsx b/src/shared/Icon/Icons/ChevronLeftIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronLeftIcon.tsx
rename to src/shared/Icon/Icons/ChevronLeftIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronRightIcon.tsx b/src/shared/Icon/Icons/ChevronRightIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronRightIcon.tsx
rename to src/shared/Icon/Icons/ChevronRightIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronUpIcon.tsx b/src/shared/Icon/Icons/ChevronUpIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronUpIcon.tsx
rename to src/shared/Icon/Icons/ChevronUpIcon.tsx
diff --git a/src/shared/Icon/Icons/CloseIcon.tsx b/src/shared/Icon/Icons/CloseIcon.tsx
new file mode 100644
index 00000000..13d1a5f5
--- /dev/null
+++ b/src/shared/Icon/Icons/CloseIcon.tsx
@@ -0,0 +1,23 @@
+interface CloseIconProps {
+ className?: string;
+}
+
+export const CloseIcon = ({ className }: CloseIconProps): JSX.Element => (
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2059_12637)">
+ <path d="M11.9997 10.5867L16.9497 5.63672L18.3637 7.05072L13.4137 12.0007L18.3637 16.9507L16.9497 18.3647L11.9997 13.4147L7.04974 18.3647L5.63574 16.9507L10.5857 12.0007L5.63574 7.05072L7.04974 5.63672L11.9997 10.5867Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2059_12637">
+ <rect width="24" height="24" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/DotsIcon.tsx b/src/shared/Icon/Icons/DotsIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/DotsIcon.tsx
rename to src/shared/Icon/Icons/DotsIcon.tsx
diff --git a/src/assets/vectors/icons/ExportIcon.tsx b/src/shared/Icon/Icons/ExportIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ExportIcon.tsx
rename to src/shared/Icon/Icons/ExportIcon.tsx
diff --git a/src/assets/vectors/icons/InfoIcon.tsx b/src/shared/Icon/Icons/InfoIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/InfoIcon.tsx
rename to src/shared/Icon/Icons/InfoIcon.tsx
diff --git a/src/assets/vectors/icons/LegendIcon.tsx b/src/shared/Icon/Icons/LegendIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/LegendIcon.tsx
rename to src/shared/Icon/Icons/LegendIcon.tsx
diff --git a/src/assets/vectors/icons/PageIcon.tsx b/src/shared/Icon/Icons/PageIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/PageIcon.tsx
rename to src/shared/Icon/Icons/PageIcon.tsx
diff --git a/src/assets/vectors/icons/PluginIcon.tsx b/src/shared/Icon/Icons/PluginIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/PluginIcon.tsx
rename to src/shared/Icon/Icons/PluginIcon.tsx
diff --git a/src/assets/vectors/icons/PlusIcon.tsx b/src/shared/Icon/Icons/PlusIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/PlusIcon.tsx
rename to src/shared/Icon/Icons/PlusIcon.tsx
diff --git a/src/shared/IconButton/IconButton.component.tsx b/src/shared/IconButton/IconButton.component.tsx
index e5270caf..84783294 100644
--- a/src/shared/IconButton/IconButton.component.tsx
+++ b/src/shared/IconButton/IconButton.component.tsx
@@ -6,6 +6,7 @@ import type { IconTypes } from '@/types/iconTypes';
export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
className?: string;
+ classNameIcon?: string;
icon: IconTypes;
isActive?: boolean;
}
@@ -17,6 +18,7 @@ const getActiveFillOrStrokeColor = (icon: IconTypes): string => {
export const IconButton = ({
className = '',
+ classNameIcon = '',
icon,
isActive = false,
...props
@@ -43,6 +45,7 @@ export const IconButton = ({
? 'fill-font-400 group-hover:fill-primary-500 group-active:fill-primary-500'
: 'stroke-font-400 group-hover:stroke-primary-500 group-active:stroke-primary-500',
isActive && getActiveFillOrStrokeColor(icon),
+ classNameIcon,
)}
name={icon}
/>
diff --git a/src/types/iconTypes.ts b/src/types/iconTypes.ts
index b312344a..9b14f66b 100644
--- a/src/types/iconTypes.ts
+++ b/src/types/iconTypes.ts
@@ -11,4 +11,5 @@ export type IconTypes =
| 'info'
| 'legend'
| 'page'
- | 'plugin';
+ | 'plugin'
+ | 'close';
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 18b85c28..4eca2c5b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -24,6 +24,10 @@ const config: Config = {
'med-sea-green': '#3ab65d',
cultured: '#f7f7f8',
'white-pearl': '#ffffff',
+ divide: '#e1e0e6',
+ },
+ height: {
+ 'calc-drawer': 'calc(100% - 104px)',
},
},
fontFamily: {
--
GitLab