@conduction/components 1.0.8 → 1.0.9

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/select/select.d.ts

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,56 @@
+.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%);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/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/src/components/container/Container.tsx

@@ -1,4 +1,11 @@
 import * as React from "react";
 import * as styles from "./Container.module.css";
+import clsx from "clsx";
 
-export const Container: React.FC = ({ children }) => <div className={styles.container}>{children}</div>;
+interface ContainerProps {
+  layoutClassName?: string;
+}
+
+export const Container: React.FC<ContainerProps> = ({ children, layoutClassName }) => (
+  <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>{children}</div>
+);