Merge pull request #14007 from bbc/WS-2581-Productionise-Head-To-Headv2

WS-2581 Productionise files in head-to-head-v2/ (root directory only)

Author: emilysaffron

src/app/components-webcore/SportDataHeader/head-to-head-v2/head-to-head-v2.jsx

@@ -72,7 +72,7 @@ interface ComponentProps {
   data: StoryData;
   isConciseView?: boolean;
   shouldShowActions?: boolean;
-  maximumContainerScoreDigits?: string;
+  maximumContainerScoreDigits?: number;
   teamBadgePlaceholderFallbackType?: 'badge' | 'flag';
 }
 
@@ -88,7 +88,6 @@ const Component = ({
   teamBadgePlaceholderFallbackType = 'badge',
 }: ComponentProps) => {
   return (
-    // @ts-expect-error - PS copy and paste
     <HeadToHeadV2
       data={data}
       isConciseView={isConciseView}

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

@@ -0,0 +1,64 @@
+import Footer from './components/footer';
+import HeadToHeadHeader from './components/head-to-head-header';
+import { HeadToHeadBanner } from './components/head-to-head-banner';
+import { ConditionalOnwardJourneyLink } from './components/conditional-onward-journey-link';
+import { Actions } from './components/actions';
+import { HeadToHeadV2Data } from './types';
+import styles from './index.styles';
+
+export const HeadToHeadV2 = ({
+  data,
+  isConciseView,
+  shouldShowActions,
+  maximumContainerScoreDigits,
+  teamBadgePlaceholderFallbackType = 'badge',
+}: {
+  data: HeadToHeadV2Data;
+  isConciseView?: boolean;
+  shouldShowActions?: boolean;
+  maximumContainerScoreDigits?: number;
+  teamBadgePlaceholderFallbackType?: 'badge' | 'flag';
+}) => {
+  const hasActions =
+    (data?.home?.actions?.length ?? 0) > 0 ||
+    (data?.away?.actions?.length ?? 0) > 0;
+
+  // TODO: Re-enable badge visibility logic once we have the necessary badge mappings in place
+  const shouldHideBadges = true;
+
+  return (
+    <div css={styles.wrapper({ isConciseView })}>
+      <ConditionalOnwardJourneyLink>
+        <div css={styles.container({ isConciseView })}>
+          {!isConciseView && (
+            <HeadToHeadHeader
+              date={data.date}
+              status={data.status}
+              tournamentDescriptionLabel={data.tournamentDescriptionLabel}
+            />
+          )}
+          <HeadToHeadBanner
+            data={data}
+            isConciseView={isConciseView}
+            eventSummary={data.accessibleEventSummary}
+            shouldHideBadges={shouldHideBadges}
+            maxScoreLength={maximumContainerScoreDigits}
+            teamBadgePlaceholderFallbackType={teamBadgePlaceholderFallbackType}
+          />
+          {hasActions && shouldShowActions && <Actions data={data} />}
+          {!isConciseView && <Actions data={data} />}
+          {!isConciseView && (
+            <Footer
+              venue={data.venue?.name || 'To be confirmed'}
+              status={data.status}
+              attendanceValue={data.attendance?.value}
+              attendanceInfo={data.attendance?.additionalInfo}
+            />
+          )}
+        </div>
+      </ConditionalOnwardJourneyLink>
+    </div>
+  );
+};
+
+export default HeadToHeadV2;

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

@@ -0,0 +1,27 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '../../../utilities/pixelsToRem';
+
+export default {
+  wrapper:
+    ({ isConciseView }: { isConciseView?: boolean }) =>
+    ({ palette }: Theme) =>
+      css({
+        background: isConciseView ? palette.GREY_15 : palette.GREY_16,
+        borderLeft: `medium none ${palette.LIVE_CORE}`,
+      }),
+  container:
+    ({ isConciseView }: { isConciseView?: boolean }) =>
+    ({ mq, palette }: Theme) =>
+      css({
+        fontFamily: 'ReithSans, Helvetica, Arial, freesans, sans-serif',
+        fontWeight: 400,
+        fontFeatureSettings: "'ss01' off",
+        color: palette.LUNAR_LIGHT,
+        padding: isConciseView ? '8px' : '0',
+        ...(!isConciseView && { paddingBottom: `${pixelsToRem(24)}rem` }),
+        [mq.GROUP_2_MAX_WIDTH]: {
+          paddingTop: isConciseView ? '8px' : '0',
+          ...(!isConciseView && { paddingBottom: `${pixelsToRem(8)}rem` }),
+        },
+      }),
+};

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

@@ -101,7 +101,6 @@ export const HeadToHeadV2ConciseComponent = (args: StoryArgs) => {
     <HeadToHeadV2
       data={updatedStoryBookControls}
       isConciseView
-      shouldHideBadges={false}
       shouldShowActions={false}
     />
   );
@@ -159,7 +158,6 @@ export const HeadToHeadV2Component = (args: StoryArgs) => {
     <HeadToHeadV2
       data={updatedStoryBookControls}
       isConciseView={false}
-      shouldHideBadges={false}
       shouldShowActions={false}
     />
   );

…SportDataHeader/head-to-head-v2/index.js …SportDataHeader/head-to-head-v2/index.tssrc/app/components-webcore/SportDataHeader/head-to-head-v2/index.js renamed to src/app/components-webcore/SportDataHeader/head-to-head-v2/index.ts src/app/components-webcore/SportDataHeader/head-to-head-v2/index.js renamed to src/app/components-webcore/SportDataHeader/head-to-head-v2/index.ts

@@ -45,7 +45,6 @@ const renderHeadToHead = ({
       data={data}
       isConciseView={isConciseView}
       shouldShowActions={shouldShowActions}
-      shouldHideBadges={false}
     />,
   );
 

src/app/components-webcore/SportDataHeader/head-to-head-v2/storybook/helpers/base-component.tsx

@@ -137,6 +137,11 @@ export type HeadToHeadV2Data = {
    * Summary of event to be used with assistive technology.
    */
   accessibleEventSummary: string;
+
+  attendance?: {
+    value?: number;
+    additionalInfo?: string;
+  };
 };
 
 export declare const HeadToHeadV2: (props: {
@@ -150,7 +155,7 @@ export declare const HeadToHeadV2: (props: {
    *
    * By default, the central section of H2Hv2 will expand as little as possible to fit the given score.
    */
-  maximumContainerScoreDigits?: string;
+  maximumContainerScoreDigits?: number;
   /**
    * Optional setting for the sport badge's placeholder fallback type when a mapping doesn't exist for a team.
    *

src/app/components-webcore/SportDataHeader/head-to-head-v2/tests/index.test.tsx

@@ -205,7 +205,6 @@ const LivePage = ({ pageData, assetId }: LivePageProps) => {
           <HeadToHeadV2
             data={sportData}
             isConciseView={false} // defaulted to false for developement/ MVP
-            shouldHideBadges={false} // defaulted to false for developement/ MVP
             shouldShowActions={false} // defaulted to false for developement/ MVP
           />
         )}

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

@@ -624,7 +624,6 @@ describe('Live Page', () => {
 
       const headToHeadElement = screen.getByTestId('head-to-head-v2');
       expect(headToHeadElement).toHaveAttribute('data-concise', 'false');
-      expect(headToHeadElement).toHaveAttribute('data-hide-badges', 'false');
       expect(headToHeadElement).toHaveAttribute('data-show-actions', 'false');
     });