update docs

docs/loaders/markdown-loader.es6

@@ -26,7 +26,9 @@ class Renderer {
                 return this.renderContent(content);
             case 'header':
                 const { level } = attrs;
-                return `<h${level}>` + this.renderContent(content) + `</h${level}>`;
+                return `<Header level={${level}}>` +
+                    this.renderContent(content) +
+                    '</Header>';
             case 'para':
                 return '<p>' + this.renderContent(content) + '</p>';
             case 'code_block':
@@ -88,6 +90,15 @@ const InlineCode = styled.span\`
     font-size: 90%;
 \`;
 
+function Header({ level, children }) {
+    const HeaderTag = 'h' + level;
+    return (
+        <HeaderTag>
+            {children}
+        </HeaderTag>
+    );
+}
+
 export default class GettingStarted extends React.Component {
     render(): React.Element<*> {
         return (

docs/loaders/markdown-loader.js

@@ -60,7 +60,7 @@ var Renderer = function () {
                 case 'header':
                     var level = attrs.level;
 
-                    return '<h' + level + '>' + this.renderContent(content) + ('</h' + level + '>');
+                    return '<Header level={' + level + '}>' + this.renderContent(content) + '</Header>';
                 case 'para':
                     return '<p>' + this.renderContent(content) + '</p>';
                 case 'code_block':
@@ -110,5 +110,5 @@ module.exports = function (content) {
         header = '<Helmet title={`' + markdownTree[1][2] + '`} />';
     }
 
-    return '\nimport React from \'react\';\nimport Helmet from \'react-helmet\';\nimport Code from \'react-syntax-highlighter\';\nimport Link from \'retail-ui/components/Link\';\nimport styled from \'styled-components\';\n\nconst InlineCode = styled.span`\n    font-family: Consolas, monospace;\n    background-color: rgb(240, 240, 240);\n    font-size: 90%;\n`;\n\nexport default class GettingStarted extends React.Component {\n    render(): React.Element<*> {\n        return (\n            <div>\n                ' + header + '\n                ' + result + '\n            </div>\n        );\n    }\n}';
+    return '\nimport React from \'react\';\nimport Helmet from \'react-helmet\';\nimport Code from \'react-syntax-highlighter\';\nimport Link from \'retail-ui/components/Link\';\nimport styled from \'styled-components\';\n\nconst InlineCode = styled.span`\n    font-family: Consolas, monospace;\n    background-color: rgb(240, 240, 240);\n    font-size: 90%;\n`;\n\nfunction Header({ level, children }) {\n    const HeaderTag = \'h\' + level;\n    return (\n        <HeaderTag>\n            {children}\n        </HeaderTag>\n    );\n}\n\nexport default class GettingStarted extends React.Component {\n    render(): React.Element<*> {\n        return (\n            <div>\n                ' + header + '\n                ' + result + '\n            </div>\n        );\n    }\n}';
 };

docs/src/components/Demo.js

@@ -1,14 +1,34 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import Code from 'react-syntax-highlighter';
 
 type DemoProps = {
     children?: any;
+    demo: ReactClass<*>;
+    source: string;
 };
 
-const Demo: ReactClass<DemoProps> = styled.div`
+const DemoContainer = styled.div`
+    border: 1px solid #aaa;
+    padding: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
+    font-size: 14px;
 `;
 
-export default Demo;
+export default function Demo({ children, demo, source }: DemoProps): React.Element<*> {
+    const DemoComponent = demo;
+    return (
+        <div>
+            <DemoContainer>
+                {DemoComponent
+                    ? <DemoComponent />
+                    : children}
+            </DemoContainer>
+            {source && <Code language='javascript'>
+                {source}
+            </Code>}
+        </div>
+    );
+}

docs/src/components/Pages/Api.md

@@ -17,7 +17,7 @@
 
 ### ``validate(): Promise<boolean>``
 
-При вызове этой функции загораются все невалидные котролы так же как и при вызове
+При вызове этой функции загораются все невалидные контролы так же как и при вызове
 функции ``submit()``. Кроме того функция
 возвращает признак валидности формы.
 
@@ -47,26 +47,58 @@
 
 ### ``onValidationUpdated?: (isValid: boolean) => void``
 
-Данные callback вызывается в случае изменения состояния валдности дочерних контролов.
-
+Данный callback вызывается в случае изменения состояния валдности дочерних контролов.
 
 ## ValidationWrapperV1
 
 ### ``children: React.Element<*>``
 
+Дочерный компонент должен быть ровно один. ValidationWrapperV1 контролирует его поведение путём передачи
+prop-ов, используя сограшение retail-ui. Для отрисовки tooltip-а используется стандартный 
+[Tooltip](http://tech.skbkontur.ru/react-ui/#/components/Tooltip). Для работы с компонентом используется
+[React.cloneElement()](https://facebook.github.io/react/docs/react-api.html#cloneelement);
+
 ### ``validationInfo: ?ValidationInfo``
 
 где
 
-    type ValidationInfo = { type?: 'immediate' | 'lostfocus' | 'submit'; message: string; }
+    type ValidationInfo = { 
+        type?: 'immediate' | 'lostfocus' | 'submit'; 
+        message: string; 
+    };
+
+способ передать результат валидаций в ValidationWrapper. Если значение определено, контрол считается 
+невалидным. Поле ``type`` используется для задания поведения валидации. Значение по умолчанию для ``type`` -- ``lostfocus``.
 
 ### ``renderMessage?: RenderErrorMessage``
 
 где
 
     type RenderErrorMessage =
-        (control: React.Element<*>, hasError: boolean, validation: ?Validation) => React.Element<*>;
+        (
+            control: React.Element<*>, 
+            hasError: boolean, 
+            validation: ?Validation
+        ) => React.Element<*>;
+
+Способ кастомизации отображения сообщения об ошибке (не путать с 
+[подсветкой контрола](https://guides.kontur.ru/principles/validation/#13)).
+Для задания определённых в гайдах способа отображения ошибок используйте функции ``tooltip`` и ``text``.
+Значение по умолчанию -- ``tooltip('right middle')``
+
+Например
+
+    // ...
+    <ValidationWrapperV1 renderMessage={tooltip('top center')} validationInfo={{ ... }}>
+    // ...
+
+## tooltip(pos: string): RenderErrorMessage
+
+Возвращает функцию для рендеринга сообщения о ошибке в виде тултипа. Используется для передачи в renderMessage.
+Аргумент pos -- строка передаваемая в соответствующий prop [retail-ui Tooltip-а](http://tech.skbkontur.ru/react-ui/#/components/Tooltip).
 
-## tooltip(pos: string)
+## text(pos: 'right' | 'bottom'): RenderErrorMessage
 
-## text(pos: string)
+Возвращает функцию для рендеринга сообщения о ошибке в виде текстового блока рядом с контролом.
+Используется для передачи в renderMessage. Аргумент pos управляет положением тултипа и примает значения
+'right' и 'bottom' для отображения сообщения справа и внизу соответственно.

docs/src/components/Pages/Description.md

@@ -7,18 +7,17 @@ Sources: https://github.com/skbkontur/react-ui-validations
 
 ## Установка и использование
 
-
     npm install --save react-ui-validations
 
-Пример использования
+Пример использования:
 
     import {ValidationContainer, ValidationWrapperV1} from 'react-ui-validations';
 
     export default class MyAwesomeComponent extends React.Component {
         render() {
             return (
                 <ValidationContainer>
-                    <ValidationWrapperV1 validationInfo={{error: true, message: "Wrong!"}}>
+                    <ValidationWrapperV1 validationInfo={{ message: "Wrong!" }}>
                         <Input value="Right?" />
                     </ValidationWrapperV1>
                 </ValidationContainer>
@@ -31,13 +30,11 @@ Sources: https://github.com/skbkontur/react-ui-validations
 * Реализация *поведения* описанного в контур.гайдах.
 * Упрощение использования совместно в библиотекой retail-ui.
 
-
-
 ## Как это работает
 
-Библиотека не содержит никаких упрощающих создание валидаций функций.
-Библиотека реализует только функциональность, ответственную за принятие решений о том,
+Библиотека не содержит никаких упрощающих создание валидаций функций и реализует только 
+функциональность, ответственную за принятие решений о том,
 когда и как показывать валидацию.
 
-Поскольку контролы должны взаимодействовать между собой область используется механизм работы
+Поскольку контролы должны взаимодействовать между собой, область используется механизм работы
 [через контекст](https://facebook.github.io/react/docs/context.html#parent-child-coupling).

docs/src/components/Pages/Examples/OnBlurValidations/OnBlurValidations.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Helmet from 'react-helmet';
-import Code from 'react-syntax-highlighter';
 import Demo from '../../../Demo';
 import Example from './Example';
 import ExampleSource from '!raw-loader!./Example';
@@ -38,12 +37,7 @@ export default class OnBlurValidations extends React.Component {
                     <li>Только два тултипа</li>
                     <li>Рекваед валидация срабатывает только по субмиту</li>
                 </ul>
-                <Demo>
-                    <Example />
-                </Demo>
-                <Code language='javascript'>
-                    {ExampleSource}
-                </Code>
+                <Demo demo={Example} source={ExampleSource} />
             </div>
         );
     }

docs/src/components/Pages/Examples/ScrollToFirstInvalid/ScrollToFirstInvalid.js

@@ -51,6 +51,8 @@ function FormEditor({ data, validationInfo, onChange }: FormEditorProps): React.
         </Form>
     );
 }
+FormEditor.contextTypes = { location: React.PropTypes.object };
+
 
 function validate(data: ContactInfo): ContactInfoValidationInfo {
     const result = {};

docs/src/components/Pages/GettingStarted.md

@@ -6,7 +6,7 @@
 
 ## Использование
 
-Для работы необходимо обернуть контролы, для которых будет показана валидацию в ValidationWrapperV1:
+Для работы необходимо обернуть контролы, для которых будет показана валидация в ValidationWrapperV1:
 
     import { ValidationWrapperV1 } from 'react-ui-validations';
 
@@ -33,18 +33,24 @@
     </ValidationContainer>
 
 ValidationWrapper принимает параметр validationInfo, если значение validationInfo определено, 
-то данные в контроле считаются невалидными и в зависимости от поля type в validationInfo, ValidationWrapperV1 
+то данные в контроле считаются невалидными и, в зависимости от поля type в validationInfo, ValidationWrapperV1 
 будет добавлять сообщения об ошибке (в виде тултипа) и подсвечивать контрол красным в нужные моменты времени.
 
 Библиотека заточена исключительно под [retail-ui](tech.skbkontur.ru/react-ui/) контролы и управляет состоянием контролов
 через передачу ему props-а error и использую другие заранее известные prop-ы (onChange, onBlur, onFocus и др.) для управления 
 состоянием валидаций.
 
-Кроме того, нет необходимости передавать validationInfo в нужные моменты времени, например на onBlur или отправку форму. Достаточно
+Кроме того, нет необходимости передавать validationInfo в нужные моменты времени, например на onBlur или отправку формы. Достаточно
 валидировать модель и передавать validationInfo всегда, а ValidationWrapper решит когда её нужно показывать.
 
-Для указания поведения валидации необходимо в validationInfo педелать её поведение:
+Для указания поведения валидации необходимо в validationInfo передать её поведение:
 
     // ...
-        <ValidationWrapperV1 validationInfo={{ message: 'Сообщение об ошибке' }}>
+        <ValidationWrapperV1 validationInfo={{ type: 'submit', message: '...' }}>
     // ...
+
+Для изменения внешнего вида ошибки используется prop renderMessage:
+
+    <ValidationWrapperV1 validationInfo={{ ... }} renderMessage={text('right')}>
+
+