feat(TableOfContents): add prop to control TOC heading label (#1207)

[![PR App][icn]][demo] | Fix RM-XYZ
:-------------------:|:----------:


## 🧰 Changes
Add `heading` prop to the `Content.Toc` component so we can control it
in the React app for internationalization

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

Author: kevinports

__tests__/components/TableOfContents.test.jsx

@@ -16,7 +16,7 @@ const glossaryTerms = [
   },
 ];
 
-describe.skip('Table of Contents', () => {
+describe('Table of Contents', () => {
   it('should have a header', () => {
     const { container } = render(
       <TableOfContents>
@@ -27,7 +27,7 @@ describe.skip('Table of Contents', () => {
     expect(container.querySelectorAll('li')[0]).toHaveTextContent('Table of Contents');
   });
 
-  it('generates TOC from headings', () => {
+  it.skip('generates TOC from headings', () => {
     const txt = '# Heading Zed\n\n# Heading One';
     const ast = reactProcessor().parse(txt);
     const toc = reactTOC(ast);
@@ -36,7 +36,7 @@ describe.skip('Table of Contents', () => {
     expect(container.querySelectorAll('li > a[href]:not([href="#"])')).toHaveLength(2);
   });
 
-  it('includes two heading levels', () => {
+  it.skip('includes two heading levels', () => {
     const txt = '# Heading Zed\n\n## Subheading One\n\n### Deep Heading Two';
     const ast = reactProcessor().parse(txt);
     const toc = reactTOC(ast);
@@ -46,7 +46,7 @@ describe.skip('Table of Contents', () => {
     expect(container.innerHTML).toMatchSnapshot();
   });
 
-  it('normalizes root depth level', () => {
+  it.skip('normalizes root depth level', () => {
     const txt = '##### Heading Zed\n\n###### Subheading Zed';
     const ast = reactProcessor().parse(txt);
     const toc = reactTOC(ast);
@@ -55,7 +55,7 @@ describe.skip('Table of Contents', () => {
     expect(container.querySelectorAll('li > a[href]:not([href="#"])')).toHaveLength(2);
   });
 
-  it('includes variables', () => {
+  it.skip('includes variables', () => {
     const txt = '# Heading <<test>>';
     const ast = reactProcessor().parse(txt);
     const toc = reactTOC(ast);
@@ -64,7 +64,7 @@ describe.skip('Table of Contents', () => {
     expect(container.querySelector('li > a[href]:not([href="#"])')).toHaveTextContent(`Heading ${variables.user.test}`);
   });
 
-  it('includes glossary items', () => {
+  it.skip('includes glossary items', () => {
     const txt = '# Heading <<glossary:demo>>';
     const ast = reactProcessor().parse(txt);
     const toc = reactTOC(ast);
@@ -74,4 +74,14 @@ describe.skip('Table of Contents', () => {
       `Heading ${glossaryTerms[0].term}`,
     );
   });
+
+  it('accepts custom heading', () => {
+    const { container } = render(
+      <TableOfContents heading="Custom Heading">
+        <h1>Heading 1</h1>
+      </TableOfContents>,
+    );
+
+    expect(container.querySelectorAll('li')[0]).toHaveTextContent('Custom Heading');
+  });
 });

components/TableOfContents/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-function TableOfContents({ children }: React.PropsWithChildren) {
+function TableOfContents({ children, heading = 'Table of Contents' }: React.PropsWithChildren<{ heading?: string }>) {
   return (
     <nav aria-label="Table of contents" role="navigation">
       <ul className="toc-list">
         <li>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a className="tocHeader" href="#">
             <i className="icon icon-text-align-left"></i>
-            Table of Contents
+            {heading}
           </a>
         </li>
         <li className="toc-children">{children}</li>

lib/run.tsx

@@ -76,10 +76,10 @@ const run = (string: string, _opts: RunOpts = {}) => {
       </Contexts>
     ),
     toc,
-    Toc: props =>
+    Toc: (props: { heading?: string }) =>
       Toc ? (
-        <Components.TableOfContents>
-          <Toc {...props} />
+        <Components.TableOfContents heading={props.heading}>
+          <Toc />
         </Components.TableOfContents>
       ) : null,
     stylesheet,