diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 439d2cfe..a3323930 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,6 +1,9 @@ name: CI Build -on: [push, pull_request] +on: + push: + branches: main + pull_request: jobs: build: diff --git a/README.md b/README.md index dce86052..7f81c3a7 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ NHS.UK Frontend ported to React -[![GitHub Actions CI Status](https://github.com/NHSDigital/nhsuk-react-components/workflows/CI/badge.svg)](https://github.com/NHSDigital/nhsuk-react-components/actions?query=workflow%3A%22CI+Build%22+branch%3Amain) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components) +[![GitHub Actions CI Status](https://github.com/NHSDigital/nhsuk-react-components/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/NHSDigital/nhsuk-react-components/actions?query=workflow%3A%22CI+Build%22+branch%3Amain) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components) ## Coming from 0.x? diff --git a/src/components/do-dont-list/DoDontList.tsx b/src/components/do-dont-list/DoDontList.tsx index 1b215c82..b3ac20f4 100644 --- a/src/components/do-dont-list/DoDontList.tsx +++ b/src/components/do-dont-list/DoDontList.tsx @@ -1,4 +1,4 @@ -import React, {HTMLProps, createContext, useContext, ReactNode} from 'react'; +import React, { HTMLProps, createContext, useContext, ReactNode } from 'react'; import classNames from 'classnames'; import { Tick, Cross } from '../icons'; import HeadingLevel, { HeadingLevelType } from '../../util/HeadingLevel'; @@ -43,10 +43,10 @@ const DoDontList: DoDontList = ({ interface DoDontItemProps extends HTMLProps { listItemType?: ListType; - prefixText?: ReactNode + prefixText?: ReactNode; } -const DoDontItem: React.FC = ({prefixText, listItemType,children, ...rest }) => { +const DoDontItem: React.FC = ({ prefixText, listItemType, children, ...rest }) => { const listItem = useContext(DoDontListContext); const defaultPrefix = (listItemType || listItem) === 'do' ? null : 'do not '; const actualPrefix = prefixText === undefined ? defaultPrefix : prefixText; diff --git a/src/components/do-dont-list/__tests__/DoDontList.test.tsx b/src/components/do-dont-list/__tests__/DoDontList.test.tsx index a4bd09bf..1fe4fea0 100644 --- a/src/components/do-dont-list/__tests__/DoDontList.test.tsx +++ b/src/components/do-dont-list/__tests__/DoDontList.test.tsx @@ -74,7 +74,7 @@ describe('DoDontList', () => { dontList.unmount(); }); - it("items render custom prefix text", () => { + it('items render custom prefix text', () => { const doList = mount( something good 1 @@ -88,7 +88,9 @@ describe('DoDontList', () => { do something bad 1 do something bad 2 - don't do }>something bad 3 + don't do }> + something bad 3 + something bad 4 something bad 5 , @@ -99,14 +101,20 @@ describe('DoDontList', () => { expect(doList.find('.nhsuk-list--tick').childAt(3).text()).toBe('something good 4'); expect(doList.find('.nhsuk-list--tick').childAt(4).text()).toBe('something good 5'); - expect(dontList.find('.nhsuk-list--cross').childAt(0).text()).toBe('do not do something bad 1'); - expect(dontList.find('.nhsuk-list--cross').childAt(1).text()).toBe('do not do something bad 2'); - expect(dontList.find('.nhsuk-list--cross').childAt(2).text()).toBe('don\'t do something bad 3'); + expect(dontList.find('.nhsuk-list--cross').childAt(0).text()).toBe( + 'do not do something bad 1', + ); + expect(dontList.find('.nhsuk-list--cross').childAt(1).text()).toBe( + 'do not do something bad 2', + ); + expect(dontList.find('.nhsuk-list--cross').childAt(2).text()).toBe( + "don't do something bad 3", + ); expect(dontList.find('.nhsuk-list--cross').childAt(3).text()).toBe('do not something bad 4'); expect(dontList.find('.nhsuk-list--cross').childAt(4).text()).toBe('something bad 5'); doList.unmount(); dontList.unmount(); - }) + }); }); }); diff --git a/src/components/do-dont-list/__tests__/__snapshots__/DoDontList.test.tsx.snap b/src/components/do-dont-list/__tests__/__snapshots__/DoDontList.test.tsx.snap index c635ec0e..8dd07a86 100644 --- a/src/components/do-dont-list/__tests__/__snapshots__/DoDontList.test.tsx.snap +++ b/src/components/do-dont-list/__tests__/__snapshots__/DoDontList.test.tsx.snap @@ -13,7 +13,6 @@ exports[`DoDontList matches snapshot: DoDontList-Do 1`] = ` > Do @@ -33,7 +32,6 @@ exports[`DoDontList matches snapshot: DoDontList-Dont 1`] = ` > Don't diff --git a/src/components/error-summary/ErrorSummary.tsx b/src/components/error-summary/ErrorSummary.tsx index f9cff476..eb82250c 100644 --- a/src/components/error-summary/ErrorSummary.tsx +++ b/src/components/error-summary/ErrorSummary.tsx @@ -1,4 +1,4 @@ -import React, { HTMLProps } from 'react'; +import React, {forwardRef, HTMLProps, PropsWithoutRef, RefAttributes} from 'react'; import classNames from 'classnames'; const ErrorSummaryTitle: React.FC> = ({ className, ...rest }) => ( @@ -19,20 +19,23 @@ const ErrorSummaryListItem: React.FC> = (props) => ); -interface ErrorSummary extends React.FC> { +interface ErrorSummary extends React.ForwardRefExoticComponent> & RefAttributes> { Title: React.FC>; Body: React.FC>; List: React.FC>; Item: React.FC>; } -const ErrorSummary: ErrorSummary = ({ className, ...rest }) => ( -
-); - -ErrorSummary.Title = ErrorSummaryTitle; -ErrorSummary.Body = ErrorSummaryBody; -ErrorSummary.List = ErrorSummaryList; -ErrorSummary.Item = ErrorSummaryListItem; +const ErrorSummaryDiv = forwardRef>(({className, ...rest}, ref) => +
+) +ErrorSummaryDiv.displayName = "ErrorSummary" + +const ErrorSummary: ErrorSummary = Object.assign(ErrorSummaryDiv, { + Title: ErrorSummaryTitle, + Body: ErrorSummaryBody, + List: ErrorSummaryList, + Item: ErrorSummaryListItem, +}) export default ErrorSummary; diff --git a/src/components/error-summary/__tests__/ErrorSummary.test.tsx b/src/components/error-summary/__tests__/ErrorSummary.test.tsx index 7c7cd184..05b39055 100644 --- a/src/components/error-summary/__tests__/ErrorSummary.test.tsx +++ b/src/components/error-summary/__tests__/ErrorSummary.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import ErrorSummary from '..'; describe('ErrorSummary', () => { @@ -9,6 +9,13 @@ describe('ErrorSummary', () => { element.unmount(); }); + it('forwards refs', () => { + const ref = React.createRef(); + const element = mount(); + expect(ref.current).not.toBeNull(); + element.unmount(); + }); + describe('ErrorSummary.Title', () => { it('matches snapshot', () => { const element = shallow(Title); diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index 616df350..59d1c892 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -1,7 +1,6 @@ import React, { HTMLProps } from 'react'; import classNames from 'classnames'; import { Container } from '../layout'; - type FooterListProps = HTMLProps; const FooterList: React.FC = ({ className, ...rest }) => ( diff --git a/src/components/header/components/MenuToggle.tsx b/src/components/header/components/MenuToggle.tsx index b0fdfe52..f0864a51 100644 --- a/src/components/header/components/MenuToggle.tsx +++ b/src/components/header/components/MenuToggle.tsx @@ -1,6 +1,4 @@ -import React, { - HTMLProps, useContext, useEffect, MouseEvent, -} from 'react'; +import React, { HTMLProps, useContext, useEffect, MouseEvent } from 'react'; import classNames from 'classnames'; import HeaderContext, { IHeaderContext } from '../HeaderContext'; @@ -28,7 +26,7 @@ const MenuToggle: React.FC = ({ onClick, ...rest }) => {