WORLDSERVICE 408 - Implement Lite site text CTA under h1 on article page (Gahuza)

[Louis-Matsika]

Resolves JIRA WORLDSERVICE-408

Overall changes

Created a new component CallToActionLinkWithChevron within #components

This new component uses the existing CallToActionLink however incorporates <RightChevron> and <LeftChevron> (to support both LTR, and RTL languages)

Created ArticleHeadline co-located within src/app/pages/ArticlePage. this component handels rendering heading on article pages and decides if a headline should include a LiteSiteCTA based on the toggles set in iSite

Notes

Refactoring
There are now a few CTAs within Simorgh that are logically and visually similar. A ticket will be made to address refactoring

insuring there isn’t multiple LiteSiteCTAs on an article page
Currently these changes affect every heading on an article page (this should be fine as there shouldn't be more than 1 h1 heading on an article page).

if work is needed to only apply the CTA under the first heading(as there may be more headings on the page), then work in the BFF would need to be done. perhaps adding a custom block that apply's CallToActionLink only to the first heading in the data that gets sent off to Simorgh

Testing

Canonical Articles that should display the liteSiteCTA

1. Visit any article page on a service with the liteSiteCTA toggle enabled

   • e.g. http://localhost:7080/gahuza/articles/c5y51yxeg53o

2. Check if the liteSite CTA is visible under the Article heading

3. Click the CTA

   The CTA should take you to the same article however the lite version

   • e.g. http://localhost:7080/gahuza/articles/c5y51yxeg53o.ltie

Canonical Articles that should not display the liteSiteCTA

1. Visit any article page on a service with the liteSiteCTA toggle disabled
   • e.g. http://localhost:7080/gahuza/articles/c5y51yxeg53o

The liteSite CTA should not be visible under the Article heading

The LiteSite

The LiteSite itself should not render the liteSiteCTA under any conditions

1. Visit any article page on the LiteSite
   • e.g. http://localhost:7080/gahuza/articles/c5y51yxeg53o

The liteSite CTA should not be visible under the Article heading

Helpful Links

Coding Standards

Repository use guidelines

[greenc05]

Thanks @Isabella-Mitchell So we also have future work to refactor the call to action link (without chevron)? (Not sure we have any other components in this state)

[Isabella-Mitchell]

Ok so now I've seen the component on the page and see the touch target height is good. Wondering why though that isn't in the component when it's viewed in isolatoin in storybook?
Would be great if we could start some best practice for PRs (@Isabella-Mitchell does an outstanding job of this), in which we can include links to components in isolatoin and in page please @karinathomasbbc @amoore108 @HarveyPeachey

Touch target could be related to this comment: #12494 (comment)

Seems like it needs the header in place for the touch target to be correct, whereas I think we should have all the styling encapsulated within the CTA component itself.

We've added display:inline-block to the link styles. This means the is not treated as inline, and so the touch target spacing is shown on Storybook on the link in isolation.. Agree it's something we could look more into during refactoring.

We've added some more stories to help us see the component in context
LTR
RTL
Heading with no Lite Site CTA

[Isabella-Mitchell]

Thanks @Isabella-Mitchell So we also have future work to refactor the call to action link (without chevron)? (Not sure we have any other components in this state)

We'll put together a ticket for this

[karinathomasbbc]

Would it be overkill to update the ArticlePage stories to include an example with liteSiteCTA enabled? This is probably better for being able to see the component in context. We could even consider removing this story, as we don't really need to see the article headline in isolation...

[Isabella-Mitchell]

Okies, that's my bad. I thought it would be helpful to have co-located stories for reviewing. But agree the best reviewing experience would be to see it on the Article Page. And then we don't need any new fixture data to do this.

[karinathomasbbc]

No worries, it was useful to have initially, I just thought it was best to view the component in context & it made sense on the Article Page

[karinathomasbbc]

Can we make a couple of changes to the stories?

Here's what I would like:

1. A generic story (similar to the example) where I can select the service and the page furniture will automatically change (even though the article content will remain the same, we should still get translations for the selected service). This should be named ArticlePageWithLiteSiteCTA but allow service to be passed in as a prop. This should also have chromatic snapshots disabled
2. A story for chromatic (which could be the current ArticlePageWithLiteSiteCTA story with gahuza pre-selected, but renamed to TestArticlePageWithLiteSiteCTA), which is actually hidden from view in Storybook - here's how we've done this elsewhere:

   simorgh/src/app/pages/HomePage/index.stories.tsx

   Lines 92 to 99 in 87cffdf

   	// This story is for chromatic testing purposes only
   	export const Test = {
   	render: (_: StoryArgs, { variant }: StoryProps) => (
   	<Component service="kyrgyz" variant={variant} />
   	),
   	tags: ['!dev'],
   	};

3. Delete ArticlePageWithLiteSiteCTARightToLeft because this will be superseded by 1.

Happy to hop on a call to discuss.