EuiCode now consumes EuiCodeBlock and can highlight text

* `EuiCode` now consumes `EuiCodeBlock`.
* `EuiCode` now can carry syntax highlighting. Further, the default coloring was changed.
* Defaults to light theme

CHANGELOG.md

@@ -1,6 +1,8 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-- Changed the hover states of `EuiButtonEmpty` to look more like links.
+- Changed the hover states of `EuiButtonEmpty` to look more like links. [#135](https://github.com/elastic/eui/pull/135)
+- Added `transparentBackground` prop to `EuiCodeBlock`. Made light theme the default.
+`EuiCode` now just wraps `EuiCodeBlock` so you can do inline highlighting. [#138](https://github.com/elastic/eui/pull/138)
 
 # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release
 

src-docs/src/views/code/code.js

@@ -5,8 +5,22 @@ import {
   EuiText,
 } from '../../../../src/components';
 
+const htmlCode = `<!--I'm an example of HTML-->
+<div>
+  asdf
+</div>
+`;
+
 export default () => (
   <EuiText>
-    <p>Sometimes you need to highlight <EuiCode>code</EuiCode> like this.</p>
+    <p>
+      Sometimes you need to emphasize <EuiCode>code</EuiCode> like this.
+    </p>
+    <p>
+      You can also pass a language in like <EuiCode language="html">{htmlCode.trim()}</EuiCode>.
+    </p>
+    <p>
+      Make the background transparent like this <EuiCode language="html" transparentBackground>{htmlCode.trim()}</EuiCode>.
+    </p>
   </EuiText>
 );

src-docs/src/views/code/code_block.js

@@ -21,8 +21,11 @@ export default () => (
 
     <EuiSpacer />
 
-    <EuiCodeBlock language="js" fontSize="l" paddingSize="s" color="light" overflowHeight={300}>
+    <EuiCodeBlock language="js" fontSize="l" paddingSize="s" color="dark" overflowHeight={300}>
       {jsCode}
     </EuiCodeBlock>
+
+    <EuiSpacer />
+
   </div>
 );

src-docs/src/views/code/code_example.js

@@ -33,7 +33,8 @@ export default props => (
       }]}
       text={
         <p>
-          Description needed: how to use the <EuiCode>Code</EuiCode> component.
+          <EuiCode>Code</EuiCode> is for making inline code snippets that can work
+          within or next to bodies of text.
         </p>
       }
       demo={
@@ -62,6 +63,8 @@ export default props => (
             <li><EuiCode>paddingSize</EuiCode> accepts "s" / "m" / "l" (default).</li>
             <li><EuiCode>fontSize</EuiCode> accepts "s" (default) / "m" / "l".</li>
             <li><EuiCode>overflowHeight</EuiCode> accepts a number. By default it is not set.</li>
+            <li><EuiCode>transparentBackground</EuiCode> set to <EuiCode>false</EuiCode> will remove the background.</li>
+            <li><EuiCode>inline</EuiCode> will display the passed code in an inline format. Will also remove any margins set.</li>
           </ul>
         </div>
       }

src/components/code/__snapshots__/code.test.js.snap

@@ -1,9 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiCode is rendered 1`] = `
-<code
-  aria-label="aria-label"
-  class="euiCode testClass1 testClass2"
-  data-test-subj="test subject string"
-/>
+<span
+  class="euiCodeBlock euiCodeBlock--light euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--inline testClass1 testClass2"
+  style="height:auto"
+>
+  <span
+    class="euiCodeBlock__pre"
+  >
+    <code
+      aria-label="aria-label"
+      class="euiCodeBlock__code"
+      data-test-subj="test subject string"
+    />
+  </span>
+</span>
 `;

src/components/code/_code_block.scss

@@ -1,7 +1,9 @@
 .euiCodeBlock {
+  display: block;
   overflow: auto;
 
   .euiCodeBlock__pre {
+    display: block;
     white-space: pre-wrap;
   }
 
@@ -35,4 +37,26 @@
   &.euiCodeBlock--paddingLarge {
     padding: $euiSizeL;
   }
+
+  /**
+  ** 1. Size the code against the text its embedded within.
+  **/
+  &.euiCodeBlock--inline {
+    vertical-align: middle;
+    display: inline-block;
+    white-space: pre;
+    color: $euiTextColor;
+    font-size: 75%; // 1
+    padding:  0 $euiSizeXS;
+    background: $euiColorLightestShade;
+
+    .euiCodeBlock__pre, .euiCodeBlock__code {
+      display: inline;
+      white-space: normal;
+    }
+  }
+
+  &.euiCodeBlock--transparentBackground {
+    background: transparent;
+  }
 }

src/components/code/_code_block_light.scss

@@ -1,3 +1,4 @@
+
 .euiCodeBlock--light {
   background: #F5F5F5;
   color: #3F3F3F;

src/components/code/_index.scss

@@ -1,4 +1,3 @@
-@import 'code';
 @import 'code_block';
 @import 'code_block_dark';
 @import 'code_block_light';

src/components/code/code.js

@@ -2,20 +2,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import {
+  EuiCodeBlock,
+} from '../../components';
+
 export const EuiCode = ({
   children,
   className,
   ...rest
 }) => {
-  const classes = classNames('euiCode', className);
+  const classes = classNames('euiCodeBlock--inline', className);
 
   return (
-    <code
+    <EuiCodeBlock
       className={classes}
       {...rest}
     >
       {children}
-    </code>
+    </EuiCodeBlock>
   );
 };
 

src/components/code/code_block.js

@@ -51,11 +51,12 @@ export class EuiCodeBlock extends Component {
     const {
       children,
       className,
-      language,
       color,
       fontSize,
-      paddingSize,
+      language,
       overflowHeight,
+      paddingSize,
+      transparentBackground,
       ...otherProps
     } = this.props;
 
@@ -64,6 +65,9 @@ export class EuiCodeBlock extends Component {
       colorToClassNameMap[color],
       fontSizeToClassNameMap[fontSize],
       paddingSizeToClassNameMap[paddingSize],
+      {
+        'euiCodeBlock--transparentBackground': transparentBackground,
+      },
       className
     );
 
@@ -76,20 +80,20 @@ export class EuiCodeBlock extends Component {
     }
 
     return (
-      <div
+      <span
         className={classes}
         style={{ height: optionalOverflowHeight }}
       >
-        <pre className="euiCodeBlock__pre">
+        <span className="euiCodeBlock__pre">
           <code
             ref={ref => { this.code = ref; }}
             className={codeClasses}
             {...otherProps}
           >
             {children}
           </code>
-        </pre>
-      </div>
+        </span>
+      </span>
     );
   }
 
@@ -106,10 +110,12 @@ EuiCodeBlock.propTypes = {
   color: PropTypes.string,
   paddingSize: PropTypes.oneOf(PADDING_SIZES),
   fontSize: PropTypes.oneOf(FONT_SIZES),
+  transparentBackground: PropTypes.bool,
 };
 
 EuiCodeBlock.defaultProps = {
-  color: 'dark',
+  color: 'light',
+  transparentBackground: false,
   paddingSize: 'l',
   fontSize: 's',
 };