From 4fbcfc7e9b38142da147c53ae65aa9fdac204193 Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Wed, 8 Jan 2025 11:07:06 -0500
Subject: [PATCH] feat(components): add pagination recipe

---
 .../stories/composition.stories.tsx           | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/components/stories/composition.stories.tsx b/packages/components/stories/composition.stories.tsx
index 6a2827ee0..c79e01633 100644
--- a/packages/components/stories/composition.stories.tsx
+++ b/packages/components/stories/composition.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import type { ComponentPropsWithoutRef } from 'react';
 
+import { Box } from '@launchpad-ui/box';
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
 import { expect, userEvent, within } from '@storybook/test';
@@ -271,3 +272,21 @@ export const TagWithOverlay: Story = {
 		);
 	},
 };
+
+export const Pagination: Story = {
+	render: () => {
+		return (
+			<Box display="flex" alignItems="center">
+				<IconButton icon="chevrons-left" size="small" variant="minimal" aria-label="first" />
+				<IconButton icon="chevron-left" size="small" variant="minimal" aria-label="previous" />
+				<Box display="flex" alignItems="center" gap="$200" marginInline="$200">
+					<Text style={{ fontWeight: vars.fontWeight.semibold }}>1-2</Text>
+					<Text> of </Text>
+					<Text style={{ fontWeight: vars.fontWeight.semibold }}>4</Text>
+				</Box>
+				<IconButton icon="chevron-right" size="small" variant="minimal" aria-label="next" />
+				<IconButton icon="chevrons-right" size="small" variant="minimal" aria-label="last" />
+			</Box>
+		);
+	},
+};