diff --git a/README.md b/README.md index b28960b..b488d3e 100644 --- a/README.md +++ b/README.md @@ -22,12 +22,12 @@ npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/icons@2.2.0 @gravity-ui/ - MobileHeader - FooterItem - MobileHeaderFooterItem -- Drawer +- [Drawer](/src/components/Drawer/README.md) - DrawerItem - PageLayout - PageLayoutAside - AsideFallback -- Logo +- [Logo](/src/components/Logo/Readme.md) - MobileLogo - Footer - MobileFooter diff --git a/src/components/AsideHeader/README.md b/src/components/AsideHeader/README.md index 316dd6a..0662c66 100644 --- a/src/components/AsideHeader/README.md +++ b/src/components/AsideHeader/README.md @@ -8,6 +8,14 @@ Including additional components like `FooterItem`, `Drawer`. import {AsideHeader} from '@gravity-ui/navigation'; ``` +## Rendering Content + +`WIP` + +## Rendering Footer + +`WIP` + ## Rendering optimization If your app content needs to be rendered faster than by passing it throw `AsideHeader` props, @@ -47,14 +55,58 @@ export const Aside: FC = () => { ## Properties -| Name | Description | Type | Default | -| :------------------------ | :--------------------------------------------- | :--------------------------------------------------------------------------------------: | :-----: | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | -| ref | `ref` to target popup anchor | `React.ForwardedRef` | | -| logo | | [Logo](https://github.com/gravity-ui/navigation/blob/main/src/components/Logo/Readme.md) | | -| customBackground | `AsideHeader`` background | `React.ReactNode` | | | | | | | | | | | | | | | | | | | | | | -| customBackgroundClassName | Override default background container's styles | `string` | | +| Name | Description | Type | Default | +| :------------------------ | :----------------------------------------------------------------------------------- | :-----------------------------------------------------------: | :---------------------: | +| className | HTML `class` attribute of the Logo | `string` | | +| collapseTitle | `CollapseButton` title for collapsing navigation | `string` | `"Свернуть" "Collapse"` | +| compact | Navigation visual state | `boolean` | `false` | +| customBackground | `AsideHeader` background | `React.ReactNode` | | +| customBackgroundClassName | Override default background container's styles | `string` | | +| expandTitle | `CollapseButton` title for expanding navigation | `string` | `"Развернуть" "Expand"` | +| headerDecoration | Color background of the top section with logo and subheader items | `boolean` | | +| hideCollapseButton | Hiding `CollapseButton`. Use `compact` prop for setting default navigation state | `boolean` | `false` | +| logo | Logo container includes icon, title, handling clicks | [`Logo`](./../Logo/Readme.md#logo) | | +| menuItems | Items in the navigation middle section | `Array` | `[]` | +| menuMoreTitle | Additional element title of menuItems if elements don't fit | `string` | `"Ещё" "More"` | +| multipleTooltip | Show multiple tooltip by hovering elements of menuItems | `boolean` | `false` | +| onChangeCompact | Callback will be called when changing navigation visual state | `(compact: boolean) => void;` | | +| onClosePanel | Callback will be called when closing panel. You can add panels via `panelItems` prop | `() => void;` | | +| onMenuItemsChanged | Callback will be called when updating list of the menuItems in AllPagesPanel | `(items: Array) => void` | | +| openModalSubscriber | Function notifies `AsideHeader` about Modals visibility changes. (Example wip) | `( (open: boolean) => void) => void` | | +| panelItems | Items for `Drawer` component. Used for show additional information over main content | Array<[`DrawerItem`](./../Drawer/README.md#draweritem-props)> | `[]` | +| renderContent | Function rendering main content at right of the `AsideHeader` | `(data: {size: number}) => React.ReactNode` | | +| renderFooter | Function rendering navigation bottom section | `(data: {size: number}) => React.ReactNode` | | +| ref | `ref` to target popup anchor | `React.ForwardedRef` | | +| subheaderItems | Items in the navigation top section under Logo | `Array` | `[]` | +| topAlert | Container above the navigation based on uikit `Alert` component | `TopAlert` | | +| qa | The value to be passed to `data-qa` attribute of the `AsideHeader` container | `string` | | + +### `MenuItem` + +`WIP` + +### `SubheaderItem` + +`WIP` + +### `TopAlert` + +`WIP` + +| Name | Description | Type | Default | +| :-------------- | :---------- | :------------------------------------------------------------------------------------------------: | :-----: | +| actions | | [`AlertActions`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#properties) | | +| centered | | `boolean` | | +| closable | | `boolean` | | +| dense | | `boolean` | | +| icon | | [`AlertIcon`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#properties) | | +| message | | [`AlertMessage`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#alert-message) | | +| onCloseTopAlert | | `() => void` | | +| title | | [`AlertTitle`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#alert-title) | | +| theme | | [`AlertTheme`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#theme) | | +| view | | [`AlertView`](https://github.com/gravity-ui/uikit/tree/main/src/components/Alert#view) | | -### CSS API +## CSS API | Name | Description | Default | | :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: | diff --git a/src/components/Drawer/README.md b/src/components/Drawer/README.md index 81fd89f..d1a5be4 100644 --- a/src/components/Drawer/README.md +++ b/src/components/Drawer/README.md @@ -45,7 +45,7 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`. | content | (deprecated) use children. Content to be displayed within the drawer item. | `React.ReactNode` | | | visible | Determines whether the drawer item is visible or hidden. | `boolean` | | | direction | Specifies the direction from which the drawer should slide in (left or right). | `DrawerDirection` | `left` | -| className | Additional custom class name applied to the drawer item. | `string` | | +| className | HTML `class` attribute | `string` | | ### `Drawer` Props diff --git a/src/components/Logo/Readme.md b/src/components/Logo/Readme.md index 7d2da0c..a51fff9 100644 --- a/src/components/Logo/Readme.md +++ b/src/components/Logo/Readme.md @@ -9,7 +9,7 @@ Logo icon is wrapped in UIKit Button, text is wrapped in HTML tag `a` or `div`, | buttonClassName | HTML `class` for UIKit Button | `string` | | | buttonWrapperClassName | HTML `class` attribute for UIKit Button wrapper | `string` | | | compact | Logo view state: `true` shows icon, `false` — icon and text | `boolean` | | -| className | HTML `class` attribute of the Logo container | `string` | | +| className | HTML `class` attribute | `string` | | | href | HTML `href` attribute for UIKit Button in the compact state and HTML tag `a` for the collapsed state without defining `hasWrapper` prop | `string` | | | icon | | [IconProps['data']](https://github.com/gravity-ui/uikit/blob/610e49b6d4b9d1b4eae46841a9c1ab87ccc591fb/src/components/Icon/Icon.tsx#L26) | | | iconClassName | HTML `class` attribute of the icon container | `string` | |