Addon-docs: DocsPage Heading and Subheading anchor links

addons/docs/src/blocks/Heading.tsx

@@ -1,7 +1,20 @@
 import React, { FunctionComponent } from 'react';
 import { H2 } from '@storybook/components/html';
+import { HeaderMdx } from './mdx';
 
-interface HeadingProps {
+export interface HeadingProps {
   children: JSX.Element | string;
+  disableAnchor?: boolean;
 }
-export const Heading: FunctionComponent<HeadingProps> = ({ children }) => <H2>{children}</H2>;
+
+export const Heading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
+  if (disableAnchor || typeof children !== 'string') {
+    return <H2>{children}</H2>;
+  }
+  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  return (
+    <HeaderMdx as="h2" id={tagID}>
+      {children}
+    </HeaderMdx>
+  );
+};

addons/docs/src/blocks/Subheading.tsx

@@ -1,7 +1,16 @@
 import React, { FunctionComponent } from 'react';
 import { H3 } from '@storybook/components/html';
+import { HeaderMdx } from './mdx';
+import { HeadingProps } from './Heading';
 
-interface SubheadingProps {
-  children: JSX.Element | string;
-}
-export const Subheading: FunctionComponent<SubheadingProps> = ({ children }) => <H3>{children}</H3>;
+export const Subheading: FunctionComponent<HeadingProps> = ({ children, disableAnchor }) => {
+  if (disableAnchor || typeof children !== 'string') {
+    return <H3>{children}</H3>;
+  }
+  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  return (
+    <HeaderMdx as="h3" id={tagID}>
+      {children}
+    </HeaderMdx>
+  );
+};

addons/docs/src/blocks/mdx.tsx

@@ -174,7 +174,7 @@ interface HeaderMdxProps {
   id: string;
 }
 
-const HeaderMdx: FC<HeaderMdxProps> = props => {
+export const HeaderMdx: FC<HeaderMdxProps> = props => {
   const { as, id, children, ...rest } = props;
 
   // An id should have been added on every header by the "remark-slug" plugin.