@conduction/components 2.2.31 → 2.2.34

package/.prettierrc

@@ -1,30 +1,30 @@
-{
-  "overrides": [
-    {
-      "files": ["*.json"],
-      "options": {
-        "parser": "json",
-        "printWidth": 120,
-        "tabWidth": 2
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "options": {
-        "parser": "typescript",
-        "printWidth": 120,
-        "trailingComma": "all",
-        "tabWidth": 2,
-        "singleQuote": false
-      }
-    },
-    {
-      "files": ["*.css", "*.scss"],
-      "options": {
-        "parser": "css",
-        "tabWidth": 2,
-        "printWidth": 180
-      }
-    }
-  ]
-}
+{
+  "overrides": [
+    {
+      "files": ["*.json"],
+      "options": {
+        "parser": "json",
+        "printWidth": 120,
+        "tabWidth": 2
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "options": {
+        "parser": "typescript",
+        "printWidth": 120,
+        "trailingComma": "all",
+        "tabWidth": 2,
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.css", "*.scss"],
+      "options": {
+        "parser": "css",
+        "tabWidth": 2,
+        "printWidth": 180
+      }
+    }
+  ]
+}

package/README.md

@@ -4,6 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 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.
     - Refactored DownloadCard to NLDS.

package/lib/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/lib/components/card/downloadCard/DownloadCard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./DownloadCard.module.css";
-import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
+import _ from "lodash";
 import clsx from "clsx";
+import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDatabase, faDownload, faFileAudio, faFileCsv, faFileImage, faFilePdf, faFileVideo, faFileWord, faFileZipper, } from "@fortawesome/free-solid-svg-icons";
-import _ from "lodash";
 export const DownloadCard = ({ icon, label, size, type, layoutClassName, handleClick, }) => {
     const onClick = (e) => {
         e.preventDefault();
@@ -43,5 +43,5 @@ export const DownloadCard = ({ icon, label, size, type, layoutClassName, handleC
                 return faDatabase;
         }
     };
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon ?? _jsx(FontAwesomeIcon, { icon: getIconFromType(type) }) }), _jsx(Heading3, { className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size} kb`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsx("div", { className: styles.icon, children: icon ?? _jsx(FontAwesomeIcon, { icon: getIconFromType(type) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Heading3, { className: styles.title, children: label }), _jsxs("div", { children: ["(", _.toUpper(type), size && `, ${size}kB`, ")"] })] }), _jsxs(Link, { className: styles.link, href: "", onClick: (e) => onClick(e), children: [_jsx(FontAwesomeIcon, { className: styles.icon, icon: faDownload }), " Download"] })] }));
 };

package/lib/components/card/downloadCard/DownloadCard.module.css

@@ -1,41 +1,63 @@
 :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;
   /* --conduction-download-card-title-font-family: ; */
   --conduction-download-card-title-margin-inline-end: var(--skeleton-size-sm);
 
-  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-download-card-border-width: 1px;
+  --conduction-download-card-border-style: solid;
+  --conduction-download-card-border-color: var(--skeleton-color-grey-2);
+  --conduction-download-card-border-radius: var(--skeleton-border-radius-md);
+
+  --conduction-download-card-padding-inline-end: 14px;
+  --conduction-download-card-padding-inline-start: 14px;
+  --conduction-download-card-padding-block-end: 14px;
+  --conduction-download-card-padding-block-start: 14px;
+
   --conduction-download-card-icon-gap: 8px;
-  --conduction-download-card-padding: 14px;
 }
 
 .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: var(--conduction-download-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-  padding: var(--conduction-download-card-padding);
+  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;
 }

package/lib/components/card/infoCard/InfoCard.module.css

@@ -1,26 +1,26 @@
-.container {
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > * {
-  display: block;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.container > .title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-  color: var(--skeleton-color-black);
-}
-
-.content {
-  color: var(--skeleton-color-black);
-}
+.container {
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.container > .title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+  color: var(--skeleton-color-black);
+}
+
+.content {
+  color: var(--skeleton-color-black);
+}

package/lib/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/lib/components/formFields/date/Date.module.css

@@ -1,12 +1,12 @@
-.container {
-  display: flex;
-}
-
-.calendar {
-  display: flex;
-}
-
-.calendar > div::before,
-.calendar > div::after {
-  display: none;
-}
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

package/lib/components/formFields/select/select.d.ts

@@ -2,12 +2,17 @@
 import { MenuPlacement } from "react-select";
 import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
+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;

package/lib/components/formFields/select/select.js

@@ -53,7 +53,7 @@ export const SelectMultiple = ({ id, name, options, errors, control, validation,
         setAttributes();
     }, []);
     return (_jsx(Controller, { control, name, defaultValue, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, options, onChange, errors, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, options, onChange, errors, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", formatGroupLabel: (group) => _jsx(GroupLabel, { group }) }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
         } }));
 };
 export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
@@ -61,7 +61,7 @@ export const SelectCreate = ({ id, name, options, errors, control, validation, d
         setAttributes();
     }, []);
     return (_jsx(Controller, { control, name, defaultValue, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, options, onChange, errors, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, options, onChange, errors, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, formatGroupLabel: (group) => _jsx(GroupLabel, { group }) }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
         } }));
 };
 export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
@@ -69,6 +69,11 @@ export const SelectSingle = ({ id, name, options, errors, control, validation, i
         setAttributes();
     }, []);
     return (_jsx(Controller, { control, name, defaultValue, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, options, onChange, errors, isClearable, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { "aria-label": ariaLabel, inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, options, onChange, errors, isClearable, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: selectStyles, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options...", formatGroupLabel: (group) => _jsx(GroupLabel, { group }) }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name]?.message })] }));
         } }));
 };
+const GroupLabel = ({ group }) => {
+    if (!group.label)
+        return _jsx(_Fragment, {});
+    return _jsx("span", { className: styles.groupLabel, children: group.label });
+};

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

package/lib/components/imageDivider/imageDivider.module.css

@@ -1,5 +1,5 @@
-.divider {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-}
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

package/lib/components/metaIcon/MetaIcon.module.css

@@ -1,29 +1,29 @@
-:root {
-  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
-  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.icon {
-  color: var(--conduction-meta-icon-icon-color);
-  height: var(--conduction-meta-icon-icon-size);
-  width: var(--conduction-meta-icon-icon-size);
-}
-
-.icon > svg {
-  height: 100%;
-  width: 100%;
-}
-
-.value {
-  font-weight: var(--skeleton-font-weight-bold);
-}
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}

package/lib/components/notificationPopUp/NotificationPopUp.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface NotificationPopUpProps {
     title: string;
-    description?: string | JSX.Element;
+    description?: string;
     customContent?: JSX.Element;
     isVisible: boolean;
     hide: () => void;

package/lib/components/quoteWrapper/QuoteWrapper.module.css

@@ -1,12 +1,12 @@
-:root {
-  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
-  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
-  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
-}
-
-.container {
-  border-left-width: var(--conduction-quote-wrapper-border-width);
-  border-left-style: solid;
-  border-left-color: var(--conduction-quote-wrapper-border-color);
-  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
-}
+:root {
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
+}
+
+.container {
+  border-left-width: var(--conduction-quote-wrapper-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
+}

package/lib/components/tag/Tag.module.css

@@ -1,44 +1,44 @@
-:root {
-  --conduction-tag-font-size: var(--skeleton-font-size-sm);
-  --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-background-color: var(--skeleton-color-grey-1);
-  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
-  --conduction-tag-padding: var(--skeleton-size-xs);
-  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
-  --conduction-tag-remove-background-color: #ffbdad;
-  --conduction-tag-remove-text-color: #e44f2a;
-}
-
-.tag {
-  display: inline-block;
-  width: fit-content;
-  font-size: var(--conduction-tag-font-size);
-  color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-background-color);
-  padding-inline-start: var(--conduction-tag-padding);
-  padding-inline-end: var(--conduction-tag-padding);
-  padding-block-start: var(--conduction-tag-padding);
-  padding-block-end: var(--conduction-tag-padding);
-}
-
-.tag > *:not(:last-child) {
-  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
-}
-
-.clickable :hover {
-  cursor: pointer;
-}
-
-.remove {
-  padding-inline-end: 4px;
-}
-
-.tagContainer {
-  display: flex;
-}
-
-.removeTag:hover {
-  cursor: pointer;
-  background-color: var(--conduction-tag-remove-background-color);
-  color: var(--conduction-tag-remove-text-color);
-}
+:root {
+  --conduction-tag-font-size: var(--skeleton-font-size-sm);
+  --conduction-tag-color: var(--skeleton-black);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
+  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
+  --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
+  --conduction-tag-remove-background-color: #ffbdad;
+  --conduction-tag-remove-text-color: #e44f2a;
+}
+
+.tag {
+  display: inline-block;
+  width: fit-content;
+  font-size: var(--conduction-tag-font-size);
+  color: var(--conduction-tag-color);
+  background-color: var(--conduction-tag-background-color);
+  padding-inline-start: var(--conduction-tag-padding);
+  padding-inline-end: var(--conduction-tag-padding);
+  padding-block-start: var(--conduction-tag-padding);
+  padding-block-end: var(--conduction-tag-padding);
+}
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}
+
+.remove {
+  padding-inline-end: 4px;
+}
+
+.tagContainer {
+  display: flex;
+}
+
+.removeTag:hover {
+  cursor: pointer;
+  background-color: var(--conduction-tag-remove-background-color);
+  color: var(--conduction-tag-remove-text-color);
+}

package/package.json

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

package/src/components/badgeCounter/BadgeCounter.module.css

@@ -1,27 +1,27 @@
-:root {
-  --conduction-badge-counter-color: hsl(0 0% 0%);
-  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
-  --conduction-badge-counter-height: var(--skeleton-size-md);
-  --conduction-badge-counter-width: var(--skeleton-size-md);
-  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
-  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
-}
-
-.content {
-  display: flex;
-}
-
-.badge {
-  height: var(--conduction-badge-counter-height);
-  width: var(--conduction-badge-counter-width);
-  border-radius: 50%;
-  font-size: var(--conduction-badge-counter-font-size);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background-color: var(--conduction-badge-counter-background-color);
-  color: var(--conduction-badge-counter-color);
-}
-.maxNumber {
-  font-size: var(--conduction-badge-counter-max-number-font-size);
-}
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/src/components/card/downloadCard/DownloadCard.module.css

@@ -1,41 +1,63 @@
 :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;
   /* --conduction-download-card-title-font-family: ; */
   --conduction-download-card-title-margin-inline-end: var(--skeleton-size-sm);
 
-  --conduction-download-card-border: 1px solid var(--skeleton-color-grey-2);
+  --conduction-download-card-border-width: 1px;
+  --conduction-download-card-border-style: solid;
+  --conduction-download-card-border-color: var(--skeleton-color-grey-2);
+  --conduction-download-card-border-radius: var(--skeleton-border-radius-md);
+
+  --conduction-download-card-padding-inline-end: 14px;
+  --conduction-download-card-padding-inline-start: 14px;
+  --conduction-download-card-padding-block-end: 14px;
+  --conduction-download-card-padding-block-start: 14px;
+
   --conduction-download-card-icon-gap: 8px;
-  --conduction-download-card-padding: 14px;
 }
 
 .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: var(--conduction-download-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-  padding: var(--conduction-download-card-padding);
+  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;
 }

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as styles from "./DownloadCard.module.css";
-import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
+import _ from "lodash";
 import clsx from "clsx";
+import { Heading3, Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faDatabase,
@@ -14,7 +15,6 @@ import {
   faFileWord,
   faFileZipper,
 } from "@fortawesome/free-solid-svg-icons";
-import _ from "lodash";
 
 interface DownloadCardProps {
   label: string;
@@ -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>

package/src/components/card/infoCard/InfoCard.module.css

@@ -1,26 +1,26 @@
-.container {
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-border-radius-md);
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > * {
-  display: block;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.container > .title {
-  font-weight: var(--skeleton-font-weight-bold);
-  font-size: var(--skeleton-font-size-xl);
-  color: var(--skeleton-color-black);
-}
-
-.content {
-  color: var(--skeleton-color-black);
-}
+.container {
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-border-radius-md);
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > * {
+  display: block;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.container > .title {
+  font-weight: var(--skeleton-font-weight-bold);
+  font-size: var(--skeleton-font-size-xl);
+  color: var(--skeleton-color-black);
+}
+
+.content {
+  color: var(--skeleton-color-black);
+}

package/src/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/src/components/formFields/date/Date.module.css

@@ -1,12 +1,12 @@
-.container {
-  display: flex;
-}
-
-.calendar {
-  display: flex;
-}
-
-.calendar > div::before,
-.calendar > div::after {
-  display: none;
-}
+.container {
+  display: flex;
+}
+
+.calendar {
+  display: flex;
+}
+
+.calendar > div::before,
+.calendar > div::after {
+  display: none;
+}

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

package/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>;
+};

package/src/components/imageDivider/imageDivider.module.css

@@ -1,5 +1,5 @@
-.divider {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-}
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

package/src/components/metaIcon/MetaIcon.module.css

@@ -1,29 +1,29 @@
-:root {
-  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
-  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.icon {
-  color: var(--conduction-meta-icon-icon-color);
-  height: var(--conduction-meta-icon-icon-size);
-  width: var(--conduction-meta-icon-icon-size);
-}
-
-.icon > svg {
-  height: 100%;
-  width: 100%;
-}
-
-.value {
-  font-weight: var(--skeleton-font-weight-bold);
-}
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}

package/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;

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -1,12 +1,12 @@
-:root {
-  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
-  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
-  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
-}
-
-.container {
-  border-left-width: var(--conduction-quote-wrapper-border-width);
-  border-left-style: solid;
-  border-left-color: var(--conduction-quote-wrapper-border-color);
-  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
-}
+:root {
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
+}
+
+.container {
+  border-left-width: var(--conduction-quote-wrapper-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
+}

package/src/components/tag/Tag.module.css

@@ -1,44 +1,44 @@
-:root {
-  --conduction-tag-font-size: var(--skeleton-font-size-sm);
-  --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-background-color: var(--skeleton-color-grey-1);
-  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
-  --conduction-tag-padding: var(--skeleton-size-xs);
-  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
-  --conduction-tag-remove-background-color: #ffbdad;
-  --conduction-tag-remove-text-color: #e44f2a;
-}
-
-.tag {
-  display: inline-block;
-  width: fit-content;
-  font-size: var(--conduction-tag-font-size);
-  color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-background-color);
-  padding-inline-start: var(--conduction-tag-padding);
-  padding-inline-end: var(--conduction-tag-padding);
-  padding-block-start: var(--conduction-tag-padding);
-  padding-block-end: var(--conduction-tag-padding);
-}
-
-.tag > *:not(:last-child) {
-  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
-}
-
-.clickable :hover {
-  cursor: pointer;
-}
-
-.remove {
-  padding-inline-end: 4px;
-}
-
-.tagContainer {
-  display: flex;
-}
-
-.removeTag:hover {
-  cursor: pointer;
-  background-color: var(--conduction-tag-remove-background-color);
-  color: var(--conduction-tag-remove-text-color);
-}
+:root {
+  --conduction-tag-font-size: var(--skeleton-font-size-sm);
+  --conduction-tag-color: var(--skeleton-black);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
+  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
+  --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
+  --conduction-tag-remove-background-color: #ffbdad;
+  --conduction-tag-remove-text-color: #e44f2a;
+}
+
+.tag {
+  display: inline-block;
+  width: fit-content;
+  font-size: var(--conduction-tag-font-size);
+  color: var(--conduction-tag-color);
+  background-color: var(--conduction-tag-background-color);
+  padding-inline-start: var(--conduction-tag-padding);
+  padding-inline-end: var(--conduction-tag-padding);
+  padding-block-start: var(--conduction-tag-padding);
+  padding-block-end: var(--conduction-tag-padding);
+}
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}
+
+.remove {
+  padding-inline-end: 4px;
+}
+
+.tagContainer {
+  display: flex;
+}
+
+.removeTag:hover {
+  cursor: pointer;
+  background-color: var(--conduction-tag-remove-background-color);
+  color: var(--conduction-tag-remove-text-color);
+}

package/src/components/topNav/index.ts

@@ -1,4 +1,4 @@
-import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
-import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
-
-export { PrimaryTopNav, SecondaryTopNav };
+import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
+import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
+
+export { PrimaryTopNav, SecondaryTopNav };

package/src/custom.d.ts

@@ -1,4 +1,4 @@
-declare module "*.svg";
-declare module "*.jpg";
-declare module "*.png";
-declare module "*.module.css";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.module.css";

package/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,15 +12,7 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": [
-    "copy-files"
-  ],
-  "include": [
-    "src",
-    "src/**/*.css"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/__tests__/*"
-  ]
-}
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["**/__tests__/*"]
+}