@conduction/components 1.0.12 → 1.0.13

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

@@ -1,4 +1,5 @@
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+import { SelectSingle, SelectMultiple } from "./select/select";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };

package/lib/components/formFields/index.js

@@ -1,4 +1,5 @@
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+import { SelectSingle, SelectMultiple } from "./select/select";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea, SelectSingle, SelectMultiple, };

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

@@ -1,12 +1,12 @@
 import * as React from "react";
+import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
-export interface ISelectValue {
-    label: string;
-    value: string;
-}
 interface ISelectProps {
-    control: any;
-    options: ISelectValue[];
+    control: Control<FieldValues, any>;
+    options: {
+        label: string;
+        value: string;
+    }[];
     name: string;
     defaultValue?: any;
     disabled?: boolean;

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Control, FieldValues } from "react-hook-form";
+import { IReactHookFormProps } from "./types";
+export interface ISelectValue {
+    label: string;
+    value: string;
+}
+interface ISelectProps {
+    control: Control<FieldValues, any>;
+    options: ISelectValue[];
+    name: string;
+    defaultValue?: any;
+    disabled?: boolean;
+}
+export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
+export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
+export {};

package/lib/components/formFields/select.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./select.module.css";
+import { Controller } from "react-hook-form";
+import ReactSelect from "react-select";
+export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
+    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
+            return (_jsx(ReactSelect, { className: styles.select, isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
+        } }));
+};
+export const SelectSingle = ({ name, options, errors, control, validation, }) => {
+    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
+            return _jsx(ReactSelect, { className: styles.select, ...{ options, onChange, value, errors }, isClearable: true });
+        } }));
+};

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -19,4 +19,4 @@ declare const NotificationPopUp: {
     };
     NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
 };
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };

package/lib/index.js

@@ -2,7 +2,7 @@ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -12,4 +12,4 @@ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
 import { Tag } from "./components/tag/Tag";
 import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -29,7 +29,8 @@
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",
     "react": "^17.0.1",
-    "react-hook-form": "^7.29.0"
+    "react-hook-form": "7.29.0",
+    "react-select": "5.3.2"
   },
   "devDependencies": {
     "@types/node": "^17.0.23",

package/src/components/formFields/index.tsx

@@ -1,5 +1,16 @@
 import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox";
+import { SelectSingle, SelectMultiple } from "./select/select";
 
-export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };
+export {
+  InputText,
+  InputPassword,
+  InputEmail,
+  InputDate,
+  InputNumber,
+  InputCheckbox,
+  Textarea,
+  SelectSingle,
+  SelectMultiple,
+};

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

@@ -0,0 +1,65 @@
+.select > div {
+  background-color: var(
+    --utrecht-textbox-background-color,
+    var(--utrecht-form-input-background-color)
+  );
+  border-width: var(
+    --utrecht-textbox-border-width,
+    var(--utrecht-form-input-border-width)
+  );
+  border-bottom-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))
+  );
+  border-color: var(
+    --utrecht-textbox-border-color,
+    var(--utrecht-form-input-border-color)
+  );
+  border-radius: var(
+    --utrecht-textbox-border-radius,
+    var(--utrecht-form-input-border-radius, 0)
+  );
+  border-style: solid;
+  box-sizing: border-box;
+  color: var(--utrecht-textbox-color, var(--utrecht-form-input-color));
+  font-family: var(
+    --utrecht-textbox-font-family,
+    var(--utrecht-form-input-font-family)
+  );
+  font-size: var(
+    --utrecht-textbox-font-size,
+    var(--utrecht-form-input-font-size, 1em)
+  );
+  max-inline-size: var(
+    --utrecht-textbox-max-inline-size,
+    var(--utrecht-form-input-max-inline-size)
+  );
+
+  padding-block-start: 6.5px;
+  padding-block-end: 6.5px;
+}
+
+.select > div:hover {
+  border-color: var(
+    --utrecht-textbox-border-color,
+    var(--utrecht-form-input-border-color)
+  );
+}
+
+.select > div:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+
+.select > div:focus-within::after {
+  pointer-events: none;
+  border: var(--denhaag-focus-border);
+  border-radius: var(--denhaag-border-radius);
+  bottom: -3px;
+  content: "";
+  display: block;
+  left: -3px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+}

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import * as styles from "./select.module.css";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import ReactSelect from "react-select";
+import { IReactHookFormProps } from "../types";
+
+interface ISelectProps {
+  control: Control<FieldValues, any>;
+  options: { label: string; value: string }[];
+  name: string;
+  defaultValue?: any;
+  disabled?: boolean;
+}
+
+export const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps> = ({
+  name,
+  options,
+  errors,
+  control,
+  validation,
+  defaultValue,
+  disabled,
+}) => {
+  return (
+    <Controller
+      {...{ control, name }}
+      rules={validation}
+      render={({ field: { onChange, value } }) => {
+        return (
+          <ReactSelect
+            className={styles.select}
+            isMulti
+            isDisabled={disabled}
+            {...{ options, value, onChange, errors, defaultValue }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export const SelectSingle: React.FC<ISelectProps & IReactHookFormProps> = ({
+  name,
+  options,
+  errors,
+  control,
+  validation,
+}) => {
+  return (
+    <Controller
+      {...{ control, name }}
+      rules={validation}
+      render={({ field: { onChange, value } }) => {
+        return <ReactSelect className={styles.select} {...{ options, onChange, value, errors }} isClearable />;
+      }}
+    />
+  );
+};

package/src/index.ts

@@ -16,6 +16,8 @@ import {
   InputNumber,
   Textarea,
   InputCheckbox,
+  SelectMultiple,
+  SelectSingle,
 } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
@@ -48,6 +50,8 @@ export {
   InputNumber,
   Textarea,
   InputCheckbox,
+  SelectMultiple,
+  SelectSingle,
   ImageDivider,
   AuthenticatedLogo,
   UnauthenticatedLogo,

package/lib/components/denhaag-wrappers/paginations/Paginations.css

@@ -1,10 +0,0 @@
-.denhaag-pagination {
-  display: flex;
-  justify-content: center;
-  padding: var(--nlportal-space-inline-md);
-}
-
-.denhaag-pagination__link {
-  padding-right: var(--nlportal-space-inline-md);
-  text-decoration: none;
-}

package/lib/components/denhaag-wrappers/paginations/Paginations.d.ts

@@ -1,20 +0,0 @@
-/**
- * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-pagination--default-story
- *
- * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
- *
- * Note: we do not use css modules here due to this component being a wrapper
- */
-import * as React from "react";
-import "./Paginations.css";
-interface PaginationsProps {
-    pages: {
-        ariaLabel: string;
-        label: string;
-        href: string;
-    }[];
-    nextPageHref: string;
-    previousPageHref: string;
-}
-export declare const Paginations: React.FC<PaginationsProps>;
-export {};

package/lib/components/denhaag-wrappers/paginations/Paginations.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./Paginations.css";
-import { Link } from "gatsby";
-export const Paginations = ({ pages, previousPageHref, nextPageHref }) => {
-    return (_jsxs("nav", { className: "denhaag-pagination", children: [_jsx(PreviousPage, { href: previousPageHref }), _jsx("span", { className: "denhaag-pagination__links", role: "group", children: pages.map((page) => {
-                    return (_jsx(Link, { "aria-label": page.ariaLabel, className: "denhaag-pagination__link", to: page.href, children: page.label }));
-                }) }), _jsx(NextPage, { href: nextPageHref })] }));
-};
-const PreviousPage = ({ href }) => (_jsx(Link, { "aria-label": "Previous page", className: "denhaag-pagination__link denhaag-pagination__link--arrow", to: href, rel: "prev", children: _jsx("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", children: _jsx("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" }) }) }));
-const NextPage = ({ href }) => (_jsx(Link, { "aria-label": "Next page", className: "denhaag-pagination__link denhaag-pagination__link--arrow", to: href, rel: "next", children: _jsx("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", children: _jsx("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" }) }) }));

package/lib/components/modals/NotificationModal.d.ts

@@ -1,25 +0,0 @@
-import * as React from "react";
-export interface ModalProps {
-    title: string;
-    description: string;
-    isShown: boolean;
-    hide: () => void;
-    layoutClassName: string;
-    primaryButton: {
-        label: string;
-        handleClick(): any;
-    };
-    closeButton?: {
-        label: string;
-    };
-    infoLink?: {
-        label: string;
-        link: string;
-    };
-}
-export declare const NotificationModal: React.FC<ModalProps>;
-export declare const toggleNotificationModal: () => {
-    isShown: boolean;
-    show: () => void;
-    hide: () => void;
-};

package/lib/components/modals/NotificationModal.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as styles from "./NotificationModal.module.css";
-import ReactDOM from "react-dom";
-import { Button, Heading3, Link, Paragraph } from "@gemeente-denhaag/components-react";
-import clsx from "clsx";
-import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-export const NotificationModal = ({ title, description, isShown, hide, primaryButton, closeButton, infoLink, layoutClassName, }) => {
-    const [fadeOut, setFadeOut] = React.useState(true);
-    const stylesContainer = document.getElementById("stylesContainer");
-    const animationDurationToken = getComputedStyle(document.documentElement).getPropertyValue("--conduction-notification-animation-duration");
-    const animationDurationString = animationDurationToken.replace(/\D/g, "");
-    const animationDuration = parseInt(animationDurationString);
-    const handleClick = (clickFunction) => {
-        setFadeOut(!setFadeOut);
-        clickFunction && clickFunction();
-        setTimeout(() => {
-            hide();
-            setFadeOut(true);
-        }, animationDuration);
-    };
-    const modal = (_jsx("div", { className: clsx(styles.cssanimation, fadeOut ? styles.fadeInBottom : styles.fadeOutBottom, layoutClassName), children: _jsxs("div", { className: styles.modal, children: [_jsx(Heading3, { children: title }), _jsx("div", { children: _jsxs(Paragraph, { children: [description, " ", infoLink ? _jsx(Link, { href: infoLink.link, children: infoLink.label }) : _jsx(_Fragment, {})] }) }), _jsxs("div", { className: styles.buttons, children: [closeButton ? (_jsx("div", { onClick: () => handleClick(), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: closeButton.label }) })) : (_jsx(_Fragment, {})), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
-    return isShown ? ReactDOM.createPortal(modal, stylesContainer) : null;
-};
-export const toggleNotificationModal = () => {
-    const [isShown, setIsShown] = React.useState(false);
-    const show = () => setIsShown(true);
-    const hide = () => setIsShown(false);
-    return {
-        isShown,
-        show,
-        hide,
-    };
-};

package/lib/components/modals/NotificationModal.module.css

@@ -1,56 +0,0 @@
-.modal {
-  background: var(--denhaag-color-warmgrey-1);
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  box-shadow: var(--conduction-notification-box-shadow);
-  border-radius: var(--nlportal-document-border-radius);
-}
-
-.modal > *:not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-md);
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.buttons > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
-}
-
-.cssanimation {
-  animation-duration: var(--conduction-notification-animation-duration);
-  animation-fill-mode: both;
-}
-
-.fadeInBottom {
-  animation-name: fadeInBottom;
-}
-
-@keyframes fadeInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeOutBottom {
-  animation-name: fadeOutBottom;
-}
-
-@keyframes fadeOutBottom {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}