@conduction/components 1.0.6 → 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/denhaag-wrappers/paginations/Paginations.css

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

@@ -0,0 +1,20 @@
+/**
+ * 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

@@ -0,0 +1,10 @@
+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/formFields/select/select.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { IReactHookFormProps } from "../types";
+export interface ISelectValue {
+    label: string;
+    value: string;
+}
+interface ISelectProps {
+    control: 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/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/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/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/lib/components/privateRoute/PrivateRoute.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 interface PrivateRouteProps {
-    isLoggedIn?: boolean;
+    authenticated: boolean;
 }
 export declare const PrivateRoute: React.FC<PrivateRouteProps>;
 export {};

package/lib/components/privateRoute/PrivateRoute.js

@@ -1,15 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { navigate } from "gatsby";
-export const PrivateRoute = ({ children, isLoggedIn }) => {
-    const [authenticated, setAuthenticated] = React.useState(false);
+export const PrivateRoute = ({ children, authenticated }) => {
+    const [_authenticated, setAuthenticated] = React.useState(false);
     React.useEffect(() => {
-        if (!isLoggedIn && window.location.pathname !== "/login") {
+        if (!authenticated && window.location.pathname !== "/login") {
             navigate("/login");
         }
-        isLoggedIn && setAuthenticated(true);
-    }, [isLoggedIn]);
-    if (!authenticated)
+        authenticated && setAuthenticated(true);
+    }, [authenticated]);
+    if (!_authenticated)
         return _jsx(_Fragment, {});
     return _jsx(_Fragment, { children: children });
 };

package/lib/index.d.ts

@@ -9,4 +9,5 @@ import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };
+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, };

package/lib/index.js

@@ -9,4 +9,5 @@ import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };
+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, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.6",
+  "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>
+);

package/src/components/privateRoute/PrivateRoute.tsx

@@ -2,21 +2,21 @@ import React from "react";
 import { navigate } from "gatsby";
 
 interface PrivateRouteProps {
-  isLoggedIn?: boolean;
+  authenticated: boolean;
 }
 
-export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, isLoggedIn }) => {
-  const [authenticated, setAuthenticated] = React.useState<boolean>(false);
+export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, authenticated }) => {
+  const [_authenticated, setAuthenticated] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    if (!isLoggedIn && window.location.pathname !== "/login") {
+    if (!authenticated && window.location.pathname !== "/login") {
       navigate("/login");
     }
 
-    isLoggedIn && setAuthenticated(true);
-  }, [isLoggedIn]);
+    authenticated && setAuthenticated(true);
+  }, [authenticated]);
 
-  if (!authenticated) return <></>;
+  if (!_authenticated) return <></>;
 
   return <>{children}</>;
 };

package/lib/components/pagination/Pagination.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const Pagination: React.FC;

package/lib/components/pagination/Pagination.js

@@ -1,6 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-export const Pagination = () => {
-    const [count, setCount] = React.useState(0);
-    return (_jsxs(_Fragment, { children: ["Pagination", _jsxs("div", { children: ["Count: ", count] }), _jsx("button", { onClick: () => setCount(count + 1), children: "click me" })] }));
-};