# SubComponents

### Page

The following components extend the native [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the tables.

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This subcomponent will always receive the following subcomponents:

* **PageContent**
* **PageContentFooter**
* **PageHeader**
* **PageHeaderActions**
* **PageHeaderNavigation**
* **PageHeaderNavigationButton**

</details>

### PageContent

| Props        | Type        | Required |
| ------------ | ----------- | -------- |
| `children`   | `ReactNode` | ✅        |
| `hasPadding` | `boolean`   | ❌        |

<details>

<summary>children</summary>

The content that is shown. This subcomponent receives an structure to render, and as a footer, the following subcomponent as children:

* **PageContentFooter**

</details>

<details>

<summary>hasPadding</summary>

To add/remove the default padding.

</details>

### PageContentFooter

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

The footer of the page content.

</details>

### PageHeader

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This subcomponent will always receive the following subcomponents:

* **PageHeaderTitle**
* **PageHeaderNavigation**
* **PageHeaderActions**

</details>

### PageHeaderActions

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

Normally call to action elements passed as child.

</details>

### PageHeaderNavigation

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

Used to navigate trough the page.

</details>

### PageHeaderNavigationButton

This subcomponent extends the SDS [Button](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/button/code) API. Always a 'ghost' button.

### PageHeaderTitle

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

A node passed to render a title.

</details>

### Sidebar

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

This subcomponent receives the following subcomponents as child:

* SidebarHeader
* SidebarContent

</details>

### SidebarContent

<details>

<summary>children</summary>

Used to render content inside the sidebar.

</details>

### SidebarContentDivider

Just to add a divider in the Sidebar. Extend the 'div' props.

### SidebarContentGroup

| Props             | Type                             | Required |
| ----------------- | -------------------------------- | -------- |
| `children`        | `ReactNode`                      | ✅        |
| `variant`         | `'static' \| 'accordion'`        | ❌        |
| `heading`         | `string`                         | ❌        |
| `defaultExpanded` | `boolean`                        | ❌        |
| `isExpanded`      | `boolean`                        | ❌        |
| `onClick`         | `(e: React.MouseEvent) => void;` | ❌        |

<details>

<summary>children</summary>

To create a group inside the sidebarcontent.

</details>

<details>

<summary>variant</summary>

To change the behavior of the ContentGroup. If static, it's always expanded.

</details>

<details>

<summary>heading</summary>

To pass a title.

</details>

<details>

<summary>defaultExpanded and isExpanded</summary>

The default expanded prop is used when having an uncontrolled approach. The isExpanded prop is used when using a controlled approach.

</details>

<details>

<summary>onClick</summary>

Mainly used to change the state, when clicked, and updating the isExpanded prop.

</details>

### SidebarContentGroupActions

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

To add actions to a group inside the sidebarcontent.

</details>

### SidebarContentGroupActionsButton

This subcomponent extends the SDS [Button](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/button/code) API. Always a 'ghost' button. Should be used inside a SidebarContentGroupActions. It is not required to use this button, but recommended. `iconOnly` variant used.

| Props  | Type                                                        | Required |
| ------ | ----------------------------------------------------------- | -------- |
| `icon` | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/) | ✅        |

### SidebarContentGroupItem

| Props                     | Type                                                                                                                                      | Required |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `children`                | `ReactNode`                                                                                                                               | ✅        |
| `icon`                    | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                                               | ❌        |
| `avatar`                  | `string`                                                                                                                                  | ❌        |
| `avatarProfilePic`        | `string`                                                                                                                                  | ❌        |
| `isLoading`               | `boolean`                                                                                                                                 | ❌        |
| `isActive`                | `boolean`                                                                                                                                 | ❌        |
| `notification`            | `string`                                                                                                                                  | ❌        |
| `notificationColor`       | `\| 'neutral' \| 'inverted' \| 'blue' \| 'green' \| 'yellow' \| 'red' \| 'indigo' \| 'purple' \| 'lime' \| 'teal' \| 'orange' \| 'pink';` | ❌        |
| `collapseSidebarOnMobile` | `() => void`                                                                                                                              | ❌        |

<details>

<summary>children</summary>

To create an item inside a group.

</details>

<details>

<summary>icon</summary>

To render a custom icon, right next to the string passed.

</details>

<details>

<summary>avatar</summary>

To load an avatar instead of an icon.

</details>

<details>

<summary>avatarProfilePic</summary>

If using an avatar, to pass a profile picture.

</details>

<details>

<summary>isLoading and isActive</summary>

The isLoading prop, overrides the icon, to a loading icon. The isActive prop, should be use in a controlled way, normally.

</details>

<details>

<summary>notification</summary>

To add a notification badge.

</details>

<details>

<summary>notificationColor</summary>

To add a notification badge color.

</details>

<details>

<summary>collapseSidebarOnMobile</summary>

Method executed when using a mobile resolution (below 767px).

</details>

### SidebarHeader

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

Used to render a header inside the sidebar.

</details>

### TabBar

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

To render the tabbar.

</details>

### TabBarItem

| Props               | Type                                                                                                                                      | Required |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `icon`              | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                                               | ✅        |
| `notifcation`       | `string`                                                                                                                                  | ❌        |
| `notificationColor` | `\| 'neutral' \| 'inverted' \| 'blue' \| 'green' \| 'yellow' \| 'red' \| 'indigo' \| 'purple' \| 'lime' \| 'teal' \| 'orange' \| 'pink';` | ❌        |
| `isActive`          | `boolean`                                                                                                                                 | ❌        |

<details>

<summary>icon</summary>

To pass a custom icon.

</details>

<details>

<summary>isActive</summary>

The isActive prop, should be use in a controlled way, normally, to set an active state..

</details>

<details>

<summary>notification</summary>

To add a notification badge.

</details>

<details>

<summary>notificationColor</summary>

To add a notification badge color.

</details>