fix(PPDSC-2203): handling non text children in Paragraph

[mutebg]

PPDSC-2203

What

1. Background - drop-cap on the paragraph component is broken when you use no-text only children like text <b>other</b> since for React treads that as multiple children
2. What did you do -
   2.1. - Updated code so that handles multiple children, and adjusted the ScreenOnly content, to wrap only first word instead of the whole paragraph text
   2.2. - When the first child is not a text it will not show the drop-cap.
   2.3. - Added support for React.Fragment
3. What does the reviewers should expect

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[newskit-engineering]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2203-paragraph-dropcap
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2203-paragraph-dropcap/storybook

[Vanals]

I would keep "children", why are we using an alias such as ch? I think makes it bit less easy to understand what is it

[Vanals]

Can you please go through the "manual tests" relevant to this ticket? The different browsers and Screen reader testing 🤔 ?

I can see how the screen reader is not behaving anymore as it should. How was before did allow a smooth reading of the paragraph, not you need extra steps! I can show you. I wonder if the return of the Paragraph component could be simplified into something like

return (
    <ParagraphText>
      {useDropCap && (
        <>
          <span aria-hidden="true">
            <ParagraphDropCap overrides={overrides}>
              {firstWord[0]}
            </ParagraphDropCap>
            removeFirstLetter(children)
          </span>
            
          <ScreenReaderOnly>{children}</ScreenReaderOnly>
        </>
      )}
    </ParagraphText>
  );

In this way you won't need any extra ternary statement and the SR will read it properly. Happy to jump on a call

[mutebg]

I have changed it a bit, let me know what you think

[Xin00163]

could we have a storybook scenario? The rest looks good

[evgenitsn]

Tiny but you can use .charAt for getting the first letter of a string like so
return firstChild.charAt(0);

[evgenitsn]

Similarly I think we can use .substring(1) instead of firstChild.split('').slice(1).join('').

[mutebg]

good ones, thanks