Skip to content

Commit 699a619

Browse files
TomdangoTomdango
committed
Improve typing
1 parent 78e9909 commit 699a619

File tree

24 files changed

+114
-163
lines changed

24 files changed

+114
-163
lines changed

‎src/components/button/Button.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,15 @@ export const Button: React.FC<ButtonProps> = ({
3535
)}
3636
disabled={disabled}
3737
aria-disabled={disabled ? 'true' : 'false'}
38-
type={type || 'submit'}
38+
type={type}
3939
{...rest}
4040
/>
4141
);
4242

43+
Button.defaultProps = {
44+
type: 'submit',
45+
};
46+
4347
export const ButtonLink: React.FC<ButtonLinkProps> = ({
4448
className,
4549
role,
@@ -58,15 +62,20 @@ export const ButtonLink: React.FC<ButtonLinkProps> = ({
5862
{ 'nhsuk-button--reverse': reverse },
5963
className,
6064
)}
61-
role={role || 'button'}
65+
role={role}
6266
aria-disabled={disabled ? 'true' : 'false'}
63-
draggable={draggable || false}
67+
draggable={draggable}
6468
{...rest}
6569
>
6670
{children}
6771
</a>
6872
);
6973

74+
ButtonLink.defaultProps = {
75+
role: 'button',
76+
draggable: false,
77+
};
78+
7079
const ButtonWrapper: React.FC<ButtonLinkProps | ButtonProps> = ({ href, as, ...rest }) => {
7180
if (as === 'a') {
7281
return <ButtonLink href={href} {...(rest as ButtonLinkProps)} />;

‎src/components/care-card/CareCard.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React, { HTMLProps, createContext, useContext } from 'react';
22
import classNames from 'classnames';
3+
import { CareCardType } from '../../util/types/NHSUKTypes';
34
import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel';
45

5-
type CareCardType = 'non-urgent' | 'urgent' | 'immediate';
6-
76
interface CareCardProps extends HTMLProps<HTMLDivElement> {
87
type: CareCardType;
98
}

‎src/components/care-card/__tests__/CareCard.tests.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ describe('CareCard', () => {
5454
});
5555

5656
it('renders with correct classNames', () => {
57-
const nonUrgentCard = shallow(<CareCard type="non-urgent"></CareCard>);
58-
const urgentCard = shallow(<CareCard type="urgent"></CareCard>);
59-
const immediateCard = shallow(<CareCard type="immediate"></CareCard>);
57+
const nonUrgentCard = shallow(<CareCard type="non-urgent" />);
58+
const urgentCard = shallow(<CareCard type="urgent" />);
59+
const immediateCard = shallow(<CareCard type="immediate" />);
6060

6161
expect(nonUrgentCard.hasClass('nhsuk-care-card--non-urgent')).toBeTruthy();
6262
expect(urgentCard.hasClass('nhsuk-care-card--urgent')).toBeTruthy();

‎src/components/checkboxes/Checkboxes.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
import React, { HTMLProps, PureComponent, SyntheticEvent } from 'react';
22
import classNames from 'classnames';
3-
import LabelBlock from '../utils/LabelBlock';
4-
import { HintProps } from '../hint/Hint';
3+
import { FormElementProps } from '../../util/types/FormTypes';
4+
import LabelBlock from '../../util/LabelBlock';
55
import { generateRandomName } from '../../util/RandomName';
66
import FormContext from '../form/FormContext';
77
import CheckboxContext from './CheckboxContext';
88
import Box, { BoxProps } from './Box';
9-
import { LabelProps } from '../label/Label';
10-
import { ErrorMessageProps } from '../error-message/ErrorMessage';
119

1210
interface CheckboxesEvent extends SyntheticEvent<HTMLInputElement> {
1311
target: HTMLInputElement;
1412
}
1513

16-
interface CheckboxesProps extends HTMLProps<HTMLDivElement> {
14+
interface CheckboxesProps extends HTMLProps<HTMLDivElement>, FormElementProps {
1715
idPrefix?: string;
1816
onChange?: (e: CheckboxesEvent) => any;
19-
label?: string;
20-
labelProps?: LabelProps;
21-
hint?: string;
22-
hintProps?: HintProps;
23-
error?: string | boolean;
24-
errorProps?: ErrorMessageProps;
2517
}
2618

2719
interface CheckboxesState {

‎src/components/contents-list/ContentsList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ interface ContentsListItemProps extends HTMLProps<HTMLAnchorElement> {
88
const ContentsListItem: React.FC<ContentsListItemProps> = ({ className, current, ...rest }) => (
99
<li className={classNames('nhsuk-contents-list__item', className)}>
1010
{current ? (
11-
<span className="nhsuk-contents-list__current" {...rest}></span>
11+
<span className="nhsuk-contents-list__current" {...rest} />
1212
) : (
13-
<a className="nhsuk-contents-list__link" {...rest}></a>
13+
<a className="nhsuk-contents-list__link" {...rest} />
1414
)}
1515
</li>
1616
);

‎src/components/date-input/DateInput.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,9 @@ import React, {
88
SyntheticEvent,
99
} from 'react';
1010
import classNames from 'classnames';
11+
import { FormElementProps } from '../../util/types/FormTypes';
1112
import { generateRandomName } from '../../util/RandomName';
12-
import { HintProps } from '../hint/Hint';
13-
import { ErrorMessageProps } from '../error-message/ErrorMessage';
14-
import { LabelProps } from '../label/Label';
15-
import LabelBlock from '../utils/LabelBlock';
13+
import LabelBlock from '../../util/LabelBlock';
1614

1715
interface IDateInputContext {
1816
isDateInput: boolean;
@@ -125,16 +123,10 @@ type DateInputValue = {
125123
year: string;
126124
};
127125

128-
interface DateInputProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
126+
interface DateInputProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'>, FormElementProps {
129127
autoSelectNext?: boolean;
130128
onChange?: (e: DateInputEvent) => any;
131129
autoCompletePrefix?: string;
132-
label?: string;
133-
labelProps?: LabelProps;
134-
error?: string;
135-
errorProps?: ErrorMessageProps;
136-
hint?: string;
137-
hintProps?: HintProps;
138130
}
139131

140132
type DateInputState = {

‎src/components/fieldset/Fieldset.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { HTMLProps } from 'react';
22
import classNames from 'classnames';
3+
import { NHSUKSize } from '../../util/types/NHSUKTypes';
34
import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel';
45

56
interface LegendProps extends Omit<HTMLProps<HTMLLegendElement>, 'size'> {
67
isPageHeading?: boolean;
78
headingLevel?: HeadingLevelType;
8-
size?: 's' | 'm' | 'l' | 'xl';
9+
size?: NHSUKSize;
910
}
1011

1112
const Legend: React.FC<LegendProps> = ({

‎src/components/header/Header.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const BaseHeaderLogo: React.FC<OrganisationalLogoProps> = props => {
2020
};
2121

2222
const HeaderContainer: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
23-
<Container className={classNames('nhsuk-header__container', className)} {...rest}></Container>
23+
<Container className={classNames('nhsuk-header__container', className)} {...rest} />
2424
);
2525

2626
interface HeaderProps extends HTMLProps<HTMLDivElement> {
@@ -41,12 +41,19 @@ interface HeaderState {
4141

4242
class Header extends PureComponent<HeaderProps, HeaderState> {
4343
static Logo = BaseHeaderLogo;
44+
4445
static Search = Search;
46+
4547
static Nav = Nav;
48+
4649
static NavItem = NavItem;
50+
4751
static Container = HeaderContainer;
52+
4853
static Content = Content;
54+
4955
static MenuToggle = MenuToggle;
56+
5057
static ServiceName = TransactionalServiceName;
5158

5259
static defaultProps = {
@@ -72,11 +79,11 @@ class Header extends PureComponent<HeaderProps, HeaderState> {
7279
};
7380

7481
toggleMenu = () => {
75-
this.setState({ menuOpen: !this.state.menuOpen });
82+
this.setState(state => ({ menuOpen: !state.menuOpen }));
7683
};
7784

7885
toggleSearch = () => {
79-
this.setState({ searchOpen: !this.state.searchOpen });
86+
this.setState(state => ({ searchOpen: !state.searchOpen }));
8087
};
8188

8289
render() {

‎src/components/icons/Icons.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,19 @@ export const BaseIconSVG: React.FC<BaseIconSVGProps> = ({
1919
xmlns="http://www.w3.org/2000/svg"
2020
viewBox="0 0 24 24"
2121
aria-hidden="true"
22-
height={height || 32}
23-
width={width || 32}
22+
height={height}
23+
width={width}
2424
{...rest}
2525
>
2626
{children}
2727
</svg>
2828
);
2929

30+
BaseIconSVG.defaultProps = {
31+
height: 32,
32+
width: 32,
33+
};
34+
3035
export const ArrowLeft: React.FC<BaseIconSVGProps> = props => (
3136
<BaseIconSVG iconType="nhsuk-icon__arrow-left" {...props}>
3237
<path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z" />
@@ -125,6 +130,6 @@ export const Tick: React.FC<BaseIconSVGProps> = props => (
125130
stroke="#007f3b"
126131
fill="none"
127132
d="M18.4 7.8l-8.5 8.4L5.6 12"
128-
></path>
133+
/>
129134
</BaseIconSVG>
130135
);

‎src/components/icons/__tests__/__snapshots__/Icons.test.tsx.snap‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
exports[`Icons all icons match snapshots: ArrowLeft 1`] = `
44
<Component>
55
<Component
6+
height={32}
67
iconType="nhsuk-icon__arrow-left"
8+
width={32}
79
>
810
<svg
911
aria-hidden="true"
@@ -24,7 +26,9 @@ exports[`Icons all icons match snapshots: ArrowLeft 1`] = `
2426
exports[`Icons all icons match snapshots: ArrowRight 1`] = `
2527
<Component>
2628
<Component
29+
height={32}
2730
iconType="nhsuk-icon__arrow-right"
31+
width={32}
2832
>
2933
<svg
3034
aria-hidden="true"
@@ -45,7 +49,9 @@ exports[`Icons all icons match snapshots: ArrowRight 1`] = `
4549
exports[`Icons all icons match snapshots: ArrowRightCircle 1`] = `
4650
<Component>
4751
<Component
52+
height={32}
4853
iconType="nhsuk-icon__arrow-right-circle"
54+
width={32}
4955
>
5056
<svg
5157
aria-hidden="true"
@@ -68,7 +74,10 @@ exports[`Icons all icons match snapshots: ArrowRightCircle 1`] = `
6874
`;
6975

7076
exports[`Icons all icons match snapshots: BaseIconSVG 1`] = `
71-
<Component>
77+
<Component
78+
height={32}
79+
width={32}
80+
>
7281
<svg
7382
aria-hidden="true"
7483
className="nhsuk-icon"
@@ -83,7 +92,9 @@ exports[`Icons all icons match snapshots: BaseIconSVG 1`] = `
8392
exports[`Icons all icons match snapshots: ChevronLeft 1`] = `
8493
<Component>
8594
<Component
95+
height={32}
8696
iconType="nhsuk-icon__chevron-left"
97+
width={32}
8798
>
8899
<svg
89100
aria-hidden="true"
@@ -104,7 +115,9 @@ exports[`Icons all icons match snapshots: ChevronLeft 1`] = `
104115
exports[`Icons all icons match snapshots: ChevronRight 1`] = `
105116
<Component>
106117
<Component
118+
height={32}
107119
iconType="nhsuk-icon__chevron-right"
120+
width={32}
108121
>
109122
<svg
110123
aria-hidden="true"
@@ -125,7 +138,9 @@ exports[`Icons all icons match snapshots: ChevronRight 1`] = `
125138
exports[`Icons all icons match snapshots: Close 1`] = `
126139
<Component>
127140
<Component
141+
height={32}
128142
iconType="nhsuk-icon__close"
143+
width={32}
129144
>
130145
<svg
131146
aria-hidden="true"
@@ -146,7 +161,9 @@ exports[`Icons all icons match snapshots: Close 1`] = `
146161
exports[`Icons all icons match snapshots: Cross 1`] = `
147162
<Component>
148163
<Component
164+
height={32}
149165
iconType="nhsuk-icon__cross"
166+
width={32}
150167
>
151168
<svg
152169
aria-hidden="true"
@@ -193,7 +210,9 @@ exports[`Icons all icons match snapshots: Emdash 1`] = `
193210
exports[`Icons all icons match snapshots: Minus 1`] = `
194211
<Component>
195212
<Component
213+
height={32}
196214
iconType="nhsuk-icon__minus"
215+
width={32}
197216
>
198217
<svg
199218
aria-hidden="true"
@@ -224,7 +243,9 @@ exports[`Icons all icons match snapshots: Minus 1`] = `
224243
exports[`Icons all icons match snapshots: Plus 1`] = `
225244
<Component>
226245
<Component
246+
height={32}
227247
iconType="nhsuk-icon__minus"
248+
width={32}
228249
>
229250
<svg
230251
aria-hidden="true"
@@ -255,7 +276,9 @@ exports[`Icons all icons match snapshots: Plus 1`] = `
255276
exports[`Icons all icons match snapshots: Search 1`] = `
256277
<Component>
257278
<Component
279+
height={32}
258280
iconType="nhsuk-icon__search"
281+
width={32}
259282
>
260283
<svg
261284
aria-hidden="true"
@@ -299,7 +322,9 @@ exports[`Icons all icons match snapshots: SmallEmdash 1`] = `
299322
exports[`Icons all icons match snapshots: Tick 1`] = `
300323
<Component>
301324
<Component
325+
height={32}
302326
iconType="nhsuk-icon__tick"
327+
width={32}
303328
>
304329
<svg
305330
aria-hidden="true"

0 commit comments

Comments
 (0)