diff --git a/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js b/packages/dnb-eufemia-sandbox/stories/components/GlobalStatus.js
index 18912b39bac..4edf445aaac 100644
--- 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 (
+ <>
+
+
+
+ setStatus((s) => (!s ? 'min status' : null))}
+ >
+ set status
+
+
+
+ } status={status} />
+
+ } status={status} />
+ } status={status} />
+
+ >
+ )
+}
+
const CustomStatus = () => (
<>
Custom Status
diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.js
index f3c786072c5..5b14c38d167 100644
--- 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
index 15459780ede..3ebf86d6a46 100644
--- 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 (
+ }
+ status={status}
+ status_no_animation={true}
+ global_status_id="main-to-be-empty"
+ on_change={({ checked }) => {
+ setStatus(checked ? 'error-message' : null)
+ }}
+ />
+ )
+ }
+ const Comp = mount(
+ <>
+ custon anchor text}
+ />
+
+ >
+ )
+
+ 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/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
index 18f75744c1d..6fe62e80180 100644
--- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
+++ b/packages/dnb-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
+
+
+ Label
+