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

src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Paragraph does not render dropCap when first children is not plain text 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 0;
+  color: #2E2E2E;
+  font-family: "DM Sans",sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.emotion-0 svg {
+  fill: #2E2E2E;
+}
+
+<p
+    class="emotion-0"
+  >
+    <b>
+      paragraph
+    </b>
+     component
+  </p>
+</DocumentFragment>
+`;
+
 exports[`Paragraph renders Paragraph 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -101,14 +128,85 @@ exports[`Paragraph renders empty Paragraph with dropCap without crashing  1`] =
 exports[`Paragraph renders with drop cap 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  max-width: 100%;
+  margin: 0;
+  color: #2E2E2E;
+  font-family: "DM Sans",sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.emotion-0 svg {
+  fill: #2E2E2E;
 }
 
 .emotion-1 {
+  margin: 0 0.15em 0 0;
+  float: left;
+  margin-top: 4px;
+  color: #0A0A0A;
+}
+
+@media screen and (max-width: 767px) {
+  .emotion-1 {
+    font-size: 5.625em;
+    line-height: 0.85;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .emotion-1 {
+    font-size: 5.875em;
+    line-height: 0.85;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .emotion-1 {
+    font-size: 6em;
+    line-height: 0.85;
+  }
+}
+
+.emotion-1 svg {
+  fill: #0A0A0A;
+}
+
+<p
+    aria-hidden="true"
+    class="emotion-0"
+  >
+    <span
+      class="emotion-1"
+    >
+      p
+    </span>
+    aragraph component
+  </p>
+  .emotion-0 {
+  display: block;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+<span
+    class="emotion-0"
+  >
+    paragraph component
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Paragraph renders with drop cap and complex children 1`] = `
+<DocumentFragment>
+  .emotion-0 {
   margin: 0;
   color: #2E2E2E;
   font-family: "DM Sans",sans-serif;
@@ -118,44 +216,63 @@ exports[`Paragraph renders with drop cap 1`] = `
   letter-spacing: 0;
 }
 
-.emotion-1 svg {
+.emotion-0 svg {
   fill: #2E2E2E;
 }
 
-.emotion-2 {
-  margin: 0;
+.emotion-1 {
+  margin: 0 0.15em 0 0;
   float: left;
-  margin-right: 0.15em;
   margin-top: 4px;
   color: #0A0A0A;
 }
 
 @media screen and (max-width: 767px) {
-  .emotion-2 {
+  .emotion-1 {
     font-size: 5.625em;
     line-height: 0.85;
   }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .emotion-2 {
+  .emotion-1 {
     font-size: 5.875em;
     line-height: 0.85;
   }
 }
 
 @media screen and (min-width: 1024px) {
-  .emotion-2 {
+  .emotion-1 {
     font-size: 6em;
     line-height: 0.85;
   }
 }
 
-.emotion-2 svg {
+.emotion-1 svg {
   fill: #0A0A0A;
 }
 
-.emotion-3 {
+<p
+    aria-hidden="true"
+    class="emotion-0"
+  >
+    <span
+      class="emotion-1"
+    >
+      p
+    </span>
+    aragraph 
+    <b>
+      component
+    </b>
+     with 
+    <a
+      href="/"
+    >
+      link
+    </a>
+  </p>
+  .emotion-0 {
   display: block;
   clip: rect(0 0 0 0);
   -webkit-clip-path: inset(100%);
@@ -167,26 +284,20 @@ exports[`Paragraph renders with drop cap 1`] = `
   width: 1px;
 }
 
-<div
+<span
     class="emotion-0"
   >
-    <p
-      aria-hidden="true"
-      class="emotion-1"
+    paragraph 
+    <b>
+      component
+    </b>
+     with 
+    <a
+      href="/"
     >
-      <span
-        class="emotion-2"
-      >
-        p
-      </span>
-      aragraph component
-    </p>
-    <span
-      class="emotion-3"
-    >
-      paragraph component
-    </span>
-  </div>
+      link
+    </a>
+  </span>
 </DocumentFragment>
 `;
 

src/typography/__tests__/paragraph.stories.tsx

@@ -48,6 +48,18 @@ export const StoryParagraph = () => (
       Week.
     </P>
     <br />
+    <StorybookSubHeading>
+      with drop cap and multiply children
+    </StorybookSubHeading>
+    <P dropCap>
+      This being <strong>Black History Month</strong>, last week was Politicians
+      In Search Of An Eye-Catching Race-Related Policy Week. Both Theresa May
+      and <strong>Jeremy Corbyn</strong> had their own announcement, each
+      seemingly benign and right-on, each actually destructive and wrong-headed.
+      This being Black History Month, last week was
+      <i>Politicians In Search Of An Eye-Catching Race-Related Policy Week</i>.
+    </P>
+    <br />
     <StorybookSubHeading>with Sup and Sub elements</StorybookSubHeading>
     <P>
       Paragraph component containing a <Sub>subscript element</Sub> and a{' '}

src/typography/__tests__/paragraph.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import {
   Paragraph,
   P,
@@ -56,6 +57,30 @@ describe('Paragraph', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('renders with drop cap and complex children', () => {
+    const wrapper = renderToFragmentWithTheme(Paragraph, {
+      children: (
+        <>
+          paragraph <b>component</b> with <a href="/">link</a>
+        </>
+      ),
+      dropCap: true,
+    } as ParagraphProps);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('does not render dropCap when first children is not plain text', () => {
+    const wrapper = renderToFragmentWithTheme(Paragraph, {
+      children: (
+        <>
+          <b>paragraph</b> component
+        </>
+      ),
+      dropCap: true,
+    } as ParagraphProps);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('P alias for Paragraph', () => {
     expect(P).toEqual(Paragraph);
   });