Compose CpsRecommendations OJ container

Is your feature request related to a problem? Please describe. Create/Compose the CpsRecommendations presentational container following on from investigation https://github.com/bbc/psammead/issues/3325.

Accesibility Acceptance Criteria (Click me to see)

**Landmark** Given I use a screen reader When I navigate to the Recommendations section within the body copy of a STY page Then a region landmark must be announced e.g. Region And this must be announced with a label And the label must be the same as the strong HTML element (e.g. component title) And this should be inside the main landmark **Skip link** (This work will be done separately on https://github.com/bbc/simorgh/issues/6267) Given I use a keyboard When I navigate to the Recommendations component Then a skip link is visually displayed when it receives focus And this should be the first content within the component And the text should say "Skip [title of component] and continue reading" Given I use a screenreader When I activate the skip link Then my focus moves to an end message And this should be the last content within the component And this is announced as "End of [title of component]" Given I use a keyboard When I navigate to the Recommendations component Then a skip link is visually displayed when it receives focus And the browser default focus outline styling is applied **Screenreader UX** Given I am using a screenreader When I navigate to the Recommendations component title And this is within the body copy of a STY page Then this should not have heading semantics And it should be a strong HTML element Given I am using a screenreader When I navigate to the Recommendations component promos And this component is within the body copy of a STY page Then these should not contain heading semantics

Describe the solution you'd like Compose a top-level container called CpsRecommendations that consists of the StoryPromo and CpsOnwardJourney containers. If the recommendations container has more than one story promo then it should be rendered in a <StoryPromoUl> This will be almost identical to our Features and Analysis implementation.

To adhere to the shape of a StoryPromo item, the data we fetch from ~Camino~ Unirecs (see https://github.com/bbc/simorgh/issues/6067) needs to be transformed into the storyPromo item format. This means we need to convert the href we receive from Camino into a path e.g.

"href": "http://c.files.bbci.co.uk/D035/production/_108810335_mugabe2.jpg",
"path": "/cpsprodpb/D035/production/_108810335_mugabe2.jpg",

Here's a before and after of what the transformed data format should be:

Before (Click me to see)

``` { "items": [ { "assetUri": "/mundo/noticias-america-latina-51975331", "ampUri": "/mundo/amp/noticias-america-latina-51975331", "shortHeadline": "Argentina ordena cuarentena total obligatoria por el coronavirus", "imageHref": "http://c.files.bbci.co.uk/5A4D/production/_111371132_hi060727445.jpg" }, { "assetUri": "/mundo/noticias-america-latina-52250630", "ampUri": "/mundo/amp/noticias-america-latina-52250630", "shortHeadline": "Por qué México se convirtió en el gran obstáculo del plan de la OPEP para aumentar el precio del petróleo", "imageHref": "http://c.files.bbci.co.uk/49F7/production/_111753981_03009521-c6ba-41e6-8328-65d0caf07635.jpg" }, { "assetUri": "/mundo/noticias-52275464", "ampUri": "/mundo/amp/noticias-52275464", "shortHeadline": "El inédito y cuestionado plan de emergencia económica de Ecuador contra la crisis del coronavirus", "imageHref": "http://c.files.bbci.co.uk/34F5/production/_111775531_tv061050412.jpg" }, { "assetUri": "/mundo/noticias-51796524", "ampUri": "/mundo/amp/noticias-51796524", "shortHeadline": "La guerra de precios entre Arabia Saudita y Rusia que hundió el valor del petróleo y las bolsas en medio de la crisis por el coronavirus", "imageHref": "http://c.files.bbci.co.uk/4627/production/_111195971_mediaitem111195968.jpg" } ] } ```

After (Click me to see)

``` [ { "headlines": { "shortHeadline": "Argentina ordena cuarentena total obligatoria por el coronavirus" }, "locators": { "assetUri": "/mundo/noticias-america-latina-51975331" }, "indexImage": { "path": "/cpsprodpb/5A4D/production/_111371132_hi060727445.jpg", } }, { "headlines": { "shortHeadline": "Por qué México se convirtió en el gran obstáculo del plan de la OPEP para aumentar el precio del petróleo" }, "locators": { "assetUri": "/mundo/noticias-america-latina-52250630" }, "indexImage": { "path": "/cpsprodpb/49F7/production/_111753981_03009521-c6ba-41e6-8328-65d0caf07635.jpg", } }, { "headlines": { "shortHeadline": "El inédito y cuestionado plan de emergencia económica de Ecuador contra la crisis del coronavirus" }, "locators": { "assetUri": "/mundo/noticias-52275464" }, "indexImage": { "path": "/cpsprodpb/34F5/production/_111775531_tv061050412.jpg", } }, { "headlines": { "shortHeadline": "La guerra de precios entre Arabia Saudita y Rusia que hundió el valor del petróleo y las bolsas en medio de la crisis por el coronavirus" }, "locators": { "assetUri": "/mundo/noticias-51796524" }, "indexImage": { "path": "/cpsprodpb/4627/production/_111195971_mediaitem111195968.jpg", } } ] ```

This transformed data will then be passed as a content prop into the CpsOnwardJourney container.

Describe alternatives you've considered psammead-story-promo itself has exported components within itself which are headline, link, summary and index-alsos. Using these we would build the CpsRecommendations similar to how the StoryPromo container has been made.

Code

```js import StoryPromo, { Headline, Link } from '@bbc/psammead-story-promo'; import { ServiceContext } from '#contexts/ServiceContext'; import CpsOnwardJourney from '../CpsOnwardJourney'; const CpsRecommendations = ({ headline, url, imgHref, }) => { const { script, service, translations, } = useContext(ServiceContext); const Info = ( {headline} ); const Image =

; const Content = ; return ( ); }; export default CpsRecommendations; ```

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

[ ] This feature is expected to need manual testing.

Additional context

Due to the work already done in #6994, the information in this issue is still valid. However, most of the work now depends on https://github.com/bbc/psammead/issues/3574 & https://github.com/bbc/psammead/issues/3574 to be completed.
Ensure issue with recommendations links hovering over the top of the page is no longer apparent

bbc / simorgh

Compose CpsRecommendations OJ container #6266