@salutejs/plasma-new-hope 0.82.1-canary.1210.9186102644.0 → 0.83.0-canary.1194.9174145281.0

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

@@ -3,21 +3,20 @@ id: dropdown
 title: Dropdown
 ---
 
-import { PropsTable, Description } from '@site/src/components';
+import { PropsTable, Description, StorybookLink } from '@site/src/components';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 # Dropdown
 Выпадающий многоуровневый список.
 
+<StorybookLink name="Dropdown" />
+
 <Description name="Dropdown" />
 <PropsTable name="Dropdown" />
 
 ## Использование
-Обязательным параметром является только массив `items`.
-Внутри items может быть такой же вложенный массив items.
-
-Формат следующий:
+Обязательным параметром является только массив `items`. Внутри items может быть такой же вложенный массив items. Формат следующий:
 
 ```tsx
 type Items = Array<{
@@ -69,272 +68,272 @@ type Items = Array<{
     <TabItem value="default" label="Default" default>
         ```tsx live
         import React from 'react';
-        import { Button, Dropdown } from '@salutejs/{{ package }}';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
 
         export function App() {
-        const items = [
-    {
-        value: 'north_america',
-        label: 'Северная Америка',
-    },
-    {
-        value: 'south_america',
-        label: 'Южная Америка',
-        items: [
-    {
-        value: 'brazil',
-        label: 'Бразилия',
-        items: [
-    {
-        value: 'rio_de_janeiro',
-        label: 'Рио-де-Жанейро',
-    },
-    {
-        value: 'sao_paulo',
-        label: 'Сан-Паулу',
-    },
-        ],
-    },
-    {
-        value: 'argentina',
-        label: 'Аргентина',
-    },
-        ],
-    },
-        ];
-
-
-        return (
-        <div style=\{{ height:"300px" }}>
-        <Dropdown
-            items={items}
-        >
-            <Button text="Список стран" />
-        </Dropdown>
-    </div>
-    );
-    }
-    ```
-</TabItem>
-
-<TabItem value="size" label="Size">
-    Размер `Dropdown` задается с помощью свойства `size`.<br />
-    Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
-
-    ```tsx live
-    import React from 'react';
-    import { Button, Dropdown } from '@salutejs/{{ package }}';
-
-    export function App() {
-    const items = [
-{
-    value: 'north_america',
-    label: 'Северная Америка',
-},
-{
-    value: 'south_america',
-    label: 'Южная Америка',
-    items: [
-{
-    value: 'brazil',
-    label: 'Бразилия',
-    items: [
-{
-    value: 'rio_de_janeiro',
-    label: 'Рио-де-Жанейро',
-},
-{
-    value: 'sao_paulo',
-    label: 'Сан-Паулу',
-},
-    ],
-},
-{
-    value: 'argentina',
-    label: 'Аргентина',
-},
-    ],
-},
-    ];
-
-    return (
-    <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
-    <Dropdown
-        items={items}
-        size="l"
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-
-    <Dropdown
-        items={items}
-        size="m" // default
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-
-    <Dropdown
-        items={items}
-        size="s"
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-
-    <Dropdown
-        items={items}
-        size="xs"
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-</div>
-);
-}
-```
-</TabItem>
-
-<TabItem value="placement" label="Placement">
-    Параметр `placement` принимает либо строку: `"top"`,  `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
-    Default value для placement - `"bottom"`.
-
-    ```tsx live
-    import React from 'react';
-    import { Button, Dropdown } from '@salutejs/{{ package }}';
-
-    export function App() {
-    const items = [
-{
-    value: 'north_america',
-    label: 'Северная Америка',
-},
-{
-    value: 'south_america',
-    label: 'Южная Америка',
-    items: [
-{
-    value: 'brazil',
-    label: 'Бразилия',
-    items: [
-{
-    value: 'rio_de_janeiro',
-    label: 'Рио-де-Жанейро',
-},
-{
-    value: 'sao_paulo',
-    label: 'Сан-Паулу',
-},
-    ],
-},
-{
-    value: 'argentina',
-    label: 'Аргентина',
-},
-    ],
-},
-    ];
-
-    return (
-    <div style=\{{ height: "300px", display: "flex", gap: "50px" }}>
-    <Dropdown
-        items={items}
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-
-    <Dropdown
-        items={items}
-        placement="right"
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-
-    <Dropdown
-        items={items}
-        placement="left"
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-
-    <Dropdown
-        items={items}
-        placement={['top', 'bottom']}
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-</div>
-);
-}
-```
-</TabItem>
-
-<TabItem value="trigger" label="Trigger">
-    Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
-    Default value - `"click"`.<br />
-    Для примера показано значение `"hover"`.
-
-    ```tsx live
-    import React from 'react';
-    import { Button, Dropdown } from '@salutejs/{{ package }}';
-
-    export function App() {
-    const items = [
-{
-    value: 'north_america',
-    label: 'Северная Америка',
-},
-{
-    value: 'south_america',
-    label: 'Южная Америка',
-    items: [
-{
-    value: 'brazil',
-    label: 'Бразилия',
-    items: [
-{
-    value: 'rio_de_janeiro',
-    label: 'Рио-де-Жанейро',
-},
-{
-    value: 'sao_paulo',
-    label: 'Сан-Паулу',
-},
-    ],
-},
-{
-    value: 'argentina',
-    label: 'Аргентина',
-},
-    ],
-},
-    ];
-
-
-    return (
-    <div style=\{{ height:"300px" }}>
-    <Dropdown
-        items={items}
-        trigger="hover"
-    >
-        <Button text="Список стран" />
-    </Dropdown>
-</div>
-);
-}
-```
-</TabItem>
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                            items: [
+                                {
+                                    value: 'rio_de_janeiro',
+                                    label: 'Рио-де-Жанейро',
+                                },
+                                {
+                                    value: 'sao_paulo',
+                                    label: 'Сан-Паулу',
+                                },
+                            ],
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+
+            return (
+                <div style={{ height:"300px" }}>
+                    <Dropdown
+                        items={items}
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="size" label="Size">
+        Размер `Dropdown` задается с помощью свойства `size`.<br />
+        Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`.
+
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                            items: [
+                                {
+                                    value: 'rio_de_janeiro',
+                                    label: 'Рио-де-Жанейро',
+                                },
+                                {
+                                    value: 'sao_paulo',
+                                    label: 'Сан-Паулу',
+                                },
+                            ],
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                    <Dropdown
+                        items={items}
+                        size="l"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        size="m" // default
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        size="s"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        size="xs"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="placement" label="Placement">
+        Параметр `placement` принимает либо строку: `"top"`,  `"right"`, `"bottom"`, `"left"`, `"auto"`, либо массив этих же значений, например: `["top", "bottom"]`.<br />
+        Default value для placement - `"bottom"`.
+
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                            items: [
+                                {
+                                    value: 'rio_de_janeiro',
+                                    label: 'Рио-де-Жанейро',
+                                },
+                                {
+                                    value: 'sao_paulo',
+                                    label: 'Сан-Паулу',
+                                },
+                            ],
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+            return (
+                <div style={{ height: "300px", display: "flex", gap: "50px" }}>
+                    <Dropdown
+                        items={items}
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        placement="right"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        placement="left"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+
+                    <Dropdown
+                        items={items}
+                        placement={['top', 'bottom']}
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="trigger" label="Trigger">
+        Параметр `trigger` принимает строку: `"click"` или `"hover"`.<br />
+        Default value - `"click"`.<br />
+        Для примера показано значение `"hover"`.
+
+        ```tsx live
+        import React from 'react';
+        import { Button, Dropdown } from '@salutejs/plasma-web';
+
+        export function App() {
+            const items = [
+                {
+                    value: 'north_america',
+                    label: 'Северная Америка',
+                },
+                {
+                    value: 'south_america',
+                    label: 'Южная Америка',
+                    items: [
+                        {
+                            value: 'brazil',
+                            label: 'Бразилия',
+                            items: [
+                                {
+                                    value: 'rio_de_janeiro',
+                                    label: 'Рио-де-Жанейро',
+                                },
+                                {
+                                    value: 'sao_paulo',
+                                    label: 'Сан-Паулу',
+                                },
+                            ],
+                        },
+                        {
+                            value: 'argentina',
+                            label: 'Аргентина',
+                        },
+                    ],
+                },
+            ];
+
+
+            return (
+                <div style={{ height:"300px" }}>
+                    <Dropdown
+                        items={items}
+                        trigger="hover"
+                    >
+                        <Button text="Список стран" />
+                    </Dropdown>
+                </div>
+            );
+        }
+        ```
+    </TabItem>
 </Tabs>
 
 ## Клавиатурная навигация
 
 Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
 
-- `Tab` - закрывает dropdown. Перемещает фокус на следующий элемент на странице;
-- `Enter` - открывает/закрывает dropdown. Если на элементе - выбирает его;
-- `Space` - открывает/закрывает dropdown. Если на элементе - выбирает его;
-- `Home` - открывает dropdown и перемещает фокус на первый элемент;
-- `End` - открывает dropdown и перемещает фокус на последний элемент;
+- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
+- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
+- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
+- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
+- `End` - открывает дропдаун и перемещает фокус на последний элемент;
 - `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
 - `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
-- `ArrowUp` - открывает dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
-- `ArrowDown` - открывает dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
+- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
+- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
 - `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
 - `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;

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

@@ -16,7 +16,7 @@ import { Image } from '@salutejs/{{ package }}';
 export function App() {
     return (
         <Image
-            src="/{{ package }}/images/320_320_9.jpg"
+            src="/web/images/320_320_9.jpg"
             width="320px"
             height="320px"
             alt="Картинка для примера фоном"

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

@@ -11,13 +11,13 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { TextS, Link } from '@salutejs/{{ package }}';
+import { P1, Link } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <TextS>
-            Скачайте <Link href="/" target="_blank">приложение.</Link>
-        </TextS>
+        <P1>
+            Скачайте <Link href="/" target="_blank">приложение</Link>.
+        </P1>
     );
 }
 ```