va-pagination: add resize listener to adapt to mobile devices and zoomed layouts

packages/storybook/stories/va-pagination-uswds.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect }  from 'react';
+import React, { useState, useEffect } from 'react';
 import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
 import { VaPagination } from '@department-of-veterans-affairs/web-components/react-bindings';
 
@@ -11,22 +11,22 @@ export default {
     componentSubtitle: 'va-pagination web component',
     docs: {
       page: () => <StoryDocs storyDefault={Default} data={paginationDocs} />,
-    }
-  }
-}
+    },
+  },
+};
 
 const defaultArgs = {
-  page: 1,
-  pages: 24,
-  'max-page-list-length': 7,
-  unbounded: false
-}
+  'page': 1,
+  'pages': 24,
+  'max-page-list-length': 10,
+  'unbounded': false,
+};
 
 const Template = ({
   'page': currentPage,
   pages,
   'max-page-list-length': maxPageListLength,
-  unbounded
+  unbounded,
 }) => {
   const [page, setPage] = useState(currentPage);
   const handlePageSelect = event => {
@@ -41,7 +41,7 @@ const Template = ({
       onPageSelect={handlePageSelect}
     />
   );
-}
+};
 
 export const Default = Template.bind(null);
 Default.args = {
@@ -51,38 +51,48 @@ Default.argTypes = propStructure(paginationDocs);
 
 export const WithMiddle = Template.bind(null);
 WithMiddle.args = {
-  ...defaultArgs, page: 10
-}
+  ...defaultArgs,
+  page: 10,
+};
 
 export const WithLast = Template.bind(null);
 WithLast.args = {
-  ...defaultArgs, page: 24
-}
+  ...defaultArgs,
+  page: 24,
+};
 
 export const WithUnboundedFirst = Template.bind(null);
 WithUnboundedFirst.args = {
-  ...defaultArgs, unbounded: true
-}
+  ...defaultArgs,
+  unbounded: true,
+};
 
 export const WithUnboundedMiddle = Template.bind(null);
 WithUnboundedMiddle.args = {
-  ...defaultArgs, unbounded: true, page: 10
-}
+  ...defaultArgs,
+  unbounded: true,
+  page: 10,
+};
 
-export const WithSevenOrLess = Template.bind(null);
-WithSevenOrLess.args = {
-  ...defaultArgs, pages: 7
-}
+export const WithSixOrLess = Template.bind(null);
+WithSixOrLess.args = {
+  ...defaultArgs,
+  pages: 6,
+};
 
-export const WithSevenOrLessMiddle = Template.bind(null);
-WithSevenOrLessMiddle.args = {
-  ...defaultArgs, pages: 7, page: 3
-}
+export const WithSixOrLessMiddle = Template.bind(null);
+WithSixOrLessMiddle.args = {
+  ...defaultArgs,
+  pages: 6,
+  page: 3,
+};
 
-export const WithSevenOrLessLast = Template.bind(null);
-WithSevenOrLessLast.args = {
-  ...defaultArgs, pages: 7, page: 7
-}
+export const WithSixOrLessLast = Template.bind(null);
+WithSixOrLessLast.args = {
+  ...defaultArgs,
+  pages: 6,
+  page: 6,
+};
 
 export const Internationalization = () => {
   const [lang, setLang] = useState('en');
@@ -95,13 +105,25 @@ export const Internationalization = () => {
 
   return (
     <div>
-      <va-button onClick={() => setLang('es')} text="Español"/>
-      <va-button onClick={() => setLang('en')} text="English"/>
+      <va-button onClick={() => setLang('es')} text="Español" />
+      <va-button onClick={() => setLang('en')} text="English" />
       <div style={{ marginTop: '20px' }}>
         <h4>Default</h4>
-        <VaPagination page={page1} pages={24} maxPageListLength={7} onPageSelect={(event) => setPage1(event.detail.page) }/>
+        <VaPagination
+          page={page1}
+          pages={24}
+          maxPageListLength={10}
+          onPageSelect={event => setPage1(event.detail.page)}
+        />
         <h4>Unbounded</h4>
-        <VaPagination page={page2} pages={24} maxPageListLength={7} unbounded onPageSelect={(event) => setPage2(event.detail.page)}/>
+        <VaPagination
+          page={page2}
+          pages={24}
+          maxPageListLength={10}
+          unbounded
+          onPageSelect={event => setPage2(event.detail.page)}
+        />
       </div>
     </div>
-)};
+  );
+};

packages/web-components/src/components/va-pagination/test/va-pagination.e2e.ts

@@ -143,4 +143,61 @@ describe('va-pagination', () => {
     // should be 8, 6 as set by the max-page-list-length, and 2 prev/next buttons
     expect(paginationItems).toHaveLength(8);
   });
+
+  it('renders the correct number of links on small screens', async () => {
+    const page = await newE2EPage();
+    await page.setViewport({
+      // iPhone X
+      width: 375,
+      height: 812,
+      deviceScaleFactor: 1,
+    });
+    await page.setContent(`<va-pagination page="1" pages="24" />`);
+    const paginationItems = await page.findAll(
+      'va-pagination >>> li.usa-pagination__item',
+    );
+    expect(paginationItems).toHaveLength(6);
+  });
+
+  it('renders one ellipse correctly on small screens', async () => {
+    const page = await newE2EPage();
+    await page.setViewport({
+      // iPhone X
+      width: 375,
+      height: 812,
+      deviceScaleFactor: 1,
+    });
+    await page.setContent(`<va-pagination page="2" pages="24" unbounded/>`);
+    const paginationOverflowItems = await page.findAll(
+      'va-pagination >>> li.usa-pagination__overflow',
+    );
+    expect(paginationOverflowItems).toHaveLength(1);
+  });
+
+  it('renders two ellipses correctly on small screens', async () => {
+    const page = await newE2EPage();
+    await page.setViewport({
+      // iPhone X
+      width: 375,
+      height: 812,
+      deviceScaleFactor: 1,
+    });
+    await page.setContent(`<va-pagination page="9" pages="24" />`);
+    const paginationOverflowItems = await page.findAll(
+      'va-pagination >>> li.usa-pagination__overflow',
+    );
+    expect(paginationOverflowItems).toHaveLength(2);
+  });
+
+  it('passes an axe check on small screens', async () => {
+    const page = await newE2EPage();
+    await page.setViewport({
+      // iPhone X
+      width: 375,
+      height: 812,
+      deviceScaleFactor: 1,
+    });
+    await page.setContent(`<va-pagination page="1" pages="24" />`);
+    await axeCheck(page);
+  });
 });

packages/web-components/src/components/va-pagination/va-pagination.scss

@@ -20,6 +20,7 @@
 :host {
   background-color: var(--vads-color-white);
   border-top: 1px solid var(--vads-color-base-lightest);
+  container-type: inline-size;
   display: flex;
   font-family: var(--font-source-sans);
   justify-content: center;
@@ -55,3 +56,9 @@ button {
   transition: all 0.3s ease-in-out;
   transition-property: color, background-color;
 }
+
+@container (max-width: 640px) { // Variables won't compile. Matching TSX file for now.
+  .usa-pagination__overflow {
+    margin: 0;
+  }
+}