diff --git a/.changeset/dull-cheetahs-hope.md b/.changeset/dull-cheetahs-hope.md new file mode 100644 index 00000000000..ed576ea0414 --- /dev/null +++ b/.changeset/dull-cheetahs-hope.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": minor +--- + +Migrate Pagination from `kaizen-legacy` diff --git a/packages/components/src/Button/GenericButton/GenericButton.module.scss b/packages/components/src/Button/GenericButton/GenericButton.module.scss index d9b11b09795..c9f305ef16e 100755 --- a/packages/components/src/Button/GenericButton/GenericButton.module.scss +++ b/packages/components/src/Button/GenericButton/GenericButton.module.scss @@ -1,8 +1,8 @@ @import "../utils/variables"; @import "../Button/Button.module"; @import "../IconButton/IconButton.module"; -@import "../PaginationLink/PaginationLink.module"; -@import "../DirectionalLink/DirectionalLink.module"; +@import "../../Pagination/subcomponents/PaginationLink/PaginationLink.module"; +@import "../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module"; .container { display: inline-block; diff --git a/packages/components/src/Button/index.ts b/packages/components/src/Button/index.ts index 599df38b014..15dbe90ed49 100644 --- a/packages/components/src/Button/index.ts +++ b/packages/components/src/Button/index.ts @@ -1,5 +1,3 @@ export type { CustomButtonProps } from "./GenericButton" export * from "./Button" export * from "./IconButton" -export * from "./PaginationLink" -export * from "./DirectionalLink" diff --git a/packages/components/src/Pagination/Pagination.module.scss b/packages/components/src/Pagination/Pagination.module.scss new file mode 100644 index 00000000000..c1a7ee44a79 --- /dev/null +++ b/packages/components/src/Pagination/Pagination.module.scss @@ -0,0 +1,65 @@ +@import "~@kaizen/design-tokens/sass/typography"; +@import "~@kaizen/design-tokens/sass/color"; +@import "~@kaizen/design-tokens/sass/border"; + +// Pagination +.container { + display: flex; + align-items: center; + justify-content: center; +} + +.pagesIndicatorWrapper { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.arrowIconWrapper { + height: 36px; + width: 36px; + border-radius: 18px; + display: flex; + align-items: center; + justify-content: center; + border: $border-focus-ring-border-width $border-focus-ring-border-style + $color-blue-300; + margin: 0 5px; + background-color: transparent; + color: $color-blue-500; + box-sizing: border-box; + + &:disabled { + opacity: 35%; + pointer-events: none; + } + + &:hover { + background-color: $color-blue-100; + } + + &:focus { + background-color: $color-blue-200; + + &:focus-visible { + outline: none; + } + + .pageIndicatorFocusRing { + border: $border-focus-ring-border-width $border-focus-ring-border-style + $color-blue-500; + } + } +} + +// Truncate indicator +.truncateIndicatorWrapper { + display: flex; + align-items: center; + justify-content: center; + height: 36px; + width: 36px; + background-color: transparent; + color: rgba($color-purple-800-rgb, 0.7); + margin: 0 5px; +} diff --git a/packages/components/src/Pagination/Pagination.spec.tsx b/packages/components/src/Pagination/Pagination.spec.tsx new file mode 100644 index 00000000000..e7a852d632c --- /dev/null +++ b/packages/components/src/Pagination/Pagination.spec.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { render, screen, waitFor } from "@testing-library/react" +import userEvent from "@testing-library/user-event" +import { Pagination } from "./Pagination" + +const user = userEvent.setup() + +const defaultProps = { + currentPage: 1, + pageCount: 10, + ariaLabelNextPage: "Next page", + ariaLabelPreviousPage: "Previous page", + ariaLabelPage: "Page", + onPageChange: jest.fn(), +} + +describe("", () => { + it("calls onPageChange when clicking page number", async () => { + const onPageChange = jest.fn() + + render() + + expect(onPageChange).toHaveBeenCalledTimes(0) + + await user.click(screen.getByRole("button", { name: "Page 1" })) + await waitFor(() => { + expect(onPageChange).toHaveBeenCalledTimes(1) + }) + }) +}) diff --git a/packages/components/src/Pagination/Pagination.tsx b/packages/components/src/Pagination/Pagination.tsx new file mode 100644 index 00000000000..0cc157ebfdd --- /dev/null +++ b/packages/components/src/Pagination/Pagination.tsx @@ -0,0 +1,163 @@ +import React, { HTMLAttributes } from "react" +import classnames from "classnames" +import { OverrideClassName } from "~types/OverrideClassName" +import { DirectionalLink } from "./subcomponents/DirectionalLink" +import { PaginationLink } from "./subcomponents/PaginationLink" +import { TruncateIndicator } from "./subcomponents/TruncateIndicator" +import { createRange } from "./utils/createRange" +import styles from "./Pagination.module.scss" + +export type PaginationProps = { + currentPage: number + pageCount: number + ariaLabelNextPage: string + ariaLabelPreviousPage: string + ariaLabelPage: string + onPageChange: (newPage: number) => void +} & OverrideClassName> + +type PageAction = "prev" | "next" + +/** + * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082092975/Pagination Guidance} | + * {@link https://cultureamp.design/?path=/docs/components-pagination--docs Storybook} + */ +export const Pagination = ({ + currentPage = 1, + pageCount, + ariaLabelNextPage, + ariaLabelPreviousPage, + ariaLabelPage, + onPageChange, + classNameOverride, + ...restProps +}: PaginationProps): JSX.Element => { + // Click event for all pagination buttons (next, prev, and the actual numbers) + const handleButtonClick = (newPage: number | PageAction): void => { + if (newPage === "prev") { + onPageChange(currentPage - 1) + return + } + if (newPage === "next") { + onPageChange(currentPage + 1) + return + } + onPageChange(newPage) + } + + const paginationIndicator = (page: number): JSX.Element => ( + handleButtonClick(page)} + /> + ) + + const pagination = (): JSX.Element[] => { + const items: JSX.Element[] = [] + + const boundaryPagesRange = 1 + const siblingPagesRange = 1 + + // truncateSize is 1 now but could be 0 if we add the ability to hide it. + const truncateSize = 1 + + const showAllPages = + 1 + 2 * truncateSize + 2 * siblingPagesRange + 2 * boundaryPagesRange >= + pageCount + + // Simplify generation of pages if number of available items is equal or greater than total pages to show + if (showAllPages) { + return createRange(1, pageCount).map(paginationIndicator) + } else { + // Calculate group of first pages + const firstPagesStart = 1 + const firstPagesEnd = boundaryPagesRange + const firstPages = createRange(firstPagesStart, firstPagesEnd).map( + paginationIndicator + ) + + // Calculate group of last pages + const lastPagesStart = pageCount + 1 - boundaryPagesRange + const lastPagesEnd = pageCount + const lastPages = createRange(lastPagesStart, lastPagesEnd).map( + paginationIndicator + ) + + // Calculate group of main pages + const mainPagesStart = Math.min( + Math.max( + currentPage - siblingPagesRange, + firstPagesEnd + truncateSize + 1 + ), + lastPagesStart - truncateSize - 2 * siblingPagesRange - 1 + ) + const mainPagesEnd = mainPagesStart + 2 * siblingPagesRange + const mainPages = createRange(mainPagesStart, mainPagesEnd).map( + paginationIndicator + ) + + // Add group of first pages + items.push(...firstPages) + + // Calculate and add truncate before group of main pages + const firstEllipsisPageNumber = mainPagesStart - 1 + const showPageInsteadOfFirstEllipsis = + firstEllipsisPageNumber === firstPagesEnd + 1 + items.push( + showPageInsteadOfFirstEllipsis ? ( + paginationIndicator(firstEllipsisPageNumber) + ) : ( + + ) + ) + + // Add group of main pages + items.push(...mainPages) + + // Calculate and add truncate after group of main pages + const secondEllipsisPageNumber = mainPagesEnd + 1 + const showPageInsteadOfSecondEllipsis = + secondEllipsisPageNumber === lastPagesStart - 1 + items.push( + showPageInsteadOfSecondEllipsis ? ( + paginationIndicator(secondEllipsisPageNumber) + ) : ( + + ) + ) + + // Add group of last pages + items.push(...lastPages) + } + return items + } + + const previousPageDisabled = currentPage <= 1 + const nextPageDisabled = currentPage >= pageCount + + return ( + + ) +} diff --git a/packages/components/src/Pagination/_docs/Pagination.mdx b/packages/components/src/Pagination/_docs/Pagination.mdx new file mode 100644 index 00000000000..167c5f501a6 --- /dev/null +++ b/packages/components/src/Pagination/_docs/Pagination.mdx @@ -0,0 +1,28 @@ +import { Canvas, Controls, Meta } from "@storybook/blocks" +import { ResourceLinks, KaioNotification, Installation } from "~storybook/components" +import * as PaginationStories from "./Pagination.stories" + + + +# Pagination + + + + + + + +## Overview + +Pagination separates large bodies of content into separate pages. You can access each page via a shared index of links. + + + diff --git a/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx b/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx new file mode 100644 index 00000000000..c08dfdbacb2 --- /dev/null +++ b/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx @@ -0,0 +1,109 @@ +import React from "react" +import { Meta } from "@storybook/react" +import { + StickerSheet, + StickerSheetStory, +} from "~storybook/components/StickerSheet" +import { Pagination } from "../index" + +export default { + title: "Components/Pagination", + parameters: { + chromatic: { disable: false }, + controls: { disable: true }, + }, +} satisfies Meta + +const StickerSheetTemplate: StickerSheetStory = { + render: () => ( + + + + { + alert("Page Change") + }} + /> + + + { + alert("Page Change") + }} + /> + + + { + alert("Page Change") + }} + /> + + + { + alert("Page Change") + }} + /> + + + { + alert("Page Change") + }} + /> + + + { + alert("Page Change") + }} + /> + + + + ), +} + +export const StickerSheetDefault: StickerSheetStory = { + ...StickerSheetTemplate, + name: "Sticker Sheet (Default)", +} + +export const StickerSheetRTL: StickerSheetStory = { + ...StickerSheetTemplate, + name: "Sticker Sheet (RTL)", + parameters: { + textDirection: "rtl", + }, +} diff --git a/packages/components/src/Pagination/_docs/Pagination.stories.tsx b/packages/components/src/Pagination/_docs/Pagination.stories.tsx new file mode 100644 index 00000000000..d40bfae2143 --- /dev/null +++ b/packages/components/src/Pagination/_docs/Pagination.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from "@storybook/react" +import { Pagination } from "../index" + +const meta = { + title: "Components/Pagination", + component: Pagination, + args: { + currentPage: 2, + ariaLabelPage: "Home", + ariaLabelNextPage: "Next page", + ariaLabelPreviousPage: "Previous page", + pageCount: 10, + onPageChange: () => { + alert("Page changed") + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Playground: Story = { + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, +} diff --git a/packages/components/src/Pagination/index.ts b/packages/components/src/Pagination/index.ts new file mode 100644 index 00000000000..f70396f8b81 --- /dev/null +++ b/packages/components/src/Pagination/index.ts @@ -0,0 +1,3 @@ +export * from "./Pagination" +export * from "./subcomponents/DirectionalLink" +export * from "./subcomponents/PaginationLink" diff --git a/packages/components/src/Button/DirectionalLink/DirectionalLink.module.scss b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss similarity index 84% rename from packages/components/src/Button/DirectionalLink/DirectionalLink.module.scss rename to packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss index e9b1e60d416..f82320dae65 100644 --- a/packages/components/src/Button/DirectionalLink/DirectionalLink.module.scss +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss @@ -1,7 +1,7 @@ @import "~@kaizen/design-tokens/sass/border"; @import "~@kaizen/design-tokens/sass/color"; -@import "../utils/mixins"; -@import "../utils/variables"; +@import "../../../Button/utils/mixins"; +@import "../../../Button/utils/variables"; %directional-link { [dir="rtl"] & { diff --git a/packages/components/src/Button/DirectionalLink/DirectionalLink.tsx b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx similarity index 92% rename from packages/components/src/Button/DirectionalLink/DirectionalLink.tsx rename to packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx index 76197bb50b4..df48bd10b4d 100644 --- a/packages/components/src/Button/DirectionalLink/DirectionalLink.tsx +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx @@ -5,7 +5,7 @@ import { EndIcon, StartIcon, } from "~components/Icon" -import { GenericButton, GenericProps } from "../GenericButton" +import { GenericButton, GenericProps } from "../../../Button/GenericButton" export type DirectionalLinkProps = { label: string diff --git a/packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.mdx b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx similarity index 82% rename from packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.mdx rename to packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx index d26a1cf99b9..c4c968c306d 100644 --- a/packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.mdx +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx @@ -1,5 +1,5 @@ import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KaioNotification, Installation } from "~storybook/components" +import { ResourceLinks, KaioNotification, Installation, LinkTo } from "~storybook/components" import * as DirectionalLinkStories from "./DirectionalLink.stories" @@ -22,7 +22,7 @@ import * as DirectionalLinkStories from "./DirectionalLink.stories" ## Overview -You get the point. +You get the point. Usually part of Pagination. diff --git a/packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx similarity index 98% rename from packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx rename to packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx index ffa43ac195e..1d23cfd24bf 100644 --- a/packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx @@ -7,7 +7,7 @@ import { import { DirectionalLink, DirectionalLinkProps } from "../index" export default { - title: "Components/Buttons/DirectionalLink", + title: "Components/Pagination/DirectionalLink", parameters: { chromatic: { disable: false }, controls: { disable: true }, diff --git a/packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stories.tsx b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stories.tsx similarity index 89% rename from packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stories.tsx rename to packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stories.tsx index f36719c9ea8..45409e18a45 100644 --- a/packages/components/src/Button/DirectionalLink/_docs/DirectionalLink.stories.tsx +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react" import { DirectionalLink } from "../index" const meta = { - title: "Components/Buttons/DirectionalLink", + title: "Components/Pagination/DirectionalLink", component: DirectionalLink, args: { label: "Back", diff --git a/packages/components/src/Button/DirectionalLink/index.ts b/packages/components/src/Pagination/subcomponents/DirectionalLink/index.ts similarity index 100% rename from packages/components/src/Button/DirectionalLink/index.ts rename to packages/components/src/Pagination/subcomponents/DirectionalLink/index.ts diff --git a/packages/components/src/Button/PaginationLink/PaginationLink.module.scss b/packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss similarity index 95% rename from packages/components/src/Button/PaginationLink/PaginationLink.module.scss rename to packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss index 19ed8d06d0e..fdc9ad904e7 100644 --- a/packages/components/src/Button/PaginationLink/PaginationLink.module.scss +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss @@ -2,8 +2,8 @@ @import "~@kaizen/design-tokens/sass/border"; @import "~@kaizen/design-tokens/sass/color"; @import "~@kaizen/design-tokens/sass/spacing"; -@import "../utils/mixins"; -@import "../utils/variables"; +@import "../../../Button/utils/mixins"; +@import "../../../Button/utils/variables"; %circle-button { width: 40px; diff --git a/packages/components/src/Button/PaginationLink/PaginationLink.tsx b/packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.tsx similarity index 90% rename from packages/components/src/Button/PaginationLink/PaginationLink.tsx rename to packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.tsx index a905e75a9c0..def32fb23f7 100644 --- a/packages/components/src/Button/PaginationLink/PaginationLink.tsx +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.tsx @@ -1,5 +1,5 @@ import React from "react" -import { GenericProps, GenericButton } from "../GenericButton" +import { GenericProps, GenericButton } from "../../../Button/GenericButton" export type PaginationLinkProps = GenericProps & { pageNumber: number diff --git a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.mdx b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx similarity index 81% rename from packages/components/src/Button/PaginationLink/_docs/PaginationLink.mdx rename to packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx index ace8f39b9c0..681e7bbd2f6 100644 --- a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.mdx +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx @@ -1,5 +1,5 @@ import { Canvas, Controls, Meta } from "@storybook/blocks" -import { ResourceLinks, KaioNotification, Installation } from "~storybook/components" +import { ResourceLinks, KaioNotification, Installation, LinkTo } from "~storybook/components" import * as PaginationLinkStories from "./PaginationLink.stories" @@ -22,7 +22,7 @@ import * as PaginationLinkStories from "./PaginationLink.stories" ## Overview -A link that represents pages. +A link that represents pages. Usually part of Pagination. diff --git a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx similarity index 98% rename from packages/components/src/Button/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx rename to packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx index 3158ad544df..4f830e9b7fa 100644 --- a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx @@ -7,7 +7,7 @@ import { import { PaginationLink, PaginationLinkProps } from "../index" export default { - title: "Components/Buttons/PaginationLink", + title: "Components/Pagination/PaginationLink", parameters: { chromatic: { disable: false }, controls: { disable: true }, diff --git a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.stories.tsx b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stories.tsx similarity index 89% rename from packages/components/src/Button/PaginationLink/_docs/PaginationLink.stories.tsx rename to packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stories.tsx index 3051785f7ff..91a07945e67 100644 --- a/packages/components/src/Button/PaginationLink/_docs/PaginationLink.stories.tsx +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react" import { PaginationLink } from "../index" const meta = { - title: "Components/Buttons/PaginationLink", + title: "Components/Pagination/PaginationLink", component: PaginationLink, args: { pageNumber: 1, diff --git a/packages/components/src/Button/PaginationLink/index.ts b/packages/components/src/Pagination/subcomponents/PaginationLink/index.ts similarity index 100% rename from packages/components/src/Button/PaginationLink/index.ts rename to packages/components/src/Pagination/subcomponents/PaginationLink/index.ts diff --git a/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss new file mode 100644 index 00000000000..2205ce3ed06 --- /dev/null +++ b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss @@ -0,0 +1,12 @@ +@import "~@kaizen/design-tokens/sass/color"; + +.truncateIndicatorWrapper { + display: flex; + align-items: center; + justify-content: center; + height: 36px; + width: 36px; + background-color: transparent; + color: rgba($color-purple-800-rgb, 0.7); + margin: 0 5px; +} diff --git a/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx new file mode 100644 index 00000000000..312e0854413 --- /dev/null +++ b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx @@ -0,0 +1,12 @@ +import React from "react" +import { EllipsisIcon } from "~components/Icon" +import styles from "./TruncateIndicator.module.scss" + +export const TruncateIndicator = (): JSX.Element => ( +
+ +
+) diff --git a/packages/components/src/Pagination/subcomponents/TruncateIndicator/index.ts b/packages/components/src/Pagination/subcomponents/TruncateIndicator/index.ts new file mode 100644 index 00000000000..c4cde9bae84 --- /dev/null +++ b/packages/components/src/Pagination/subcomponents/TruncateIndicator/index.ts @@ -0,0 +1 @@ +export * from "./TruncateIndicator" diff --git a/packages/components/src/Pagination/utils/createRange.spec.ts b/packages/components/src/Pagination/utils/createRange.spec.ts new file mode 100644 index 00000000000..0578df1092f --- /dev/null +++ b/packages/components/src/Pagination/utils/createRange.spec.ts @@ -0,0 +1,9 @@ +import { createRange } from "./createRange" + +describe("createRange", () => { + it("should return an array between the two arguments passed in", async () => { + const expectedResult = [1, 2, 3, 4, 5] + + expect(createRange(1, 5)).toEqual(expectedResult) + }) +}) diff --git a/packages/components/src/Pagination/utils/createRange.ts b/packages/components/src/Pagination/utils/createRange.ts new file mode 100644 index 00000000000..cb6184653cd --- /dev/null +++ b/packages/components/src/Pagination/utils/createRange.ts @@ -0,0 +1,9 @@ +export const createRange = (start: number, end: number): number[] => { + const range: number[] = [] + + for (let i = start; i <= end; i++) { + range.push(i) + } + + return range +} diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index ed5d27bd3bc..a15a7cf1b9b 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -38,6 +38,7 @@ export * from "./Loading" export * from "./Menu" export * from "./Modal" export * from "./Notification" +export * from "./Pagination" export * from "./Popover" export * from "./Radio" export * from "./SearchField"