Update dependency eslint-config-airbnb to v19

.eslintrc.js

@@ -42,6 +42,7 @@ module.exports = {
     ],
     'import/extensions': [1, { json: 'ignorePackages' }],
     'jsx-a11y/no-redundant-roles': 'off',
+    'default-param-last': 'off',
   },
   settings: {
     'import/resolver': {

README.md

@@ -171,7 +171,7 @@ Install Node. [https://nodejs.org/en/](https://nodejs.org/en/). We use the versi
 nvm use
 ```
 
-#### Install Yarn
+### Install Yarn
 
 The Simorgh project uses Yarn for package management. It is recommended to install Yarn through the npm package manager, which comes bundled with Node.js when you install it on your system. To install Yarn, run this command:
 

package.json

@@ -186,7 +186,7 @@
     "cypress-terminal-report": "3.5.2",
     "depcheck": "1.4.3",
     "eslint": "7.32.0",
-    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-plugin-cypress": "2.12.1",

src/app/components/EmbedConsentBanner/ConsentBanner.tsx

@@ -157,11 +157,11 @@ type ConsentBannerContentProps = {
   id?: string;
 };
 
-const ConsentBanner = ({
+function ConsentBanner({
   provider,
   clickHandler,
   id,
-}: ConsentBannerContentProps) => {
+}: ConsentBannerContentProps) {
   const { externalLinkText, translations } = useContext(ServiceContext);
 
   const consentTranslations = getTranslations(
@@ -202,6 +202,6 @@ const ConsentBanner = ({
       </Text>
     </div>
   );
-};
+}
 
 export default ConsentBanner;

src/app/components/EmbedConsentBanner/index.stories.tsx

@@ -12,9 +12,11 @@ import {
 } from '.';
 import ThemeProvider from '../ThemeProvider';
 
-const BackgroundColorWrapper = ({ children }: PropsWithChildren) => (
-  <div css={css({ backgroundColor: C_GREY_2, padding: 20 })}>{children}</div>
-);
+function BackgroundColorWrapper({ children }: PropsWithChildren) {
+  return (
+    <div css={css({ backgroundColor: C_GREY_2, padding: 20 })}>{children}</div>
+  );
+}
 
 interface Props {
   service: Services;
@@ -23,12 +25,12 @@ interface Props {
   provider: ConsentBannerProviders;
 }
 
-const Component = ({
+function Component({
   service = 'news',
   variant,
   isAmp,
   provider = 'youtube',
-}: Props) => {
+}: Props) {
   const EmbedBanner = !isAmp
     ? EmbedConsentBannerCanonical
     : EmbedConsentBannerAmp;
@@ -44,29 +46,29 @@ const Component = ({
       </ServiceContextProvider>
     </ThemeProvider>
   );
-};
+}
 
 export default {
   title: 'Containers/Social Embed/Consent Banner',
   Component,
   parameters: { chromatic: { disable: true } },
 };
 
-export const CanonicalYoutube = (props: Props) => (
-  <Component {...props} provider="youtube" />
-);
-export const CanonicalYoutubeMundo = (props: Props) => (
-  <Component {...props} isAmp provider="youtube" service="mundo" />
-);
-export const AmpYoutube = (props: Props) => (
-  <Component {...props} isAmp provider="youtube" />
-);
-export const CanonicalTikTok = (props: Props) => (
-  <Component {...props} provider="tiktok" />
-);
-export const CanonicalTikTokMundo = (props: Props) => (
-  <Component {...props} isAmp provider="tiktok" service="mundo" />
-);
-export const AmpTikTok = (props: Props) => (
-  <Component {...props} isAmp provider="tiktok" />
-);
+export function CanonicalYoutube(props: Props) {
+  return <Component {...props} provider="youtube" />;
+}
+export function CanonicalYoutubeMundo(props: Props) {
+  return <Component {...props} isAmp provider="youtube" service="mundo" />;
+}
+export function AmpYoutube(props: Props) {
+  return <Component {...props} isAmp provider="youtube" />;
+}
+export function CanonicalTikTok(props: Props) {
+  return <Component {...props} provider="tiktok" />;
+}
+export function CanonicalTikTokMundo(props: Props) {
+  return <Component {...props} isAmp provider="tiktok" service="mundo" />;
+}
+export function AmpTikTok(props: Props) {
+  return <Component {...props} isAmp provider="tiktok" />;
+}

src/app/components/EmbedConsentBanner/index.tsx

@@ -23,11 +23,11 @@ type ConsentBannerProps = {
   id?: string;
 };
 
-const EmbedConsentBannerAmp = ({
+function EmbedConsentBannerAmp({
   provider,
   id,
   children,
-}: PropsWithChildren<ConsentBannerProps>) => {
+}: PropsWithChildren<ConsentBannerProps>) {
   if (!CONSENT_BANNER_PROVIDERS.includes(provider))
     return children as JSX.Element;
 
@@ -47,12 +47,12 @@ const EmbedConsentBannerAmp = ({
       </div>
     </>
   );
-};
+}
 
-const EmbedConsentBannerCanonical = ({
+function EmbedConsentBannerCanonical({
   provider,
   children,
-}: PropsWithChildren<Omit<ConsentBannerProps, 'id'>>) => {
+}: PropsWithChildren<Omit<ConsentBannerProps, 'id'>>) {
   const [consented, setConsented] = useState(false);
 
   const handleClickTracking = useClickTrackerHandler(
@@ -75,6 +75,6 @@ const EmbedConsentBannerCanonical = ({
       }}
     />
   );
-};
+}
 
 export { EmbedConsentBannerCanonical, EmbedConsentBannerAmp };

src/app/components/Heading/index.stories.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const EMPTY_OPTION = '--';
 
-const HeadingStory = ({ service, variant, text }: Props) => {
+function HeadingStory({ service, variant, text }: Props) {
   const selectedLevel = select(
     'level',
     {
@@ -82,7 +82,7 @@ const HeadingStory = ({ service, variant, text }: Props) => {
       </ServiceContextProvider>
     </ThemeProvider>
   );
-};
+}
 
 export default {
   title: 'New Components/Heading',

src/app/components/Heading/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 
-import React, { FC, HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { jsx } from '@emotion/react';
 
 import { GelFontSize, FontVariant } from '../../models/types/theming';
@@ -30,14 +30,14 @@ const sizes: Sizes = {
   h4: 'greatPrimer',
 };
 
-const Heading: FC<Props> = ({
+function Heading({
   children,
   className,
   fontVariant = 'sansBold',
   level,
   size,
   ...htmlAttributes
-}: Props) => {
+}: Props) {
   const element: Element = `h${level}`;
 
   return (
@@ -62,6 +62,6 @@ const Heading: FC<Props> = ({
       {children}
     </Text>
   );
-};
+}
 
 export default Heading;

src/app/components/Image/index.stories.tsx

@@ -4,72 +4,84 @@ import AmpDecorator from '../../../../.storybook/helpers/ampDecorator';
 import ThemeProvider from '../ThemeProvider';
 import Image from '.';
 
-export const BasicImage = () => (
-  <ThemeProvider service="mundo" variant="default">
-    <Image
-      alt="A penguin stands on an ice floe"
-      src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
-    />
-  </ThemeProvider>
-);
+export function BasicImage() {
+  return (
+    <ThemeProvider service="mundo" variant="default">
+      <Image
+        alt="A penguin stands on an ice floe"
+        src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
+      />
+    </ThemeProvider>
+  );
+}
 
-export const ResponsiveImage = () => (
-  <ThemeProvider service="mundo" variant="default">
-    <Image
-      alt="A penguin stands on an ice floe"
-      src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
-      srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
-    />
-  </ThemeProvider>
-);
+export function ResponsiveImage() {
+  return (
+    <ThemeProvider service="mundo" variant="default">
+      <Image
+        alt="A penguin stands on an ice floe"
+        src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
+        srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
+      />
+    </ThemeProvider>
+  );
+}
 
-export const ResponsiveWebPWithJpegFallback = () => (
-  <ThemeProvider service="mundo" variant="default">
-    <Image
-      alt="A penguin stands on an ice floe"
-      src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
-      srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 624w"
-      mediaType="image/webp"
-      fallbackSrcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
-      fallbackMediaType="image/jpeg"
-    />
-  </ThemeProvider>
-);
+export function ResponsiveWebPWithJpegFallback() {
+  return (
+    <ThemeProvider service="mundo" variant="default">
+      <Image
+        alt="A penguin stands on an ice floe"
+        src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
+        srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 624w"
+        mediaType="image/webp"
+        fallbackSrcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
+        fallbackMediaType="image/jpeg"
+      />
+    </ThemeProvider>
+  );
+}
 
-export const BasicAMPImage = () => (
-  <ThemeProvider service="mundo" variant="default">
-    <Image
-      isAmp
-      alt="A penguin stands on an ice floe"
-      src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
-    />
-  </ThemeProvider>
-);
+export function BasicAMPImage() {
+  return (
+    <ThemeProvider service="mundo" variant="default">
+      <Image
+        isAmp
+        alt="A penguin stands on an ice floe"
+        src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
+      />
+    </ThemeProvider>
+  );
+}
 
-export const ResponsiveAMPImage = () => (
-  <ThemeProvider service="mundo" variant="default">
-    <Image
-      isAmp
-      alt="A penguin stands on an ice floe"
-      src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
-      srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
-    />
-  </ThemeProvider>
-);
+export function ResponsiveAMPImage() {
+  return (
+    <ThemeProvider service="mundo" variant="default">
+      <Image
+        isAmp
+        alt="A penguin stands on an ice floe"
+        src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
+        srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
+      />
+    </ThemeProvider>
+  );
+}
 
-export const AMPWebPWithJpegFallback = () => (
-  <ThemeProvider service="mundo" variant="default">
-    <Image
-      isAmp
-      alt="A penguin stands on an ice floe"
-      src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
-      srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 624w"
-      mediaType="image/webp"
-      fallbackSrcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
-      fallbackMediaType="image/jpeg"
-    />
-  </ThemeProvider>
-);
+export function AMPWebPWithJpegFallback() {
+  return (
+    <ThemeProvider service="mundo" variant="default">
+      <Image
+        isAmp
+        alt="A penguin stands on an ice floe"
+        src="https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg"
+        srcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg.webp 624w"
+        mediaType="image/webp"
+        fallbackSrcSet="https://ichef.bbci.co.uk/news/240/cpsprodpb/164AF/production/_110911319_antartica.jpg 240w, https://ichef.bbci.co.uk/news/624/cpsprodpb/164AF/production/_110911319_antartica.jpg 624w"
+        fallbackMediaType="image/jpeg"
+      />
+    </ThemeProvider>
+  );
+}
 
 BasicAMPImage.decorators = [AmpDecorator];
 ResponsiveAMPImage.decorators = [AmpDecorator];

src/app/components/Image/index.test.tsx

@@ -15,20 +15,22 @@ const removeStyles = (el: HTMLElement) => {
   return dom.window.document.body.firstChild;
 };
 
-const Fixture = ({ ...props }) => (
-  <Image
-    alt="Test image alt text"
-    src="/test-image-500.jpg"
-    srcSet="/test-image-200.webp 200w, /test-image-500.webp 500w"
-    mediaType="image/webp"
-    fallbackSrcSet="/test-image-200.jpg 200w, /test-image-500.jpg 500w"
-    fallbackMediaType="image/jpeg"
-    sizes="(max-width: 600px) 480px, 800px"
-    width={500}
-    height={281}
-    {...props}
-  />
-);
+function Fixture({ ...props }) {
+  return (
+    <Image
+      alt="Test image alt text"
+      src="/test-image-500.jpg"
+      srcSet="/test-image-200.webp 200w, /test-image-500.webp 500w"
+      mediaType="image/webp"
+      fallbackSrcSet="/test-image-200.jpg 200w, /test-image-500.jpg 500w"
+      fallbackMediaType="image/jpeg"
+      sizes="(max-width: 600px) 480px, 800px"
+      width={500}
+      height={281}
+      {...props}
+    />
+  );
+}
 
 describe('Image - Canonical', () => {
   it('should preload when preload is true', async () => {