chore: update docs Collapse,Dropzone,FileUploadItem (#867)

core-ds · Oct 2, 2023 · a3de58e · a3de58e
1 parent 93212d4
commit a3de58e
Show file tree

Hide file tree

Showing 13 changed files with 292 additions and 257 deletions.
diff --git a/packages/collapse/src/docs/Component.docs.mdx b/packages/collapse/src/docs/Component.docs.mdx
@@ -0,0 +1,22 @@
+import { Meta, Markdown } from '@storybook/addon-docs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+import * as Stories from './Component.stories';
+
+import Description from './description.mdx';
+import Development from './development.mdx';
+import Changelog from '../../CHANGELOG.md?raw';
+import packageJson from '../../package.json';
+
+<Meta of={Stories} />
+
+<ComponentHeader
+    name='Collapse'
+    version={packageJson.version}
+    children='Используется для скрытия части объемного текста.'
+/>
+
+<Tabs
+    description={<Description />}
+    changelog={<Markdown>{Changelog}</Markdown>}
+    development={<Development />}
+/>
diff --git a/packages/collapse/src/docs/Component.stories.mdx b/packages/collapse/src/docs/Component.stories.mdx
diff --git a/packages/collapse/src/docs/Component.stories.tsx b/packages/collapse/src/docs/Component.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapse } from '@alfalab/core-components-collapse';
+
+const meta: Meta<typeof Collapse> = {
+    title: 'Components/Collapse',
+    component: Collapse,
+    id: 'Collapse',
+};
+
+type Story = StoryObj<typeof Collapse>;
+
+export const collapse: Story = {
+    name: 'Collapse',
+    render: () => {
+        return (
+            <Collapse collapsedLabel={'Подробнее'} expandedLabel={'Скрыть'} isExpanded={true}>
+                {'Банк, основанный в 1990 году, является универсальным банком, осуществляющим все основные ' +
+                    'виды банковских операций, представленных на рынке финансовых услуг, включая обслуживание ' +
+                    'частных и корпоративных клиентов, инвестиционный банковский бизнес, торговое финансирование ' +
+                    'и т.д.'}
+            </Collapse>
+        );
+    },
+};
+
+export default meta;
diff --git a/packages/collapse/src/docs/description.mdx b/packages/collapse/src/docs/description.mdx
@@ -1,81 +1,79 @@
-Компонент «подката» позволяет спрятать кусок текста за ссылку «Еще...».
+## Примеры
 
-### Стандартный Collapse
+Стандартный вид компонента.
 
-```jsx live
-<Collapse collapsedLabel='Подробнее' expandedLabel='Скрыть'>
-    Банк, основанный в 1990 году, является универсальным банком, осуществляющим все основные
-    виды банковских операций, представленных на рынке финансовых услуг, включая обслуживание частных
-    и корпоративных клиентов, инвестиционный банковский бизнес, торговое финансирование и т.д.
-</Collapse>
+```jsx live mobileHeight={670}
+<div style={{width: isMobile() ? 320: 460}}>
+    <Typography.TitleResponsive font='system' view='medium'>
+        Почему банк проверяет мои операции?  
+    </Typography.TitleResponsive>
+    <Gap size='m'/>
+    <Typography.Text font='system' view='primary-medium'>
+        В 2001 году в России начал действовать Федеральный закон №115 «О противодействии легализации доходов, 
+        полученных преступным путём, и финансированию терроризма».
+        В рамках закона банки могут блокировать карты, отказывать в проведении сомнительных операций, 
+        ограничить доступ в интернет-банк или запрашивать документы, если по операции клиента возникли подозрения. 
+    </Typography.Text>
+    <Gap size='m'/>
+    <Collapse collapsedLabel='Подробнее' expandedLabel='Скрыть'>
+        Требования 115-ФЗ и связанных с ним документов Банка России часто меняются, 
+        предприниматели не всегда успевают за ними следить.
+        Последствия нарушений «антиотмывочного» законодательства всегда неприятны: 
+        приходится остановить бизнес-процессы и доказать банку законность операций. 
+        Специалисты «Альфа-банка» собрали понятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки.
+    </Collapse>
+</div>
 ```
 
-### Collapse с кастомным контролом
-
-Управлять состоянием компонента можно снаружи используя любой контрол (например кнопку) и передавать
-текущее значение состояния через проп expanded
-
-```jsx live
-render(() => {
-    const [expanded, setExpanded] = React.useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setExpanded(!expanded)}>
-                {expanded ? 'Свернуть' : 'Развернуть'}
-            </Button>
-
-            <Collapse expanded={expanded}>
-                Банк, основанный в 1990 году, является универсальным банком, осуществляющим
-                все основные виды банковских операций, представленных на рынке финансовых услуг,
-                включая обслуживание частных и корпоративных клиентов, инвестиционный банковский
-                бизнес, торговое финансирование и т.д.
-            </Collapse>
-        </>
-    );
-});
-```
-
-### Collapse динамическим контентом
-
-```jsx live
-const Content = () => (
-    <div>
-        Банк, основанный в 1990 году, является универсальным банком, осуществляющим все
-        основные виды банковских операций, представленных на рынке финансовых услуг, включая
-        обслуживание частных и корпоративных клиентов, инвестиционный банковский бизнес, торговое
-        финансирование и т.д.
-    </div>
-);
+Контент может быть динамическим. 
+Управлять состоянием компонента можно снаружи, используя любой контрол и передавая текущее значение состояния через проп expanded. 
 
+```jsx live mobileHeight={730}
 render(() => {
     const [expanded, setExpanded] = React.useState(false);
     const [loaded, setLoaded] = React.useState(false);
 
     const handleToggle = () => {
         if (!expanded) {
-            setTimeout(() => setLoaded(true), 2000);
+            setLoaded(true);
+            setTimeout(() => setLoaded(false), 2000);
         }
-
         setExpanded(!expanded);
     };
 
-    const handleTransitionEnd = () => {
-        if (!expanded) {
-            setLoaded(false);
-        }
-    };
-
     return (
-        <>
-            <Button onClick={handleToggle}>{expanded ? 'Свернуть' : 'Развернуть'}</Button>
-
-            <Collapse expanded={expanded} onTransitionEnd={handleTransitionEnd}>
-                <div style={{ display: 'flex', width: 320 }}>
-                    {loaded ? <Content /> : <Spinner size='m' visible={true} />}
-                </div>
+        <div style={{width: isMobile() ? 320: 460}}>
+            <Typography.TitleResponsive font='system' view='medium'>
+                Почему банк проверяет мои операции?  
+            </Typography.TitleResponsive>
+            <Gap size='m'/>
+            <Typography.Text font='system' view='primary-medium'>
+                В 2001 году в России начал действовать Федеральный закон №115 «О противодействии легализации доходов, 
+                полученных преступным путём, и финансированию терроризма».
+                В рамках закона банки могут блокировать карты, отказывать в проведении сомнительных операций, 
+                ограничить доступ в интернет-банк или запрашивать документы, если по операции клиента возникли подозрения. 
+            </Typography.Text>
+            <Gap size='m'/>
+            <Collapse expanded={expanded}>
+                <Typography.Text 
+                    font='system' 
+                    view='primary-medium' 
+                    showSkeleton={loaded} 
+                >
+                    Требования 115-ФЗ и связанных с ним документов Банка России часто меняются, 
+                    предприниматели не всегда успевают за ними следить.
+                    Последствия нарушений «антиотмывочного» законодательства всегда неприятны: 
+                    приходится остановить бизнес-процессы и доказать банку законность операций. 
+                    Специалисты «Альфа-банка» собрали понятные рекомендации, как сэкономить время на объяснения и предотвратить блокировки.
+                </Typography.Text>
+                <Gap size='m'/>
             </Collapse>
-        </>
+            <Typography.Text view='primary-medium'>
+                <Link pseudo={true} view='secondary' onClick={handleToggle}>
+                    {expanded ? 'Скрыть' : 'Подробнее'}
+                </Link>
+            </Typography.Text>
+        </div>
     );
 });
 ```
diff --git a/packages/collapse/src/docs/development.mdx b/packages/collapse/src/docs/development.mdx
@@ -0,0 +1,12 @@
+import { ArgsTable } from '@storybook/addon-docs';
+import { Collapse } from '../index';
+
+## Подключение
+
+```jsx
+import { Collapse } from '@alfalab/core-components/collapse';
+```
+
+## Свойства
+
+<ArgsTable of={Collapse} />
diff --git a/packages/dropzone/src/docs/Component.docs.mdx b/packages/dropzone/src/docs/Component.docs.mdx
@@ -0,0 +1,23 @@
+import { Meta, Markdown } from '@storybook/addon-docs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+import * as Stories from './Component.stories';
+
+import Description from './description.mdx';
+import Development from './development.mdx';
+import Changelog from '../../CHANGELOG.md?raw';
+import packageJson from '../../package.json';
+
+<Meta of={Stories} />
+
+<ComponentHeader
+    name='Dropzone'
+    version={packageJson.version}
+    design='https://www.figma.com/file/cdNnkh2QdxuvYLrBm4cubM/Web-%3A%3A-Core-Default-Components?node-id=8897%3A54579'
+    children='Используется для прикрепления файлов.'
+/>
+
+<Tabs
+    description={<Description />}
+    changelog={<Markdown>{Changelog}</Markdown>}
+    development={<Development />}
+/>
diff --git a/...s/dropzone/src/docs/Component.stories.mdx → ...s/dropzone/src/docs/Component.stories.tsx b/...s/dropzone/src/docs/Component.stories.mdx → ...s/dropzone/src/docs/Component.stories.tsx
@@ -1,30 +1,31 @@
-import { Meta, Story, ArgsTable, Markdown } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { boolean } from '@storybook/addon-knobs';
-import { ComponentHeader, Tabs } from 'storybook/blocks';
 import { Dropzone } from '@alfalab/core-components-dropzone';
 
-import { Dropzone as DropzoneTS } from '../Component';
-import packageJson from '../../package.json';
-import Changelog from '../../CHANGELOG.md?raw';
-import Description from './description.mdx';
 import {
     getQueryParam,
     stylesStringToObj,
 } from '../../../screenshot-utils/screenshots-story/utils';
 
-<Meta title='Components/Dropzone' component={Dropzone} id='Dropzone' />
-
-export const WRAPPER_STYLES = {
+const WRAPPER_STYLES = {
     display: 'inline-block',
     background: 'var(--color-light-bg-primary)',
 };
 
-{/* Canvas */}
+const meta: Meta<typeof Dropzone> = {
+    title: 'Components/Dropzone',
+    component: Dropzone,
+    id: 'Dropzone',
+};
+
+type Story = StoryObj<typeof Dropzone>;
 
-<Story name='Dropzone'>
-    {React.createElement(() => {
+export const dropzone: Story = {
+    name: 'Dropzone',
+    render: () => {
         const [filesList, setFilesList] = React.useState([]);
-        const handleDrop = (files) => {
+        const handleDrop = (files: FileList) => {
             setFilesList(
                 Array.from(files)
                     .map((file) => file.name)
@@ -70,24 +71,7 @@ export const WRAPPER_STYLES = {
                 </div>
             </div>
         );
-    })}
-</Story>
-
-{/* Docs */}
-
-<ComponentHeader
-    name='Dropzone'
-    version={packageJson.version}
-    package='@alfalab/core-components/dropzone'
-    design='https://www.figma.com/file/cdNnkh2QdxuvYLrBm4cubM/Web-%3A%3A-Core-Default-Components?node-id=8897%3A54579'
-/>
-
-```jsx
-import { Dropzone } from '@alfalab/core-components/dropzone';
-```
+    },
+};
 
-<Tabs
-    description={<Description />}
-    props={<ArgsTable of={DropzoneTS} />}
-    changelog={<Markdown>{Changelog}</Markdown>}
-/>
+export default meta;