feat(Pagination): add story and tests to the design-system

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;
+}

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";
+

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);

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;

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;

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);

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;

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 <Pagination.First onClick={onClick} disabled={disabled} />

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
 }

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 <Pagination.Last onClick={onClick} disabled={disabled} />

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 <Pagination.Next onClick={onClick} disabled={disabled} />

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 <Pagination.Prev onClick={onClick} disabled={disabled} />

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

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

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;

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<typeof Pagination> = {
+  title: 'Pagination',
+  component: Pagination,
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof Pagination>
+
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <Pagination.First onClick={() => {}} />
+      <Pagination.Prev onClick={() => {}} />
+      <Pagination.Item pageNumber={1} onClick={() => {}} />
+      <Pagination.Ellipsis />
+      <Pagination.Item pageNumber={10} onClick={() => {}} />
+      <Pagination.Item pageNumber={11} onClick={() => {}} />
+      <Pagination.Item pageNumber={12} active onClick={() => {}} />
+      <Pagination.Item pageNumber={13} onClick={() => {}} />
+      <Pagination.Item pageNumber={14} onClick={() => {}} />
+      <Pagination.Ellipsis />
+      <Pagination.Item pageNumber={20} onClick={() => {}} />
+      <Pagination.Next onClick={() => {}} />
+      <Pagination.Last onClick={() => {}} />
+    </Pagination>
+  )
+}

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(<Pagination />)
+
+    cy.findByRole('list').should('exist')
+  })
+})

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(<Pagination.Ellipsis />)
+
+    cy.findByRole('button', { name: 'More' }).should('exist')
+  })
+})

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(<Pagination.First onClick={() => {}} />)
+    cy.findByRole('button', { name: 'First' }).should('exist')
+  })
+
+  it('should call onClick event', () => {
+    const onClick = cy.stub().resolves()
+    cy.mount(<Pagination.First onClick={onClick} />)
+
+    cy.findByRole('button', { name: 'First' }).click()
+
+    cy.wrap(onClick).should('be.calledOnce')
+  })
+
+  it('should be disabled', () => {
+    cy.mount(<Pagination.First onClick={() => {}} disabled />)
+
+    cy.findByRole('button', { name: 'First' }).should('not.exist')
+    cy.findByText('First').should('exist')
+  })
+})