diff --git a/apps/website/pages/components/paginator/code.tsx b/apps/website/pages/components/paginator/code.tsx new file mode 100644 index 0000000000..4d99f6eff8 --- /dev/null +++ b/apps/website/pages/components/paginator/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; +import PaginatorCodePage from "screens/components/paginator/code/PaginatorCodePage"; + +const Code = () => ( + <> + + Paginator Code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/paginator/index.tsx b/apps/website/pages/components/paginator/index.tsx index 032c17b850..b40e66ce5b 100644 --- a/apps/website/pages/components/paginator/index.tsx +++ b/apps/website/pages/components/paginator/index.tsx @@ -1,21 +1,17 @@ import Head from "next/head"; import type { ReactElement } from "react"; import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; -import PaginatorCodePage from "screens/components/paginator/code/PaginatorCodePage"; +import PaginatorOverviewPage from "screens/components/paginator/overview/PaginatorOverviewPage"; -const Index = () => { - return ( - <> - - Paginator — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Paginator — Halstack Design System + + + +); -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/paginator/specifications.tsx b/apps/website/pages/components/paginator/specifications.tsx deleted file mode 100644 index 91186c11dd..0000000000 --- a/apps/website/pages/components/paginator/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; -import PaginatorSpecsPage from "screens/components/paginator/specs/PaginatorSpecsPage"; - -const Specifications = () => { - return ( - <> - - Paginator Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/paginator/usage.tsx b/apps/website/pages/components/paginator/usage.tsx deleted file mode 100644 index 5c91956f01..0000000000 --- a/apps/website/pages/components/paginator/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; -import PaginatorUsagePage from "screens/components/paginator/usage/PaginatorUsagePage"; - -const Usage = () => { - return ( - <> - - Paginator Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx index 00ae9636b8..9d06a6cfb3 100644 --- a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx +++ b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const PaginatorPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/paginator" }, - { label: "Usage", path: "/components/paginator/usage" }, - { label: "Specifications", path: "/components/paginator/specifications" }, + { label: "Overview", path: "/components/paginator" }, + { label: "Code", path: "/components/paginator/code" }, ]; return ( @@ -19,7 +18,7 @@ const PaginatorPageHeading = ({ children }: { children: ReactNode }) => { The paginator component allows dividing large amounts of content into multiple pages. - + {children} diff --git a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx index 16572b8f8d..3f538f9ba8 100644 --- a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx +++ b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx @@ -129,15 +129,13 @@ const sections = [ }, ]; -const PaginatorCodePage = () => { - return ( - - - - - - - ); -}; +const PaginatorCodePage = () => ( + + + + + + +); export default PaginatorCodePage; diff --git a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx new file mode 100644 index 0000000000..0c1e7563c4 --- /dev/null +++ b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx @@ -0,0 +1,159 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; +import Image from "@/common/Image"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import DocFooter from "@/common/DocFooter"; +import paginatorAnatomy from "./images/paginator_anatomy.png"; +import Example from "@/common/example/Example"; +import flexibleConfiguration from "./examples/flexibleConfiguration"; +import scrollable from "./examples/scrollable"; + +const sections = [ + { + title: "Introduction", + content: ( + + The paginator component allows users to navigate through large sets of data by breaking content into multiple + pages. It provides controls to move between pages efficiently, ensuring a seamless browsing experience. Ideal + for tables, lists and search results, the paginator improves usability by reducing load times and making content + more manageable. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Paginator anatomy + + + Container: the structural wrapper that holds all the elements of the paginator, ensuring + proper spacing, alignment and responsiveness within the interface. + + + Items per page: a control that allows users to adjust the number of items displayed per + page, providing flexibility in data viewing. + + + Items indicator: displays the current range of items being viewed and the total number of + items, helping users understand their position within the dataset. + + + Page actions: navigation buttons that let users move between pages, typically including + "Next", "Previous", "First" and "Last" controls. + + + Page selector: a dropdown or input that enables users to jump directly to a specific page, + improving efficiency when navigating large datasets. + + + + ), + }, + { + title: "Using paginators", + subSections: [ + { + title: "Reducing cognitive load", + content: ( + + Paginators are essential for managing large amounts of content by dividing it into smaller, more digestible + sections. They help maintain a clean and organized interface, ensuring that users can navigate through + information efficiently without feeling overwhelmed. By breaking content into separate views, paginators + reduce cognitive load, improve readability, and enhance the overall user experience. This approach is + particularly useful in data-heavy applications, tables, or multi-page lists where presenting all information + simultaneously would be impractical. + + ), + }, + { + title: "Flexible configuration", + content: ( + <> + + Our paginator component offers different configurations to accommodate various use cases. Take the time to + explore these options and identify the best fit for your specific needs—whether it’s simple navigation, + dynamic content loading, or more advanced pagination controls. Choosing the right configuration ensures a + seamless experience for users. + + + + ), + }, + { + title: "Pagination and scrolling", + content: ( + <> + + Pagination does not eliminate the need for scrolling; in fact, both can work together to improve + usability. For instance, a table with many rows might require vertical scrolling to display more content + within a single page while still using pagination to divide data into manageable sections. This approach + provides a more intuitive way to navigate large datasets without losing context. + + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + + + Use pagination when necessary + + Implement a paginator when the number of elements affects system performance or when displaying all content + at once would significantly impact usability, especially on larger screens. + + + + Positioning matters + + Always place the paginator at the bottom of the content it divides. This ensures users encounter all + relevant information before deciding to navigate to another page. + + + + Clearly indicate current status + + Display the current page number and the total number of items being shown. This helps users understand their + position within the dataset and manage expectations when navigating. + + + + Ensure intuitive navigation + + Provide clear, accessible controls for moving between pages, including next/previous buttons and, when + applicable, direct page selection for quicker access to specific sections. + + + + Consider different configurations + + Adapt the paginator's design to fit different scenarios, such as adding an option to adjust the number + of items displayed per page or offering compact versions for space-constrained layouts. + + + + Combine with scrolling when needed + + In some cases, pagination and scrolling can work together. For example, tables with many rows may use a + paginator to divide content into sections while allowing vertical scrolling within each page. + + + + ), + }, +]; + +const PaginatorOverviewPage = () => ( + + + + + + +); + +export default PaginatorOverviewPage; diff --git a/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts new file mode 100644 index 0000000000..490ecd08ac --- /dev/null +++ b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts @@ -0,0 +1,46 @@ +import { DxcPaginator, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + + return ( + + + + + + {}} + /> + {}} + /> + {}} + /> + + + ); +}`; + +const scope = { + DxcPaginator, + DxcFlex, + DxcInset, + useState, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.ts b/apps/website/screens/components/paginator/overview/examples/scrollable.ts new file mode 100644 index 0000000000..856536c6a4 --- /dev/null +++ b/apps/website/screens/components/paginator/overview/examples/scrollable.ts @@ -0,0 +1,135 @@ +import { DxcPaginator, DxcInset, DxcDataGrid, DxcContainer } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + const columns = [ + { + key: "id", + label: "ID", + resizable: true, + sortable: true, + draggable: false, + alignment: "left", + }, + { + key: "task", + label: "Title", + resizable: true, + sortable: true, + draggable: true, + textEditable: true, + alignment: "left", + }, + { + key: "complete", + label: " % Complete", + resizable: true, + sortable: true, + draggable: true, + alignment: "right", + summaryKey: "label", + }, + { + key: "priority", + label: "Priority", + resizable: true, + draggable: true, + alignment: "center", + summaryKey: "total", + } + ]; + + const expandableRows = [ + { + id: 1, + task: "Task 1", + complete: 46, + priority: "High", + issueType: "Bug", + expandedContent: Custom content 1, + expandedContentHeight: 470 + }, + { + id: 2, + task: "Task 2", + complete: 51, + priority: "High", + issueType: "Epic", + expandedContent: Custom content 1 + }, + { + id: 3, + task: "Task 3", + complete: 40, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 4, + task: "Task 4", + complete: 10, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 5, + task: "Task 5", + complete: 68, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 6, + task: "Task 6", + complete: 37, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 7, + task: "Task 7", + complete: 73, + priority: "Medium", + issueType: "Story", + expandedContent: Custom content 1 + }, + { + id: 8, + task: "Task 8", + complete: 27, + priority: "Medium", + issueType: "Story", + expandedContent: Custom content 1 + }, + { + id: 9, + task: "Task 9", + complete: 36, + priority: "Critical", + issueType: "Epic", + expandedContent: Custom content 1 + }, + ]; + + return ( + + + + + + ); +}`; + +const scope = { + DxcContainer, + DxcDataGrid, + DxcPaginator, + DxcInset, + useState, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png b/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png new file mode 100644 index 0000000000..e9142731a5 Binary files /dev/null and b/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png differ diff --git a/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx b/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx deleted file mode 100644 index 6f1b3ff046..0000000000 --- a/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx +++ /dev/null @@ -1,285 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import Figure from "@/common/Figure"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import paginatorAnatomy from "./images/paginator_anatomy.png"; -import paginatorSpecs from "./images/paginator_specs.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Paginator design specifications -
- ), - }, - { - title: "Anatomy", - content: ( - <> - Paginator anatomy - - Container - Items per page - Items indicator - Page actions - Page selector - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - backgroundColor - - Container - - color-grey-100 - - #f2f2f2 - - - - fontColor - - Type all - - color-black - - #000000 - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - fontFamily - - Type all - - font-family-sans - - 'Open Sans', sans-serif - - - - fontSize - - Type all - - font-scale-03 - - 1rem / 16px - - - - fontStyle - - Type all - - font-style-normal - - normal - - - - fontWeight - - Type all - - font-weight-regular - - 400 - - - - fontTextTransform - - Type all - - - none - - - - ), - }, - { - title: "Spacing", - content: ( - - - - Component token - Element - Core token - Value - - - - - - marginRight - - Content - - spacing-32 - - 2rem / 32px - - - - marginLeft - - Content - - spacing-32 - - 2rem / 32px - - - - itemsPerPageSelectorMarginLeft - - Items per page - - spacing-0 - - 0rem / 0px - - - - itemsPerPageSelectorMarginRight - - Items per page - - spacing-16 - - 1rem / 16px - - - - pageSelectorMarginRight - - Page selector - - spacing-16 - - 1rem / 16px - - - - pageSelectorMarginLeft - - Page selector - - spacing-0 - - 0rem / 0px - - - - totalItemsContainerMarginRight - - Items indicator - - spacing-48 - - 3rem / 48px - - - - totalItemsContainerMarginLeft - - Items indicator - - spacing-0 - - 0rem / 0px - - - - ), - }, - { - title: "Size", - content: ( - - - - Component token - Element - Core token - Value - - - - - - height - - Container - - - 64px - - - - width - - Container - - - 100% - - - - ), - }, - ], - }, -]; - -const PaginatorSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default PaginatorSpecsPage; diff --git a/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png b/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png deleted file mode 100644 index d77134074a..0000000000 Binary files a/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png and /dev/null differ diff --git a/apps/website/screens/components/paginator/specs/images/paginator_specs.png b/apps/website/screens/components/paginator/specs/images/paginator_specs.png deleted file mode 100644 index 536096ece2..0000000000 Binary files a/apps/website/screens/components/paginator/specs/images/paginator_specs.png and /dev/null differ diff --git a/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx b/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx deleted file mode 100644 index 4e87e625ec..0000000000 --- a/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; - -const sections = [ - { - title: "Usage", - content: ( - <> - Usage considerations about the paginator component: - - - Use the paginator when the number of elements is affecting the system load, or when the screen size grows - considerably. - - - Always place the paginator at the bottom of the data that is being divided. - - - Identify the current page and the number of elements that are being displayed. - - - - ), - }, -]; - -const PaginatorUsagePage = () => { - return ( - - - - - - - ); -}; - -export default PaginatorUsagePage; diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index 3035bbeb22..9b483666f1 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -239,7 +239,7 @@ const DxcDataGrid = ({ return ( - + itemsPerPage}> ` width: 100%; - height: 100%; + height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)}; .rdg { border-radius: 4px; height: 100%; diff --git a/packages/lib/src/paginator/Paginator.stories.tsx b/packages/lib/src/paginator/Paginator.stories.tsx index f44fbccdf3..76593dd4cc 100644 --- a/packages/lib/src/paginator/Paginator.stories.tsx +++ b/packages/lib/src/paginator/Paginator.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; -import { HalstackProvider } from "../HalstackContext"; import DxcPaginator from "./Paginator"; export default { @@ -9,13 +8,6 @@ export default { component: DxcPaginator, } as Meta; -const opinionatedTheme = { - paginator: { - baseColor: "#f2f2f2", - fontColor: "#000000", - }, -}; - const Paginator = () => ( <> @@ -67,22 +59,6 @@ const Paginator = () => ( showGoToPage /> - - <ExampleContainer> - <HalstackProvider theme={opinionatedTheme}> - <ExampleContainer> - <Title title="Page change and items per page options" theme="light" level={4} /> - <DxcPaginator - currentPage={1} - itemsPerPage={10} - totalItems={27} - onPageChange={() => {}} - itemsPerPageOptions={[5, 10, 15]} - showGoToPage - /> - </ExampleContainer> - </HalstackProvider> - </ExampleContainer> </> ); @@ -90,4 +66,4 @@ type Story = StoryObj<typeof DxcPaginator>; export const Chromatic: Story = { render: Paginator, -}; \ No newline at end of file +}; diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 3f2486c861..0c8ed6692a 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import DxcButton from "../button/Button"; import DxcSelect from "../select/Select"; import HalstackContext from "../HalstackContext"; @@ -25,36 +25,83 @@ const DxcPaginator = ({ const maxItemsPerPage = minItemsPerPage - 1 + itemsPerPage > totalItems ? totalItems : minItemsPerPage - 1 + itemsPerPage; - const colorsTheme = useContext(HalstackContext); const translatedLabels = useContext(HalstackLanguageContext); + const DxcPaginatorContainer = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + min-height: 48px; + box-sizing: border-box; + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + background-color: var(--color-bg-neutral-lighter); + color: var(--color-fg-neutral-dark); + padding: var(--spacing-padding-xs) var(--spacing-padding-xl); + `; + + const ItemsPerPageContainer = styled.span` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + margin-right: var(--spacing-gap-ml); + `; + + const SelectContainer = styled.div` + min-width: 6.25rem; + `; + + const TotalItemsContainer = styled.span` + margin-right: var(--spacing-gap-xl); + `; + + const GoToPageContainer = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-gap-ml); + `; + + const ButtonsContainer = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + `; + + const PageToSelectContainer = styled.span` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + `; + return ( - <ThemeProvider theme={colorsTheme.paginator}> - <DxcPaginatorContainer> - <LabelsContainer> - {itemsPerPageOptions && ( - <ItemsPageContainer> - <ItemsLabel>{translatedLabels.paginator.itemsPerPageText}</ItemsLabel> - <SelectContainer> - <DxcSelect - options={itemsPerPageOptions.map((num) => ({ - label: num.toString(), - value: num.toString(), - }))} - onChange={(newValue) => { - itemsPerPageFunction?.(Number(newValue.value)); - }} - value={itemsPerPage.toString()} - size="fillParent" - tabIndex={tabIndex} - /> - </SelectContainer> - </ItemsPageContainer> - )} - <TotalItemsContainer> - {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} - </TotalItemsContainer> - {onPageChange && ( + <DxcPaginatorContainer> + {itemsPerPageOptions && ( + <ItemsPerPageContainer> + <span>{translatedLabels.paginator.itemsPerPageText}</span> + <SelectContainer> + <DxcSelect + options={itemsPerPageOptions.map((num) => ({ + label: num.toString(), + value: num.toString(), + }))} + onChange={(newValue) => { + itemsPerPageFunction?.(Number(newValue.value)); + }} + value={itemsPerPage.toString()} + size="fillParent" + tabIndex={tabIndex} + /> + </SelectContainer> + </ItemsPerPageContainer> + )} + <TotalItemsContainer> + {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} + </TotalItemsContainer> + <GoToPageContainer> + {onPageChange && ( + <ButtonsContainer> <DxcButton mode="secondary" disabled={currentPageInternal === 1 || currentPageInternal === 0} @@ -64,9 +111,9 @@ const DxcPaginator = ({ onPageChange(1); }} title="First results" + size={{ height: "medium" }} /> - )} - {onPageChange && ( + <DxcButton mode="secondary" disabled={currentPageInternal === 1 || currentPageInternal === 0} @@ -76,30 +123,33 @@ const DxcPaginator = ({ onPageChange(currentPage - 1); }} title="Previous results" + size={{ height: "medium" }} /> - )} - {showGoToPage ? ( - <PageToSelectContainer> - <GoToLabel>{translatedLabels.paginator.goToPageText} </GoToLabel> - <SelectContainer> - <DxcSelect - options={Array.from(Array(totalPages), (e, num) => ({ - label: (num + 1).toString(), - value: (num + 1).toString(), - }))} - onChange={(newValue) => { - onPageChange?.(Number(newValue.value)); - }} - value={currentPage.toString()} - size="fillParent" - tabIndex={tabIndex} - /> - </SelectContainer> - </PageToSelectContainer> - ) : ( - <span>{translatedLabels.paginator.pageOfText(currentPageInternal, totalPages)}</span> - )} - {onPageChange && ( + </ButtonsContainer> + )} + {showGoToPage ? ( + <PageToSelectContainer> + <span>{translatedLabels.paginator.goToPageText} </span> + <SelectContainer> + <DxcSelect + options={Array.from(Array(totalPages), (e, num) => ({ + label: (num + 1).toString(), + value: (num + 1).toString(), + }))} + onChange={(newValue) => { + onPageChange?.(Number(newValue.value)); + }} + value={currentPage.toString()} + size="fillParent" + tabIndex={tabIndex} + /> + </SelectContainer> + </PageToSelectContainer> + ) : ( + <span>{translatedLabels.paginator.pageOfText(currentPageInternal, totalPages)}</span> + )} + {onPageChange && ( + <ButtonsContainer> <DxcButton mode="secondary" disabled={currentPageInternal === totalPages} @@ -109,9 +159,8 @@ const DxcPaginator = ({ onPageChange(currentPage + 1); }} title="Next results" + size={{ height: "medium" }} /> - )} - {onPageChange && ( <DxcButton mode="secondary" disabled={currentPageInternal === totalPages} @@ -121,70 +170,13 @@ const DxcPaginator = ({ onPageChange(totalPages); }} title="Last results" + size={{ height: "medium" }} /> - )} - </LabelsContainer> - </DxcPaginatorContainer> - </ThemeProvider> + </ButtonsContainer> + )} + </GoToPageContainer> + </DxcPaginatorContainer> ); }; -const DxcPaginatorContainer = styled.div` - display: flex; - font-family: ${(props) => props.theme.fontFamily}; - font-size: ${(props) => props.theme.fontSize}; - font-weight: ${(props) => props.theme.fontWeight}; - font-style: ${(props) => props.theme.fontStyle}; - text-transform: ${(props) => props.theme.fontTextTransform}; - background-color: ${(props) => props.theme.backgroundColor}; - color: ${(props) => props.theme.fontColor}; - padding: ${(props) => props.theme.verticalPadding} ${(props) => props.theme.horizontalPadding}; - - button { - &:disabled { - background-color: transparent !important; - opacity: 0.3 !important; - } - } -`; - -const SelectContainer = styled.div` - min-width: 5.25rem; -`; - -const ItemsPageContainer = styled.span` - display: flex; - align-items: center; - margin-right: ${(props) => props.theme.itemsPerPageSelectorMarginRight}; - margin-left: ${(props) => props.theme.itemsPerPageSelectorMarginLeft}; -`; - -const ItemsLabel = styled.span` - margin-right: 0.5rem; -`; - -const GoToLabel = styled.span` - margin-right: 0.5rem; - margin-left: 0.5rem; -`; - -const TotalItemsContainer = styled.span` - margin-right: ${(props) => props.theme.totalItemsContainerMarginRight}; - margin-left: ${(props) => props.theme.totalItemsContainerMarginLeft}; -`; - -const LabelsContainer = styled.div` - display: flex; - gap: 0.5rem; - width: 100%; - justify-content: flex-end; - align-items: center; -`; - -const PageToSelectContainer = styled.span` - display: flex; - align-items: center; - margin-right: 0.5rem; -`; - export default DxcPaginator;