@conduction/components 1.0.21 → 1.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +5 -0
  2. package/lib/components/card/richContentCard/RichContentCard.js +1 -1
  3. package/lib/components/denhaag-wrappers/pagination/Pagination.css +120 -0
  4. package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts +9 -0
  5. package/lib/components/denhaag-wrappers/pagination/Pagination.js +15 -0
  6. package/lib/index.d.ts +2 -1
  7. package/lib/index.js +2 -1
  8. package/package.json +1 -1
  9. package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css +5 -0
  10. package/src/components/card/richContentCard/RichContentCard.tsx +4 -4
  11. package/src/components/denhaag-wrappers/pagination/Pagination.css +120 -0
  12. package/src/components/denhaag-wrappers/pagination/Pagination.tsx +112 -0
  13. package/src/index.ts +2 -0
package/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css CHANGED
@@ -22,6 +22,11 @@
22
22
  padding-block-start: var(--nlportal-space-block-lg);
23
23
  padding-block-end: var(--nlportal-space-block-lg);
24
24
  border: var(--nlportal-document-border, 1px solid);
25
+ height: calc(
26
+ 100% - var(--conduction-image-and-details-card-image-height) -
27
+ var(--nlportal-space-block-lg) - var(--nlportal-space-block-lg) - 2px
28
+ ); /* height = 100% - imageHeight - padding - border */
29
+ margin-block-start: auto;
25
30
  }
26
31
 
27
32
  .content > *:not(:last-child) {
package/lib/components/card/richContentCard/RichContentCard.js CHANGED
@@ -5,7 +5,7 @@ import * as styles from "./RichContentCard.module.css";
5
5
  import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
6
6
  import { Tag } from "../../tag/Tag";
7
7
  export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
8
- 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 } })))] }))] }));
8
+ 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)))] }))] }));
9
9
  };
10
10
  const LabelWithIcon = ({ label, icon }) => {
11
11
  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 ADDED
@@ -0,0 +1,120 @@
1
+ .denhaag-pagination {
2
+ --denhaag-pagination-align: center;
3
+
4
+ align-items: center;
5
+ display: flex;
6
+ flex-direction: row;
7
+ justify-content: var(--denhaag-pagination-align);
8
+ }
9
+
10
+ @media (min-width: 640px) {
11
+ .denhaag-pagination,
12
+ .denhaag-pagination--start {
13
+ --denhaag-pagination-align: flex-start;
14
+ }
15
+
16
+ .denhaag-pagination--center {
17
+ --denhaag-pagination-align: center;
18
+ }
19
+
20
+ .denhaag-pagination--end {
21
+ --denhaag-pagination-align: end;
22
+ }
23
+ }
24
+
25
+ .denhaag-pagination__links {
26
+ display: flex;
27
+ flex-direction: row;
28
+ }
29
+
30
+ .denhaag-pagination__link {
31
+ aspect-ratio: 1 / 1;
32
+ align-items: center;
33
+ background-color: var(--denhaag-pagination-background-color, transparent);
34
+ border: 0;
35
+ border-radius: var(
36
+ --denhaag-pagination-border-radius,
37
+ var(--denhaag-border-radius)
38
+ );
39
+ color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
40
+ display: flex;
41
+ height: var(--denhaag-pagination-size);
42
+ justify-content: center;
43
+ line-height: 1.5;
44
+ position: relative;
45
+ text-align: center;
46
+ text-decoration: none;
47
+ width: var(--denhaag-pagination-size);
48
+ font-style: normal;
49
+ font-weight: var(--denhaag-pagination-font-weight);
50
+ font-size: var(--denhaag-pagination-font-size);
51
+ }
52
+
53
+ .denhaag-pagination__link:hover,
54
+ .denhaag-pagination__link--hover {
55
+ --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
56
+ cursor: pointer;
57
+ }
58
+
59
+ .denhaag-pagination__link:focus,
60
+ .denhaag-pagination__link--focus {
61
+ outline: var(--denhaag-link-focus-outline);
62
+ border-radius: 0;
63
+ }
64
+
65
+ .denhaag-pagination__link:disabled,
66
+ .denhaag-pagination__link--disabled {
67
+ --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
68
+
69
+ pointer-events: none;
70
+ }
71
+
72
+ .denhaag-pagination__link--arrow {
73
+ --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
74
+ --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
75
+ }
76
+
77
+ [dir="rtl"] .denhaag-pagination__link--arrow {
78
+ transform: scaleX(-1);
79
+ }
80
+
81
+ .denhaag-pagination__link + .denhaag-pagination__links,
82
+ .denhaag-pagination__links + .denhaag-pagination__link {
83
+ margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
84
+ }
85
+
86
+ .denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
87
+ overflow: hidden;
88
+ pointer-events: none;
89
+ text-indent: calc(var(--denhaag-pagination-size) * 2);
90
+ }
91
+
92
+ .denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
93
+ content: "...";
94
+ left: calc(50% - 7px);
95
+ line-height: 0;
96
+ position: absolute;
97
+ text-indent: 0;
98
+ vertical-align: baseline;
99
+ }
100
+
101
+ .denhaag-pagination__link--current {
102
+ --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
103
+ --denhaag-pagination-font-weight: var(
104
+ --denhaag-pagination-link-current-font-weight
105
+ );
106
+ }
107
+
108
+ .denhaag-pagination__link--current.denhaag-pagination__link:disabled,
109
+ .denhaag-pagination__link--current.denhaag-pagination__link--disabled {
110
+ --denhaag-pagination-color: var(
111
+ --denhaag-pagination-link-current-disabled-color
112
+ );
113
+ --denhaag-pagination-background-color: var(
114
+ --denhaag-pagination-link-current-disabled-background-color
115
+ );
116
+ }
117
+
118
+ .denhaag-pagination .denhaag-icon {
119
+ font-size: inherit;
120
+ }
package/lib/components/denhaag-wrappers/pagination/Pagination.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ import "./Pagination.css";
3
+ interface PaginationProps {
4
+ pages: number;
5
+ currentPage: number;
6
+ setPage: (page: number) => any;
7
+ }
8
+ export declare const Pagination: React.FC<PaginationProps>;
9
+ export {};
package/lib/components/denhaag-wrappers/pagination/Pagination.js ADDED
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import clsx from "clsx";
3
+ import "./Pagination.css";
4
+ export const Pagination = ({ pages, currentPage, setPage }) => {
5
+ 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 } })] }));
6
+ };
7
+ const Link = ({ page, current, setPage }) => {
8
+ 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 }));
9
+ };
10
+ const PreviousButton = ({ previousPage, setPage }) => {
11
+ 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" }) }) }));
12
+ };
13
+ const NextButton = ({ nextPage, setPage }) => {
14
+ 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" }) }) }));
15
+ };
package/lib/index.d.ts CHANGED
@@ -20,4 +20,5 @@ declare const NotificationPopUp: {
20
20
  NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
21
21
  };
22
22
  import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
23
- 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, };
23
+ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
24
+ 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 CHANGED
@@ -13,4 +13,5 @@ import { Tag } from "./components/tag/Tag";
13
13
  import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
14
14
  const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
15
15
  import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
16
- 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, };
16
+ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
17
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "1.0.21",
3
+ "version": "1.0.24",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css CHANGED
@@ -22,6 +22,11 @@
22
22
  padding-block-start: var(--nlportal-space-block-lg);
23
23
  padding-block-end: var(--nlportal-space-block-lg);
24
24
  border: var(--nlportal-document-border, 1px solid);
25
+ height: calc(
26
+ 100% - var(--conduction-image-and-details-card-image-height) -
27
+ var(--nlportal-space-block-lg) - var(--nlportal-space-block-lg) - 2px
28
+ ); /* height = 100% - imageHeight - padding - border */
29
+ margin-block-start: auto;
25
30
  }
26
31
 
27
32
  .content > *:not(:last-child) {
package/src/components/card/richContentCard/RichContentCard.tsx CHANGED
@@ -39,8 +39,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
39
39
  </div>
40
40
 
41
41
  <div className={styles.labelsWithIcon}>
42
- {labelsWithIcon.map(({ label, icon }) => (
43
- <LabelWithIcon {...{ label, icon }} />
42
+ {labelsWithIcon.map(({ label, icon }, idx) => (
43
+ <LabelWithIcon key={idx} {...{ label, icon }} />
44
44
  ))}
45
45
  </div>
46
46
 
@@ -53,8 +53,8 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
53
53
  {contentLinks && (
54
54
  <div className={styles.contentLinks}>
55
55
  <Divider />
56
- {contentLinks.map(({ title, subTitle, href }) => (
57
- <ContentLink {...{ title, subTitle, href }} />
56
+ {contentLinks.map(({ title, subTitle, href }, idx) => (
57
+ <ContentLink key={idx} {...{ title, subTitle, href }} />
58
58
  ))}
59
59
  </div>
60
60
  )}
package/src/components/denhaag-wrappers/pagination/Pagination.css ADDED
@@ -0,0 +1,120 @@
1
+ .denhaag-pagination {
2
+ --denhaag-pagination-align: center;
3
+
4
+ align-items: center;
5
+ display: flex;
6
+ flex-direction: row;
7
+ justify-content: var(--denhaag-pagination-align);
8
+ }
9
+
10
+ @media (min-width: 640px) {
11
+ .denhaag-pagination,
12
+ .denhaag-pagination--start {
13
+ --denhaag-pagination-align: flex-start;
14
+ }
15
+
16
+ .denhaag-pagination--center {
17
+ --denhaag-pagination-align: center;
18
+ }
19
+
20
+ .denhaag-pagination--end {
21
+ --denhaag-pagination-align: end;
22
+ }
23
+ }
24
+
25
+ .denhaag-pagination__links {
26
+ display: flex;
27
+ flex-direction: row;
28
+ }
29
+
30
+ .denhaag-pagination__link {
31
+ aspect-ratio: 1 / 1;
32
+ align-items: center;
33
+ background-color: var(--denhaag-pagination-background-color, transparent);
34
+ border: 0;
35
+ border-radius: var(
36
+ --denhaag-pagination-border-radius,
37
+ var(--denhaag-border-radius)
38
+ );
39
+ color: var(--denhaag-pagination-color, var(--denhaag-pagination-link-color));
40
+ display: flex;
41
+ height: var(--denhaag-pagination-size);
42
+ justify-content: center;
43
+ line-height: 1.5;
44
+ position: relative;
45
+ text-align: center;
46
+ text-decoration: none;
47
+ width: var(--denhaag-pagination-size);
48
+ font-style: normal;
49
+ font-weight: var(--denhaag-pagination-font-weight);
50
+ font-size: var(--denhaag-pagination-font-size);
51
+ }
52
+
53
+ .denhaag-pagination__link:hover,
54
+ .denhaag-pagination__link--hover {
55
+ --denhaag-pagination-color: var(--denhaag-pagination-link-hover-color);
56
+ cursor: pointer;
57
+ }
58
+
59
+ .denhaag-pagination__link:focus,
60
+ .denhaag-pagination__link--focus {
61
+ outline: var(--denhaag-link-focus-outline);
62
+ border-radius: 0;
63
+ }
64
+
65
+ .denhaag-pagination__link:disabled,
66
+ .denhaag-pagination__link--disabled {
67
+ --denhaag-pagination-color: var(--denhaag-pagination-link-disabled-color);
68
+
69
+ pointer-events: none;
70
+ }
71
+
72
+ .denhaag-pagination__link--arrow {
73
+ --denhaag-pagination-size: var(--denhaag-pagination-arrow-size);
74
+ --denhaag-pagination-font-size: var(--denhaag-pagination-arrow-font-size);
75
+ }
76
+
77
+ [dir="rtl"] .denhaag-pagination__link--arrow {
78
+ transform: scaleX(-1);
79
+ }
80
+
81
+ .denhaag-pagination__link + .denhaag-pagination__links,
82
+ .denhaag-pagination__links + .denhaag-pagination__link {
83
+ margin-inline-start: var(--denhaag-pagination-margin-inline, 10px);
84
+ }
85
+
86
+ .denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel]) {
87
+ overflow: hidden;
88
+ pointer-events: none;
89
+ text-indent: calc(var(--denhaag-pagination-size) * 2);
90
+ }
91
+
92
+ .denhaag-pagination__link:not(:first-child):not(:last-child):not(.denhaag-pagination__link--current):not([rel])::before {
93
+ content: "...";
94
+ left: calc(50% - 7px);
95
+ line-height: 0;
96
+ position: absolute;
97
+ text-indent: 0;
98
+ vertical-align: baseline;
99
+ }
100
+
101
+ .denhaag-pagination__link--current {
102
+ --denhaag-pagination-color: var(--denhaag-pagination-link-current-color);
103
+ --denhaag-pagination-font-weight: var(
104
+ --denhaag-pagination-link-current-font-weight
105
+ );
106
+ }
107
+
108
+ .denhaag-pagination__link--current.denhaag-pagination__link:disabled,
109
+ .denhaag-pagination__link--current.denhaag-pagination__link--disabled {
110
+ --denhaag-pagination-color: var(
111
+ --denhaag-pagination-link-current-disabled-color
112
+ );
113
+ --denhaag-pagination-background-color: var(
114
+ --denhaag-pagination-link-current-disabled-background-color
115
+ );
116
+ }
117
+
118
+ .denhaag-pagination .denhaag-icon {
119
+ font-size: inherit;
120
+ }
package/src/components/denhaag-wrappers/pagination/Pagination.tsx ADDED
@@ -0,0 +1,112 @@
1
+ import clsx from "clsx";
2
+ import * as React from "react";
3
+ import "./Pagination.css";
4
+
5
+ interface PaginationProps {
6
+ pages: number;
7
+ currentPage: number;
8
+ setPage: (page: number) => any;
9
+ }
10
+
11
+ export const Pagination: React.FC<PaginationProps> = ({ pages, currentPage, setPage }) => {
12
+ return (
13
+ <nav className="denhaag-pagination">
14
+ <PreviousButton previousPage={currentPage > 1 ? currentPage - 1 : undefined} {...{ setPage }} />
15
+
16
+ <span className="denhaag-pagination__links" role="group">
17
+ {Array.from({ length: pages }, (_, i) => i + 1).map((page, idx) => (
18
+ <Link key={idx} {...{ page }} current={page === currentPage} {...{ setPage }} />
19
+ ))}
20
+ </span>
21
+
22
+ <NextButton nextPage={currentPage < pages ? currentPage + 1 : undefined} {...{ setPage }} />
23
+ </nav>
24
+ );
25
+ };
26
+
27
+ interface LinkProps {
28
+ page: number;
29
+ setPage: (page: number) => any;
30
+ current?: boolean;
31
+ }
32
+
33
+ const Link: React.FC<LinkProps> = ({ page, current, setPage }) => {
34
+ return (
35
+ <a
36
+ aria-current={current && "page"}
37
+ aria-label={`Page ${page}`}
38
+ className={clsx("denhaag-pagination__link", current && "denhaag-pagination__link--current")}
39
+ onClick={() => setPage(page)}
40
+ >
41
+ {page}
42
+ </a>
43
+ );
44
+ };
45
+
46
+ interface PreviousButtonProps {
47
+ setPage: (page: number) => any;
48
+ previousPage?: number;
49
+ }
50
+
51
+ const PreviousButton: React.FC<PreviousButtonProps> = ({ previousPage, setPage }) => {
52
+ return (
53
+ <a
54
+ aria-label="Previous page"
55
+ className={clsx(
56
+ "denhaag-pagination__link denhaag-pagination__link--arrow",
57
+ !previousPage && "denhaag-pagination__link--disabled",
58
+ )}
59
+ onClick={() => previousPage && setPage(previousPage)}
60
+ rel="prev"
61
+ >
62
+ <svg
63
+ aria-hidden="true"
64
+ className="denhaag-icon"
65
+ fill="none"
66
+ height="1em"
67
+ viewBox="0 0 7 12"
68
+ width="1em"
69
+ xmlns="http://www.w3.org/2000/svg"
70
+ >
71
+ <path
72
+ 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"
73
+ fill="currentColor"
74
+ />
75
+ </svg>
76
+ </a>
77
+ );
78
+ };
79
+
80
+ interface NextButtonProps {
81
+ setPage: (page: number) => any;
82
+ nextPage?: number;
83
+ }
84
+
85
+ const NextButton: React.FC<NextButtonProps> = ({ nextPage, setPage }) => {
86
+ return (
87
+ <a
88
+ aria-label="Next page"
89
+ className={clsx(
90
+ "denhaag-pagination__link denhaag-pagination__link--arrow",
91
+ !nextPage && "denhaag-pagination__link--disabled",
92
+ )}
93
+ onClick={() => nextPage && setPage(nextPage)}
94
+ rel="next"
95
+ >
96
+ <svg
97
+ aria-hidden="true"
98
+ className="denhaag-icon"
99
+ fill="none"
100
+ height="1em"
101
+ viewBox="0 0 7 12"
102
+ width="1em"
103
+ xmlns="http://www.w3.org/2000/svg"
104
+ >
105
+ <path
106
+ 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"
107
+ fill="currentColor"
108
+ />
109
+ </svg>
110
+ </a>
111
+ );
112
+ };
package/src/index.ts CHANGED
@@ -35,6 +35,7 @@ import {
35
35
  } from "./components/notificationPopUp/NotificationPopUp";
36
36
  const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
37
37
  import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
38
+ import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
38
39
 
39
40
  export {
40
41
  InputRadio,
@@ -68,4 +69,5 @@ export {
68
69
  Tag,
69
70
  NotificationPopUp,
70
71
  QuoteWrapper,
72
+ Pagination,
71
73
  };