Split component example (carbon-design-system#341)

* chore(ComponentExample): extract out vanilla instantiation code

This change extracts out instantiation/release code of vanilla
JavaScript library from `<ComponentExample>` and plain-HTML-specific
code from `<CodeExample>`. Doing so paves the cowpath toward better
integration of React live demo to those component.

Refs carbon-design-system#1936.

* fix(ComponentExample): remove unintentional change

* fix(ComponentExample): fix typo

* chore(ComponentExample): remove stale component name list

src/components/CodeExample/CodeExample.js

@@ -3,14 +3,23 @@ import PropTypes from 'prop-types';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import classnames from 'classnames';
 import ReactGA from 'react-ga';
-import Prism from 'prismjs';
+import { highlightAll } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-jsx';
 import { Copy20, ChevronDown16 } from '@carbon/icons-react';
 
 import './prism.css';
 
 class CodeExample extends Component {
   static propTypes = {
     htmlFile: PropTypes.string,
+    codeClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    codeClassName: 'language-html',
   };
 
   state = {
@@ -21,12 +30,12 @@ class CodeExample extends Component {
 
   componentDidMount = () => {
     if (this.codeBlock.offsetHeight > 190) {
-      this.setState({ showBtn: true });
+      this.setState({ showBtn: true }); // eslint-disable-line react/no-did-mount-set-state
     }
   };
 
   componentDidUpdate = () => {
-    Prism.highlightAll();
+    highlightAll();
   };
 
   handleCopy = () => {
@@ -48,7 +57,7 @@ class CodeExample extends Component {
   };
 
   render() {
-    const { htmlFile } = this.props;
+    const { htmlFile, codeClassName } = this.props;
     const copyBtnClass = classnames({
       'bx--btn--copy__feedback': true,
       'bx--btn--copy__feedback--displayed': this.state.copied,
@@ -81,7 +90,7 @@ class CodeExample extends Component {
           }}>
           <span className="code-title">Code:</span>
           <pre className="line-numbers">
-            <code className="language-html">{htmlFile}</code>
+            <code className={codeClassName}>{htmlFile}</code>
           </pre>
         </div>
         <CopyToClipboard text={htmlFile} onCopy={this.handleCopy}>

src/components/CodeExample/CodeExampleHTML.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CodeExample from './CodeExample';
+import getHTMLFile from '../../utils/getHTMLFile';
+
+const CodeExampleHTML = ({ component, variation, useLightVersion }) => {
+  const html = getHTMLFile({
+    component,
+    variation,
+    useLightVersion,
+  });
+  return <CodeExample htmlFile={html} codeClassName="language-html" />;
+};
+
+CodeExampleHTML.propTypes = {
+  /**
+   * The component name.
+   */
+  component: PropTypes.string,
+
+  /**
+   * The component variation name.
+   */
+  variation: PropTypes.string,
+
+  /**
+   * `true` to use the light version.
+   */
+  useLightVersion: PropTypes.bool,
+};
+
+export default CodeExampleHTML;

src/components/ComponentCode/ComponentCode.js

@@ -26,25 +26,13 @@ export default class ComponentCode extends React.Component {
       experimental,
     } = this.props;
 
-    let htmlFile;
-    try {
-      // eslint-disable-next-line import/no-dynamic-require, global-require
-      htmlFile = require(`carbon-components/html/${component}/${variation}.html`);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(
-        `Unable to import htmlFile at 'carbon-components/html/${component}/${variation}.html'`
-      );
-    }
-
     return (
       <div className="component-variation bx--row">
         <div className="bx--col-lg-12 bx--no-gutter">
           <ComponentExample
             codepenSlug={codepen}
             component={component}
             variation={variation}
-            htmlFile={htmlFile}
             hideViewFullRender={this.props.hideViewFullRender}
             hasLightVersion={hasLightVersion}
             hasReactVersion={hasReactVersion}