feat: Create comment component for markdown pages

 - this component does not render in the UI
 - this component is not translated

scripts/actions/__tests__/__snapshots__/serialize-mdx.test.js.snap

@@ -407,6 +407,15 @@ exports[`serializes Link to html 1`] = `
 "
 `;
 
+exports[`serializes MDXComment to html with "notranslate" class 1`] = `
+"
+<div data-type=\\"component\\" data-component=\\"WARNING\\" class=\\"notranslate\\">
+  <p>This is a note to future authors about the MDX content.</p>
+  <p>It does not render in the UI</p>
+</div>
+"
+`;
+
 exports[`serializes Side components to html 1`] = `
 "
 <div data-type=\\"component\\" data-component=\\"Side\\">

scripts/actions/__tests__/deserialize-html.test.js

@@ -298,3 +298,17 @@ test('deserializes InlineSignup component', async () => {
   const mdx = await deserializeHTML(await serializeMDX(input));
   expect(mdx).toEqual(input);
 });
+
+test('deserializes MDXComment component', async () => {
+  const input = `
+<WARNING>
+  This is a note to future authors about the MDX content.
+
+  It does not render in the UI
+</WARNING>
+    `;
+
+  const mdx = await deserializeHTML(await serializeMDX(input));
+
+  expect(mdx).toEqual(input.trim());
+});

scripts/actions/__tests__/serialize-mdx.test.js

@@ -398,3 +398,15 @@ test('serialize InlineSignup component', async () => {
   const html = await serializeMDX(mdx);
   expect(html).toMatchSnapshot();
 });
+
+test('serializes MDXComment to html with "notranslate" class', async () => {
+  const html = await serializeMDX(`
+<WARNING>
+  This is a note to future authors about the MDX content.
+
+  It does not render in the UI
+</WARNING>
+  `);
+
+  expect(html).toMatchSnapshot();
+});

scripts/actions/utils/handlers.js

@@ -119,6 +119,14 @@ module.exports = {
         wrapChildren: false,
       }),
   },
+  WARNING: {
+    deserialize: deserializeComponent,
+    serialize: (h, node) =>
+      serializeComponent(h, node, {
+        classNames: 'notranslate',
+        wrapChildren: false,
+      }),
+  },
   ExternalLink: {
     deserialize: deserializeComponent,
     serialize: serializeComponent,

src/components/MDXComment.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+
+// This component is not rendered in the UI and is not translated
+const MDXComment = ({ children }) => <Comment>{children}</Comment>;
+
+MDXComment.propTypes = {
+  children: PropTypes.node,
+};
+
+const Comment = styled.div`
+  display: none;
+`;
+
+export default MDXComment;

src/components/MDXContainer.js

@@ -20,6 +20,7 @@ import InlinePopover from './InlinePopover';
 import InstallFeedback from './InstallFeedback';
 import MDXButton from './MDXButton';
 import MDXButtonGroup from './MDXButtonGroup';
+import MDXComment from './MDXComment';
 import MDXTechTileGrid from './MDXTechTileGrid';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -90,6 +91,7 @@ const defaultComponents = {
   ButtonLink: (props) => <MDXButton as={Link} {...props} />,
   ButtonGroup: MDXButtonGroup,
   DoNotTranslate: ({ children }) => <>{children}</>,
+  WARNING: MDXComment,
   Tabs: Tabs,
   TabsBar: Tabs.Bar,
   TabsBarItem: Tabs.BarItem,