WSTEAM1-446: Live Page Header - Title & Description UX

src/app/components/ThemeProvider/palette.ts

@@ -15,6 +15,7 @@ export const EBON = '#222222';
 export const GHOST = '#FDFDFD';
 export const GREY_10 = '#141414';
 export const GREY_11 = '#BABABA';
+export const GREY_1 = '#FEFEFE';
 export const GREY_2 = '#F6F6F6';
 export const GREY_3 = '#E6E8EA';
 export const GREY_4 = '#B0B2B4';

src/app/components/ThemeProvider/withThemeProvider.tsx

@@ -25,6 +25,7 @@ import {
   GHOST,
   GREY_10,
   GREY_11,
+  GREY_1,
   GREY_2,
   GREY_3,
   GREY_4,
@@ -224,6 +225,7 @@ const withThemeProvider = ({
       GHOST,
       GREY_10,
       GREY_11,
+      GREY_1,
       GREY_2,
       GREY_3,
       GREY_4,

src/app/models/types/theming.ts

@@ -24,6 +24,7 @@ interface Palette extends BrandPalette {
   GHOST: string;
   GREY_10: string;
   GREY_11: string;
+  GREY_1: string;
   GREY_2: string;
   GREY_3: string;
   GREY_4: string;

ws-nextjs-app/pages/[service]/new_live/[id]/Header/index.stories.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { withKnobs } from '@storybook/addon-knobs';
+import { ServiceContextProvider } from '../../../../../../src/app/contexts/ServiceContext';
+import { withServicesKnob } from '../../../../../../src/app/legacy/psammead/psammead-storybook-helpers/src';
+import ThemeProvider from '../../../../../../src/app/components/ThemeProvider';
+import Header from '.';
+import { StoryProps } from '../../../../../../src/app/models/types/storybook';
+import metadata from './metadata.json';
+
+interface ComponentProps extends StoryProps {
+  title: string;
+  description?: string;
+}
+
+const Component = ({
+  service,
+  variant,
+  title,
+  description,
+}: ComponentProps) => {
+  return (
+    <ThemeProvider service={service} variant={variant}>
+      <ServiceContextProvider service={service} variant={variant}>
+        <Header title={title} description={description} />
+      </ServiceContextProvider>
+    </ThemeProvider>
+  );
+};
+
+export default {
+  title: 'New Components/LivePageHeader',
+  Component,
+  parameters: {
+    metadata,
+    design: [
+      {
+        name: 'Group 0',
+        type: 'figma',
+        url: 'https://www.figma.com/file/ozHsWG5R9tETw6lBOU740V/Live-mvp-header---handover?type=design&node-id=95-266',
+      },
+    ],
+  },
+  decorators: [withKnobs, withServicesKnob()],
+};
+
+export const TitleOnly = ({ service, variant }: StoryProps) => (
+  <Component
+    title="Prince Harry's hacking case against Mirror back in court"
+    description=""
+    service={service}
+    variant={variant}
+  />
+);
+export const TitleAndDescription = ({ service, variant }: StoryProps) => (
+  <Component
+    title="An kai wa jirgin kwashe yan Turkiyya hari a Sudan"
+    description="Wannan shaft ne da ke kawo muku laqbarai daga sassan duniya daban-daban"
+    service={service}
+    variant={variant}
+  />
+);
+export const RightToLeft = ({ service, variant }: StoryProps) => (
+  <Component
+    title="نااہلی کی مدت میں ترمیم: ’نواز شریف کی قیادت میں اسی سال ترقی کا سفر دوبارہ شروع ہوگا‘"
+    description="سینیٹ نے الیکشن ایکٹ میں ترمیم کا بل کثرت رائے سے منظور کیا ہے جس کے مطابق جہاں آئین میں نااہلی کی مدت کا تعین نہیں وہاں نااہلی پانچ سال سے زیادہ نہیں ہو گی۔ وزیر داخلہ رانا ثنا اللہ کا کہنا ہے کہ نواز شریف کی قیادت میں 'اسی سال ترقی کا سفر دوبارہ شروع ہوگا۔' جبکہ سینیٹ میں اپوزیشن لیڈر شہزاد وسیم نے اسے 'ایک فرد سے متعلق قانون سازی' قرار دیا ہے۔"
+    service={service}
+    variant={variant}
+  />
+);

ws-nextjs-app/pages/[service]/new_live/[id]/Header/index.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  render,
+  screen,
+  act,
+} from '#app/components/react-testing-library-with-providers';
+import Header from './index';
+
+describe('Live Page Header', () => {
+  it('should render the live page title and description', async () => {
+    await act(async () => {
+      render(<Header title="I am a title" description="I am a description" />);
+    });
+
+    expect(screen.getByText('I am a title')).toBeInTheDocument();
+    expect(screen.getByText('I am a description')).toBeInTheDocument();
+  });
+
+  it('should render the live page title only', async () => {
+    await act(async () => {
+      render(<Header title="I am a title" />);
+    });
+
+    expect(screen.getByText('I am a title')).toBeInTheDocument();
+  });
+
+  it('Header should have id of content', async () => {
+    await act(async () => {
+      render(<Header title="I am a title" />);
+    });
+
+    const header = document.getElementById('content');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('header should have tab index of -1', async () => {
+    await act(async () => {
+      render(<Header title="I am a title" />);
+    });
+
+    const header = document.getElementById('content');
+    const tabIndex = header?.getAttribute('tabIndex');
+
+    expect(tabIndex).toEqual('-1');
+  });
+});

ws-nextjs-app/pages/[service]/new_live/[id]/Header/index.tsx

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import Heading from '#app/components/Heading';
+import Text from '#app/components/Text';
+import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
+import styles from './styles';
+
+const Header = ({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) => {
+  return (
+    <div css={styles.backgroundColor}>
+      <div css={styles.outerGrid}>
+        <Heading
+          size="trafalgar"
+          level={1}
+          css={styles.heading}
+          id="content"
+          tabIndex={-1}
+        >
+          {/* role="text" is required to correct a text splitting bug on iOS VoiceOver. */}
+          {/* eslint-disable-next-line jsx-a11y/aria-role */}
+          <span role="text" css={styles.innerGrid}>
+            {/* Holding styles and text for live label */}
+            <span css={styles.label}>PLACEHOLDER</span>
+            <VisuallyHiddenText>, </VisuallyHiddenText>
+            <span css={styles.title}>{title}</span>
+          </span>
+        </Heading>
+        {description && (
+          <Text as="p" css={styles.description}>
+            {description}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Header;

ws-nextjs-app/pages/[service]/new_live/[id]/Header/metadata.json

@@ -0,0 +1,29 @@
+{
+  "alpha": true,
+  "lastUpdated": {
+    "day": 20,
+    "month": "June",
+    "year": 2023
+  },
+  "uxAccessibilityDoc": {
+    "done": true,
+    "reference": {
+      "url": "https://paper.dropbox.com/doc/WS-Live-page-Screen-reader-UX--B6nGXi8RstMyU9L1~H_UsGDhAg-8qm1UHDGVMhv5Qj9Q2mbi",
+      "label": "Screen Reader UX"
+    }
+  },
+  "acceptanceCriteria": {
+    "done": true,
+    "reference": {
+      "url": "https://paper.dropbox.com/doc/Live-page-Accessibility-Acceptance-Criteria--B6l2NVpWSYLB4zFP4YReZf_pAg-KZQODmAf9tvodUlxsAVnA",
+      "label": "Accessibility Acceptance Criteria"
+    }
+  },
+  "swarm": {
+    "done": false,
+    "reference": {
+      "url": "",
+      "label": ""
+    }
+  }
+}

ws-nextjs-app/pages/[service]/new_live/[id]/Header/styles.tsx

@@ -0,0 +1,70 @@
+import { css, Theme } from '@emotion/react';
+import pixelsToRem from '../../../../../../src/app/utilities/pixelsToRem';
+
+export default {
+  backgroundColor: ({ palette }: Theme) =>
+    css({
+      backgroundColor: palette.GREY_10,
+    }),
+  outerGrid: ({ mq, gridWidths }: Theme) =>
+    css({
+      maxWidth: `${pixelsToRem(gridWidths[1280])}rem`,
+      margin: '0 auto',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(12, 1fr)',
+      padding: `${pixelsToRem(16)}rem ${pixelsToRem(8)}rem`,
+
+      [mq.GROUP_2_MIN_WIDTH]: {
+        padding: `${pixelsToRem(16)}rem`,
+      },
+
+      [mq.GROUP_4_MIN_WIDTH]: {
+        paddingInlineStart: `${pixelsToRem(32)}rem`,
+        paddingInlineEnd: `${pixelsToRem(16)}rem`,
+        paddingTop: `${pixelsToRem(24)}rem`,
+        paddingBottom: `${pixelsToRem(32)}rem`,
+        columnGap: '1rem',
+      },
+    }),
+  innerGrid: ({ mq }: Theme) =>
+    css({
+      display: 'grid',
+      gridTemplateColumns: 'repeat(12, 1fr)',
+      [mq.GROUP_4_MIN_WIDTH]: {
+        columnGap: '1rem',
+      },
+    }),
+  heading: () =>
+    css({
+      gridColumn: '1 / span 12',
+    }),
+  label: ({ mq }: Theme) =>
+    css({
+      color: '#00ccc7',
+      gridColumn: '1 / span 12',
+      [mq.GROUP_4_MIN_WIDTH]: {
+        gridColumn: '1 / span 3',
+      },
+    }),
+  title: ({ palette, mq }: Theme) =>
+    css({
+      color: palette.GREY_1,
+      gridColumn: '1 / span 12',
+      marginTop: `${pixelsToRem(16)}rem`,
+      [mq.GROUP_4_MIN_WIDTH]: {
+        marginTop: 0,
+        gridColumn: '5 / span 8',
+      },
+    }),
+
+  description: ({ palette, mq }: Theme) =>
+    css({
+      color: palette.GREY_2,
+      gridColumn: '1 / span 12',
+      margin: 0,
+      marginTop: `${pixelsToRem(16)}rem`,
+      [mq.GROUP_4_MIN_WIDTH]: {
+        gridColumn: '5 / span 8',
+      },
+    }),
+};

ws-nextjs-app/pages/[service]/new_live/[id]/LivePageLayout.tsx

@@ -4,14 +4,14 @@ import React, { useContext } from 'react';
 import { jsx } from '@emotion/react';
 import Pagination from '#pages/TopicPage/Pagination';
 import Heading from '#app/components/Heading';
-import Text from '#app/components/Text';
 import { ServiceContext } from '#contexts/ServiceContext';
 import nodeLogger from '#lib/logger.node';
 import LegacyText from '#app/legacy/containers/Text';
 import Blocks from '#app/legacy/containers/Blocks';
 import MetadataContainer from '../../../../../src/app/components/Metadata';
 import LinkedDataContainer from '../../../../../src/app/components/LinkedData';
 import PostsList from './Posts/index';
+import Header from './Header/index';
 
 import styles from './styles';
 import { StreamResponse } from './Posts/types';
@@ -23,7 +23,7 @@ type ComponentProps = {
   pageData: {
     pageCount: number;
     activePage: number;
-    title?: string;
+    title: string;
     description?: string;
     summaryPoints: { content: { model: { blocks: object[] } } | null };
     liveTextStream: { content: StreamResponse | null };
@@ -80,35 +80,35 @@ const LivePage = ({
         hasAmpPage={false}
       />
       <LinkedDataContainer type="CollectionPage" seoTitle="Test Live Page" />
-      <main css={styles.wrapper}>
-        <Heading level={1}>{title}</Heading>
-        {/* Text as="p" used as placeholder. Awaiting screen reader UX and UX */}
-        <Text as="p">{description}</Text>
-        <Summary summaryBlocks={summaryContent?.model.blocks} />
-        {liveTextStream.content && (
-          <PostsList postData={liveTextStream.content} />
-        )}
-        <pre css={styles.code}>
-          <Heading level={4}>Headers</Heading>
-          {bbcOrigin && (
+      <main>
+        <Header title={title} description={description} />
+        <div css={styles.wrapper}>
+          <Summary summaryBlocks={summaryContent?.model.blocks} />
+          {liveTextStream.content && (
+            <PostsList postData={liveTextStream.content} />
+          )}
+          <pre css={styles.code}>
+            <Heading level={4}>Headers</Heading>
+            {bbcOrigin && (
+              <p>
+                bbc-origin: <span>{bbcOrigin}</span>
+              </p>
+            )}
             <p>
-              bbc-origin: <span>{bbcOrigin}</span>
+              bbc-adverts:{' '}
+              <span>{showAdsBasedOnLocation ? 'true' : 'false'}</span>
             </p>
-          )}
-          <p>
-            bbc-adverts:{' '}
-            <span>{showAdsBasedOnLocation ? 'true' : 'false'}</span>
-          </p>
-        </pre>
-        <pre css={styles.code}>{JSON.stringify(pageData, null, 2)}</pre>
-        <Pagination
-          activePage={activePage}
-          pageCount={pageCount}
-          pageXOfY="Page {x} of {y}"
-          previousPage="Previous Page"
-          nextPage="Next Page"
-          page="Page"
-        />
+          </pre>
+          <pre css={styles.code}>{JSON.stringify(pageData, null, 2)}</pre>
+          <Pagination
+            activePage={activePage}
+            pageCount={pageCount}
+            pageXOfY="Page {x} of {y}"
+            previousPage="Previous Page"
+            nextPage="Next Page"
+            page="Page"
+          />
+        </div>
       </main>
     </>
   );