Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(Pagination): remove navigation option #3013

Closed
wants to merge 1 commit into from
Closed

chore(Pagination): remove navigation option #3013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 1 addition & 19 deletions packages/gamut/src/Pagination/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ export interface PaginationProps {
* Default initial page number, if none will default to one
*/
defaultPageNumber?: number;
/**
* Whether pagination should act as standard link-based navigation.
*/
isNavigation?: boolean;
/**
* Called when the page number is changed with the resulting page number as its first argument
*/
Expand All @@ -59,14 +55,12 @@ export interface PaginationProps {
export const Pagination: React.FC<PaginationProps> = ({
chapterSize = 5,
defaultPageNumber = 1,
isNavigation,
onChange,
pageNumber,
totalPages,
type,
variant = 'stroke',
}) => {
const navigation = isNavigation ? '/' : undefined;
const [currentPage, setCurrentPage] = useState(
pageNumber ?? defaultPageNumber
);
Expand Down Expand Up @@ -134,12 +128,7 @@ export const Pagination: React.FC<PaginationProps> = ({

return (
<FlexBox
as={navigation ? 'nav' : undefined}
aria-label={
navigation
? `Browse Content By Page, total pages ${totalPages}`
: `Paginated Navigation, total pages ${totalPages}`
}
aria-label={`Paginated Navigation, total pages ${totalPages}`}
justifyContent="center"
minWidth={{
_: 'initial',
Expand All @@ -149,7 +138,6 @@ export const Pagination: React.FC<PaginationProps> = ({
<HiddenText aria-live="polite">{liveText}</HiddenText>
<AnimatedFadeButton
aria-label={`Navigate back to page ${currentPage - 1}`}
href={navigation}
icon={MiniChevronLeftIcon}
onClick={() => changeHandler(currentPage - 1)}
showButton={currentPage === 1 ? 'hidden' : 'shown'}
Expand All @@ -161,7 +149,6 @@ export const Pagination: React.FC<PaginationProps> = ({
aria-label="Jump back to page 1"
direction="back"
display={hideOnMobile}
href={navigation}
onClick={() => changeHandler(1)}
showButton={shownPageArray[0] === 1 ? 'hidden' : 'shown'}
buttonType={variant}
Expand All @@ -172,7 +159,6 @@ export const Pagination: React.FC<PaginationProps> = ({
aria-label={`Jump back to page ${backPageNumber}`}
direction="back"
display={hideOnMobile}
href={navigation}
onClick={() => changeHandler(backPageNumber)}
buttonType={variant}
showButton={shownPageArray[0] === 1 ? 'hidden' : 'shown'}
Expand All @@ -183,7 +169,6 @@ export const Pagination: React.FC<PaginationProps> = ({
<PaginationButton
aria-current={page === currentPage && 'page'}
aria-label={`${page === totalPages ? 'Last Page, ' : ''}Page ${page}`}
href={navigation}
key={page}
onClick={() => changeHandler(page)}
selected={page === currentPage}
Expand All @@ -201,7 +186,6 @@ export const Pagination: React.FC<PaginationProps> = ({
onClick={() => {
changeHandler(forwardPageNumber);
}}
href={navigation}
showButton={
shownPageArray[chapterSize - 1] === totalPages
? 'hidden'
Expand All @@ -213,7 +197,6 @@ export const Pagination: React.FC<PaginationProps> = ({
aria-label={`Jump forward to last page, page ${totalPages}`}
direction="forward"
display={hideOnMobile}
href={navigation}
onClick={() => changeHandler(totalPages)}
showButton={
shownPageArray[chapterSize - 1] === totalPages
Expand All @@ -228,7 +211,6 @@ export const Pagination: React.FC<PaginationProps> = ({
)}
<AnimatedFadeButton
aria-label={`Navigate forward to page ${currentPage + 1}`}
href={navigation}
icon={MiniChevronRightIcon}
onClick={() => changeHandler(currentPage + 1)}
showButton={currentPage === totalPages ? 'hidden' : 'shown'}
Expand Down
6 changes: 0 additions & 6 deletions packages/styleguide/src/lib/Molecules/Pagination/Pagination.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,6 @@ We have two variants of pagination - `stroke` and `text` - that roughly correspo
### `text`
<Canvas of={TemplateStories.Text} />

## Pagination navigation

When using pagination as navigation between linked pages, use the `isNavigation` prop. Your `onChange` function should include programmatic navigation.

<Canvas of={TemplateStories.Navigation} />

## Controlled pagination

When `pageNumber` is specified, the component switches to being a controlled component.
Expand Down
14 changes: 0 additions & 14 deletions packages/styleguide/src/lib/Molecules/Pagination/Pagination.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,6 @@ export const Text: Story = {
},
};

export const Navigation: Story = {
args: {
chapterSize: 5,
totalPages: 27,
isNavigation: true,
onChange: (pageNumber) => {
window.open(
`https://giphy.com/search/hamtaro-page-${pageNumber}`,
'_blank'
);
}
},
};

export const PaginationControlledExample: React.FC<PaginationProps> = (
props
) => {
Expand Down
Loading