@conduction/components 1.0.7 → 1.0.8

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,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 & ISelectProps & IReactHookFormProps>;
+export declare const SelectSingle: React.FC<ISelectProps & 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/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/package.json

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

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