Autolink headings in mdx only up to h3. Added heading sizes (in px) for h4,h5,h6 in mdx headings

packages/website/ts/components/docs/mdx/headings.tsx

@@ -54,18 +54,21 @@ const H3 = styled(MDXHeading).attrs({
 })``;
 
 const H4 = styled(MDXHeading).attrs({
+    size: 18,
     asElement: 'h4',
     fontWeight: '300',
     marginBottom: '1rem',
 })``;
 
 const H5 = styled(MDXHeading).attrs({
+    size: 16,
     asElement: 'h5',
     fontWeight: '300',
     marginBottom: '1rem',
 })``;
 
 const H6 = styled(MDXHeading).attrs({
+    size: 14,
     asElement: 'h6',
     fontWeight: '300',
     marginBottom: '1rem',

packages/website/webpack/remark_autolink_headings.js

@@ -1,6 +1,8 @@
 const visit = require('unist-util-visit');
 const extend = require('extend');
 
+const MAX_HEADING_DEPTH = 3;
+
 const content = {
     type: 'element',
     tagName: 'i',
@@ -18,10 +20,12 @@ function plugin() {
 }
 
 function transform(tree) {
-    visit(tree, 'heading', visitor);
+    for (let depth = MAX_HEADING_DEPTH; depth > 0; depth--) {
+        visit(tree, node => node.type === 'heading' && node.depth === depth, autolink);
+    }
 }
 
-function visitor(node) {
+function autolink(node) {
     const { data } = node;
     const id = data && data.hProperties && data.hProperties.id;
     const url = '#' + id;