Add Grid example to Storybook

[EinsteinNjoroge]

Resolves #3679

Overall change: Add Storybook stories for FrontPageMain and ArticleMain to display grid layout and catch future changes in chromatic.

Code changes:

• Create a Storybook story for the FrontPagesMain component. this exposes frontpages main without analytics.
• Add a story to ArticleMain to display an article main with Headline, Paragraph, timestamp, Portrait Image with Caption, Landscape Image with Caption and a square Image with Caption._
• Refactored frontpage story

Screenshots:

FrontPagesMain

ArticleMain

---

• I have assigned myself to this PR and the corresponding issues
• Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[dr3]

Add Storybook stories for FrontPageMain and ArticleMain to display grid layout and catch future changes in chromatic.

I might be missing something, Is this not covered by the full page snapshots we have? As were trying to slim down the number of stories we run on chromaticqa (money), im not sure of the overlap

[sareh]

Thanks for the PR, @EinsteinCarrey. I've suggested some changes here.

[EinsteinNjoroge]

Add Storybook stories for FrontPageMain and ArticleMain to display grid layout and catch future changes in chromatic.

I might be missing something, Is this not covered by the full page snapshots we have? As were trying to slim down the number of stories we run on chromaticqa (money), im not sure of the overlap

@dr3 currently, we don't have visual tests for the grid layout. The idea here is to display the entire FrontPageMain and ArticleMain in Storybook so that changes to the grid are shown in chromatic.

[dr3]

The idea here is to display the entire FrontPageMain and ArticleMain in Storybook

@EinsteinCarrey Is the FrontPageMain not shown in https://bbc.github.io/simorgh/?path=/story/pages-front-page--igbo as part of the page?

[sareh]

@dr3 The Pages|FrontPage stories include the cookie and privacy banners and the Chromatic QA tests often jump around between each run, making them unreliable. Having stories for the Front Page Main container will ensure that the Chromatic QA snapshots are more reliable and therefore useful for viewing Grid Layout diffs.

[sareh]

👍 Looks great. Thanks for the updates.

[DenisHdz]

Great work 👍