@conduction/components 2.1.36 → 2.1.38

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.38: Added Pagination.
+  - 2.1.37: Added more design-tokens to all select options.
   - 2.1.36:
     - Updated CardWrapper.
     - Added CardHeader.

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface PaginationProps {
+    totalPages: number;
+    currentPage: number;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    layoutClassName?: string;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};

package/lib/components/Pagination/Pagination.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Pagination.module.css";
+import clsx from "clsx";
+import ReactPaginate from "react-paginate";
+import Button from "@gemeente-denhaag/button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+export const Pagination = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
+    if (totalPages < 1)
+        return _jsx(_Fragment, {}); // no pages available
+    return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
+};

package/lib/components/Pagination/Pagination.module.css

@@ -0,0 +1,91 @@
+:root {
+  --conduction-pagination-container-background-color: unset;
+  --conduction-pagination-container-padding-inline-start: 0px;
+  --conduction-pagination-container-padding-inline-end: 0px;
+  --conduction-pagination-container-padding-block-start: 0px;
+  --conduction-pagination-container-padding-block-end: 0px;
+
+  --conduction-pagination-item-gap: 8px;
+  --conduction-pagination-item-color: #000000;
+  --conduction-pagination-item-background-color: #ffffff;
+  --conduction-pagination-item-border-radius: 4px;
+  --conduction-pagination-item-padding-inline-start: 8px;
+  --conduction-pagination-item-padding-inline-end: 8px;
+  --conduction-pagination-item-padding-block-start: 8px;
+  --conduction-pagination-item-padding-block-end: 8px;
+
+  --conduction-pagination-navigation-button-padding-inline-start: 8px;
+  --conduction-pagination-navigation-button-padding-inline-end: 8px;
+  --conduction-pagination-navigation-button-padding-block-start: 0px;
+  --conduction-pagination-navigation-button-padding-block-end: 0px;
+
+  --conduction-pagination-disabled-color: #d1d1d1;
+  --conduction-pagination-disabled-background-color: #fefefe;
+
+  --conduction-pagination-current-page-background-color: #4376fc;
+  --conduction-pagination-current-page-color: #ffffff;
+  --conduction-pagination-current-page-font-weight: bold;
+  --conduction-pagination-current-page-text-decoration: unset;
+
+  --conduction-pagination-page-hover-color: #4376fc;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style-type: none;
+  gap: var(--conduction-pagination-item-gap);
+  background-color: var(--conduction-pagination-container-background-color);
+  padding-inline-start: var(--conduction-pagination-container-padding-inline-start);
+  padding-inline-end: var(--conduction-pagination-container-padding-inline-end);
+  padding-block-start: var(--conduction-pagination-container-padding-block-start);
+  padding-block-end: var(--conduction-pagination-container-padding-block-end);
+  user-select: none;
+}
+
+.container > li > a {
+  color: var(--conduction-pagination-item-color);
+  background-color: var(--conduction-pagination-item-background-color);
+  border-radius: var(--conduction-pagination-item-border-radius);
+  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
+  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
+  padding-block-start: var(--conduction-pagination-item-padding-block-start);
+  padding-block-end: var(--conduction-pagination-item-padding-block-end);
+}
+
+.button {
+  pointer-events: none;
+}
+
+.container > li.currentPage > a {
+  color: var(--conduction-pagination-current-page-color);
+  background-color: var(--conduction-pagination-current-page-background-color);
+  font-weight: var(--conduction-pagination-current-page-font-weight);
+  text-decoration: var(--conduction-pagination-current-page-text-decoration);
+}
+
+.disabled:hover,
+.currentPage:hover {
+  cursor: not-allowed;
+}
+
+.container > li.disabled > a {
+  color: var(--conduction-pagination-disabled-color);
+  background-color: var(--conduction-pagination-disabled-background-color);
+}
+
+.container > li:hover:not(.disabled):not(.currentPage) {
+  cursor: pointer;
+}
+
+.container > li:hover:not(.disabled):not(.currentPage) > a {
+  color: var(--conduction-pagination-page-hover-color);
+}
+
+.button {
+  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
+  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
+  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
+  padding-block-end: var(--conduction-pagination-navigation-button-padding-block-end) !important;
+}

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

@@ -5,18 +5,54 @@ import ReactSelect from "react-select";
 import CreatableSelect from "react-select/creatable";
 import clsx from "clsx";
 import { ErrorMessage } from "../errorMessage/ErrorMessage";
+const selectStyles = {
+    menuPortal: (base) => ({ ...base, zIndex: 100 }),
+    option: (base) => ({
+        ...base,
+        fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
+        backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+        "&:hover": {
+            backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
+            color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
+            fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
+        },
+    }),
+    placeholder: (base) => ({
+        ...base,
+        fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
+        color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
+    }),
+};
+const selectMultiStyles = {
+    menuPortal: (base) => ({ ...base, zIndex: 100 }),
+    option: (base) => ({
+        ...base,
+        fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
+        backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+        "&:hover": {
+            backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
+            color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
+            fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
+        },
+    }),
+    placeholder: (base) => ({
+        ...base,
+        fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
+        color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
+    }),
+};
 export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { 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: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { 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 })] }));
         } }));
 };
 export const SelectCreate = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { 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: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { 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 })] }));
         } }));
 };
 export const SelectSingle = ({ id, name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { inputId: id, value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, menuPlacement: menuPlacement, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : placeholder ?? "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { 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 })] }));
         } }));
 };

package/lib/components/formFields/select/select.module.css

@@ -9,6 +9,16 @@
     --utrecht-textbox-invalid-border-color,
     var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
   );
+
+  --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
+  /* --conduction-input-select-list-option-background-color: unset; */
+
+  /* --conduction-input-select-list-option-hover-background-color: unset; */
+  /* --conduction-input-select-list-option-hover-color: unset; */
+  /* --conduction-input-select-list-option-font-family: unset; */
+
+  --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
+  --conduction-input-select-placeholder-color: #757575;
 }
 
 .select > div {

package/lib/index.d.ts

@@ -19,8 +19,8 @@ declare const NotificationPopUp: {
     NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
 };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
 import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
+import { Pagination } from "./components/Pagination/Pagination";
 export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/lib/index.js

@@ -12,8 +12,8 @@ import { Tag } from "./components/tag/Tag";
 import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
 import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
+import { Pagination } from "./components/Pagination/Pagination";
 export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.36",
+  "version": "2.1.38",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -43,6 +43,7 @@
     "react": "^18.2.0",
     "react-datepicker": "^4.10.0",
     "react-hook-form": "7.29.0",
+    "react-paginate": "^8.2.0",
     "react-select": "5.3.2",
     "react-tooltip": "^4.2.21"
   },

package/src/components/Pagination/Pagination.module.css

@@ -0,0 +1,91 @@
+:root {
+  --conduction-pagination-container-background-color: unset;
+  --conduction-pagination-container-padding-inline-start: 0px;
+  --conduction-pagination-container-padding-inline-end: 0px;
+  --conduction-pagination-container-padding-block-start: 0px;
+  --conduction-pagination-container-padding-block-end: 0px;
+
+  --conduction-pagination-item-gap: 8px;
+  --conduction-pagination-item-color: #000000;
+  --conduction-pagination-item-background-color: #ffffff;
+  --conduction-pagination-item-border-radius: 4px;
+  --conduction-pagination-item-padding-inline-start: 8px;
+  --conduction-pagination-item-padding-inline-end: 8px;
+  --conduction-pagination-item-padding-block-start: 8px;
+  --conduction-pagination-item-padding-block-end: 8px;
+
+  --conduction-pagination-navigation-button-padding-inline-start: 8px;
+  --conduction-pagination-navigation-button-padding-inline-end: 8px;
+  --conduction-pagination-navigation-button-padding-block-start: 0px;
+  --conduction-pagination-navigation-button-padding-block-end: 0px;
+
+  --conduction-pagination-disabled-color: #d1d1d1;
+  --conduction-pagination-disabled-background-color: #fefefe;
+
+  --conduction-pagination-current-page-background-color: #4376fc;
+  --conduction-pagination-current-page-color: #ffffff;
+  --conduction-pagination-current-page-font-weight: bold;
+  --conduction-pagination-current-page-text-decoration: unset;
+
+  --conduction-pagination-page-hover-color: #4376fc;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style-type: none;
+  gap: var(--conduction-pagination-item-gap);
+  background-color: var(--conduction-pagination-container-background-color);
+  padding-inline-start: var(--conduction-pagination-container-padding-inline-start);
+  padding-inline-end: var(--conduction-pagination-container-padding-inline-end);
+  padding-block-start: var(--conduction-pagination-container-padding-block-start);
+  padding-block-end: var(--conduction-pagination-container-padding-block-end);
+  user-select: none;
+}
+
+.container > li > a {
+  color: var(--conduction-pagination-item-color);
+  background-color: var(--conduction-pagination-item-background-color);
+  border-radius: var(--conduction-pagination-item-border-radius);
+  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
+  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
+  padding-block-start: var(--conduction-pagination-item-padding-block-start);
+  padding-block-end: var(--conduction-pagination-item-padding-block-end);
+}
+
+.button {
+  pointer-events: none;
+}
+
+.container > li.currentPage > a {
+  color: var(--conduction-pagination-current-page-color);
+  background-color: var(--conduction-pagination-current-page-background-color);
+  font-weight: var(--conduction-pagination-current-page-font-weight);
+  text-decoration: var(--conduction-pagination-current-page-text-decoration);
+}
+
+.disabled:hover,
+.currentPage:hover {
+  cursor: not-allowed;
+}
+
+.container > li.disabled > a {
+  color: var(--conduction-pagination-disabled-color);
+  background-color: var(--conduction-pagination-disabled-background-color);
+}
+
+.container > li:hover:not(.disabled):not(.currentPage) {
+  cursor: pointer;
+}
+
+.container > li:hover:not(.disabled):not(.currentPage) > a {
+  color: var(--conduction-pagination-page-hover-color);
+}
+
+.button {
+  padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
+  padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
+  padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;
+  padding-block-end: var(--conduction-pagination-navigation-button-padding-block-end) !important;
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import * as styles from "./Pagination.module.css";
+import clsx from "clsx";
+
+import ReactPaginate from "react-paginate";
+import Button from "@gemeente-denhaag/button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+
+interface PaginationProps {
+  totalPages: number;
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  layoutClassName?: string;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({ totalPages, currentPage, setCurrentPage, layoutClassName }) => {
+  if (totalPages < 1) return <></>; // no pages available
+
+  return (
+    <ReactPaginate
+      className={clsx(styles.container, layoutClassName && layoutClassName)}
+      disabledClassName={styles.disabled}
+      activeClassName={styles.currentPage}
+      onPageChange={(e: any) => setCurrentPage(e.selected + 1)}
+      forcePage={currentPage - 1}
+      pageRangeDisplayed={3}
+      pageCount={totalPages}
+      disableInitialCallback
+      marginPagesDisplayed={2}
+      breakLabel="..."
+      nextLabel={
+        <Button className={styles.button}>
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      }
+      previousLabel={
+        <Button className={styles.button}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      }
+    />
+  );
+};

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
-import { IInputProps } from "../input";
 import { Button } from "@gemeente-denhaag/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
 import { ToolTip } from "../../toolTip/ToolTip";

package/src/components/formFields/select/select.module.css

@@ -9,6 +9,16 @@
     --utrecht-textbox-invalid-border-color,
     var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color)))
   );
+
+  --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
+  /* --conduction-input-select-list-option-background-color: unset; */
+
+  /* --conduction-input-select-list-option-hover-background-color: unset; */
+  /* --conduction-input-select-list-option-hover-color: unset; */
+  /* --conduction-input-select-list-option-font-family: unset; */
+
+  --conduction-input-select-placeholder-font-family: "Noto Sans", Arial, sans-serif;
+  --conduction-input-select-placeholder-color: #757575;
 }
 
 .select > div {

package/src/components/formFields/select/select.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./select.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
-import ReactSelect, { MenuPlacement } from "react-select";
+import ReactSelect, { MenuPlacement, StylesConfig } from "react-select";
 import CreatableSelect from "react-select/creatable";
 import { IReactHookFormProps } from "../types";
 import clsx from "clsx";
@@ -20,6 +20,46 @@ interface ISelectProps {
   placeholder?: string;
 }
 
+const selectStyles: StylesConfig = {
+  menuPortal: (base) => ({ ...base, zIndex: 100 }),
+  option: (base) => ({
+    ...base,
+    fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
+    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+
+    "&:hover": {
+      backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
+      color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
+      fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
+    },
+  }),
+  placeholder: (base) => ({
+    ...base,
+    fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
+    color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
+  }),
+};
+
+const selectMultiStyles: StylesConfig = {
+  menuPortal: (base) => ({ ...base, zIndex: 100 }),
+  option: (base) => ({
+    ...base,
+    fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
+    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+
+    "&:hover": {
+      backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
+      color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
+      fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
+    },
+  }),
+  placeholder: (base) => ({
+    ...base,
+    fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
+    color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
+  }),
+};
+
 export const SelectMultiple = ({
   id,
   name,
@@ -49,7 +89,7 @@ export const SelectMultiple = ({
               {...{ options, onChange, errors }}
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
-              styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+              styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
@@ -90,7 +130,7 @@ export const SelectCreate = ({
               {...{ options, onChange, errors }}
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
-              styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+              styles={selectStyles}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
           </>
@@ -129,7 +169,7 @@ export const SelectSingle = ({
               {...{ options, onChange, errors, isClearable }}
               menuPortalTarget={document.body}
               menuPlacement={menuPlacement}
-              styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+              styles={selectStyles}
               placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."}
             />
             {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}

package/src/index.ts

@@ -34,10 +34,10 @@ import {
 } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
 import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
+import { Pagination } from "./components/Pagination/Pagination";
 
 export {
   InputRadio,

package/src/components/denhaag-wrappers/pagination/Pagination.css

@@ -1,120 +0,0 @@
-.denhaag-pagination {
-  --denhaag-pagination-align: center;
-
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: var(--denhaag-pagination-align);
-}
-
-@media (min-width: 640px) {
-  .denhaag-pagination,
-  .denhaag-pagination--start {
-    --denhaag-pagination-align: flex-start;
-  }
-
-  .denhaag-pagination--center {
-    --denhaag-pagination-align: center;
-  }
-
-  .denhaag-pagination--end {
-    --denhaag-pagination-align: end;
-  }
-}
-
-.denhaag-pagination__links {
-  display: flex;
-  flex-direction: row;
-}
-
-.denhaag-pagination__link {
-  aspect-ratio: 1 / 1;
-  align-items: center;
-  background-color: var(--denhaag-pagination-background-color, transparent);
-  border: 0;
-  border-radius: var(
-    --denhaag-pagination-border-radius,
-    var(--denhaag-border-radius)
-  );
-  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
-  display: flex;
-  height: var(--denhaag-pagination-size);
-  justify-content: center;
-  line-height: 1.5;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  width: var(--denhaag-pagination-size);
-  font-style: normal;
-  font-weight: var(--denhaag-pagination-font-weight);
-  font-size: var(--denhaag-pagination-font-size);
-}
-
-.denhaag-pagination__link:hover,
-.denhaag-pagination__link--hover {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
-  cursor: pointer;
-}
-
-.denhaag-pagination__link:focus,
-.denhaag-pagination__link--focus {
-  outline: var(--denhaag-link-focus-outline);
-  border-radius: 0;
-}
-
-.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
-
-  pointer-events: none;
-}
-
-.denhaag-pagination__link--arrow {
-  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
-  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
-}
-
-[dir="rtl"] .denhaag-pagination__link--arrow {
-  transform: scaleX(-1);
-}
-
-.denhaag-pagination__link + .denhaag-pagination__links,
-.denhaag-pagination__links + .denhaag-pagination__link {
-  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
-  overflow: hidden;
-  pointer-events: none;
-  text-indent: calc(var(--denhaag-pagination-size) * 2);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
-  content: "...";
-  left: calc(50% - 7px);
-  line-height: 0;
-  position: absolute;
-  text-indent: 0;
-  vertical-align: baseline;
-}
-
-.denhaag-pagination__link--current {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
-  --denhaag-pagination-font-weight: var(
-    --denhaag-pagination-link-current-font-weight
-  );
-}
-
-.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(
-    --denhaag-pagination-link-current-disabled-color
-  );
-  --denhaag-pagination-background-color: var(
-    --denhaag-pagination-link-current-disabled-background-color
-  );
-}
-
-.denhaag-pagination .denhaag-icon {
-  font-size: inherit;
-}

package/src/components/denhaag-wrappers/pagination/Pagination.tsx

@@ -1,112 +0,0 @@
-import clsx from "clsx";
-import * as React from "react";
-import "./Pagination.css";
-
-interface PaginationProps {
-  pages: number;
-  currentPage: number;
-  setPage: (page: number) => any;
-}
-
-export const Pagination = ({ pages, currentPage, setPage }: PaginationProps): JSX.Element => {
-  return (
-    <nav className="denhaag-pagination">
-      <PreviousButton previousPage={currentPage > 1 ? currentPage - 1 : undefined} {...{ setPage }} />
-
-      <span className="denhaag-pagination__links" role="group">
-        {Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (
-          <Link key={idx} {...{ page }} current={page === currentPage} {...{ setPage }} />
-        ))}
-      </span>
-
-      <NextButton nextPage={currentPage < pages ? currentPage + 1 : undefined} {...{ setPage }} />
-    </nav>
-  );
-};
-
-interface LinkProps {
-  page: number;
-  setPage: (page: number) => any;
-  current?: boolean;
-}
-
-const Link = ({ page, current, setPage }: LinkProps): JSX.Element => {
-  return (
-    <a
-      aria-current={current && "page"}
-      aria-label={`Page ${page}`}
-      className={clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current")}
-      onClick={() => setPage(page)}
-    >
-      {page}
-    </a>
-  );
-};
-
-interface PreviousButtonProps {
-  setPage: (page: number) => any;
-  previousPage?: number;
-}
-
-const PreviousButton = ({ previousPage, setPage }: PreviousButtonProps): JSX.Element => {
-  return (
-    <a
-      aria-label="Previous page"
-      className={clsx(
-        "denhaag-pagination__link denhaag-pagination__link--arrow",
-        !previousPage && "denhaag-pagination__link--disabled",
-      )}
-      onClick={() => previousPage && setPage(previousPage)}
-      rel="prev"
-    >
-      <svg
-        aria-hidden="true"
-        className="denhaag-icon"
-        fill="none"
-        height="1em"
-        viewBox="0 0 7 12"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z"
-          fill="currentColor"
-        />
-      </svg>
-    </a>
-  );
-};
-
-interface NextButtonProps {
-  setPage: (page: number) => any;
-  nextPage?: number;
-}
-
-const NextButton = ({ nextPage, setPage }: NextButtonProps): JSX.Element => {
-  return (
-    <a
-      aria-label="Next page"
-      className={clsx(
-        "denhaag-pagination__link denhaag-pagination__link--arrow",
-        !nextPage && "denhaag-pagination__link--disabled",
-      )}
-      onClick={() => nextPage && setPage(nextPage)}
-      rel="next"
-    >
-      <svg
-        aria-hidden="true"
-        className="denhaag-icon"
-        fill="none"
-        height="1em"
-        viewBox="0 0 7 12"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z"
-          fill="currentColor"
-        />
-      </svg>
-    </a>
-  );
-};