WSTEAM1-POC: Productionise Hackathon - Easy Read

[shayneahchoon]

HACKATHON

Overall changes

Adds hacky bff logic and a CTA component for easy read sites.

Code changes

• A bullet point list of key code changes that have been made.

Testing

Easy Read: http://localhost:7080/afrique/articles/c161g3y596go

Standard:

http://localhost:7080/afrique/articles/c023vz8qn6ro

Normal Article, make sure it still renders correctly: http://localhost:7080/portuguese/articles/c72mg3j3x7eo

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[greenc05]

Storybook example please could we:

Easy read format article page

• Think we have the standard read h1 at the top of the page? Think it should be 'La méthode de Richard Feynman pour bien apprendre'? (Please could you cross check from the doc our expert reviewed that we have the correct copy on the article?) DONE
• Please format the article e.g. add h2's etc as per the standard article DONE
• Please add images as per the standard article (though leave out the captions for now? Unless we have this in easy read?) DONE

Is it possible please to have a storybook standard format article page e.g. with the easy component with 'Standard' selected, with the standard copy on please as per https://www.bbc.com/afrique/articles/clygddd1x7eo (Then I can switch between the 2 pages for the demo?) DONE

[greenc05]

Are we able to use previous sibling CSS selector (note not 100% browser support) to decrease the padding below the h1 though keeping the same touch target for the links? (visually this should keep the desired space below the h1)

Desktop (min-width: 37.5rem) h1 default padding is padding: 2.5rem 0px;

.h1:has(+ .easy-read-component) { padding: 2.5rem 0px 2rem; }

**All other breakpoints below ** h1 default padding is padding: 2rem 0px;

.h1:has(+ .easy-read-component) { padding: 2rem 0px 1.5rem; }