Adds stories for the Pagination component (#3037)

* adds stories for the Pagination component

* adds Storybook link to docs frontmatter

* Update generated/components.json

* adds Pagination to Storybook test allowList

---------

Co-authored-by: mperrotti <[email protected]>

Author: mperrotti

docs/content/Pagination.md

@@ -3,6 +3,7 @@ title: Pagination
 componentId: pagination
 description: Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
 source: https://github.com/primer/react/blob/main/src/Pagination/Pagination.tsx
+storybook: '/react/storybook?path=/story/components-pagination-features--hide-page-numbers'
 status: Alpha
 ---
 

generated/components.json

@@ -3106,7 +3106,12 @@
       "name": "Pagination",
       "status": "alpha",
       "a11yReviewed": false,
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-pagination--default",
+          "code": "() => (\n  <Pagination\n    pageCount={15}\n    currentPage={2}\n    onPageChange={(e) => e.preventDefault()}\n  />\n)"
+        }
+      ],
       "props": [
         {
           "name": "currentPage",

src/Pagination/Pagination.features.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {ComponentProps} from '../utils/types'
+import Pagination from './Pagination'
+
+export default {
+  title: 'Components/Pagination/Features',
+  component: Pagination,
+} as Meta<ComponentProps<typeof Pagination>>
+
+export const LargerPageCountMargin = () => (
+  <Pagination pageCount={15} currentPage={5} marginPageCount={4} onPageChange={e => e.preventDefault()} />
+)
+
+export const HidePageNumbers = () => (
+  <Pagination pageCount={15} currentPage={5} showPages={false} onPageChange={e => e.preventDefault()} />
+)
+
+export const HigherSurroundingPageCount = () => (
+  <Pagination pageCount={15} currentPage={5} surroundingPageCount={4} onPageChange={e => e.preventDefault()} />
+)

src/Pagination/Pagination.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {Meta, Story} from '@storybook/react'
+import {ComponentProps} from '../utils/types'
+import Pagination from './Pagination'
+
+export default {
+  title: 'Components/Pagination',
+  component: Pagination,
+} as Meta<ComponentProps<typeof Pagination>>
+
+export const Default = () => <Pagination pageCount={15} currentPage={2} onPageChange={e => e.preventDefault()} />
+
+export const Playground: Story<ComponentProps<typeof Pagination>> = args => (
+  <Pagination onPageChange={e => e.preventDefault()} {...args} />
+)
+
+Playground.args = {
+  currentPage: 5,
+  marginPageCount: 1,
+  pageCount: 15,
+  showPages: true,
+  surroundingPageCount: 2,
+}
+Playground.argTypes = {
+  hrefBuilder: {
+    control: false,
+    table: {
+      disable: true,
+    },
+  },
+  onPageChange: {
+    control: false,
+    table: {
+      disable: true,
+    },
+  },
+  theme: {
+    control: false,
+    table: {
+      disable: true,
+    },
+  },
+}

src/__tests__/storybook.test.tsx

@@ -27,6 +27,7 @@ const allowlist = [
   'FilteredActionList',
   'Link',
   'Pagehead',
+  'Pagination',
   'Radio',
   'RadioGroup',
   'Select',