RTL subheadline block

[twinlensreflex]

Is your feature request related to a problem? Please describe.
We want our subheadline block to work for RTL articles (Persian, Arabic, Urdu, Pashto).

Describe the solution you'd like
As a result of #2713, the NassimPersian font should be loaded for all 4 services and we should already have the text direction being right-to-left. This ticket is to ensure that the implementation matches the designs (except for it not using the correct service-specific font).

If the font sizes and line heights need updating, they should be discussed with UX design before implementing any changes gel-foundations

For each service we should import the Arabic typography settings from here: import { arabic } from '@bbc/gel-foundations/scripts'

• subheadline block is RTL and matches UX designs (except for service-specific font)
• Font is bold
• Font size is: 38px (<600px), 44px otherwise
• id for subheadline should be made of the text contained in the tags but with spaces replaced with -s and punctuation removed.
• handle ZWNJ (aka half space) special character in IDs by replacing it with a hyphen - ensure we have a unit test & storybook example with text that has this zero-width-non-joiner character.

Testing notes

• test fallback font on older devices

Testing URL's
https://www.test.bbc.com/arabic/articles/c69dvq19k63o
https://www.test.bbc.com/persian/articles/c4vlle3q337o
https://www.test.bbc.com/urdu/articles/cx621klkm1ro
https://www.test.bbc.com/pashto/articles/cng0e8v85eko

Dev insight: Update unit snapshot tests.

Additional context
Add any other context or screenshots about the feature request here.

[sareh]

Blocked on adding Nassim Persian to Simorgh #1910

[jamesdonoh]

No longer blocked on #1910; now blocked on BBC-archive/psammead#543

[jamesdonoh]

The above issue was closed, assuming this is now unblocked so we should try to pick up.

[jimjohnsonrollings]

I suspect that all of this works already - so maybe this needs just to be to check everything is correct.

[jimjohnsonrollings]

Blocked pending #2732

[nataliesmart]

Subhead (H2) type sizes:
Group A (0-319px): font size is 24px with line height 34px
Group B (320-599px): font size is 32px with line height 38px
Group D (600px +): font size is 36px with line height 50px

[jamesdonoh]

Unblocked following BBC-archive/psammead#1516

[RayNjeri]

Blocked pending #2713

[RayNjeri]

Subhead (H2) type sizes:
Group A (0-319px): font size is 24px with line height 34px
Group B (320-599px): font size is 32px with line height 38px
Group D (600px +): font size is 36px with line height 50px

Checked as per the description and per the values specified here by @nataliesmart and everything seems to check off, both on Chrome and Firefox. Further UX review is welcomed.
cc: @jamesdonoh

[RayNjeri]

Same applies on live.

[jamesdonoh]

Closing this issue as we believe the treatment on live is as expected, please reopen if not.

[nataliesmart]

There's no subhead on the second, third and fourth links to check. The first link's subhead matches the type specs above.