feat(Paragraph): handle nested paragraphs (to be span's)

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'
@@ -24,7 +24,7 @@ export type PProps = SpacingProps &
      * Defines the Element Type, like "p"
      * Default: p
      */
-    element?: DynamicElement & 'p'
+    element?: DynamicElement | 'p'
     /**
      * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
      */
@@ -45,16 +45,20 @@ 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,
+    children,
+    ...rest
+  } = props
+
   const allModifiers = [medium && 'medium', bold && 'bold']
+  const paragraphContext = useContext(ParagraphContext)
 
   if (modifier) {
     modifier
@@ -73,19 +77,32 @@ const P = ({
     }, '')
 
   return (
-    <E
-      as={element}
-      {...props}
-      className={classnames(
-        'dnb-p',
-        modifierString,
-        className,
-        size && `dnb-p__size--${size}`
-      )}
-    />
+    <ParagraphContext.Provider value={{ isNested: true }}>
+      <E
+        as={
+          element === 'p' && paragraphContext?.isNested ? 'span' : element
+        }
+        {...rest}
+        className={classnames(
+          'dnb-p',
+          modifierString,
+          className,
+          size && `dnb-p__size--${size}`
+        )}
+      >
+        {children}
+      </E>
+    </ParagraphContext.Provider>
   )
 }
 
 P._supportsSpacingProps = true
 
 export default P
+
+export type ParagraphContextType = {
+  isNested?: boolean
+}
+
+export const ParagraphContext =
+  createContext<ParagraphContextType>(undefined)

packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx

@@ -14,6 +14,37 @@ 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('uses the given element when nested and defined', () => {
+    const MockComponent = (props) => <strong {...props}>Mock</strong>
+
+    render(
+      <P>
+        <P element={MockComponent} />
+      </P>
+    )
+
+    const element = document.querySelector('.dnb-p > .dnb-p')
+    expect(element.tagName).toBe('STRONG')
+  })
+
   it('has correct size when size is defined', () => {
     render(<P size="large" />)
     const element = document.querySelector('.dnb-p__size--large')
@@ -23,6 +54,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 +65,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 +76,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 +85,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()