@conduction/components 1.0.2 → 1.0.6

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,39 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  push:
+    branches:
+      - development
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: |
+          git --version
+          git config user.name "GitHub Version patch"
+          git config user.email "<>"
+          git checkout development
+          git clean -f -n
+      - run: npm install
+      - run: npm version patch
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/lib/components/card/RichContentCard/RichContentCard.js

@@ -3,15 +3,13 @@ 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";
+import { Tag } from "../../tag/Tag";
 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 } })))] }))] }));
+    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, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), 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, {}) })] }));
 };

package/lib/components/card/RichContentCard/RichContentCard.module.css

@@ -56,17 +56,6 @@
   font-size: var(--conduction-rich-card-label-with-icon-label-size);
 }
 
-/* Component: Tag */
-.tag {
-  font-size: var(--conduction-tag-font-size);
-  background-color: var(--denhaag-color-grey-1);
-  border-radius: var(--nlportal-document-border-radius);
-  padding-inline-start: var(--nlportal-space-inline-xs);
-  padding-inline-end: var(--nlportal-space-inline-xs);
-  padding-block-start: var(--nlportal-space-block-xs);
-  padding-block-end: var(--nlportal-space-block-xs);
-}
-
 /* Content Link */
 .contentLink {
   display: flex;

package/lib/components/card/detailsCard/DetailsCard.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface DetailsCardProps {
+    title: string;
+    introduction: string;
+    link: {
+        href: string;
+        label: string;
+    };
+    tags?: string[];
+    subHeader?: string;
+    layoutClassName?: string;
+}
+export declare const DetailsCard: React.FC<DetailsCardProps>;
+export {};

package/lib/components/card/detailsCard/DetailsCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./DetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
+export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
+    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] }) }));
+};

package/lib/components/card/detailsCard/DetailsCard.module.css

@@ -0,0 +1,48 @@
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  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);
+  border: var(--nlportal-document-border, 1px solid);
+}
+
+.content > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.title {
+  font-size: var(--denhaag-typography-scale-xl-font-size);
+  font-weight: var(--conduction-image-and-details-card-title-font-weight);
+}
+
+.subHeader {
+  color: var(--denhaag-color-grey-3);
+  font-size: var(--denhaag-typography-scale-s-font-size);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(
+    --conduction-image-and-details-card-introduction-lines-clamp
+  );
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+}

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/card/index.d.ts

@@ -1,5 +1,6 @@
 import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };

package/lib/components/card/index.js

@@ -1,5 +1,6 @@
 import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };

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/components/formFields/checkbox.d.ts

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

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

@@ -1,5 +1,10 @@
 import * as React from "react";
-import { IInputProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+export interface IInputProps {
+    name: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
 export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputEmail: React.FC<IInputProps & IReactHookFormProps>;

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

@@ -1,3 +1,8 @@
 import * as React from "react";
-import { ITextAreaProps, IReactHookFormProps } from "./types";
+import { IReactHookFormProps } from "./types";
+export interface ITextAreaProps {
+    name: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
 export declare const Textarea: React.FC<ITextAreaProps & IReactHookFormProps>;

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

@@ -4,17 +4,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/lib/components/pagination/Pagination.d.ts

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

package/lib/components/pagination/Pagination.js

@@ -0,0 +1,6 @@
+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" })] }));
+};

package/lib/components/tag/Tag.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface TagProps {
+    tag: string;
+}
+export declare const Tag: React.FC<TagProps>;
+export {};

package/lib/components/tag/Tag.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Tag.module.css";
+export const Tag = ({ tag }) => _jsx("span", { className: styles.tag, children: tag });

package/lib/components/tag/Tag.module.css

@@ -0,0 +1,9 @@
+.tag {
+  font-size: var(--conduction-tag-font-size);
+  background-color: var(--denhaag-color-grey-1);
+  border-radius: var(--nlportal-document-border-radius);
+  padding-inline-start: var(--nlportal-space-inline-xs);
+  padding-inline-end: var(--nlportal-space-inline-xs);
+  padding-block-start: var(--nlportal-space-block-xs);
+  padding-block-end: var(--nlportal-space-block-xs);
+}

package/lib/index.d.ts

@@ -1,15 +1,12 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
-import { CasesTable } from "./components/casesTable/CasesTable";
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard } from "./components/card";
 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, DetailsCard, 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 { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, } from "./components/card";
 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, DetailsCard, 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.6",
   "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/detailsCard/DetailsCard.module.css

@@ -0,0 +1,48 @@
+.container {
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: var(--nlportal-document-border-radius);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  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);
+  border: var(--nlportal-document-border, 1px solid);
+}
+
+.content > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-md);
+}
+
+.title {
+  font-size: var(--denhaag-typography-scale-xl-font-size);
+  font-weight: var(--conduction-image-and-details-card-title-font-weight);
+}
+
+.subHeader {
+  color: var(--denhaag-color-grey-3);
+  font-size: var(--denhaag-typography-scale-s-font-size);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--nlportal-space-inline-md);
+}
+
+.introduction {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(
+    --conduction-image-and-details-card-introduction-lines-clamp
+  );
+  -webkit-box-orient: vertical;
+}
+
+.link {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/card/detailsCard/DetailsCard.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as styles from "./DetailsCard.module.css";
+import clsx from "clsx";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
+
+interface DetailsCardProps {
+  title: string;
+  introduction: string;
+  link: {
+    href: string;
+    label: string;
+  };
+  tags?: string[];
+  subHeader?: string;
+  layoutClassName?: string;
+}
+
+export const DetailsCard: React.FC<DetailsCardProps> = ({
+  title,
+  subHeader,
+  introduction,
+  link,
+  tags,
+  layoutClassName,
+}) => {
+  return (
+    <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
+      <div className={styles.content}>
+        <div>
+          <div className={styles.title}>{title}</div>
+
+          <span className={styles.subHeader}>{subHeader}</span>
+        </div>
+
+        {tags && (
+          <div className={styles.tags}>
+            {tags.map((tag, idx) => (
+              <Tag key={idx} {...{ tag }} />
+            ))}
+          </div>
+        )}
+
+        <div className={styles.introduction}>{introduction}</div>
+
+        <div className={styles.link}>
+          <Link icon={<ArrowRightIcon />} iconAlign="start">
+            {link.label}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};

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/card/index.tsx

@@ -1,6 +1,7 @@
 import { DownloadCard } from "./downloadCard/DownloadCard";
-import { HorizontalImageCard } from "./HorizontalImageCard/HorizontalImageCard";
+import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
 import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
-import { RichContentCard } from "./RichContentCard/RichContentCard";
+import { RichContentCard } from "./richContentCard/RichContentCard";
+import { DetailsCard } from "./detailsCard/DetailsCard";
 
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };

package/src/components/card/{RichContentCard → richContentCard}/RichContentCard.module.css

@@ -56,17 +56,6 @@
   font-size: var(--conduction-rich-card-label-with-icon-label-size);
 }
 
-/* Component: Tag */
-.tag {
-  font-size: var(--conduction-tag-font-size);
-  background-color: var(--denhaag-color-grey-1);
-  border-radius: var(--nlportal-document-border-radius);
-  padding-inline-start: var(--nlportal-space-inline-xs);
-  padding-inline-end: var(--nlportal-space-inline-xs);
-  padding-block-start: var(--nlportal-space-block-xs);
-  padding-block-end: var(--nlportal-space-block-xs);
-}
-
 /* Content Link */
 .contentLink {
   display: flex;

package/src/components/card/{RichContentCard → richContentCard}/RichContentCard.tsx

@@ -3,6 +3,7 @@ import { navigate } from "gatsby";
 import * as React from "react";
 import * as styles from "./RichContentCard.module.css";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Tag } from "../../tag/Tag";
 
 export interface RichContentCardProps {
   link: {
@@ -44,8 +45,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
       </div>
 
       <div className={styles.tags}>
-        {tags.map((tag) => (
-          <Tag {...{ tag }} />
+        {tags.map((tag, idx) => (
+          <Tag key={idx} {...{ tag }} />
         ))}
       </div>
 
@@ -75,14 +76,6 @@ const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
   );
 };
 
-interface TagProps {
-  tag: string;
-}
-
-const Tag: React.FC<TagProps> = ({ tag }) => {
-  return <span className={styles.tag}>{tag}</span>;
-};
-
 interface ContentLinkProps {
   title: string;
   subTitle: string;

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/components/tag/Tag.module.css

@@ -0,0 +1,9 @@
+.tag {
+  font-size: var(--conduction-tag-font-size);
+  background-color: var(--denhaag-color-grey-1);
+  border-radius: var(--nlportal-document-border-radius);
+  padding-inline-start: var(--nlportal-space-inline-xs);
+  padding-inline-end: var(--nlportal-space-inline-xs);
+  padding-block-start: var(--nlportal-space-block-xs);
+  padding-block-end: var(--nlportal-space-block-xs);
+}

package/src/components/tag/Tag.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as styles from "./Tag.module.css";
+
+interface TagProps {
+  tag: string;
+}
+
+export const Tag: React.FC<TagProps> = ({ tag }) => <span className={styles.tag}>{tag}</span>;

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,10 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
-import { CasesTable } from "./components/casesTable/CasesTable";
+import {
+  DownloadCard,
+  HorizontalImageCard,
+  ImageAndDetailsCard,
+  RichContentCard,
+  DetailsCard,
+} from "./components/card";
 import { Container } from "./components/container/Container";
 import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
 import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
@@ -14,19 +19,18 @@ 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";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
+import { Tag } from "./components/tag/Tag";
 
 export {
   DownloadCard,
   HorizontalImageCard,
   ImageAndDetailsCard,
   RichContentCard,
-  CasesTable,
+  DetailsCard,
   Container,
   Breadcrumbs,
   EditableTableRow,
@@ -40,11 +44,10 @@ export {
   ImageDivider,
   AuthenticatedLogo,
   UnauthenticatedLogo,
-  MessageForm,
-  MessagesTable,
   MetaIcon,
   PrivateRoute,
   StatusSteps,
   PrimaryTopNav,
   SecondaryTopNav,
+  Tag,
 };

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