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 +