[NASAA-203/204] - Create AmpExperiment component, add top stories experiment to PS articles

[hotinglok]

Resolves NASAA-203 and NASAA-204 Experiment Brief

Overall changes

Implements experimentation on AMP pages via AMP's built-in experimentation tools. Created the <AmpExperiment/> component and a config used for the NASAA Google Discover experiment. This PR also adds front-end changes based on the variants served by the config.

The front-end changes consist of inserting an edited copy of the Top Stories section into the blocks array that are always hidden and only shown on one column breakpoints for specific variants via css. The desktop behaviour for all variants should behave the same as usual, only showing the Top Stories section in a different location for specific variants. These changes will only show on specific AMP assets for news and sport services for this PR.

No other services should be affected. These changes only affect specific assets initially to ensure the experimentation works as expected on pages served by the AMP cache and that performance isn't somehow significantly impacted.

This PR also does not have any analytics work completed yet (to be done in the next PR), hence it does not start the experiment or put it 'live' per se.

Code changes

• Created <AmpExperiment/> component (similar to other existing AMP components e.g. AmpIframe)
  • Accepts a config containing experiment data so this component is not tied to this experiment and can be used for other AMP experiments in the future if needed.
• Created /experimentTopStories folder in pages/ArticlePage that contains most of the code added specifically for this experiment.
  • Added a config to be used in <AmpExperiment/> for the experiment.
  • Created ExperimentTopStories that wraps a <TopStoriesSection/> component with experiment specific styling (to show/hide via <AmpExperiment/>).
  • Added helper function insertExperimentTopStories() that inserts a experimentTopStories block into the blocks array in the halfway position of the array (this is the first variant of the experiment).
    • There were discussions as to where this logic should be done. It was concluded that it can be done here for the experiment, but should there be a full implementation of this, it would of course be better done with other transformations in the simorgh-bff FABL module.
  • Added helper function enableExperimentTopStories() to check if the conditions to run insertExperimentTopStories() are fulfilled.
• Refactored ArticlePage.tsx and ArticlePage.styles.ts to handle changes added specifically for the experiment.
  • Added isAmp and pathname to list of props retrieved from the request context.
  • Pulled topStoriesContent out early to be passed into the <ExperimentTopStories/> component in componentsToRender. This does not replace any existing logic with the Top Stories section.
  • Replaced blocks array used in articleBlocks (where a visually hidden heading block is added to blocks array) with blocksWithExperimentTopStories. This will be the same as the blocks array if functions to insert an experimentTopStories block are not run, so this should not impact anything besides the specific news and sport assets.
  • Separated topStoriesAndFeaturesSection css into topStoriesSection and featuresSection. This is so that styles that show/hide each Top Stories section will not affect anything else in the secondary column.
    • Added css for experimentTopStories blocks so that they only appear on one column breakpoints.
    • Added css to topStoriesSection so that it is hidden for specific variants on one column breakpoints.

Testing

Ensure the following assets behave as expected and does not break AMP validation. Override links below with specific variant are formatted as such: /service/articles/xyz.amp?renderer_env=env#amp-x-experimentName=variant When checking other pages with services not affected by this PR, ensure that <amp-experiment/> is not present in the DOM. It should be present for the assets below:

Control (no changes to existing behaviour):

Variant name in code: control

• News Test asset
• News live asset
• Sport live asset

Variant 1 (show Top Stories section halfway into the article content instead of after it):

Variant name in code: show_at_halfway

• News Test asset
• News live asset
• Sport live asset

Helpful Links

AMP experiment documentation

[hotinglok]

@Isabella-Mitchell I discussed this with @eagerterrier prior to starting this work and it was agreed that since it's just an experiment and there aren't any actual changes to the Top Stories section besides the position of it, we should be ok without full UX/accessibility checks.