Skip to content

Commit 71a0635

Browse files
colinrotherhamcolinrotherham
committed
Split out pagination child components
1 parent 6a3078d commit 71a0635

File tree

6 files changed

+111
-96
lines changed

6 files changed

+111
-96
lines changed

‎src/components/navigation/pagination/Pagination.tsx‎

Lines changed: 2 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,6 @@
11
import classNames from 'classnames';
2-
import { forwardRef, type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
3-
import { ArrowLeftIcon, ArrowRightIcon } from '#components/content-presentation/index.js';
4-
import { type AsElementLink } from '#util/types/LinkTypes.js';
5-
6-
export type PaginationItemProps = PaginationLinkProps;
7-
8-
export const PaginationItem = forwardRef<HTMLAnchorElement, PaginationItemProps>(
9-
(props, forwardedRef) => {
10-
return (
11-
<li
12-
className={classNames(
13-
{ 'nhsuk-pagination-item--previous': props.previous },
14-
{ 'nhsuk-pagination-item--next': props.next },
15-
)}
16-
>
17-
<PaginationLink ref={forwardedRef} {...props} />
18-
</li>
19-
);
20-
},
21-
);
22-
23-
export type PaginationLinkProps = PaginationLinkTextProps & AsElementLink<HTMLAnchorElement>;
24-
25-
export const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(
26-
({ className, asElement: Element = 'a', ...rest }, forwardedRef) => {
27-
const { children, labelText, previous, next, ...elementRest } = rest;
28-
29-
const isPrevious = !!previous && !next;
30-
const isNext = !!next && !previous;
31-
32-
return (
33-
<Element
34-
className={classNames(
35-
'nhsuk-pagination__link',
36-
{ 'nhsuk-pagination__link--prev': isPrevious },
37-
{ 'nhsuk-pagination__link--next': isNext },
38-
className,
39-
)}
40-
rel={isPrevious || isNext ? (isPrevious ? 'prev' : 'next') : undefined}
41-
ref={forwardedRef}
42-
{...elementRest}
43-
>
44-
<PaginationLinkText {...rest} />
45-
{isPrevious ? <ArrowLeftIcon /> : null}
46-
{isNext ? <ArrowRightIcon /> : null}
47-
</Element>
48-
);
49-
},
50-
);
51-
52-
export type PaginationLinkTextProps = PropsWithChildren &
53-
(
54-
| WithLabelText<{
55-
previous: true;
56-
next?: never;
57-
}>
58-
| WithLabelText<{
59-
previous?: never;
60-
next: true;
61-
}>
62-
);
63-
64-
type WithLabelText<T> = T & {
65-
labelText?: string;
66-
};
67-
68-
export const PaginationLinkText: FC<PaginationLinkTextProps> = ({
69-
children,
70-
previous,
71-
next,
72-
labelText,
73-
}) => {
74-
return (
75-
<>
76-
{children || previous || next ? (
77-
<span className="nhsuk-pagination__title">
78-
{children || (
79-
<>
80-
{previous ? 'Previous' : 'Next'}
81-
<span className="nhsuk-u-visually-hidden"> page</span>
82-
</>
83-
)}
84-
</span>
85-
) : null}
86-
{labelText ? (
87-
<>
88-
<span className="nhsuk-u-visually-hidden">:</span>
89-
<span className="nhsuk-pagination__page">{labelText}</span>
90-
</>
91-
) : null}
92-
</>
93-
);
94-
};
2+
import { forwardRef, type ComponentPropsWithoutRef } from 'react';
3+
import { PaginationItem } from './components/index.js';
954

965
export type PaginationProps = ComponentPropsWithoutRef<'nav'>;
976

@@ -110,9 +19,6 @@ const PaginationComponent = forwardRef<HTMLElement, PaginationProps>(
11019
);
11120

11221
PaginationComponent.displayName = 'Pagination';
113-
PaginationItem.displayName = 'Pagination.Item';
114-
PaginationLink.displayName = 'Pagination.Link';
115-
PaginationLinkText.displayName = 'Pagination.LinkText';
11622

11723
export const Pagination = Object.assign(PaginationComponent, {
11824
Item: PaginationItem,

‎src/components/navigation/pagination/components/PaginationItem.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import classNames from 'classnames';
2+
import { forwardRef } from 'react';
3+
import { PaginationLink, type PaginationLinkProps } from './PaginationLink.js';
4+
5+
export type PaginationItemProps = PaginationLinkProps;
6+
7+
export const PaginationItem = forwardRef<HTMLAnchorElement, PaginationItemProps>(
8+
(props, forwardedRef) => {
9+
return (
10+
<li
11+
className={classNames(
12+
{ 'nhsuk-pagination-item--previous': props.previous },
13+
{ 'nhsuk-pagination-item--next': props.next },
14+
)}
15+
>
16+
<PaginationLink ref={forwardedRef} {...props} />
17+
</li>
18+
);
19+
},
20+
);
21+
22+
PaginationItem.displayName = 'Pagination.Item';

‎src/components/navigation/pagination/components/PaginationLink.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import classNames from 'classnames';
2+
import { forwardRef } from 'react';
3+
import { ArrowLeftIcon, ArrowRightIcon } from '#components/content-presentation/index.js';
4+
import { type AsElementLink } from '#util/types/LinkTypes.js';
5+
import { PaginationLinkText, type PaginationLinkTextProps } from './PaginationLinkText.js';
6+
7+
export type PaginationLinkProps = PaginationLinkTextProps & AsElementLink<HTMLAnchorElement>;
8+
9+
export const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(
10+
({ className, asElement: Element = 'a', ...rest }, forwardedRef) => {
11+
const { children, labelText, previous, next, ...elementRest } = rest;
12+
13+
const isPrevious = !!previous && !next;
14+
const isNext = !!next && !previous;
15+
16+
return (
17+
<Element
18+
className={classNames(
19+
'nhsuk-pagination__link',
20+
{ 'nhsuk-pagination__link--prev': isPrevious },
21+
{ 'nhsuk-pagination__link--next': isNext },
22+
className,
23+
)}
24+
rel={isPrevious || isNext ? (isPrevious ? 'prev' : 'next') : undefined}
25+
ref={forwardedRef}
26+
{...elementRest}
27+
>
28+
<PaginationLinkText {...rest} />
29+
{isPrevious ? <ArrowLeftIcon /> : null}
30+
{isNext ? <ArrowRightIcon /> : null}
31+
</Element>
32+
);
33+
},
34+
);
35+
36+
PaginationLink.displayName = 'Pagination.Link';

‎src/components/navigation/pagination/components/PaginationLinkText.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { type FC, type PropsWithChildren } from 'react';
2+
3+
export type PaginationLinkTextProps = PropsWithChildren &
4+
(
5+
| WithLabelText<{
6+
previous: true;
7+
next?: never;
8+
}>
9+
| WithLabelText<{
10+
previous?: never;
11+
next: true;
12+
}>
13+
);
14+
15+
type WithLabelText<T> = T & {
16+
labelText?: string;
17+
};
18+
19+
export const PaginationLinkText: FC<PaginationLinkTextProps> = ({
20+
children,
21+
previous,
22+
next,
23+
labelText,
24+
}) => {
25+
return (
26+
<>
27+
{children || previous || next ? (
28+
<span className="nhsuk-pagination__title">
29+
{children || (
30+
<>
31+
{previous ? 'Previous' : 'Next'}
32+
<span className="nhsuk-u-visually-hidden"> page</span>
33+
</>
34+
)}
35+
</span>
36+
) : null}
37+
{labelText ? (
38+
<>
39+
<span className="nhsuk-u-visually-hidden">:</span>
40+
<span className="nhsuk-pagination__page">{labelText}</span>
41+
</>
42+
) : null}
43+
</>
44+
);
45+
};
46+
47+
PaginationLinkText.displayName = 'Pagination.LinkText';

‎src/components/navigation/pagination/components/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './PaginationItem.js';
2+
export * from './PaginationLink.js';
3+
export * from './PaginationLinkText.js';

‎src/components/navigation/pagination/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
export * from './components/index.js';
12
export * from './Pagination.js';

0 commit comments

Comments
 (0)