feat(pagination): Adds size property to ClayPagination

liferay · Jul 25, 2019 · f80ea85 · f80ea85
1 parent ce02c76
commit f80ea85
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/packages/clay-pagination/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-pagination/src/__tests__/__snapshots__/index.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ClayPagination renders 1`] = `
 <div>
   <ul
-    class="pagination pagination-root"
+    class="pagination pagination-root pagination-lg"
   >
     <li
       class="page-item"

diff --git a/packages/clay-pagination/src/__tests__/index.tsx b/packages/clay-pagination/src/__tests__/index.tsx
@@ -23,6 +23,7 @@ describe('ClayPagination', () => {
 		const {container} = render(
 			<ClayPagination
 				activePage={12}
+				size="lg"
 				spritemap={spritemap}
 				totalPages={25}
 			/>

diff --git a/packages/clay-pagination/src/index.tsx b/packages/clay-pagination/src/index.tsx
@@ -45,6 +45,11 @@ interface IProps extends React.HTMLAttributes<HTMLUListElement> {
 	 */
 	totalPages: number;
 
+	/**
+	 * The size of pagination element.
+	 */
+	size?: 'lg' | 'sm';
+
 	/**
 	 * Path to spritemap from clay-css.
 	 */
@@ -58,6 +63,7 @@ const ClayPagination: React.FunctionComponent<IProps> = ({
 	ellipsisBuffer = ELLIPSIS_BUFFER,
 	hrefConstructor,
 	onPageChange,
+	size,
 	spritemap,
 	totalPages,
 }: IProps) => {
@@ -72,7 +78,11 @@ const ClayPagination: React.FunctionComponent<IProps> = ({
 		.map((item, index) => index + 1);
 
 	return (
-		<ul className={classNames('pagination pagination-root', className)}>
+		<ul
+			className={classNames('pagination pagination-root', className, {
+				[`pagination-${size}`]: size,
+			})}
+		>
 			<PaginationItem
 				data-testid="prevArrow"
 				disabled={activePage === 1}

diff --git a/packages/clay-pagination/stories/index.tsx b/packages/clay-pagination/stories/index.tsx
@@ -47,6 +47,37 @@ storiesOf('ClayPagination', module)
 
 		return <PaginationWithState totalPages={totalPages} />;
 	})
+	.add('sizes', () => {
+		const totalPages = number('Number of pages', 25);
+
+		return (
+			<>
+				<ClayPagination
+					activePage={number('Active Page', 8)}
+					ellipsisBuffer={number('Ellipsis Buffer', 2)}
+					hrefConstructor={page => `/#${page}`}
+					size="sm"
+					spritemap={spritemap}
+					totalPages={totalPages}
+				/>
+				<ClayPagination
+					activePage={number('Active Page', 8)}
+					ellipsisBuffer={number('Ellipsis Buffer', 2)}
+					hrefConstructor={page => `/#${page}`}
+					spritemap={spritemap}
+					totalPages={totalPages}
+				/>
+				<ClayPagination
+					activePage={number('Active Page', 8)}
+					ellipsisBuffer={number('Ellipsis Buffer', 2)}
+					hrefConstructor={page => `/#${page}`}
+					size="lg"
+					spritemap={spritemap}
+					totalPages={totalPages}
+				/>
+			</>
+		);
+	})
 	.add('w/ disabled pages', () => {
 		const totalPages = number('Number of pages', 5);