Update types from HTMLProps to ComponentProps

Author: colinrotherham

src/components/content-presentation/details/Details.tsx

@@ -1,34 +1,28 @@
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import classNames from 'classnames';
 
-interface DetailsProps extends HTMLProps<HTMLDetailsElement> {
+interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
   expander?: boolean;
 }
 
-interface DetailsComponent extends FC<DetailsProps> {
-  Summary: FC<HTMLProps<HTMLDivElement>>;
-  Text: FC<HTMLProps<HTMLDivElement>>;
-  ExpanderGroup: FC<HTMLProps<HTMLDivElement>>;
-}
-
-const DetailsComponent: DetailsComponent = ({ className, expander, ...rest }) => (
+const DetailsComponent: FC<DetailsProps> = ({ className, expander, ...rest }) => (
   <details
     className={classNames('nhsuk-details', { 'nhsuk-expander': expander }, className)}
     {...rest}
   />
 );
 
-const DetailsSummary: FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
+const DetailsSummary: FC<ComponentPropsWithoutRef<'div'>> = ({ className, children, ...rest }) => (
   <summary className={classNames('nhsuk-details__summary', className)} {...rest}>
     <span className="nhsuk-details__summary-text">{children}</span>
   </summary>
 );
 
-const DetailsText: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const DetailsText: FC<ComponentPropsWithoutRef<'div'>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-details__text', className)} {...rest} />
 );
 
-const ExpanderGroup: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const ExpanderGroup: FC<ComponentPropsWithoutRef<'div'>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-expander-group', className)} {...rest} />
 );
 
@@ -37,8 +31,8 @@ DetailsSummary.displayName = 'Details.Summary';
 DetailsText.displayName = 'Details.Text';
 ExpanderGroup.displayName = 'Details.ExpanderGroup';
 
-DetailsComponent.Summary = DetailsSummary;
-DetailsComponent.Text = DetailsText;
-DetailsComponent.ExpanderGroup = ExpanderGroup;
-
-export default DetailsComponent;
+export default Object.assign(DetailsComponent, {
+  Summary: DetailsSummary,
+  Text: DetailsText,
+  ExpanderGroup: ExpanderGroup,
+});

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -1,24 +1,21 @@
 'use client';
-import React, { FC, HTMLProps, createContext, useContext, ReactNode } from 'react';
+import React, { ComponentPropsWithoutRef, FC, createContext, useContext, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '@components/content-presentation/icons';
-import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
+import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
 
 type ListType = 'do' | 'dont';
 
-interface DoAndDontListProps extends HTMLProps<HTMLDivElement> {
+interface DoAndDontListProps
+  extends ComponentPropsWithoutRef<'div'>,
+    Pick<HeadingLevelProps, 'headingLevel'> {
   listType: ListType;
   heading?: string;
-  headingLevel?: HeadingLevelType;
-}
-
-interface DoAndDontListComponent extends FC<DoAndDontListProps> {
-  Item: FC<DoAndDontItemProps>;
 }
 
 const DoAndDontListContext = createContext<ListType>('do');
 
-const DoAndDontListComponent: DoAndDontListComponent = ({
+const DoAndDontListComponent: FC<DoAndDontListProps> = ({
   className,
   listType,
   children,
@@ -44,7 +41,7 @@ const DoAndDontListComponent: DoAndDontListComponent = ({
   );
 };
 
-interface DoAndDontItemProps extends HTMLProps<HTMLLIElement> {
+interface DoAndDontItemProps extends ComponentPropsWithoutRef<'li'> {
   listItemType?: ListType;
   prefixText?: ReactNode;
 }
@@ -74,6 +71,6 @@ const DoAndDontItem: FC<DoAndDontItemProps> = ({ prefixText, listItemType, child
 DoAndDontListComponent.displayName = 'DoAndDontList';
 DoAndDontItem.displayName = 'DoAndDontList.Item';
 
-DoAndDontListComponent.Item = DoAndDontItem;
-
-export default DoAndDontListComponent;
+export default Object.assign(DoAndDontListComponent, {
+  Item: DoAndDontItem,
+});

src/components/content-presentation/hero/Hero.tsx

@@ -1,9 +1,9 @@
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import classNames from 'classnames';
 import { Container, Row, Col } from '../../layout';
-import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
+import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
 
-interface HeroContentProps extends HTMLProps<HTMLDivElement> {
+interface HeroContentProps extends ComponentPropsWithoutRef<'div'> {
   hasImage: boolean;
 }
 
@@ -29,32 +29,23 @@ const HeroContent: FC<HeroContentProps> = ({ children, hasImage }) => {
   );
 };
 
-interface HeroHeadingProps extends HTMLProps<HTMLHeadingElement> {
-  headingLevel?: HeadingLevelType;
-}
-
-const HeroHeading: FC<HeroHeadingProps> = ({ className, headingLevel = 'h1', ...rest }) => (
+const HeroHeading: FC<HeadingLevelProps> = ({ className, headingLevel = 'h1', ...rest }) => (
   <HeadingLevel
     className={classNames('nhsuk-u-margin-bottom-3', className)}
     headingLevel={headingLevel}
     {...rest}
   />
 );
 
-const HeroText: FC<HTMLProps<HTMLParagraphElement>> = ({ className, ...rest }) => (
+const HeroText: FC<ComponentPropsWithoutRef<'p'>> = ({ className, ...rest }) => (
   <p className={classNames('nhsuk-body-l nhsuk-u-margin-bottom-0', className)} {...rest} />
 );
 
-interface HeroProps extends HTMLProps<HTMLDivElement> {
+interface HeroProps extends ComponentPropsWithoutRef<'div'> {
   imageSrc?: string;
 }
 
-interface HeroComponent extends FC<HeroProps> {
-  Heading: FC<HeroHeadingProps>;
-  Text: FC<HTMLProps<HTMLParagraphElement>>;
-}
-
-const HeroComponent: HeroComponent = ({ className, children, imageSrc, ...rest }) => (
+const HeroComponent: FC<HeroProps> = ({ className, children, imageSrc, ...rest }) => (
   <section
     className={classNames(
       'nhsuk-hero',
@@ -79,7 +70,7 @@ HeroComponent.displayName = 'Hero';
 HeroHeading.displayName = 'Hero.Heading';
 HeroText.displayName = 'Hero.Text';
 
-HeroComponent.Heading = HeroHeading;
-HeroComponent.Text = HeroText;
-
-export default HeroComponent;
+export default Object.assign(HeroComponent, {
+  Heading: HeroHeading,
+  Text: HeroText,
+});

src/components/content-presentation/icons/BaseIcon.tsx

@@ -1,8 +1,8 @@
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import classNames from 'classnames';
 
-export interface BaseIconSVGProps extends HTMLProps<SVGSVGElement> {
-  crossOrigin?: '' | 'anonymous' | 'use-credentials';
+export interface BaseIconSVGProps extends ComponentPropsWithoutRef<'svg'> {
+  title?: string;
   modifier?:
     | 'arrow-left'
     | 'arrow-right'

src/components/content-presentation/icons/__tests__/Icons.test.tsx

@@ -5,8 +5,8 @@ import * as Icons from '../';
 describe('Icons', () => {
   it('all icons match snapshots', () => {
     Object.entries(Icons).forEach((icon) => {
-      const [name, Component] = icon;
-      const Icon = Component as React.FC<React.HTMLProps<SVGSVGElement>>;
+      const [name, Icon] = icon;
+
       const { container } = render(<Icon />);
 
       expect(container).toMatchSnapshot(name);

src/components/content-presentation/images/Images.tsx

@@ -1,10 +1,7 @@
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import classNames from 'classnames';
 
-interface ImageProps extends HTMLProps<HTMLImageElement> {
-  // Overriding the default crossOrigin the default is crossOrigin: string | undefined
-  // which causes a typescript "incompatible types" error.
-  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
+interface ImageProps extends ComponentPropsWithoutRef<'img'> {
   caption?: string;
 }
 

src/components/content-presentation/inset-text/InsetText.tsx

@@ -1,7 +1,11 @@
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import classNames from 'classnames';
 
-const InsetTextComponent: FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
+const InsetTextComponent: FC<ComponentPropsWithoutRef<'div'>> = ({
+  className,
+  children,
+  ...rest
+}) => (
   <div className={classNames('nhsuk-inset-text', className)} {...rest}>
     <span className="nhsuk-u-visually-hidden">Information: </span>
     {children}

src/components/content-presentation/summary-list/SummaryList.tsx

@@ -1,34 +1,27 @@
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import classNames from 'classnames';
 
-const SummaryListRow: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const SummaryListRow: FC<ComponentPropsWithoutRef<'div'>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-summary-list__row', className)} {...rest} />
 );
 
-const SummaryListKey: FC<HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
+const SummaryListKey: FC<ComponentPropsWithoutRef<'dt'>> = ({ className, ...rest }) => (
   <dt className={classNames('nhsuk-summary-list__key', className)} {...rest} />
 );
 
-const SummaryListValue: FC<HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
+const SummaryListValue: FC<ComponentPropsWithoutRef<'dd'>> = ({ className, ...rest }) => (
   <dd className={classNames('nhsuk-summary-list__value', className)} {...rest} />
 );
 
-const SummaryListActions: FC<HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
+const SummaryListActions: FC<ComponentPropsWithoutRef<'dd'>> = ({ className, ...rest }) => (
   <dd className={classNames('nhsuk-summary-list__actions', className)} {...rest} />
 );
 
-interface SummaryListProps extends HTMLProps<HTMLDListElement> {
+interface SummaryListProps extends ComponentPropsWithoutRef<'dl'> {
   noBorder?: boolean;
 }
 
-interface SummaryListComponent extends FC<SummaryListProps> {
-  Row: FC<HTMLProps<HTMLDivElement>>;
-  Key: FC<HTMLProps<HTMLDListElement>>;
-  Value: FC<HTMLProps<HTMLDListElement>>;
-  Actions: FC<HTMLProps<HTMLDListElement>>;
-}
-
-const SummaryListComponent: SummaryListComponent = ({ className, noBorder, ...rest }) => (
+const SummaryListComponent: FC<SummaryListProps> = ({ className, noBorder, ...rest }) => (
   <dl
     className={classNames(
       'nhsuk-summary-list',
@@ -45,9 +38,9 @@ SummaryListKey.displayName = 'SummaryList.Key';
 SummaryListValue.displayName = 'SummaryList.Value';
 SummaryListActions.displayName = 'SummaryList.Actions';
 
-SummaryListComponent.Row = SummaryListRow;
-SummaryListComponent.Key = SummaryListKey;
-SummaryListComponent.Value = SummaryListValue;
-SummaryListComponent.Actions = SummaryListActions;
-
-export default SummaryListComponent;
+export default Object.assign(SummaryListComponent, {
+  Row: SummaryListRow,
+  Key: SummaryListKey,
+  Value: SummaryListValue,
+  Actions: SummaryListActions,
+});

src/components/content-presentation/table/Table.tsx

@@ -1,37 +1,35 @@
-import React, { ComponentProps, FC, HTMLProps, ReactNode, useMemo, useState } from 'react';
+import React, {
+  ComponentPropsWithRef,
+  ComponentPropsWithoutRef,
+  FC,
+  ReactNode,
+  useMemo,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import TableBody from './components/TableBody';
 import TableCaption from './components/TableCaption';
-import TableCell, { TableCellProps } from './components/TableCell';
+import TableCell from './components/TableCell';
 import TableContainer from './components/TableContainer';
 import TableHead from './components/TableHead';
 import TableRow from './components/TableRow';
-import TablePanel, { TablePanelProps } from './components/TablePanel';
+import TablePanel from './components/TablePanel';
 import TableContext, { ITableContext } from './TableContext';
 
-interface TableProps extends HTMLProps<HTMLTableElement> {
+interface TableProps extends ComponentPropsWithoutRef<'table'> {
   responsive?: boolean;
   caption?: ReactNode;
-  captionProps?: ComponentProps<typeof TableCaption>;
+  captionProps?: ComponentPropsWithRef<'caption'>;
 }
 
-interface TableComponent extends FC<TableProps> {
-  Body: FC<HTMLProps<HTMLTableSectionElement>>;
-  Cell: FC<TableCellProps>;
-  Container: FC<HTMLProps<HTMLDivElement>>;
-  Head: FC<HTMLProps<HTMLTableSectionElement>>;
-  Panel: FC<TablePanelProps>;
-  Row: FC<HTMLProps<HTMLTableRowElement>>;
-}
-
-const TableComponent = ({
+const TableComponent: FC<TableProps> = ({
   caption,
   captionProps,
   children,
   className,
   responsive = false,
   ...rest
-}: TableProps) => {
+}) => {
   const [headings, setHeadings] = useState<string[]>([]);
 
   const contextValue: ITableContext = useMemo(() => {
@@ -61,11 +59,11 @@ const TableComponent = ({
 
 TableComponent.displayName = 'Table';
 
-TableComponent.Container = TableContainer;
-TableComponent.Panel = TablePanel;
-TableComponent.Head = TableHead;
-TableComponent.Body = TableBody;
-TableComponent.Row = TableRow;
-TableComponent.Cell = TableCell;
-
-export default TableComponent;
+export default Object.assign(TableComponent, {
+  Container: TableContainer,
+  Panel: TablePanel,
+  Head: TableHead,
+  Body: TableBody,
+  Row: TableRow,
+  Cell: TableCell,
+});

src/components/content-presentation/table/components/TableBody.tsx

@@ -1,14 +1,15 @@
 import classNames from 'classnames';
-import React, { FC, HTMLProps } from 'react';
+import React, { ComponentPropsWithoutRef, FC } from 'react';
 import TableSectionContext, { TableSection } from '../TableSectionContext';
 
-const TableBody: FC<HTMLProps<HTMLTableSectionElement>> = ({ className, children, ...rest }) => (
+const TableBody: FC<ComponentPropsWithoutRef<'tbody'>> = ({ children, className, ...rest }) => (
   <tbody className={classNames('nhsuk-table__body', className)} {...rest}>
     <TableSectionContext.Provider value={TableSection.BODY}>
       {children}
     </TableSectionContext.Provider>
   </tbody>
 );
+
 TableBody.displayName = 'Table.Body';
 
 export default TableBody;