feat: Create an MDX component to render MDX content with default mapp…

…ed components

packages/gatsby-theme-newrelic/index.js

@@ -17,6 +17,7 @@ export { default as Layout } from './src/components/Layout';
 export { default as Link } from './src/components/Link';
 export { default as Logo } from './src/components/Logo';
 export { default as MarkdownContainer } from './src/components/MarkdownContainer';
+export { default as MDX } from './src/components/MDX';
 export { default as MDXCallout } from './src/components/MDXCallout';
 export { default as MDXCodeBlock } from './src/components/MDXCodeBlock';
 export { default as MDXCollapserGroup } from './src/components/MDXCollapserGroup';

packages/gatsby-theme-newrelic/src/components/MDX.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MDXRenderer } from 'gatsby-plugin-mdx';
+import { MDXProvider } from '@mdx-js/react';
+import Button from './Button';
+import MDXCallout from './MDXCallout';
+import Collapser from './Collapser';
+import Icon from './Icon';
+import InlineCode from './InlineCode';
+import Link from './Link';
+import MDXCodeBlock from './MDXCodeBlock';
+import MDXCollapserGroup from './MDXCollapserGroup';
+import MDXLink from './MDXLink';
+import MDXTable from './MDXTable';
+import MDXVideo from './MDXVideo';
+
+const defaultComponents = {
+  a: MDXLink,
+  code: MDXCodeBlock,
+  pre: (props) => props.children,
+  Button,
+  ButtonLink: (props) => <Button {...props} as={Link} />,
+  Callout: MDXCallout,
+  Collapser,
+  CollapserGroup: MDXCollapserGroup,
+  Icon,
+  InlineCode,
+  Link,
+  table: MDXTable,
+  Video: MDXVideo,
+};
+
+const MDX = ({ body, components }) => {
+  return (
+    <MDXProvider components={{ ...defaultComponents, ...components }}>
+      <MDXRenderer>{body}</MDXRenderer>
+    </MDXProvider>
+  );
+};
+
+MDX.propTypes = {
+  body: PropTypes.node,
+  components: PropTypes.object,
+};
+
+export default MDX;