fix: generate table of contents dynamically (#3015)

Generating table of contents by statically analyzing MDX is incomplete
in places where headings are rendered via JSX, so now heading componetns
are registering themselves in the context, which is then used to
generate the complete table of contents.

docs/config/jest-setup.js

@@ -1,6 +1,5 @@
 import { configure } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import "jest-styled-components";
 
 configure({
   testIdAttribute: "data-test",

docs/gatsby-browser.js

@@ -1 +1,5 @@
 import "tailwindcss/dist/base.min.css";
+
+import wrapWithProviders from "./wrap-with-providers.tsx";
+
+export const wrapRootElement = wrapWithProviders;

docs/gatsby-ssr.js

@@ -0,0 +1,3 @@
+import wrapWithProviders from "./wrap-with-providers.tsx";
+
+export const wrapRootElement = wrapWithProviders;

docs/package.json

@@ -61,6 +61,7 @@
     "to-vfile": "^6.1.0",
     "unified": "^9.2.0",
     "unist-util-visit": "^2.0.3",
+    "uuid": "^8.3.2",
     "vfile-reporter": "^6.0.2"
   },
   "dependencies": {
@@ -69,6 +70,7 @@
     "@types/lodash": "^4.14.170",
     "@types/react-helmet": "^6.1.1",
     "@types/react-scrollspy": "^3.3.3",
+    "@types/uuid": "^8.3.1",
     "body-scroll-lock": "^3.1.5",
     "eslint-plugin-orbit-components": "^0.5.2",
     "fontfaceobserver": "^2.1.0",

docs/src/components/ComponentStatus/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Table, TableBody, Heading } from "@kiwicom/orbit-components";
+import { Table, TableBody } from "@kiwicom/orbit-components";
 
-import HeadingWithLink from "../HeadingWithLink";
 import StatusTableHead from "./StatusTableHead";
 import StatusTableRow from "./StatusTableRow";
+import { h2 as H2 } from "../../mdx-components";
 import ComponentStatusData from "../../data/component-status.yaml";
 
 export enum Statuses {
@@ -63,11 +63,7 @@ export const ComponentStatusList = () => (
   <>
     {Object.values(Groups).map(group => (
       <React.Fragment key={group}>
-        <HeadingWithLink>
-          <Heading as="h2" type="title2">
-            {group}
-          </Heading>
-        </HeadingWithLink>
+        <H2>{group}</H2>
         <Table>
           <StatusTableHead group={group} />
           <TableBody>