fix(Pagination): updated storybook controls with a playground

carbon-design-system · Nov 11, 2022 · 33302de · 33302de
1 parent 33e47f3
commit 33302de
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/react/src/components/Pagination/Pagination.mdx b/packages/react/src/components/Pagination/Pagination.mdx
@@ -1,4 +1,5 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Props, Source, Preview } from '@storybook/addon-docs';
+import { Pagination } from '.';
 
 # Pagination
 
@@ -10,8 +11,16 @@ import { Props } from '@storybook/addon-docs';
 
 ## Table of Contents
 
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
 ## Overview
 
+<Preview>
+  <Story id="components-pagination--default" />
+</Preview>
+
 ## Component API
 
 <Props />

diff --git a/packages/react/src/components/Pagination/Pagination.stories.js b/packages/react/src/components/Pagination/Pagination.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import mdx from './Pagination.mdx';
 
 import Pagination from './Pagination';
 
@@ -35,9 +36,29 @@ export default {
       </div>
     ),
   ],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
-export const Default = () => <Pagination {...props()} />;
+export const Default = () => (
+  <Pagination
+    disabled={false}
+    page={1}
+    totalItems={103}
+    pagesUnknown={false}
+    pageInputDisabled={undefined}
+    pageSizeInputDisabled={undefined}
+    backwardText={'Previous page'}
+    forwardText={'Next page'}
+    pageSize={10}
+    pageSizes={[10, 20, 30, 40, 50]}
+    itemsPerPageText={'Items per page:'}
+    onChange={action('onChange')}
+  />
+);
 
 export const MultiplePaginationComponents = () => {
   return (