@conduction/components 1.0.11 → 1.0.12

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/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/notificationPopUp/NotificationPopUp.module.css

@@ -0,0 +1,56 @@
+: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);
+  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/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,3 +1,4 @@
+/// <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";
@@ -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, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };

package/lib/index.js

@@ -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, 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.12",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/notificationPopUp/NotificationPopUp.module.css

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

@@ -25,6 +25,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,
@@ -50,4 +57,5 @@ export {
   PrimaryTopNav,
   SecondaryTopNav,
   Tag,
+  NotificationPopUp,
 };