Development to main, week 48

README.md

@@ -4,6 +4,20 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 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.
+  - 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.
+  - 2.2.34:
+    - Added select options grouping logic.
+  - 2.2.33:
+    - Refactored DownloadCard.
   - 2.2.32: Added more tokens to DownloadCard.
   - 2.2.31:
     - Added custom content to NotificationPopUp.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.32",
+  "version": "2.2.40",
   "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": {
@@ -39,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",

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,36 +20,44 @@
 }
 
 .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);
   padding-block-end: var(--conduction-download-card-padding-block-end);
 }
 
 .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;
 }

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,
@@ -20,7 +21,11 @@ interface DownloadCardProps {
   label: string;
   size: string;
   type: string;
-  icon?: JSX.Element;
+  labelTooltip?: {
+    id: string;
+    tooltip: string;
+  };
+  icon?: IconDefinition;
   layoutClassName?: string;
   handleClick: () => any;
 }
@@ -30,6 +35,7 @@ export const DownloadCard = ({
   label,
   size,
   type,
+  labelTooltip,
   layoutClassName,
   handleClick,
 }: DownloadCardProps): JSX.Element => {
@@ -74,18 +80,23 @@ export const DownloadCard = ({
 
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
+      <div className={styles.icon}>{<FontAwesomeIcon icon={icon ?? getIconFromType(type)} />}</div>
       <div className={styles.content}>
-        <div className={styles.icon}>{icon ?? <FontAwesomeIcon icon={getIconFromType(type)} />}</div>
-
-        <Heading3 className={styles.title}>{label}</Heading3>
+        <Heading3
+          data-tooltip-id={labelTooltip && labelTooltip.id}
+          data-tooltip-content={labelTooltip && labelTooltip.tooltip}
+          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>

src/components/formFields/checkbox/checkbox.tsx → 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;

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";

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);
+}

src/components/formFields/select/select.tsx

@@ -2,14 +2,17 @@ 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";
 
+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;
@@ -103,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} />}
           </>
@@ -148,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} />}
           </>
@@ -193,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} />}
           </>
@@ -201,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>;
+};

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;
 }

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;
 }

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;

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);
 }