Make sure code blocks have the correct styling when in sidebar

Author: Dom Harrington

packages/api-explorer-ui/__tests__/block-types/Content.test.jsx

@@ -36,13 +36,58 @@ const body = `
 `;
 
 test('should output only left content if `isThreeColumn=left`', () => {
-  const content = mount(<Content body={body} isThreeColumn='left' />);
+  const content = mount(<Content body={body} isThreeColumn="left" />);
 
   expect(content.find('.magic-block-textarea').length).toBe(1);
 });
 
 test('should output only right content if `isThreeColumn=right`', () => {
-  const content = mount(<Content body={body} isThreeColumn='right' />);
+  const content = mount(<Content body={body} isThreeColumn="right" />);
 
   expect(content.find('.magic-block-api-header').length).toBe(1);
 });
+
+test('should make code not-dark if it is in the left column', () => {
+  const content = mount(
+    <Content
+      body={`
+        [block:code]
+        {
+          "codes": [
+            {
+              "code": "var a = 1;",
+              "language": "javascript"
+            }
+          ]
+        }
+        [/block]
+      `}
+      isThreeColumn="left"
+    />,
+  );
+
+  expect(content.html()).toContain('cm-s-neo');
+});
+
+test('should make code `dark` if it is in right column', () => {
+  const content = mount(
+    <Content
+      body={`
+        [block:code]
+        {
+          "codes": [
+            {
+              "code": "var a = 1;",
+              "language": "javascript"
+            }
+          ],
+          "sidebar": true
+        }
+        [/block]
+      `}
+      isThreeColumn="right"
+    />,
+  );
+
+  expect(content.html()).toContain('cm-s-tomorrow-night');
+});

packages/api-explorer-ui/src/block-types/Code.jsx

@@ -15,7 +15,7 @@ class BlockCode extends React.Component {
     this.setState({ activeTab: i });
   }
   render() {
-    const { block, opts = {} } = this.props;
+    const { block, opts = {}, dark } = this.props;
     const codes = Array.isArray(block.data.codes) ? block.data.codes : [];
 
     return (
@@ -64,7 +64,7 @@ class BlockCode extends React.Component {
                   <code
                     // eslint-disable-next-line
                     dangerouslySetInnerHTML={{
-                      __html: syntaxHighlighter(code.code, code.language, opts.dark),
+                      __html: syntaxHighlighter(code.code, code.language, dark),
                     }}
                   />
                 }

packages/api-explorer-ui/src/block-types/Content.jsx

@@ -78,7 +78,13 @@ const Content = props => {
     );
   }
 
-  return <Loop content={isThreeColumn === 'left' ? left : right} flags={props.flags} />;
+  return (
+    <Loop
+      content={isThreeColumn === 'left' ? left : right}
+      flags={props.flags}
+      column={isThreeColumn}
+    />
+  );
 };
 
 Loop.propTypes = {
@@ -97,7 +103,7 @@ Loop.defaultProps = {
 };
 
 Content.propTypes = {
-  isThreeColumn: PropTypes.oneOfType([ PropTypes.bool, PropTypes.string ]),
+  isThreeColumn: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   body: PropTypes.string,
   flags: PropTypes.shape({}),
 };