reverted react.fc changes

ricksmith130 · ricksmith130 · commit f8cc65ecb838 · 2025-09-22T10:01:04.000+01:00
diff --git a/src/components/content-presentation/details/Details.tsx b/src/components/content-presentation/details/Details.tsx
@@ -1,36 +1,35 @@
-import React from 'react';
-import { HTMLProps } from 'react'
+import React, { HTMLProps, FC } from 'react';
 import classNames from 'classnames';
 
 interface DetailsProps extends HTMLProps<HTMLDetailsElement> {
   expander?: boolean;
 }
 
-interface Details extends React.FC<DetailsProps> {
-  Summary: React.FC<HTMLProps<HTMLDivElement>>;
-  Text: React.FC<HTMLProps<HTMLDivElement>>;
-  ExpanderGroup: React.FC<HTMLProps<HTMLDivElement>>;
+interface Details extends FC<DetailsProps> {
+  Summary: FC<HTMLProps<HTMLDivElement>>;
+  Text: FC<HTMLProps<HTMLDivElement>>;
+  ExpanderGroup: FC<HTMLProps<HTMLDivElement>>;
 }
 
 // TODO: Check if standard NHS.UK polyfill "details.polyfill.js" is required
-const Details: Details = ({ className, expander, ...rest }: any) => (
+const Details: Details = ({ className, expander, ...rest }) => (
   <details
     className={classNames('nhsuk-details', { 'nhsuk-expander': expander }, className)}
     {...rest}
   />
 );
 
-const DetailsSummary: React.FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
+const DetailsSummary: FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
   <summary className={classNames('nhsuk-details__summary', className)} {...rest}>
     <span className="nhsuk-details__summary-text">{children}</span>
   </summary>
 );
 
-const DetailsText: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const DetailsText: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-details__text', className)} {...rest} />
 );
 
-const ExpanderGroup: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const ExpanderGroup: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-expander-group', className)} {...rest} />
 );
 
diff --git a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { createContext, useContext, HTMLProps } from 'react';
+import React, { createContext, useContext, HTMLProps, FC } from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '@components/content-presentation/icons';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
@@ -12,8 +12,8 @@ interface DoAndDontListProps extends HTMLProps<HTMLDivElement> {
   headingLevel?: HeadingLevelType;
 }
 
-interface DoAndDontList extends React.FC<DoAndDontListProps> {
-  Item: React.FC<DoAndDontItemProps>;
+interface DoAndDontList extends FC<DoAndDontListProps> {
+  Item: FC<DoAndDontItemProps>;
 }
 
 const DoAndDontListContext = createContext<ListType>('do');
@@ -49,7 +49,7 @@ interface DoAndDontItemProps extends HTMLProps<HTMLLIElement> {
   prefixText?: React.ReactNode;
 }
 
-const DoAndDontItem: React.FC<DoAndDontItemProps> = ({ prefixText, listItemType, children, ...rest }) => {
+const DoAndDontItem: FC<DoAndDontItemProps> = ({ prefixText, listItemType, children, ...rest }) => {
   const listItem = useContext(DoAndDontListContext);
   const defaultPrefix = (listItemType || listItem) === 'do' ? null : 'do not ';
   const actualPrefix = prefixText === undefined ? defaultPrefix : prefixText;
diff --git a/src/components/content-presentation/hero/Hero.tsx b/src/components/content-presentation/hero/Hero.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, FC } from 'react';
 import classNames from 'classnames';
 import { Container, Row, Col } from '../../layout';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
@@ -7,7 +7,7 @@ interface HeroContentProps extends HTMLProps<HTMLDivElement> {
   hasImage: boolean;
 }
 
-const HeroContent: React.FC<HeroContentProps> = ({ children, hasImage }) => {
+const HeroContent: FC<HeroContentProps> = ({ children, hasImage }) => {
   if (!children) {
     return null;
   }
@@ -33,25 +33,25 @@ interface HeroHeadingProps extends HTMLProps<HTMLHeadingElement> {
   headingLevel?: HeadingLevelType;
 }
 
-const HeroHeading: React.FC<HeroHeadingProps> = ({ className, headingLevel = 'h1', ...rest }) => (
+const HeroHeading: FC<HeroHeadingProps> = ({ className, headingLevel = 'h1', ...rest }) => (
   <HeadingLevel
     className={classNames('nhsuk-u-margin-bottom-3', className)}
     headingLevel={headingLevel}
     {...rest}
   />
 );
 
-const HeroText: React.FC<HTMLProps<HTMLParagraphElement>> = ({ className, ...rest }) => (
+const HeroText: FC<HTMLProps<HTMLParagraphElement>> = ({ className, ...rest }) => (
   <p className={classNames('nhsuk-body-l nhsuk-u-margin-bottom-0', className)} {...rest} />
 );
 
 interface HeroProps extends HTMLProps<HTMLDivElement> {
   imageSrc?: string;
 }
 
-interface Hero extends React.FC<HeroProps> {
-  Heading: React.FC<HeroHeadingProps>;
-  Text: React.FC<HTMLProps<HTMLParagraphElement>>;
+interface Hero extends FC<HeroProps> {
+  Heading: FC<HeroHeadingProps>;
+  Text: FC<HTMLProps<HTMLParagraphElement>>;
 }
 
 const Hero: Hero = ({ className, children, imageSrc, ...rest }) => (
diff --git a/src/components/content-presentation/icons/individual/ArrowLeft.tsx b/src/components/content-presentation/icons/individual/ArrowLeft.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const ArrowLeft: React.FC<BaseIconSVGProps> = (props) => (
+export const ArrowLeft: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__arrow-left" {...props}>
     <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" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/ArrowRight.tsx b/src/components/content-presentation/icons/individual/ArrowRight.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const ArrowRight: React.FC<BaseIconSVGProps> = (props) => (
+export const ArrowRight: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__arrow-right" {...props}>
     <path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx b/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const ArrowRightCircle: React.FC<BaseIconSVGProps> = (props) => (
+export const ArrowRightCircle: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__arrow-right-circle" {...props}>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z" />
diff --git a/src/components/content-presentation/icons/individual/ChevronDown.tsx b/src/components/content-presentation/icons/individual/ChevronDown.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const ChevronDown: React.FC<BaseIconSVGProps> = (props) => (
+export const ChevronDown: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__chevron-down" {...props}>
     <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/ChevronLeft.tsx b/src/components/content-presentation/icons/individual/ChevronLeft.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const ChevronLeft: React.FC<BaseIconSVGProps> = (props) => (
+export const ChevronLeft: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__chevron-left" {...props}>
     <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/ChevronRight.tsx b/src/components/content-presentation/icons/individual/ChevronRight.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const ChevronRight: React.FC<BaseIconSVGProps> = (props) => (
+export const ChevronRight: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__chevron-right" {...props}>
     <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx b/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import { FC } from 'react';
 
-export const ChevronRightCircle: React.FC = () => (
+export const ChevronRightCircle: FC = () => (
   <svg
     className="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/content-presentation/icons/individual/Close.tsx b/src/components/content-presentation/icons/individual/Close.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Close: React.FC<BaseIconSVGProps> = (props) => (
+export const Close: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__close" {...props}>
     <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/Cross.tsx b/src/components/content-presentation/icons/individual/Cross.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Cross: React.FC<BaseIconSVGProps> = (props) => (
+export const Cross: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__cross" {...props}>
     <path
       d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z"
diff --git a/src/components/content-presentation/icons/individual/Emdash.tsx b/src/components/content-presentation/icons/individual/Emdash.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Emdash: React.FC<BaseIconSVGProps> = ({ height = 1, width = 19, ...rest }) => (
+export const Emdash: FC<BaseIconSVGProps> = ({ height = 1, width = 19, ...rest }) => (
   <BaseIconSVG iconType="nhsuk-icon__emdash" height={height} width={width} {...rest}>
     <path d="M0 0h19v1H0z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/Minus.tsx b/src/components/content-presentation/icons/individual/Minus.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Minus: React.FC<BaseIconSVGProps> = (props) => (
+export const Minus: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__minus" {...props}>
     <circle cx="12" cy="12" r="10" />
     <path
diff --git a/src/components/content-presentation/icons/individual/Plus.tsx b/src/components/content-presentation/icons/individual/Plus.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Plus: React.FC<BaseIconSVGProps> = (props) => (
+export const Plus: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__minus" {...props}>
     <circle cx="12" cy="12" r="10" />
     <path
diff --git a/src/components/content-presentation/icons/individual/Search.tsx b/src/components/content-presentation/icons/individual/Search.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Search: React.FC<BaseIconSVGProps> = (props) => (
+export const Search: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__search" {...props}>
     <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/SmallEmdash.tsx b/src/components/content-presentation/icons/individual/SmallEmdash.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const SmallEmdash: React.FC<BaseIconSVGProps> = ({ height = 1, width = 16, ...rest }) => (
+export const SmallEmdash: FC<BaseIconSVGProps> = ({ height = 1, width = 16, ...rest }) => (
   <BaseIconSVG iconType="nhsuk-icon__emdash" height={height} width={width} {...rest}>
     <path d="M0 0h16v1H0z" />
   </BaseIconSVG>
diff --git a/src/components/content-presentation/icons/individual/Tick.tsx b/src/components/content-presentation/icons/individual/Tick.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { FC } from 'react';
 import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon';
 
-export const Tick: React.FC<BaseIconSVGProps> = (props) => (
+export const Tick: FC<BaseIconSVGProps> = (props) => (
   <BaseIconSVG iconType="nhsuk-icon__tick" {...props}>
     <path
       strokeWidth="4"
diff --git a/src/components/form-elements/checkboxes/components/Divider.tsx b/src/components/form-elements/checkboxes/components/Divider.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { FC } from 'react';
 
 type DividerProps = {
   dividerText?: string;
 };
 
-const Divider: React.FC<DividerProps> = ({ dividerText = 'or' }) => (
+const Divider: FC<DividerProps> = ({ dividerText = 'or' }) => (
   <div className="nhsuk-checkboxes__divider">{dividerText}</div>
 );
 
diff --git a/src/components/navigation/action-link/ActionLink.tsx b/src/components/navigation/action-link/ActionLink.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { ArrowRightCircle } from '@components/content-presentation/icons';
 import type { AsElementLink } from '@util/types/LinkTypes';
 
-const ActionLink: React.FC<AsElementLink<'a'>> = ({
+const ActionLink: FC<AsElementLink<'a'>> = ({
   children,
   asElement: Component = 'a',
   className,
diff --git a/src/components/navigation/back-link/BackLink.tsx b/src/components/navigation/back-link/BackLink.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 
 export interface BreadcrumbProps {
   children: React.ReactNode;
   className?: string;
 }
 
-const Breadcrumb: React.FC<BreadcrumbProps> = ({ children, className }) => (
+const Breadcrumb: FC<BreadcrumbProps> = ({ children, className }) => (
   <nav className={classNames('nhsuk-breadcrumb', className)} aria-label="Breadcrumb">
     <ol className="nhsuk-breadcrumb__list">
       {children}
diff --git a/src/components/navigation/card/components/CardGroupItem.tsx b/src/components/navigation/card/components/CardGroupItem.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { FC } from 'react';
 import classNames from 'classnames';
 import { Col } from '@components/layout';
 
-const CardGroupItem: React.FC<React.ComponentProps<typeof Col>> = ({ className, ...rest }) => (
+const CardGroupItem: FC<React.ComponentProps<typeof Col>> = ({ className, ...rest }) => (
   <Col className={classNames('nhsuk-card-group__item', className)} {...rest} />
 );
 
diff --git a/src/components/navigation/card/components/CardLink.tsx b/src/components/navigation/card/components/CardLink.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { AsElementLink } from '@util/types/LinkTypes';
 
-const CardLink: React.FC<AsElementLink<HTMLAnchorElement>> = ({
+const CardLink: FC<AsElementLink<HTMLAnchorElement>> = ({
   className,
   asElement: Component = 'a',
   ...rest
diff --git a/src/components/navigation/header/components/NavItem.tsx b/src/components/navigation/header/components/NavItem.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { FC } from 'react';
 import classNames from 'classnames';
 import { AsElementLink } from '@util/types/LinkTypes';
 
 export interface NavItemProps extends AsElementLink<HTMLAnchorElement> {
   home?: boolean;
 }
 
-const NavItem: React.FC<NavItemProps> = ({
+const NavItem: FC<NavItemProps> = ({
   home,
   className,
   children,
diff --git a/src/components/navigation/header/components/OrganisationalLogo.tsx b/src/components/navigation/header/components/OrganisationalLogo.tsx
@@ -1,13 +1,13 @@
 'use client';
-import React, { useContext } from 'react';
+import React, { FC, useContext } from 'react';
 import HeaderContext, { IHeaderContext } from '../HeaderContext';
 import { AsElementLink } from '@util/types/LinkTypes';
 
 export interface OrganisationalLogoProps extends AsElementLink<HTMLAnchorElement> {
   logoUrl?: string;
 }
 
-const OrganisationalLogo: React.FC<OrganisationalLogoProps> = ({
+const OrganisationalLogo: FC<OrganisationalLogoProps> = ({
   logoUrl,
   alt,
   asElement: Component = 'a',
diff --git a/src/components/utils/LabelBlock.tsx b/src/components/utils/LabelBlock.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import HintText, { HintTextProps } from '../form-elements/hint-text/HintText';
 import Label, { LabelProps } from '../form-elements/label/Label';
 import ErrorMessage, { ErrorMessageProps } from '../form-elements/error-message/ErrorMessage';
@@ -13,7 +13,7 @@ interface LabelBlockProps {
   errorProps?: ErrorMessageProps;
 }
 
-const LabelBlock: React.FC<LabelBlockProps> = ({
+const LabelBlock: FC<LabelBlockProps> = ({
   elementId,
   label,
   labelProps,
