chore(CodeBlock): refactor and add support for a white background

dnbexperience · Jan 19, 2024 · ac35cea · ac35cea
1 parent 1fcb3f2
commit ac35cea
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 43 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss
@@ -8,6 +8,14 @@
   }
 }
 
+.whiteBackgroundStyle {
+  :global {
+    .example-box {
+      background: white;
+    }
+  }
+}
+
 .toolbarStyle {
   position: absolute;
   z-index: 100; // over generally used z-indexes, like table rows

diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx
@@ -5,7 +5,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import Highlight, { Prism, defaultProps } from 'prism-react-renderer'
+import Highlight, {
+  Language,
+  Prism,
+  defaultProps,
+} from 'prism-react-renderer'
 import Tag from './Tag'
 import { Button } from '@dnb/eufemia/src/components'
 import { makeUniqueId } from '@dnb/eufemia/src/shared/component-helper'
@@ -15,6 +19,7 @@ import {
   liveCodeEditorStyle,
   toolbarStyle,
   codeBlockStyle,
+  whiteBackgroundStyle,
 } from './CodeBlock.module.scss'
 import {
   LiveProvider,
@@ -27,18 +32,33 @@ import {
 import prismTheme from '@dnb/eufemia/src/style/themes/theme-ui/prism/dnb-prism-theme'
 import { ContextProps } from '@dnb/eufemia/src/shared/Context'
 
+export type CodeBlockProps = {
+  scope?: Record<string, unknown>
+  useRender?: boolean
+  hideToolbar?: boolean
+  hideCode?: boolean
+  hidePreview?: boolean
+  reactLive?: boolean
+  language?: Language
+  className?: string
+  background?: 'grid' | 'white'
+  children: string | React.ReactNode | (() => React.ReactNode)
+  tabMode?: 'focus' | 'indentation'
+  'data-visual-test'?: string
+}
+
 const CodeBlock = ({
   language,
   children: exampleCode,
   reactLive: isReactLive,
   ...props
-}) => {
+}: CodeBlockProps) => {
   const context = React.useContext(Context)
 
   if (!language) {
-    language =
-      (String(props && props.className).match(/language-(.*)$|\s/) ||
-        [])[1] || 'jsx'
+    language = ((String(props && props.className).match(
+      /language-(.*)$|\s/,
+    ) || [])[1] || 'jsx') as Language
   }
 
   if (((props && props.scope) || isReactLive) && language === 'jsx') {
@@ -49,14 +69,14 @@ const CodeBlock = ({
           createSkeletonClass('code', context.skeleton),
         )}
       >
-        <LiveCode code={exampleCode} {...props} />
+        <LiveCode code={exampleCode as string} {...props} />
       </div>
     )
   } else {
     return (
       <Highlight
         {...defaultProps}
-        code={String(exampleCode).trim()}
+        code={exampleCode as string}
         language={language}
         theme={prismTheme}
       >
@@ -86,27 +106,12 @@ const CodeBlock = ({
 
 export default CodeBlock
 
-export type LiveCodeProps = {
+type LiveCodeProps = {
   code: string
-  scope?: Record<string, unknown>
-  useRender?: boolean
   noFragments?: boolean
-  hideToolbar?: boolean
-  hideCode?: boolean
-  hidePreview?: boolean
-  language?: string
-  tabMode?: 'focus' | 'indentation'
-  'data-visual-test'?: string
-}
+} & Omit<CodeBlockProps, 'children'>
 
-type LiveCodeDefaultState = LiveCodeProps & {
-  language?: string
-}
-
-class LiveCode extends React.PureComponent<
-  LiveCodeProps,
-  LiveCodeDefaultState
-> {
+class LiveCode extends React.PureComponent<LiveCodeProps, LiveCodeProps> {
   static contextType = Context
 
   context!: ContextProps
@@ -168,6 +173,7 @@ class LiveCode extends React.PureComponent<
       useRender,
       noFragments = true,
       language = 'jsx',
+      background,
 
       code: _code, // eslint-disable-line
       hideToolbar: _hideToolbar, // eslint-disable-line
@@ -188,7 +194,12 @@ class LiveCode extends React.PureComponent<
     }
 
     return (
-      <div className={liveCodeEditorStyle}>
+      <div
+        className={classnames(
+          liveCodeEditorStyle,
+          background && whiteBackgroundStyle,
+        )}
+      >
         <LiveProvider
           theme={prismTheme}
           code={codeToUse}

diff --git a/packages/dnb-design-system-portal/src/shared/tags/ComponentBox.tsx b/packages/dnb-design-system-portal/src/shared/tags/ComponentBox.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react'
-import CodeBlock, { LiveCodeProps } from './CodeBlock'
+import CodeBlock, { CodeBlockProps } from './CodeBlock'
 import styled from '@emotion/styled'
 import { getComponents } from '@dnb/eufemia/src/components/lib'
 import { getFragments } from '@dnb/eufemia/src/fragments/lib'
@@ -16,29 +16,15 @@ if (!globalThis.ComponentBoxMemo) {
   globalThis.ComponentBoxMemo = {}
 }
 
-type ComponentBoxProps = {
-  children: React.ReactNode | (() => React.ReactNode)
-  useRender?: boolean
-
-  /** @deprecated Use "useRender" instead */
-  noInline?: boolean
-} & Omit<LiveCodeProps, 'code'>
-
-function ComponentBox(props: ComponentBoxProps) {
+function ComponentBox(props: CodeBlockProps) {
   const { children, scope = {}, ...rest } = props
 
   const hash = children as string
   if (globalThis.ComponentBoxMemo[hash]) {
     return globalThis.ComponentBoxMemo[hash]
   }
 
-  if (rest.noInline) {
-    rest.useRender = true
-  }
-
   return (globalThis.ComponentBoxMemo[hash] = (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     <CodeBlock
       scope={{
         ...getComponents(),
@@ -50,7 +36,6 @@ function ComponentBox(props: ComponentBoxProps) {
         Form,
         styled,
         React,
-        // TestWrapper,// Not used as of now
         ...scope,
       }}
       {...rest}