From dd47540d399c2de4050a53fc0f1cc5717f86a07f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 12 Feb 2020 15:41:56 +0100
Subject: [PATCH] Merge pull request #8897 from fraincs/#8504

FIX #8504 - HTML elements get their classes dropped in MDX
---
 .../src/stories/Classes.stories.mdx           | 22 ++++++++++
 lib/components/src/html.tsx                   | 18 +--------
 .../src/typography/DocumentFormatting.tsx     | 40 +++++++++++++++++++
 3 files changed, 64 insertions(+), 16 deletions(-)
 create mode 100644 examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx

diff --git a/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx b/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
new file mode 100644
index 000000000000..80039504ba9b
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Classes Stripped" />
+
+# Preview
+
+<style>
+  {`
+    .a-custom-class {
+      border: 10px solid hotpink;
+    }
+    .a-custom-classname {
+      border: 10px solid blue;
+    }
+  `}
+</style>
+
+<div class="a-custom-class">
+  <div className="a-custom-classname">
+    This box should have BOTH a pink and blue border
+  </div>
+</div>
diff --git a/lib/components/src/html.tsx b/lib/components/src/html.tsx
index 9b45fa7c582f..0b1e5f9de012 100644
--- a/lib/components/src/html.tsx
+++ b/lib/components/src/html.tsx
@@ -1,19 +1,5 @@
-import * as React from 'react';
-import * as rawComponents from './typography/DocumentFormatting';
+import { components as rawComponents } from './typography/DocumentFormatting';
 
 export * from './typography/DocumentFormatting';
 
-export const components = Object.entries(rawComponents).reduce(
-  (acc, [k, V]) => ({
-    ...acc,
-    [k.toLowerCase()]: ({ className, ...rest }: { className: string }) => {
-      return (
-        <V
-          {...rest}
-          className={`sbdocs sbdocs-${k.toLowerCase()}${className ? ` ${className}` : ''}`}
-        />
-      );
-    },
-  }),
-  {}
-);
+export { rawComponents as components };
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index 6c136299e283..777c4b38c187 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -341,3 +341,43 @@ export const TT = styled.title<{}>(codeCommon);
  */
 
 export const ResetWrapper = styled.div<{}>(withReset);
+
+const nameSpaceClassNames = ({ ...props }, key: string) => {
+  const classes = [props.class, props.className];
+  // eslint-disable-next-line no-param-reassign
+  delete props.class;
+
+  // eslint-disable-next-line no-param-reassign
+  props.className = ['sbdocs', `sbdocs-${key}`, ...classes].filter(Boolean).join(' ');
+
+  return props;
+};
+
+export const components = {
+  h1: (props => <H1 {...nameSpaceClassNames(props, 'h1')} />) as typeof H1,
+  h2: (props => <H2 {...nameSpaceClassNames(props, 'h2')} />) as typeof H2,
+  h3: (props => <H3 {...nameSpaceClassNames(props, 'h3')} />) as typeof H3,
+  h4: (props => <H4 {...nameSpaceClassNames(props, 'h4')} />) as typeof H4,
+  h5: (props => <H5 {...nameSpaceClassNames(props, 'h5')} />) as typeof H5,
+  h6: (props => <H6 {...nameSpaceClassNames(props, 'h6')} />) as typeof H6,
+  pre: (props => <Pre {...nameSpaceClassNames(props, 'pre')} />) as typeof Pre,
+  a: (props => <A {...nameSpaceClassNames(props, 'a')} />) as typeof A,
+  hr: (props => <HR {...nameSpaceClassNames(props, 'hr')} />) as typeof HR,
+  dl: (props => <DL {...nameSpaceClassNames(props, 'dl')} />) as typeof DL,
+  blockquote: (props => (
+    <Blockquote {...nameSpaceClassNames(props, 'blockquote')} />
+  )) as typeof Blockquote,
+  table: (props => <Table {...nameSpaceClassNames(props, 'table')} />) as typeof Table,
+  img: (props => <Img {...nameSpaceClassNames(props, 'img')} />) as typeof Img,
+  div: (props => <Div {...nameSpaceClassNames(props, 'div')} />) as typeof Div,
+  span: (props => <Span {...nameSpaceClassNames(props, 'span')} />) as typeof Span,
+  li: (props => <LI {...nameSpaceClassNames(props, 'li')} />) as typeof LI,
+  ul: (props => <UL {...nameSpaceClassNames(props, 'ul')} />) as typeof UL,
+  ol: (props => <OL {...nameSpaceClassNames(props, 'ol')} />) as typeof OL,
+  p: (props => <P {...nameSpaceClassNames(props, 'p')} />) as typeof P,
+  code: (props => <Code {...nameSpaceClassNames(props, 'code')} />) as typeof Code,
+  tt: (props => <TT {...nameSpaceClassNames(props, 'tt')} />) as typeof TT,
+  resetwrapper: (props => (
+    <ResetWrapper {...nameSpaceClassNames(props, 'resetwrapper')} />
+  )) as typeof ResetWrapper,
+};