Skip to content

Commit 15758d0

Browse files
KaiSpencerTomdango
KaiSpencer
and
Tomdango
authored
Add dev warnings for v5 breaking changes (#150)
* Add deprecation warning to footer columns prop * Shared warning object for v5 * Dev warning for DoDontList.tsx * Dev warning for TransactionalServiceName.tsx * Dev warning for ReviewDate.tsx * Lint --------- Co-authored-by: Thomas Judd-Cooper <[email protected]>
1 parent 8803d16 commit 15758d0

File tree

9 files changed

+170
-52
lines changed

9 files changed

+170
-52
lines changed

‎src/components/do-dont-list/DoDontList.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { HTMLProps, createContext, useContext } from 'react';
22
import classNames from 'classnames';
33
import { Tick, Cross } from '../icons';
44
import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel';
5+
import useDevWarning from '../../util/hooks/UseDevWarning';
6+
import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings';
57

68
type ListType = 'do' | 'dont';
79

@@ -24,22 +26,25 @@ const DoDontList: DoDontList = ({
2426
heading,
2527
headingLevel,
2628
...rest
27-
}) => (
28-
<div className={classNames('nhsuk-do-dont-list', className)} {...rest}>
29-
<HeadingLevel className="nhsuk-do-dont-list__label" headingLevel={headingLevel}>
30-
{heading || (listType === 'do' ? 'Do' : "Don't")}
31-
</HeadingLevel>
32-
<ul
33-
className={classNames(
34-
'nhsuk-list',
35-
{ 'nhsuk-list--tick': listType === 'do' },
36-
{ 'nhsuk-list--cross': listType === 'dont' },
37-
)}
38-
>
39-
<DoDontListContext.Provider value={listType}>{children}</DoDontListContext.Provider>
40-
</ul>
41-
</div>
42-
);
29+
}) => {
30+
useDevWarning(NHSUKFrontendV5UpgradeWarnings.DoDontListPrefix, () => listType === 'dont');
31+
return (
32+
<div className={classNames('nhsuk-do-dont-list', className)} {...rest}>
33+
<HeadingLevel className="nhsuk-do-dont-list__label" headingLevel={headingLevel}>
34+
{heading || (listType === 'do' ? 'Do' : "Don't")}
35+
</HeadingLevel>
36+
<ul
37+
className={classNames(
38+
'nhsuk-list',
39+
{ 'nhsuk-list--tick': listType === 'do' },
40+
{ 'nhsuk-list--cross': listType === 'dont' },
41+
)}
42+
>
43+
<DoDontListContext.Provider value={listType}>{children}</DoDontListContext.Provider>
44+
</ul>
45+
</div>
46+
);
47+
};
4348

4449
interface DoDontItemProps extends HTMLProps<HTMLLIElement> {
4550
listItemType?: ListType;

‎src/components/do-dont-list/__tests__/DoDontList.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { shallow, mount } from 'enzyme';
33
import DoDontList from '..';
4+
import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings';
45

56
describe('DoDontList', () => {
67
it('matches snapshot', () => {
@@ -65,3 +66,24 @@ describe('DoDontList', () => {
6566
});
6667
});
6768
});
69+
70+
describe('dont list dev warning', () => {
71+
jest.spyOn(console, 'warn').mockImplementation();
72+
afterEach(() => {
73+
jest.clearAllMocks();
74+
});
75+
76+
it('should warn when using dont list', () => {
77+
const element = mount(<DoDontList listType="dont" />);
78+
expect(console.warn).toHaveBeenCalled();
79+
expect((console.warn as jest.Mock).mock.calls[0][0]).toBe(
80+
NHSUKFrontendV5UpgradeWarnings.DoDontListPrefix,
81+
);
82+
element.unmount();
83+
});
84+
it('should not warn when using do list', () => {
85+
const element = mount(<DoDontList listType="do" />);
86+
expect(console.warn).not.toHaveBeenCalled();
87+
element.unmount();
88+
});
89+
});

‎src/components/footer/Footer.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
11
import React, { HTMLProps } from 'react';
22
import classNames from 'classnames';
33
import { Container } from '../layout';
4+
import useDevWarning from '../../util/hooks/UseDevWarning';
5+
import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings';
46

57
interface FooterListProps extends HTMLProps<HTMLOListElement> {
68
columns?: boolean;
79
}
810

9-
const FooterList: React.FC<FooterListProps> = ({ className, columns, ...rest }) => (
10-
<ul
11-
className={classNames(
12-
'nhsuk-footer__list',
13-
{ 'nhsuk-footer__list--three-columns': columns },
14-
className,
15-
)}
16-
{...rest}
17-
/>
18-
);
11+
const FooterList: React.FC<FooterListProps> = ({ className, columns, ...rest }) => {
12+
useDevWarning(NHSUKFrontendV5UpgradeWarnings.FooterColumns, () => columns);
13+
return (
14+
<ul
15+
className={classNames(
16+
'nhsuk-footer__list',
17+
{ 'nhsuk-footer__list--three-columns': columns },
18+
className,
19+
)}
20+
{...rest}
21+
/>
22+
);
23+
};
1924

2025
const FooterListItem: React.FC<HTMLProps<HTMLAnchorElement>> = ({ className, ...rest }) => (
2126
<li className="nhsuk-footer__list-item">
@@ -37,9 +42,7 @@ interface Footer extends React.FC<FooterProps> {
3742
Copyright: React.FC<HTMLProps<HTMLParagraphElement>>;
3843
}
3944

40-
const Footer: Footer = ({
41-
className, children, visuallyHiddenText, ...rest
42-
}) => (
45+
const Footer: Footer = ({ className, children, visuallyHiddenText, ...rest }) => (
4346
<footer {...rest}>
4447
<div className={classNames('nhsuk-footer', className)}>
4548
<Container>

‎src/components/footer/__tests__/Footer.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from 'react';
22
import { shallow, mount } from 'enzyme';
33
import Footer from '..';
4+
import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings';
5+
6+
jest.spyOn(console, 'warn').mockImplementation();
47

58
describe('Footer', () => {
69
it('matches snapshot', () => {
@@ -27,6 +30,10 @@ describe('Footer', () => {
2730
});
2831

2932
describe('Footer.List', () => {
33+
afterEach(() => {
34+
jest.clearAllMocks();
35+
});
36+
3037
it('matches snapshot', () => {
3138
const component = shallow(<Footer.List />);
3239
expect(component).toMatchSnapshot('Footer.List');
@@ -38,6 +45,21 @@ describe('Footer', () => {
3845
expect(component.hasClass('nhsuk-footer__list--three-columns')).toBeTruthy();
3946
component.unmount();
4047
});
48+
49+
it('has dev warning when columns', () => {
50+
const element = mount(<Footer.List columns />);
51+
expect(console.warn).toHaveBeenCalledTimes(1);
52+
expect((console.warn as jest.Mock).mock.calls[0][0]).toBe(
53+
NHSUKFrontendV5UpgradeWarnings.FooterColumns,
54+
);
55+
element.unmount();
56+
});
57+
58+
it('no dev warning when columns is false', () => {
59+
const element = mount(<Footer.List />);
60+
expect(console.warn).not.toHaveBeenCalled();
61+
element.unmount();
62+
});
4163
});
4264

4365
describe('Footer.ListItem', () => {

‎src/components/header/components/TransactionalServiceName.tsx‎

Lines changed: 19 additions & 11 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 useDevWarning from '../../../util/hooks/UseDevWarning';
4+
import { NHSUKFrontendV5UpgradeWarnings } from '../../../deprecated/warnings';
35

46
export interface TransactionalServiceNameProps extends HTMLProps<HTMLAnchorElement> {
57
long?: boolean;
@@ -9,16 +11,22 @@ const TransactionalServiceName: React.FC<TransactionalServiceNameProps> = ({
911
className,
1012
long,
1113
...rest
12-
}) => (
13-
<div
14-
className={classNames(
15-
'nhsuk-header__transactional-service-name',
16-
{ 'nhsuk-header__transactional-service-name--long': long },
17-
className,
18-
)}
19-
>
20-
<a className="nhsuk-header__transactional-service-name--link" {...rest} />
21-
</div>
22-
);
14+
}) => {
15+
useDevWarning(
16+
NHSUKFrontendV5UpgradeWarnings.TransactionalServiceNameLongVariantRemoved,
17+
() => long,
18+
);
19+
return (
20+
<div
21+
className={classNames(
22+
'nhsuk-header__transactional-service-name',
23+
{ 'nhsuk-header__transactional-service-name--long': long },
24+
className,
25+
)}
26+
>
27+
<a className="nhsuk-header__transactional-service-name--link" {...rest} />
28+
</div>
29+
);
30+
};
2331

2432
export default TransactionalServiceName;

‎src/components/header/components/__tests__/TransactionalServiceName.test.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import TransactionalServiceName from '../TransactionalServiceName';
3+
import { NHSUKFrontendV5UpgradeWarnings } from '../../../../deprecated/warnings';
4+
import { mount } from 'enzyme';
5+
6+
describe('TransactionalServiceName long variant deprecation warning', () => {
7+
jest.spyOn(console, 'warn').mockImplementation();
8+
afterEach(() => {
9+
jest.clearAllMocks();
10+
});
11+
12+
it('should warn when long is true', () => {
13+
const spy = jest.spyOn(console, 'warn');
14+
const component = mount(<TransactionalServiceName long />);
15+
expect(spy).toHaveBeenCalledTimes(1);
16+
expect(spy.mock.calls[0][0]).toBe(
17+
NHSUKFrontendV5UpgradeWarnings.TransactionalServiceNameLongVariantRemoved,
18+
);
19+
component.unmount();
20+
});
21+
22+
it('should not warn when long is false', () => {
23+
const spy = jest.spyOn(console, 'warn');
24+
const component = mount(<TransactionalServiceName />);
25+
expect(spy).not.toHaveBeenCalled();
26+
component.unmount();
27+
});
28+
});

‎src/components/review-date/ReviewDate.tsx‎

Lines changed: 14 additions & 9 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 useDevWarning from '../../util/hooks/UseDevWarning';
4+
import { NHSUKFrontendV5UpgradeWarnings } from '../../deprecated/warnings';
35

46
interface ReviewDateProps extends HTMLProps<HTMLDivElement> {
57
lastReviewed?: string;
@@ -11,14 +13,17 @@ const ReviewDate: React.FC<ReviewDateProps> = ({
1113
lastReviewed,
1214
nextReview,
1315
...rest
14-
}) => (
15-
<div className={classNames('nhsuk-review-date', className)} {...rest}>
16-
<p className="nhsuk-body-s">
17-
{lastReviewed ? `Page last reviewed: ${lastReviewed}` : null}
18-
{lastReviewed && nextReview ? <br /> : null}
19-
{nextReview ? `Next review due: ${nextReview}` : null}
20-
</p>
21-
</div>
22-
);
16+
}) => {
17+
useDevWarning(NHSUKFrontendV5UpgradeWarnings.ReviewDateMovedToPattern);
18+
return (
19+
<div className={classNames('nhsuk-review-date', className)} {...rest}>
20+
<p className="nhsuk-body-s">
21+
{lastReviewed ? `Page last reviewed: ${lastReviewed}` : null}
22+
{lastReviewed && nextReview ? <br /> : null}
23+
{nextReview ? `Next review due: ${nextReview}` : null}
24+
</p>
25+
</div>
26+
);
27+
};
2328

2429
export default ReviewDate;

‎src/components/review-date/__tests__/ReviewDate.test.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { shallow } from 'enzyme';
2+
import { mount, shallow } from 'enzyme';
33
import ReviewDate from '..';
44

55
describe('ReviewDate', () => {
@@ -20,3 +20,13 @@ describe('ReviewDate', () => {
2020
element.unmount();
2121
});
2222
});
23+
24+
describe('dev warnings', () => {
25+
jest.spyOn(console, 'warn');
26+
it('warns when ReviewDate is used', () => {
27+
const spy = jest.spyOn(console, 'warn');
28+
const component = mount(<ReviewDate />);
29+
expect(spy).toHaveBeenCalled();
30+
component.unmount();
31+
});
32+
});

‎src/deprecated/warnings.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1-
export const PromoDeprecationWarning = 'The Promo component is deprecated, and will be removed in the next major version of nhsuk-react-components. The Card component is the intended replacement.';
1+
export const PromoDeprecationWarning =
2+
'The Promo component is deprecated, and will be removed in the next major version of nhsuk-react-components. The Card component is the intended replacement.';
23

3-
export const PanelDeprecationWarning = 'The Promo component is deprecated, and will be removed in the next major version of nhsuk-react-components. The Card component is the intended replacement.';
4+
export const PanelDeprecationWarning =
5+
'The Promo component is deprecated, and will be removed in the next major version of nhsuk-react-components. The Card component is the intended replacement.';
6+
7+
export const NHSUKFrontendV5UpgradeWarnings = {
8+
FooterColumns:
9+
'The footer columns prop is deprecated and will be removed in the next major release, as this has been removed from the NHS.UK frontend library v5.',
10+
DoDontListPrefix:
11+
"Items with a `type` of `dont` will automatically have a 'do not' prefix text added in the next major release to align with the NHS.UK frontend library v5.",
12+
TransactionalServiceNameLongVariantRemoved:
13+
'The `long` variant of the `TransactionalServiceName` component will be removed in the next major release to align with the NHS.UK frontend library v5.',
14+
ReviewDateMovedToPattern:
15+
'The `ReviewDate` component will be removed in the next major release to align with the NHS.UK frontend library v5. ' +
16+
'The `ReviewDate` component will exist as a `pattern`. ' +
17+
'If you use the default import the path will change from `/lib/components/ReviewDate` to `/lib/patterns/ReviewDate`.',
18+
} as const;

0 commit comments

Comments
 (0)