@conduction/components 2.1.40 → 2.2.0

package/README.md

@@ -2,6 +2,20 @@
 
 ## Changelog
 
+- **Version 2.2 (breaking changes from 2.1.x)**
+
+  - 2.2.0:
+    - Removed Den Haag designTokensComponent.
+    - Removed Den Haag formControlLabel.
+    - Removed InputRadio component.
+    - Removed Den Haag stylesProvider.
+    - Removed Den Haag link.
+    - Removed Den Haag heading.
+    - Removed Den Haag paragraph.
+    - Removed Den Haag Table imports from CreateKeyValue component.
+    - Removed EditableTableRow component.
+    - Removed Den Haag divider.
+
 - **Version 2.1 (breaking changes from 2.0.x)**
 
   - 2.1.40:

package/lib/components/card/horizontalImageCard/HorizontalImageCard.js

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

package/lib/components/card/horizontalImageCard/HorizontalImageCard.module.css

@@ -10,7 +10,7 @@
   border-radius: var(--skeleton-border-radius-md);
 }
 
-.link {
+.linkContainer {
   display: flex;
   flex-direction: column;
   padding-block-start: var(--skeleton-size-lg);
@@ -32,3 +32,7 @@
   font-weight: var(--skeleton-font-weight-bold);
   font-size: var(--skeleton-font-size-xl);
 }
+
+.link > * {
+  margin-inline-end: 8px;
+}

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider } from "@gemeente-denhaag/divider";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
 import * as styles from "./RichContentCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { navigate } from "gatsby";
 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 }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.linkContainer, onClick: () => navigate(link.href), children: _jsxs(Link, { className: styles.link, children: [linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), link.label] }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx("hr", { className: styles.divider }), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
 };
 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 })] }));

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

@@ -14,18 +14,22 @@
   padding-block-end: var(--skeleton-size-md);
 }
 
-.container > *:not(.link):not(:last-child) {
+.container > *:not(.linkContainer):not(:last-child) {
   margin-block-end: var(--skeleton-size-md);
 }
 
-.link {
+.linkContainer {
   margin-block-end: var(--skeleton-size-xs);
 }
 
-.link > :first-child {
+.linkContainer > :first-child {
   display: flex;
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 .labelsWithIcon {
   display: flex;
   flex-wrap: wrap;
@@ -91,3 +95,9 @@
   font-size: var(--conduction-content-link-font-size);
   color: var(--denhaag-color-grey-3);
 }
+
+.divider {
+  width: 100%;
+  opacity: 0.5;
+  margin-block: var(--skeleton-size-lg);
+}

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
 import { Button } from "@gemeente-denhaag/button";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, } from "@utrecht/component-library-react/dist/css-module";
 import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -38,5 +38,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, })
     React.useEffect(() => {
         handleChange(keyValues);
     }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

package/lib/components/formFields/createKeyValue/CreateKeyValue.module.css

@@ -12,6 +12,15 @@
 
 .table {
   border-collapse: collapse;
+  background-color: var(--utrecht-table-background-color);
+}
+
+.tableHeader > * {
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid var(--utrecht-table-header-border-block-end-color);
+}
+
+.tableHeader {
+  font-family: var(--utrecht-table-header-font-family);
 }
 
 .table td,

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

@@ -1,8 +1,7 @@
 import { InputText, InputPassword, InputEmail, InputURL, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox/checkbox";
-import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue, IKeyValue } from "./createKeyValue/CreateKeyValue";
 import { InputDate } from "./date/Date";
-export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, SelectCreate, CreateKeyValue, IKeyValue, };
+export { InputText, InputPassword, InputEmail, InputURL, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, SelectCreate, CreateKeyValue, IKeyValue, };

package/lib/components/formFields/index.js

@@ -1,8 +1,7 @@
 import { InputText, InputPassword, InputEmail, InputURL, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox/checkbox";
-import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue } from "./createKeyValue/CreateKeyValue";
 import { InputDate } from "./date/Date";
-export { InputRadio, InputText, InputPassword, InputEmail, InputURL, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, SelectCreate, CreateKeyValue, };
+export { InputText, InputPassword, InputEmail, InputURL, InputDate, InputNumber, InputCheckbox, InputFile, Textarea, SelectSingle, SelectMultiple, SelectCreate, CreateKeyValue, };

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -3,11 +3,9 @@ import * as React from "react";
 import * as styles from "./NotificationPopUp.module.css";
 import ReactDOM from "react-dom";
 import { Button } from "@gemeente-denhaag/button";
-import { Heading3, Paragraph } from "@gemeente-denhaag/typography";
-import { Link } from "@gemeente-denhaag/link";
-import { StylesProvider } from "@gemeente-denhaag/stylesprovider";
 import clsx from "clsx";
 import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Heading3, Link, Paragraph } from "@utrecht/component-library-react";
 export const NotificationPopUp = ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }) => {
     const [animationVisible, setAnimationVisible] = React.useState(true);
     const animationDuration = parseInt(styles.animationDuration, 10);
@@ -19,7 +17,7 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), className: secondaryButton.layoutClassName, children: _jsx(Link, { icon: secondaryButton.icon ?? _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), className: primaryButton.layoutClassName, children: primaryButton.label })] })] }) }));
+    const modal = (_jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), className: secondaryButton.layoutClassName, children: _jsxs(Link, { className: styles.link, children: [secondaryButton.icon ?? _jsx(CloseIcon, {}), secondaryButton.label] }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), className: primaryButton.layoutClassName, children: primaryButton.label })] })] }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
 };
 export const NotificationPopUpController = () => {

package/lib/components/notificationPopUp/NotificationPopUp.module.css

@@ -36,6 +36,10 @@
   animation-name: fadeInBottom;
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 @keyframes fadeInBottom {
   from {
     opacity: 0;

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
@@ -13,5 +13,5 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
             setIsOpen(false);
         }
     };
-    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => handleItemClick(handleClick), className: clsx(styles.li, current && styles.current), children: [_jsx(Link, { className: clsx(styles.link, styles.label), icon: icon, iconAlign: "start", children: label }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsx(Link, { className: clsx(styles.link, styles.label), icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) })] }));
+    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => handleItemClick(handleClick), className: clsx(styles.li, current && styles.current), children: [_jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }) }, idx))) }))] }, idx))) }) })] }));
 };

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -93,6 +93,10 @@
   color: var(--conduction-primary-top-nav-color-hover);
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 .primary .li:hover .dropdown {
   display: block;
   z-index: 1;

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./SecondaryTopNav.module.css";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
 export const SecondaryTopNav = ({ items, layoutClassName }) => {
-    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsx(Link, { className: clsx(styles.link, styles.label), icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
+    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsxs(Link, { className: clsx(styles.link, styles.label), children: [icon, label] }) }, idx))) }) }) }));
 };

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -61,3 +61,7 @@
 .label > :not(:last-child) {
   margin-inline-end: var(--conduction-secondary-top-nav-item-icon-margin);
 }
+
+.link > * {
+  margin-inline-end: 8px;
+}

package/lib/custom.d copy.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.module.css";
+declare module "@utrecht/component-library-react/dist/css-module";

package/lib/custom.d copy.js

@@ -0,0 +1 @@
+"use strict";

package/lib/index.d.ts

@@ -2,8 +2,7 @@
 import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } 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, InputRadio, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -23,4 +22,4 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/lib/index.js

@@ -1,8 +1,7 @@
 import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, } 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, InputRadio, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
 import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
@@ -16,4 +15,4 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.40",
+  "version": "2.2.0",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -24,19 +24,12 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gemeente-denhaag/button": "0.2.3-alpha.205",
-    "@gemeente-denhaag/design-tokens-components": "0.2.3-alpha.222",
-    "@gemeente-denhaag/divider": "0.2.3-alpha.205",
     "@gemeente-denhaag/form-field": "0.1.1-alpha.98",
-    "@gemeente-denhaag/formcontrollabel": "0.2.3-alpha.222",
     "@gemeente-denhaag/icons": "^0.2.3-alpha.317",
-    "@gemeente-denhaag/link": "0.2.3-alpha.205",
     "@gemeente-denhaag/process-steps": "0.1.0-alpha.51",
     "@gemeente-denhaag/sidenav": "0.1.0-alpha.40",
-    "@gemeente-denhaag/stylesprovider": "0.1.1-alpha.222",
-    "@gemeente-denhaag/table": "0.1.1-alpha.123",
     "@gemeente-denhaag/textarea": "0.1.1-alpha.95",
     "@gemeente-denhaag/textfield": "0.2.3-alpha.205",
-    "@gemeente-denhaag/typography": "0.2.3-alpha.205",
     "@utrecht/component-library-react": "^1.0.0-alpha.319",
     "clsx": "^1.1.1",
     "gatsby": "^4.11.1",

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

@@ -10,7 +10,7 @@
   border-radius: var(--skeleton-border-radius-md);
 }
 
-.link {
+.linkContainer {
   display: flex;
   flex-direction: column;
   padding-block-start: var(--skeleton-size-lg);
@@ -32,3 +32,7 @@
   font-weight: var(--skeleton-font-weight-bold);
   font-size: var(--skeleton-font-size-xl);
 }
+
+.link > * {
+  margin-inline-end: 8px;
+}

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./HorizontalImageCard.module.css";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react";
 import { navigate } from "gatsby";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 
@@ -26,9 +26,10 @@ export const HorizontalImageCard = ({
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])} onClick={() => navigate(link.href)}>
       <div className={styles.imageOrIconContainer}>{iconOrImage}</div>
-      <div className={styles.link}>
+      <div className={styles.linkContainer}>
         <div className={styles.title}>{title}</div>
-        <Link icon={external ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
+        <Link className={styles.link}>
+          {external ? <ExternalLinkIcon /> : <ArrowRightIcon />}
           {link.label}
         </Link>
       </div>

package/src/components/card/richContentCard/RichContentCard.module.css

@@ -14,18 +14,22 @@
   padding-block-end: var(--skeleton-size-md);
 }
 
-.container > *:not(.link):not(:last-child) {
+.container > *:not(.linkContainer):not(:last-child) {
   margin-block-end: var(--skeleton-size-md);
 }
 
-.link {
+.linkContainer {
   margin-block-end: var(--skeleton-size-xs);
 }
 
-.link > :first-child {
+.linkContainer > :first-child {
   display: flex;
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 .labelsWithIcon {
   display: flex;
   flex-wrap: wrap;
@@ -91,3 +95,9 @@
   font-size: var(--conduction-content-link-font-size);
   color: var(--denhaag-color-grey-3);
 }
+
+.divider {
+  width: 100%;
+  opacity: 0.5;
+  margin-block: var(--skeleton-size-lg);
+}

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

@@ -1,8 +1,7 @@
-import { Divider } from "@gemeente-denhaag/divider";
-import { Link } from "@gemeente-denhaag/link";
-import { navigate } from "gatsby";
 import * as React from "react";
 import * as styles from "./RichContentCard.module.css";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { navigate } from "gatsby";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
 
@@ -33,8 +32,9 @@ export const RichContentCard = ({
 }: RichContentCardProps): JSX.Element => {
   return (
     <div className={styles.container}>
-      <div className={styles.link} onClick={() => navigate(link.href)}>
-        <Link icon={linkIsExternal ? <ExternalLinkIcon /> : <ArrowRightIcon />} iconAlign="start">
+      <div className={styles.linkContainer} onClick={() => navigate(link.href)}>
+        <Link className={styles.link}>
+          {linkIsExternal ? <ExternalLinkIcon /> : <ArrowRightIcon />}
           {link.label}
         </Link>
       </div>
@@ -53,7 +53,7 @@ export const RichContentCard = ({
 
       {contentLinks && (
         <div className={styles.contentLinks}>
-          <Divider />
+          <hr className={styles.divider} />
           {contentLinks.map(({ title, subTitle, href }, idx) => (
             <ContentLink key={idx} {...{ title, subTitle, href }} />
           ))}

package/src/components/formFields/createKeyValue/CreateKeyValue.module.css

@@ -12,6 +12,15 @@
 
 .table {
   border-collapse: collapse;
+  background-color: var(--utrecht-table-background-color);
+}
+
+.tableHeader > * {
+  border-block-end: var(--utrecht-table-header-border-block-end-width) solid var(--utrecht-table-header-border-block-end-color);
+}
+
+.tableHeader {
+  font-family: var(--utrecht-table-header-font-family);
 }
 
 .table td,

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

@@ -3,7 +3,14 @@ import * as styles from "./CreateKeyValue.module.css";
 import { Control, Controller, FieldValues } from "react-hook-form";
 import { IReactHookFormProps } from "../types";
 import { Button } from "@gemeente-denhaag/button";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeaderCell,
+  TableHeader,
+  TableRow,
+} from "@utrecht/component-library-react/dist/css-module";
 import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -110,13 +117,13 @@ const KeyValueComponent = ({
     <div className={styles.keyValue}>
       {keyValues && (
         <Table className={styles.table}>
-          <TableHead>
+          <TableHeader className={styles.tableHeader}>
             <TableRow>
-              <TableHeader>Key</TableHeader>
-              <TableHeader>Value</TableHeader>
-              <TableHeader />
+              <TableHeaderCell>Key</TableHeaderCell>
+              <TableHeaderCell>Value</TableHeaderCell>
+              <TableHeaderCell />
             </TableRow>
-          </TableHead>
+          </TableHeader>
           <TableBody>
             {keyValues.map((keyValue, idx) => (
               <TableRow key={`${keyValue.key}${keyValue.value}${idx}`}>

package/src/components/formFields/index.tsx

@@ -1,13 +1,11 @@
 import { InputText, InputPassword, InputEmail, InputURL, InputNumber, InputFile } from "./input";
 import { Textarea } from "./textarea";
 import { InputCheckbox } from "./checkbox/checkbox";
-import { InputRadio } from "./radio";
 import { SelectSingle, SelectMultiple, SelectCreate } from "./select/select";
 import { CreateKeyValue, IKeyValue } from "./createKeyValue/CreateKeyValue";
 import { InputDate } from "./date/Date";
 
 export {
-  InputRadio,
   InputText,
   InputPassword,
   InputEmail,

package/src/components/notificationPopUp/NotificationPopUp.module.css

@@ -36,6 +36,10 @@
   animation-name: fadeInBottom;
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 @keyframes fadeInBottom {
   from {
     opacity: 0;

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -2,11 +2,9 @@ import * as React from "react";
 import * as styles from "./NotificationPopUp.module.css";
 import ReactDOM from "react-dom";
 import { Button } from "@gemeente-denhaag/button";
-import { Heading3, Paragraph } from "@gemeente-denhaag/typography";
-import { Link } from "@gemeente-denhaag/link";
-import { StylesProvider } from "@gemeente-denhaag/stylesprovider";
 import clsx from "clsx";
 import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { Heading3, Link, Paragraph } from "@utrecht/component-library-react";
 
 export interface NotificationPopUpProps {
   title: string;
@@ -51,34 +49,33 @@ export const NotificationPopUp = ({
   };
 
   const modal = (
-    <StylesProvider>
-      <div
-        style={{ animationDuration: `${animationDuration}ms` }}
-        className={clsx(styles.modal, animationVisible && styles.visible, layoutClassName)}
-      >
-        <Heading3>{title}</Heading3>
+    <div
+      style={{ animationDuration: `${animationDuration}ms` }}
+      className={clsx(styles.modal, animationVisible && styles.visible, layoutClassName)}
+    >
+      <Heading3>{title}</Heading3>
 
-        <Paragraph>{description}</Paragraph>
+      <Paragraph>{description}</Paragraph>
 
-        <div className={styles.buttons}>
-          {secondaryButton && (
-            <div onClick={() => handleClick(secondaryButton.handleClick)} className={secondaryButton.layoutClassName}>
-              <Link icon={secondaryButton.icon ?? <CloseIcon />} iconAlign="start">
-                {secondaryButton.label}
-              </Link>
-            </div>
-          )}
+      <div className={styles.buttons}>
+        {secondaryButton && (
+          <div onClick={() => handleClick(secondaryButton.handleClick)} className={secondaryButton.layoutClassName}>
+            <Link className={styles.link}>
+              {secondaryButton.icon ?? <CloseIcon />}
+              {secondaryButton.label}
+            </Link>
+          </div>
+        )}
 
-          <Button
-            icon={primaryButton.icon ?? <ArrowRightIcon />}
-            onClick={() => handleClick(primaryButton.handleClick)}
-            className={primaryButton.layoutClassName}
-          >
-            {primaryButton.label}
-          </Button>
-        </div>
+        <Button
+          icon={primaryButton.icon ?? <ArrowRightIcon />}
+          onClick={() => handleClick(primaryButton.handleClick)}
+          className={primaryButton.layoutClassName}
+        >
+          {primaryButton.label}
+        </Button>
       </div>
-    </StylesProvider>
+    </div>
   );
 
   return isVisible ? ReactDOM.createPortal(modal, document.body) : null;

package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -93,6 +93,10 @@
   color: var(--conduction-primary-top-nav-color-hover);
 }
 
+.link > * {
+  margin-inline-end: 8px;
+}
+
 .primary .li:hover .dropdown {
   display: block;
   z-index: 1;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as styles from "./PrimaryTopNav.module.css";
 import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 
@@ -53,7 +53,8 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
               className={clsx(styles.li, current && styles.current)}
               key={idx}
             >
-              <Link className={clsx(styles.link, styles.label)} icon={icon} iconAlign="start">
+              <Link className={clsx(styles.link, styles.label)}>
+                {icon}
                 {label}
               </Link>
 
@@ -65,7 +66,8 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
                       className={clsx(styles.li, current && styles.current)}
                       onClick={() => handleItemClick(handleClick)}
                     >
-                      <Link className={clsx(styles.link, styles.label)} icon={icon} iconAlign="start">
+                      <Link className={clsx(styles.link, styles.label)}>
+                        {icon}
                         {label}
                       </Link>
                     </li>

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -61,3 +61,7 @@
 .label > :not(:last-child) {
   margin-inline-end: var(--conduction-secondary-top-nav-item-icon-margin);
 }
+
+.link > * {
+  margin-inline-end: 8px;
+}

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as styles from "./SecondaryTopNav.module.css";
-import { Link } from "@gemeente-denhaag/link";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
 import clsx from "clsx";
 
 interface TopNavProps {
@@ -15,7 +15,8 @@ export const SecondaryTopNav = ({ items, layoutClassName }: TopNavProps): JSX.El
         <ul className={styles.ul}>
           {items.map(({ label, icon, current, handleClick }, idx) => (
             <li className={clsx(styles.li, current && styles.current)} key={idx} onClick={handleClick}>
-              <Link className={clsx(styles.link, styles.label)} icon={icon} iconAlign="start">
+              <Link className={clsx(styles.link, styles.label)}>
+                {icon}
                 {label}
               </Link>
             </li>

package/src/index.ts

@@ -8,7 +8,6 @@ import {
 } 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,
@@ -17,7 +16,6 @@ import {
   InputNumber,
   Textarea,
   InputCheckbox,
-  InputRadio,
   InputFile,
   SelectMultiple,
   SelectSingle,
@@ -40,7 +38,6 @@ import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 
 export {
-  InputRadio,
   DownloadCard,
   HorizontalImageCard,
   ImageAndDetailsCard,
@@ -49,7 +46,6 @@ export {
   InfoCard,
   Container,
   Breadcrumbs,
-  EditableTableRow,
   InputText,
   InputPassword,
   InputEmail,

package/src/components/editableTableRow/EditableTableRow.js

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

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

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

package/src/components/editableTableRow/EditableTableRow.tsx

@@ -1,138 +0,0 @@
-import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
-import * as styles from "./EditableTableRow.module.css";
-import * as React from "react";
-import { Link } from "@gemeente-denhaag/link";
-import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
-import { FieldValues, useForm, UseFormRegister } from "react-hook-form";
-import { InputEmail, InputText } from "../formFields";
-
-interface InputTypes {
-  inputType: "text" | "email";
-}
-
-interface EditableTableRowProps {
-  thead: string;
-  value: string;
-  saveLabel: string;
-  cancelLabel: string;
-  editLabel: string;
-  handleSave: (value: any) => void;
-}
-
-export const EditableTableRow = ({
-  thead,
-  value,
-  inputType,
-  editLabel,
-  cancelLabel,
-  saveLabel,
-  handleSave,
-}: EditableTableRowProps & InputTypes): JSX.Element => {
-  const [editing, setEditing] = React.useState<boolean>(false);
-
-  return (
-    <TableRow>
-      <TableHeader className={styles.th}>{thead}</TableHeader>
-
-      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing, saveLabel, cancelLabel }} />}
-      {!editing && <RegularTableRow {...{ value, setEditing, editLabel }} />}
-    </TableRow>
-  );
-};
-
-/**
- * Specific rows based on editing (Regular: not editing & Editing: editing)
- */
-
-interface RegularTableRowProps {
-  value: string;
-  editLabel: string;
-  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const RegularTableRow = ({ value, editLabel, setEditing }: RegularTableRowProps): JSX.Element => {
-  return (
-    <>
-      <TableCell>{value}</TableCell>
-
-      <TableCell>
-        <div className={styles.editButton} onClick={() => setEditing(true)}>
-          <Link icon={<EditIcon />} iconAlign="start">
-            {editLabel}
-          </Link>
-        </div>
-      </TableCell>
-    </>
-  );
-};
-
-interface EditingTableRowProps {
-  value: string;
-  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
-  saveLabel: string;
-  cancelLabel: string;
-  handleSave: (value: any) => void;
-}
-
-const EditingTableRow = ({
-  value,
-  setEditing,
-  handleSave,
-  inputType,
-  saveLabel,
-  cancelLabel,
-}: EditingTableRowProps & InputTypes): JSX.Element => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm();
-
-  const onSubmit = (data: any): void => {
-    handleSave(data.value);
-    setEditing(false);
-  };
-
-  return (
-    <>
-      <TableCell>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <FormField {...{ inputType, value, register, errors }} />
-
-          <div className={styles.editButtonsContainer}>
-            <button type="submit" className={styles.submit}>
-              <Link icon={<CheckedIcon />} iconAlign="start">
-                {saveLabel}
-              </Link>
-            </button>
-
-            <div onClick={() => setEditing(false)}>
-              <Link icon={<CloseIcon />} iconAlign="start" className={styles.cancel}>
-                {cancelLabel}
-              </Link>
-            </div>
-          </div>
-        </form>
-      </TableCell>
-
-      <TableCell />
-    </>
-  );
-};
-
-interface FormFieldProps {
-  value: string;
-  register: UseFormRegister<FieldValues>;
-  errors: {
-    [x: string]: any;
-  };
-}
-
-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 }} />;
-    case "text":
-      return <InputText defaultValue={value} {...{ register, errors }} name="value" validation={{ required: true }} />;
-  }
-};

package/src/components/formFields/radio.tsx

@@ -1,21 +0,0 @@
-import { FormControlLabel } from "@gemeente-denhaag/formcontrollabel";
-import { IReactHookFormProps } from "./types";
-
-interface IRadioProps {
-  label: string;
-  name: string;
-  value: string;
-}
-
-export const InputRadio = ({
-  name,
-  validation,
-  register,
-  label,
-  value,
-}: IRadioProps & IReactHookFormProps): JSX.Element => (
-  <FormControlLabel
-    input={<input type="radio" {...{ value }} {...register(name, { ...validation })} />}
-    {...{ label }}
-  />
-);