diff --git a/jest.config.ts b/jest.config.ts
index a179ae83043584eeb6bac102e71f1a68d0c717de..7e7dad84baf520a554606ca827b2fbc17c5cfc68 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -23,9 +23,6 @@ const config = {
'!<rootDir>/src/**/*.d.ts',
'!**/node_modules/**',
],
- moduleNameMapper: {
- '\\.svg': '@svgr/webpack',
- },
coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};
diff --git a/next.config.js b/next.config.js
index 966d1c5cc41373919a0b22a838dacbc185b4959b..254ffd6c956bfd4f642b74fe24370e95d5610e5e 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,25 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
- webpack(config) {
- const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
- config.module.rules.push(
- {
- ...fileLoaderRule,
- test: /\.svg$/i,
- resourceQuery: { not: /component/ },
- },
- {
- test: /\.svg$/i,
- issuer: /\.[jt]sx?$/,
- resourceQuery: /component/,
- use: ['@svgr/webpack'],
- },
- );
- fileLoaderRule.exclude = /\.svg$/i;
-
- return config;
- },
experimental: {
fontLoaders: [{ loader: '@next/font/google', options: { subsets: ['latin'] } }],
},
diff --git a/package.json b/package.json
index 84f6a16161e28f9279a30703e7749612656b0ee9..a840cf2fad07c115fec8d24c65a9e063e32b8bdd 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
"devDependencies": {
"@commitlint/cli": "^17.7.1",
"@commitlint/config-conventional": "^17.7.0",
- "@svgr/webpack": "^8.1.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@typescript-eslint/eslint-plugin": "^6.7.0",
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..373f7d204b792cb29d91906a00e51bb4f7e51676
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/assets/images/luxembourg-logo.png b/src/assets/images/luxembourg-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8961ee9d4ed257cec3abb0d09027b27fe81a824f
Binary files /dev/null and b/src/assets/images/luxembourg-logo.png differ
diff --git a/src/assets/vectors/icons/AdminIcon.tsx b/src/assets/vectors/icons/AdminIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2defa03fd3340e12e9cf040f06c278b7a1db9836
--- /dev/null
+++ b/src/assets/vectors/icons/AdminIcon.tsx
@@ -0,0 +1,23 @@
+interface AdminIconProps {
+ className?: string;
+}
+
+export const AdminIcon = ({ className }: AdminIconProps): JSX.Element => (
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2028_6408)">
+ <path d="M9.62979 11.9854V13.5727C8.37738 13.5727 7.17627 14.0744 6.29068 14.9675C5.40509 15.8605 4.90757 17.0717 4.90757 18.3346H3.3335C3.3335 16.6507 3.99685 15.0358 5.17764 13.8451C6.35842 12.6544 7.95991 11.9854 9.62979 11.9854ZM9.62979 11.1918C7.02076 11.1918 4.90757 9.06082 4.90757 6.42987C4.90757 3.79892 7.02076 1.66797 9.62979 1.66797C12.2388 1.66797 14.352 3.79892 14.352 6.42987C14.352 9.06082 12.2388 11.1918 9.62979 11.1918ZM9.62979 9.60448C11.3691 9.60448 12.7779 8.18384 12.7779 6.42987C12.7779 4.6759 11.3691 3.25527 9.62979 3.25527C7.89044 3.25527 6.48164 4.6759 6.48164 6.42987C6.48164 8.18384 7.89044 9.60448 9.62979 9.60448ZM16.7131 14.3664H17.5002V18.3346H11.2039V14.3664H11.9909V13.5727C11.9909 12.9413 12.2397 12.3357 12.6825 11.8891C13.1253 11.4426 13.7258 11.1918 14.352 11.1918C14.9782 11.1918 15.5788 11.4426 16.0216 11.8891C16.4644 12.3357 16.7131 12.9413 16.7131 13.5727V14.3664ZM15.1391 14.3664V13.5727C15.1391 13.3622 15.0561 13.1604 14.9085 13.0115C14.7609 12.8627 14.5608 12.7791 14.352 12.7791C14.1433 12.7791 13.9431 12.8627 13.7955 13.0115C13.6479 13.1604 13.565 13.3622 13.565 13.5727V14.3664H15.1391Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2028_6408">
+ <rect width="20" height="20" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/ArrowIcon.tsx b/src/assets/vectors/icons/ArrowIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d7bdc3edcc89dffe3ea2c66333aa6c6263826113
--- /dev/null
+++ b/src/assets/vectors/icons/ArrowIcon.tsx
@@ -0,0 +1,23 @@
+interface ArrowIconProps {
+ className?: string;
+}
+
+export const ArrowIcon = ({ className }: ArrowIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2014_6288)">
+ <path d="M9.91683 7L5.8335 10.5V3.5L9.91683 7Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2014_6288">
+ <rect width="14" height="14" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/ChevronDownIcon.tsx b/src/assets/vectors/icons/ChevronDownIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5b9d6d3b570653d3bcc32deb51168d34337a2926
--- /dev/null
+++ b/src/assets/vectors/icons/ChevronDownIcon.tsx
@@ -0,0 +1,23 @@
+interface ChevronDownIconProps {
+ className?: string;
+}
+
+export const ChevronDownIcon = ({ className }: ChevronDownIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2005_6461)">
+ <path d="M6.99958 7.68437L9.88708 4.79687L10.7119 5.62171L6.99958 9.33404L3.28725 5.62171L4.11208 4.79687L6.99958 7.68437Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2005_6461">
+ <rect width="14" height="14" fill="white" transform="translate(14) rotate(90)" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/ChevronLeftIcon.tsx b/src/assets/vectors/icons/ChevronLeftIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d8296cf7ce453b27b6ffb2cd8493cc1a70428ea8
--- /dev/null
+++ b/src/assets/vectors/icons/ChevronLeftIcon.tsx
@@ -0,0 +1,23 @@
+interface ChevronLeftIconProps {
+ className?: string;
+}
+
+export const ChevronLeftIcon = ({ className }: ChevronLeftIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2005_6475)">
+ <path d="M6.31611 6.9986L9.20361 9.8861L8.37878 10.7109L4.66645 6.9986L8.37878 3.28627L9.20361 4.1111L6.31611 6.9986Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2005_6475">
+ <rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/ChevronRightIcon.tsx b/src/assets/vectors/icons/ChevronRightIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7bff549b16880b1cd965026ff554e6f96ebeebb
--- /dev/null
+++ b/src/assets/vectors/icons/ChevronRightIcon.tsx
@@ -0,0 +1,26 @@
+interface ChevronRightIconProps {
+ className?: string;
+}
+
+export const ChevronRightIcon = ({ className }: ChevronRightIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2005_6453)">
+ <path
+ d="M7.68389 7.0014L4.79639 4.1139L5.62122 3.28906L9.33355 7.0014L5.62122 10.7137L4.79639 9.8889L7.68389 7.0014Z"
+ fill="#070130"
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0_2005_6453">
+ <rect width="14" height="14" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/ChevronUpIcon.tsx b/src/assets/vectors/icons/ChevronUpIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d0c049778125ffacae3d23f135e1731b60931185
--- /dev/null
+++ b/src/assets/vectors/icons/ChevronUpIcon.tsx
@@ -0,0 +1,23 @@
+interface ChevronUpIconProps {
+ className?: string;
+}
+
+export const ChevronUpIcon = ({ className }: ChevronUpIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2005_6483)">
+ <path d="M7.00042 6.31563L4.11292 9.20312L3.28809 8.37829L7.00042 4.66596L10.7128 8.37829L9.88792 9.20312L7.00042 6.31563Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2005_6483">
+ <rect width="14" height="14" fill="white" transform="translate(0 14) rotate(-90)" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/DotsIcon.tsx b/src/assets/vectors/icons/DotsIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8696aa3f941b30450892334efb70ed273c9d5987
--- /dev/null
+++ b/src/assets/vectors/icons/DotsIcon.tsx
@@ -0,0 +1,18 @@
+interface DotsIconProps {
+ className?: string;
+}
+
+export const DotsIcon = ({ className }: DotsIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M5.83317 7.00065C5.83317 7.64498 6.35551 8.16732 6.99984 8.16732C7.64417 8.16732 8.1665 7.64498 8.1665 7.00065C8.1665 6.35632 7.64417 5.83398 6.99984 5.83398C6.35551 5.83398 5.83317 6.35632 5.83317 7.00065Z" />
+ <path d="M5.83317 2.91667C5.83317 3.561 6.35551 4.08333 6.99984 4.08333C7.64417 4.08333 8.1665 3.561 8.1665 2.91667C8.1665 2.27233 7.64417 1.75 6.99984 1.75C6.35551 1.75 5.83317 2.27233 5.83317 2.91667Z" />
+ <path d="M5.83317 11.0827C5.83317 11.727 6.35551 12.2493 6.99984 12.2493C7.64417 12.2493 8.1665 11.727 8.1665 11.0827C8.1665 10.4384 7.64417 9.91602 6.99984 9.91602C6.35551 9.91602 5.83317 10.4383 5.83317 11.0827Z" />
+ </svg>
+);
diff --git a/src/assets/vectors/icons/ExportIcon.tsx b/src/assets/vectors/icons/ExportIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6330f76a7780ef0aaf57345af0a2d2440373eb39
--- /dev/null
+++ b/src/assets/vectors/icons/ExportIcon.tsx
@@ -0,0 +1,17 @@
+interface ExportIconProps {
+ className?: string;
+}
+
+export const ExportIcon = ({ className }: ExportIconProps): JSX.Element => (
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M14.0134 6.01583L10.4149 1.66797L6.81641 6.01583H9.6952V13.9869H11.1346V6.01583H14.0134Z" />
+ <path d="M17.6138 18.3383H3.21985C3.10918 18.3384 2.99999 18.3127 2.90078 18.2633C2.80157 18.2139 2.71501 18.1422 2.64782 18.0536C2.58063 17.9651 2.53463 17.8621 2.51338 17.7528C2.49214 17.6434 2.49623 17.5306 2.52534 17.4231L4.68443 9.45203C4.72597 9.29862 4.81646 9.16323 4.94197 9.06671C5.06747 8.9702 5.22102 8.91794 5.37894 8.91797H7.53804V10.3673H5.92879L4.16265 16.889H16.671L14.9049 10.3673H13.2956V8.91797H15.4547C15.6127 8.91794 15.7662 8.9702 15.8917 9.06671C16.0172 9.16323 16.1077 9.29862 16.1492 9.45203L18.3083 17.4231C18.3374 17.5306 18.3415 17.6434 18.3203 17.7528C18.299 17.8621 18.253 17.9651 18.1859 18.0536C18.1187 18.1422 18.0321 18.2139 17.9329 18.2633C17.8337 18.3127 17.7245 18.3384 17.6138 18.3383Z" />
+ </svg>
+);
diff --git a/src/assets/vectors/icons/InfoIcon.tsx b/src/assets/vectors/icons/InfoIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1330d3b2f468b02fc7ebdb3cabc3f8c0af0e797d
--- /dev/null
+++ b/src/assets/vectors/icons/InfoIcon.tsx
@@ -0,0 +1,23 @@
+interface InfoIconProps {
+ className?: string;
+}
+
+export const InfoIcon = ({ className }: InfoIconProps): JSX.Element => (
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2005_6409)">
+ <path d="M9.99984 18.3346C5.39734 18.3346 1.6665 14.6038 1.6665 10.0013C1.6665 5.3988 5.39734 1.66797 9.99984 1.66797C14.6023 1.66797 18.3332 5.3988 18.3332 10.0013C18.3332 14.6038 14.6023 18.3346 9.99984 18.3346ZM9.99984 16.668C11.7679 16.668 13.4636 15.9656 14.7139 14.7153C15.9641 13.4651 16.6665 11.7694 16.6665 10.0013C16.6665 8.23319 15.9641 6.5375 14.7139 5.28726C13.4636 4.03701 11.7679 3.33464 9.99984 3.33464C8.23173 3.33464 6.53603 4.03701 5.28579 5.28726C4.03555 6.5375 3.33317 8.23319 3.33317 10.0013C3.33317 11.7694 4.03555 13.4651 5.28579 14.7153C6.53603 15.9656 8.23173 16.668 9.99984 16.668ZM9.1665 5.83464H10.8332V7.5013H9.1665V5.83464ZM9.1665 9.16797H10.8332V14.168H9.1665V9.16797Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2005_6409">
+ <rect width="20" height="20" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/LegendIcon.tsx b/src/assets/vectors/icons/LegendIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2daf6f8124d0d6d9eb09bc7d677c17e16f4d2f5a
--- /dev/null
+++ b/src/assets/vectors/icons/LegendIcon.tsx
@@ -0,0 +1,23 @@
+interface LegendIconProps {
+ className?: string;
+}
+
+export const LegendIcon = ({ className }: LegendIconProps): JSX.Element => (
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2028_6411)">
+ <path d="M2.5 14.168H17.5V15.8346H2.5V14.168ZM2.5 9.16797H5V11.668H2.5V9.16797ZM6.66667 9.16797H9.16667V11.668H6.66667V9.16797ZM2.5 4.16797H5V6.66797H2.5V4.16797ZM10.8333 4.16797H13.3333V6.66797H10.8333V4.16797ZM15 4.16797H17.5V6.66797H15V4.16797ZM10.8333 9.16797H13.3333V11.668H10.8333V9.16797ZM15 9.16797H17.5V11.668H15V9.16797ZM6.66667 4.16797H9.16667V6.66797H6.66667V4.16797Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2028_6411">
+ <rect width="20" height="20" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/PageIcon.tsx b/src/assets/vectors/icons/PageIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e056183e31726b2be9cb9dac441955084f256e4f
--- /dev/null
+++ b/src/assets/vectors/icons/PageIcon.tsx
@@ -0,0 +1,23 @@
+interface PageIconProps {
+ className?: string;
+}
+
+export const PageIcon = ({ className }: PageIconProps): JSX.Element => (
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2028_6398)">
+ <path d="M3.50002 6.81797L7.83552 2.66797H15.7764C16.175 2.66797 16.5 2.98268 16.5 3.3541V15.8152C16.4998 15.9972 16.4242 16.1717 16.2897 16.3004C16.1552 16.429 15.9729 16.5013 15.7829 16.5013H4.21718C4.12234 16.5007 4.02856 16.4822 3.94118 16.4468C3.85381 16.4115 3.77457 16.36 3.70797 16.2953C3.64138 16.2306 3.58874 16.154 3.55305 16.0699C3.51737 15.9857 3.49935 15.8956 3.50002 15.8048V6.81797ZM8.55557 4.0513V7.50964H4.94446V15.118H15.0556V4.0513H8.55557Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2028_6398">
+ <rect width="20" height="20" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/PluginIcon.tsx b/src/assets/vectors/icons/PluginIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..39996057789f2f979c93c97497d428199181b025
--- /dev/null
+++ b/src/assets/vectors/icons/PluginIcon.tsx
@@ -0,0 +1,21 @@
+interface PluginIconProps {
+ className?: string;
+}
+
+export const PluginIcon = ({ className }: PluginIconProps): JSX.Element => (
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M15.5563 9.30382C15.3111 9.30382 15.0799 9.35382 14.8618 9.4316V5.13715H10.5674C10.6452 4.9191 10.6952 4.68785 10.6952 4.44271C10.6952 4.16912 10.6413 3.89821 10.5366 3.64545C10.4319 3.39269 10.2784 3.16302 10.085 2.96957C9.8915 2.77611 9.66184 2.62266 9.40907 2.51796C9.15631 2.41326 8.8854 2.35938 8.61182 2.35938C8.33823 2.35938 8.06732 2.41326 7.81456 2.51796C7.5618 2.62266 7.33213 2.77611 7.13868 2.96957C6.94522 3.16302 6.79177 3.39269 6.68707 3.64545C6.58237 3.89821 6.52848 4.16912 6.52848 4.44271C6.52848 4.68785 6.57848 4.9191 6.65626 5.13715H2.36182V9.30382C2.6354 9.30382 2.90631 9.35771 3.15907 9.4624C3.41184 9.5671 3.6415 9.72056 3.83496 9.91401C4.02841 10.1075 4.18187 10.3371 4.28657 10.5899C4.39126 10.8427 4.44515 11.1136 4.44515 11.3872C4.44515 11.6607 4.39126 11.9316 4.28657 12.1844C4.18187 12.4372 4.02841 12.6668 3.83496 12.8603C3.6415 13.0537 3.41184 13.2072 3.15907 13.3119C2.90631 13.4166 2.6354 13.4705 2.36182 13.4705V17.6372H6.52848C6.52848 17.0846 6.74798 16.5547 7.13868 16.164C7.52938 15.7733 8.05928 15.5538 8.61182 15.5538C9.16435 15.5538 9.69426 15.7733 10.085 16.164C10.4757 16.5547 10.6952 17.0846 10.6952 17.6372H14.8618V13.3427C15.0799 13.4205 15.3111 13.4705 15.5563 13.4705C15.8298 13.4705 16.1008 13.4166 16.3535 13.3119C16.6063 13.2072 16.8359 13.0537 17.0294 12.8603C17.2229 12.6668 17.3763 12.4372 17.481 12.1844C17.5857 11.9316 17.6396 11.6607 17.6396 11.3872C17.6396 11.1136 17.5857 10.8427 17.481 10.5899C17.3763 10.3371 17.2229 10.1075 17.0294 9.91401C16.8359 9.72056 16.6063 9.5671 16.3535 9.4624C16.1008 9.35771 15.8298 9.30382 15.5563 9.30382V9.30382Z"
+ strokeWidth="1.5"
+ strokeMiterlimit="10"
+ strokeLinecap="square"
+ />
+ </svg>
+);
diff --git a/src/assets/vectors/icons/PlusIcon.tsx b/src/assets/vectors/icons/PlusIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa5aeabadb33a68a9e0db5b968c11c3b39336182
--- /dev/null
+++ b/src/assets/vectors/icons/PlusIcon.tsx
@@ -0,0 +1,23 @@
+interface PlusIconProps {
+ className?: string;
+}
+
+export const PlusIcon = ({ className }: PlusIconProps): JSX.Element => (
+ <svg
+ width="14"
+ height="14"
+ viewBox="0 0 14 14"
+ fill="none"
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g clipPath="url(#clip0_2014_6319)">
+ <path d="M6.4165 6.41602V2.91602H7.58317V6.41602H11.0832V7.58268H7.58317V11.0827H6.4165V7.58268H2.9165V6.41602H6.4165Z" />
+ </g>
+ <defs>
+ <clipPath id="clip0_2014_6319">
+ <rect width="14" height="14" rx="4" fill="white" />
+ </clipPath>
+ </defs>
+ </svg>
+);
diff --git a/src/assets/vectors/icons/arrow.svg b/src/assets/vectors/icons/arrow.svg
deleted file mode 100644
index 1dfd5b73e49f1251fdfef591c3ee2727bfd09ad7..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/arrow.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2014_6288)">
-<path d="M9.91683 7L5.8335 10.5V3.5L9.91683 7Z" />
-</g>
-<defs>
-<clipPath id="clip0_2014_6288">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/vectors/icons/chevron-down.svg b/src/assets/vectors/icons/chevron-down.svg
deleted file mode 100644
index 85dfc2382d5d1780d3f6af7b01bc12c4694e0a8e..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/chevron-down.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2005_6461)">
-<path d="M6.99958 7.68437L9.88708 4.79687L10.7119 5.62171L6.99958 9.33404L3.28725 5.62171L4.11208 4.79687L6.99958 7.68437Z" />
-</g>
-<defs>
-<clipPath id="clip0_2005_6461">
-<rect width="14" height="14" fill="white" transform="translate(14) rotate(90)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/vectors/icons/chevron-left.svg b/src/assets/vectors/icons/chevron-left.svg
deleted file mode 100644
index 2bbe3d36834717de1a63df48b23432fe6cabb97e..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/chevron-left.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2005_6475)">
-<path d="M6.31611 6.9986L9.20361 9.8861L8.37878 10.7109L4.66645 6.9986L8.37878 3.28627L9.20361 4.1111L6.31611 6.9986Z" />
-</g>
-<defs>
-<clipPath id="clip0_2005_6475">
-<rect width="14" height="14" fill="white" transform="translate(14 14) rotate(-180)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/vectors/icons/chevron-right.svg b/src/assets/vectors/icons/chevron-right.svg
deleted file mode 100644
index 4d1f012d0629a51308689593f8a0c98707ad37a7..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/chevron-right.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2005_6453)">
-<path d="M7.68389 7.0014L4.79639 4.1139L5.62122 3.28906L9.33355 7.0014L5.62122 10.7137L4.79639 9.8889L7.68389 7.0014Z" />
-</g>
-<defs>
-<clipPath id="clip0_2005_6453">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/vectors/icons/chevron-up.svg b/src/assets/vectors/icons/chevron-up.svg
deleted file mode 100644
index e89e036a4bacf928643512a24839fabc51f9159f..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/chevron-up.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2005_6483)">
-<path d="M7.00042 6.31563L4.11292 9.20312L3.28809 8.37829L7.00042 4.66596L10.7128 8.37829L9.88792 9.20312L7.00042 6.31563Z"/>
-</g>
-<defs>
-<clipPath id="clip0_2005_6483">
-<rect width="14" height="14" fill="white" transform="translate(0 14) rotate(-90)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/assets/vectors/icons/dots.svg b/src/assets/vectors/icons/dots.svg
deleted file mode 100644
index e3316927bfcdc4691b718ee8b7a17180d4437905..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/dots.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.83317 7.00065C5.83317 7.64498 6.35551 8.16732 6.99984 8.16732C7.64417 8.16732 8.1665 7.64498 8.1665 7.00065C8.1665 6.35632 7.64417 5.83398 6.99984 5.83398C6.35551 5.83398 5.83317 6.35632 5.83317 7.00065Z" />
-<path d="M5.83317 2.91667C5.83317 3.561 6.35551 4.08333 6.99984 4.08333C7.64417 4.08333 8.1665 3.561 8.1665 2.91667C8.1665 2.27233 7.64417 1.75 6.99984 1.75C6.35551 1.75 5.83317 2.27233 5.83317 2.91667Z" />
-<path d="M5.83317 11.0827C5.83317 11.727 6.35551 12.2493 6.99984 12.2493C7.64417 12.2493 8.1665 11.727 8.1665 11.0827C8.1665 10.4384 7.64417 9.91602 6.99984 9.91602C6.35551 9.91602 5.83317 10.4383 5.83317 11.0827Z" />
-</svg>
diff --git a/src/assets/vectors/icons/plus.svg b/src/assets/vectors/icons/plus.svg
deleted file mode 100644
index 96d69f0597ce467e1451873e84d9fc2718a5bdaf..0000000000000000000000000000000000000000
--- a/src/assets/vectors/icons/plus.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2014_6319)">
-<path d="M6.4165 6.41602V2.91602H7.58317V6.41602H11.0832V7.58268H7.58317V11.0827H6.4165V7.58268H2.9165V6.41602H6.4165Z" />
-</g>
-<defs>
-<clipPath id="clip0_2014_6319">
-<rect width="14" height="14" rx="4" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/components/FunctionalArea/NavBar/NavBar.component.test.tsx b/src/components/FunctionalArea/NavBar/NavBar.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e23f24129b82b6f95c5e8dd4d90d7317a842068f
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/NavBar.component.test.tsx
@@ -0,0 +1,15 @@
+import { screen, render, RenderResult } from '@testing-library/react';
+import { NavBar } from './NavBar.component';
+
+const renderComponent = (): RenderResult => render(<NavBar />);
+
+describe('NavBar - component', () => {
+ it('Should contain navigation buttons and logos with powered by info', () => {
+ renderComponent();
+
+ expect(screen.getByTestId('nav-buttons')).toBeInTheDocument();
+ expect(screen.getByTestId('nav-logos-and-powered-by')).toBeInTheDocument();
+ expect(screen.getByAltText('luxembourg logo')).toBeInTheDocument();
+ expect(screen.getByAltText('logo')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/FunctionalArea/NavBar/NavBar.component.tsx b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
index ccff87b8c145fdc6b7b93f57972ded6d8fac3504..3ff6d5f615e99a832ed37bfa7cdeec6b4753100b 100644
--- a/src/components/FunctionalArea/NavBar/NavBar.component.tsx
+++ b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
@@ -1 +1,35 @@
-export const NavBar = (): JSX.Element => <div className="w-[88px] min-h-100 bg-slate-700 ">.</div>;
+import Image from 'next/image';
+import { IconButton } from '@/shared/IconButton';
+import logoImg from '@/assets/images/logo.png';
+import luxembourgLogoImg from '@/assets/images/luxembourg-logo.png';
+
+export const NavBar = (): JSX.Element => (
+ <div className="flex items-center justify-between flex-col w-[88px] min-h-100 bg-cultured py-8">
+ <div data-testid="nav-buttons">
+ <div className="flex flex-col mb-8 gap-[10px]">
+ <IconButton icon="info" />
+ <IconButton icon="page" />
+ <IconButton icon="plugin" />
+ <IconButton icon="export" />
+ </div>
+ <div className="flex flex-col gap-[10px]">
+ <IconButton icon="admin" />
+ <IconButton icon="legend" />
+ </div>
+ </div>
+
+ <div className="flex flex-col items-center gap-[20px]" data-testid="nav-logos-and-powered-by">
+ <Image
+ className="bg-white-pearl rounded-s rounded-m pb-[7px]"
+ src={luxembourgLogoImg}
+ alt="luxembourg logo"
+ height={41}
+ width={48}
+ />
+ <Image src={logoImg} alt="logo" height={48} width={48} />
+ <span className="w-14 h-16 text-[8px] leading-4 text-center">
+ Powered by: MINERVA Platform (v16.0.8)
+ </span>
+ </div>
+ </div>
+);
diff --git a/src/shared/Button/Button.component.tsx b/src/shared/Button/Button.component.tsx
index c963d5834f4d9b340e6a1cb647746db45d34f772..a81da4df775049a5393793b2ae58d810a5695f39 100644
--- a/src/shared/Button/Button.component.tsx
+++ b/src/shared/Button/Button.component.tsx
@@ -2,20 +2,13 @@ import { Icon } from '@/shared/Icon';
import { twMerge } from 'tailwind-merge';
import type { ButtonHTMLAttributes } from 'react';
+import type { IconTypes } from '@/types/iconTypes';
type VariantStyle = 'primary' | 'secondary' | 'ghost' | 'quiet';
-type Icon =
- | 'chevron-right'
- | 'chevron-left'
- | 'chevron-up'
- | 'chevron-down'
- | 'plus'
- | 'arrow'
- | 'dots';
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variantStyles?: VariantStyle;
- icon?: Icon;
+ icon?: IconTypes;
isIcon?: boolean;
isFrontIcon?: boolean;
}
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index 7f2462eb697c5bfb11d4151528a3af299d154746..09ab33c8f3b5c828b5b30247f419f986fc6af4be 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -1,23 +1,22 @@
-import ChevronRightIcon from '@/assets/vectors/icons/chevron-right.svg?component';
-import ChevronLeftIcon from '@/assets/vectors/icons/chevron-left.svg?component';
-import ChevronUpIcon from '@/assets/vectors/icons/chevron-up.svg?component';
-import ChevronDownIcon from '@/assets/vectors/icons/chevron-down.svg?component';
-import PlusIcon from '@/assets/vectors/icons/plus.svg?component';
-import ArrowIcon from '@/assets/vectors/icons/arrow.svg?component';
-import DotsIcon from '@/assets/vectors/icons/dots.svg?component';
+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';
-type Name =
- | 'chevron-right'
- | 'chevron-left'
- | 'chevron-up'
- | 'chevron-down'
- | 'plus'
- | 'arrow'
- | 'dots';
+import type { IconTypes } from '@/types/iconTypes';
export interface IconProps {
className?: string;
- name?: Name;
+ name: IconTypes;
}
const icons = {
@@ -28,10 +27,19 @@ const icons = {
plus: PlusIcon,
arrow: ArrowIcon,
dots: DotsIcon,
+ admin: AdminIcon,
+ export: ExportIcon,
+ info: InfoIcon,
+ legend: LegendIcon,
+ page: PageIcon,
+ plugin: PluginIcon,
} as const;
-export const Icon = ({ name = 'chevron-right', className = '' }: IconProps): JSX.Element => {
- const IconComponent = icons[name] || ChevronRightIcon;
+export const Icon = ({ name, className = '' }: IconProps): JSX.Element => {
+ if (typeof name === 'undefined') {
+ throw new Error('Icon component must have a name of icon!');
+ }
+ const IconComponent = icons[name];
return <IconComponent className={className} />;
};
diff --git a/src/shared/IconButton/IconButton.component.test.tsx b/src/shared/IconButton/IconButton.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5eef43acace132dbe3bab8d349ec30f6d6ea8102
--- /dev/null
+++ b/src/shared/IconButton/IconButton.component.test.tsx
@@ -0,0 +1,25 @@
+import { screen, render, RenderResult } from '@testing-library/react';
+import { IconButton, IconButtonProps } from './IconButton.component';
+
+const renderComponent = (props: IconButtonProps): RenderResult => render(<IconButton {...props} />);
+
+describe('IconButton - component', () => {
+ it('should render IconButton', () => {
+ renderComponent({ icon: 'info' });
+
+ expect(screen.getByTestId('icon-button')).toBeInTheDocument();
+ });
+
+ it('should render IconButton with plugin icon', () => {
+ renderComponent({ icon: 'plugin' });
+
+ expect(screen.getByTestId('icon-button').firstChild).toHaveClass('stroke-font-400');
+ });
+
+ it('should render IconButton as active', () => {
+ renderComponent({ icon: 'info', isActive: true });
+
+ expect(screen.getByTestId('icon-button')).toHaveClass('bg-white-pearl');
+ expect(screen.getByTestId('icon-button').firstChild).toHaveClass('fill-primary-500');
+ });
+});
diff --git a/src/shared/IconButton/IconButton.component.tsx b/src/shared/IconButton/IconButton.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e5270caf9f2633b73a08f865b6199ad246c25eed
--- /dev/null
+++ b/src/shared/IconButton/IconButton.component.tsx
@@ -0,0 +1,53 @@
+import { Icon } from '@/shared/Icon';
+import { twMerge } from 'tailwind-merge';
+
+import type { ButtonHTMLAttributes } from 'react';
+import type { IconTypes } from '@/types/iconTypes';
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+ className?: string;
+ icon: IconTypes;
+ isActive?: boolean;
+}
+
+const getActiveFillOrStrokeColor = (icon: IconTypes): string => {
+ if (icon !== 'plugin') return 'fill-primary-500';
+ return 'stroke-primary-500';
+};
+
+export const IconButton = ({
+ className = '',
+ icon,
+ isActive = false,
+ ...props
+}: IconButtonProps): JSX.Element => {
+ if (typeof icon === 'undefined') {
+ throw new Error('IconButton component must have a icon property!');
+ }
+
+ return (
+ <button
+ className={twMerge(
+ 'w-10 h-10 flex items-center justify-center group py-2 rounded-s rounded-e',
+ 'bg-cultured active:bg-white-pearl',
+ className,
+ isActive && 'bg-white-pearl',
+ )}
+ data-testid="icon-button"
+ type="button"
+ {...props}
+ >
+ <Icon
+ className={twMerge(
+ icon !== 'plugin'
+ ? '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),
+ )}
+ name={icon}
+ />
+ </button>
+ );
+};
+
+IconButton.displayName = 'IconButton';
diff --git a/src/shared/IconButton/index.tsx b/src/shared/IconButton/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..11d3b1f1cf27797cad41d25a6a7f6a6e13d377b1
--- /dev/null
+++ b/src/shared/IconButton/index.tsx
@@ -0,0 +1 @@
+export { IconButton } from './IconButton.component';
diff --git a/src/types/iconTypes.ts b/src/types/iconTypes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b312344a7ace070a823af4f5f7ec6269d5e480a8
--- /dev/null
+++ b/src/types/iconTypes.ts
@@ -0,0 +1,14 @@
+export type IconTypes =
+ | 'chevron-right'
+ | 'chevron-left'
+ | 'chevron-up'
+ | 'chevron-down'
+ | 'plus'
+ | 'arrow'
+ | 'dots'
+ | 'admin'
+ | 'export'
+ | 'info'
+ | 'legend'
+ | 'page'
+ | 'plugin';