From b0a864d6a1cf3b3094579951235689c54f7f27c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Mon, 11 Nov 2024 09:11:42 +0100
Subject: [PATCH] feat(Paragraph): handle nested paragraphs (to be `span`'s)

---
 .../dnb-eufemia/src/elements/typography/P.tsx | 40 +++++++++++++------
 .../elements/typography/__tests__/P.test.tsx  | 23 +++++++++++
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/packages/dnb-eufemia/src/elements/typography/P.tsx b/packages/dnb-eufemia/src/elements/typography/P.tsx
index a2a70320077..185be7936e0 100644
--- a/packages/dnb-eufemia/src/elements/typography/P.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/P.tsx
@@ -3,7 +3,7 @@
  *
  */
 
-import React from 'react'
+import React, { createContext, useContext } from 'react'
 import classnames from 'classnames'
 import { SpacingProps } from '../../components/space/types'
 import type { DynamicElement } from '../../shared/types'
@@ -45,16 +45,19 @@ export type PProps = SpacingProps &
     modifier?: string
   }
 
-const P = ({
-  modifier,
-  element = 'p',
-  className,
-  medium,
-  bold,
-  size,
-  ...props
-}: PProps) => {
+function P(props: PProps) {
+  const {
+    modifier,
+    element = 'p',
+    className,
+    medium,
+    bold,
+    size,
+    ...rest
+  } = props
+
   const allModifiers = [medium && 'medium', bold && 'bold']
+  const paragraphContext = useContext(ParagraphContext)
 
   if (modifier) {
     modifier
@@ -74,18 +77,29 @@ const P = ({
 
   return (
     <E
-      as={element}
-      {...props}
+      as={element === 'p' && paragraphContext?.isNested ? 'span' : element}
+      {...rest}
       className={classnames(
         'dnb-p',
         modifierString,
         className,
         size && `dnb-p__size--${size}`
       )}
-    />
+    >
+      <ParagraphContext.Provider value={{ isNested: true }}>
+        {props.children}
+      </ParagraphContext.Provider>
+    </E>
   )
 }
 
 P._supportsSpacingProps = true
 
 export default P
+
+export type ParagraphContextType = {
+  isNested?: boolean
+}
+
+export const ParagraphContext =
+  createContext<ParagraphContextType>(undefined)
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx b/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
index 7784807d148..3ab5c97d458 100644
--- a/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
@@ -14,6 +14,24 @@ const props: PProps = {
 }
 
 describe('P element', () => {
+  it('has p element as default', () => {
+    render(<P />)
+
+    const element = document.querySelector('.dnb-p')
+    expect(element.tagName).toBe('P')
+  })
+
+  it('has span element when nested', () => {
+    render(
+      <P>
+        <P />
+      </P>
+    )
+
+    const element = document.querySelector('.dnb-p > .dnb-p')
+    expect(element.tagName).toBe('SPAN')
+  })
+
   it('has correct size when size is defined', () => {
     render(<P size="large" />)
     const element = document.querySelector('.dnb-p__size--large')
@@ -23,6 +41,7 @@ describe('P element', () => {
       'dnb-p__size--large',
     ])
   })
+
   it('has correct style when size and a modifier is defined', () => {
     render(<P size="medium" modifier="medium" />)
     const element = document.querySelector('.dnb-p__size--medium')
@@ -33,6 +52,7 @@ describe('P element', () => {
       'dnb-p__size--medium',
     ])
   })
+
   it('has correct style when several modifiers are defined', () => {
     render(<P modifier="medium small" />)
     const element = document.querySelector('.dnb-p__size--small')
@@ -43,6 +63,7 @@ describe('P element', () => {
       'dnb-p__size--small',
     ])
   })
+
   it('has correct style when medium is set to true', () => {
     render(<P medium />)
     const element = document.querySelector('.dnb-p--medium')
@@ -51,12 +72,14 @@ describe('P element', () => {
       'dnb-p--medium',
     ])
   })
+
   it('has correct style when bold is set to true', () => {
     render(<P bold />)
     const element = document.querySelector('.dnb-p--bold')
 
     expect(Array.from(element.classList)).toEqual(['dnb-p', 'dnb-p--bold'])
   })
+
   it('should validate with ARIA rules as a p element', async () => {
     const Comp = render(<P {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()