genesys-spark-components 4.0.0-beta.8 → 4.0.1

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/tests/gux-pagination-items-per-page.spec.js

@@ -0,0 +1,33 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxPaginationItemsPerPage } from "../gux-pagination-items-per-page";
+import { GuxDropdown } from "../../../gux-dropdown/gux-dropdown";
+import { GuxListbox } from "../../../gux-listbox/gux-listbox";
+import { GuxOption } from "../../../gux-listbox/options/gux-option/gux-option";
+const components = [
+  GuxPaginationItemsPerPage,
+  GuxDropdown,
+  GuxListbox,
+  GuxOption
+];
+const language = 'en';
+describe('gux-pagination-items-per-page', () => {
+  describe('#render', () => {
+    [
+      { itemsPerPage: 25 },
+      { itemsPerPage: 50 },
+      { itemsPerPage: 75 },
+      { itemsPerPage: 100 }
+    ].forEach(({ itemsPerPage }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination-items-per-page
+            items-per-page="${itemsPerPage}">
+          </gux-pagination-items-per-page>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPaginationItemsPerPage);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination/gux-pagination.css

@@ -1,26 +1,27 @@
 :host {
   display: block;
-  border-top: 1px solid #e2e6ee;
+  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
+
 .gux-pagination-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: center;
-  justify-content: space-between;
-  height: 32px;
-  margin-top: 12px;
+  height: var(--gse-ui-dataTableItems-cell-tablePagination-height);
+  padding: var(--gse-ui-dataTableItems-tablePagination-padding);
+  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
 }
 .gux-pagination-container .gux-pagination-info {
   display: flex;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  place-content: stretch flex-start;
   align-items: center;
   align-self: auto;
-  justify-content: flex-start;
   order: 0;
 }
 .gux-pagination-container .gux-pagination-info > * {
@@ -28,12 +29,16 @@
   align-self: auto;
   order: 0;
 }
-.gux-pagination-container .gux-pagination-change {
+.gux-pagination-container .gux-pagination-spacer {
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  margin-left: 16px;
+}
+.gux-pagination-container .gux-pagination-change {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
 }
 .gux-pagination-container .gux-pagination-change:first-child {
   margin-left: 0;
-}
+}

package/dist/collection/components/stable/gux-pagination/gux-pagination.js

@@ -1,19 +1,23 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h, readTask } from "@stencil/core";
+import { afterNextRenderTimeout } from "../../../utils/dom/after-next-render";
+import { trackComponent } from "../../../utils/tracking/usage";
+const minAdvancedSpacerWidth = 24;
 export class GuxPagination {
   constructor() {
+    this.reinstateLayoutBreakpoint = 0;
+    this.layout = 'advanced';
     this.currentPage = 1;
     this.totalItems = 0;
     this.itemsPerPage = 25;
-    this.layout = 'full';
     this.totalPages = undefined;
+    this.displayedLayout = undefined;
   }
   setPage(page) {
     if (page <= 0) {
       this.setPage(1);
       return;
     }
-    const totalPages = this.calculateTotalPages();
+    const totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
     if (page > totalPages) {
       this.setPage(totalPages);
       return;
@@ -24,13 +28,6 @@ export class GuxPagination {
       itemsPerPage: this.itemsPerPage
     });
   }
-  calculateTotalPages() {
-    return Math.max(1, Math.ceil(this.totalItems / this.itemsPerPage));
-  }
-  calculateCurrentPage() {
-    const minCurrentPage = this.totalPages > 0 ? 1 : 0;
-    return Math.max(minCurrentPage, Math.min(this.currentPage, this.totalPages));
-  }
   handleInternalitemsperpagechange(event) {
     this.itemsPerPage = event.detail;
     this.setPage(1);
@@ -38,33 +35,61 @@ export class GuxPagination {
   handleInternalcurrentpagechange(event) {
     this.setPage(event.detail);
   }
-  getPaginationInfoElement(layout) {
-    if (layout === 'expanded') {
-      return null;
-    }
-    const content = [
-      h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage })
-    ];
-    if (layout === 'full') {
-      content.push(h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }));
-    }
-    return (h("div", { class: "gux-pagination-info" }, content));
+  calculateTotalPages(totalItems, itemsPerPage) {
+    return Math.max(1, Math.ceil(totalItems / itemsPerPage));
+  }
+  calculateCurrentPage(totalPages, currentPage) {
+    const minCurrentPage = totalPages > 0 ? 1 : 0;
+    return Math.max(minCurrentPage, Math.min(currentPage, totalPages));
+  }
+  checkPaginationContainerWidthForLayout() {
+    readTask(() => {
+      const container = this.root.shadowRoot.querySelector('.gux-pagination-container');
+      const spacer = this.root.shadowRoot.querySelector('.gux-pagination-spacer');
+      const containerWidth = container.clientWidth;
+      const spacerWidth = spacer.clientWidth;
+      if (spacerWidth < minAdvancedSpacerWidth &&
+        this.displayedLayout !== 'simple') {
+        this.reinstateLayoutBreakpoint = containerWidth;
+        this.displayedLayout = 'simple';
+      }
+      else if (containerWidth > this.reinstateLayoutBreakpoint) {
+        this.reinstateLayoutBreakpoint = 0;
+        this.displayedLayout = this.layout;
+      }
+    });
   }
   componentWillLoad() {
     trackComponent(this.root, { variant: this.layout });
   }
   componentWillRender() {
-    this.totalPages = this.calculateTotalPages();
-    this.currentPage = this.calculateCurrentPage();
+    this.totalPages = this.calculateTotalPages(this.totalItems, this.itemsPerPage);
+    this.currentPage = this.calculateCurrentPage(this.totalPages, this.currentPage);
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+  }
+  componentDidLoad() {
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => this.checkPaginationContainerWidthForLayout());
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.root.shadowRoot.querySelector('.gux-pagination-container'));
+    }
+    afterNextRenderTimeout(() => {
+      this.checkPaginationContainerWidthForLayout();
+    }, 500);
   }
   render() {
-    return (h("div", { class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons", { layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+    return (h("div", { class: "gux-pagination-container" }, h("div", { class: "gux-pagination-info" }, h("gux-pagination-item-counts", { "total-items": this.totalItems, "current-page": this.currentPage, "items-per-page": this.itemsPerPage }), this.displayedLayout === 'advanced' && (h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) }))), h("div", { class: "gux-pagination-spacer" }), h("div", { class: "gux-pagination-change" }, h("gux-pagination-buttons", { layout: this.displayedLayout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
   }
   static get is() { return "gux-pagination"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["gux-pagination.less"]
+      "$": ["gux-pagination.scss"]
     };
   }
   static get styleUrls() {
@@ -74,6 +99,30 @@ export class GuxPagination {
   }
   static get properties() {
     return {
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxPaginationLayout",
+          "resolved": "\"advanced\" | \"simple\"",
+          "references": {
+            "GuxPaginationLayout": {
+              "location": "import",
+              "path": "./gux-pagination.types",
+              "id": "src/components/stable/gux-pagination/gux-pagination.types.ts::GuxPaginationLayout"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The pagination component can have different layouts to suit the available space"
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "'advanced'"
+      },
       "currentPage": {
         "type": "number",
         "mutable": true,
@@ -119,7 +168,8 @@ export class GuxPagination {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxItemsPerPage"
             }
           }
         },
@@ -132,35 +182,13 @@ export class GuxPagination {
         "attribute": "items-per-page",
         "reflect": false,
         "defaultValue": "25"
-      },
-      "layout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "GuxPaginationLayout",
-          "resolved": "\"expanded\" | \"full\" | \"small\"",
-          "references": {
-            "GuxPaginationLayout": {
-              "location": "import",
-              "path": "./gux-pagination.types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The pagination component can have different layouts to suit the available space"
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "'full'"
       }
     };
   }
   static get states() {
     return {
-      "totalPages": {}
+      "totalPages": {},
+      "displayedLayout": {}
     };
   }
   static get events() {
@@ -180,7 +208,8 @@ export class GuxPagination {
           "references": {
             "GuxPaginationState": {
               "location": "import",
-              "path": "./gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxPaginationState"
             }
           }
         }

package/dist/collection/components/stable/gux-pagination/tests/gux-pagination.e2e.js

@@ -0,0 +1,97 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [
+  {
+    issueId: 'duplicate-id',
+    exclusionReason: 'Test uses seeded value for Math.random, so duplicate ids are expected'
+  }
+];
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  await page.addScriptTag({
+    path: '../../node_modules/axe-core/axe.min.js'
+  });
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-pagination', () => {
+  describe('#render', () => {
+    [
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'simple' }
+    ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination lang="en"
+            current-page="${currentPage}"
+            total-items="${totalItems}"
+            items-per-page="${itemsPerPage}"
+            layout="${layout}"
+          ></gux-pagination>
+        `;
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-pagination');
+        await a11yCheck(page, axeExclusions);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination/tests/gux-pagination.spec.js

@@ -0,0 +1,116 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxPagination } from "../gux-pagination";
+import { GuxButton } from "../../gux-button/gux-button";
+import { GuxDropdown } from "../../gux-dropdown/gux-dropdown";
+import { GuxListbox } from "../../gux-listbox/gux-listbox";
+import { GuxOption } from "../../gux-listbox/options/gux-option/gux-option";
+import { GuxPaginationButtons } from "../gux-pagination-buttons/gux-pagination-buttons";
+import { GuxPaginationItemCounts } from "../gux-pagination-item-counts/gux-pagination-item-counts";
+import { GuxPaginationItemsPerPage } from "../gux-pagination-items-per-page/gux-pagination-items-per-page";
+const components = [
+  GuxButton,
+  GuxDropdown,
+  GuxListbox,
+  GuxOption,
+  GuxOption,
+  GuxPagination,
+  GuxPaginationButtons,
+  GuxPaginationItemCounts,
+  GuxPaginationItemsPerPage
+];
+const language = 'en';
+describe('gux-pagination', () => {
+  describe('#render', () => {
+    [
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 1,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 50,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 75,
+        layout: 'advanced'
+      },
+      {
+        currentPage: 10,
+        totalItems: 1000,
+        itemsPerPage: 100,
+        layout: 'advanced'
+      },
+      { currentPage: 1, totalItems: 1000, itemsPerPage: 25, layout: 'simple' },
+      {
+        currentPage: -3,
+        totalItems: 1000,
+        itemsPerPage: 25,
+        layout: 'advanced'
+      },
+      { currentPage: -3, totalItems: 0, itemsPerPage: 25, layout: 'advanced' }
+    ].forEach(({ currentPage, totalItems, itemsPerPage, layout }, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const html = `
+          <gux-pagination
+            current-page="${currentPage}"
+            total-items="${totalItems}"
+            items-per-page="${itemsPerPage}"
+            layout="${layout}"
+          ></gux-pagination>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxPagination);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    it(`should render current page as 1 when total items is 0`, async () => {
+      const html = `
+      <gux-pagination
+      current-page="1"
+      total-items="0"
+      items-per-page="25"
+      layout="full"
+    ></gux-pagination>
+      `;
+      const page = await newSpecPage({ components, html, language });
+      expect(page.rootInstance).toBeInstanceOf(GuxPagination);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.css

@@ -2,31 +2,30 @@
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: flex-start;
-  justify-content: space-between;
   padding: var(--gse-ui-dataTableItems-tablePagination-padding);
-  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
-  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
-  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   font-family: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontFamily);
-  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   font-size: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontSize);
   font-weight: var(--gse-ui-dataTableItems-tablePagination-defaultText-fontWeight);
+  line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
+  color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
+  background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
+  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
 :host .gux-pagination-button-container {
   display: flex;
   flex-wrap: nowrap;
-  align-content: center;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
+  align-content: center;
 }
 :host .gux-button-align-content {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-button-gap);
   align-content: center;
   align-items: center;
-  gap: var(--gse-ui-button-gap);
 }
 :host .gux-button-align-content > * {
   flex: 0 1 auto;

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
-import { buildI18nForComponent } from '../../../i18n';
-import translationResources from './i18n/en.json';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../i18n";
+import translationResources from "./i18n/en.json";
 export class GuxPaginationCursor {
   constructor() {
     this.hasPrevious = false;
@@ -24,18 +24,18 @@ export class GuxPaginationCursor {
   }
   renderSimpleLayout() {
     return [
-      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot-beta", { accent: "ghost" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("gux-icon", { iconName: "chevron-small-left", "screenreader-text": this.i18n('previous') }))), h("gux-button-slot-beta", { accent: "ghost" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("gux-icon", { iconName: "chevron-small-right", "screenreader-text": this.i18n('next') }))))
+      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("gux-icon", { iconName: "chevron-small-left", "screenreader-text": this.i18n('previous') }))), h("gux-button-slot", { accent: "ghost" }, h("button", { class: "gux-simple-button", type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("gux-icon", { iconName: "chevron-small-right", "screenreader-text": this.i18n('next') }))))
     ];
   }
   renderAdvancedLayout() {
     return [
-      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot-beta", { accent: "ghost" }, h("button", { type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("div", { class: "gux-button-align-content" }, h("gux-icon", { decorative: true, iconName: "chevron-small-left" }), h("span", null, this.i18n('previous'))))), h("gux-button-slot-beta", { accent: "ghost" }, h("button", { type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("div", { class: "gux-button-align-content" }, h("span", null, this.i18n('next')), h("gux-icon", { decorative: true, iconName: "chevron-small-right" }))))),
+      h("div", { role: "navigation", class: "gux-pagination-button-container" }, h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", disabled: !this.hasPrevious, onClick: () => this.onButtonClick('previous') }, h("div", { class: "gux-button-align-content" }, h("gux-icon", { decorative: true, iconName: "chevron-small-left" }), h("span", null, this.i18n('previous'))))), h("gux-button-slot", { accent: "ghost" }, h("button", { type: "button", disabled: !this.hasNext, onClick: () => this.onButtonClick('next') }, h("div", { class: "gux-button-align-content" }, h("span", null, this.i18n('next')), h("gux-icon", { decorative: true, iconName: "chevron-small-right" }))))),
       this.renderItemsPerPage()
     ];
   }
   renderItemsPerPage() {
     return (this.itemsPerPage &&
-      (h("gux-pagination-items-per-page-beta", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) })));
+      (h("gux-pagination-items-per-page", { "items-per-page": this.itemsPerPage, onInternalitemsperpagechange: this.handleInternalitemsperpagechange.bind(this) })));
   }
   render() {
     return this.layout === 'advanced'
@@ -101,7 +101,8 @@ export class GuxPaginationCursor {
           "references": {
             "GuxItemsPerPage": {
               "location": "import",
-              "path": "../gux-pagination/gux-pagination.types"
+              "path": "../../legacy/gux-pagination-legacy/gux-pagination.types",
+              "id": "src/components/legacy/gux-pagination-legacy/gux-pagination.types.ts::GuxItemsPerPage"
             }
           }
         },
@@ -151,7 +152,8 @@ export class GuxPaginationCursor {
           "references": {
             "GuxPaginationCursorDetail": {
               "location": "import",
-              "path": "./gux-pagination-cursor.types"
+              "path": "./gux-pagination-cursor.types",
+              "id": "src/components/stable/gux-pagination-cursor/gux-pagination-cursor.types.ts::GuxPaginationCursorDetail"
             }
           }
         }

package/dist/collection/components/stable/gux-pagination-cursor/tests/gux-pagination-cursor.e2e.js

@@ -0,0 +1,66 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+async function clickButton(page, buttonToClick) {
+  await page.evaluate(button => {
+    const element = document.querySelector('gux-pagination-cursor');
+    const [previousButton, nextButton] = Array.from(element.shadowRoot.querySelectorAll('button'));
+    if (button === 'next') {
+      nextButton.click();
+    }
+    else {
+      previousButton.click();
+    }
+  }, buttonToClick);
+}
+describe('gux-pagination-cursor', () => {
+  describe('#render', () => {
+    [
+      '<gux-pagination-cursor lang="en"></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" has-next></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" has-previous has-next></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" has-previous></gux-pagination-cursor>',
+      '<gux-pagination-cursor lang="en" layout="advanced"></gux-pagination-cursor>'
+    ].forEach((html, index) => {
+      it(`should render as expected (${index + 1})`, async () => {
+        const page = await newSparkE2EPage({ html });
+        const element = await page.find('gux-pagination-cursor');
+        await a11yCheck(page);
+        expect(element.outerHTML).toMatchSnapshot();
+      });
+    });
+  });
+  describe('guxPaginationCursorchange', () => {
+    it('should fire guxPaginationCursorchange(previous) event when enabled previous button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en" has-previous></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'previous');
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).toHaveReceivedEventDetail('previous');
+    });
+    it('should fire guxPaginationCursorchange(next) event when enabled next button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en" has-next></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'next');
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).toHaveReceivedEventDetail('next');
+    });
+    it('should not fire guxPaginationCursorchange(previous) event when disabled previous button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en"></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'previous');
+      await page.waitForChanges();
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).not.toHaveReceivedEvent();
+    });
+    it('should not fire guxPaginationCursorchange(next) event when disabled next button is clicked', async () => {
+      const html = '<gux-pagination-cursor lang="en"></gux-pagination-cursor>';
+      const page = await newSparkE2EPage({ html });
+      const guxPaginationCursorchangeSpy = await page.spyOnEvent('guxPaginationCursorchange');
+      await clickButton(page, 'next');
+      await page.waitForChanges();
+      expect(guxPaginationCursorchangeSpy).not.toHaveReceivedEvent();
+    });
+  });
+});