@conduction/components 1.0.2

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--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 { Link } from "gatsby";
+import "./Breadcrumbs.css";
+export const Breadcrumbs = ({ crumbs }) => {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "denhaag-breadcrumb", children: _jsx("ol", { className: "denhaag-breadcrumb__list", itemScope: true, itemType: "https://schema.org/BreadcrumbList", children: crumbs.map((crumb, idx) => {
+                if (crumbs.length !== idx + 1) {
+                    return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
+                }
+                return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
+            }) }) }));
+};
+const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", "shape-rendering": "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
+const LastCrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { "aria-current": "page", className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { "aria-current": "page", className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));

package/lib/components/editableTableRow/EditableTableRow.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface InputTypes {
+    inputType: "text" | "email";
+}
+interface EditableTableRowProps {
+    thead: string;
+    value: string;
+    handleSave: (value: any) => void;
+}
+export declare const EditableTableRow: React.FC<EditableTableRowProps & InputTypes>;
+export {};

package/lib/components/editableTableRow/EditableTableRow.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import * as styles from "./EditableTableRow.module.css";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "@gemeente-denhaag/components-react";
+import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
+import { useForm } from "react-hook-form";
+import { InputEmail, InputText } from "../formFields";
+export const EditableTableRow = ({ thead, value, inputType, handleSave, }) => {
+    const [editing, setEditing] = React.useState(false);
+    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing } })] }));
+};
+const RegularTableRow = ({ value, setEditing }) => {
+    const { t } = useTranslation();
+    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: value }), _jsx(TableCell, { children: _jsx("div", { className: styles.editButton, onClick: () => setEditing(true), children: _jsx(Link, { icon: _jsx(EditIcon, {}), iconAlign: "start", children: t("Edit") }) }) })] }));
+};
+const EditingTableRow = ({ value, setEditing, handleSave, inputType, }) => {
+    const { t } = useTranslation();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    const onSubmit = (data) => {
+        handleSave(data.value);
+        setEditing(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TableCell, { children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { ...{ inputType, value, register, errors } }), _jsxs("div", { className: styles.editButtonsContainer, children: [_jsx("button", { type: "submit", className: styles.submit, children: _jsx(Link, { icon: _jsx(CheckedIcon, {}), iconAlign: "start", children: t("Save") }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: t("Cancel") }) })] })] }) }), _jsx(TableCell, {})] }));
+};
+const FormField = ({ inputType, value, register, errors }) => {
+    switch (inputType) {
+        case "email":
+            return _jsx(InputEmail, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
+        case "text":
+            return _jsx(InputText, { defaultValue: value, ...{ register, errors }, name: "value", validation: { required: true } });
+    }
+};

package/lib/components/editableTableRow/EditableTableRow.module.css

@@ -0,0 +1,25 @@
+.th {
+  width: 35%;
+}
+
+.cancel {
+  color: var(--denhaag-color-grey-3) !important;
+}
+
+.editButtonsContainer {
+  display: flex;
+  margin-block-start: var(--nlportal-space-block-xs);
+}
+
+.editButtonsContainer > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.submit {
+  all: unset;
+}
+
+.editButton {
+  display: flex;
+  justify-content: flex-end;
+}

package/lib/components/formFields/checkbox.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICheckboxProps, IReactHookFormProps } from "./types";
+export declare const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps>;

package/lib/components/formFields/checkbox.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+export const InputCheckbox = ({ name, validation, register, label, }) => _jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", ...register(name, { ...validation }) }), ...{ label } });

package/lib/components/formFields/index.d.ts

@@ -0,0 +1,4 @@
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/lib/components/formFields/index.js

@@ -0,0 +1,4 @@
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/lib/components/formFields/input.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { IInputProps, IReactHookFormProps } from "./types";
+export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
+export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
+export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;
+export declare const InputDate: React.FC<IInputProps & IReactHookFormProps>;
+export declare const InputNumber: React.FC<IInputProps & IReactHookFormProps>;

package/lib/components/formFields/input.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { TextField } from "@gemeente-denhaag/components-react";
+import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
+};
+export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));

package/lib/components/formFields/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { ITextAreaProps, IReactHookFormProps } from "./types";
+export declare const Textarea: React.FC<ITextAreaProps & IReactHookFormProps>;

package/lib/components/formFields/textarea.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextArea } from "@gemeente-denhaag/textarea";
+export const Textarea = ({ name, validation, register, errors }) => (_jsx(TextArea, { ...register(name, { ...validation }), invalid: errors[name] }));

package/lib/components/formFields/types.d.ts

@@ -0,0 +1,20 @@
+import { FieldErrors, FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+export interface IReactHookFormProps {
+    register: UseFormRegister<FieldValues>;
+    errors: FieldErrors;
+    validation?: Omit<RegisterOptions<FieldValues, any>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+}
+export interface IInputProps {
+    name: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
+export interface ITextAreaProps {
+    name: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
+export interface ICheckboxProps {
+    label: string;
+    name: string;
+}

package/lib/components/formFields/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/imageDivider/ImageDivider.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface ImageDividerProps {
+    image: string;
+    layoutClassName: string;
+}
+export declare const ImageDivider: React.FC<ImageDividerProps>;
+export {};

package/lib/components/imageDivider/ImageDivider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as styles from "./imageDivider.module.css";
+export const ImageDivider = ({ image, layoutClassName }) => {
+    return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
+};

package/lib/components/imageDivider/imageDivider.module.css

@@ -0,0 +1,5 @@
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

package/lib/components/logo/Logo.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface LogoProps {
+    layoutClassName: string;
+    href?: string;
+}
+export declare const AuthenticatedLogo: React.FC<LogoProps>;
+export declare const UnauthenticatedLogo: React.FC<LogoProps>;
+export {};

package/lib/components/logo/Logo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Link } from "gatsby";
+import * as styles from "./Logo.module.css";
+export const AuthenticatedLogo = ({ layoutClassName, href }) => {
+    return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.authenticatedLogo, styles.logo, layoutClassName) }) }));
+};
+export const UnauthenticatedLogo = ({ layoutClassName, href }) => {
+    return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName) }) }));
+};

package/lib/components/logo/Logo.module.css

@@ -0,0 +1,15 @@
+.logoContainer {
+  height: 100%;
+}
+
+.logo {
+  background-size: 100% 100%;
+}
+
+.authenticatedLogo {
+  background-image: var(--conduction-authenticated-logo-background);
+}
+
+.unauthenticatedLogo {
+  background-image: var(--conduction-unauthenticated-logo-background);
+}

package/lib/components/messageForm/MessageForm.d.ts

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

package/lib/components/messageForm/MessageForm.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { Button, FormField, FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/components-react";
+import { useTranslation } from "react-i18next";
+import { Textarea } from "../formFields";
+export const MessageForm = () => {
+    const { t } = useTranslation();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    //the empty onSubmit is dependend on an API to function. This API is not yet implemented
+    const onSubmit = async () => { };
+    return (_jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { children: _jsxs(FormFieldInput, { children: [_jsx(FormFieldLabel, { children: t("Message") }), _jsx(Textarea, { ...{ register, errors }, name: "message", validation: { required: true } })] }) }), _jsx(Button, { size: "large", type: "submit", children: t("Send") })] }));
+};

package/lib/components/messagesTable/MessagesTable.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface IMessageTableItem {
+    organisation: string;
+    date: Date;
+    id: string;
+}
+interface MessagesTableProps {
+    messages: IMessageTableItem[];
+}
+export declare const MessagesTable: React.FC<MessagesTableProps>;
+export {};

package/lib/components/messagesTable/MessagesTable.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./MessagesTable.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { navigate } from "gatsby";
+export const MessagesTable = ({ messages }) => {
+    const { t } = useTranslation();
+    return (_jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableHeader, { children: t("Organisation") }), _jsx(TableHeader, { children: t("Date") }), _jsx(TableHeader, {})] }), messages.map(({ organisation, date, id }) => (_jsxs(TableRow, { className: styles.contentRow, children: [_jsx(TableCell, { children: organisation }), _jsx(TableCell, { children: date }), _jsx(TableCell, { onClick: () => navigate(`/my-messages/${id}`), children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: t("View message") }) })] }, id)))] }) }));
+};

package/lib/components/messagesTable/MessagesTable.module.css

@@ -0,0 +1,4 @@
+.contentRow > :last-child {
+  display: flex;
+  justify-content: flex-end;
+}

package/lib/components/metaIcon/MetaIcon.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface MetaIconProps {
+    icon: JSX.Element;
+    label: string;
+    value: string;
+}
+export declare const MetaIcon: React.FC<MetaIconProps>;

package/lib/components/metaIcon/MetaIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./MetaIcon.module.css";
+export const MetaIcon = ({ icon, label, value }) => (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.icon, children: icon }), _jsx("span", { children: label }), _jsx("span", { className: styles.value, children: value })] }));

package/lib/components/metaIcon/MetaIcon.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-xs);
+}
+
+.icon {
+  color: var(--nlportal-meta-icon-color);
+}
+
+.value {
+  font-weight: var(--nlportal-meta-icon-font-weight-bold);
+}

package/lib/components/privateRoute/PrivateRoute.d.ts

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

package/lib/components/privateRoute/PrivateRoute.js

@@ -0,0 +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);
+    React.useEffect(() => {
+        if (!isLoggedIn && window.location.pathname !== "/login") {
+            navigate("/login");
+        }
+        isLoggedIn && setAuthenticated(true);
+    }, [isLoggedIn]);
+    if (!authenticated)
+        return _jsx(_Fragment, {});
+    return _jsx(_Fragment, { children: children });
+};

package/lib/components/statusSteps/StatusSteps.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface IStatusStep {
+    title: string;
+    checked?: boolean;
+    current?: boolean;
+    expanded?: boolean;
+    subSteps?: string[];
+}
+interface StatusStepsProps {
+    steps: IStatusStep[];
+}
+export declare const StatusSteps: React.FC<StatusStepsProps>;
+export {};

package/lib/components/statusSteps/StatusSteps.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
+export const StatusSteps = ({ steps }) => {
+    return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
+};

package/lib/components/topNav/TopNav.d.ts

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

package/lib/components/topNav/TopNav.js

@@ -0,0 +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))) }) }));
+};
+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))) }) }));
+};

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

@@ -0,0 +1,22 @@
+.ul {
+  display: flex;
+}
+
+.ul > * {
+  flex: 1;
+}
+
+.li {
+  list-style-type: none;
+  padding-block-start: var(--conduction-navbar-padding);
+  padding-block-end: var(--conduction-navbar-padding);
+}
+
+.li > * {
+  text-decoration: none;
+  color: var(--conduction-navbar-color);
+}
+
+.primary {
+  font-weight: bold;
+}

package/lib/index.d.ts

@@ -0,0 +1,15 @@
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
+import { CasesTable } from "./components/casesTable/CasesTable";
+import { Container } from "./components/container/Container";
+import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
+import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox } from "./components/formFields";
+import { ImageDivider } from "./components/imageDivider/ImageDivider";
+import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
+import { MessageForm } from "./components/messageForm/MessageForm";
+import { MessagesTable } from "./components/messagesTable/MessagesTable";
+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, CasesTable, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MessageForm, MessagesTable, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };

package/lib/index.js

@@ -0,0 +1,15 @@
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
+import { CasesTable } from "./components/casesTable/CasesTable";
+import { Container } from "./components/container/Container";
+import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
+import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, } from "./components/formFields";
+import { ImageDivider } from "./components/imageDivider/ImageDivider";
+import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
+import { MessageForm } from "./components/messageForm/MessageForm";
+import { MessagesTable } from "./components/messagesTable/MessagesTable";
+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, CasesTable, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MessageForm, MessagesTable, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@conduction/components",
+  "version": "1.0.2",
+  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ConductionNL/conduction-components.git"
+  },
+  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "author": "Conduction B.V.",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ConductionNL/conduction-components/issues"
+  },
+  "homepage": "https://github.com/ConductionNL/conduction-components#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@gemeente-denhaag/components-react": "^0.1.1-alpha.143",
+    "@gemeente-denhaag/design-tokens-components": "^0.2.3-alpha.178",
+    "@gemeente-denhaag/form-field": "^0.1.1-alpha.67",
+    "@gemeente-denhaag/process-steps": "^0.1.0-alpha.18",
+    "@gemeente-denhaag/sidenav": "^0.1.0-alpha.1",
+    "@gemeente-denhaag/table": "^0.1.1-alpha.87",
+    "@gemeente-denhaag/textarea": "^0.1.1-alpha.65",
+    "axios": "^0.25.0",
+    "clsx": "^1.1.1",
+    "dateformat": "^5.0.3",
+    "gatsby": "^4.11.1",
+    "gatsby-plugin-breadcrumb": "^12.3.1",
+    "gatsby-plugin-layout": "^3.11.0",
+    "i18next": "^21.6.16",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-hook-form": "^7.29.0",
+    "react-i18next": "^11.16.6",
+    "react-loading-skeleton": "^3.1.0",
+    "react-query": "^3.34.19"
+  },
+  "devDependencies": {
+    "@types/dateformat": "^5.0.0",
+    "@types/node": "^17.0.23",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "tsc-hooks": "^1.1.1",
+    "typescript": "^4.6.3"
+  }
+}

package/src/components/card/HorizontalImageCard/HorizontalImageCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./HorizontalImageCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const HorizontalImageCard = ({ title, layoutClassName, external, link, iconOrImage, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: [_jsx("div", { className: styles.imageOrIconContainer, children: iconOrImage }), _jsxs("div", { className: styles.link, children: [_jsx("div", { className: styles.title, children: title }), _jsx(Link, { icon: external ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label })] })] }));
+};

package/src/components/card/HorizontalImageCard/HorizontalImageCard.module.css

@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--denhaag-color-grey-1);
+  border-radius: var(--nlportal-border-radius);
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+}
+
+.imageOrIconContainer > :first-child {
+  width: var(--conduction-horizontal-image-card-icon-size);
+  height: var(--conduction-horizontal-image-card-icon-size);
+
+  padding-inline-start: var(--nlportal-space-inline-md);
+  padding-inline-end: var(--nlportal-space-inline-md);
+  padding-block-start: var(--nlportal-space-block-md);
+  padding-block-end: var(--nlportal-space-block-md);
+}
+
+.title {
+  font-size: var(--conduction-horizontal-image-card-font-size);
+}

package/src/components/card/HorizontalImageCard/HorizontalImageCard.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as styles from "./HorizontalImageCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+
+interface HorizontalImageCardProps {
+  iconOrImage: JSX.Element;
+  title: string;
+  link: {
+    label: string;
+    href: string;
+  };
+  layoutClassName?: string;
+  external?: boolean;
+}
+
+export const HorizontalImageCard: React.FC<HorizontalImageCardProps> = ({
+  title,
+  layoutClassName,
+  external,
+  link,
+  iconOrImage,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.imageOrIconContainer}>{iconOrImage}</div>
+      <div className={styles.link}>
+        <div className={styles.title}>{title}</div>
+        <Link icon={external ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
+          {link.label}
+        </Link>
+      </div>
+    </div>
+  );
+};

package/src/components/card/RichContentCard/RichContentCard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import * as styles from "./RichContentCard.module.css";
+import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }) => (_jsx(LabelWithIcon, { ...{ label, icon } }))) }), _jsx("div", { className: styles.tags, children: tags.map((tag) => (_jsx(Tag, { ...{ tag } }))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
+};
+const LabelWithIcon = ({ label, icon }) => {
+    return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));
+};
+const Tag = ({ tag }) => {
+    return _jsx("span", { className: styles.tag, children: tag });
+};
+const ContentLink = ({ title, subTitle, href }) => {
+    return (_jsxs(Link, { className: styles.contentLink, children: [_jsxs("div", { className: styles.contentLink_content, children: [_jsx("span", { className: styles.contentLink_title, children: title }), _jsx("span", { className: styles.contentLink_subTitle, children: subTitle })] }), _jsx("div", { children: _jsx(ArrowRightIcon, {}) })] }));
+};