Pagination: refactored story from knobs to controls (#33045)

packages/grafana-ui/src/components/Pagination/Pagination.story.tsx

@@ -1,22 +1,47 @@
 import React, { useState } from 'react';
-import { number } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Pagination } from '@grafana/ui';
 import mdx from './Pagination.mdx';
-
-export const WithPages = () => {
-  const [page, setPage] = useState(1);
-  const numberOfPages = number('Number of pages', 5);
-  return <Pagination numberOfPages={numberOfPages} currentPage={page} onNavigate={setPage} />;
-};
+import { Props } from './Pagination';
 
 export default {
   title: 'Buttons/Pagination',
-  component: WithPages,
+  component: Pagination,
   decorators: [withCenteredStory],
   parameters: {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+    controls: {
+      exclude: ['currentPage', 'onNavigate'],
+    },
   },
+  argTypes: {
+    numberOfPages: {
+      control: {
+        type: 'number',
+        min: 1,
+      },
+    },
+  },
+};
+
+export const WithPages: Story<Props> = ({ numberOfPages, hideWhenSinglePage }) => {
+  const [page, setPage] = useState(1);
+  return (
+    <Pagination
+      numberOfPages={numberOfPages}
+      currentPage={page}
+      onNavigate={setPage}
+      hideWhenSinglePage={hideWhenSinglePage}
+    />
+  );
+};
+WithPages.args = {
+  numberOfPages: 5,
+  hideWhenSinglePage: false,
 };

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

@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
 
 const PAGE_LENGTH_TO_CONDENSE = 8;
 
-interface Props {
+export interface Props {
   /** The current page index being shown.  */
   currentPage: number;
   /** Number of total pages.  */