diff --git a/src/components/Notifications/Notifications.tsx b/src/components/Notifications/Notifications.tsx index 961e7716..9b7e42c3 100644 --- a/src/components/Notifications/Notifications.tsx +++ b/src/components/Notifications/Notifications.tsx @@ -36,9 +36,21 @@ export const Notifications = React.memo(function Notifications(props: Notificati ); } else if (props.errorContent) { - content = ; + content = ( + + ); } else { - content = ; + content = ( + + ); } return ( diff --git a/src/components/Notifications/NotificationsEmptyState.tsx b/src/components/Notifications/NotificationsEmptyState.tsx index 2527e8a0..1dea598f 100644 --- a/src/components/Notifications/NotificationsEmptyState.tsx +++ b/src/components/Notifications/NotificationsEmptyState.tsx @@ -12,14 +12,14 @@ const b = block('notifications'); const nothingFoundSvg = ``; -type Props = {image?: React.ReactNode; content: React.ReactNode}; +type Props = {image?: React.ReactNode; title?: React.ReactNode; content?: React.ReactNode}; export const NotificationsEmptyState = React.memo(function NotificationsEmptyState(props: Props) { return (
{props.image ? props.image : }
-
{i18n('no-notifications')}
+
{props.title || i18n('no-notifications')}
{props.content ? (
{props.content}
) : null} diff --git a/src/components/Notifications/NotificationsErrorState.tsx b/src/components/Notifications/NotificationsErrorState.tsx index ae4b591b..decacf0f 100644 --- a/src/components/Notifications/NotificationsErrorState.tsx +++ b/src/components/Notifications/NotificationsErrorState.tsx @@ -12,14 +12,14 @@ const b = block('notifications'); const errorSvg = ``; -type Props = {image?: React.ReactNode; content: React.ReactNode}; +type Props = {image?: React.ReactNode; title?: React.ReactNode; content?: React.ReactNode}; export const NotificationsErrorState = React.memo(function NotificationsEmptyState(props: Props) { return (
{props.image ? props.image : }
-
{i18n('notifications-error')}
+
{props.title || i18n('notifications-error')}
{props.content ? (
{props.content}
) : null} diff --git a/src/components/Notifications/README.md b/src/components/Notifications/README.md index 3911984e..819443a0 100644 --- a/src/components/Notifications/README.md +++ b/src/components/Notifications/README.md @@ -43,19 +43,21 @@ For more code examples go to [Notifications.stories.tsx](https://github.com/grav **Notifications** — renders notifications and actions on these notifications. -| Property | Type | Required | Default | Description | -| :-------------------------- | :-------------------- | :------: | :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | -| `notifications` | `NotificationProps[]` | `true` | | List of Notifications to display. [Notification' types](https://github.com/gravity-ui/components/blob/main/src/components/Notification/definitions.ts) | -| `title` | `ReactNode` | | `"Notifications"` | Notifications' title | -| `actions` | `ReactNode` | | | Notifications' actions (e.g. create new, mark all as read) | -| `areAllNotificationsLoaded` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications | -| `onLoadMoreNotifications` | `() => Promise` | | `noop` | Callback is called when the user scrolls to the end (so you can fetch more notifications) | -| `isLoading` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications | -| `errorContent` | `ReactNode` | | | Used for the Error state (the message under the «Error») | -| `errorImage` | `ReactNode` | | | Custom image for the Error state | -| `emptyContent` | `ReactNode` | | | Same as `errorContent`, but for the Empty state | -| `emptyImage` | `ReactNode` | | | Custom image for the Empty state | -| `swipeThreshold` | `number` | | 0.4 | A value from 0 to 1 — the more the harder it is to swipe | +| Property | Type | Required | Default | Description | +| :-------------------------- | :-------------------- | :------: | :------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | +| `notifications` | `NotificationProps[]` | `true` | | List of Notifications to display. [Notification' types](https://github.com/gravity-ui/components/blob/main/src/components/Notification/definitions.ts) | +| `title` | `ReactNode` | | `"Notifications"` | Notifications' title | +| `actions` | `ReactNode` | | | Notifications' actions (e.g. create new, mark all as read) | +| `areAllNotificationsLoaded` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications | +| `onLoadMoreNotifications` | `() => Promise` | | `noop` | Callback is called when the user scrolls to the end (so you can fetch more notifications) | +| `isLoading` | `boolean` | | `false` | When `true` renders a Loader instead of the notifications | +| `errorTitle` | `ReactNode` | | `"Error"` | Notifications' error state title | +| `errorContent` | `ReactNode` | | | Used for the Error state (the message under the «Error») | +| `errorImage` | `ReactNode` | | | Custom image for the Error state | +| `emptyTitle` | `ReactNode` | | `"No notifications"` | Notifications' empty state title | +| `emptyContent` | `ReactNode` | | | Same as `errorContent`, but for the Empty state | +| `emptyImage` | `ReactNode` | | | Custom image for the Empty state | +| `swipeThreshold` | `number` | | 0.4 | A value from 0 to 1 — the more the harder it is to swipe | **Notification** — renders a notification with actions (side/bottom/swipe). diff --git a/src/components/Notifications/definitions.ts b/src/components/Notifications/definitions.ts index 13d0402b..5b6965bc 100644 --- a/src/components/Notifications/definitions.ts +++ b/src/components/Notifications/definitions.ts @@ -12,9 +12,11 @@ export type NotificationsProps = { isLoading?: boolean; + errorTitle?: React.ReactNode; errorContent?: React.ReactNode; errorImage?: React.ReactNode; + emptyTitle?: React.ReactNode; emptyContent?: React.ReactNode; emptyImage?: React.ReactNode;