feat(plasma-new-hope): fixes

salute-developers · May 7, 2024 · 096ef08 · 096ef08
1 parent 6c27397
commit 096ef08
Show file tree

Hide file tree

Showing 2 changed files with 370 additions and 28 deletions.
diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx
@@ -0,0 +1,339 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+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. Формат следующий:
+
+```tsx
+type Items = Array<{
+        /**
+         *  Значение у item
+         */
+        value: string | number;
+        /**
+         * Метка-подпись к item
+         */
+        label: string;
+        /**
+         * Список дочерних items.
+         */
+        items?: Items;
+        /**
+         * Item не активен
+         */
+        disabled?: boolean;
+        /**
+         * Слот для контента слева
+         */
+        contentLeft?: ReactNode;
+        /**
+         * Слот для контента справа
+         */
+        contentRight?: ReactNode;
+        /**
+         * Выбранный item.
+         * @deprecated использовать ContentLeft || ContentRight
+         */
+        isActive?: boolean;
+        /**
+         * Кастомный цвет текста
+         * @deprecated
+         */
+        color?: string;
+        /**
+         * Айтем не активен
+         * @deprecated использовать disabled
+         */
+        isDisabled?: boolean;
+    }>;
+```
+
+## Примеры
+
+<Tabs>
+    <TabItem value="default" label="Default" default>
+        ```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}
+                    >
+                        <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` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
+- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
+- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его;
+- `Home` - открывает дропдаун и перемещает фокус на первый элемент;
+- `End` - открывает дропдаун и перемещает фокус на последний элемент;
+- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
+- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
+- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше. Если фокус на первом элементе - то в конец списка;
+- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже. Если фокус на последнем элементе - то в начало списка;
+- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
+- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий;