tabbed code MD component

.eslintrc.json

@@ -5,6 +5,7 @@
     "react/prefer-stateless-function": "off",
     "react/prop-types": "off",
     "react/no-danger": "off",
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
     "jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ] } ]
   },
   "settings": {

content/docs/for-developers/custom-slug.md

@@ -3,6 +3,48 @@ title: "custom elements"
 category: "sending-email"
 ---
 
+<code-group langs="PHP,Python,JavaScript">
+
+```php
+  // Create array containing abbreviations of days of week.
+  $daysOfWeek = array('S','M','T','W','T','F','S');
+
+  // What is the first day of the month in question?
+  $firstDayOfMonth = mktime(0,0,0,$month,1,$year);
+
+  // How many days does this month contain?
+```
+
+```python
+  static int
+  _is_legal_capsule(PyCapsule *capsule, const char *invalid_capsule)
+  {
+      if (!capsule || !PyCapsule_CheckExact(capsule) || capsule->pointer == NULL) {
+          PyErr_SetString(PyExc_ValueError, invalid_capsule);
+          return 0;
+      }
+      return 1;
+  }
+```
+
+```javascript
+  const cat = {
+    id: `${i}`,
+    slug: category,
+    parent: '__SOURCE__',
+    children: [],
+    internal: {
+      type: 'forDeveloperCategories',
+    },
+  };
+  // Get content digest of node. (Required field)
+  const contentDigest = crypto
+    .createHash('md5')
+    .update(JSON.stringify(cat))
+    .digest('hex');
+```
+
+</code-group>
 
 ## Headers
 
@@ -164,7 +206,7 @@ Some text to show that the reference links can follow later.
 
 ### Images
 
-<code-group>
+
 
 ```php
   // Create array containing abbreviations of days of week.
@@ -204,7 +246,7 @@ Some text to show that the reference links can follow later.
     .update(JSON.stringify(cat))
     .digest('hex');
 ```
-</code-group>
+
 
 Here's our logo (hover to see the title text):
 

plugins/sendgrid-remark-headers/index.js

@@ -45,3 +45,4 @@ module.exports = ({ markdownAST }) => {
 
   return markdownAST;
 };
+

src/componentsMarkdown/CodeGroup.jsx

@@ -5,46 +5,61 @@ export default class CodeGroup extends React.Component {
   constructor(props) {
     super(props);
 
+    this.toggleLang = this.toggleLang.bind(this);
+    this.langs = this.props.langs.split(',');
+
     this.state = {
-      currentTab: false,
+      currentTab: this.langs[0].toLowerCase(),
     };
   }
 
-  getLangs() {
-    const langs = [];
+  toggleLang(e) {
+    this.setState({
+      currentTab: e.target.dataset.lang,
+    });
+  }
 
-    _.forEach(this.props.children, (val) => {
-      if (_.isObject(val)) {
-        _.forEach(val.props.children, (subEl) => {
-          if (_.isObject(subEl)) {
-            langs.push(subEl.props.className.replace('language-', ''));
-          }
-        });
-      }
+  renderTabs() {
+    const { langs } = this;
+    const { currentTab } = this.state;
+
+    const tabs = langs.map((lang) => {
+      const isActive = lang.toLowerCase() === currentTab ? 'is-active' : null;
+      const classes = `tab ${isActive}`;
+
+      return <li key={lang} className={classes} data-lang={lang.toLowerCase()} onClick={this.toggleLang} onKeyDown={this.handleClick} role="button">{lang}</li>;
     });
 
-    return langs;
+    return tabs;
   }
 
   renderCodeBlocks() {
+    const { langs } = this;
+    const { currentTab } = this.state;
     // Remove empty strings from array
     const codeBlocks = this.props.children.filter(block => _.isObject(block));
 
     // return code blocks wrapped parent element
-    return codeBlocks.map(block => <div className="tabbed-code_block">{block}</div>);
-  }
+    return codeBlocks.map((block, i) => {
+      const lang = langs[i].toLowerCase();
+      let classes = `tabbed-code__block ${lang}`;
 
-  render() {
-    const langs = this.getLangs();
+      if (lang === currentTab) {
+        classes = classes.concat(' show');
+      }
 
+      return <div key={block.key} className={classes} >{block}</div>;
+    });
+  }
 
+  render() {
     return (
-
       <div className="tabbed-code">
-        {/* {langs.map(lang => <span claName="tabbed-code_tab">{lang}</span>)} */}
-        {/* {this.renderCodeBlocks()} */}
+        <ul className="tab-wrapper is-editor">
+          {this.renderTabs()}
+        </ul>
+        {this.renderCodeBlocks()}
       </div>
-
     );
   }
 }

src/scss/components/_tabs.scss

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: flex-start;
   border-bottom: 1px solid $slate-10;
+  padding-left: 0;
 
   &.is-centered {
     justify-content: center;

src/templates/doc.scss

@@ -73,3 +73,15 @@ $aside-width: 300px;
 .callout--alert {
   border-left: 4px solid $alert-danger-text;
 }
+
+.tabbed-code__block {
+  display: none;
+}
+
+.tabbed-code__block.show {
+  display: block;
+}
+
+.tabbed-code .tab {
+  flex: 1;
+}