@salutejs/plasma-new-hope 0.66.0-dev.0 → 0.66.1-canary.1128.8446493855.0

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']} />

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

@@ -0,0 +1,72 @@
+---
+id: popover
+title: Popover
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# Popover
+<Description name="Popover" />
+<PropsTable name="Popover" />
+
+```tsx live
+import React from 'react';
+import styled from "styled-components";
+import { surfaceSolid03 } from "@salutejs/plasma-tokens/brands/{{ theme }}";
+import { Popover, Button } from '@salutejs/{{ package }}';
+
+export function App() {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const StyledArrow = styled.div`
+        visibility: hidden;
+
+        &,
+        &::before {
+            position: absolute;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: ${surfaceSolid03};
+        }
+
+        &::before {
+            visibility: visible;
+            content: '';
+            transform: rotate(45deg);
+        }
+    `;
+
+    const StyledContent = styled.div`
+        background: ${surfaceSolid03};
+        padding: 1rem;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    `;
+
+    return (
+        <section style=\{{width: '20rem', height: '15rem'}}>
+            <Popover
+                isOpen={isOpen}
+                onToggle={(is) => setIsOpen(is)}
+                role="presentation"
+                id="popover"
+                target={<Button>Target</Button>}
+                offset={[0, 6]}
+                arrow={<StyledArrow/>}
+                placement='bottom'
+                trigger='click'
+                closeOnOverlayClick
+                closeOnEsc
+                isFocusTrapped
+            >
+                <StyledContent>
+                    <>Content</>
+                    <Button onClick={() => setIsOpen(false)}>close</Button>
+                </StyledContent>
+            </Popover>
+        </section>
+    );
+}
+```

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

@@ -0,0 +1,209 @@
+---
+id: popupBase
+title: PopupBase
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+# PopupBase
+<Description name="PopupBase" />
+<PropsTable name="PopupBase" />
+
+### Провайдер контекста
+
+Поместите `PopupBaseProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять PopupBase:
+
+```tsx title="index.ts"
+import ReactDOM from 'react-dom';
+import { PopupBaseProvider } from '@salutejs/{{ package }}';
+
+import { App } from './App';
+
+ReactDOM.render(
+    <PopupBaseProvider>
+        <App />
+    </PopupBaseProvider>,
+    document.getElementById('root')
+);
+```
+
+### Использование
+
+PopupBase можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
+Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
+Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
+ а также определить отступы от точки с помощью `offset`.
+
+```tsx live
+import React, { useRef } from 'react';
+import { surfaceSolid03, surfaceSolid02 } from '@salutejs/plasma-tokens/brands/{{ theme }}';
+import { SSRProvider, Button, PopupBase, PopupBaseProvider } from  '@salutejs/{{ package }}';
+
+export function App() {
+    const [isOpenA, setIsOpenA] = React.useState(false);
+    const [isOpenB, setIsOpenB] = React.useState(false);
+
+    const ref = useRef();
+
+    return (
+        <SSRProvider>
+            <PopupBaseProvider>
+                <div style=\{{height: "500px"}}>
+                    <div style=\{{ display: 'flex', flexDirection: 'column' }}>
+                        <Button 
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }} 
+                            text="Открыть в document" 
+                            onClick={() => setIsOpenB(true)} 
+                        />
+                        <Button 
+                            style=\{{
+                                marginTop: "1rem",
+                                width: "15rem"
+                            }} 
+                            text="Открыть во Frame" 
+                            onClick={() => setIsOpenA(true)} 
+                        />
+                    </div>
+                    <PopupBase
+                        id="popupA"
+                        frame={ref}
+                        isOpen={isOpenA}
+                        placement="center"
+                        offset={[0, 0]}
+                    >
+                        <div style=\{{ background: surfaceSolid02, padding: "1rem" }}>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <>Content</>
+                        </div>
+                    </PopupBase>
+                    <div 
+                        ref={ref} 
+                        style=\{{
+                            marginTop: "1rem",
+                            width: "400px",
+                            height: "500px",
+                            background: surfaceSolid03,
+                            position: "absolute",
+
+                            display: "flex",
+                            alignItems: "flex-start",
+                            justifyContent: "center",
+                            padding: "1rem",
+
+                            bottom: 0,
+                            right: 0
+                        }}
+                    >
+                        <>Frame</>
+                    </div>
+                    <PopupBase
+                        id="popupB"
+                        frame="document"
+                        isOpen={isOpenB}
+                        placement="center"
+                        offset={[0, 0]}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
+                            <>Content</>
+                        </Content>
+                    </PopupBase>
+                </div>
+            </PopupBaseProvider>
+        </SSRProvider>
+    );
+}
+```
+
+## Подключение анимации
+
+Для подключения анимации нужно добавить параметр `withAnimation`.
+Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `popupBaseClasses` для `PopupBase`.
+Для добавления анимации необходимо использовать класс `.popup-base-root` через переменную `popupBaseClasses.root` из пакета.
+
+Пример:
+
+```tsx
+const StyledPopupTransition = styled(PopupBase)`
+    && > .${popupBaseClasses.root} {
+        opacity: 1;
+        transition: opacity 0.5s 0.1s;
+    }
+
+    &&.${popupBaseClasses.endTransition} > .${popupBaseClasses.root} {
+        opacity: 0;
+        transition: opacity 0.5s 0.1s;
+    }
+`;
+```
+
+или
+
+```tsx
+const StyledPopupAnimation = styled(PopupBase)`
+    && > .${popupBaseClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupBaseClasses.endAnimation} > .${popupBaseClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+`;
+```
+
+И в самом компоненте:
+
+```tsx
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    return (
+        <>
+            <div>
+                <Button 
+                    style=\{{
+                        marginTop: "1rem",
+                        width: "15rem"
+                    }} 
+                    text="Открыть" 
+                    onClick={() => setIsOpen(true)} 
+                />
+            </div>
+            <StyledPopupAnimation
+                id="popup-id"
+                withAnimation
+                frame="document"
+                isOpen={isOpen}
+                placement="center"
+                offset={[0, 0]}
+            >
+                <div>
+                    <Button onClick={() => setIsOpen(false)}>Close</Button>
+                </div>
+            </StyledPopupAnimation>
+        </>
+    );
+}
+```