Widen support for ref, as and asElement props

Author: colinrotherham

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

@@ -1,21 +1,30 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import React, { ComponentPropsWithoutRef, FC, forwardRef } from 'react';
 import classNames from 'classnames';
 
 interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
   expander?: boolean;
 }
 
-const DetailsComponent: FC<DetailsProps> = ({ className, expander, ...rest }) => (
-  <details
-    className={classNames('nhsuk-details', { 'nhsuk-expander': expander }, className)}
-    {...rest}
-  />
+const DetailsComponent = forwardRef<HTMLDetailsElement, DetailsProps>(
+  ({ className, expander, ...rest }, forwardedRef) => (
+    <details
+      className={classNames('nhsuk-details', { 'nhsuk-expander': expander }, className)}
+      ref={forwardedRef}
+      {...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 DetailsSummary = forwardRef<HTMLElement, ComponentPropsWithoutRef<'div'>>(
+  ({ children, className, ...rest }, forwardedRef) => (
+    <summary
+      className={classNames('nhsuk-details__summary', className)}
+      ref={forwardedRef}
+      {...rest}
+    >
+      <span className="nhsuk-details__summary-text">{children}</span>
+    </summary>
+  ),
 );
 
 const DetailsText: FC<ComponentPropsWithoutRef<'div'>> = ({ className, ...rest }) => (
@@ -34,5 +43,5 @@ ExpanderGroup.displayName = 'Details.ExpanderGroup';
 export default Object.assign(DetailsComponent, {
   Summary: DetailsSummary,
   Text: DetailsText,
-  ExpanderGroup: ExpanderGroup,
+  ExpanderGroup,
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
 import Details from '../';
 
@@ -21,6 +21,17 @@ describe('Details', () => {
     expect(container.querySelector('.nhsuk-expander')).toBeTruthy();
   });
 
+  it('forwards refs', () => {
+    const ref = createRef<HTMLDetailsElement>();
+
+    const { container } = render(<Details ref={ref} />);
+
+    const detailsEl = container.querySelector('details');
+
+    expect(ref.current).toBe(detailsEl);
+    expect(ref.current).toHaveClass('nhsuk-details');
+  });
+
   describe('Details.Summary', () => {
     it('matches snapshot', () => {
       const { container } = render(<Details.Summary>Content</Details.Summary>);

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

@@ -1,5 +1,12 @@
 'use client';
-import React, { ComponentPropsWithoutRef, FC, createContext, useContext, ReactNode } from 'react';
+import React, {
+  ComponentPropsWithoutRef,
+  FC,
+  createContext,
+  useContext,
+  ReactNode,
+  forwardRef,
+} from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '@components/content-presentation/icons';
 import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
@@ -15,16 +22,9 @@ interface DoAndDontListProps
 
 const DoAndDontListContext = createContext<ListType>('do');
 
-const DoAndDontListComponent: FC<DoAndDontListProps> = ({
-  className,
-  listType,
-  children,
-  heading,
-  headingLevel,
-  ...rest
-}) => {
-  return (
-    <div className={classNames('nhsuk-do-dont-list', className)} {...rest}>
+const DoAndDontListComponent = forwardRef<HTMLDivElement, DoAndDontListProps>(
+  ({ className, listType, children, heading, headingLevel, ...rest }, forwardedRef) => (
+    <div className={classNames('nhsuk-do-dont-list', className)} ref={forwardedRef} {...rest}>
       <HeadingLevel className="nhsuk-do-dont-list__label" headingLevel={headingLevel}>
         {heading || (listType === 'do' ? 'Do' : "Don't")}
       </HeadingLevel>
@@ -38,8 +38,8 @@ const DoAndDontListComponent: FC<DoAndDontListProps> = ({
         <DoAndDontListContext.Provider value={listType}>{children}</DoAndDontListContext.Provider>
       </ul>
     </div>
-  );
-};
+  ),
+);
 
 interface DoAndDontItemProps extends ComponentPropsWithoutRef<'li'> {
   listItemType?: ListType;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
 import DoAndDontList from '../';
 
@@ -10,6 +10,17 @@ describe('DoAndDontList', () => {
       expect(container).toMatchSnapshot('DoDontList-Do');
     });
 
+    it('forwards refs', () => {
+      const ref = createRef<HTMLDivElement>();
+
+      const { container } = render(<DoAndDontList listType="do" ref={ref} />);
+
+      const listEl = container.querySelector('div');
+
+      expect(ref.current).toBe(listEl);
+      expect(ref.current).toHaveClass('nhsuk-do-dont-list');
+    });
+
     it('adds the correct headings', () => {
       const { container } = render(<DoAndDontList listType="do" />);
 

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

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import React, { ComponentPropsWithoutRef, FC, forwardRef } from 'react';
 import classNames from 'classnames';
 import { Container, Row, Col } from '../../layout';
 import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
@@ -45,25 +45,28 @@ interface HeroProps extends ComponentPropsWithoutRef<'div'> {
   imageSrc?: string;
 }
 
-const HeroComponent: FC<HeroProps> = ({ className, children, imageSrc, ...rest }) => (
-  <section
-    className={classNames(
-      'nhsuk-hero',
-      { 'nhsuk-hero--image': imageSrc },
-      { 'nhsuk-hero--image-description': imageSrc && children },
-      className,
-    )}
-    style={imageSrc ? { backgroundImage: `url('${imageSrc}')` } : undefined}
-    {...rest}
-  >
-    {imageSrc ? (
-      <div className="nhsuk-hero__overlay">
+const HeroComponent = forwardRef<HTMLElement, HeroProps>(
+  ({ children, className, imageSrc, ...rest }, forwardedRef) => (
+    <section
+      className={classNames(
+        'nhsuk-hero',
+        { 'nhsuk-hero--image': imageSrc },
+        { 'nhsuk-hero--image-description': imageSrc && children },
+        className,
+      )}
+      style={imageSrc ? { backgroundImage: `url('${imageSrc}')` } : undefined}
+      ref={forwardedRef}
+      {...rest}
+    >
+      {imageSrc ? (
+        <div className="nhsuk-hero__overlay">
+          <HeroContent hasImage={Boolean(imageSrc)}>{children}</HeroContent>
+        </div>
+      ) : (
         <HeroContent hasImage={Boolean(imageSrc)}>{children}</HeroContent>
-      </div>
-    ) : (
-      <HeroContent hasImage={Boolean(imageSrc)}>{children}</HeroContent>
-    )}
-  </section>
+      )}
+    </section>
+  ),
 );
 
 HeroComponent.displayName = 'Hero';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
 import Hero from '..';
 
@@ -10,6 +10,17 @@ describe('Hero', () => {
     expect(container).toMatchSnapshot('Hero');
   });
 
+  it('forwards refs', () => {
+    const ref = createRef<HTMLElement>();
+
+    const { container } = render(<Hero ref={ref} />);
+
+    const heroEl = container.querySelector('section');
+
+    expect(ref.current).toBe(heroEl);
+    expect(ref.current).toHaveClass('nhsuk-hero');
+  });
+
   it('adds correct attributes when imageSrc is provided', () => {
     const { container } = render(<Hero imageSrc="image.png" />);
 

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

@@ -1,15 +1,17 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import React, { ComponentPropsWithoutRef, forwardRef } from 'react';
 import classNames from 'classnames';
 
 interface ImageProps extends ComponentPropsWithoutRef<'img'> {
   caption?: string;
 }
 
-const ImagesComponent: FC<ImageProps> = ({ alt = '', className, caption, ...rest }) => (
-  <figure className="nhsuk-image">
-    <img className={classNames('nhsuk-image__img', className)} alt={alt} {...rest} />
-    {caption ? <figcaption className="nhsuk-image__caption">{caption}</figcaption> : null}
-  </figure>
+const ImagesComponent = forwardRef<HTMLElement, ImageProps>(
+  ({ alt = '', className, caption, ...rest }, forwardedRef) => (
+    <figure className="nhsuk-image" ref={forwardedRef}>
+      <img className={classNames('nhsuk-image__img', className)} alt={alt} {...rest} />
+      {caption ? <figcaption className="nhsuk-image__caption">{caption}</figcaption> : null}
+    </figure>
+  ),
 );
 
 ImagesComponent.displayName = 'Images';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
 import Images from '../';
 
@@ -10,6 +10,17 @@ describe('Images', () => {
     expect(container).toMatchSnapshot('Images');
   });
 
+  it('forwards refs', () => {
+    const ref = createRef<HTMLElement>();
+
+    const { container } = render(<Images ref={ref} />);
+
+    const figureEl = container.querySelector('figure');
+
+    expect(ref.current).toBe(figureEl);
+    expect(ref.current).toHaveClass('nhsuk-image');
+  });
+
   it('renders caption', () => {
     const { container } = render(<Images caption="Caption" />);
 

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

@@ -1,15 +1,15 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import React, { ComponentPropsWithoutRef, forwardRef } from 'react';
 import classNames from 'classnames';
 
-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}
-  </div>
+type InsetTextProps = ComponentPropsWithoutRef<'div'>;
+
+const InsetTextComponent = forwardRef<HTMLDivElement, InsetTextProps>(
+  ({ className, children, ...rest }, forwardedRef) => (
+    <div className={classNames('nhsuk-inset-text', className)} ref={forwardedRef} {...rest}>
+      <span className="nhsuk-u-visually-hidden">Information: </span>
+      {children}
+    </div>
+  ),
 );
 
 InsetTextComponent.displayName = 'InsetText';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
 import InsetText from '../';
 
@@ -9,6 +9,17 @@ describe('InsetText', () => {
     expect(container).toMatchSnapshot('InsetText');
   });
 
+  it('forwards refs', () => {
+    const ref = createRef<HTMLDivElement>();
+
+    const { container } = render(<InsetText ref={ref} />);
+
+    const insetTextEl = container.querySelector('div');
+
+    expect(ref.current).toBe(insetTextEl);
+    expect(ref.current).toHaveClass('nhsuk-inset-text');
+  });
+
   it('has default visually hidden text', () => {
     const { container } = render(<InsetText />);