chore(pagination): add playground stories for stable and unstable pag…

…ination (#12441)

* chore(pagination): add playground story

closes #12272

* chore(unstable_pagination): add playground story

* chore: add itemtext false

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/Pagination/Pagination.stories.js

@@ -98,3 +98,99 @@ export const PaginationWithCustomPageSizesLabel = (args) => {
 
 PaginationWithCustomPageSizesLabel.storyName =
   'Pagination with custom page sizes label';
+
+export const Playground = (args) => <Pagination {...args} />;
+
+Playground.argTypes = {
+  className: {
+    control: false,
+  },
+  id: {
+    control: false,
+  },
+  itemText: {
+    control: false,
+  },
+  backwardText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Previous page',
+  },
+  forwardText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Next page',
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  isLastPage: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  itemsPerPageText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Items per page:',
+  },
+  page: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 1,
+  },
+  pageInputDisabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  pageSize: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 10,
+  },
+  pageSizes: {
+    control: {
+      type: 'array',
+    },
+    defaultValue: [10, 20, 30, 40, 50],
+  },
+  pageNumberText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Page Number',
+  },
+  pagesUnknown: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  pageSizeInputDisabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
+  totalItems: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 103,
+  },
+};

packages/react/src/components/Pagination/experimental/Pagination-story.js

@@ -17,7 +17,7 @@ import {
 import {
   unstable_PageSelector as PageSelector,
   unstable_Pagination as Pagination,
-} from '../../../';
+} from '../../..';
 
 const props = () => ({
   disabled: boolean('Disable backward/forward buttons (disabled)', false),
@@ -74,3 +74,71 @@ export const WithNoSizerChildInputOrChildSelector = () => (
 
 WithNoSizerChildInputOrChildSelector.storyName =
   'with no sizer, child input, or child selector';
+
+export const Playground = (args) => <Pagination {...args} />;
+
+Playground.argTypes = {
+  className: {
+    control: false,
+  },
+  children: {
+    control: false,
+  },
+  id: {
+    control: false,
+  },
+  itemText: {
+    control: false,
+  },
+  forwardText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Next page',
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  itemRangeText: {
+    control: false,
+  },
+  itemsPerPageText: {
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Items per page:',
+  },
+  initialPage: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 1,
+  },
+  pageSize: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 10,
+  },
+  pageSizes: {
+    control: {
+      type: 'array',
+    },
+    defaultValue: [10, 20, 30, 40, 50],
+  },
+  pagesUnknown: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: 'false',
+  },
+  totalItems: {
+    control: {
+      type: 'number',
+    },
+    defaultValue: 350,
+  },
+};