Skip to content

Commit e4ff022

Browse files
TomdangoTomdango
authored
Merge pull request #54 from AFed29/feature/add-react-router-link
Adding ability to use react router Links in nav items
2 parents 6dd8939 + 91d0d74 commit e4ff022

File tree

12 files changed

+120
-51
lines changed

12 files changed

+120
-51
lines changed

‎src/components/action-link/ActionLink.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
1-
import React, { HTMLProps } from 'react';
1+
import React from 'react';
22
import classNames from 'classnames';
33
import { ArrowRightCircle } from '../icons';
4+
import type { AsElementLink } from 'util/types/LinkTypes';
45

5-
const ActionLink: React.FC<HTMLProps<HTMLAnchorElement>> = ({ children, className, ...rest }) => (
6+
const ActionLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
7+
children,
8+
asElement: Component = 'a',
9+
className,
10+
...rest
11+
}) => (
612
<div className="nhsuk-action-link">
7-
<a className={classNames('nhsuk-action-link__link', className)} {...rest}>
13+
<Component className={classNames('nhsuk-action-link__link', className)} {...rest}>
814
<ArrowRightCircle />
915
<span className="nhsuk-action-link__text">{children}</span>
10-
</a>
16+
</Component>
1117
</div>
1218
);
1319

‎src/components/back-link/BackLink.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import React, { HTMLProps } from 'react';
1+
import React from 'react';
22
import classNames from 'classnames';
33
import { ChevronLeft } from '../icons';
4+
import type { AsElementLink } from '../../util/types/LinkTypes';
45

5-
const BackLink: React.FC<HTMLProps<HTMLAnchorElement>> = ({ children, className, ...rest }) => (
6+
const BackLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
7+
children,
8+
className,
9+
asElement: Component = 'a',
10+
...rest }) => (
611
<div className="nhsuk-back-link">
7-
<a className={classNames('nhsuk-back-link__link', className)} {...rest}>
12+
<Component className={classNames('nhsuk-back-link__link', className)} {...rest}>
813
<ChevronLeft />
914
{children}
10-
</a>
15+
</Component>
1116
</div>
1217
);
1318

‎src/components/breadcrumb/Breadcrumb.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@
22
import React, { HTMLProps, ReactNode } from 'react';
33
import classNames from 'classnames';
44
import { Container } from '../layout';
5+
import type { AsElementLink } from '../../util/types/LinkTypes';
56

6-
type Item = React.FC<HTMLProps<HTMLAnchorElement>>;
7+
type Item = React.FC<AsElementLink<HTMLAnchorElement>>;
78

8-
const Item: Item = ({ className, children, ...rest }) => (
9+
const Item: Item = ({ className, children, asElement: Component = 'a', ...rest }) => (
910
<li className="nhsuk-breadcrumb__item">
10-
<a className={classNames('nhsuk-breadcrumb__link', className)} {...rest}>
11+
<Component className={classNames('nhsuk-breadcrumb__link', className)} {...rest}>
1112
{children}
12-
</a>
13+
</Component>
1314
</li>
1415
);
1516

16-
const Back: Item = ({ className, ...rest }) => (
17+
const Back: Item = ({ className, asElement: Component = 'a', ...rest }) => (
1718
<p className={classNames('nhsuk-breadcrumb__back', className)}>
18-
<a className="nhsuk-breadcrumb__backlink" {...rest} />
19+
<Component className="nhsuk-breadcrumb__backlink" {...rest} />
1920
</p>
2021
);
2122

‎src/components/header/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { PureComponent, HTMLProps, useContext } from 'react';
22
import classNames from 'classnames';
3-
import NHSLogo from './components/NHSLogo';
3+
import NHSLogo, { NHSLogoNavProps } from './components/NHSLogo';
44
import OrganisationalLogo, { OrganisationalLogoProps } from './components/OrganisationalLogo';
55
import HeaderContext, { IHeaderContext } from './HeaderContext';
66
import Search from './components/Search';
@@ -11,7 +11,7 @@ import Content from './components/Content';
1111
import MenuToggle from './components/MenuToggle';
1212
import TransactionalServiceName from './components/TransactionalServiceName';
1313

14-
const BaseHeaderLogo: React.FC<OrganisationalLogoProps> = props => {
14+
const BaseHeaderLogo: React.FC<OrganisationalLogoProps & NHSLogoNavProps> = props => {
1515
const { orgName } = useContext<IHeaderContext>(HeaderContext);
1616
if (orgName) {
1717
return <OrganisationalLogo {...props} />;

‎src/components/header/components/NHSLogo.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
import React, { useContext, HTMLProps, SVGProps } from 'react';
1+
import React, { useContext, SVGProps } from 'react';
22
import classNames from 'classnames';
33
import HeaderContext, { IHeaderContext } from '../HeaderContext';
4+
import type { AsElementLink } from '../../../util/types/LinkTypes';
45

56
interface SVGImageWithSrc extends SVGProps<SVGImageElement> {
67
src: string;
78
}
89

10+
export interface NHSLogoNavProps extends AsElementLink<HTMLAnchorElement> {}
11+
912
const SVGImageWithSrc: React.FC<SVGImageWithSrc> = props => <image {...props} />;
1013

11-
const NHSLogo: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, alt, ...rest }) => {
14+
const NHSLogo: React.FC<NHSLogoNavProps> = ({ className, alt, asElement: Component = 'a', ...rest }) => {
1215
const { serviceName, hasMenuToggle, hasSearch } = useContext<IHeaderContext>(HeaderContext);
1316
return (
1417
<div
1518
className={classNames('nhsuk-header__logo', {
1619
'nhsuk-header__logo--only': !hasMenuToggle && !hasSearch,
1720
})}
1821
>
19-
<a
22+
<Component
2023
className={classNames(
2124
'nhsuk-header__link',
2225
{ 'nhsuk-header__link--service': serviceName },
@@ -41,7 +44,7 @@ const NHSLogo: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, alt, ...re
4144
<SVGImageWithSrc src="https://assets.nhs.uk/images/nhs-logo.png" xlinkHref="" />
4245
</svg>
4346
{serviceName ? <span className="nhsuk-header__service-name">{serviceName}</span> : null}
44-
</a>
47+
</Component>
4548
</div>
4649
);
4750
};

‎src/components/header/components/NavItem.tsx‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
1-
import React, { HTMLProps } from 'react';
1+
import React from 'react';
22
import classNames from 'classnames';
33
import { ChevronRight as ChevronRightIcon } from '../../icons';
4+
import type { AsElementLink } from '../../../util/types/LinkTypes';
45

5-
export interface NavItemProps extends HTMLProps<HTMLAnchorElement> {
6+
export interface NavItemProps extends AsElementLink<HTMLAnchorElement> {
67
mobileOnly?: boolean;
78
}
89

9-
const NavItem: React.FC<NavItemProps> = ({ mobileOnly, className, children, ...rest }) => (
10-
<li
11-
className={classNames(
12-
'nhsuk-header__navigation-item',
13-
{ 'nhsuk-header__navigation-item--for-mobile': mobileOnly },
14-
className,
15-
)}
16-
>
17-
<a className="nhsuk-header__navigation-link" {...rest}>
18-
{children}
19-
<ChevronRightIcon />
20-
</a>
21-
</li>
22-
);
10+
const NavItem: React.FC<NavItemProps> = ({
11+
mobileOnly,
12+
className,
13+
children,
14+
asElement: Component = 'a',
15+
...rest
16+
}) => {
17+
return (
18+
<li
19+
className={classNames(
20+
'nhsuk-header__navigation-item',
21+
{ 'nhsuk-header__navigation-item--for-mobile': mobileOnly },
22+
className,
23+
)}
24+
>
25+
<Component className="nhsuk-header__navigation-link" {...rest}>
26+
{children}
27+
<ChevronRightIcon />
28+
</Component>
29+
</li>
30+
);
31+
};
2332

2433
export default NavItem;

‎src/components/header/components/OrganisationalLogo.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import React, { HTMLProps, useContext } from 'react';
1+
import React, { useContext } from 'react';
22
import HeaderContext, { IHeaderContext } from '../HeaderContext';
3+
import type { AsElementLink } from '../../../util/types/LinkTypes';
34

4-
export interface OrganisationalLogoProps extends HTMLProps<HTMLAnchorElement> {
5+
6+
export interface OrganisationalLogoProps extends AsElementLink<HTMLAnchorElement> {
57
logoUrl?: string;
68
}
79

8-
const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({ logoUrl, alt, ...rest }) => {
10+
const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({ logoUrl, alt, asElement: Component = 'a', ...rest }) => {
911
const { orgName, orgSplit, orgDescriptor } = useContext<IHeaderContext>(HeaderContext);
1012
return (
1113
<div className="nhsuk-header__logo">
12-
<a className="nhsuk-header__link" {...rest}>
14+
<Component className="nhsuk-header__link" {...rest}>
1315
{logoUrl ? (
1416
<img className="nhsuk-org-logo" src={logoUrl} alt={alt} />
1517
) : (
@@ -44,7 +46,7 @@ const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({ logoUrl, alt, .
4446
) : null}
4547
</>
4648
)}
47-
</a>
49+
</Component>
4850
</div>
4951
);
5052
};

‎src/components/list-panel/ListPanel.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, { HTMLProps } from 'react';
22
import classNames from 'classnames';
3+
import type { AsElementLink } from '../../util/types/LinkTypes';
4+
35

46
interface PanelProps extends HTMLProps<HTMLDivElement> {
57
labelProps?: HTMLProps<HTMLHeadingElement>;
@@ -67,9 +69,9 @@ const PanelItem: React.FC<HTMLProps<HTMLLIElement>> = ({ className, ...rest }) =
6769
<li className={classNames('nhsuk-list-panel__item', className)} {...rest} />
6870
);
6971

70-
const PanelLinkItem: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, ...rest }) => (
72+
const PanelLinkItem: React.FC<AsElementLink<HTMLAnchorElement>> = ({ className, asElement: Component = 'a', ...rest }) => (
7173
<PanelItem>
72-
<a className={classNames('nhsuk-list-panel__link', className)} {...rest} />
74+
<Component className={classNames('nhsuk-list-panel__link', className)} {...rest} />
7375
</PanelItem>
7476
);
7577

‎src/components/nav-a-z/NavAZ.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { HTMLProps } from 'react';
22
import classNames from 'classnames';
3+
import type { AsElementLink } from '../../util/types/LinkTypes';
34

45
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
56

@@ -43,7 +44,7 @@ interface NavAZProps extends HTMLProps<HTMLDivElement> {
4344
}
4445

4546
interface NavAZ extends React.FC<NavAZProps> {
46-
LinkItem: React.FC<HTMLProps<HTMLAnchorElement>>;
47+
LinkItem: React.FC<AsElementLink<HTMLAnchorElement>>;
4748
DisabledItem: React.FC<HTMLProps<HTMLSpanElement>>;
4849
}
4950

@@ -63,9 +64,13 @@ const NavAZ: NavAZ = ({
6364
</nav>
6465
);
6566

66-
const LinkItem: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, ...rest }) => (
67+
const LinkItem: React.FC<AsElementLink<HTMLAnchorElement>> = ({
68+
className,
69+
asElement: Component = 'a',
70+
...rest
71+
}) => (
6772
<li className="nhsuk-nav-a-z__item">
68-
<a className={classNames('nhsuk-nav-a-z__link', className)} {...rest} />
73+
<Component className={classNames('nhsuk-nav-a-z__link', className)} {...rest} />
6974
</li>
7075
);
7176

‎src/components/promo/Promo.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import React, { HTMLProps, useContext, isValidElement } from 'react';
22
import classNames from 'classnames';
33
import PromoContext, { PromoContextType } from './PromoContext';
44
import { Col, Row } from '../layout';
5+
import type { AsElementLink } from '../../util/types/LinkTypes';
56

67
interface ImageProps extends HTMLProps<HTMLImageElement> {
78
crossOrigin?: '' | 'anonymous' | 'use-credentials';
89
}
910

10-
interface BasePromoProps extends HTMLProps<HTMLAnchorElement> {
11+
interface BasePromoProps extends AsElementLink<HTMLAnchorElement> {
1112
imageSrc?: string;
1213
small?: boolean;
1314
imageProps?: ImageProps;
@@ -19,12 +20,13 @@ const BasePromo: React.FC<BasePromoProps> = ({
1920
imageSrc,
2021
imageProps,
2122
small,
23+
asElement: Component = 'a',
2224
...rest
2325
}) => {
2426
const { className: imageClassName, ...restImageProps } = imageProps || {};
2527
return (
2628
<div className={classNames('nhsuk-promo', { 'nhsuk-promo--small': small }, className)}>
27-
<a className="nhsuk-promo__link-wrapper" {...rest}>
29+
<Component className="nhsuk-promo__link-wrapper" {...rest}>
2830
{imageSrc ? (
2931
<img
3032
className={classNames('nhsuk-promo__img', imageClassName)}
@@ -33,7 +35,7 @@ const BasePromo: React.FC<BasePromoProps> = ({
3335
/>
3436
) : null}
3537
<div className="nhsuk-promo__content">{children}</div>
36-
</a>
38+
</Component>
3739
</div>
3840
);
3941
};

0 commit comments

Comments
 (0)