fix(GlobalStatus): remove paragraph tag around title to allow childre…

…n paragraphs (#2800) This should allow <p> tags to be sendt in to the `title` prop More context here: https://jira.tech.dnb.no/browse/EDS-603 --------- Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Oct 30, 2023 · c0657bb · c0657bb
1 parent ac42ece
commit c0657bb
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 16 deletions.
diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js
@@ -752,7 +752,11 @@ export default class GlobalStatus extends React.PureComponent {
       <div className="dnb-global-status__content">
         {title !== false && (
           <Section element="div" variant={state}>
-            <p className="dnb-p dnb-global-status__title" lang={lang}>
+            <div
+              className="dnb-global-status__title"
+              role={titleToRender?.type ? undefined : 'paragraph'}
+              lang={lang}
+            >
               <span className="dnb-global-status__icon">
                 {iconToRender}
               </span>
@@ -769,7 +773,7 @@ export default class GlobalStatus extends React.PureComponent {
                   icon_position="left"
                 />
               )}
-            </p>
+            </div>
             {hasContent && (
               <Section
                 element="div"

diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.tsx b/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.tsx
@@ -11,6 +11,8 @@ import FormSet from '../../form-set/FormSet'
 import Switch from '../../switch/Switch'
 import Autocomplete from '../../autocomplete/Autocomplete'
 import { fireEvent, render, waitFor } from '@testing-library/react'
+import { Provider } from '../../../shared'
+import { P } from '../../../elements'
 
 const text = 'text'
 const items = [
@@ -46,6 +48,40 @@ describe('GlobalStatus component', () => {
     )
   })
 
+  it('title should have role of paragraph', () => {
+    const { rerender } = render(
+      <Provider locale="en-GB">
+        <GlobalStatus {...props} />
+      </Provider>
+    )
+    const element = document.querySelector('.dnb-global-status__title')
+    expect(element.tagName).toContain('DIV')
+    expect(element.getAttribute('role')).toBe('paragraph')
+
+    expect(element.textContent).toContain('An error has occurred')
+    expect(element.textContent).toContain('Close')
+    expect(element.getAttribute('lang')).toBe('en-GB')
+
+    rerender(
+      <Provider locale="nb-NO">
+        <GlobalStatus {...props} />
+      </Provider>
+    )
+
+    expect(element.textContent).toContain('En feil har skjed')
+    expect(element.textContent).toContain('Lukk')
+    expect(element.getAttribute('lang')).toBe('nb-NO')
+
+    rerender(
+      <Provider locale="nb-NO">
+        <GlobalStatus {...props} title={<P>Custom title</P>} />
+      </Provider>
+    )
+
+    expect(element.textContent).toContain('Custom title')
+    expect(element.getAttribute('role')).not.toBe('paragraph')
+  })
+
   it('should have correct attributes like "aria-live"', async () => {
     const { rerender } = render(
       <GlobalStatus autoscroll={false} delay={0} />

diff --git a/...b-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap b/...b-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap
@@ -675,14 +675,12 @@ button.dnb-button::-moz-focus-inner {
   position: relative;
   cursor: text;
   min-height: 4.5rem;
-}
-.dnb-global-status__title.dnb-p {
   display: flex;
   align-items: center;
   padding: 1rem 5rem 1rem 2.5rem;
-  margin-bottom: 0.5rem;
+  font-size: var(--font-size-basis);
 }
-.dnb-spacing .dnb-global-status__title.dnb-p, .dnb-spacing .dnb-global-status__title.dnb-p:not([class*=dnb-space]) {
+.dnb-global-status__title .dnb-p, .dnb-spacing .dnb-global-status__title .dnb-p, .dnb-spacing .dnb-global-status__title .dnb-p:not([class*=dnb-space]) {
   margin: 0;
 }
 .dnb-global-status__message {

diff --git a/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss b/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss
@@ -51,16 +51,15 @@
 
     min-height: 4.5rem;
 
-    &.dnb-p {
-      display: flex;
-      align-items: center;
+    display: flex;
+    align-items: center;
 
-      padding: 1rem 5rem 1rem 2.5rem;
-      margin-bottom: 0.5rem;
-    }
+    padding: 1rem 5rem 1rem 2.5rem;
+    font-size: var(--font-size-basis);
 
-    .dnb-spacing &.dnb-p,
-    .dnb-spacing &.dnb-p:not([class*='dnb-space']) {
+    .dnb-p,
+    .dnb-spacing & .dnb-p,
+    .dnb-spacing & .dnb-p:not([class*='dnb-space']) {
       margin: 0;
     }
   }
@@ -74,8 +73,8 @@
       flex-direction: column;
 
       padding: 0.5rem 0 2.5rem 2.5rem;
-
-      & .dnb-p,
+      // stylelint-disable-next-line no-descending-specificity
+      .dnb-p,
       .dnb-spacing & .dnb-p,
       .dnb-spacing & .dnb-p:not([class*='dnb-space']) {
         display: inline-block;