New Desktop Layout

[sareh]

Resolves #4562 and #4500

Overall change:
Build the new Front Page desktop layout.

Screenshots

Section with 1 item

Section with 2 items

Section with 4 items

Section with 5 items (plus index alsos)

Section with 6 items

Section slice with TV promo

Section slice with Radio promo

Top Stories
...

Code changes:

• Uses a new logic utility in the FrontPageSection to create an array of all the rows that are needed for the section
• Create a new FrontPageStoryRow container that renders the different types of row required for the UX designs
• Grid layouts for top stories in another container (Top story row, four-row, four-row no images, leading row)
• Add dir prop to Grid to fix RTL layouts
• FrontPageGrid gooes up to 1008px
• Use the generalized version of the StoryPromo
• Use promoType prop of top, leading and regular in the StoryPromo container
• Do not use the ImagePlaceholder in the Bulletin if this doesn't have image values
• Add No Image Radio Bulletin story
• Add docs/screenshots of layouts
• Update snapshots

Related PR's

• Desktop layout logic Merge row logic into desktop layout PR #5278
• Story Promo generalization Story promo generalisation BBC-archive/psammead#2937
• Story Promo headline typography updates Inline Media Indicator BBC-archive/psammead#3029
• Story promo - visually hidden text update Story promo - visually hidden text update BBC-archive/psammead#3136
• Story Promo 'top' variant sizing bug at 1280px exactly Story Promo 'top' variant sizing bug at 1280px exactly BBC-archive/psammead#3124
• Update GEL_GROUP_4_SCREEN_WIDTH_MAX breakpoint Update GEL_GROUP_4_SCREEN_WIDTH_MAX breakpoint BBC-archive/psammead#3128
• Story Promo - Fallback spacing for Leading promo Story Promo - Fallback spacing for Leading promo BBC-archive/psammead#3150
• Remove alpha tag from Story Promo component Remove alpha tag from Story Promo component BBC-archive/psammead#3154
• Leading story promo stylings on mobile and tablet Leading story promo stylings on mobile and tablet BBC-archive/psammead#3027
• Story Promo List border-bottom update Update Story Promo List border-bottom BBC-archive/psammead#3014
• Spacing updates on the Story Promo List and Section Label Spacing updates on the Story Promo List and Section Label BBC-archive/psammead#3058
• Story Promo List - Padding update Story Promo List - Padding update BBC-archive/psammead#3070
• Update Bulletin promo to match desktop layout Update Bulletin promo to match desktop layout BBC-archive/psammead#3018
• Inline Media Indicator Inline Media Indicator BBC-archive/psammead#3029
• Media Indicator - Remove spacing on the low-level component Media Indicator - remove spacing on the low-level component BBC-archive/psammead#3062
• Media Indicator - Pass script Media Indicator - Pass script BBC-archive/psammead#3075
• Media Indicator - Pass dir Media Indicator - Pass dir BBC-archive/psammead#3109
• Use updated media indicator in Story Promo and Index Alsos Use updated media indicator in Story Promo and Index Alsos BBC-archive/psammead#3073
• Update top-level Story-Promo, Grid and Media Indicator Update top-level Story-Promo, Grid and Media Indicator BBC-archive/psammead#3107

---

• I have assigned myself to this PR and the corresponding issues
• I have added labels to this PR for the relevant pod(s) affected by these changes
• I have assigned this PR to the Simorgh project

Testing:

• Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
• If necessary, I have run the local E2E non-smoke tests relevant to my changes (CYPRESS_APP_ENV=local CYPRESS_SMOKE=false npm run test:e2e:interactive)
• This PR requires manual testing

[PriyaKR]

Looks good to me but a complete device testing can be done properly when its on test env.