fix: fix support for components inside labels to show up in GlobalStatus

dnbexperience · Oct 13, 2021 · f43d14d · f43d14d
1 parent 4001681
commit f43d14d
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 13 deletions.
diff --git a/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js b/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js
@@ -29,6 +29,35 @@ export default {
   title: 'Eufemia/Components/GlobalStatus',
 }
 
+export const ComponentAsLabel = () => {
+  const [status, setStatus] = React.useState(null)
+
+  const Component = () => {
+    return 'my label'
+  }
+
+  return (
+    <>
+      <GlobalStatus id="test" />
+
+      <FormSet label_direction="vertical" global_status_id="test">
+        <ToggleButton
+          bottom
+          on_change={() => setStatus((s) => (!s ? 'min status' : null))}
+        >
+          set status
+        </ToggleButton>
+
+        <FormRow>
+          <Input label={<Component />} status={status} />
+        </FormRow>
+        <Input label={<Component />} status={status} />
+        <Input label={<Component />} status={status} />
+      </FormSet>
+    </>
+  )
+}
+
 const CustomStatus = () => (
   <>
     <H2>Custom Status</H2>

diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js
@@ -15,7 +15,6 @@ import {
   registerElement,
   validateDOMAttributes,
   dispatchCustomElementEvent,
-  convertJsxToString,
   processChildren,
   extendPropsWithContext,
 } from '../../shared/component-helper'
@@ -49,7 +48,7 @@ export default class GlobalStatus extends React.PureComponent {
   static propTypes = {
     id: PropTypes.string,
     status_id: PropTypes.string,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    title: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
     default_title: PropTypes.string,
     text: PropTypes.oneOfType([
       PropTypes.string,
@@ -73,7 +72,7 @@ export default class GlobalStatus extends React.PureComponent {
     autoclose: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    close_text: PropTypes.string,
+    close_text: PropTypes.node,
     hide_close_button: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.bool,
@@ -86,7 +85,7 @@ export default class GlobalStatus extends React.PureComponent {
       PropTypes.string,
       PropTypes.bool,
     ]),
-    status_anchor_text: PropTypes.string,
+    status_anchor_text: PropTypes.node,
     skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
     ...spacingPropTypes,
@@ -611,14 +610,24 @@ export default class GlobalStatus extends React.PureComponent {
         item.id || item.status_id
           ? `${item.status_id}-${i}`
           : makeUniqueId()
-      const label = React.isValidElement(item.status_anchor_label)
-        ? convertJsxToString(item.status_anchor_label)
-        : item.status_anchor_label || ''
-      const anchorText = String(
-        item.status_anchor_text || status_anchor_text
-      )
-        .replace('%s', label)
-        .replace(/[: ]$/g, '')
+
+      let anchorText = status_anchor_text
+
+      if (React.isValidElement(item.status_anchor_label)) {
+        anchorText = (
+          <>
+            {typeof status_anchor_text === 'string'
+              ? status_anchor_text.replace('%s', '').trim()
+              : status_anchor_text}{' '}
+            {item.status_anchor_label}
+          </>
+        )
+      } else {
+        anchorText = String(item.status_anchor_text || status_anchor_text)
+          .replace('%s', item.status_anchor_label || '')
+          .replace(/[: ]$/g, '')
+      }
+
       const useAutolink = item.status_id && isTrue(item.status_anchor_url)
 
       return (

diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.js b/packages/dnb-eufemia/src/components/global-status/__tests__/GlobalStatus.test.js
@@ -364,6 +364,53 @@ describe('GlobalStatus component', () => {
     )
   })
 
+  it('should support component given as labels', async () => {
+    const ToggleStatus = () => {
+      const [status, setStatus] = React.useState(null)
+
+      const Component = () => {
+        return 'my-label'
+      }
+
+      return (
+        <Switch
+          id="switch"
+          label={<Component />}
+          status={status}
+          status_no_animation={true}
+          global_status_id="main-to-be-empty"
+          on_change={({ checked }) => {
+            setStatus(checked ? 'error-message' : null)
+          }}
+        />
+      )
+    }
+    const Comp = mount(
+      <>
+        <Component
+          id="main-to-be-empty"
+          autoscroll={false}
+          delay={0}
+          no_animation={true}
+          status_anchor_text={<span>custon anchor text</span>}
+        />
+        <ToggleStatus />
+      </>
+    )
+
+    Comp.find('input#switch').simulate('change')
+
+    expect(Comp.find('.dnb-global-status__message p').at(0).text()).toBe(
+      'error-message'
+    )
+    expect(
+      Comp.find('.dnb-global-status__message__content ul li')
+        .at(0)
+        .find('a.dnb-anchor')
+        .text()
+    ).toBe('custon anchor text my-label')
+  })
+
   it('has to have a working auto close', () => {
     const on_open = jest.fn()
     const on_close = jest.fn()

diff --git a/...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/...nb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
@@ -1437,7 +1437,11 @@ Array [
                           onClick={[Function]}
                           onKeyDown={[Function]}
                         >
-                          Gå til Label
+                          Gå til
+                           
+                          <span>
+                            Label
+                          </span>
                         </a>
                       </li>
                     </ul>
-Original file line number
+Diff line change
@@ Expand Up / @@ -1437,7 +1437,11 @@ Array [ @@
                               onClick={[Function]}
                               onKeyDown={[Function]}
                             >
-                              Gå til Label
+                              Gå til
+                              <span>
+                                Label
+                              </span>
                             </a>
                           </li>
                         </ul>
@@ Expand Down @@