Enhance portal dnb theme and make code components for more flexibility

packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js

@@ -4,76 +4,77 @@
  */
 
 import React from 'react'
-import { css, Global } from '@emotion/core'
+import { css } from '@emotion/core'
 import Highlight, { defaultProps } from 'prism-react-renderer'
-// import prismTheme from 'prism-react-renderer/themes/nightOwl'
-import prismTheme from './themes/dnb-prism-theme'
+import dnbTheme from './themes/dnb-prism-theme'
 import {
   LiveProvider,
   LiveEditor,
   LiveError,
   LivePreview
-} from 'react-live'
-
+} from 'react-live-replacement'
 import Pre from './Pre'
 
-/* eslint-disable react/jsx-key */
+const prismStyle = css(dnbTheme)
+
 const CodeBlock = ({
-  language,
+  language = 'jsx',
   children: exampleCode,
   reactLive: isReactLive,
-  className
+  ...props
 }) => {
-  if (!language)
-    language = ((className || '').split(/-/) || [null, 'jsx'])[1]
+  if (!language) {
+    language =
+      (String(props && props.className).match(/language-(.*)$|\s/) ||
+        [])[1] || 'jsx'
+  }
 
-  if (isReactLive && language === 'jsx') {
+  if (((props && props.scope) || isReactLive) && language === 'jsx') {
+    const { caption, hideCode, hideExample, ...restProps } = props
     return (
       <LiveProvider
+        mountStylesheet={false}
+        css={prismStyle}
         code={
           typeof exampleCode === 'string'
             ? String(exampleCode).trim()
             : null
         }
-        // transformCode={
-        //   typeof exampleCode === 'function' ? exampleCode : null
-        // }
+        {...restProps}
       >
-        <LiveEditor />
-        <LiveError />
-        <LivePreview />
+        {!hideExample && (
+          <div className="example-box">
+            <LivePreview />
+          </div>
+        )}
+        {caption && <p className="example-caption">{caption}</p>}
+        {!hideCode && <LiveEditor language="jsx" />}
+        {!hideCode && <LiveError />}
       </LiveProvider>
     )
   } else {
     return (
-      <>
-        <Global
-          styles={css`
-            :root {
-              --color-indigo-medium: #6e6491;
-              --color-violet-medium: #a06eaf;
-            }
-          `}
-        />
-        <Highlight
-          {...defaultProps}
-          code={String(exampleCode).trim()}
-          language={language}
-          theme={prismTheme}
-        >
-          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+      <Highlight
+        {...defaultProps}
+        code={String(exampleCode).trim()}
+        language={language}
+        theme={{ styles: [] }} /* reset styles*/
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <div css={prismStyle}>
             <Pre className={className} css={style}>
               {cleanTokens(tokens).map((line, i) => (
+                /* eslint-disable react/jsx-key */
                 <div {...getLineProps({ line, key: i })}>
                   {line.map((token, key) => (
                     <span {...getTokenProps({ token, key })} />
                   ))}
                 </div>
               ))}
             </Pre>
-          )}
-        </Highlight>
-      </>
+          </div>
+        )}
+      </Highlight>
     )
   }
 }

packages/dnb-design-system-portal/src/shared/inlineTags/ComponentBox.js

@@ -0,0 +1,22 @@
+/**
+ * Inline Tag
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import CodeBlock from './CodeBlock'
+import { getComponents } from 'dnb-ui-lib/src/components'
+
+const ComponentBox = ({ children, ...rest }) => {
+  return (
+    <CodeBlock scope={getComponents()} {...rest}>
+      {children}
+    </CodeBlock>
+  )
+}
+ComponentBox.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default ComponentBox

packages/dnb-design-system-portal/src/shared/inlineTags/ExampleBox.js

@@ -0,0 +1,27 @@
+/**
+ * Inline Tag
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ExampleBox = ({ children, caption, ...rest }) => {
+  return (
+    <>
+      <div className="example-box" {...rest}>
+        {children}
+      </div>
+      {caption && <p className="example-caption">{caption}</p>}
+    </>
+  )
+}
+ExampleBox.propTypes = {
+  children: PropTypes.node.isRequired,
+  caption: PropTypes.string
+}
+ExampleBox.defaultProps = {
+  caption: null
+}
+
+export default ExampleBox

packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js

@@ -3,113 +3,115 @@
  *
  */
 
-const dnb_prism_theme = {
-  plain: {
-    color: 'var(--color-sea-green-4)',
-    // backgroundColor: '#011627'
-    // backgroundColor: 'var(--color-black-80)'
-    backgroundColor: '#222'
-  },
-  styles: [
-    {
-      types: ['changed'],
-      style: {
-        color: 'rgb(162, 191, 252)',
-        fontStyle: 'italic'
-      }
-    },
-    {
-      types: ['deleted'],
-      style: {
-        color: 'rgba(239, 83, 80, 0.56)',
-        fontStyle: 'italic'
-      }
-    },
-    {
-      types: ['inserted', 'attr-name'],
-      style: {
-        color: 'var(--color-summer-green)',
-        fontStyle: 'italic'
-      }
-    },
-    {
-      types: ['comment'],
-      style: {
-        color: 'var(--color-signal-yellow-30)',
-        fontStyle: 'italic'
-      }
-    },
-    {
-      types: ['string', 'url'],
-      style: {
-        color: 'var(--color-summer-green)'
-      }
-    },
-    {
-      types: ['variable', 'function-variable'],
-      style: {
-        color: 'var(--color-sea-green-4)'
-      }
-    },
-    // In CSS numbers and units are tide together. To show them nicer, use same color as plain
-    {
-      types: ['number'],
-      style: {
-        color: 'var(--color-sea-green-4)'
-      }
-    },
-    {
-      types: ['builtin', 'char', 'constant', 'function'],
-      style: {
-        color: 'var(--color-indigo-medium)'
-      }
-    },
-    {
-      // This was manually added after the auto-generation
-      // so that punctuations are not italicised
-      types: ['punctuation'],
-      style: {
-        color: 'var(--color-violet-medium)'
-      }
-    },
-    {
-      types: ['selector', 'doctype'],
-      style: {
-        color: 'var(--color-violet-medium)',
-        fontStyle: 'italic'
-      }
-    },
-    {
-      types: ['class-name'],
-      style: {
-        color: 'var(--color-signal-yellow)'
-      }
-    },
-    {
-      types: ['tag', 'operator', 'keyword'],
-      style: {
-        color: 'var(--color-mint-green)'
-      }
-    },
-    {
-      types: ['boolean'],
-      style: {
-        color: 'var(--color-cherry-red)'
-      }
-    },
-    {
-      types: ['property'],
-      style: {
-        color: 'rgb(128, 203, 196)'
-      }
-    },
-    {
-      types: ['namespace'],
-      style: {
-        color: 'rgb(178, 204, 214)'
-      }
-    }
-  ]
-}
-
-export default dnb_prism_theme
+const prismStyle = /* @css */ `
+  --color-violet-medium: #a06eaf;
+  --color-indigo-medium: #6e6491;
+
+  .prism-code {
+    display: block;
+    box-sizing: border-box;
+
+    padding: 1rem;
+    margin: 0;
+
+    background-color: #222;
+    border-radius: 8px;
+    color: var(--color-sea-green-4);
+
+    white-space: pre;
+    vertical-align: baseline;
+    outline: none;
+    text-shadow: none;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    word-wrap: normal;
+    word-break: normal;
+    text-align: left;
+    word-spacing: normal;
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+  }
+  .prism-code[contentEditable='true'] {
+    cursor: text;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    opacity: 0.8;
+    font-style: italic;
+    color: var(--color-signal-yellow-30);
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol {
+    color: var(--color-sea-green-4);
+  }
+  .token.tag {
+    color: var(--color-sea-green-alt);
+  }
+
+  .token.selector,
+  .token.class-name,/* custom */
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: var(--color-summer-green);
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: var(--color-mint-green);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: var(--color-mint-green);
+  }
+
+  .token.punctuation {
+    color: var(--color-violet-medium);
+  }
+
+  .namespace {
+    ${'' /* opacity: 0.7; */}
+    color: var(--color-indigo-medium);
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.deleted {
+    color: red;
+  }
+`
+
+export default prismStyle