From 2db5e3d5db63c5c9ca6a547eef83cbbaa64ec62b Mon Sep 17 00:00:00 2001
From: Lencodes <contact@lencodes.com>
Date: Mon, 27 Nov 2023 15:53:02 +0100
Subject: [PATCH 01/13] INIT

---
 package-lock.json                           | 4 ++--
 src/components/formFields/select/select.tsx | 5 ++++-
 tsconfig.json                               | 5 -----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 63b17f1..6f69b21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.31",
+  "version": "2.2.32",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@conduction/components",
-      "version": "2.2.31",
+      "version": "2.2.32",
       "license": "ISC",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 854dfd2..5a89dbe 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -7,9 +7,12 @@ import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
 
+export type TSelectOption = { label: string; value: string };
+export type TGroupedSelectOption = { label: string; options: TSelectOption[] };
+
 interface ISelectProps {
   control: Control<FieldValues, any>;
-  options: { label: string; value: string }[];
+  options: TSelectOption[] | TGroupedSelectOption[];
   name: string;
   ariaLabel: string;
   id?: string;
diff --git a/tsconfig.json b/tsconfig.json
index 028b9c9..1688f34 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,12 +18,7 @@
   "hooks": [
     "copy-files"
   ],
-  "include": [
-    "src",
-    "src/**/*.css"
-  ],
   "exclude": [
-    "node_modules",
     "**/__tests__/*"
   ]
 }
\ No newline at end of file

From ce4b45765e4deb5d19ce624e68f960ea27a2bfd0 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 27 Nov 2023 15:53:21 +0100
Subject: [PATCH 02/13] udpated downloadcard

---
 .../card/downloadCard/DownloadCard.module.css | 27 ++++++++++++-------
 .../card/downloadCard/DownloadCard.tsx        |  7 +++--
 .../notificationPopUp/NotificationPopUp.tsx   |  2 +-
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/card/downloadCard/DownloadCard.module.css b/src/components/card/downloadCard/DownloadCard.module.css
index 1e57b8e..f0c306f 100644
--- a/src/components/card/downloadCard/DownloadCard.module.css
+++ b/src/components/card/downloadCard/DownloadCard.module.css
@@ -1,4 +1,5 @@
 :root {
+  /* --conduction-download-card-background-color: #ffffff; */
   --conduction-download-card-title-color: #000000;
   --conduction-download-card-title-font-size: 20px;
   --conduction-download-card-title-font-weight: bold;
@@ -19,13 +20,14 @@
 }
 
 .container {
+  background-color: var(--conduction-download-card-background-color, var(--conduction-card-wrapper-background-color));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-width: var(--conduction-download-card-border-width);
-  border-style: var(--conduction-download-card-border-style);
-  border-color: var(--conduction-download-card-border-color);
-  border-radius: var(--conduction-download-card-border-radius);
+  border-width: var(--conduction-download-card-border-width, var(--conduction-card-wrapper-border-width));
+  border-style: var(--conduction-download-card-border-style, var(--conduction-card-wrapper-border-style));
+  border-color: var(--conduction-download-card-border-color, var(--conduction-card-wrapper-border-color));
+  border-radius: var(--conduction-download-card-border-radius, --conduction-card-wrapper-border-radius);
   padding-inline-start: var(--conduction-download-card-padding-inline-start);
   padding-inline-end: var(--conduction-download-card-padding-inline-end);
   padding-block-start: var(--conduction-download-card-padding-block-start);
@@ -33,22 +35,29 @@
 }
 
 .title {
-  color: var(--conduction-download-card-title-color);
-  font-size: var(--conduction-download-card-title-font-size);
-  font-weight: var(--conduction-download-card-title-font-weight);
-  font-family: var(--conduction-download-card-title-font-family);
-  margin-inline-end: var(--conduction-download-card-title-margin-inline-end);
+  color: var(--conduction-download-card-title-color) !important;
+  font-size: var(--conduction-download-card-title-font-size) !important;
+  font-weight: var(--conduction-download-card-title-font-weight) !important;
+  font-family: var(--conduction-download-card-title-font-family) !important;
+  margin-inline-end: var(--conduction-download-card-title-margin-inline-end) !important;
+  word-break: break-word;
 }
 
 .content {
   display: flex;
   align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
 }
 
 .icon {
   margin-inline-end: var(--conduction-download-card-icon-gap);
 }
 
+.link {
+  display: inherit;
+}
+
 .link:hover {
   cursor: pointer;
 }
diff --git a/src/components/card/downloadCard/DownloadCard.tsx b/src/components/card/downloadCard/DownloadCard.tsx
index a0055c4..f4f6db8 100644
--- a/src/components/card/downloadCard/DownloadCard.tsx
+++ b/src/components/card/downloadCard/DownloadCard.tsx
@@ -74,18 +74,17 @@ export const DownloadCard = ({
 
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
+      <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
       <div className={styles.content}>
-        <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
-
         <Heading3 className={styles.title}>{label}</Heading3>
 
         <div>
           ({_.toUpper(type)}
-          {size && `, ${size} kb`})
+          {size && `, ${size}kB`})
         </div>
       </div>
 
-      <Link className={styles.link} href="" onClick={(e) => onClick(e)}>
+      <Link className={styles.link} href="" onClick={(e: any) => onClick(e)}>
         <FontAwesomeIcon className={styles.icon} icon={faDownload} /> Download
       </Link>
     </div>
diff --git a/src/components/notificationPopUp/NotificationPopUp.tsx b/src/components/notificationPopUp/NotificationPopUp.tsx
index 042b1f8..82278f9 100644
--- a/src/components/notificationPopUp/NotificationPopUp.tsx
+++ b/src/components/notificationPopUp/NotificationPopUp.tsx
@@ -8,7 +8,7 @@ import { faArrowRight, faClose } from "@fortawesome/free-solid-svg-icons";
 
 export interface NotificationPopUpProps {
   title: string;
-  description?: string | JSX.Element;
+  description?: string;
   customContent?: JSX.Element;
   isVisible: boolean;
   hide: () => void;

From e2f8fa1c9a693048d9028178154b2275b9f048aa Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 27 Nov 2023 15:53:50 +0100
Subject: [PATCH 03/13] updated version and readme

---
 README.md    | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2b6b90a..5f20b33 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.33: Refactored DownloadCard.
   - 2.2.32: Added more tokens to DownloadCard.
   - 2.2.31:
     - Added custom content to NotificationPopUp.
diff --git a/package.json b/package.json
index 5eb06be..4b457b6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.32",
+  "version": "2.2.33",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

From d9a4c857529e38d3cea4f812335b0bfe9ee38f15 Mon Sep 17 00:00:00 2001
From: Lennart Bank <lennart@MacBook-Pro.home>
Date: Mon, 27 Nov 2023 16:15:01 +0100
Subject: [PATCH 04/13] ADD README and UP version

---
 README.md    | 1 +
 package.json | 9 ++-------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 2b6b90a..5106873 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.33: Added select options grouping logic.
   - 2.2.32: Added more tokens to DownloadCard.
   - 2.2.31:
     - Added custom content to NotificationPopUp.
diff --git a/package.json b/package.json
index 5eb06be..a5b1b09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.32",
+  "version": "2.2.33",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -14,12 +14,7 @@
     "type": "git",
     "url": "git+https://github.com/ConductionNL/conduction-components.git"
   },
-  "keywords": [
-    "React",
-    "Gatsby",
-    "Conduction",
-    "Components"
-  ],
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
   "author": "Conduction B.V.",
   "license": "ISC",
   "bugs": {

From f533dc7caec910c81cf21e7cad1390de15d2d9fe Mon Sep 17 00:00:00 2001
From: Lencodes <contact@lencodes.com>
Date: Tue, 28 Nov 2023 12:11:55 +0100
Subject: [PATCH 05/13] ADD GroupLabel to select inputs

---
 .../formFields/select/select.module.css          | 10 ++++++++++
 src/components/formFields/select/select.tsx      | 11 ++++++++++-
 tsconfig.json                                    | 16 +++++-----------
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/formFields/select/select.module.css b/src/components/formFields/select/select.module.css
index f314a5e..4bf19e0 100644
--- a/src/components/formFields/select/select.module.css
+++ b/src/components/formFields/select/select.module.css
@@ -24,6 +24,10 @@
 
   --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
   --conduction-input-select-placeholder-color: #757575;
+
+  --conduction-input-select-group-font-size: 12px;
+  --conduction-input-select-group-text-color: grey;
+  --conduction-input-select-group-font-family: "Noto Sans", Arial, sans-serif;
 }
 
 .select > div {
@@ -56,3 +60,9 @@
   border: var(--conduction-input-select-border-focus);
   border-radius: var(--conduction-input-select-border-radius);
 }
+
+.groupLabel {
+  font-size: var(--conduction-input-select-group-font-size);
+  color: var(--conduction-input-select-group-text-color);
+  font-family: var(--conduction-input-select-group-font-family);
+}
diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx
index 5a89dbe..8a4a1d5 100644
--- a/src/components/formFields/select/select.tsx
+++ b/src/components/formFields/select/select.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as styles from "./select.module.css";
 import clsx from "clsx";
 import CreatableSelect from "react-select/creatable";
-import ReactSelect, { MenuPlacement, StylesConfig } from "react-select";
+import ReactSelect, { MenuPlacement, StylesConfig, GroupBase } from "react-select";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
@@ -106,6 +106,7 @@ export const SelectMultiple = ({
               menuPlacement={menuPlacement}
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
+              formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
@@ -151,6 +152,7 @@ export const SelectCreate = ({
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
               styles={selectStyles}
+              formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
@@ -196,6 +198,7 @@ export const SelectSingle = ({
               menuPlacement={menuPlacement}
               styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
+              formatGroupLabel={(group) => <GroupLabel {...{ group }} />}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name]?.message as string} />}
           </>
@@ -204,3 +207,9 @@ export const SelectSingle = ({
     />
   );
 };
+
+const GroupLabel: React.FC<{ group: GroupBase<unknown> }> = ({ group }) => {
+  if (!group.label) return <></>;
+
+  return <span className={styles.groupLabel}>{group.label}</span>;
+};
diff --git a/tsconfig.json b/tsconfig.json
index 1688f34..6be1298 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,7 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -15,10 +12,7 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": [
-    "copy-files"
-  ],
-  "exclude": [
-    "**/__tests__/*"
-  ]
-}
\ No newline at end of file
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["**/__tests__/*"]
+}

From b3a1dcd89ead53e4e833a65cde8a95341821ba08 Mon Sep 17 00:00:00 2001
From: Lencodes <contact@lencodes.com>
Date: Tue, 28 Nov 2023 12:17:13 +0100
Subject: [PATCH 06/13] UP version

---
 README.md    | 3 ++-
 package.json | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c6e2d81..e84a03c 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,9 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.33: 
+  - 2.2.34:
     - Added select options grouping logic.
+  - 2.2.33:
     - Refactored DownloadCard.
   - 2.2.32: Added more tokens to DownloadCard.
   - 2.2.31:
diff --git a/package.json b/package.json
index a5b1b09..571fde3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.33",
+  "version": "2.2.34",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

From f0e6d4b5242aa1a2210061b4995ade6f3f705326 Mon Sep 17 00:00:00 2001
From: Lencodes <contact@lencodes.com>
Date: Tue, 28 Nov 2023 13:37:09 +0100
Subject: [PATCH 07/13] HOTFIX versioning issues

---
 README.md                                       | 2 ++
 package.json                                    | 2 +-
 src/components/formFields/checkbox/checkbox.tsx | 4 ++--
 src/components/formFields/index.tsx             | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e84a03c..a5acb45 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.35 & 2.2.36:
+    - Bugfix versions.
   - 2.2.34:
     - Added select options grouping logic.
   - 2.2.33:
diff --git a/package.json b/package.json
index 571fde3..0b7f52f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.34",
+  "version": "2.2.36",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/formFields/checkbox/checkbox.tsx b/src/components/formFields/checkbox/checkbox.tsx
index 94db9c0..aef2081 100644
--- a/src/components/formFields/checkbox/checkbox.tsx
+++ b/src/components/formFields/checkbox/checkbox.tsx
@@ -1,5 +1,5 @@
-import * as styles from "./checkbox.module.css";
-import { IReactHookFormProps } from "./../types";
+import * as styles from "./Checkbox.module.css";
+import { IReactHookFormProps } from "../types";
 
 export interface ICheckboxProps {
   label: string;
diff --git a/src/components/formFields/index.tsx b/src/components/formFields/index.tsx
index 1399ae9..bebbc77 100644
--- a/src/components/formFields/index.tsx
+++ b/src/components/formFields/index.tsx
@@ -1,6 +1,6 @@
 import { InputText, InputPassword, InputEmail, InputURL, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
-import { InputCheckbox } from "./checkbox/checkbox";
+import { InputCheckbox } from "./checkbox/Checkbox";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue, IKeyValue } from "./createKeyValue/CreateKeyValue";
 import { InputDate } from "./date/Date";

From 539995b4734104c2d50d2bb3dba0c3e5ab756cf0 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 29 Nov 2023 11:55:48 +0100
Subject: [PATCH 08/13] Updated DownloadCard to include tooltip and Removed
 opacity token from Tooltip the fix bug

---
 README.md                                      |  1 +
 package-lock.json                              | 18 +++++++++---------
 package.json                                   |  4 ++--
 .../card/downloadCard/DownloadCard.tsx         | 15 ++++++++++++++-
 src/components/toolTip/ToolTip.module.css      |  2 --
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index a5acb45..673eca5 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.37: Updated DownloadCard to include tooltip and Removed opacity token from Tooltip the fix bug.
   - 2.2.35 & 2.2.36:
     - Bugfix versions.
   - 2.2.34:
diff --git a/package-lock.json b/package-lock.json
index 6f69b21..be0f5e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.32",
+  "version": "2.2.37",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@conduction/components",
-      "version": "2.2.32",
+      "version": "2.2.37",
       "license": "ISC",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -21,7 +21,7 @@
         "react-paginate": "^8.2.0",
         "react-select": "5.8.0",
         "react-tabs": "^6.0.2",
-        "react-tooltip": "^5.23.0"
+        "react-tooltip": "^5.24.0"
       },
       "devDependencies": {
         "@types/node": "^20.9.3",
@@ -14654,9 +14654,9 @@
       }
     },
     "node_modules/react-tooltip": {
-      "version": "5.23.0",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.23.0.tgz",
-      "integrity": "sha512-MYqn6n+Af8NHHDL3zrSqzVSoK2LLqTNFp30CuuHCYlBEf+q88FWfg+8pSO+0GnDvOa5ZaryNDq9sAVQeNhnsgw==",
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.24.0.tgz",
+      "integrity": "sha512-HjstgpOrUwP4eN6mHU4EThpbxVuKO5SvqumRt1aAcPq0ya+pIVVxlwltndtdIIMBJ7w3jnN05vNfcfh2sxE2mQ==",
       "dependencies": {
         "@floating-ui/dom": "^1.0.0",
         "classnames": "^2.3.0"
@@ -28087,9 +28087,9 @@
       }
     },
     "react-tooltip": {
-      "version": "5.23.0",
-      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.23.0.tgz",
-      "integrity": "sha512-MYqn6n+Af8NHHDL3zrSqzVSoK2LLqTNFp30CuuHCYlBEf+q88FWfg+8pSO+0GnDvOa5ZaryNDq9sAVQeNhnsgw==",
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.24.0.tgz",
+      "integrity": "sha512-HjstgpOrUwP4eN6mHU4EThpbxVuKO5SvqumRt1aAcPq0ya+pIVVxlwltndtdIIMBJ7w3jnN05vNfcfh2sxE2mQ==",
       "requires": {
         "@floating-ui/dom": "^1.0.0",
         "classnames": "^2.3.0"
diff --git a/package.json b/package.json
index 0b7f52f..302702a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.36",
+  "version": "2.2.37",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "react-paginate": "^8.2.0",
     "react-select": "5.8.0",
     "react-tabs": "^6.0.2",
-    "react-tooltip": "^5.23.0"
+    "react-tooltip": "^5.24.0"
   },
   "devDependencies": {
     "@types/node": "^20.9.3",
diff --git a/src/components/card/downloadCard/DownloadCard.tsx b/src/components/card/downloadCard/DownloadCard.tsx
index f4f6db8..7c967fc 100644
--- a/src/components/card/downloadCard/DownloadCard.tsx
+++ b/src/components/card/downloadCard/DownloadCard.tsx
@@ -20,6 +20,10 @@ interface DownloadCardProps {
   label: string;
   size: string;
   type: string;
+  labelTooltip?: {
+    id: string;
+    tooltip: string;
+  };
   icon?: JSX.Element;
   layoutClassName?: string;
   handleClick: () => any;
@@ -30,6 +34,7 @@ export const DownloadCard = ({
   label,
   size,
   type,
+  labelTooltip,
   layoutClassName,
   handleClick,
 }: DownloadCardProps): JSX.Element => {
@@ -76,7 +81,15 @@ export const DownloadCard = ({
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
       <div className={styles.content}>
-        <Heading3 className={styles.title}>{label}</Heading3>
+        <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
+
+        <Heading3
+          data-tooltip-id={labelTooltip && labelTooltip.id}
+          data-tooltip-content={labelTooltip && labelTooltip.tooltip}
+          className={styles.title}
+        >
+          {label}
+        </Heading3>
 
         <div>
           ({_.toUpper(type)}
diff --git a/src/components/toolTip/ToolTip.module.css b/src/components/toolTip/ToolTip.module.css
index f310e97..8953b3c 100644
--- a/src/components/toolTip/ToolTip.module.css
+++ b/src/components/toolTip/ToolTip.module.css
@@ -12,7 +12,6 @@
   --conduction-tooltip-border-style: unset;
   --conduction-tooltip-border-radius: 0px;
 
-  --conduction-tooltip-opacity: 1;
   --conduction-tooltip-z-index: 9999;
 }
 
@@ -30,6 +29,5 @@
   border-style: var(--conduction-tooltip-border-style);
   border-radius: var(--conduction-tooltip-border-radius) !important;
 
-  opacity: var(--conduction-tooltip-opacity);
   z-index: var(--conduction-tooltip-z-index);
 }

From 85e8a74046d2d7e5c59b5156a45abce16d71e85f Mon Sep 17 00:00:00 2001
From: Remko Huisman <43807324+remko48@users.noreply.github.com>
Date: Wed, 29 Nov 2023 12:10:02 +0100
Subject: [PATCH 09/13] Rename checkbox.tsx to Checkbox.tsx

---
 src/components/formFields/checkbox/{checkbox.tsx => Checkbox.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/formFields/checkbox/{checkbox.tsx => Checkbox.tsx} (100%)

diff --git a/src/components/formFields/checkbox/checkbox.tsx b/src/components/formFields/checkbox/Checkbox.tsx
similarity index 100%
rename from src/components/formFields/checkbox/checkbox.tsx
rename to src/components/formFields/checkbox/Checkbox.tsx

From b8d80c749aaea9caeb7866b4d33f4bae9a710450 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Wed, 29 Nov 2023 12:16:58 +0100
Subject: [PATCH 10/13] downloadcard bugfix

---
 README.md                                         | 1 +
 package.json                                      | 2 +-
 src/components/card/downloadCard/DownloadCard.tsx | 2 --
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 673eca5..b716181 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.38: Updated DownloadCard to show only one icon.
   - 2.2.37: Updated DownloadCard to include tooltip and Removed opacity token from Tooltip the fix bug.
   - 2.2.35 & 2.2.36:
     - Bugfix versions.
diff --git a/package.json b/package.json
index 302702a..5f0c45a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.37",
+  "version": "2.2.38",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/card/downloadCard/DownloadCard.tsx b/src/components/card/downloadCard/DownloadCard.tsx
index 7c967fc..468c5e4 100644
--- a/src/components/card/downloadCard/DownloadCard.tsx
+++ b/src/components/card/downloadCard/DownloadCard.tsx
@@ -81,8 +81,6 @@ export const DownloadCard = ({
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
       <div className={styles.content}>
-        <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
-
         <Heading3
           data-tooltip-id={labelTooltip && labelTooltip.id}
           data-tooltip-content={labelTooltip && labelTooltip.tooltip}

From 6de83f82bab417f0f557fe57ce9f7364b1e17e02 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Fri, 1 Dec 2023 15:23:40 +0100
Subject: [PATCH 11/13] updated topnav and logo

---
 README.md                                     |  3 +++
 package.json                                  |  2 +-
 src/components/logo/Logo.module.css           | 12 ++++++++-
 src/components/logo/Logo.tsx                  |  2 +-
 .../primaryTopNav/PrimaryTopNav.module.css    | 26 ++++++++++++++++---
 .../topNav/primaryTopNav/PrimaryTopNav.tsx    | 16 ++++++++----
 6 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index b716181..42306a9 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,9 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.39:
+    - Updated PrimaryTopNav component to include tooltip and better dropdown.
+    - Updated Logo component to have navbar option.
   - 2.2.38: Updated DownloadCard to show only one icon.
   - 2.2.37: Updated DownloadCard to include tooltip and Removed opacity token from Tooltip the fix bug.
   - 2.2.35 & 2.2.36:
diff --git a/package.json b/package.json
index 5f0c45a..bc05a67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.38",
+  "version": "2.2.39",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/logo/Logo.module.css b/src/components/logo/Logo.module.css
index 0f87a5b..8746312 100644
--- a/src/components/logo/Logo.module.css
+++ b/src/components/logo/Logo.module.css
@@ -5,7 +5,11 @@
 
   --conduction-logo-footer-inline-size: 330px;
   --conduction-logo-footer-block-size: 60px;
-  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+  --conduction-logo-footer-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
+
+  --conduction-logo-navbar-inline-size: 150px;
+  --conduction-logo-navbar-block-size: 40px;
+  --conduction-logo-navbar-background-image: url("https://raw.githubusercontent.com/OpenCatalogi/web-app/df1e0533081d780c05b1d0b57ab327d97adcbdc6/pwa/src/assets/svgs/LogoConduction.svg");
 }
 
 .container {
@@ -26,6 +30,12 @@
   background-image: var(--conduction-logo-footer-background-image);
 }
 
+.container.navbar {
+  inline-size: var(--conduction-logo-navbar-inline-size);
+  block-size: var(--conduction-logo-navbar-block-size);
+  background-image: var(--conduction-logo-navbar-background-image);
+}
+
 .container.clickable:hover {
   cursor: pointer;
 }
diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx
index 470b321..bd5a047 100644
--- a/src/components/logo/Logo.tsx
+++ b/src/components/logo/Logo.tsx
@@ -3,7 +3,7 @@ import * as styles from "./Logo.module.css";
 import clsx from "clsx";
 
 interface LogoProps {
-  variant?: "header" | "footer";
+  variant?: "header" | "footer" | "navbar";
   onClick?: () => any;
   layoutClassName?: string;
 }
diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
index ba76f22..2c564c1 100644
--- a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
+++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
@@ -4,7 +4,7 @@
   --conduction-primary-top-nav-toggle-icon-size: 24px;
   --conduction-primary-top-nav-mobile-logo-padding: 18px;
 
-  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-primary-top-nav-item-padding: 18px;
   --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
   /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
 
@@ -103,6 +103,7 @@
 .current:hover {
   box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
 }
+
 .current:hover > .currentLink {
   color: var(--conduction-primary-top-nav-hover-color) !important;
 }
@@ -111,8 +112,12 @@
   color: var(--conduction-primary-top-nav-current-color) !important;
 }
 
+.currentLink svg path {
+  fill: var(--conduction-primary-top-nav-current-color) !important;
+}
+
 .mobileLink {
-  margin-block-end: var(--skeleton-size-md);
+  margin-block-end: 18px;
 }
 .primary .link {
   text-decoration: none;
@@ -128,10 +133,18 @@
   color: var(--conduction-primary-top-nav-color);
 }
 
+.primary .link:not(.currentLink) svg path {
+  fill: var(--conduction-primary-top-nav-color);
+}
+
 .primary .li:hover .link {
   color: var(--conduction-primary-top-nav-hover-color);
 }
 
+.primary .li:hover svg path {
+  fill: var(--conduction-primary-top-nav-hover-color);
+}
+
 .link > * {
   margin-inline-end: 8px;
 }
@@ -146,6 +159,13 @@
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
 }
 
+.dropdownOverflow {
+  display: none;
+  max-height: 430px;
+  overflow-y: scroll;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
 .dropdown.isOpen {
   display: block;
 }
@@ -168,7 +188,7 @@
 }
 
 .dropdown > li {
-  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-start: 18px;
 }
 
 .toggleIcon {
diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
index 02ba3b2..150e2d5 100644
--- a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
+++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
@@ -9,6 +9,7 @@ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
+  showToolTip?: boolean;
   current?: boolean | ICurrentItemJSONFormat;
 }
 
@@ -57,11 +58,12 @@ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
 
 export interface TopNavProps {
   items: ITopNavItem[];
+  tooltipId: string;
   mobileLogo?: JSX.Element;
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
 
@@ -103,20 +105,24 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
                   current && styles.currentLink,
                 )}
               >
-                {icon}
+                {icon && icon}
                 {label}{" "}
                 {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
               </Link>
 
               {subItems && (
-                <ul className={styles.dropdown}>
-                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
+                <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
+                  {subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
                       onClick={() => handleSubItemClick(handleClick)}
                     >
-                      <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
+                      <Link
+                        data-tooltip-id={showToolTip === true ? tooltipId : ""}
+                        data-tooltip-content={showToolTip === true ? label : ""}
+                        className={clsx(styles.link, styles.label, current && styles.currentLink)}
+                      >
                         {icon}
                         {label}
                       </Link>

From 6dac33beb0196d4bd79cefc0a5eb34f7b9e0803a Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 5 Dec 2023 09:52:05 +0100
Subject: [PATCH 12/13] Updated topnav

---
 README.md                                            |  1 +
 package.json                                         |  2 +-
 .../topNav/primaryTopNav/PrimaryTopNav.module.css    |  2 ++
 .../topNav/primaryTopNav/PrimaryTopNav.tsx           | 12 +++---------
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 42306a9..d269001 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.40: Removed tooltip from PrimaryTopNav component and updated dropdown.
   - 2.2.39:
     - Updated PrimaryTopNav component to include tooltip and better dropdown.
     - Updated Logo component to have navbar option.
diff --git a/package.json b/package.json
index bc05a67..bcd7ddd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.39",
+  "version": "2.2.40",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
index 2c564c1..525f07c 100644
--- a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
+++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css
@@ -157,6 +157,8 @@
   display: none;
   list-style-type: none;
   background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+  width: fit-content;
+  max-width: 200px;
 }
 
 .dropdownOverflow {
diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
index 150e2d5..8076560 100644
--- a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
+++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx
@@ -9,7 +9,6 @@ import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
-  showToolTip?: boolean;
   current?: boolean | ICurrentItemJSONFormat;
 }
 
@@ -58,12 +57,11 @@ export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
 
 export interface TopNavProps {
   items: ITopNavItem[];
-  tooltipId: string;
   mobileLogo?: JSX.Element;
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }: TopNavProps): JSX.Element => {
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
 
@@ -112,17 +110,13 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName, tooltipId }:
 
               {subItems && (
                 <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
-                  {subItems.map(({ label, icon, current, handleClick, showToolTip }, idx) => (
+                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
                       onClick={() => handleSubItemClick(handleClick)}
                     >
-                      <Link
-                        data-tooltip-id={showToolTip === true ? tooltipId : ""}
-                        data-tooltip-content={showToolTip === true ? label : ""}
-                        className={clsx(styles.link, styles.label, current && styles.currentLink)}
-                      >
+                      <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
                         {icon}
                         {label}
                       </Link>

From 2c584f36472a03ee3186cdc09d1806aa0fa4839e Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 5 Dec 2023 11:54:20 +0100
Subject: [PATCH 13/13] Updated download card

---
 README.md                                         | 4 +++-
 src/components/card/downloadCard/DownloadCard.tsx | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index d269001..35009f7 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,9 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
-  - 2.2.40: Removed tooltip from PrimaryTopNav component and updated dropdown.
+  - 2.2.40:
+    - Updated DownloadCard to only accept fontawesome icons.
+    - Removed tooltip from PrimaryTopNav component and updated dropdown.
   - 2.2.39:
     - Updated PrimaryTopNav component to include tooltip and better dropdown.
     - Updated Logo component to have navbar option.
diff --git a/src/components/card/downloadCard/DownloadCard.tsx b/src/components/card/downloadCard/DownloadCard.tsx
index 468c5e4..fa3efe7 100644
--- a/src/components/card/downloadCard/DownloadCard.tsx
+++ b/src/components/card/downloadCard/DownloadCard.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  IconDefinition,
   faDatabase,
   faDownload,
   faFileAudio,
@@ -24,7 +25,7 @@ interface DownloadCardProps {
     id: string;
     tooltip: string;
   };
-  icon?: JSX.Element;
+  icon?: IconDefinition;
   layoutClassName?: string;
   handleClick: () => any;
 }
@@ -79,7 +80,7 @@ export const DownloadCard = ({
 
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
-      <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
+      <div className={styles.icon}>{<FontAwesomeIcon icon={icon ?? getIconFromType(type)} />}</div>
       <div className={styles.content}>
         <Heading3
           data-tooltip-id={labelTooltip && labelTooltip.id}