@conduction/components 1.0.2

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

@@ -0,0 +1,222 @@
+.denhaag-breadcrumb {
+  --denhaag-breadcrumb-chevron-display: none;
+  --denhaag-breadcrumb-link-background-color: transparent;
+  --denhaag-breadcrumb-link-icon-content: "";
+  --denhaag-breadcrumb-link-pointer-events: bounding-box;
+  --denhaag-breadcrumb-item-display: none;
+
+  background-color: var(--denhaag-breadcrumb-background-color, transparent);
+  color: var(--denhaag-breadcrumb-color, inherit);
+  padding-block-end: var(--denhaag-breadcrumb-padding-block);
+  padding-block-start: var(--denhaag-breadcrumb-padding-block);
+  padding-inline-end: var(--denhaag-breadcrumb-padding-inline);
+  padding-inline-start: var(--denhaag-breadcrumb-padding-inline);
+}
+
+.denhaag-breadcrumb__list {
+  block-size: 100%;
+  display: flex;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: auto;
+  margin-inline-start: auto;
+  max-width: var(--denhaag-breadcrumb-list-max-width, 100%);
+}
+
+ol.denhaag-breadcrumb__list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.denhaag-breadcrumb__item {
+  align-items: center;
+  display: var(--denhaag-breadcrumb-item-display);
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2) {
+  --denhaag-breadcrumb-item-display: flex;
+}
+
+.denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  background: var(--denhaag-breadcrumb-link-color);
+  clip-path: path(
+    "M6.756 12.0899C6.43057 12.4153 5.90293 12.4153 5.57749 12.0899L0.577491 7.0899C0.421212 6.93362 0.333414 6.72166 0.333414 6.50065C0.333414 6.27964 0.421212 6.06767 0.577491 5.91139L5.57749 0.911394C5.90293 0.585957 6.43057 0.585957 6.756 0.911394C7.08144 1.23683 7.08144 1.76447 6.756 2.08991L3.17859 5.66732L12.8334 5.66732C13.2937 5.66732 13.6667 6.04041 13.6667 6.50065C13.6667 6.96089 13.2937 7.33398 12.8334 7.33398L3.17859 7.33398L6.756 10.9114C7.08144 11.2368 7.08144 11.7645 6.756 12.0899Z"
+  );
+  content: var(--denhaag-breadcrumb-link-icon-content);
+  height: var(
+    --denhaag-breadcrumb-link-icon-height,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  margin-inline-end: var(
+    --denhaag-breadcrumb-link-icon-margin-inline,
+    var(--denhaag-breadcrumb-link-icon-width)
+  );
+  width: var(--denhaag-breadcrumb-link-icon-width);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child) {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child):hover {
+  --denhaag-breadcrumb-link-background-color: var(
+    --denhaag-breadcrumb-dots-hover-background-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link {
+  align-items: center;
+  color: var(--denhaag-breadcrumb-link-color, inherit);
+  display: flex;
+  padding-block-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-block-end: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  padding-inline-end: var(--denhaag-breadcrumb-spacing, 8px);
+  pointer-events: var(--denhaag-breadcrumb-link-pointer-events);
+  position: relative;
+}
+
+.denhaag-breadcrumb__link:hover,
+.denhaag-breadcrumb__link--hover {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-hover-color,
+    inherit
+  );
+}
+
+.denhaag-breadcrumb__link:focus,
+.denhaag-breadcrumb__link--focus {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-link-focus-color,
+    inherit
+  );
+
+  outline: var(
+    --denhaag-breadcrumb-link-focus-outline,
+    var(--denhaag-link-focus-outline)
+  );
+}
+
+.denhaag-breadcrumb__link--current,
+.denhaag-breadcrumb__link.denhaag-link--current,
+.denhaag-breadcrumb__item:last-child > .denhaag-breadcrumb__link {
+  --denhaag-breadcrumb-link-color: var(
+    --denhaag-breadcrumb-current-color,
+    var(--denhaag-breadcrumb-color, inherit)
+  );
+
+  text-decoration: none;
+}
+
+.denhaag-breadcrumb__link:not(.denhaag-breadcrumb__link--current):not(.denhaag-breadcrumb__link.denhaag-link--current):not(:last-child
+    > .denhaag-breadcrumb__link)
+  > :first-child {
+  pointer-events: bounding-box;
+}
+
+/* SVG for the separator */
+.denhaag-breadcrumb__link > .denhaag-icon + .denhaag-icon,
+.denhaag-breadcrumb__link > .denhaag-breadcrumb__text + .denhaag-icon {
+  color: initial;
+  font-size: inherit;
+  display: var(--denhaag-breadcrumb-chevron-display);
+  margin-inline-start: var(--denhaag-breadcrumb-spacing, 8px);
+  margin-inline-end: calc(-1 * var(--denhaag-breadcrumb-spacing, 8px));
+}
+
+[dir="rtl"]
+  .denhaag-breadcrumb__link
+  > .denhaag-breadcrumb__text
+  + .denhaag-icon,
+[dir="rtl"]
+  .denhaag-breadcrumb__item:nth-last-child(2)
+  > .denhaag-breadcrumb__link::before {
+  transform: scaleX(-1);
+}
+
+.denhaag-breadcrumb__text {
+  background-color: var(--denhaag-breadcrumb-link-background-color);
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text {
+  aspect-ratio: 24/16;
+  border-radius: var(
+    --denhaag-breadcrumb-dots-border-radius,
+    var(--denhaag-border-radius)
+  );
+  max-width: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+  text-indent: calc(var(--denhaag-breadcrumb-spacing, 8px) * 3);
+}
+
+.denhaag-breadcrumb__item:not(:first-child):not(:nth-last-child(2)):not(:last-child)
+  .denhaag-breadcrumb__text::before {
+  color: var(--denhaag-breadcrumb-dots-color, inherit);
+  content: "...";
+  left: calc(50% - 7px);
+  line-height: 0;
+  position: absolute;
+  text-indent: 0;
+  top: calc(50% - 5px);
+  vertical-align: baseline;
+}
+
+@media (min-width: 481px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-chevron-display: inline-block;
+    --denhaag-breadcrumb-link-icon-content: unset;
+    --denhaag-breadcrumb-link-pointer-events: none;
+    --denhaag-breadcrumb-padding-block: var(
+      --denhaag-breadcrumb-padding-block-md
+    );
+  }
+
+  .denhaag-breadcrumb__item:not(:nth-last-child(2)) {
+    --denhaag-breadcrumb-item-display: flex;
+  }
+}
+
+@media (min-width: 1124px) {
+  .denhaag-breadcrumb {
+    --denhaag-breadcrumb-padding-inline: 0;
+  }
+}
+
+:root {
+  --denhaag-breadcrumb-link-hover-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-focus-color: var(--denhaag-color-blue-4);
+  --denhaag-breadcrumb-link-color: var(--denhaag-color-blue-3);
+  --denhaag-breadcrumb-dots-hover-background-color: var(--denhaag-color-grey-2);
+  --denhaag-breadcrumb-dots-color: var(--denhaag-color-grey-3);
+  --denhaag-breadcrumb-dots-border-radius: var(--denhaag-border-radius);
+  --denhaag-breadcrumb-dots-background-color: var(--denhaag-color-grey-1);
+  --denhaag-breadcrumb-current-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-spacing: var(--denhaag-space-inline-xs);
+  --denhaag-breadcrumb-color: var(--denhaag-color-grey-4);
+  --denhaag-breadcrumb-background-color: var(--denhaag-color-warmgrey-1);
+  --denhaag-breadcrumb-link-focus-outline: var(--denhaag-focus-border);
+  --utrecht-breadcrumb-item-padding-inline-start: 14px;
+  --utrecht-breadcrumb-item-padding-inline-end: 14px;
+  --utrecht-breadcrumb-divider-inline-size: 24px;
+  --utrecht-breadcrumb-divider-content: ›;
+  --denhaag-breadcrumb-list-max-width: 67.5rem;
+  --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem;
+  --denhaag-breadcrumb-link-icon-width: 0.875rem;
+  --denhaag-breadcrumb-link-icon-height: 0.875rem;
+  --denhaag-breadcrumb-padding-inline: 0.75rem;
+  --denhaag-breadcrumb-padding-block-md: 0.75rem;
+  --denhaag-breadcrumb-padding-block: 1rem;
+  --utrecht-breadcrumb-link-focus-color: var(--denhaag-color-blue-3);
+  --utrecht-breadcrumb-link-color: var(--denhaag-color-blue-4);
+  --utrecht-breadcrumb-font-size: var(
+    --denhaag-typography-scale-base-font-size
+  );
+}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
+ *
+ * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
+ *
+ * Note: we do not use css modules here due to this component being a wrapper
+ */
+import { Link } from "gatsby";
+import "./Breadcrumbs.css";
+export const Breadcrumbs = ({ crumbs }) => {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: "denhaag-breadcrumb", children: _jsx("ol", { className: "denhaag-breadcrumb__list", itemScope: true, itemType: "https://schema.org/BreadcrumbList", children: crumbs.map((crumb, idx) => {
+                if (crumbs.length !== idx + 1) {
+                    return _jsx(CrumbItem, { ...crumb, ...{ idx } }, idx);
+                }
+                return _jsx(LastCrumbItem, { ...crumb, ...{ idx } }, idx);
+            }) }) }));
+};
+const CrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { className: "denhaag-breadcrumb__link", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", focusable: "false", height: "1em", "shape-rendering": "auto", viewBox: "0 0 24 24", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z", fill: "currentColor" }) }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));
+const LastCrumbItem = ({ pathname, crumbLabel, idx }) => (_jsx("li", { "aria-current": "page", className: "denhaag-breadcrumb__item", itemProp: "itemListElement", itemScope: true, itemType: "https://schema.org/ListItem", children: _jsxs(Link, { "aria-current": "page", className: "denhaag-breadcrumb__link denhaag-breadcrumb__link--current", to: pathname, itemProp: "item", children: [_jsx("span", { className: "denhaag-breadcrumb__text", itemProp: "name", children: crumbLabel }), _jsx("meta", { content: idx.toString(), itemProp: "position" })] }) }));

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

@@ -0,0 +1,89 @@
+/**
+ * This is a wrapper element based on https://nl-design-system.github.io/denhaag/?path=/docs/css-navigation-breadcrumb--default-story
+ *
+ * IMPORTANT: DO NOT MAKE CHANGES TO THIS FILE, AS ALL CHANGES WILL BE LOST UPON PACKAGE IMPLEMENTATION
+ *
+ * Note: we do not use css modules here due to this component being a wrapper
+ */
+
+import { Link } from "gatsby";
+import * as React from "react";
+import "./Breadcrumbs.css";
+
+interface BreadcrumbsProps {
+  crumbs: {
+    pathname: string;
+    crumbLabel: string;
+  }[];
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ crumbs }) => {
+  return (
+    <nav aria-label="Breadcrumb" className="denhaag-breadcrumb">
+      <ol className="denhaag-breadcrumb__list" itemScope itemType="https://schema.org/BreadcrumbList">
+        {crumbs.map((crumb, idx) => {
+          if (crumbs.length !== idx + 1) {
+            return <CrumbItem key={idx} {...crumb} {...{ idx }} />;
+          }
+
+          return <LastCrumbItem key={idx} {...crumb} {...{ idx }} />;
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+interface CrumbItemProps {
+  pathname: string;
+  crumbLabel: string;
+  idx: number;
+}
+
+const CrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
+  <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">
+        {crumbLabel}
+      </span>
+      <svg
+        aria-hidden="true"
+        className="denhaag-icon"
+        fill="none"
+        focusable="false"
+        height="1em"
+        shape-rendering="auto"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.293 18.707a1 1 0 010-1.414L14.586 12 9.293 6.707a1 1 0 011.414-1.414l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0z"
+          fill="currentColor"
+        />
+      </svg>
+      <meta content={idx.toString()} itemProp="position" />
+    </Link>
+  </li>
+);
+
+const LastCrumbItem: React.FC<CrumbItemProps> = ({ pathname, crumbLabel, idx }) => (
+  <li
+    aria-current="page"
+    className="denhaag-breadcrumb__item"
+    itemProp="itemListElement"
+    itemScope
+    itemType="https://schema.org/ListItem"
+  >
+    <Link
+      aria-current="page"
+      className="denhaag-breadcrumb__link denhaag-breadcrumb__link--current"
+      to={pathname}
+      itemProp="item"
+    >
+      <span className="denhaag-breadcrumb__text" itemProp="name">
+        {crumbLabel}
+      </span>
+      <meta content={idx.toString()} itemProp="position" />
+    </Link>
+  </li>
+);

package/src/components/editableTableRow/EditableTableRow.js

@@ -0,0 +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 } });
+    }
+};

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

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

package/src/components/editableTableRow/EditableTableRow.tsx

@@ -0,0 +1,130 @@
+import { TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import * as styles from "./EditableTableRow.module.css";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "@gemeente-denhaag/components-react";
+import { CheckedIcon, CloseIcon, EditIcon } from "@gemeente-denhaag/icons";
+import { FieldValues, useForm, UseFormRegister } from "react-hook-form";
+import { InputEmail, InputText } from "../formFields";
+
+interface InputTypes {
+  inputType: "text" | "email";
+}
+
+interface EditableTableRowProps {
+  thead: string;
+  value: string;
+  handleSave: (value: any) => void;
+}
+
+export const EditableTableRow: React.FC<EditableTableRowProps & InputTypes> = ({
+  thead,
+  value,
+  inputType,
+  handleSave,
+}) => {
+  const [editing, setEditing] = React.useState<boolean>(false);
+
+  return (
+    <TableRow>
+      <TableHeader className={styles.th}>{thead}</TableHeader>
+
+      {editing && <EditingTableRow {...{ value, inputType, handleSave, setEditing }} />}
+      {!editing && <RegularTableRow {...{ value, setEditing }} />}
+    </TableRow>
+  );
+};
+
+/**
+ * Specific rows based on editing (Regular: not editing & Editing: editing)
+ */
+
+interface SpecificRowsProps {
+  value: string;
+  setEditing: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const RegularTableRow: React.FC<SpecificRowsProps> = ({ value, setEditing }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <TableCell>{value}</TableCell>
+
+      <TableCell>
+        <div className={styles.editButton} onClick={() => setEditing(true)}>
+          <Link icon={<EditIcon />} iconAlign="start">
+            {t("Edit")}
+          </Link>
+        </div>
+      </TableCell>
+    </>
+  );
+};
+
+interface EditingTableRowProps {
+  handleSave: (value: any) => void;
+}
+
+const EditingTableRow: React.FC<SpecificRowsProps & EditingTableRowProps & InputTypes> = ({
+  value,
+  setEditing,
+  handleSave,
+  inputType,
+}) => {
+  const { t } = useTranslation();
+
+  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">
+                {t("Save")}
+              </Link>
+            </button>
+
+            <div onClick={() => setEditing(false)}>
+              <Link icon={<CloseIcon />} iconAlign="start" className={styles.cancel}>
+                {t("Cancel")}
+              </Link>
+            </div>
+          </div>
+        </form>
+      </TableCell>
+
+      <TableCell />
+    </>
+  );
+};
+
+interface FormFieldProps {
+  value: string;
+  register: UseFormRegister<FieldValues>;
+  errors: {
+    [x: string]: any;
+  };
+}
+
+const FormField: React.FC<FormFieldProps & InputTypes> = ({ inputType, value, register, errors }) => {
+  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/checkbox.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+export const InputCheckbox = ({ name, validation, register, label, }) => _jsx(FormControlLabel, { input: _jsx("input", { type: "checkbox", ...register(name, { ...validation }) }), ...{ label } });

package/src/components/formFields/checkbox.tsx

@@ -0,0 +1,9 @@
+import { FormControlLabel } from "@gemeente-denhaag/components-react";
+import { ICheckboxProps, IReactHookFormProps } from "./types";
+
+export const InputCheckbox: React.FC<ICheckboxProps & IReactHookFormProps> = ({
+  name,
+  validation,
+  register,
+  label,
+}) => <FormControlLabel input={<input type="checkbox" {...register(name, { ...validation })} />} {...{ label }} />;

package/src/components/formFields/index.js

@@ -0,0 +1,4 @@
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/index.tsx

@@ -0,0 +1,5 @@
+import { InputText, InputPassword, InputEmail, InputDate, InputNumber } from "./input";
+import { Textarea } from "./textarea";
+import { InputCheckbox } from "./checkbox";
+
+export { InputText, InputPassword, InputEmail, InputDate, InputNumber, InputCheckbox, Textarea };

package/src/components/formFields/input.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { TextField } from "@gemeente-denhaag/components-react";
+import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+export const InputPassword = ({ disabled, name, validation, register, errors, }) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(HideIcon, {}) : _jsx(ShowIcon, {}) }) }));
+};
+export const InputText = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputDate = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "date", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled }, ...register(name, { ...validation }), invalid: errors[name] }));

package/src/components/formFields/input.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { TextField } from "@gemeente-denhaag/components-react";
+import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+import { IInputProps, IReactHookFormProps } from "./types";
+
+export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  validation,
+  register,
+  errors,
+}) => {
+  const [showPassword, setShowPassword] = React.useState<boolean>(false);
+
+  return (
+    <TextField
+      type={showPassword ? "text" : "password"}
+      {...{ disabled }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+      icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
+    />
+  );
+};
+
+export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  errors,
+}) => (
+  <TextField
+    type="text"
+    {...{ defaultValue, disabled }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  errors,
+}) => (
+  <TextField
+    type="email"
+    {...{ defaultValue, disabled }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputDate: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  errors,
+}) => (
+  <TextField
+    type="date"
+    {...{ defaultValue, disabled }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);
+
+export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
+  disabled,
+  name,
+  defaultValue,
+  validation,
+  register,
+  errors,
+}) => (
+  <TextField
+    type="number"
+    {...{ defaultValue, disabled }}
+    {...register(name, { ...validation })}
+    invalid={errors[name]}
+  />
+);

package/src/components/formFields/textarea.js

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

package/src/components/formFields/textarea.tsx

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

package/src/components/formFields/types.js

@@ -0,0 +1 @@
+export {};