[docs] Localize the table of contents

docs/translations/translations-de.json

@@ -28,6 +28,7 @@
   "thanks": "Vielen Dank!",
   "adTitle": "Diese Werbung soll Open Source unterstützen.",
   "editPage": "Helfen Sie, diese Seite zu übersetzen",
+  "tableOfContents": "Inhaltsverzeichnis",
   "component": "Komponenten-Kit",
   "mdbProDescr": "Material Dashboard Pro React is a Premium Material-UI Admin.",
   "mkProDescr": "EIn tolles Material-UI Kit basierend auf Material Design.",

docs/translations/translations-es.json

@@ -28,6 +28,7 @@
   "thanks": "¡Gracias!",
   "adTitle": "Este anuncio está diseñado para apoyar al Open Source.",
   "editPage": "Ayuda a traducir esta página",
+  "tableOfContents": "Tabla de Contenido",
   "component": "Kit de Componentes",
   "mdbProDescr": "Material Dashboard Pro React es un tema de administración premium de Material-UI.",
   "mkProDescr": "Un fantástico Kit con Material-UI basado en Material Design.",

docs/translations/translations-fr.json

@@ -28,6 +28,7 @@
   "thanks": "Merci !",
   "adTitle": "Cette annonce est conçu pour soutenir l'Open Source.",
   "editPage": "Aidez à traduire cette page",
+  "tableOfContents": "Matières",
   "component": "Kit de composants",
   "mdbProDescr": "Material Dashboard Pro React est un theme Admin Material-UI premium.",
   "mkProDescr": "Un theme de composants premium Material-UI basé sur Material Design.",

docs/translations/translations-ja.json

@@ -28,6 +28,7 @@
   "thanks": "感謝します！",
   "adTitle": "この広告はオープンソースを支援するように設計されています。",
   "editPage": "このページの翻訳を手伝ってください",
+  "tableOfContents": "目次",
   "component": "コンポーネントキット",
   "mdbProDescr": "Material Dashboard Pro React is a Premium Material-UI Admin.",
   "mkProDescr": "Material Designによる最高にクールなMaterial-UI",

docs/translations/translations-pt.json

@@ -28,6 +28,7 @@
   "thanks": "Obrigado!",
   "adTitle": "Este anúncio é projetado para apoiar o Código Aberto.",
   "editPage": "Ajude a traduzir esta página",
+  "tableOfContents": "Índice",
   "component": "Kit de Componente",
   "mdbProDescr": "Material Dashboard Pro React is a Premium Material-UI Admin.",
   "mkProDescr": "Um badass Material-UI Kit baseado em Material Design.",

docs/translations/translations-ru.json

@@ -28,6 +28,7 @@
   "thanks": "Спасибо!",
   "adTitle": "Эта реклама предназначена для поддержки Open Source.",
   "editPage": "Помогите перевести эту страницу",
+  "tableOfContents": "Содержание",
   "component": "Набор компонентов",
   "mdbProDescr": "Material Dashboard Pro React is a Premium Material-UI Admin.",
   "mkProDescr": "Badass Material-UI Kit основывается на Material Design.",

docs/translations/translations-zh.json

@@ -28,6 +28,7 @@
   "thanks": "感谢！",
   "adTitle": "该广告旨在支持开源代码。",
   "editPage": "帮助改进此页面的翻译",
+  "tableOfContents": "目录",
   "component": "组件包",
   "mdbProDescr": "Material Dashboard Pro React 是一个专业版的 Material-UI 管理员主题。",
   "mkProDescr": "一个根据 Material Design 开发的超棒的 Material-UI 组件。",

docs/translations/translations.json

@@ -30,6 +30,7 @@
   "thanks": "Thank you!",
   "adTitle": "This ad is designed to support Open Source.",
   "editPage": "Edit this page",
+  "tableOfContents": "Contents",
   "component": "Component Kit",
   "mdbProDescr": "Material Dashboard Pro React is a premium Material-UI admin theme.",
   "mkProDescr": "A Badass Material-UI Kit based on Material Design.",

packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import marked from 'marked';
 import { withStyles } from '@material-ui/core/styles';
+import textToHash from '@material-ui/docs/MarkdownElement/textToHash';
 import prism from './prism';
 
 // Monkey patch to preserve non-breaking spaces
@@ -18,14 +19,6 @@ marked.Lexer.prototype.lex = function lex(src) {
 
 const renderer = new marked.Renderer();
 
-export function textToHash(text) {
-  return text
-    .toLowerCase()
-    .replace(/=&gt;|&lt;| \/&gt;|<code>|<\/code>/g, '')
-    .replace(/\W+/g, '-')
-    .replace(/-$/g, '');
-}
-
 renderer.heading = (text, level) => {
   // Small title. No need for an anchor.
   // It's reducing the risk of duplicated id and it's fewer elements in the DOM.

packages/material-ui-docs/src/MarkdownElement/textToHash.js

@@ -0,0 +1,11 @@
+export default function textToHash(text) {
+  return encodeURI(
+    text
+      .toLowerCase()
+      .replace(/=&gt;|&lt;| \/&gt;|<code>|<\/code>|&#39;/g, '')
+      // eslint-disable-next-line no-useless-escape
+      .replace(/[!@#\$%\^&\*\(\)=_\+\[\]{}`~;:'"\|,\.<>\/\?\s]+/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/-$/g, ''),
+  );
+}

packages/material-ui-docs/src/MarkdownElement/textToHash.test.js

@@ -0,0 +1,13 @@
+import { assert } from 'chai';
+import textToHash from './textToHash';
+
+describe('textToHash', () => {
+  it('should hash correctly', () => {
+    assert.strictEqual(
+      textToHash('createMuiTheme(options) => theme'),
+      'createmuitheme-options-theme',
+    );
+    assert.strictEqual(textToHash('Typography - Font family'), 'typography-font-family');
+    assert.strictEqual(textToHash('barre d'application'), 'barre-dapplication');
+  });
+});