feat: add code component (moved from addons)

packages/gatsby-theme-carbon/src/components/Code/Code.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CodeSnippet } from 'carbon-components-react';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-scss';
+import { CopyToClipboard } from 'react-copy-to-clipboard/lib/Component';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+
+export default class Code extends React.Component {
+  static propTypes = {
+    children: PropTypes.array,
+  };
+
+  state = {
+    copied: false,
+    multi: true,
+  };
+
+  componentDidMount() {
+    Prism.highlightAll();
+    if (this.codeRef) {
+      if (this.codeRef.clientHeight > 20) {
+        this.setState({ multi: true });
+      } else {
+        this.setState({ multi: false });
+      }
+    }
+  }
+
+  componentDidUpdate() {
+    Prism.highlightAll();
+  }
+
+  render() {
+    const { children } = this.props;
+    const type = this.state.multi ? 'multi' : 'single';
+    return (
+      <div className={`${prefix}--row`}>
+        <div className={`${prefix}--col-lg-8 ${prefix}--no-gutter`}>
+          <div className={`${prefix}--snippet--website`}>
+            <CopyToClipboard onCopy={() => this.setState({ copied: true })}>
+              <CodeSnippet type={type}>
+                <div ref={element => (this.codeRef = element)}>{children}</div>
+              </CodeSnippet>
+            </CopyToClipboard>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

packages/gatsby-theme-carbon/src/components/Code/_code.scss

@@ -0,0 +1,186 @@
+.#{$prefix}--snippet--website {
+  margin-bottom: $spacing-06;
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--snippet--single {
+  background: $ui-05;
+  color: $inverse-01;
+  max-width: 100%;
+}
+
+.#{$prefix}--snippet--website .code-snippet .#{$prefix}--snippet--single {
+  max-width: 47.5rem;
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--snippet--single::after {
+  background-image: linear-gradient(to right, rgba($ui-05, 0), rgba($ui-05, 1));
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--snippet--multi {
+  background: $ui-05;
+  color: $inverse-01;
+}
+
+.#{$prefix}--snippet--website
+  .#{$prefix}--snippet--multi
+  .#{$prefix}--snippet-container
+  pre::after {
+  background-image: linear-gradient(to right, rgba($ui-05, 0), rgba($ui-05, 1));
+}
+
+.#{$prefix}--snippet--website
+  .#{$prefix}--snippet--multi
+  .#{$prefix}--snippet-container {
+  overflow: auto;
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--snippet-button {
+  background: $ui-05;
+  transition: background $transition--base;
+
+  &:hover {
+    background: #353535;
+  }
+}
+
+.#{$prefix}--snippet--website
+  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+  color: $carbon--gray-10;
+  background: $carbon--gray-100;
+
+  &:hover {
+    background: #353535;
+  }
+
+  &:focus::before {
+    border-color: $inverse-02;
+  }
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--snippet__icon {
+  fill: $icon-03;
+}
+
+.#{$prefix}--snippet--website
+  .#{$prefix}--snippet--multi
+  .#{$prefix}--snippet-container {
+  min-height: auto;
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--icon-chevron--down {
+  fill: $icon-03;
+}
+
+.#{$prefix}--snippet--website .#{$prefix}--snippet {
+  margin: 0 0 $spacing-06 0;
+  background: $ui-05;
+  color: $inverse-01;
+}
+
+.#{$prefix}--snippet--website pre div code[class*='language-'] {
+  white-space: pre;
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+  font-size: rem(14px) !important;
+  line-height: rem(20px) !important;
+  color: #fff !important;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background: $ui-05;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.token {
+  white-space: nowrap;
+}
+
+.token.comment {
+  color: #bebebe !important;
+}
+
+.token.tag {
+  color: #6ea6ff !important;
+}
+
+.token.string {
+  color: #fa75a6 !important;
+}
+
+.token.attr-name,
+.token.property,
+.token.function {
+  color: #92eeee !important;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.selector {
+  color: #bb8eff !important;
+}
+
+.token.variable {
+  color: #ffffff !important;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #c22dd5;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #c94922;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: 0.4em solid #c94922;
+  outline-offset: 0.4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+  border-right-color: #dfe3e6;
+}
+
+.line-numbers-rows > span:before {
+  color: #687985;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight {
+  background: rgba(107, 115, 148, 0.2);
+  background: -webkit-linear-gradient(
+    left,
+    rgba(107, 115, 148, 0.2) 70%,
+    rgba(107, 115, 148, 0)
+  );
+  background: linear-gradient(
+    to right,
+    rgba(107, 115, 148, 0.2) 70%,
+    rgba(107, 115, 148, 0)
+  );
+}

packages/gatsby-theme-carbon/src/components/Code/index.js

@@ -0,0 +1,2 @@
+import WebsiteCodeSnippet from './WebsiteCodeSnippet';
+export default WebsiteCodeSnippet;

packages/gatsby-theme-carbon/src/components/MDXProvider.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { MDXProvider as Provider } from '@mdx-js/react';
-import { WebsiteCodeSnippet } from '@carbon/addons-website';
 import { P, H1, H2, H3, H4, H5, Ul, Ol } from './markdown';
 import PageTable from './PageTable';
+import Code from './Code';
 
 const components = {
   wrapper: function Wrapper({ children, ...props }) {
@@ -16,7 +16,7 @@ const components = {
   p: P,
   ol: Ol,
   ul: Ul,
-  pre: WebsiteCodeSnippet,
+  pre: Code,
   table: PageTable,
 };
 

packages/gatsby-theme-carbon/src/styles/index.scss

@@ -36,7 +36,6 @@ $prefix: 'bx';
 @import '~@carbon/addons-website/scss/components/website-header-nav';
 @import '~@carbon/addons-website/scss/components/website-side-nav';
 @import '~@carbon/addons-website/scss/components/website-back-to-top-btn';
-@import '~@carbon/addons-website/scss/components/website-code-snippet';
 
 $font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 
@@ -61,6 +60,7 @@ $font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 @import '../components/ArticleCard/article-card.scss';
 @import '../components/Aside/aside.scss';
 @import '../components/Video/video.scss';
+@import '../components/Code/code.scss';
 
 //---------------------------------------
 // Included last to ensure that class