feat(attach): add progress bar (#865)

src/attach/README.md

@@ -54,3 +54,22 @@ function handleChange(value) {
     </div>
 </div>
 ```
+
+С отображением прогресса загрузки файла
+```jsx
+function handleChange(value) {
+    setState({ value });
+}
+
+<div>
+    <div className='row'>
+        <Attach
+            progressBarPercent={ 50 }
+            buttonContent='Выберите файл'
+            size='s'
+            onChange={ handleChange }
+            value={ state.value }
+        />
+    </div>
+</div>
+```

src/attach/attach.css

@@ -67,6 +67,7 @@
     &__no-file {
         display: inline;
         margin-left: 0.5em;
+        text-align: center;
     }
 
     &__clear {
@@ -85,6 +86,10 @@
         }
     }
 
+    &__progress-bar {
+        margin-top: var(--gap-2xs);
+    }
+
     &_disabled &__control {
         cursor: default;
     }

src/attach/attach.jsx

@@ -8,6 +8,7 @@ import Type from 'prop-types';
 
 import Button from '../button/button';
 import IconAttachment from '../icon/action/attachment';
+import ProgressBar from '../progress-bar';
 
 import cn from '../cn';
 import performance from '../performance';
@@ -119,8 +120,10 @@ class Attach extends React.Component {
         accept: Type.string,
         /** Управление возможностью изменения значения компонента */
         disabled: Type.bool,
-        /** Управляет возможностью выбора нескольких файлов */
+        /** Управление возможностью выбора нескольких файлов */
         multiple: Type.bool,
+        /** Процент выполнения загрузки файла */
+        progressBarPercent: Type.number,
         /** Размер компонента */
         size: Type.oneOf(['s', 'm', 'l', 'xl']),
         /** Тема компонента */
@@ -280,6 +283,12 @@ class Attach extends React.Component {
                         className={ cn('clear') }
                         onClick={ this.handleClearClick }
                     />
+                    { typeof this.props.progressBarPercent !== 'undefined' && (
+                        <ProgressBar
+                            percent={ this.props.progressBarPercent }
+                            className={ cn('progress-bar') }
+                        />
+                    ) }
                 </span>
             );
         }