@conduction/components 2.1.19 → 2.1.21

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

@@ -1,120 +1,120 @@
-.denhaag-pagination {
-  --denhaag-pagination-align: center;
-
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: var(--denhaag-pagination-align);
-}
-
-@media (min-width: 640px) {
-  .denhaag-pagination,
-  .denhaag-pagination--start {
-    --denhaag-pagination-align: flex-start;
-  }
-
-  .denhaag-pagination--center {
-    --denhaag-pagination-align: center;
-  }
-
-  .denhaag-pagination--end {
-    --denhaag-pagination-align: end;
-  }
-}
-
-.denhaag-pagination__links {
-  display: flex;
-  flex-direction: row;
-}
-
-.denhaag-pagination__link {
-  aspect-ratio: 1 / 1;
-  align-items: center;
-  background-color: var(--denhaag-pagination-background-color, transparent);
-  border: 0;
-  border-radius: var(
-    --denhaag-pagination-border-radius,
-    var(--denhaag-border-radius)
-  );
-  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
-  display: flex;
-  height: var(--denhaag-pagination-size);
-  justify-content: center;
-  line-height: 1.5;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  width: var(--denhaag-pagination-size);
-  font-style: normal;
-  font-weight: var(--denhaag-pagination-font-weight);
-  font-size: var(--denhaag-pagination-font-size);
-}
-
-.denhaag-pagination__link:hover,
-.denhaag-pagination__link--hover {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
-  cursor: pointer;
-}
-
-.denhaag-pagination__link:focus,
-.denhaag-pagination__link--focus {
-  outline: var(--denhaag-link-focus-outline);
-  border-radius: 0;
-}
-
-.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
-
-  pointer-events: none;
-}
-
-.denhaag-pagination__link--arrow {
-  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
-  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
-}
-
-[dir="rtl"] .denhaag-pagination__link--arrow {
-  transform: scaleX(-1);
-}
-
-.denhaag-pagination__link + .denhaag-pagination__links,
-.denhaag-pagination__links + .denhaag-pagination__link {
-  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
-  overflow: hidden;
-  pointer-events: none;
-  text-indent: calc(var(--denhaag-pagination-size) * 2);
-}
-
-.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
-  content: "...";
-  left: calc(50% - 7px);
-  line-height: 0;
-  position: absolute;
-  text-indent: 0;
-  vertical-align: baseline;
-}
-
-.denhaag-pagination__link--current {
-  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
-  --denhaag-pagination-font-weight: var(
-    --denhaag-pagination-link-current-font-weight
-  );
-}
-
-.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
-.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
-  --denhaag-pagination-color: var(
-    --denhaag-pagination-link-current-disabled-color
-  );
-  --denhaag-pagination-background-color: var(
-    --denhaag-pagination-link-current-disabled-background-color
-  );
-}
-
-.denhaag-pagination .denhaag-icon {
-  font-size: inherit;
-}
+.denhaag-pagination {
+  --denhaag-pagination-align: center;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: var(--denhaag-pagination-align);
+}
+
+@media (min-width: 640px) {
+  .denhaag-pagination,
+  .denhaag-pagination--start {
+    --denhaag-pagination-align: flex-start;
+  }
+
+  .denhaag-pagination--center {
+    --denhaag-pagination-align: center;
+  }
+
+  .denhaag-pagination--end {
+    --denhaag-pagination-align: end;
+  }
+}
+
+.denhaag-pagination__links {
+  display: flex;
+  flex-direction: row;
+}
+
+.denhaag-pagination__link {
+  aspect-ratio: 1 / 1;
+  align-items: center;
+  background-color: var(--denhaag-pagination-background-color, transparent);
+  border: 0;
+  border-radius: var(
+    --denhaag-pagination-border-radius,
+    var(--denhaag-border-radius)
+  );
+  color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
+  display: flex;
+  height: var(--denhaag-pagination-size);
+  justify-content: center;
+  line-height: 1.5;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  width: var(--denhaag-pagination-size);
+  font-style: normal;
+  font-weight: var(--denhaag-pagination-font-weight);
+  font-size: var(--denhaag-pagination-font-size);
+}
+
+.denhaag-pagination__link:hover,
+.denhaag-pagination__link--hover {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
+  cursor: pointer;
+}
+
+.denhaag-pagination__link:focus,
+.denhaag-pagination__link--focus {
+  outline: var(--denhaag-link-focus-outline);
+  border-radius: 0;
+}
+
+.denhaag-pagination__link:disabled,
+.denhaag-pagination__link--disabled {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
+
+  pointer-events: none;
+}
+
+.denhaag-pagination__link--arrow {
+  --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
+  --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
+}
+
+[dir="rtl"] .denhaag-pagination__link--arrow {
+  transform: scaleX(-1);
+}
+
+.denhaag-pagination__link + .denhaag-pagination__links,
+.denhaag-pagination__links + .denhaag-pagination__link {
+  margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
+}
+
+.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
+  overflow: hidden;
+  pointer-events: none;
+  text-indent: calc(var(--denhaag-pagination-size) * 2);
+}
+
+.denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  vertical-align: baseline;
+}
+
+.denhaag-pagination__link--current {
+  --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
+  --denhaag-pagination-font-weight: var(
+    --denhaag-pagination-link-current-font-weight
+  );
+}
+
+.denhaag-pagination__link--current.denhaag-pagination__link:disabled,
+.denhaag-pagination__link--current.denhaag-pagination__link--disabled {
+  --denhaag-pagination-color: var(
+    --denhaag-pagination-link-current-disabled-color
+  );
+  --denhaag-pagination-background-color: var(
+    --denhaag-pagination-link-current-disabled-background-color
+  );
+}
+
+.denhaag-pagination .denhaag-icon {
+  font-size: inherit;
+}

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.js

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

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

@@ -1,25 +1,25 @@
-.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;
-}
+.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

@@ -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.module.css

@@ -1,7 +1,7 @@
-.container {
-  user-select: none;
-}
-
-.container:hover {
-  cursor: pointer;
-}
+.container {
+  user-select: none;
+}
+
+.container:hover {
+  cursor: pointer;
+}

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.module.css

@@ -1,43 +1,56 @@
-:root {
-  --conduction-create-key-value-table-row-border: 1px solid var(--skeleton-color-grey-1);
-}
-
-.keyValue {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.table {
-  border-collapse: collapse;
-}
-
-.table td,
-.table th {
-  text-align: left;
-  padding-inline: 0;
-  padding-block: var(--skeleton-size-md);
-}
-
-.tdDelete {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.form {
-  width: 100%;
-  display: flex;
-}
-
-.form > *:not(:last-child) {
-  margin-right: 10px;
-}
-
-.form > input {
-  flex: 5;
-}
-
-.form > button {
-  flex: 2;
-  max-width: fit-content;
-}
+:root {
+  --conduction-create-key-value-table-row-border: 1px solid var(--skeleton-color-grey-1);
+  --conduction-delete-button-background-color: var(--skeleton-color-red-3);
+  --conduction-delete-button-background-hover-color: var(--skeleton-color-red-4);
+}
+
+.keyValue {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.table {
+  border-collapse: collapse;
+}
+
+.table td,
+.table th {
+  text-align: left;
+  padding-inline: 0;
+  padding-block: var(--skeleton-size-md);
+}
+
+.buttonsContainer {
+  display: flex;
+  gap: var(--skeleton-size-xs);
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  white-space: nowrap;
+  background-color: var(--conduction-delete-button-background-color) !important;
+}
+
+.deleteButton:hover {
+  white-space: nowrap;
+  background-color: var(--conduction-delete-button-background-hover-color) !important;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+}
+
+.form > *:not(:last-child) {
+  margin-right: 10px;
+}
+
+.form > input {
+  flex: 5;
+}
+
+.form > button {
+  flex: 2;
+  max-width: fit-content;
+}