Merge branch 'latest' into WS-2627-my-news-page-front-end-improvements

Author: elvinasv

README.md

@@ -4,7 +4,7 @@
 [![Known Vulnerabilities](https://snyk.io/test/github/bbc/simorgh/badge.svg)](https://snyk.io/test/github/bbc/simorgh)
 [![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](https://bbc.github.io/simorgh/)
 
-BBC World Service News websites are rendered using Simorgh, a ReactJS based application. Simorgh also renders AMP news article pages for World Service and Public Service News.
+BBC World Service News websites are rendered using Simorgh, a ReactJS based application. Simorgh also renders AMP news article pages for World Service and Public Service News. 
 
 Simorgh provides a fast and accessible web experience used by millions of people around the world each month ([see list of websites using Simorgh](https://github.com/bbc/simorgh/blob/latest/docs/Simorgh-Release-Info.mdx)). It is regularly maintained and well documented, and we welcome open source contributors.
 

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/footer.tsx

@@ -4,26 +4,25 @@ import Centre from './centre';
 import MatchProgress from './match-progress';
 import PenaltyScores from './penalty-scores';
 import styles from '../index.styles';
-import type { HeadToHeadV2Data, BadgePlaceholderFallbackType } from '../types';
+import type { HeadToHeadV2Data } from '../types';
 
 interface ItemWrapperProps {
   data: HeadToHeadV2Data;
   isConciseView: boolean;
   shouldHideBadges: boolean;
   maxScoreLength?: number;
-  teamBadgePlaceholderFallbackType?: BadgePlaceholderFallbackType;
 }
 
 const ItemWrapper = ({
   data,
   isConciseView,
   shouldHideBadges,
   maxScoreLength,
-  teamBadgePlaceholderFallbackType,
 }: ItemWrapperProps) => {
   const shouldDisplayPenScores =
     data.home.runningScores?.penaltyShootout &&
     data.away.runningScores?.penaltyShootout;
+
   return (
     <>
       <div
@@ -32,13 +31,13 @@ const ItemWrapper = ({
       >
         <div css={styles.teamHome} data-participant-id={data.home.id}>
           <Team
+            urn={data.home.urn}
             alignment="home"
             name={data.home.fullName}
             shortName={data.home.shortName}
-            urn={data.home.urn}
             isConciseView={isConciseView}
-            shouldHideBadges={shouldHideBadges}
-            badgePlaceholderFallbackType={teamBadgePlaceholderFallbackType}
+            imageUrl={data.home.imageSrc}
+            hideBadges={shouldHideBadges}
           />
         </div>
         <div css={styles.scores}>
@@ -49,13 +48,13 @@ const ItemWrapper = ({
         </div>
         <div css={styles.teamAway} data-participant-id={data.away.id}>
           <Team
+            urn={data.away.urn}
             alignment="away"
             name={data.away.fullName}
             shortName={data.away.shortName}
-            urn={data.away.urn}
             isConciseView={isConciseView}
-            shouldHideBadges={shouldHideBadges}
-            badgePlaceholderFallbackType={teamBadgePlaceholderFallbackType}
+            imageUrl={data.away.imageSrc}
+            hideBadges={shouldHideBadges}
           />
         </div>
         <div css={styles.matchProgressContainer}>
@@ -73,7 +72,6 @@ interface HeadToHeadBannerProps {
   eventSummary: string;
   shouldHideBadges: boolean;
   maxScoreLength?: number;
-  teamBadgePlaceholderFallbackType?: BadgePlaceholderFallbackType;
 }
 
 export const HeadToHeadBanner = ({
@@ -82,7 +80,6 @@ export const HeadToHeadBanner = ({
   eventSummary,
   shouldHideBadges,
   maxScoreLength,
-  teamBadgePlaceholderFallbackType,
 }: HeadToHeadBannerProps) => (
   <>
     <VisuallyHiddenText>{eventSummary}</VisuallyHiddenText>
@@ -91,7 +88,6 @@ export const HeadToHeadBanner = ({
       isConciseView={isConciseView}
       shouldHideBadges={shouldHideBadges}
       maxScoreLength={maxScoreLength}
-      teamBadgePlaceholderFallbackType={teamBadgePlaceholderFallbackType}
     />
   </>
 );

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/head-to-head-banner.tsx

@@ -9,10 +9,8 @@ export { default as Card } from './card';
 export { default as Centre, shouldShowScores } from './centre';
 export { default as ConditionalOnwardJourneyLink } from './conditional-onward-journey-link';
 export { default as FixtureTime } from './fixture-time';
-export { default as Footer } from './footer';
 export { default as GroupedEvents } from './grouped-events';
 export { HeadToHeadBanner } from './head-to-head-banner';
-export { default as HeadToHeadHeader } from './head-to-head-header';
 export { KeyEvents } from './key-events';
 export { default as MatchProgress } from './match-progress';
 export { default as PenaltyScores } from './penalty-scores';

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/head-to-head-header.tsx

@@ -1,3 +1,2 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './sport-badge';
-export { hasMapping as hasTeamBadgeMapping } from './badges-map';

src/app/components-webcore/SportDataHeader/head-to-head-v2/components/index.ts

@@ -1,6 +1,5 @@
-import { getImage } from './badges-map';
 import styles from '../../index.styles';
-import type { BadgePlaceholderFallbackType, BadgeSize } from '../../types';
+import type { BadgeSize } from '../../types';
 
 const getTestId = (id?: string): string => {
   const urnId =
@@ -11,22 +10,14 @@ const getTestId = (id?: string): string => {
 
 interface SportBadgeProps {
   size: BadgeSize;
-  id?: string;
+  urn: string;
+  src: string | null;
   alt?: string;
-  usePlaceholderFallback?: boolean;
-  placeholderFallbackType?: BadgePlaceholderFallbackType;
   isConciseView?: boolean;
 }
 
-const SportBadge = ({
-  size,
-  id,
-  alt = '',
-  usePlaceholderFallback = true,
-  placeholderFallbackType = 'badge',
-}: SportBadgeProps) => {
-  const testId = getTestId(id);
-  const src = getImage({ id, usePlaceholderFallback, placeholderFallbackType });
+const SportBadge = ({ urn, size, src, alt = '' }: SportBadgeProps) => {
+  const testId = getTestId(urn);
 
   if (!src) return null;
 
@@ -35,7 +26,6 @@ const SportBadge = ({
       css={styles.badgeContainer(size)}
       data-testid={`badge-container-${testId}`}
     >
-      {/* Empty alt string should hide images from assistive technology, but won't hide certain SVG contents in some browsers - e.g. Safari */}
       <img
         css={styles.badgeImage}
         alt={alt}