@conduction/components 1.0.9 → 1.0.12

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

@@ -1,12 +1,12 @@
 import * as React from "react";
-export interface ITopNavItem {
-    label: string;
-    href: string;
-    icon?: JSX.Element;
+interface TopNavProps {
+    items: {
+        label: string;
+        icon?: JSX.Element;
+        handleClick: () => any;
+    }[];
+    layoutClassName?: string;
 }
-interface TopNavItemsProps {
-    items: ITopNavItem[];
-}
-export declare const PrimaryTopNav: React.FC<TopNavItemsProps>;
-export declare const SecondaryTopNav: React.FC<TopNavItemsProps>;
+export declare const PrimaryTopNav: React.FC<TopNavProps>;
+export declare const SecondaryTopNav: React.FC<TopNavProps>;
 export {};

package/lib/components/topNav/TopNav.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./TopNav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-export const PrimaryTopNav = ({ items }) => {
-    return (_jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
+import * as styles from "./TopNav.module.css";
+import clsx from "clsx";
+export const PrimaryTopNav = ({ items, layoutClassName }) => {
+    return (_jsx("div", { className: clsx(styles.primary, layoutClassName && layoutClassName), children: _jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
 };
-export const SecondaryTopNav = ({ items }) => {
-    return (_jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
+export const SecondaryTopNav = ({ items, layoutClassName }) => {
+    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, handleClick }, idx) => (_jsx("li", { className: styles.li, onClick: handleClick, children: _jsx(Link, { className: styles.link, icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
 };

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

@@ -1,22 +1,71 @@
-.ul {
-  display: flex;
+:root {
+  --conduction-top-nav-space-inline-lg: 1.25rem;
+
+  --conduction-top-nav-color-primary: #ffffff;
+  --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: #084f70;
+  --conduction-top-nav-background-color-secondary-hover: rgba(0, 0, 0, 0.2);
 }
 
-.ul > * {
-  flex: 1;
+/*
+ * Global
+*/
+.primary:hover,
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
 }
 
 .li {
   list-style-type: none;
-  padding-block-start: var(--conduction-navbar-padding);
-  padding-block-end: var(--conduction-navbar-padding);
+  display: block;
+  padding-inline-start: var(--conduction-top-nav-space-inline-lg);
+  padding-inline-end: var(--conduction-top-nav-space-inline-lg);
+  padding-block-start: var(--conduction-top-nav-space-inline-lg);
+  padding-block-end: var(--conduction-top-nav-space-inline-lg);
+}
+
+/* 
+ * Primary Top Navigation
+*/
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-top-nav-background-color-primary);
 }
 
-.li > * {
-  text-decoration: none;
-  color: var(--conduction-navbar-color);
+.primary .link {
+  color: var(--conduction-top-nav-color-primary);
 }
 
-.primary {
-  font-weight: bold;
+.primary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-primary-hover);
+}
+
+/* 
+ * Secondary Top Navigation
+*/
+.secondary {
+  font-weight: 100;
+  width: fit-content;
+  font-size: var(--conduction-top-nav-font-size-secondary);
+  background-color: var(--conduction-top-nav-background-color-secondary);
+}
+
+.secondary .link {
+  color: var(--conduction-top-nav-color-secondary);
+}
+
+.secondary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-secondary-hover);
 }

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.9",
+  "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/components/topNav/TopNav.module.css

@@ -1,22 +1,71 @@
-.ul {
-  display: flex;
+:root {
+  --conduction-top-nav-space-inline-lg: 1.25rem;
+
+  --conduction-top-nav-color-primary: #ffffff;
+  --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: #084f70;
+  --conduction-top-nav-background-color-secondary-hover: rgba(0, 0, 0, 0.2);
 }
 
-.ul > * {
-  flex: 1;
+/*
+ * Global
+*/
+.primary:hover,
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
 }
 
 .li {
   list-style-type: none;
-  padding-block-start: var(--conduction-navbar-padding);
-  padding-block-end: var(--conduction-navbar-padding);
+  display: block;
+  padding-inline-start: var(--conduction-top-nav-space-inline-lg);
+  padding-inline-end: var(--conduction-top-nav-space-inline-lg);
+  padding-block-start: var(--conduction-top-nav-space-inline-lg);
+  padding-block-end: var(--conduction-top-nav-space-inline-lg);
+}
+
+/* 
+ * Primary Top Navigation
+*/
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-top-nav-background-color-primary);
 }
 
-.li > * {
-  text-decoration: none;
-  color: var(--conduction-navbar-color);
+.primary .link {
+  color: var(--conduction-top-nav-color-primary);
 }
 
-.primary {
-  font-weight: bold;
+.primary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-primary-hover);
+}
+
+/* 
+ * Secondary Top Navigation
+*/
+.secondary {
+  font-weight: 100;
+  width: fit-content;
+  font-size: var(--conduction-top-nav-font-size-secondary);
+  background-color: var(--conduction-top-nav-background-color-secondary);
+}
+
+.secondary .link {
+  color: var(--conduction-top-nav-color-secondary);
+}
+
+.secondary .li:hover {
+  background-color: var(--conduction-top-nav-background-color-secondary-hover);
 }

package/src/components/topNav/TopNav.tsx

@@ -1,46 +1,45 @@
 import * as React from "react";
-import * as styles from "./TopNav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
-import { navigate } from "gatsby";
-
-export interface ITopNavItem {
-  label: string;
-  href: string;
-  icon?: JSX.Element;
-}
+import * as styles from "./TopNav.module.css";
+import clsx from "clsx";
 
-interface TopNavItemsProps {
-  items: ITopNavItem[];
+interface TopNavProps {
+  items: { label: string; icon?: JSX.Element; handleClick: () => any }[];
+  layoutClassName?: string;
 }
 
-export const PrimaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
+export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
   return (
-    <nav className={styles.primary}>
-      <ul className={styles.ul}>
-        {items.map(({ label, href, icon }, idx) => (
-          <li className={styles.li} key={idx} onClick={() => navigate(href)}>
-            <Link icon={icon} iconAlign="start">
-              {label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
+      <nav className={styles.primary}>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, handleClick }, idx) => (
+            <li className={styles.li} key={idx} onClick={handleClick}>
+              <Link className={styles.link} icon={icon} iconAlign="start">
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
   );
 };
 
-export const SecondaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
+export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
   return (
-    <nav>
-      <ul className={styles.ul}>
-        {items.map(({ label, href, icon }, idx) => (
-          <li className={styles.li} key={idx} onClick={() => navigate(href)}>
-            <Link icon={icon} iconAlign="start">
-              {label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
+      <nav>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, handleClick }, idx) => (
+            <li className={styles.li} key={idx} onClick={handleClick}>
+              <Link className={styles.link} icon={icon} iconAlign="start">
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
   );
 };

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