Skip to content

Commit

Permalink
Replaced all the css into tailwind css on Pagination component (#1763)
Browse files Browse the repository at this point in the history
  • Loading branch information
@subhajit20
subhajit20 authored Nov 7, 2023
1 parent 15cc5aa commit ca9c051
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 30 deletions.
12 changes: 8 additions & 4 deletions components/Pagination/Pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import LeftAngleIcon from 'static/images/icons/FontAwesome/angle-left-solid.svg'
import RightAngleIcon from 'static/images/icons/FontAwesome/angle-right-solid.svg';
import { PREV_PAGE_BUTTON, NEXT_PAGE_BUTTON } from '../../common/constants/testIDs';
import PaginationItem from './PaginationItem/PaginationItem';
import styles from './Pagination.module.css';

Pagination.propTypes = {
currentPage: number.isRequired,
Expand Down Expand Up @@ -147,7 +146,12 @@ function Pagination({ currentPage, pathname, query, totalPages }) {
}

return (
<nav className={styles.Pagination} data-testid="Pagination">
<nav
className={
'[&>ol]:flex [&>ol]:my-0 [&>ol]:mx-auto [&>ol]:p-0 [&>ol]:justify-between [&>ol]:items-center [&>ol]:max-w-fit"'
}
data-testid="Pagination"
>
<ol>
{currentPage > 1 && (
<PaginationItem
Expand All @@ -156,7 +160,7 @@ function Pagination({ currentPage, pathname, query, totalPages }) {
query={query}
testId={PREV_PAGE_BUTTON}
>
<LeftAngleIcon className={styles.icon} />
<LeftAngleIcon className="w-full" />
</PaginationItem>
)}

Expand All @@ -174,7 +178,7 @@ function Pagination({ currentPage, pathname, query, totalPages }) {
query={query}
testId={NEXT_PAGE_BUTTON}
>
<RightAngleIcon className={styles.icon} />
<RightAngleIcon className="w-full" />
</PaginationItem>
)}
</ol>
Expand Down
12 changes: 0 additions & 12 deletions components/Pagination/Pagination.module.css
View file

This file was deleted.

2 changes: 1 addition & 1 deletion components/Pagination/PaginationItem/__tests__/__snapshots__/PaginationItem.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`PaginationItem renders correctly as a current item with value 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand Down
26 changes: 13 additions & 13 deletions components/Pagination/__tests__/__snapshots__/Pagination.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Pagination should render with required props 1`] = `
<nav
className="Pagination"
className="[&>ol]:flex [&>ol]:my-0 [&>ol]:mx-auto [&>ol]:p-0 [&>ol]:justify-between [&>ol]:items-center [&>ol]:max-w-fit\\""
data-testid="Pagination"
>
<ol>
Expand All @@ -17,7 +17,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -36,7 +36,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -55,7 +55,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -74,7 +74,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -93,7 +93,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -112,7 +112,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -131,7 +131,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -150,7 +150,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -169,7 +169,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -194,7 +194,7 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
Expand All @@ -213,13 +213,13 @@ exports[`Pagination should render with required props 1`] = `
onMouseEnter={[Function]}
>
<span
className="ScreenReaderOnly"
className="sr-only"
data-testid="SCREEN_READER_ONLY"
>
Go to page
</span>
<svg
className="icon"
className="w-full"
/>
</a>
</li>
Expand Down

2 comments on commit ca9c051

@vercel
Copy link

@vercel vercel bot commented on ca9c051 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

storybook – ./

storybook-git-main-operation-code.vercel.app
storybook-operation-code.vercel.app
operationcode-storybook.vercel.app
storybook.operationcode.org

@vercel
Copy link

@vercel vercel bot commented on ca9c051 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

operation-code – ./

operation-code-operation-code.vercel.app
operation-code-git-main-operation-code.vercel.app
operationcode.org
www.operationcode.org

Please sign in to comment.