@brightspace-ui-labs/pagination v2.1.1

d2l-labs-pagination

Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:

• Design organization buy-in
• design.d2l entry
• Architectural sign-off
• Continuous integration
• Cross-browser testing
• Unit tests (if applicable)
• Accessibility tests
• Visual diff tests
• Localization with Serge (if applicable)
• Demo page
• README documentation

A component to indicate the existence of, and provide navigation for, multiple pages of content.

Installation

To install from NPM:

npm install @brightspace-ui-labs/pagination

Usage

<script type="module">
    import '@brightspace-ui-labs/pagination/pagination.js';
</script>
<d2l-labs-pagination></d2l-labs-pagination>

Properties:

• page-number (required, Number): The current page number
• max-page-number (required, Number): The highest page number the user could navigate to
• show-item-count-select (Boolean, default:False): Determines whether or not to show the Results Per Page select component.
• item-count-options (Array, default:[10,20,30,40]): The options available in the Results Per Page select component.
• selected-count-option(Number): The starting item-count-options option to display in the Results Per Page select component.

Events: The d2l-labs-pagination dispatches the pagination-page-change event when either the navigation buttons are pressed, or the page number is modified to point to a valid page number. It will return the number of the requested page:

pagination.addEventListener('pagination-page-change', (e) => {
  console.log(e.detail.page);
});

The d2l-labs-pagination dispatches the pagination-item-counter-change event when the item count selector is value is changed. It will return the number of items requested per page:

pagination.addEventListener('pagination-item-counter-change', (e) => {
  console.log(e.detail.itemCount);
});

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

Running the demos

To start an es-dev-server that hosts the demo page and tests:

npm start

Linting

# eslint and lit-analyzer
npm run lint

# eslint only
npm run lint:eslint

# lit-analyzer only
npm run lint:lit

Testing

# lint, unit test and visual-diff test
npm test

# lint only
npm run lint

# unit tests only
npm run test:headless

# debug or run a subset of local unit tests
# then navigate to `http://localhost:9876/debug.html`
npm run test:headless:watch

Versioning and Releasing

This repo is configured to use semantic-release. Commits prefixed with fix: and feat: will trigger patch and minor releases when merged to main.

To learn how to create major releases and release from maintenance branches, refer to the semantic-release GitHub Action documentation.