docs(Toc): add component docs (#1024)

src/components/Toc/README.md

@@ -0,0 +1,41 @@
+<!--GITHUB_BLOCK-->
+
+# Toc
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {Toc} from '@gravity-ui/uikit';
+```
+
+The `Toc` component is designed to represent table of contents of the page, displaying a set items with two levels of hierarchy.
+
+## Usage
+
+You can use `Toc` in two ways:
+
+1. Items are links
+2. Items are clickable buttons
+
+To use the first method, pass the corresponding link to each item of the `Toc` via `href` property. You will still be able to use a click handler to control active element of the `Toc`.
+
+If you don't do this, the component will work in the second way.
+
+## Properties
+
+| Name      | Description                                                          |    Type     | Default |
+| :-------- | :------------------------------------------------------------------- | :---------: | :-----: |
+| className | CSS class                                                            |  `string`   |         |
+| items     | Elements of the table of contents                                    | `TocItem[]` |         |
+| value     | Current active item                                                  |  `string`   |         |
+| onUpdate  | Item click handler                                                   | `Function`  |         |
+| qa        | The value to be passed to `data-qa` attribute of the `Toc` container |  `string`   |         |
+
+#### TocItem
+
+| Name    | Description                                                                    |        Type         | Default |
+| :------ | :----------------------------------------------------------------------------- | :-----------------: | :-----: |
+| value   | Value of the item                                                              |      `string`       |         |
+| content | Content of the item that will be displayed                                     | `React.ReactNode[]` |         |
+| href    | `href` property of the `<a>` element to which item will be converted if passed |      `string`       |         |
+| items   | Children items                                                                 |     `TocItem[]`     |         |

src/components/Toc/Toc.tsx

@@ -12,9 +12,9 @@ const b = blockNew('toc');
 
 export interface TocProps extends QAProps {
     className?: string;
+    items: TocItemType[];
     value?: string;
     onUpdate?: (value: string) => void;
-    items: TocItemType[];
 }
 
 export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, ref) {

src/components/Toc/__stories__/Toc.stories.scss

@@ -5,5 +5,5 @@ $block: '.#{variables.$ns-new}toc-stories';
 #{$block} {
     $class: &;
 
-    max-width: 156px;
+    max-width: 416px;
 }

src/components/Toc/__stories__/Toc.stories.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
-import {block} from '../../utils/cn';
+import {blockNew} from '../../utils/cn';
 import {Toc, TocProps} from '../Toc';
 
 import './Toc.stories.scss';
 
-const b = block('toc-stories');
+const b = blockNew('toc-stories');
 
 export default {
     title: 'Components/Toc',