@conduction/components 1.0.2 → 1.0.3

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -3,6 +3,7 @@ interface DownloadCardProps {
     icon: JSX.Element;
     label: string;
     sizeKb: string;
+    downloadLabel: string;
     layoutClassName?: string;
 }
 export declare const DownloadCard: React.FC<DownloadCardProps>;

package/lib/components/card/downloadCard/DownloadCard.js

@@ -3,8 +3,6 @@ import * as styles from "./DownloadCard.module.css";
 import { DownloadIcon } from "@gemeente-denhaag/icons";
 import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName }) => {
-    const { t } = useTranslation();
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: t("Download") })] }));
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: downloadLabel })] }));
 };

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

@@ -5,6 +5,9 @@ interface InputTypes {
 interface EditableTableRowProps {
     thead: string;
     value: string;
+    saveLabel: string;
+    cancelLabel: string;
+    editLabel: string;
     handleSave: (value: any) => void;
 }
 export declare const EditableTableRow: React.FC<EditableTableRowProps & InputTypes>;

package/lib/components/editableTableRow/EditableTableRow.js

@@ -2,27 +2,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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, }) => {
+export const EditableTableRow = ({ thead, value, inputType, editLabel, cancelLabel, saveLabel, 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 } })] }));
+    return (_jsxs(TableRow, { children: [_jsx(TableHeader, { className: styles.th, children: thead }), editing && _jsx(EditingTableRow, { ...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel } }), !editing && _jsx(RegularTableRow, { ...{ value, setEditing, editLabel } })] }));
 };
-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 RegularTableRow = ({ value, editLabel, setEditing }) => {
+    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: editLabel }) }) })] }));
 };
-const EditingTableRow = ({ value, setEditing, handleSave, inputType, }) => {
-    const { t } = useTranslation();
+const EditingTableRow = ({ value, setEditing, handleSave, inputType, saveLabel, cancelLabel, }) => {
     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, {})] }));
+    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: saveLabel }) }), _jsx("div", { onClick: () => setEditing(false), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", className: styles.cancel, children: cancelLabel }) })] })] }) }), _jsx(TableCell, {})] }));
 };
 const FormField = ({ inputType, value, register, errors }) => {
     switch (inputType) {

package/lib/index.d.ts

@@ -1,15 +1,12 @@
 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, };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };

package/lib/index.js

@@ -1,15 +1,12 @@
 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, };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -19,9 +19,6 @@
   },
   "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",
@@ -29,24 +26,12 @@
     "@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"
+    "react-hook-form": "^7.29.0"
   },
   "devDependencies": {
-    "@types/dateformat": "^5.0.0",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -3,30 +3,28 @@ import * as styles from "./DownloadCard.module.css";
 import { DownloadIcon } from "@gemeente-denhaag/icons";
 import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
 
 interface DownloadCardProps {
   icon: JSX.Element;
   label: string;
   sizeKb: string;
+  downloadLabel: string;
   layoutClassName?: string;
 }
 
-export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb, layoutClassName }) => {
-  const { t } = useTranslation();
-
+export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.content}>
         <div className={styles.icon}>{icon}</div>
-        
+
         <div>
           {label} ({sizeKb}kb)
         </div>
       </div>
 
       <Link icon={<DownloadIcon />} iconAlign="start">
-        {t("Download")}
+        {downloadLabel}
       </Link>
     </div>
   );

package/src/components/editableTableRow/EditableTableRow.tsx

@@ -1,7 +1,6 @@
 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 { FieldValues, useForm, UseFormRegister } from "react-hook-form";
@@ -14,6 +13,9 @@ interface InputTypes {
 interface EditableTableRowProps {
   thead: string;
   value: string;
+  saveLabel: string;
+  cancelLabel: string;
+  editLabel: string;
   handleSave: (value: any) => void;
 }
 
@@ -21,6 +23,9 @@ export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
   thead,
   value,
   inputType,
+  editLabel,
+  cancelLabel,
+  saveLabel,
   handleSave,
 }) => {
   const [editing, setEditing] = React.useState<boolean>(false);
@@ -29,8 +34,8 @@ export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
     <TableRow>
       <TableHeader className={styles.th}>{thead}</TableHeader>
 
-      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing }} />}
-      {!editing && <RegularTableRow {...{ value, setEditing }} />}
+      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel }} />}
+      {!editing && <RegularTableRow {...{ value, setEditing, editLabel }} />}
     </TableRow>
   );
 };
@@ -39,14 +44,13 @@ export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
  * Specific rows based on editing (Regular: not editing & Editing: editing)
  */
 
-interface SpecificRowsProps {
+interface RegularTableRowProps {
   value: string;
+  editLabel: string;
   setEditing: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const RegularTableRow: React.FC<SpecificRowsProps> = ({ value, setEditing }) => {
-  const { t } = useTranslation();
-
+const RegularTableRow: React.FC<RegularTableRowProps> = ({ value, editLabel, setEditing }) => {
   return (
     <>
       <TableCell>{value}</TableCell>
@@ -54,7 +58,7 @@ const RegularTableRow: React.FC<SpecificRowsProps> = ({ value, setEditing }) =>
       <TableCell>
         <div className={styles.editButton} onClick={() => setEditing(true)}>
           <Link icon={<EditIcon />} iconAlign="start">
-            {t("Edit")}
+            {editLabel}
           </Link>
         </div>
       </TableCell>
@@ -63,17 +67,21 @@ const RegularTableRow: React.FC<SpecificRowsProps> = ({ value, setEditing }) =>
 };
 
 interface EditingTableRowProps {
+  value: string;
+  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
+  saveLabel: string;
+  cancelLabel: string;
   handleSave: (value: any) => void;
 }
 
-const EditingTableRow: React.FC<SpecificRowsProps & EditingTableRowProps & InputTypes> = ({
+const EditingTableRow: React.FC<EditingTableRowProps & InputTypes> = ({
   value,
   setEditing,
   handleSave,
   inputType,
+  saveLabel,
+  cancelLabel,
 }) => {
-  const { t } = useTranslation();
-
   const {
     register,
     handleSubmit,
@@ -94,13 +102,13 @@ const EditingTableRow: React.FC<SpecificRowsProps & EditingTableRowProps & Input
           <div className={styles.editButtonsContainer}>
             <button type="submit" className={styles.submit}>
               <Link icon={<CheckedIcon />} iconAlign="start">
-                {t("Save")}
+                {saveLabel}
               </Link>
             </button>
 
             <div onClick={() => setEditing(false)}>
               <Link icon={<CloseIcon />} iconAlign="start" className={styles.cancel}>
-                {t("Cancel")}
+                {cancelLabel}
               </Link>
             </div>
           </div>

package/src/components/formFields/checkbox.tsx

@@ -1,5 +1,10 @@
 import { FormControlLabel } from "@gemeente-denhaag/components-react";
-import { ICheckboxProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+
+export interface ICheckboxProps {
+  label: string;
+  name: string;
+}
 
 export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
   name,

package/src/components/formFields/input.tsx

@@ -1,7 +1,13 @@
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
 import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
-import { IInputProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+
+export interface IInputProps {
+  name: string;
+  disabled?: boolean;
+  defaultValue?: string;
+}
 
 export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   disabled,

package/src/components/formFields/textarea.tsx

@@ -1,6 +1,12 @@
 import * as React from "react";
 import { TextArea } from "@gemeente-denhaag/textarea";
-import { ITextAreaProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+
+export interface ITextAreaProps {
+  name: string;
+  disabled?: boolean;
+  defaultValue?: string;
+}
 
 export const Textarea: React.FC<ITextAreaProps & IReactHookFormProps> = ({ name, validation, register, errors }) => (
   <TextArea {...register(name, { ...validation })} invalid={errors[name]} />

package/src/components/formFields/types.ts

@@ -5,20 +5,3 @@ export interface IReactHookFormProps {
   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/src/custom.d.ts

@@ -1,5 +1,4 @@
 declare module "*.svg";
-
 declare module "*.jpg";
 declare module "*.png";
 declare module "*.module.css";

package/src/index.ts

@@ -1,5 +1,4 @@
 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";
@@ -14,8 +13,6 @@ import {
 } 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";
@@ -26,7 +23,6 @@ export {
   HorizontalImageCard,
   ImageAndDetailsCard,
   RichContentCard,
-  CasesTable,
   Container,
   Breadcrumbs,
   EditableTableRow,
@@ -40,8 +36,6 @@ export {
   ImageDivider,
   AuthenticatedLogo,
   UnauthenticatedLogo,
-  MessageForm,
-  MessagesTable,
   MetaIcon,
   PrivateRoute,
   StatusSteps,

package/lib/components/casesTable/CasesTable.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-interface CasesTableProps {
-    cases: any[];
-}
-export declare const CasesTable: React.FC<CasesTableProps>;
-export {};

package/lib/components/casesTable/CasesTable.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./CasesTable.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 CasesTable = ({ cases }) => {
-    const { t } = useTranslation();
-    return (_jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableHeader, { children: t("Title") }), _jsx(TableHeader, { children: t("Status") }), _jsx(TableHeader, { children: t("Date") }), _jsx(TableHeader, {})] }), cases.map((_case) => (_jsxs(TableRow, { className: styles.contentRow, children: [_jsx(TableCell, { children: _case.omschrijving }), _jsx(TableCell, { children: _case.status }), _jsx(TableCell, { children: _case.startdatum }), _jsx(TableCell, { onClick: () => navigate(`/my-cases/${_case.id}`), children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: t("View case") }) })] }, _case.id)))] }) }));
-};

package/lib/components/casesTable/CasesTable.module.css

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

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

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

package/lib/components/messageForm/MessageForm.js

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

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

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

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

package/src/components/casesTable/CasesTable.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as styles from "./CasesTable.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 CasesTable = ({ cases }) => {
-    const { t } = useTranslation();
-    return (_jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableHeader, { children: t("Title") }), _jsx(TableHeader, { children: t("Status") }), _jsx(TableHeader, { children: t("Date") }), _jsx(TableHeader, {})] }), cases.map((_case) => (_jsxs(TableRow, { className: styles.contentRow, children: [_jsx(TableCell, { children: _case.omschrijving }), _jsx(TableCell, { children: _case.status }), _jsx(TableCell, { children: _case.startdatum }), _jsx(TableCell, { onClick: () => navigate(`/my-cases/${_case.id}`), children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: t("View case") }) })] }, _case.id)))] }) }));
-};

package/src/components/casesTable/CasesTable.module.css

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

package/src/components/casesTable/CasesTable.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-import * as styles from "./CasesTable.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";
-
-interface CasesTableProps {
-  cases: any[];
-}
-
-export const CasesTable: React.FC<CasesTableProps> = ({ cases }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableHeader>{t("Title")}</TableHeader>
-          <TableHeader>{t("Status")}</TableHeader>
-          <TableHeader>{t("Date")}</TableHeader>
-          <TableHeader />
-        </TableRow>
-        {cases.map((_case) => (
-          <TableRow key={_case.id} className={styles.contentRow}>
-            <TableCell>{_case.omschrijving}</TableCell>
-            <TableCell>{_case.status}</TableCell>
-            <TableCell>{_case.startdatum}</TableCell>
-
-            <TableCell onClick={() => navigate(`/my-cases/${_case.id}`)}>
-              <Link icon={<ArrowRightIcon />} iconAlign="start">
-                {t("View case")}
-              </Link>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};

package/src/components/messageForm/MessageForm.js

@@ -1,12 +0,0 @@
-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/src/components/messageForm/MessageForm.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-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: React.FC = () => {
-  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 (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <FormField>
-        <FormFieldInput>
-          <FormFieldLabel>{t("Message")}</FormFieldLabel>
-          <Textarea {...{ register, errors }} name="message" validation={{ required: true }} />
-        </FormFieldInput>
-      </FormField>
-      <Button size="large" type="submit">
-        {t("Send")}
-      </Button>
-    </form>
-  );
-};

package/src/components/messagesTable/MessagesTable.js

@@ -1,11 +0,0 @@
-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/src/components/messagesTable/MessagesTable.module.css

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

package/src/components/messagesTable/MessagesTable.tsx

@@ -1,45 +0,0 @@
-import * as React from "react";
-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 interface IMessageTableItem {
-  organisation: string;
-  date: Date;
-  id: string;
-}
-
-interface MessagesTableProps {
-  messages: IMessageTableItem[];
-}
-
-export const MessagesTable: React.FC<MessagesTableProps> = ({ messages }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Table>
-      <TableBody>
-        <TableRow>
-          <TableHeader>{t("Organisation")}</TableHeader>
-          <TableHeader>{t("Date")}</TableHeader>
-          <TableHeader />
-        </TableRow>
-        {messages.map(({ organisation, date, id }) => (
-          <TableRow key={id} className={styles.contentRow}>
-            <TableCell>{organisation}</TableCell>
-            <TableCell>{date}</TableCell>
-
-            <TableCell onClick={() => navigate(`/my-messages/${id}`)}>
-              <Link icon={<ArrowRightIcon />} iconAlign="start">
-                {t("View message")}
-              </Link>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-};