@conduction/components 2.1.19 → 2.1.20

package/.github/workflows/github-actions.yml

@@ -0,0 +1,26 @@
+name: Continuous Delivery
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: |
+          npm ci
+
+      - name: Build
+        run: |
+          npm run build

package/.nvmrc

@@ -0,0 +1 @@
+16

package/README.md

@@ -4,24 +4,25 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
-  - 2.1.19: Refactor Tooltip layout.
-  - 2.1.18: Add default value to Textarea component.
-  - 2.1.17: Refactor to NotificationPopUp to include layoutClassName.
-  - 2.1.16: Refactor ToolTip layoutClassName placement.
-  - 2.1.15: Add InputDate component based on react-datepicker.
-  - 2.1.14: Refactor checkbox to remove svg errors
-  - 2.1.13: Refactor components to remove svg errors (e.g. shape-rendering => shapeRendering)
-  - 2.1.12: Added ToolTip max-width and break-word
-  - 2.1.11: Added CreateKeyValue component disabled state on delete buttons
-  - 2.1.10: PrimaryTopNav overflow scroll removed from desktop
-  - 2.1.8 & 2.1.9: PrimaryTopNav will always show subItems on mobile
-  - 2.1.7: Add disabled placholders to all Select elements.
-  - 2.1.6: Add disabled state to CreateKeyValue component
-  - 2.1.4 & 2.1.5: Remove IInputProps from CreateKeyValue to undo duplicate defaultValue prop
-  - 2.1.3: Export IKeyValue from CreateKeyValue component.
-  - 2.1.2: REVERT 2.1.1 and 2.1.0.
-  - 2.1.1: Deploy issues.
-  - 2.1.0: InputDate now includes Den Haag InputDate component, requiring react-hook-form controls.
+- 2.1.20: Updated react.fc code and github actions added.
+- 2.1.19: Refactor Tooltip layout.
+- 2.1.18: Add default value to Textarea component.
+- 2.1.17: Refactor to NotificationPopUp to include layoutClassName.
+- 2.1.16: Refactor ToolTip layoutClassName placement.
+- 2.1.15: Add InputDate component based on react-datepicker.
+- 2.1.14: Refactor checkbox to remove svg errors
+- 2.1.13: Refactor components to remove svg errors (e.g. shape-rendering => shapeRendering)
+- 2.1.12: Added ToolTip max-width and break-word
+- 2.1.11: Added CreateKeyValue component disabled state on delete buttons
+- 2.1.10: PrimaryTopNav overflow scroll removed from desktop
+- 2.1.8 & 2.1.9: PrimaryTopNav will always show subItems on mobile
+- 2.1.7: Add disabled placholders to all Select elements.
+- 2.1.6: Add disabled state to CreateKeyValue component
+- 2.1.4 & 2.1.5: Remove IInputProps from CreateKeyValue to undo duplicate defaultValue prop
+- 2.1.3: Export IKeyValue from CreateKeyValue component.
+- 2.1.2: REVERT 2.1.1 and 2.1.0.
+- 2.1.1: Deploy issues.
+- 2.1.0: InputDate now includes Den Haag InputDate component, requiring react-hook-form controls.
 
 - **Version 2**
 

package/lib/components/badgeCounter/BadgeCounter.d.ts

@@ -4,5 +4,5 @@ interface BadgeCounterProps {
     children: React.ReactNode;
     layoutClassName?: string;
 }
-export declare const BadgeCounter: React.FC<BadgeCounterProps>;
+export declare const BadgeCounter: ({ number, children, layoutClassName, }: React.PropsWithChildren<BadgeCounterProps>) => JSX.Element;
 export {};

package/lib/components/badgeCounter/BadgeCounter.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./BadgeCounter.module.css";
 import clsx from "clsx";
-export const BadgeCounter = ({ number, children, layoutClassName }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));
+export const BadgeCounter = ({ number, children, layoutClassName, }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface DetailsCardProps {
     title: string;
     introduction?: string;
@@ -10,5 +10,5 @@ interface DetailsCardProps {
     subHeader?: string;
     layoutClassName?: string;
 }
-export declare const DetailsCard: React.FC<DetailsCardProps>;
+export declare const DetailsCard: ({ title, subHeader, introduction, link, tags, layoutClassName, }: DetailsCardProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface DownloadCardProps {
     icon: JSX.Element;
     label: string;
@@ -7,5 +7,5 @@ interface DownloadCardProps {
     layoutClassName?: string;
     handleClick: () => any;
 }
-export declare const DownloadCard: React.FC<DownloadCardProps>;
+export declare const DownloadCard: ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }: DownloadCardProps) => JSX.Element;
 export {};

package/lib/components/card/horizontalImageCard/HorizontalImageCard.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface HorizontalImageCardProps {
     iconOrImage: JSX.Element;
     title: string;
@@ -9,5 +9,5 @@ interface HorizontalImageCardProps {
     layoutClassName?: string;
     external?: boolean;
 }
-export declare const HorizontalImageCard: React.FC<HorizontalImageCardProps>;
+export declare const HorizontalImageCard: ({ title, layoutClassName, external, link, iconOrImage, }: HorizontalImageCardProps) => JSX.Element;
 export {};

package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface ImageAndDetailsCardProps {
     title: string;
     image: JSX.Element;
@@ -10,5 +10,5 @@ interface ImageAndDetailsCardProps {
     subHeader?: string;
     layoutClassName?: string;
 }
-export declare const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps>;
+export declare const ImageAndDetailsCard: ({ image, title, subHeader, introduction, link, layoutClassName, }: ImageAndDetailsCardProps) => JSX.Element;
 export {};

package/lib/components/card/infoCard/InfoCard.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
+/// <reference types="react" />
 interface InfoCardProps {
     title: string;
     content: JSX.Element | string;
     layoutClassName?: string;
 }
-export declare const InfoCard: React.FC<InfoCardProps>;
+export declare const InfoCard: ({ title, content, layoutClassName }: InfoCardProps) => JSX.Element;
 export {};

package/lib/components/card/richContentCard/RichContentCard.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 export interface RichContentCardProps {
     link: {
         label: string;
@@ -16,4 +16,4 @@ export interface RichContentCardProps {
     }[];
     linkIsExternal?: boolean;
 }
-export declare const RichContentCard: React.FC<RichContentCardProps>;
+export declare const RichContentCard: ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }: RichContentCardProps) => JSX.Element;

package/lib/components/codeBlock/CodeBlock.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+/// <reference types="react" />
 interface CodeBlockProps {
     codeBlock: string | JSX.Element;
 }
-export declare const CodeBlock: React.FC<CodeBlockProps>;
+export declare const CodeBlock: ({ codeBlock }: CodeBlockProps) => JSX.Element;
 export {};

package/lib/components/container/Container.d.ts

@@ -2,5 +2,5 @@ import * as React from "react";
 interface ContainerProps {
     layoutClassName?: string;
 }
-export declare const Container: React.FC<ContainerProps>;
+export declare const Container: ({ children, layoutClassName }: React.PropsWithChildren<ContainerProps>) => JSX.Element;
 export {};

package/lib/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.d.ts

@@ -5,7 +5,7 @@
  *
  * Note: we do not use css modules here due to this component being a wrapper
  */
-import * as React from "react";
+/// <reference types="react" />
 import "./Breadcrumbs.css";
 interface BreadcrumbsProps {
     crumbs: {
@@ -13,5 +13,5 @@ interface BreadcrumbsProps {
         crumbLabel: string;
     }[];
 }
-export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export declare const Breadcrumbs: ({ crumbs }: BreadcrumbsProps) => JSX.Element;
 export {};

package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+/// <reference types="react" />
 import "./Pagination.css";
 interface PaginationProps {
     pages: number;
     currentPage: number;
     setPage: (page: number) => any;
 }
-export declare const Pagination: React.FC<PaginationProps>;
+export declare const Pagination: ({ pages, currentPage, setPage }: PaginationProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface InputTypes {
     inputType: "text" | "email";
 }
@@ -10,5 +10,5 @@ interface EditableTableRowProps {
     editLabel: string;
     handleSave: (value: any) => void;
 }
-export declare const EditableTableRow: React.FC<EditableTableRowProps & InputTypes>;
+export declare const EditableTableRow: ({ thead, value, inputType, editLabel, cancelLabel, saveLabel, handleSave, }: EditableTableRowProps & InputTypes) => JSX.Element;
 export {};

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

@@ -6,4 +6,4 @@ export interface ICheckboxProps {
     defaultChecked?: boolean;
     disabled?: boolean;
 }
-export declare const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps>;
+export declare const InputCheckbox: ({ name, validation, register, label, defaultChecked, disabled, }: ICheckboxProps & IReactHookFormProps) => JSX.Element;

package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 /**
@@ -14,5 +14,5 @@ export interface IKeyValue {
     key: string;
     value: string;
 }
-export declare const CreateKeyValue: React.FC<CreateKeyValueProps & IReactHookFormProps>;
+export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/date/Date.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import "react-datepicker/dist/react-datepicker.css";
 import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
@@ -8,5 +8,5 @@ interface IDateProps {
     showTimeSelect?: boolean;
     disabled?: boolean;
 }
-export declare const InputDate: React.FC<IDateProps & IReactHookFormProps>;
+export declare const InputDate: ({ name, errors, control, validation, disabled, }: IDateProps & IReactHookFormProps) => JSX.Element;
 export {};

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

@@ -5,5 +5,5 @@ interface IRadioProps {
     name: string;
     value: string;
 }
-export declare const InputRadio: React.FC<IRadioProps & IReactHookFormProps>;
+export declare const InputRadio: ({ name, validation, register, label, value, }: IRadioProps & IReactHookFormProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 import { Control, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 interface ISelectProps {
@@ -12,7 +12,7 @@ interface ISelectProps {
     disabled?: boolean;
     isClearable?: boolean;
 }
-export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
-export declare const SelectCreate: React.FC<ISelectProps & IReactHookFormProps>;
-export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
+export declare const SelectMultiple: ({ name, options, errors, control, validation, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectCreate: ({ name, options, errors, control, validation, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectSingle: ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
-import * as React from "react";
+/// <reference types="react" />
 import { IReactHookFormProps } from "./types";
 export interface ITextAreaProps {
     name: string;
     disabled?: boolean;
     defaultValue?: string;
 }
-export declare const Textarea: React.FC<ITextAreaProps & IReactHookFormProps>;
+export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;

package/lib/components/formFields/textarea.js

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

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

@@ -1,7 +1,7 @@
-import * as React from "react";
+/// <reference types="react" />
 interface ImageDividerProps {
     image: string;
     layoutClassName: string;
 }
-export declare const ImageDivider: React.FC<ImageDividerProps>;
+export declare const ImageDivider: ({ image, layoutClassName }: ImageDividerProps) => JSX.Element;
 export {};

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

@@ -1,8 +1,8 @@
-import * as React from "react";
+/// <reference types="react" />
 interface LogoProps {
     layoutClassName: string;
     href?: string;
 }
-export declare const AuthenticatedLogo: React.FC<LogoProps>;
-export declare const UnauthenticatedLogo: React.FC<LogoProps>;
+export declare const AuthenticatedLogo: ({ layoutClassName, href }: LogoProps) => JSX.Element;
+export declare const UnauthenticatedLogo: ({ layoutClassName, href }: LogoProps) => JSX.Element;
 export {};

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

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

package/lib/components/notificationPopUp/NotificationPopUp.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 export interface NotificationPopUpProps {
     title: string;
     description: string | JSX.Element;
@@ -18,7 +18,7 @@ export interface NotificationPopUpProps {
     };
     layoutClassName?: string;
 }
-export declare const NotificationPopUp: React.FC<NotificationPopUpProps>;
+export declare const NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: NotificationPopUpProps) => JSX.Element | null;
 export declare const NotificationPopUpController: () => {
     isVisible: boolean;
     show: () => void;

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

@@ -2,5 +2,5 @@ import React from "react";
 interface PrivateRouteProps {
     authenticated: boolean;
 }
-export declare const PrivateRoute: React.FC<PrivateRouteProps>;
+export declare const PrivateRoute: ({ children, authenticated }: React.PropsWithChildren<PrivateRouteProps>) => JSX.Element;
 export {};

package/lib/components/quoteWrapper/QuoteWrapper.d.ts

@@ -3,5 +3,5 @@ interface QuoteWrapperProps {
     borderColor?: string;
     borderWidth?: string;
 }
-export declare const QuoteWrapper: React.FC<QuoteWrapperProps>;
+export declare const QuoteWrapper: ({ children, borderColor, borderWidth, }: React.PropsWithChildren<QuoteWrapperProps>) => JSX.Element;
 export {};

package/lib/components/quoteWrapper/QuoteWrapper.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./QuoteWrapper.module.css";
-export const QuoteWrapper = ({ children, borderColor, borderWidth }) => {
+export const QuoteWrapper = ({ children, borderColor, borderWidth, }) => {
     return (_jsx("div", { style: { borderLeftColor: borderColor, borderLeftWidth: borderWidth }, className: styles.container, children: children }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface IStatusStep {
     title: string;
     checked?: boolean;
@@ -9,5 +9,5 @@ interface IStatusStep {
 interface StatusStepsProps {
     steps: IStatusStep[];
 }
-export declare const StatusSteps: React.FC<StatusStepsProps>;
+export declare const StatusSteps: ({ steps }: StatusStepsProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface TagProps {
     label: string;
     icon?: JSX.Element;
@@ -6,5 +6,5 @@ interface TagProps {
     remove?: () => any;
     layoutClassName?: string;
 }
-export declare const Tag: React.FC<TagProps>;
+export declare const Tag: ({ label, icon, onClick, remove, layoutClassName }: TagProps) => JSX.Element;
 export {};

package/lib/components/toolTip/ToolTip.d.ts

@@ -5,5 +5,5 @@ interface ToolTipProps {
     tooltip: string;
     layoutClassName?: string;
 }
-export declare const ToolTip: React.FC<ToolTipProps>;
+export declare const ToolTip: ({ children, layoutClassName, tooltip }: React.PropsWithChildren<ToolTipProps>) => JSX.Element;
 export { ReactTooltip };

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface ITopNavItem {
     label: string;
     icon?: JSX.Element;
@@ -16,5 +16,5 @@ export interface TopNavProps {
     mobileLogo?: JSX.Element;
     layoutClassName?: string;
 }
-export declare const PrimaryTopNav: React.FC<TopNavProps>;
+export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName }: TopNavProps) => JSX.Element;
 export {};

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 interface TopNavProps {
     items: {
         label: string;
@@ -8,5 +8,5 @@ interface TopNavProps {
     }[];
     layoutClassName?: string;
 }
-export declare const SecondaryTopNav: React.FC<TopNavProps>;
+export declare const SecondaryTopNav: ({ items, layoutClassName }: TopNavProps) => JSX.Element;
 export {};

package/lib/index.d.ts

@@ -17,7 +17,7 @@ declare const NotificationPopUp: {
         show: () => void;
         hide: () => void;
     };
-    NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
+    NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
 };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
+    "clean": "rimraf lib/",
     "build": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -11,7 +12,12 @@
     "type": "git",
     "url": "git+https://github.com/ConductionNL/conduction-components.git"
   },
-  "keywords": ["React", "Gatsby", "Conduction", "Components"],
+  "keywords": [
+    "React",
+    "Gatsby",
+    "Conduction",
+    "Components"
+  ],
   "author": "Conduction B.V.",
   "license": "ISC",
   "bugs": {
@@ -42,6 +48,7 @@
     "@types/react": "^17.0.43",
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^17.0.14",
+    "rimraf": "^4.4.0",
     "tsc-hooks": "^1.1.1",
     "typescript": "^4.6.3"
   }

package/src/components/badgeCounter/BadgeCounter.tsx

@@ -8,7 +8,11 @@ interface BadgeCounterProps {
   layoutClassName?: string;
 }
 
-export const BadgeCounter: React.FC<BadgeCounterProps> = ({ number, children, layoutClassName }) => (
+export const BadgeCounter = ({
+  number,
+  children,
+  layoutClassName,
+}: React.PropsWithChildren<BadgeCounterProps>): JSX.Element => (
   <div className={styles.content}>
     {children}
     <span className={clsx([layoutClassName && layoutClassName], styles.badge)}>{number}</span>

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

@@ -18,14 +18,14 @@ interface DetailsCardProps {
   layoutClassName?: string;
 }
 
-export const DetailsCard: React.FC<DetailsCardProps> = ({
+export const DetailsCard = ({
   title,
   subHeader,
   introduction,
   link,
   tags,
   layoutClassName,
-}) => {
+}: DetailsCardProps): JSX.Element => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
       <div className={styles.content}>

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

@@ -13,14 +13,14 @@ interface DownloadCardProps {
   handleClick: () => any;
 }
 
-export const DownloadCard: React.FC<DownloadCardProps> = ({
+export const DownloadCard = ({
   icon,
   label,
   sizeKb,
   layoutClassName,
   downloadLabel,
   handleClick,
-}) => {
+}: DownloadCardProps): JSX.Element => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.content}>

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

@@ -16,13 +16,13 @@ interface HorizontalImageCardProps {
   external?: boolean;
 }
 
-export const HorizontalImageCard: React.FC<HorizontalImageCardProps> = ({
+export const HorizontalImageCard = ({
   title,
   layoutClassName,
   external,
   link,
   iconOrImage,
-}) => {
+}: HorizontalImageCardProps): JSX.Element => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
       <div className={styles.imageOrIconContainer}>{iconOrImage}</div>

package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.tsx

@@ -17,14 +17,14 @@ interface ImageAndDetailsCardProps {
   layoutClassName?: string;
 }
 
-export const ImageAndDetailsCard: React.FC<ImageAndDetailsCardProps> = ({
+export const ImageAndDetailsCard = ({
   image,
   title,
   subHeader,
   introduction,
   link,
   layoutClassName,
-}) => {
+}: ImageAndDetailsCardProps): JSX.Element => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
       <div className={styles.image}>{image}</div>

package/src/components/card/infoCard/InfoCard.tsx

@@ -8,7 +8,7 @@ interface InfoCardProps {
   layoutClassName?: string;
 }
 
-export const InfoCard: React.FC<InfoCardProps> = ({ title, content, layoutClassName }) => {
+export const InfoCard = ({ title, content, layoutClassName }: InfoCardProps): JSX.Element => {
   return (
     <div className={clsx([layoutClassName && layoutClassName], styles.container)}>
       <span className={styles.title}>{title}</span>

package/src/components/card/richContentCard/RichContentCard.tsx

@@ -23,13 +23,13 @@ export interface RichContentCardProps {
   linkIsExternal?: boolean;
 }
 
-export const RichContentCard: React.FC<RichContentCardProps> = ({
+export const RichContentCard = ({
   link,
   labelsWithIcon,
   tags,
   contentLinks,
   linkIsExternal,
-}) => {
+}: RichContentCardProps): JSX.Element => {
   return (
     <div className={styles.container}>
       <div className={styles.link} onClick={() => navigate(link.href)}>
@@ -67,7 +67,7 @@ interface LabelWithIconProps {
   icon: JSX.Element;
 }
 
-const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
+const LabelWithIcon = ({ label, icon }: LabelWithIconProps): JSX.Element => {
   return (
     <div className={styles.labelWithIcon}>
       <span className={styles.labelWithIcon_icon}>{icon}</span>
@@ -82,7 +82,7 @@ interface ContentLinkProps {
   href: string;
 }
 
-const ContentLink: React.FC<ContentLinkProps> = ({ title, subTitle, href }) => {
+const ContentLink = ({ title, subTitle, href }: ContentLinkProps): JSX.Element => {
   return (
     <Link className={styles.contentLink}>
       <div className={styles.contentLink_content}>

package/src/components/codeBlock/CodeBlock.tsx

@@ -5,4 +5,4 @@ interface CodeBlockProps {
   codeBlock: string | JSX.Element;
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({ codeBlock }) => <div className={styles.code}>{codeBlock}</div>;
+export const CodeBlock = ({ codeBlock }: CodeBlockProps): JSX.Element => <div className={styles.code}>{codeBlock}</div>;

package/src/components/container/Container.tsx

@@ -6,6 +6,6 @@ interface ContainerProps {
   layoutClassName?: string;
 }
 
-export const Container: React.FC<ContainerProps> = ({ children, layoutClassName }) => (
+export const Container = ({ children, layoutClassName }: React.PropsWithChildren<ContainerProps>): JSX.Element => (
   <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>{children}</div>
 );

package/src/components/denhaag-wrappers/breadcrumbs/Breadcrumbs.tsx

@@ -17,7 +17,7 @@ interface BreadcrumbsProps {
   }[];
 }
 
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ crumbs }) => {
+export const Breadcrumbs = ({ crumbs }: BreadcrumbsProps): JSX.Element => {
   return (
     <nav aria-label="Breadcrumb" className="denhaag-breadcrumb">
       <ol className="denhaag-breadcrumb__list" itemScope itemType="https://schema.org/BreadcrumbList">
@@ -39,7 +39,7 @@ interface CrumbItemProps {
   idx: number;
 }
 
-const CrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
+const CrumbItem = ({ pathname, crumbLabel, idx }: CrumbItemProps): JSX.Element => (
   <li className="denhaag-breadcrumb__item" itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
     <Link className="denhaag-breadcrumb__link" to={pathname} itemProp="item">
       <span className="denhaag-breadcrumb__text" itemProp="name">
@@ -66,7 +66,7 @@ const CrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
   </li>
 );
 
-const LastCrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
+const LastCrumbItem = ({ pathname, crumbLabel, idx }: CrumbItemProps): JSX.Element => (
   <li
     aria-current="page"
     className="denhaag-breadcrumb__item"

package/src/components/denhaag-wrappers/pagination/Pagination.tsx

@@ -8,7 +8,7 @@ interface PaginationProps {
   setPage: (page: number) => any;
 }
 
-export const Pagination: React.FC<PaginationProps> = ({ pages, currentPage, setPage }) => {
+export const Pagination = ({ pages, currentPage, setPage }: PaginationProps): JSX.Element => {
   return (
     <nav className="denhaag-pagination">
       <PreviousButton previousPage={currentPage > 1 ? currentPage - 1 : undefined} {...{ setPage }} />
@@ -30,7 +30,7 @@ interface LinkProps {
   current?: boolean;
 }
 
-const Link: React.FC<LinkProps> = ({ page, current, setPage }) => {
+const Link = ({ page, current, setPage }: LinkProps): JSX.Element => {
   return (
     <a
       aria-current={current && "page"}
@@ -48,7 +48,7 @@ interface PreviousButtonProps {
   previousPage?: number;
 }
 
-const PreviousButton: React.FC<PreviousButtonProps> = ({ previousPage, setPage }) => {
+const PreviousButton = ({ previousPage, setPage }: PreviousButtonProps): JSX.Element => {
   return (
     <a
       aria-label="Previous page"
@@ -82,7 +82,7 @@ interface NextButtonProps {
   nextPage?: number;
 }
 
-const NextButton: React.FC<NextButtonProps> = ({ nextPage, setPage }) => {
+const NextButton = ({ nextPage, setPage }: NextButtonProps): JSX.Element => {
   return (
     <a
       aria-label="Next page"

package/src/components/editableTableRow/EditableTableRow.tsx

@@ -19,7 +19,7 @@ interface EditableTableRowProps {
   handleSave: (value: any) => void;
 }
 
-export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
+export const EditableTableRow = ({
   thead,
   value,
   inputType,
@@ -27,7 +27,7 @@ export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
   cancelLabel,
   saveLabel,
   handleSave,
-}) => {
+}: EditableTableRowProps & InputTypes): JSX.Element => {
   const [editing, setEditing] = React.useState<boolean>(false);
 
   return (
@@ -50,7 +50,7 @@ interface RegularTableRowProps {
   setEditing: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const RegularTableRow: React.FC<RegularTableRowProps> = ({ value, editLabel, setEditing }) => {
+const RegularTableRow = ({ value, editLabel, setEditing }: RegularTableRowProps): JSX.Element => {
   return (
     <>
       <TableCell>{value}</TableCell>
@@ -74,14 +74,14 @@ interface EditingTableRowProps {
   handleSave: (value: any) => void;
 }
 
-const EditingTableRow: React.FC<EditingTableRowProps & InputTypes> = ({
+const EditingTableRow = ({
   value,
   setEditing,
   handleSave,
   inputType,
   saveLabel,
   cancelLabel,
-}) => {
+}: EditingTableRowProps & InputTypes): JSX.Element => {
   const {
     register,
     handleSubmit,
@@ -128,7 +128,7 @@ interface FormFieldProps {
   };
 }
 
-const FormField: React.FC<FormFieldProps & InputTypes> = ({ inputType, value, register, errors }) => {
+const FormField = ({ inputType, value, register, errors }: FormFieldProps & InputTypes): JSX.Element => {
   switch (inputType) {
     case "email":
       return <InputEmail defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;

package/src/components/formFields/checkbox/checkbox.tsx

@@ -8,14 +8,14 @@ export interface ICheckboxProps {
   disabled?: boolean;
 }
 
-export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
+export const InputCheckbox = ({
   name,
   validation,
   register,
   label,
   defaultChecked,
   disabled,
-}) => (
+}: ICheckboxProps & IReactHookFormProps): JSX.Element => (
   <div className={styles.container}>
     <input
       type="checkbox"

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -21,14 +21,14 @@ export interface IKeyValue {
   value: string;
 }
 
-export const CreateKeyValue: React.FC<CreateKeyValueProps & IReactHookFormProps> = ({
+export const CreateKeyValue = ({
   name,
   errors,
   control,
   validation,
   defaultValue,
   disabled,
-}) => {
+}: CreateKeyValueProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, errors }}
@@ -49,7 +49,7 @@ interface CreateKeyValueComponentProps {
   disabled?: boolean;
 }
 
-const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValue, handleChange, disabled }) => {
+const KeyValueComponent = ({ defaultValue, handleChange, disabled }: CreateKeyValueComponentProps): JSX.Element => {
   const [currentKey, setCurrentKey] = React.useState<string>("");
   const [currentValue, setCurrentValue] = React.useState<string>("");
   const [keyValues, setKeyValues] = React.useState<IKeyValue[]>(defaultValue ?? []);

package/src/components/formFields/date/Date.tsx

@@ -12,13 +12,13 @@ interface IDateProps {
   disabled?: boolean;
 }
 
-export const InputDate: React.FC<IDateProps & IReactHookFormProps> = ({
+export const InputDate = ({
   name,
   errors,
   control,
   validation,
   disabled,
-}) => {
+}: IDateProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name }}

package/src/components/formFields/radio.tsx

@@ -7,13 +7,13 @@ interface IRadioProps {
   value: string;
 }
 
-export const InputRadio: React.FC<IRadioProps & IReactHookFormProps> = ({
+export const InputRadio = ({
   name,
   validation,
   register,
   label,
   value,
-}) => (
+}: IRadioProps & IReactHookFormProps): JSX.Element => (
   <FormControlLabel
     input={<input type="radio" {...{ value }} {...register(name, { ...validation })} />}
     {...{ label }}

package/src/components/formFields/select/select.tsx

@@ -15,7 +15,7 @@ interface ISelectProps {
   isClearable?: boolean;
 }
 
-export const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps> = ({
+export const SelectMultiple = ({
   name,
   options,
   errors,
@@ -23,7 +23,7 @@ export const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps> = ({
   validation,
   defaultValue,
   disabled,
-}) => {
+}: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -46,7 +46,7 @@ export const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps> = ({
   );
 };
 
-export const SelectCreate: React.FC<ISelectProps & IReactHookFormProps> = ({
+export const SelectCreate = ({
   name,
   options,
   errors,
@@ -54,7 +54,7 @@ export const SelectCreate: React.FC<ISelectProps & IReactHookFormProps> = ({
   validation,
   defaultValue,
   disabled,
-}) => {
+}: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, defaultValue }}
@@ -77,7 +77,7 @@ export const SelectCreate: React.FC<ISelectProps & IReactHookFormProps> = ({
   );
 };
 
-export const SelectSingle: React.FC<ISelectProps & IReactHookFormProps> = ({
+export const SelectSingle = ({
   name,
   options,
   errors,
@@ -86,7 +86,7 @@ export const SelectSingle: React.FC<ISelectProps & IReactHookFormProps> = ({
   isClearable,
   defaultValue,
   disabled,
-}) => {
+}: ISelectProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, defaultValue }}

package/src/components/formFields/textarea.tsx

@@ -8,11 +8,13 @@ export interface ITextAreaProps {
   defaultValue?: string;
 }
 
-export const Textarea: React.FC<ITextAreaProps & IReactHookFormProps> = ({
+export const Textarea = ({
   name,
   validation,
   register,
   errors,
   disabled,
   defaultValue,
-}) => <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />;
+}: ITextAreaProps & IReactHookFormProps): JSX.Element => (
+  <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
+);

package/src/components/imageDivider/ImageDivider.tsx

@@ -7,6 +7,6 @@ interface ImageDividerProps {
   layoutClassName: string;
 }
 
-export const ImageDivider: React.FC<ImageDividerProps> = ({ image, layoutClassName }) => {
+export const ImageDivider = ({ image, layoutClassName }: ImageDividerProps): JSX.Element => {
   return <img src={image} className={clsx(styles.divider, layoutClassName)} />;
 };

package/src/components/logo/Logo.tsx

@@ -8,7 +8,7 @@ interface LogoProps {
   href?: string;
 }
 
-export const AuthenticatedLogo: React.FC<LogoProps> = ({ layoutClassName, href }) => {
+export const AuthenticatedLogo = ({ layoutClassName, href }: LogoProps): JSX.Element => {
   return (
     <Link className={styles.logoContainer} to={href ?? "#"}>
       <div className={clsx(styles.authenticatedLogo, styles.logo, layoutClassName)} />
@@ -16,7 +16,7 @@ export const AuthenticatedLogo: React.FC<LogoProps> = ({ layoutClassName, href }
   );
 };
 
-export const UnauthenticatedLogo: React.FC<LogoProps> = ({ layoutClassName, href }) => {
+export const UnauthenticatedLogo = ({ layoutClassName, href }: LogoProps): JSX.Element => {
   return (
     <Link className={styles.logoContainer} to={href ?? "#"}>
       <div className={clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName)} />

package/src/components/metaIcon/MetaIcon.tsx

@@ -7,7 +7,7 @@ export interface MetaIconProps {
   value: string;
 }
 
-export const MetaIcon: React.FC<MetaIconProps> = ({ icon, label, value }) => (
+export const MetaIcon = ({ icon, label, value }: MetaIconProps): JSX.Element => (
   <div className={styles.container}>
     <span className={styles.icon}>{icon}</span>
 

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -25,7 +25,7 @@ export interface NotificationPopUpProps {
   layoutClassName?: string;
 }
 
-export const NotificationPopUp: React.FC<NotificationPopUpProps> = ({
+export const NotificationPopUp = ({
   title,
   description,
   isVisible,
@@ -33,7 +33,7 @@ export const NotificationPopUp: React.FC<NotificationPopUpProps> = ({
   primaryButton,
   secondaryButton,
   layoutClassName,
-}) => {
+}: NotificationPopUpProps): JSX.Element | null => {
   const [animationVisible, setAnimationVisible] = React.useState<boolean>(true);
 
   const animationDuration = parseInt(styles.animationDuration, 10);

package/src/components/privateRoute/PrivateRoute.tsx

@@ -5,7 +5,7 @@ interface PrivateRouteProps {
   authenticated: boolean;
 }
 
-export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, authenticated }) => {
+export const PrivateRoute = ({ children, authenticated }: React.PropsWithChildren<PrivateRouteProps>): JSX.Element => {
   const [_authenticated, setAuthenticated] = React.useState<boolean>(false);
 
   React.useEffect(() => {

package/src/components/quoteWrapper/QuoteWrapper.tsx

@@ -6,7 +6,11 @@ interface QuoteWrapperProps {
   borderWidth?: string;
 }
 
-export const QuoteWrapper: React.FC<QuoteWrapperProps> = ({ children, borderColor, borderWidth }) => {
+export const QuoteWrapper = ({
+  children,
+  borderColor,
+  borderWidth,
+}: React.PropsWithChildren<QuoteWrapperProps>): JSX.Element => {
   return (
     <div style={{ borderLeftColor: borderColor, borderLeftWidth: borderWidth }} className={styles.container}>
       {children}

package/src/components/statusSteps/StatusSteps.tsx

@@ -25,7 +25,7 @@ interface StatusStepsProps {
   steps: IStatusStep[];
 }
 
-export const StatusSteps: React.FC<StatusStepsProps> = ({ steps }) => {
+export const StatusSteps = ({ steps }: StatusStepsProps): JSX.Element => {
   return (
     <StepList>
       {steps.map(({ title, checked, current, expanded, subSteps }, idx) => (

package/src/components/tag/Tag.tsx

@@ -12,7 +12,7 @@ interface TagProps {
   layoutClassName?: string;
 }
 
-export const Tag: React.FC<TagProps> = ({ label, icon, onClick, remove, layoutClassName }) => (
+export const Tag = ({ label, icon, onClick, remove, layoutClassName }: TagProps): JSX.Element => (
   <div className={remove && styles.tagContainer}>
     <div
       className={clsx(

package/src/components/toolTip/ToolTip.tsx

@@ -10,7 +10,7 @@ interface ToolTipProps {
   layoutClassName?: string;
 }
 
-export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, tooltip }) => {
+export const ToolTip = ({ children, layoutClassName, tooltip }: React.PropsWithChildren<ToolTipProps>): JSX.Element => {
   return (
     <div className={clsx(styles.wrapper, layoutClassName && layoutClassName)}>
       <div data-tip={tooltip}>{children}</div>

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -24,7 +24,7 @@ export interface TopNavProps {
   layoutClassName?: string;
 }
 
-export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, mobileLogo, layoutClassName }) => {
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
   const handleItemClick = (handleClick?: () => any) => {

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.tsx

@@ -8,7 +8,7 @@ interface TopNavProps {
   layoutClassName?: string;
 }
 
-export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
+export const SecondaryTopNav = ({ items, layoutClassName }: TopNavProps): JSX.Element => {
   return (
     <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
       <nav>