From 619e8f989d78300ce3df3af2561564b02fd639e2 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Mon, 21 Jan 2019 07:59:05 +0100
Subject: [PATCH] Enhance portal dnb theme and make code components for more
 flexibility

---
 .../src/shared/inlineTags/CodeBlock.js        |  73 +++---
 .../src/shared/inlineTags/ComponentBox.js     |  22 ++
 .../src/shared/inlineTags/ExampleBox.js       |  27 +++
 .../inlineTags/themes/dnb-prism-theme.js      | 222 +++++++++---------
 .../src/shared/parts/PortalStyle.js           |  28 ++-
 5 files changed, 213 insertions(+), 159 deletions(-)
 create mode 100644 packages/dnb-design-system-portal/src/shared/inlineTags/ComponentBox.js
 create mode 100644 packages/dnb-design-system-portal/src/shared/inlineTags/ExampleBox.js

diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
index 37acf8dd091..9970af03382 100644
--- a/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
+++ b/packages/dnb-design-system-portal/src/shared/inlineTags/CodeBlock.js
@@ -4,66 +4,67 @@
  */
 
 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 })} />
@@ -71,9 +72,9 @@ const CodeBlock = ({
                 </div>
               ))}
             </Pre>
-          )}
-        </Highlight>
-      </>
+          </div>
+        )}
+      </Highlight>
     )
   }
 }
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/ComponentBox.js b/packages/dnb-design-system-portal/src/shared/inlineTags/ComponentBox.js
new file mode 100644
index 00000000000..6acc282de4f
--- /dev/null
+++ b/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
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/ExampleBox.js b/packages/dnb-design-system-portal/src/shared/inlineTags/ExampleBox.js
new file mode 100644
index 00000000000..0626e535d64
--- /dev/null
+++ b/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
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js b/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js
index c0f17472a47..9fa04da042c 100644
--- a/packages/dnb-design-system-portal/src/shared/inlineTags/themes/dnb-prism-theme.js
+++ b/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
diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
index ecb6d5d9e3d..53a7b9de219 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.js
@@ -195,7 +195,7 @@ export default css`
     }
   }
 
-  .example-box {
+  div.example-box {
     margin-bottom: 2rem;
     padding: 2rem;
 
@@ -212,6 +212,20 @@ export default css`
       align-items: center;
     }
   }
+  p.example-caption {
+    padding-top: 0.9375rem;
+    margin-top: 2rem;
+
+    font-size: 1em;
+    line-height: 1.5rem;
+    font-style: italic;
+    text-align: center;
+
+    border-top: solid 1px #c4c4c4;
+  }
+  div.example-box + p.example-caption {
+    margin-top: -2rem;
+  }
 
   .lh-12 {
     line-height: 0.75rem;
@@ -237,18 +251,6 @@ export default css`
     line-height: 2rem;
   }
 
-  .example-caption {
-    padding-top: 0.9375rem;
-    margin-top: 2rem;
-
-    font-size: 1em;
-    line-height: 1.5rem;
-    font-style: italic;
-    text-align: center;
-
-    border-top: solid 1px #c4c4c4;
-  }
-
   /*
   *
   * Helper Classes - some of them need