@conduction/components 1.0.20 → 1.0.23

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

@@ -5,7 +5,7 @@ import * as styles from "./RichContentCard.module.css";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
 export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }) => (_jsx(LabelWithIcon, { ...{ label, icon } }))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }) => (_jsx(ContentLink, { ...{ title, subTitle, href } })))] }))] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, 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/denhaag-wrappers/pagination/Pagination.css

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

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

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

package/lib/components/denhaag-wrappers/pagination/Pagination.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import "./Pagination.css";
+export const Pagination = ({ pages, currentPage, setPage }) => {
+    return (_jsxs("nav", { className: "denhaag-pagination", children: [_jsx(PreviousButton, { previousPage: currentPage > 1 ? currentPage - 1 : undefined, ...{ setPage } }), _jsx("span", { className: "denhaag-pagination__links", role: "group", children: Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (_jsx(Link, { ...{ page }, current: page === currentPage, ...{ setPage } }, idx))) }), _jsx(NextButton, { nextPage: currentPage < pages ? currentPage + 1 : undefined, ...{ setPage } })] }));
+};
+const Link = ({ page, current, setPage }) => {
+    return (_jsx("a", { "aria-current": current && "page", "aria-label": `Page ${page}`, className: clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current"), onClick: () => setPage(page), children: page }));
+};
+const PreviousButton = ({ previousPage, setPage }) => {
+    return (_jsx("a", { "aria-label": "Previous page", className: clsx("denhaag-pagination__link denhaag-pagination__link--arrow", !previousPage && "denhaag-pagination__link--disabled"), onClick: () => previousPage && setPage(previousPage), rel: "prev", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z", fill: "currentColor" }) }) }));
+};
+const NextButton = ({ nextPage, setPage }) => {
+    return (_jsx("a", { "aria-label": "Next page", className: clsx("denhaag-pagination__link denhaag-pagination__link--arrow", !nextPage && "denhaag-pagination__link--disabled"), onClick: () => nextPage && setPage(nextPage), rel: "next", children: _jsx("svg", { "aria-hidden": "true", className: "denhaag-icon", fill: "none", height: "1em", viewBox: "0 0 7 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z", fill: "currentColor" }) }) }));
+};

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

@@ -4,6 +4,8 @@ export interface IInputProps {
     name: string;
     disabled?: boolean;
     defaultValue?: string;
+    icon?: JSX.Element;
+    placeholder?: string;
 }
 export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;

package/lib/components/formFields/input.js

@@ -2,12 +2,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, }) => {
+export const InputPassword = ({ disabled, name, validation, register, placeholder, 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, {}) }) }));
+    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...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 InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...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] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
 export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));

package/lib/index.d.ts

@@ -20,4 +20,5 @@ declare const NotificationPopUp: {
     NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
 };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-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, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, };
+import { Pagination } from "./components/denhaag-wrappers/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, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };

package/lib/index.js

@@ -13,4 +13,5 @@ import { Tag } from "./components/tag/Tag";
 import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-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, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, };
+import { Pagination } from "./components/denhaag-wrappers/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, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "1.0.20",
+  "version": "1.0.23",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

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

@@ -39,8 +39,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
       </div>
 
       <div className={styles.labelsWithIcon}>
-        {labelsWithIcon.map(({ label, icon }) => (
-          <LabelWithIcon {...{ label, icon }} />
+        {labelsWithIcon.map(({ label, icon }, idx) => (
+          <LabelWithIcon key={idx} {...{ label, icon }} />
         ))}
       </div>
 
@@ -53,8 +53,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
       {contentLinks && (
         <div className={styles.contentLinks}>
           <Divider />
-          {contentLinks.map(({ title, subTitle, href }) => (
-            <ContentLink {...{ title, subTitle, href }} />
+          {contentLinks.map(({ title, subTitle, href }, idx) => (
+            <ContentLink key={idx} {...{ title, subTitle, href }} />
           ))}
         </div>
       )}

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

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

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

@@ -0,0 +1,112 @@
+import clsx from "clsx";
+import * as React from "react";
+import "./Pagination.css";
+
+interface PaginationProps {
+  pages: number;
+  currentPage: number;
+  setPage: (page: number) => any;
+}
+
+export const Pagination: React.FC<PaginationProps> = ({ pages, currentPage, setPage }) => {
+  return (
+    <nav className="denhaag-pagination">
+      <PreviousButton previousPage={currentPage > 1 ? currentPage - 1 : undefined} {...{ setPage }} />
+
+      <span className="denhaag-pagination__links" role="group">
+        {Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (
+          <Link key={idx} {...{ page }} current={page === currentPage} {...{ setPage }} />
+        ))}
+      </span>
+
+      <NextButton nextPage={currentPage < pages ? currentPage + 1 : undefined} {...{ setPage }} />
+    </nav>
+  );
+};
+
+interface LinkProps {
+  page: number;
+  setPage: (page: number) => any;
+  current?: boolean;
+}
+
+const Link: React.FC<LinkProps> = ({ page, current, setPage }) => {
+  return (
+    <a
+      aria-current={current && "page"}
+      aria-label={`Page ${page}`}
+      className={clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current")}
+      onClick={() => setPage(page)}
+    >
+      {page}
+    </a>
+  );
+};
+
+interface PreviousButtonProps {
+  setPage: (page: number) => any;
+  previousPage?: number;
+}
+
+const PreviousButton: React.FC<PreviousButtonProps> = ({ previousPage, setPage }) => {
+  return (
+    <a
+      aria-label="Previous page"
+      className={clsx(
+        "denhaag-pagination__link denhaag-pagination__link--arrow",
+        !previousPage && "denhaag-pagination__link--disabled",
+      )}
+      onClick={() => previousPage && setPage(previousPage)}
+      rel="prev"
+    >
+      <svg
+        aria-hidden="true"
+        className="denhaag-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 7 12"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.9921 10.8143C5.36382 11.1914 5.97222 11.1914 6.34393 10.8143C6.7079 10.4451 6.70822 9.8521 6.34466 9.48248L3.36315 6.45123C2.98039 6.06209 2.98039 5.43791 3.36315 5.04877L6.34466 2.01752C6.70822 1.6479 6.7079 1.05492 6.34394 0.685696C5.97222 0.308599 5.36382 0.308599 4.9921 0.685695L0.692003 5.04799C0.308224 5.43732 0.308224 6.06268 0.692003 6.45201L4.9921 10.8143Z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  );
+};
+
+interface NextButtonProps {
+  setPage: (page: number) => any;
+  nextPage?: number;
+}
+
+const NextButton: React.FC<NextButtonProps> = ({ nextPage, setPage }) => {
+  return (
+    <a
+      aria-label="Next page"
+      className={clsx(
+        "denhaag-pagination__link denhaag-pagination__link--arrow",
+        !nextPage && "denhaag-pagination__link--disabled",
+      )}
+      onClick={() => nextPage && setPage(nextPage)}
+      rel="next"
+    >
+      <svg
+        aria-hidden="true"
+        className="denhaag-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 7 12"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2.0079 1.1857C1.63618 0.8086 1.02778 0.8086 0.656065 1.18569V1.18569C0.292103 1.55492 0.291779 2.1479 0.655339 2.51752L3.63685 5.54877C4.01961 5.93791 4.01961 6.56209 3.63686 6.95123L0.655339 9.98248C0.291779 10.3521 0.292102 10.9451 0.656065 11.3143V11.3143C1.02778 11.6914 1.63618 11.6914 2.0079 11.3143L6.308 6.95201C6.69178 6.56268 6.69178 5.93732 6.308 5.54799L2.0079 1.1857Z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  );
+};

package/src/components/formFields/input.tsx

@@ -1,12 +1,14 @@
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
-import { ShowIcon, HideIcon } from "@gemeente-denhaag/icons";
+import { ShowIcon, HideIcon, EmailIcon } from "@gemeente-denhaag/icons";
 import { IReactHookFormProps } from "./types";
 
 export interface IInputProps {
   name: string;
   disabled?: boolean;
   defaultValue?: string;
+  icon?: JSX.Element;
+  placeholder?: string;
 }
 
 export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -14,6 +16,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   name,
   validation,
   register,
+  placeholder,
   errors,
 }) => {
   const [showPassword, setShowPassword] = React.useState<boolean>(false);
@@ -21,7 +24,7 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   return (
     <TextField
       type={showPassword ? "text" : "password"}
-      {...{ disabled }}
+      {...{ disabled, placeholder }}
       {...register(name, { ...validation })}
       invalid={errors[name]}
       icon={<span onClick={() => setShowPassword(!showPassword)}>{showPassword ? <HideIcon /> : <ShowIcon />}</span>}
@@ -35,11 +38,13 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   defaultValue,
   validation,
   register,
+  icon,
+  placeholder,
   errors,
 }) => (
   <TextField
     type="text"
-    {...{ defaultValue, disabled }}
+    {...{ defaultValue, disabled, placeholder, icon }}
     {...register(name, { ...validation })}
     invalid={errors[name]}
   />
@@ -51,11 +56,13 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
   defaultValue,
   validation,
   register,
+  icon,
+  placeholder,
   errors,
 }) => (
   <TextField
     type="email"
-    {...{ defaultValue, disabled }}
+    {...{ defaultValue, disabled, placeholder, icon }}
     {...register(name, { ...validation })}
     invalid={errors[name]}
   />
@@ -83,11 +90,13 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   defaultValue,
   validation,
   register,
+  icon,
+  placeholder,
   errors,
 }) => (
   <TextField
     type="number"
-    {...{ defaultValue, disabled }}
+    {...{ defaultValue, disabled, placeholder, icon }}
     {...register(name, { ...validation })}
     invalid={errors[name]}
   />

package/src/index.ts

@@ -35,6 +35,7 @@ import {
 } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
+import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
 
 export {
   InputRadio,
@@ -68,4 +69,5 @@ export {
   Tag,
   NotificationPopUp,
   QuoteWrapper,
+  Pagination,
 };