chore: make Eufemia "warn" console log better recognizable

packages/dnb-eufemia/src/shared/__tests__/component-helper.test.js

@@ -7,7 +7,6 @@ import React from 'react'
 import { mount } from '../../core/jest/jestSetup'
 import { registerElement } from '../custom-element'
 import {
-  warn,
   isTrue,
   extend,
   extendPropsWithContext,
@@ -773,25 +772,6 @@ describe('"matchAll" should', () => {
   })
 })
 
-describe('"warn" should', () => {
-  const text = 'warning text'
-
-  it('print a console.log', () => {
-    process.env.NODE_ENV = 'development'
-    global.console.log = jest.fn()
-    warn(text)
-    expect(global.console.log).toBeCalled()
-    expect(global.console.log).toHaveBeenCalledWith('Eufemia:', text)
-  })
-
-  it('not print a console.log in production', () => {
-    process.env.NODE_ENV = 'production'
-    global.console.log = jest.fn()
-    warn(text)
-    expect(global.console.log).not.toBeCalled()
-  })
-})
-
 describe('"convertJsxToString" should', () => {
   it('extracts content from components inside array', () => {
     const Component = () => 'not reachable'

packages/dnb-eufemia/src/shared/__tests__/helpers.test.js

@@ -20,6 +20,7 @@ import {
   isWin,
   isMac,
   isLinux,
+  warn,
 } from '../helpers'
 
 import { mockGetSelection } from '../../core/jest/jestSetup'
@@ -186,3 +187,60 @@ describe('"debounce" should', () => {
     }, 2)
   })
 })
+
+describe('"warn" should', () => {
+  const log = global.console.log
+
+  beforeEach(() => {
+    global.console.log = jest.fn()
+  })
+
+  afterEach(() => {
+    global.console.log = log
+
+    jest.resetAllMocks()
+  })
+
+  it('run console.log with several messages', () => {
+    warn('message-1', 'message-2')
+
+    expect(global.console.log).toHaveBeenCalledTimes(1)
+    expect(global.console.log).toHaveBeenCalledWith(
+      '%cEufemia',
+      'padding: 0.125rem 0.5rem 0;font-weight: bold;color: #00343E;background: #A5E1D2',
+      'message-1',
+      'message-2'
+    )
+  })
+
+  it('run not log if NODE_ENV is production', () => {
+    const env = process.env.NODE_ENV
+    process.env.NODE_ENV = 'production'
+
+    warn('message-1', 'message-2')
+
+    expect(global.console.log).toHaveBeenCalledTimes(0)
+
+    process.env.NODE_ENV = env
+  })
+
+  it('run not use styles when not in browser', () => {
+    const windowSpy = jest.spyOn(window, 'window', 'get')
+    windowSpy.mockImplementation(() => undefined)
+
+    warn('message-1', 'message-2')
+
+    expect(global.console.log).toHaveBeenCalledTimes(1)
+  })
+
+  it('run not log if NODE_ENV is production', () => {
+    const env = process.env.NODE_ENV
+    process.env.NODE_ENV = 'production'
+
+    warn('message-1', 'message-2')
+
+    expect(global.console.log).toHaveBeenCalledTimes(0)
+
+    process.env.NODE_ENV = env
+  })
+})

packages/dnb-eufemia/src/shared/helpers.js

@@ -419,16 +419,34 @@ export async function copyToClipboard(string) {
   return success
 }
 
-export const warn = (...e) => {
+/**
+ * Uses console.log to warn about Eufemia usage issues
+ *
+ * It uses log instead of warn,
+ * because of the stack track some browser do add
+ * which takes a lot of visual space in the console
+ *
+ * @param  {...any} params Send in what ever you would
+ */
+export const warn = (...params) => {
   if (
     typeof process !== 'undefined' &&
     process.env.NODE_ENV !== 'production' &&
     typeof console !== 'undefined' &&
     typeof console.log === 'function'
   ) {
-    // Use log instead of warn,
-    // because of the stack track some browser do add
-    // which takes a lot of visual space in the console
-    console.log('Eufemia:', ...e)
+    const isBrowser = typeof window !== 'undefined'
+
+    if (isBrowser) {
+      const styles = [
+        `padding: 0.125rem 0.5rem ${IS_SAFARI ? '' : '0'}`,
+        'font-weight: bold',
+        'color: #00343E',
+        'background: #A5E1D2',
+      ].join(';')
+      console.log('%cEufemia', styles, ...params)
+    } else {
+      console.log('Eufemia:', ...params)
+    }
   }
 }