From 8b32c07d8e291be76d56d93d22a2aaa9744331e9 Mon Sep 17 00:00:00 2001
From: mateuszmiko <dmastah92@gmail.com>
Date: Tue, 26 Sep 2023 18:37:52 +0200
Subject: [PATCH] Feature/add icon button component
---
jest.config.ts | 3 -
next.config.js | 19 -------
package.json | 1 -
src/assets/images/logo.png | Bin 0 -> 2767 bytes
src/assets/images/luxembourg-logo.png | Bin 0 -> 2192 bytes
src/assets/vectors/icons/AdminIcon.tsx | 23 ++++++++
src/assets/vectors/icons/ArrowIcon.tsx | 23 ++++++++
src/assets/vectors/icons/ChevronDownIcon.tsx | 23 ++++++++
src/assets/vectors/icons/ChevronLeftIcon.tsx | 23 ++++++++
src/assets/vectors/icons/ChevronRightIcon.tsx | 26 +++++++++
src/assets/vectors/icons/ChevronUpIcon.tsx | 23 ++++++++
src/assets/vectors/icons/DotsIcon.tsx | 18 ++++++
src/assets/vectors/icons/ExportIcon.tsx | 17 ++++++
src/assets/vectors/icons/InfoIcon.tsx | 23 ++++++++
src/assets/vectors/icons/LegendIcon.tsx | 23 ++++++++
src/assets/vectors/icons/PageIcon.tsx | 23 ++++++++
src/assets/vectors/icons/PluginIcon.tsx | 21 +++++++
src/assets/vectors/icons/PlusIcon.tsx | 23 ++++++++
src/assets/vectors/icons/arrow.svg | 10 ----
src/assets/vectors/icons/chevron-down.svg | 10 ----
src/assets/vectors/icons/chevron-left.svg | 10 ----
src/assets/vectors/icons/chevron-right.svg | 10 ----
src/assets/vectors/icons/chevron-up.svg | 10 ----
src/assets/vectors/icons/dots.svg | 5 --
src/assets/vectors/icons/plus.svg | 10 ----
.../NavBar/NavBar.component.test.tsx | 15 +++++
.../NavBar/NavBar.component.tsx | 36 +++++++++++-
src/shared/Button/Button.component.tsx | 11 +---
src/shared/Icon/Icon.component.tsx | 44 +++++++++------
.../IconButton/IconButton.component.test.tsx | 25 +++++++++
.../IconButton/IconButton.component.tsx | 53 ++++++++++++++++++
src/shared/IconButton/index.tsx | 1 +
src/types/iconTypes.ts | 14 +++++
33 files changed, 460 insertions(+), 116 deletions(-)
create mode 100644 src/assets/images/logo.png
create mode 100644 src/assets/images/luxembourg-logo.png
create mode 100644 src/assets/vectors/icons/AdminIcon.tsx
create mode 100644 src/assets/vectors/icons/ArrowIcon.tsx
create mode 100644 src/assets/vectors/icons/ChevronDownIcon.tsx
create mode 100644 src/assets/vectors/icons/ChevronLeftIcon.tsx
create mode 100644 src/assets/vectors/icons/ChevronRightIcon.tsx
create mode 100644 src/assets/vectors/icons/ChevronUpIcon.tsx
create mode 100644 src/assets/vectors/icons/DotsIcon.tsx
create mode 100644 src/assets/vectors/icons/ExportIcon.tsx
create mode 100644 src/assets/vectors/icons/InfoIcon.tsx
create mode 100644 src/assets/vectors/icons/LegendIcon.tsx
create mode 100644 src/assets/vectors/icons/PageIcon.tsx
create mode 100644 src/assets/vectors/icons/PluginIcon.tsx
create mode 100644 src/assets/vectors/icons/PlusIcon.tsx
delete mode 100644 src/assets/vectors/icons/arrow.svg
delete mode 100644 src/assets/vectors/icons/chevron-down.svg
delete mode 100644 src/assets/vectors/icons/chevron-left.svg
delete mode 100644 src/assets/vectors/icons/chevron-right.svg
delete mode 100644 src/assets/vectors/icons/chevron-up.svg
delete mode 100644 src/assets/vectors/icons/dots.svg
delete mode 100644 src/assets/vectors/icons/plus.svg
create mode 100644 src/components/FunctionalArea/NavBar/NavBar.component.test.tsx
create mode 100644 src/shared/IconButton/IconButton.component.test.tsx
create mode 100644 src/shared/IconButton/IconButton.component.tsx
create mode 100644 src/shared/IconButton/index.tsx
create mode 100644 src/types/iconTypes.ts
diff --git a/jest.config.ts b/jest.config.ts
index a179ae83..7e7dad84 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 966d1c5c..254ffd6c 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 84f6a161..a840cf2f 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
GIT binary patch
literal 2767
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
V@2t{lj<Em$002ovPDHLkV1jeFNL~N{
literal 0
HcmV?d00001
diff --git a/src/assets/images/luxembourg-logo.png b/src/assets/images/luxembourg-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..8961ee9d4ed257cec3abb0d09027b27fe81a824f
GIT binary patch
literal 2192
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
S7kfwm0000<MNUMnLSTYMC^m8c
literal 0
HcmV?d00001
diff --git a/src/assets/vectors/icons/AdminIcon.tsx b/src/assets/vectors/icons/AdminIcon.tsx
new file mode 100644
index 00000000..2defa03f
--- /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 00000000..d7bdc3ed
--- /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 00000000..5b9d6d3b
--- /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 00000000..d8296cf7
--- /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 00000000..b7bff549
--- /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 00000000..d0c04977
--- /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 00000000..8696aa3f
--- /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 00000000..6330f76a
--- /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 00000000..1330d3b2
--- /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 00000000..2daf6f81
--- /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 00000000..e056183e
--- /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 00000000..39996057
--- /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 00000000..aa5aeaba
--- /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 1dfd5b73..00000000
--- 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 85dfc238..00000000
--- 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 2bbe3d36..00000000
--- 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 4d1f012d..00000000
--- 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 e89e036a..00000000
--- 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 e3316927..00000000
--- 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 96d69f05..00000000
--- 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 00000000..e23f2412
--- /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 ccff87b8..3ff6d5f6 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 c963d583..a81da4df 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 7f2462eb..09ab33c8 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 00000000..5eef43ac
--- /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 00000000..e5270caf
--- /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 00000000..11d3b1f1
--- /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 00000000..b312344a
--- /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';
--
GitLab