Skip to content

Commit

Permalink
docs(AsideHeader): add properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lunory
Lunory committed Jul 16, 2024
1 parent b920541 commit 964ed0b
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 11 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ npm install --dev @gravity-ui/uikit@^6.15.0 @gravity-ui/[email protected] @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
Expand Down
66 changes: 59 additions & 7 deletions src/components/AsideHeader/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -47,14 +55,58 @@ export const Aside: FC = () => {

## Properties

| Name | Description | Type | Default |
| :------------------------ | :--------------------------------------------- | :--------------------------------------------------------------------------------------: | :-----: | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| ref | `ref` to target popup anchor | `React.ForwardedRef<HTMLDivElement, AsideHeaderProps>` | |
| 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<MenuItem>` | `[]` |
| 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<MenuItem>) => 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<HTMLDivElement, AsideHeaderProps>` | |
| subheaderItems | Items in the navigation top section under Logo | `Array<SubheaderItem>` | `[]` |
| 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 |
| :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: |
Expand Down
2 changes: 1 addition & 1 deletion src/components/Drawer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion src/components/Logo/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | |
Expand Down

0 comments on commit 964ed0b

Please sign in to comment.