From 4437ae736024007c31bbbb91881b703eb1ae8476 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Fri, 30 Jun 2023 16:51:04 +0200 Subject: [PATCH] feat(Pagination): add story and tests to the design-system --- .../assets/styles/bootstrap-customized.scss | 100 ++++++++++++++++++ .../styles/design-tokens/colors.module.scss | 0 .../design-tokens/typography.module.scss | 0 .../assets/styles/fontcustom.scss | 0 .../src/lib/assets/styles/index.scss | 3 + .../assets/styles/bootstrap-customized.scss | 100 ------------------ .../lib/components/assets/styles/index.scss | 3 - .../lib/components/badge/Badge.module.scss | 2 +- .../lib/components/button/Button.module.scss | 2 +- .../DropdownButton.module.scss | 2 +- .../FormGroupWithMultipleFields.module.scss | 2 +- .../RequiredInputSymbol.module.scss | 2 +- .../components/pagination/PaginationFirst.tsx | 2 +- .../components/pagination/PaginationItem.tsx | 2 +- .../components/pagination/PaginationLast.tsx | 2 +- .../components/pagination/PaginationNext.tsx | 2 +- .../components/pagination/PaginationPrev.tsx | 2 +- .../src/lib/components/theme/BaseTheme.ts | 4 +- .../lib/components/theme/ThemeProvider.tsx | 2 +- .../tooltip/QuestionIcon.module.scss | 2 +- .../stories/pagination/Pagination.stories.tsx | 41 +++++++ .../component/pagination/Pagination.spec.tsx | 9 ++ .../pagination/PaginationEllipsis.spec.tsx | 9 ++ .../pagination/PaginationFirst.spec.tsx | 24 +++++ .../pagination/PaginationItem.spec.tsx | 29 +++++ .../pagination/PaginationLast.spec.tsx | 23 ++++ .../pagination/PaginationNext.spec.tsx | 23 ++++ .../pagination/PaginationPrev.spec.tsx | 23 ++++ .../DatasetCitation.module.scss | 2 +- .../file-info-cell/FileInfoCell.module.scss | 4 +- .../CopyToClipboard.module.scss | 2 +- .../file-thumbnail/FileThumbnail.module.scss | 4 +- .../HelloDataverse.module.scss | 2 +- src/sections/layout/footer/Footer.module.scss | 4 +- 34 files changed, 307 insertions(+), 126 deletions(-) create mode 100644 packages/design-system/src/lib/assets/styles/bootstrap-customized.scss rename packages/design-system/src/lib/{components => }/assets/styles/design-tokens/colors.module.scss (100%) rename packages/design-system/src/lib/{components => }/assets/styles/design-tokens/typography.module.scss (100%) rename packages/design-system/src/lib/{components => }/assets/styles/fontcustom.scss (100%) create mode 100644 packages/design-system/src/lib/assets/styles/index.scss delete mode 100644 packages/design-system/src/lib/components/assets/styles/bootstrap-customized.scss delete mode 100644 packages/design-system/src/lib/components/assets/styles/index.scss create mode 100644 packages/design-system/src/lib/stories/pagination/Pagination.stories.tsx create mode 100644 packages/design-system/tests/component/pagination/Pagination.spec.tsx create mode 100644 packages/design-system/tests/component/pagination/PaginationEllipsis.spec.tsx create mode 100644 packages/design-system/tests/component/pagination/PaginationFirst.spec.tsx create mode 100644 packages/design-system/tests/component/pagination/PaginationItem.spec.tsx create mode 100644 packages/design-system/tests/component/pagination/PaginationLast.spec.tsx create mode 100644 packages/design-system/tests/component/pagination/PaginationNext.spec.tsx create mode 100644 packages/design-system/tests/component/pagination/PaginationPrev.spec.tsx diff --git a/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss b/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss new file mode 100644 index 000000000..acc6a1493 --- /dev/null +++ b/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss @@ -0,0 +1,100 @@ +@import "src/lib/assets/styles/design-tokens/typography.module"; +@import "src/lib/assets/styles/design-tokens/colors.module"; + +// Theme + +$primary: $dv-primary-color; +$secondary: $dv-secondary-color; +$success: $dv-success-color; +$info: $dv-info-color; +$warning: $dv-warning-color; +$danger: $dv-danger-color; + +@import "../../../../../../node_modules/bootstrap/scss/functions"; +@import "../../../../../../node_modules/bootstrap/scss/variables"; +@import "../../../../../../node_modules/bootstrap/scss/mixins"; + +// Body +$body-color: $dv-text-color; +$headings-color: $dv-headings-color; + +// Typography +$font-family-base: $dv-font-family; + +$font-size-base: $dv-font-size; +$font-size-sm: $dv-font-size-sm; + +$line-height-base: $dv-line-height; + +$font-weight-normal: $dv-font-weight; +$font-weight-light: $dv-font-weight-light; +$font-weight-bold: $dv-font-weight-bold; + +// Links +$link-color: $dv-link-color; +$link-hover-color: $dv-link-hover-color; + +// Base +@import "../../../../../../node_modules/bootstrap/scss/maps"; +@import "../../../../../../node_modules/bootstrap/scss/root"; +@import "../../../../../../node_modules/bootstrap/scss/reboot"; +@import "../../../../../../node_modules/bootstrap/scss/type"; + +// Buttons and Dropdowns +@import "../../../../../../node_modules/bootstrap/scss/buttons"; +@import '../../../../../../node_modules/bootstrap/scss/button-group'; +@import "../../../../../../node_modules/bootstrap/scss/dropdown"; + +// Grid +@import "../../../../../../node_modules/bootstrap/scss/utilities"; +@import "../../../../../../node_modules/bootstrap/scss/utilities/api"; +@import "../../../../../../node_modules/bootstrap/scss/containers"; +@import "../../../../../../node_modules/bootstrap/scss/grid"; + +// Badge +@import "../../../../../../node_modules/bootstrap/scss/badge"; + +// Forms +$form-label-font-weight: $dv-font-weight-bold; + +@import "../../../../../../node_modules/bootstrap/scss/forms"; + + +// Table +@import "../../../../../../node_modules/bootstrap/scss/tables"; + + +// Accordion +@import "../../../../../../node_modules/bootstrap/scss/accordion"; + +// Modal +@import "../../../../../../node_modules/bootstrap/scss/modal"; +@import "../../../../../../node_modules/bootstrap/scss/close"; + +// Breadcrumb +$breadcrumb-divider: ">"; + +@import "../../../../../../node_modules/bootstrap/scss/breadcrumb"; + +// Tooltip +@import "../../../../../../node_modules/bootstrap/scss/tooltip"; + +// Alert +@import "../../../../../../node_modules/bootstrap/scss/alert"; + +// Pagination +@import "../../../../../../node_modules/bootstrap/scss/pagination"; + +// Navbar + +$navbar-light-brand-color: $dv-brand-color; +$navbar-brand-font-size: $dv-brand-font-size; + +@import "../../../../../../node_modules/bootstrap/scss/nav"; +@import "../../../../../../node_modules/bootstrap/scss/navbar"; +@import "../../../../../../node_modules/bootstrap/scss/transitions"; +@import "../../../../../../node_modules/bootstrap/scss/helpers"; + +.navbar-collapse { + justify-content: end; +} \ No newline at end of file diff --git a/packages/design-system/src/lib/components/assets/styles/design-tokens/colors.module.scss b/packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss similarity index 100% rename from packages/design-system/src/lib/components/assets/styles/design-tokens/colors.module.scss rename to packages/design-system/src/lib/assets/styles/design-tokens/colors.module.scss diff --git a/packages/design-system/src/lib/components/assets/styles/design-tokens/typography.module.scss b/packages/design-system/src/lib/assets/styles/design-tokens/typography.module.scss similarity index 100% rename from packages/design-system/src/lib/components/assets/styles/design-tokens/typography.module.scss rename to packages/design-system/src/lib/assets/styles/design-tokens/typography.module.scss diff --git a/packages/design-system/src/lib/components/assets/styles/fontcustom.scss b/packages/design-system/src/lib/assets/styles/fontcustom.scss similarity index 100% rename from packages/design-system/src/lib/components/assets/styles/fontcustom.scss rename to packages/design-system/src/lib/assets/styles/fontcustom.scss diff --git a/packages/design-system/src/lib/assets/styles/index.scss b/packages/design-system/src/lib/assets/styles/index.scss new file mode 100644 index 000000000..9a6cc6da3 --- /dev/null +++ b/packages/design-system/src/lib/assets/styles/index.scss @@ -0,0 +1,3 @@ +@import "src/lib/assets/styles/fontcustom"; +@import "src/lib/assets/styles/bootstrap-customized"; + diff --git a/packages/design-system/src/lib/components/assets/styles/bootstrap-customized.scss b/packages/design-system/src/lib/components/assets/styles/bootstrap-customized.scss deleted file mode 100644 index 38c441a0f..000000000 --- a/packages/design-system/src/lib/components/assets/styles/bootstrap-customized.scss +++ /dev/null @@ -1,100 +0,0 @@ -@import "src/lib/components/assets/styles/design-tokens/typography.module"; -@import "src/lib/components/assets/styles/design-tokens/colors.module"; - -// Theme - -$primary: $dv-primary-color; -$secondary: $dv-secondary-color; -$success: $dv-success-color; -$info: $dv-info-color; -$warning: $dv-warning-color; -$danger: $dv-danger-color; - -@import "bootstrap/scss/functions"; -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/mixins"; - -// Body -$body-color: $dv-text-color; -$headings-color: $dv-headings-color; - -// Typography -$font-family-base: $dv-font-family; - -$font-size-base: $dv-font-size; -$font-size-sm: $dv-font-size-sm; - -$line-height-base: $dv-line-height; - -$font-weight-normal: $dv-font-weight; -$font-weight-light: $dv-font-weight-light; -$font-weight-bold: $dv-font-weight-bold; - -// Links -$link-color: $dv-link-color; -$link-hover-color: $dv-link-hover-color; - -// Base -@import "bootstrap/scss/maps"; -@import "bootstrap/scss/root"; -@import "bootstrap/scss/reboot"; -@import "bootstrap/scss/type"; - -// Buttons and Dropdowns -@import "bootstrap/scss/buttons"; -@import 'bootstrap/scss/button-group'; -@import "bootstrap/scss/dropdown"; - -// Grid -@import "bootstrap/scss/utilities"; -@import "bootstrap/scss/utilities/api"; -@import "bootstrap/scss/containers"; -@import "bootstrap/scss/grid"; - -// Badge -@import "bootstrap/scss/badge"; - -// Forms -$form-label-font-weight: $dv-font-weight-bold; - -@import "bootstrap/scss/forms"; - - -// Table -@import "bootstrap/scss/tables"; - - -// Accordion -@import "bootstrap/scss/accordion"; - -// Modal -@import "bootstrap/scss/modal"; -@import "bootstrap/scss/close"; - -// Breadcrumb -$breadcrumb-divider: ">"; - -@import "bootstrap/scss/breadcrumb"; - -// Tooltip -@import "bootstrap/scss/tooltip"; - -// Alert -@import "bootstrap/scss/alert"; - -// Pagination -@import "bootstrap/scss/pagination"; - -// Navbar - -$navbar-light-brand-color: $dv-brand-color; -$navbar-brand-font-size: $dv-brand-font-size; - -@import "bootstrap/scss/nav"; -@import "bootstrap/scss/navbar"; -@import "bootstrap/scss/transitions"; -@import "bootstrap/scss/helpers"; - -.navbar-collapse { - justify-content: end; -} \ No newline at end of file diff --git a/packages/design-system/src/lib/components/assets/styles/index.scss b/packages/design-system/src/lib/components/assets/styles/index.scss deleted file mode 100644 index 1635c7e16..000000000 --- a/packages/design-system/src/lib/components/assets/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "src/lib/components/assets/styles/fontcustom"; -@import "src/lib/components/assets/styles/bootstrap-customized"; - diff --git a/packages/design-system/src/lib/components/badge/Badge.module.scss b/packages/design-system/src/lib/components/badge/Badge.module.scss index a7d817d7d..c3e0ac8ba 100644 --- a/packages/design-system/src/lib/components/badge/Badge.module.scss +++ b/packages/design-system/src/lib/components/badge/Badge.module.scss @@ -1,6 +1,6 @@ @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; -@import 'src/lib/components/assets/styles/design-tokens/colors.module'; +@import 'src/lib/assets/styles/design-tokens/colors.module'; .primary:not(#\#) { color: color-contrast($dv-primary-color); diff --git a/packages/design-system/src/lib/components/button/Button.module.scss b/packages/design-system/src/lib/components/button/Button.module.scss index 7fb0569bd..b6a484e75 100644 --- a/packages/design-system/src/lib/components/button/Button.module.scss +++ b/packages/design-system/src/lib/components/button/Button.module.scss @@ -1,4 +1,4 @@ -@import "src/lib/components/assets/styles/design-tokens/colors.module"; +@import "src/lib/assets/styles/design-tokens/colors.module"; .border { border: 1px solid $dv-button-border-color; diff --git a/packages/design-system/src/lib/components/dropdown-button/DropdownButton.module.scss b/packages/design-system/src/lib/components/dropdown-button/DropdownButton.module.scss index 874686b70..da26744c9 100644 --- a/packages/design-system/src/lib/components/dropdown-button/DropdownButton.module.scss +++ b/packages/design-system/src/lib/components/dropdown-button/DropdownButton.module.scss @@ -1,4 +1,4 @@ -@import "src/lib/components/assets/styles/design-tokens/colors.module"; +@import "src/lib/assets/styles/design-tokens/colors.module"; .border { border: 1px solid $dv-button-border-color; diff --git a/packages/design-system/src/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.module.scss b/packages/design-system/src/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.module.scss index 17e2a56a0..d8700a3ab 100644 --- a/packages/design-system/src/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.module.scss +++ b/packages/design-system/src/lib/components/form/form-group-multiple-fields/FormGroupWithMultipleFields.module.scss @@ -1,4 +1,4 @@ -@import "src/lib/components/assets/styles/design-tokens/typography.module"; +@import "src/lib/assets/styles/design-tokens/typography.module"; .title { padding-top: calc(0.375rem + 1px); diff --git a/packages/design-system/src/lib/components/form/required-input-symbol/RequiredInputSymbol.module.scss b/packages/design-system/src/lib/components/form/required-input-symbol/RequiredInputSymbol.module.scss index 0d47c8103..6b755b404 100644 --- a/packages/design-system/src/lib/components/form/required-input-symbol/RequiredInputSymbol.module.scss +++ b/packages/design-system/src/lib/components/form/required-input-symbol/RequiredInputSymbol.module.scss @@ -1,4 +1,4 @@ -@import "src/lib/components/assets/styles/design-tokens/colors.module"; +@import "src/lib/assets/styles/design-tokens/colors.module"; .asterisk { color: $dv-danger-color; diff --git a/packages/design-system/src/lib/components/pagination/PaginationFirst.tsx b/packages/design-system/src/lib/components/pagination/PaginationFirst.tsx index 9225a6022..7a7d489cd 100644 --- a/packages/design-system/src/lib/components/pagination/PaginationFirst.tsx +++ b/packages/design-system/src/lib/components/pagination/PaginationFirst.tsx @@ -2,7 +2,7 @@ import { Pagination } from 'react-bootstrap' interface PaginationFirstProps { onClick: () => void - disabled: boolean + disabled?: boolean } export function PaginationFirst({ onClick, disabled }: PaginationFirstProps) { return diff --git a/packages/design-system/src/lib/components/pagination/PaginationItem.tsx b/packages/design-system/src/lib/components/pagination/PaginationItem.tsx index 44199ed33..c2876bb6f 100644 --- a/packages/design-system/src/lib/components/pagination/PaginationItem.tsx +++ b/packages/design-system/src/lib/components/pagination/PaginationItem.tsx @@ -2,7 +2,7 @@ import { Pagination } from 'react-bootstrap' interface PaginationItemProps { pageNumber: number - onClick?: () => void + onClick: () => void disabled?: boolean active?: boolean } diff --git a/packages/design-system/src/lib/components/pagination/PaginationLast.tsx b/packages/design-system/src/lib/components/pagination/PaginationLast.tsx index f47848575..b0234781a 100644 --- a/packages/design-system/src/lib/components/pagination/PaginationLast.tsx +++ b/packages/design-system/src/lib/components/pagination/PaginationLast.tsx @@ -2,7 +2,7 @@ import { Pagination } from 'react-bootstrap' interface PaginationLastProps { onClick: () => void - disabled: boolean + disabled?: boolean } export function PaginationLast({ onClick, disabled }: PaginationLastProps) { return diff --git a/packages/design-system/src/lib/components/pagination/PaginationNext.tsx b/packages/design-system/src/lib/components/pagination/PaginationNext.tsx index 225e515ff..49756a05b 100644 --- a/packages/design-system/src/lib/components/pagination/PaginationNext.tsx +++ b/packages/design-system/src/lib/components/pagination/PaginationNext.tsx @@ -2,7 +2,7 @@ import { Pagination } from 'react-bootstrap' interface PaginationNextProps { onClick: () => void - disabled: boolean + disabled?: boolean } export function PaginationNext({ onClick, disabled }: PaginationNextProps) { return diff --git a/packages/design-system/src/lib/components/pagination/PaginationPrev.tsx b/packages/design-system/src/lib/components/pagination/PaginationPrev.tsx index 36b3e1612..fbfd7a289 100644 --- a/packages/design-system/src/lib/components/pagination/PaginationPrev.tsx +++ b/packages/design-system/src/lib/components/pagination/PaginationPrev.tsx @@ -2,7 +2,7 @@ import { Pagination } from 'react-bootstrap' interface PaginationPrevProps { onClick: () => void - disabled: boolean + disabled?: boolean } export function PaginationPrev({ onClick, disabled }: PaginationPrevProps) { return diff --git a/packages/design-system/src/lib/components/theme/BaseTheme.ts b/packages/design-system/src/lib/components/theme/BaseTheme.ts index 2ab0a2209..9c7399336 100644 --- a/packages/design-system/src/lib/components/theme/BaseTheme.ts +++ b/packages/design-system/src/lib/components/theme/BaseTheme.ts @@ -1,5 +1,5 @@ -import colorVariables from '../assets/styles/design-tokens/colors.module.scss' -import typographyVariables from '../assets/styles/design-tokens/typography.module.scss' +import colorVariables from '../../assets/styles/design-tokens/colors.module.scss' +import typographyVariables from '../../assets/styles/design-tokens/typography.module.scss' export interface BaseThemeType { themeKey: string diff --git a/packages/design-system/src/lib/components/theme/ThemeProvider.tsx b/packages/design-system/src/lib/components/theme/ThemeProvider.tsx index ebcae51a9..20a23c107 100644 --- a/packages/design-system/src/lib/components/theme/ThemeProvider.tsx +++ b/packages/design-system/src/lib/components/theme/ThemeProvider.tsx @@ -1,7 +1,7 @@ import { baseTheme, BaseThemeType } from './BaseTheme' import { ReactNode, useContext } from 'react' import { ThemeContext } from './ThemeContext' -import '../assets/styles/index.scss' +import '../../assets/styles/index.scss' export interface ThemeProps { theme?: BaseThemeType diff --git a/packages/design-system/src/lib/components/tooltip/QuestionIcon.module.scss b/packages/design-system/src/lib/components/tooltip/QuestionIcon.module.scss index 160ae57e3..581aa0ec2 100644 --- a/packages/design-system/src/lib/components/tooltip/QuestionIcon.module.scss +++ b/packages/design-system/src/lib/components/tooltip/QuestionIcon.module.scss @@ -1,4 +1,4 @@ -@import "src/lib/components/assets/styles/design-tokens/colors.module"; +@import "src/lib/assets/styles/design-tokens/colors.module"; .question-tooltip { color: $dv-tooltip-color; diff --git a/packages/design-system/src/lib/stories/pagination/Pagination.stories.tsx b/packages/design-system/src/lib/stories/pagination/Pagination.stories.tsx new file mode 100644 index 000000000..2d613987c --- /dev/null +++ b/packages/design-system/src/lib/stories/pagination/Pagination.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Pagination } from '../../components/pagination/Pagination' + +/** + * ## Description + * The pagination component is a user interface element that allows users to navigate through a collection of items or + * pages. It is commonly used to display a large set of data in smaller, manageable chunks. + + * ## Usage guidelines + * The pagination component should be used when there is a need to break down a large amount of content into smaller + * sections to enhance usability and navigation. It should be placed at the bottom or top of the content it controls + * and provide clear navigation options for users to move between pages. + */ +const meta: Meta = { + title: 'Pagination', + component: Pagination, + tags: ['autodocs'] +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: () => ( + + {}} /> + {}} /> + {}} /> + + {}} /> + {}} /> + {}} /> + {}} /> + {}} /> + + {}} /> + {}} /> + {}} /> + + ) +} diff --git a/packages/design-system/tests/component/pagination/Pagination.spec.tsx b/packages/design-system/tests/component/pagination/Pagination.spec.tsx new file mode 100644 index 000000000..79db03be0 --- /dev/null +++ b/packages/design-system/tests/component/pagination/Pagination.spec.tsx @@ -0,0 +1,9 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('Pagination', () => { + it('should render correctly', () => { + cy.mount() + + cy.findByRole('list').should('exist') + }) +}) diff --git a/packages/design-system/tests/component/pagination/PaginationEllipsis.spec.tsx b/packages/design-system/tests/component/pagination/PaginationEllipsis.spec.tsx new file mode 100644 index 000000000..3159bdae0 --- /dev/null +++ b/packages/design-system/tests/component/pagination/PaginationEllipsis.spec.tsx @@ -0,0 +1,9 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('PaginationEllipsis component', () => { + it('should render correctly', () => { + cy.mount() + + cy.findByRole('button', { name: 'More' }).should('exist') + }) +}) diff --git a/packages/design-system/tests/component/pagination/PaginationFirst.spec.tsx b/packages/design-system/tests/component/pagination/PaginationFirst.spec.tsx new file mode 100644 index 000000000..b8610e77f --- /dev/null +++ b/packages/design-system/tests/component/pagination/PaginationFirst.spec.tsx @@ -0,0 +1,24 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('PaginationFirst component', () => { + it('should render correctly', () => { + cy.mount( {}} />) + cy.findByRole('button', { name: 'First' }).should('exist') + }) + + it('should call onClick event', () => { + const onClick = cy.stub().resolves() + cy.mount() + + cy.findByRole('button', { name: 'First' }).click() + + cy.wrap(onClick).should('be.calledOnce') + }) + + it('should be disabled', () => { + cy.mount( {}} disabled />) + + cy.findByRole('button', { name: 'First' }).should('not.exist') + cy.findByText('First').should('exist') + }) +}) diff --git a/packages/design-system/tests/component/pagination/PaginationItem.spec.tsx b/packages/design-system/tests/component/pagination/PaginationItem.spec.tsx new file mode 100644 index 000000000..95529e07e --- /dev/null +++ b/packages/design-system/tests/component/pagination/PaginationItem.spec.tsx @@ -0,0 +1,29 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('PaginationItem component', () => { + it('should render correctly', () => { + cy.mount( {}} />) + cy.findByRole('button', { name: '10' }).should('exist') + }) + + it('should call onClick event', () => { + const onClick = cy.stub().resolves() + cy.mount() + + cy.findByRole('button', { name: '10' }).click() + + cy.wrap(onClick).should('be.calledOnce') + }) + + it('should be disabled', () => { + cy.mount( {}} />) + cy.findByRole('button', { name: '10' }).should('not.exist') + cy.findByText('10').should('exist') + }) + + it('should be active', () => { + cy.mount( {}} />) + const activeListItem = cy.findByText(/10/i).parent('li') + activeListItem.should('have.class', 'active') + }) +}) diff --git a/packages/design-system/tests/component/pagination/PaginationLast.spec.tsx b/packages/design-system/tests/component/pagination/PaginationLast.spec.tsx new file mode 100644 index 000000000..15db33c03 --- /dev/null +++ b/packages/design-system/tests/component/pagination/PaginationLast.spec.tsx @@ -0,0 +1,23 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('PaginationLast component', () => { + it('should render correctly', () => { + cy.mount( {}} />) + cy.findByRole('button', { name: 'Last' }).should('exist') + }) + + it('should call onClick event', () => { + const onClick = cy.stub().resolves() + cy.mount() + + cy.findByRole('button', { name: 'Last' }).click() + + cy.wrap(onClick).should('be.calledOnce') + }) + + it('should be disabled', () => { + cy.mount( {}} disabled />) + cy.findByRole('button', { name: 'Last' }).should('not.exist') + cy.findByText('Last').should('exist') + }) +}) diff --git a/packages/design-system/tests/component/pagination/PaginationNext.spec.tsx b/packages/design-system/tests/component/pagination/PaginationNext.spec.tsx new file mode 100644 index 000000000..e08374285 --- /dev/null +++ b/packages/design-system/tests/component/pagination/PaginationNext.spec.tsx @@ -0,0 +1,23 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('PaginationNext component', () => { + it('should render correctly', () => { + cy.mount( {}} />) + cy.findByRole('button', { name: 'Next' }).should('exist') + }) + + it('should call onClick event', () => { + const onClick = cy.stub().resolves() + cy.mount() + + cy.findByRole('button', { name: 'Next' }).click() + + cy.wrap(onClick).should('be.calledOnce') + }) + + it('should be disabled', () => { + cy.mount( {}} disabled />) + cy.findByRole('button', { name: 'Next' }).should('not.exist') + cy.findByText('Next').should('exist') + }) +}) diff --git a/packages/design-system/tests/component/pagination/PaginationPrev.spec.tsx b/packages/design-system/tests/component/pagination/PaginationPrev.spec.tsx new file mode 100644 index 000000000..5a87ef501 --- /dev/null +++ b/packages/design-system/tests/component/pagination/PaginationPrev.spec.tsx @@ -0,0 +1,23 @@ +import { Pagination } from '../../../src/lib/components/pagination/Pagination' + +describe('PaginationPrev component', () => { + it('should render correctly', () => { + cy.mount( {}} />) + cy.findByRole('button', { name: 'Previous' }).should('exist') + }) + + it('should call onClick event', () => { + const onClick = cy.stub().resolves() + cy.mount() + + cy.findByRole('button', { name: 'Previous' }).click() + + cy.wrap(onClick).should('be.calledOnce') + }) + + it('should be disabled', () => { + cy.mount( {}} disabled />) + cy.findByRole('button', { name: 'Previous' }).should('not.exist') + cy.findByText('Previous').should('exist') + }) +}) diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index ea2a500d4..fb61cf5e7 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss +++ b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss @@ -1,4 +1,4 @@ -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .container { diff --git a/src/sections/dataset/dataset-files/files-table/file-info-cell/FileInfoCell.module.scss b/src/sections/dataset/dataset-files/files-table/file-info-cell/FileInfoCell.module.scss index 5152151e8..fefa3916a 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info-cell/FileInfoCell.module.scss +++ b/src/sections/dataset/dataset-files/files-table/file-info-cell/FileInfoCell.module.scss @@ -1,5 +1,5 @@ -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/typography.module"; -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .container { display: flex; diff --git a/src/sections/dataset/dataset-files/files-table/file-info-cell/copy-to-clipboard-button/CopyToClipboard.module.scss b/src/sections/dataset/dataset-files/files-table/file-info-cell/copy-to-clipboard-button/CopyToClipboard.module.scss index 1efffcf49..a901ca60d 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info-cell/copy-to-clipboard-button/CopyToClipboard.module.scss +++ b/src/sections/dataset/dataset-files/files-table/file-info-cell/copy-to-clipboard-button/CopyToClipboard.module.scss @@ -1,4 +1,4 @@ -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .container { margin-left: 5px; diff --git a/src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnail.module.scss b/src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnail.module.scss index ccbe5b1aa..211975f9c 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnail.module.scss +++ b/src/sections/dataset/dataset-files/files-table/file-info-cell/file-thumbnail/FileThumbnail.module.scss @@ -1,5 +1,5 @@ -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/typography.module"; -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .thumbnail { max-width: 64px; diff --git a/src/sections/hello-dataverse/HelloDataverse.module.scss b/src/sections/hello-dataverse/HelloDataverse.module.scss index d7898b46d..d5dcc3a44 100644 --- a/src/sections/hello-dataverse/HelloDataverse.module.scss +++ b/src/sections/hello-dataverse/HelloDataverse.module.scss @@ -1,4 +1,4 @@ -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; @import "src/sections/assets/variables"; .container { diff --git a/src/sections/layout/footer/Footer.module.scss b/src/sections/layout/footer/Footer.module.scss index b9e3407d8..28eedebc1 100644 --- a/src/sections/layout/footer/Footer.module.scss +++ b/src/sections/layout/footer/Footer.module.scss @@ -1,5 +1,5 @@ -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/colors.module"; -@import "node_modules/dataverse-design-system/src/lib/components/assets/styles/design-tokens/typography.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; +@import "node_modules/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module"; .container { padding: 60px 0;