@salutejs/plasma-new-hope 0.67.0-canary.1148.8444175533.0 → 0.67.0-canary.1148.8449780048.0

package/styled-components/es/components/Drawer/Drawer.template-doc.mdx

@@ -0,0 +1,170 @@
+---
+id: drawer
+title: Drawer
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Drawer
+<Description name="Drawer" />
+<PropsTable name="Drawer" />
+
+### Использование
+
+Перед использованием убедитесь, что `PopupProvider` подключен.
+
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { PopupProvider } from '@salutejs/{{ package }}';
+
+import { App } from './App';
+
+ReactDOM.render(
+    <PopupProvider>
+        <App />
+    </PopupProvider>,
+    document.getElementById('root')
+);
+```
+
+### Отображения Drawer
+
+Drawer можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
+Само позиционирование можно указать с помощью свойства `placement`(left - по умолчанию, right, top, bottom),
+а также определить отступы от точки с помощью `offset`.
+ 
+У компонента Drawer есть 2 режима отображения: 
+модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус; 
+немодальный - нет подложки, скролл и фокус не заблокированы.
+
+```tsx live
+import React, { useRef } from 'react';
+import { IconDone } from '@salutejs/plasma-icons';
+import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
+
+import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from  '@salutejs/{{ package }}';
+
+export function App() {
+    const [isOpenA, setIsOpenA] = React.useState(false);
+    const [isOpenB, setIsOpenB] = React.useState(false);
+
+    const ref = useRef();
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <div style=\{{height: "500px"}}>
+                    <div style=\{{ display: "flex", flexDirection: "column" }}>
+                        <Button 
+                            text="Открыть в document" 
+                            onClick={() => setIsOpenA(true)}
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }}
+                        />
+                        <Button 
+                            text="Открыть во Frame" 
+                            onClick={() => setIsOpenB(true)}
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }}
+                        />
+                    </div>
+                    <Drawer
+                        id="drawerA"
+                        isOpen={isOpenA} 
+                        onClose={() => setIsOpenA(false)}
+                        placement="right"
+                        withBlur={false}
+                        closeOnEsc={true}
+                        closeOnOverlayClick={true}
+                        asModal={true}
+                        width="25vw"
+                        height="100vh"
+                    >
+                            <DrawerHeader
+                                hasClose={true}
+                                closePlacement="right"
+                                actions={(
+                                    <Button size="s" view="clear" style=\{{
+                                        position: "relative",
+                                        width: "1.5rem",
+                                        height: "1.5rem"
+                                    }}>
+                                        <IconDone size="s" />
+                                    </Button>
+                                )}
+                                onClose={() => setIsOpenA(false)}
+                            >
+                                <H3>Header</H3>
+                            </DrawerHeader>
+
+                            <DrawerContent>Content</DrawerContent>
+                            
+                            <DrawerFooter>
+                                <H3>Footer</H3>
+                            </DrawerFooter>
+                        </Drawer>
+                    <div 
+                        ref={ref} 
+                        style=\{{
+                            marginTop: "1rem",
+                            width: "400px",
+                            height: "500px",
+                            background: surfaceSolidSecondary,
+                            position: "absolute",
+
+                            display: "flex",
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: "1rem",
+
+                            bottom: 0,
+                            right: 0
+                        }}
+                    >
+                        <>Frame</>
+                    </div>
+                    
+                    <Drawer
+                        id="drawerB"
+                        isOpen={isOpenB} 
+                        onClose={() => setIsOpenB(false)}
+                        placement="right"
+                        asModal={false}
+                        frame={ref}
+                        width="250px"
+                        height="100%"
+                    >
+                            <DrawerHeader
+                                hasClose={true}
+                                closePlacement="right"
+                                actions={(
+                                    <Button size="s" view="clear" style=\{{
+                                        position: "relative",
+                                        width: "1.5rem",
+                                        height: "1.5rem"
+                                    }}>
+                                        <IconDone size="s" />
+                                    </Button>
+                                )}
+                                onClose={() => setIsOpenB(false)}
+                            >
+                                <H3>Header</H3>
+                            </DrawerHeader>
+
+                            <DrawerContent>Content</DrawerContent>
+                            
+                            <DrawerFooter>
+                                <H3>Footer</H3>
+                            </DrawerFooter>
+                        </Drawer>
+                </div>
+            </PopupProvider>
+        </SSRProvider>
+    );
+}
+```

package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx

@@ -0,0 +1,80 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Dropdown
+Набор компонентов для создания выпадающих списков. 
+
+<Description name="Dropdown" />
+<PropsTable name="Dropdown" exclude={['css']} />
+
+# DropdownItem
+
+<Description name="DropdownItem" />
+<PropsTable name="DropdownItem" exclude={['css']} />
+
+## Использование
+
+```tsx live
+import React, { useState } from 'react';
+import { Dropdown, DropdownItem } from '@salutejs/{{ package }}';
+import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
+
+export function App() {
+    const [selected, setSelected] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleSelect = (value: string, text: string) => {
+        setSelected(value);
+        setIsOpen(false);
+    };
+
+    const getDropdownItems = (slug: string, elemCount: number) =>
+    [...Array(elemCount).keys()].map((num) => ({
+        value: `${slug}_${num}`,
+        child: `${slug} ${num}`,
+    }));
+
+    return (
+        <div style=\{{height: "400px", background: surfaceSolidSecondary, padding: "1rem" }}>
+            <Dropdown
+                    target={<Button>Target</Button>}
+                    isOpen={isOpen}
+                    onToggle={() => {
+                        setIsOpen(!isOpen);
+                    }}
+                    offset={[10, 15]}
+                    view="primary"
+                    size="m"
+                    placement="right"
+                    trigger="click"
+                    closeOnOverlayClick={false}
+                    closeOnEsc
+                    isFocusTrapped
+                >
+                    {getDropdownItems('item', 6).map((item) => (
+                        <DropdownItem
+                            key={item.value}
+                            isSelected={Boolean(item.value === selected)}
+                            onSelect={() => handleSelect(item.value, item.child)}
+                            value={item.value}
+                        >
+                            {item.child}
+                        </DropdownItem>
+                    ))}
+                    <DropdownItem
+                        isSelected={selected === 'disabled'}
+                        onSelect={() => handleSelect('disabled', 'disabled')}
+                        value="disabled"
+                        disabled
+                    >
+                        disabled
+                    </DropdownItem>
+                </Dropdown>
+            </div>
+    );
+}
+```

package/styled-components/es/components/Grid/Grid.template-doc.mdx

@@ -0,0 +1,142 @@
+---
+id: grid
+title: Grid
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Grid
+Набор компонентов для создания сетки.
+
+## Breakpoints
+Каждый breakpoints разрешения содержит собственное максимальное количество колонок:
+
+| Обозначение | Ширина от, px | Ширина до, px | Кол-во колонок |
+|-------------|---------------|---------------|----------------|
+| largeM      | 1200          | -             | 30             |
+| largeS      | 960           | 1199          | 24             |
+| mediumM     | 786           | 959           | 18             |
+| mediumS     | 560           | 785           | 12             |
+| smallS      | 0             | 559           | 6              |
+
+## Grid
+<Description name="Grid" />
+<PropsTable name="Grid" />
+
+## Row
+Блок с отрицательными отступами для размещения колонок (`Col`) по горизонтали.
+Блок нельзя вкладывать сам в себя, но можно чередовать далее по дереву с использованием `Col`.
+Стилизованный компонент, обладающий всеми свойствами `div`.
+
+## Col
+<Description name="Col" />
+<PropsTable name="Col" />
+
+## Примеры
+
+### Базовое применение
+Размеры колонок указываются свойством `size`, отступ — свойством `offset`.
+
+```tsx live
+import React from 'react';
+import { Grid, Row, Col } from '@salutejs/{{ package }}';
+
+export function App() {
+    const Filler = ({children}) => {
+        return (
+            <div 
+                style=\{{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    padding: '0.5rem 1rem',
+                    backgroundColor: '#f0f0f0',
+                }}
+            >
+                {children}
+            </div>
+        )
+    };
+
+    return (
+        <Grid>
+            <Row>
+                <Col size={3}>
+                    <Filler>3</Filler>
+                </Col>
+                <Col size={2}>
+                    <Filler>2</Filler>
+                </Col>
+                <Col size={3}>
+                    <Filler>3</Filler>
+                </Col>
+                <Col size={4}>
+                    <Filler>4</Filler>
+                </Col>
+                <Col size={6}>
+                    <Filler>6</Filler>
+                </Col>
+            </Row>
+            <Row>
+                <Col size={4} offset={1}>
+                    <Filler>4 offset 1</Filler>
+                </Col>
+                <Col size={6} offset={2}>
+                    <Filler>6 offset 2</Filler>
+                </Col>
+            </Row>
+        </Grid>
+    );
+}
+```
+
+### Адаптивные размеры и отступы колонок
+Свойства `size` и `offset` могут быть адаптивными.
+Для этого добавьте соответствующие свойства с нужными [breakpoints](#Breakpoints).
+При этом, `size` и `offset` могут выступать как fallback-значения для остальных разрешений.
+
+```tsx live
+import React from 'react';
+import { Grid, Row, Col } from '@salutejs/{{ package }}';
+
+export function App() {
+    const Filler = ({children}) => {
+        return (
+            <div 
+                style=\{{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    padding: '0.5rem 1rem',
+                    backgroundColor: '#f0f0f0',
+                }}
+            >
+                {children}
+            </div>
+        )
+    };
+
+    return (
+        <Grid>
+            <Row>
+                <Col smallM=\{{ size: 1 }} mediumS=\{{ size: 2 }} mediumM=\{{ size: 3 }} largeM=\{{ size: 4 }}>
+                    <Filler>1</Filler>
+                </Col>
+                <Col size={2} largeM=\{{ size: 4 }}>
+                    <Filler>2</Filler>
+                </Col>
+            </Row>
+            <Row>
+                <Col size={4} smallM=\{{ offset: 1 }} mediumS=\{{ offset: 2 }} mediumM=\{{ offset: 3 }} largeM=\{{ offset: 4 }}>
+                    <Filler>4 offset 1</Filler>
+                </Col>
+                <Col size={6} offset={2} largeM=\{{ offset: 4 }}>
+                    <Filler>6 offset 2</Filler>
+                </Col>
+            </Row>
+        </Grid>
+    );
+}
+```

package/styled-components/es/components/Image/Image.template-doc.mdx

@@ -0,0 +1,26 @@
+---
+id: image
+title: Image
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Image
+<Description name="Image" />
+<PropsTable name="Image" />
+
+```tsx live
+import React from 'react';
+import { Image } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <Image
+            src="/web/images/320_320_9.jpg"
+            width="320px"
+            height="320px"
+            alt="Картинка для примера фоном"
+        />
+    );
+}
+```

package/styled-components/es/components/Indicator/Indicator.template-doc.mdx

@@ -0,0 +1,76 @@
+---
+id: indicator
+title: Indicator
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Indicator
+Индикаторы могут отображаться в нескольких размерах и цветах.
+
+## Indicator
+<Description name="Indicator" />
+<PropsTable name="Indicator" exclude={['css']} />
+
+## Примеры
+
+### Базовое использование
+
+```tsx live
+import React from 'react';
+import { Indicator } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="default" />
+                <Indicator size="m" view="default" />
+                <Indicator size="l" view="default" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="accent" />
+                <Indicator size="m" view="accent" />
+                <Indicator size="l" view="accent" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="inactive" />
+                <Indicator size="m" view="inactive" />
+                <Indicator size="l" view="inactive" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="positive" />
+                <Indicator size="m" view="positive" />
+                <Indicator size="l" view="positive" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="warning" />
+                <Indicator size="m" view="warning" />
+                <Indicator size="l" view="warning" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="negative" />
+                <Indicator size="m" view="negative" />
+                <Indicator size="l" view="negative" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="black" />
+                <Indicator size="m" view="black" />
+                <Indicator size="l" view="black" />
+            </div>
+
+            <div style=\{{ display: 'flex' }}>
+                <Indicator size="s" view="white" />
+                <Indicator size="m" view="white" />
+                <Indicator size="l" view="white" />
+            </div>
+        </div>
+    );
+}
+```

package/styled-components/es/components/Link/Link.template-doc.mdx

@@ -0,0 +1,23 @@
+---
+id: link
+title: Link
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Link
+<Description name="Link" />
+<PropsTable name="Link" exclude={['css', 'focused']} />
+
+```tsx live
+import React from 'react';
+import { P1, Link } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <P1>
+            Скачайте <Link href="/" target="_blank">приложение</Link>.
+        </P1>
+    );
+}
+```

package/styled-components/es/components/Modal/Modal.template-doc.mdx

@@ -0,0 +1,56 @@
+---
+id: modal
+title: Modal
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Modal
+<Description name="Modal" />
+<PropsTable name="Modal" />
+
+## Использование
+
+### Провайдер контекста
+Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
+
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { ModalsProvider } from '@salutejs/{{ package }}';
+
+import { App } from './App';
+
+ReactDOM.render(
+    <ModalsProvider>
+        <App />
+    </ModalsProvider>,
+    document.getElementById('root')
+);
+```
+
+### Вызов модального окна
+После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:
+
+```tsx live
+import React from 'react';
+import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const close = React.useCallback(() => {
+      setIsOpen(false);
+    }, []);
+
+    return (
+        <div>
+            <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
+            <Modal isOpen={isOpen} onClose={close}>
+                <Headline3 mb={10}>Модальное окно</Headline3>
+                <P1>Содержимое модального окна.</P1>
+                <Button text="Закрыть" onClick={close} />
+            </Modal>
+        </div>
+    );
+}
+```

package/styled-components/es/components/Notification/Notification.template-doc.mdx

@@ -0,0 +1,59 @@
+---
+id: notification
+title: Notification
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Notification
+<Description name="Notification" />
+<PropsTable name="Notification" />
+
+## Использование
+Компонент `Notification` может использоваться для создания собственных систем оповещения. 
+Вид компонента контролируется свойствами (props).
+Текстовая часть оповещения состоит из `title` и `children`. 
+Слева или сверху от нее, также можно пробросить иконку через свойство `icon`.
+Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия.
+
+### Провайдер контекста
+Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
+
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { NotificationsProvider } from '@salutejs/{{ package }}';
+
+import { App } from './App';
+
+ReactDOM.render(
+    <NotificationsProvider>
+        <App />
+    </NotificationsProvider>,
+    document.getElementById('root')
+);
+```
+
+### Вызов уведомления
+После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,
+который приведет к отображению оповещения.
+Функция принимает значения свойств компонента `Notification`:
+
+```tsx live
+import React from 'react';
+import { Button, addNotification, NotificationsProvider } from '@salutejs/{{ package }}';
+
+export function App() {
+    const handleClick = React.useCallback(() => {
+        addNotification({
+            title: 'Входящий вызов',
+            children: 'Принять?',
+        }, 1000);
+    }, []);
+
+    return (
+        <NotificationsProvider>
+            <Button text="Показать оповещение" onClick={handleClick} />
+        </NotificationsProvider>
+    );
+}
+```

package/styled-components/es/components/Overlay/Overlay.template-doc.mdx

@@ -0,0 +1,10 @@
+---
+id: overlay
+title: Overlay
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Overlay
+<Description name="Overlay" />
+<PropsTable name="Overlay" exclude={['css']} />