@conduction/components 1.0.11 → 1.0.14

package/lib/components/container/Container.d.ts

@@ -1,2 +1,6 @@
 import * as React from "react";
-export declare const Container: React.FC;
+interface ContainerProps {
+    layoutClassName?: string;
+}
+export declare const Container: React.FC<ContainerProps>;
+export {};

package/lib/components/container/Container.js

@@ -1,3 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./Container.module.css";
-export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });
+import clsx from "clsx";
+export const Container = ({ children, layoutClassName }) => (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: children }));

package/lib/components/container/Container.module.css

@@ -1,5 +1,9 @@
+:root{
+ --condution-container-max-width:  1024px;
+}
+
 .container {
   width: 100%;
   margin-inline: auto;
-  max-width: var(--nlportal-max-page-width);
+  max-width: var(--condution-container-max-width);
 }

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/components/notificationPopUp/NotificationPopUp.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface NotificationPopUpProps {
+    title: string;
+    description: string | JSX.Element;
+    isVisible: boolean;
+    hide: () => void;
+    primaryButton: {
+        label: string;
+        handleClick: () => any;
+    };
+    secondaryButton?: {
+        label: string;
+        handleClick: () => any;
+    };
+    layoutClassName?: string;
+}
+export declare const NotificationPopUp: React.FC<NotificationPopUpProps>;
+export declare const NotificationPopUpController: () => {
+    isVisible: boolean;
+    show: () => void;
+    hide: () => void;
+};

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as styles from "./NotificationPopUp.module.css";
+import ReactDOM from "react-dom";
+import { Button, Heading3, Link, Paragraph, StylesProvider } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const NotificationPopUp = ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }) => {
+    const [animationVisible, setAnimationVisible] = React.useState(true);
+    const animationDuration = parseInt(styles.animationDuration, 10);
+    const handleClick = (clickFunction) => {
+        setAnimationVisible(!setAnimationVisible);
+        clickFunction && clickFunction();
+        setTimeout(() => {
+            hide();
+            setAnimationVisible(true);
+        }, animationDuration);
+    };
+    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
+    return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
+};
+export const NotificationPopUpController = () => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const show = () => setIsVisible(true);
+    const hide = () => setIsVisible(false);
+    return {
+        isVisible,
+        show,
+        hide,
+    };
+};

package/lib/components/{modals/NotificationModal.module.css → notificationPopUp/NotificationPopUp.module.css}

@@ -1,10 +1,19 @@
+:root {
+  --conduction-notification-popup-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+}
+
+:export {
+  animationDuration: 200ms;
+}
+
 .modal {
+  animation-fill-mode: both;
   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);
+  box-shadow: var(--conduction-notification-popup-box-shadow);
   border-radius: var(--nlportal-document-border-radius);
 }
 
@@ -22,12 +31,7 @@
   margin-inline-end: var(--nlportal-space-inline-md);
 }
 
-.cssanimation {
-  animation-duration: var(--conduction-notification-animation-duration);
-  animation-fill-mode: both;
-}
-
-.fadeInBottom {
+.visible {
   animation-name: fadeInBottom;
 }
 
@@ -41,7 +45,7 @@
   }
 }
 
-.fadeOutBottom {
+.modal:not(.visible) {
   animation-name: fadeOutBottom;
 }
 

package/lib/components/topNav/TopNav.module.css

@@ -2,18 +2,13 @@
   --conduction-top-nav-space-inline-lg: 1.25rem;
 
   --conduction-top-nav-color-primary: #ffffff;
-  --conduction-top-nav-background-color-primary: #084f70;
-  --conduction-top-nav-background-color-primary-hover: rgba(0, 0, 0, 0.2);
+  --conduction-top-nav-background-color-primary: #0b71a1;
+  --conduction-top-nav-background-color-primary-hover: rgba(255, 255, 255, 0.2);
 
   --conduction-top-nav-font-size-secondary: 16px;
   --conduction-top-nav-color-secondary: #ffffff;
-  --conduction-top-nav-background-color-secondary: #0b71a1;
-  --conduction-top-nav-background-color-secondary-hover: rgba(
-    255,
-    255,
-    255,
-    0.2
-  );
+  --conduction-top-nav-background-color-secondary: #084f70;
+  --conduction-top-nav-background-color-secondary-hover: rgba(0, 0, 0, 0.2);
 }
 
 /*

package/lib/index.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard } from "./components/card";
 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";
@@ -10,4 +11,12 @@ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
 import { Tag } from "./components/tag/Tag";
-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, };
+declare const NotificationPopUp: {
+    controller: () => {
+        isVisible: boolean;
+        show: () => void;
+        hide: () => void;
+    };
+    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, 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";
@@ -10,4 +10,6 @@ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
 import { Tag } from "./components/tag/Tag";
-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, };
+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, 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.11",
+  "version": "1.0.14",
   "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/components/notificationPopUp/NotificationPopUp.module.css

@@ -0,0 +1,60 @@
+:root {
+  --conduction-notification-popup-box-shadow: 0px 0px 6px 6px rgb(0 0 0 / 15%);
+}
+
+:export {
+  animationDuration: 200ms;
+}
+
+.modal {
+  animation-fill-mode: both;
+  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-popup-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);
+}
+
+.visible {
+  animation-name: fadeInBottom;
+}
+
+@keyframes fadeInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal:not(.visible) {
+  animation-name: fadeOutBottom;
+}
+
+@keyframes fadeOutBottom {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import * as styles from "./NotificationPopUp.module.css";
+import ReactDOM from "react-dom";
+import { Button, Heading3, Link, Paragraph, StylesProvider } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+
+export interface NotificationPopUpProps {
+  title: string;
+  description: string | JSX.Element;
+  isVisible: boolean;
+  hide: () => void;
+  primaryButton: {
+    label: string;
+    handleClick: () => any;
+  };
+  secondaryButton?: {
+    label: string;
+    handleClick: () => any;
+  };
+  layoutClassName?: string;
+}
+
+export const NotificationPopUp: React.FC<NotificationPopUpProps> = ({
+  title,
+  description,
+  isVisible,
+  hide,
+  primaryButton,
+  secondaryButton,
+  layoutClassName,
+}) => {
+  const [animationVisible, setAnimationVisible] = React.useState<boolean>(true);
+
+  const animationDuration = parseInt(styles.animationDuration, 10);
+
+  const handleClick = (clickFunction?: () => any) => {
+    setAnimationVisible(!setAnimationVisible);
+    clickFunction && clickFunction();
+    setTimeout(() => {
+      hide();
+      setAnimationVisible(true);
+    }, animationDuration);
+  };
+
+  const modal = (
+    <StylesProvider>
+      <div
+        style={{ animationDuration: `${animationDuration}ms` }}
+        className={clsx(styles.modal, animationVisible && styles.visible, layoutClassName)}
+      >
+        <Heading3>{title}</Heading3>
+        <Paragraph>{description}</Paragraph>
+        <div className={styles.buttons}>
+          {secondaryButton && (
+            <div onClick={() => handleClick(secondaryButton.handleClick)}>
+              <Link icon={<CloseIcon />} iconAlign="start">
+                {secondaryButton.label}
+              </Link>
+            </div>
+          )}
+          <Button icon={<ArrowRightIcon />} onClick={() => handleClick(primaryButton.handleClick)}>
+            {primaryButton.label}
+          </Button>
+        </div>
+      </div>
+    </StylesProvider>
+  );
+
+  return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
+};
+
+export const NotificationPopUpController = () => {
+  const [isVisible, setIsVisible] = React.useState<boolean>(false);
+  const show = () => setIsVisible(true);
+  const hide = () => setIsVisible(false);
+  return {
+    isVisible,
+    show,
+    hide,
+  };
+};

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";
@@ -25,6 +27,13 @@ import { StatusSteps } from "./components/statusSteps/StatusSteps";
 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,
@@ -41,6 +50,8 @@ export {
   InputNumber,
   Textarea,
   InputCheckbox,
+  SelectMultiple,
+  SelectSingle,
   ImageDivider,
   AuthenticatedLogo,
   UnauthenticatedLogo,
@@ -50,4 +61,5 @@ export {
   PrimaryTopNav,
   SecondaryTopNav,
   Tag,
+  NotificationPopUp,
 };

package/tsconfig.json

@@ -3,7 +3,10 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -12,7 +15,15 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": ["copy-files"],
-  "include": ["src", "src/**/*.css"],
-  "exclude": ["node_modules", "**/__tests__/*"]
-}
+  "hooks": [
+    "copy-files"
+  ],
+  "include": [
+    "src",
+    "src/**/*.css"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/__tests__/*"
+  ]
+}

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