From 873c32bc97cdc78d261cacae4bcd3c60b1308ff3 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Fri, 9 Oct 2020 16:45:16 +0200
Subject: [PATCH] Docs: Pagination component (#28143)

* Add basic docs for pagination component

* Update packages/grafana-ui/src/components/Pagination/Pagination.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update packages/grafana-ui/src/components/Pagination/Pagination.mdx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .../src/components/Pagination/Pagination.mdx  | 19 ++++++++++++++++---
 .../src/components/Pagination/Pagination.tsx  |  3 +++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.mdx b/packages/grafana-ui/src/components/Pagination/Pagination.mdx
index 726ca63a354..aa4f92bf277 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.mdx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.mdx
@@ -1,8 +1,21 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { Pagination } from './Pagination';
 
-# Pagination
-
 <Meta title="MDX|Pagination" component={Pagination} />
 
-<Props of={Pagination}/>
\ No newline at end of file
+# Pagination
+Component used for rendering a page selector below paginated content.
+
+### Usage
+
+```tsx
+<div>
+  <div>
+    Page 1 content
+  </div>
+  <Pagination currentPage={1} numberOfPages={5} onNavigate={() => fetchPage(2)} />
+</div>
+```
+
+
+<Props of={Pagination} />
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index 3532210b0c3..febdb843334 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -4,8 +4,11 @@ import { stylesFactory } from '../../themes';
 import { Button, ButtonVariant } from '../Button';
 
 interface Props {
+  /** The current page index being shown.  */
   currentPage: number;
+  /** Number of total pages.  */
   numberOfPages: number;
+  /** Callback function for fetching the selected page  */
   onNavigate: (toPage: number) => void;
 }