refactor: migration_v6.md (#6238)

* refactor: migration_v6.md

- Добавил блок "Содержание". Для это в Styleguide добавил возможность навигироваться по заголовкам.
- Отформатировал текста.
- Изменил структуру.

* fix(migration_v6.md): add link to "Интеграция с VK Mini Apps"

* chore: fix typo

* chore: fix typo x2

* fix(migration_v6.md): fix some headers

---------

Co-authored-by: Victoria Zhizhonkova <indarklight@gmail.com>

styleguide/Components/Heading/HeadingRenderer.js

@@ -1,24 +1,43 @@
 import * as React from 'react';
 import { classNames, Headline, Title } from '@vkui';
+import { generateIdByReactNode } from '../../utils';
 import './Heading.css';
 
 const HeadingRenderer = ({ level, children, className }) => {
+  const id = generateIdByReactNode(children);
   switch (level) {
     case 1:
       return (
-        <Title className={classNames('Heading', 'Heading--1', className)} level="1">
+        <Title
+          id={id}
+          className={classNames('Heading', 'Heading--1', className)}
+          level="1"
+          Component="h1"
+        >
           {children}
         </Title>
       );
     case 2:
       return (
-        <Title className={classNames('Heading', 'Heading--2', className)} weight="2" level="2">
+        <Title
+          id={id}
+          className={classNames('Heading', 'Heading--2', className)}
+          weight="2"
+          level="2"
+          Component="h2"
+        >
           {children}
         </Title>
       );
     default:
       return (
-        <Headline className={classNames('Heading', 'Heading--3', className)} weight="1" level="1">
+        <Headline
+          id={id}
+          className={classNames('Heading', 'Heading--3', className)}
+          weight="1"
+          level="1"
+          Component="h3"
+        >
           {children}
         </Headline>
       );

styleguide/Components/Link/LinkRenderer.js

@@ -1,10 +1,46 @@
 import * as React from 'react';
 import { Link } from '@vkui';
+import { generateIdByReactNode } from '../../utils';
 
-export const LinkRenderer = ({ href: _href, ...restProps }) => {
-  const href = _href?.replace('https://vkcom.github.io/VKUI/', '');
+const resolveHref = (hrefProp, children) => {
+  if (hrefProp) {
+    if (hrefProp === '{{anchor}}') {
+      const id = generateIdByReactNode(children);
+      return {
+        scrollTo() {
+          const el = document.getElementById(id);
+          if (el) {
+            window.scrollTo({ behavior: 'smooth', top: el.offsetTop });
+          }
+        },
+        native: undefined,
+      };
+    }
 
-  return <Link href={href} {...restProps} />;
+    return {
+      scrollTo: null,
+      native: hrefProp.replace('https://vkcom.github.io/VKUI/', ''),
+    };
+  }
+};
+
+export const LinkRenderer = ({ href: hrefProp, onClick, children, ...restProps }) => {
+  const href = resolveHref(hrefProp, children);
+
+  const handleClick = (event) => {
+    if (onClick) {
+      onClick(event);
+    }
+    if (href.scrollTo !== null) {
+      href.scrollTo();
+    }
+  };
+
+  return (
+    <Link href={href.native} onClick={handleClick} {...restProps}>
+      {children}
+    </Link>
+  );
 };
 
 export default LinkRenderer;