@openedx/paragon 22.15.0 → 22.15.1

package/dist/DataTable/TablePagination.js

@@ -1,7 +1,10 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
+import messages from './messages';
 function TablePagination() {
+  const intl = useIntl();
   const {
     pageCount,
     state,
@@ -16,6 +19,7 @@ function TablePagination() {
     currentPage: pageIndex + 1,
     onPageSelect: pageNum => gotoPage(pageNum - 1),
     pageCount: pageCount,
+    paginationLabel: intl.formatMessage(messages.paginationLabel),
     icons: {
       leftIcon: null,
       rightIcon: null

package/dist/DataTable/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","names":["React","useContext","DataTableContext","Pagination","TablePagination","pageCount","state","gotoPage","pageIndex","createElement","variant","currentPage","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePagination.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\n\nfunction TablePagination() {\n  const {\n    pageCount, state, gotoPage,\n  } = useContext(DataTableContext);\n\n  if (!pageCount || pageCount < 2) {\n    return null;\n  }\n\n  const pageIndex = state?.pageIndex;\n\n  return (\n    <Pagination\n      variant=\"reduced\"\n      currentPage={pageIndex + 1}\n      onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n      pageCount={pageCount}\n      icons={{\n        leftIcon: null,\n        rightIcon: null,\n      }}\n    />\n  );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AAEtC,SAASC,eAAeA,CAAA,EAAG;EACzB,MAAM;IACJC,SAAS;IAAEC,KAAK;IAAEC;EACpB,CAAC,GAAGN,UAAU,CAACC,gBAAgB,CAAC;EAEhC,IAAI,CAACG,SAAS,IAAIA,SAAS,GAAG,CAAC,EAAE;IAC/B,OAAO,IAAI;EACb;EAEA,MAAMG,SAAS,GAAGF,KAAK,EAAEE,SAAS;EAElC,oBACER,KAAA,CAAAS,aAAA,CAACN,UAAU;IACTO,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BI,YAAY,EAAGC,OAAO,IAAKN,QAAQ,CAACM,OAAO,GAAG,CAAC,CAAE;IACjDR,SAAS,EAAEA,SAAU;IACrBS,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,SAAS,EAAE;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAeZ,eAAe","ignoreList":[]}
+{"version":3,"file":"TablePagination.js","names":["React","useContext","useIntl","DataTableContext","Pagination","messages","TablePagination","intl","pageCount","state","gotoPage","pageIndex","createElement","variant","currentPage","onPageSelect","pageNum","paginationLabel","formatMessage","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePagination.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport messages from './messages';\n\nfunction TablePagination() {\n  const intl = useIntl();\n\n  const {\n    pageCount, state, gotoPage,\n  } = useContext(DataTableContext);\n\n  if (!pageCount || pageCount < 2) {\n    return null;\n  }\n\n  const pageIndex = state?.pageIndex;\n\n  return (\n    <Pagination\n      variant=\"reduced\"\n      currentPage={pageIndex + 1}\n      onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n      pageCount={pageCount}\n      paginationLabel={intl.formatMessage(messages.paginationLabel)}\n      icons={{\n        leftIcon: null,\n        rightIcon: null,\n      }}\n    />\n  );\n}\n\nexport default TablePagination;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,eAAeA,CAAA,EAAG;EACzB,MAAMC,IAAI,GAAGL,OAAO,CAAC,CAAC;EAEtB,MAAM;IACJM,SAAS;IAAEC,KAAK;IAAEC;EACpB,CAAC,GAAGT,UAAU,CAACE,gBAAgB,CAAC;EAEhC,IAAI,CAACK,SAAS,IAAIA,SAAS,GAAG,CAAC,EAAE;IAC/B,OAAO,IAAI;EACb;EAEA,MAAMG,SAAS,GAAGF,KAAK,EAAEE,SAAS;EAElC,oBACEX,KAAA,CAAAY,aAAA,CAACR,UAAU;IACTS,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BI,YAAY,EAAGC,OAAO,IAAKN,QAAQ,CAACM,OAAO,GAAG,CAAC,CAAE;IACjDR,SAAS,EAAEA,SAAU;IACrBS,eAAe,EAAEV,IAAI,CAACW,aAAa,CAACb,QAAQ,CAACY,eAAe,CAAE;IAC9DE,KAAK,EAAE;MACLC,QAAQ,EAAE,IAAI;MACdC,SAAS,EAAE;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAef,eAAe","ignoreList":[]}

package/dist/DataTable/TablePaginationMinimal.js

@@ -1,8 +1,11 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
 import { ArrowBackIos, ArrowForwardIos } from '../../icons';
+import messages from './messages';
 function TablePaginationMinimal() {
+  const intl = useIntl();
   const {
     nextPage,
     pageCount,
@@ -19,7 +22,7 @@ function TablePaginationMinimal() {
     variant: "minimal",
     currentPage: pageIndex + 1,
     pageCount: pageCount,
-    paginationLabel: "table pagination",
+    paginationLabel: intl.formatMessage(messages.paginationLabel),
     onPageSelect: pageNum => gotoPage(pageNum - 1),
     icons: {
       leftIcon: ArrowBackIos,

package/dist/DataTable/TablePaginationMinimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePaginationMinimal.js","names":["React","useContext","DataTableContext","Pagination","ArrowBackIos","ArrowForwardIos","TablePaginationMinimal","nextPage","pageCount","gotoPage","state","pageIndex","createElement","variant","currentPage","paginationLabel","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePaginationMinimal.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport { ArrowBackIos, ArrowForwardIos } from '../../icons';\n\nfunction TablePaginationMinimal() {\n  const {\n    nextPage, pageCount, gotoPage, state,\n  } = useContext(DataTableContext);\n\n  // Use nextPage as a proxy for whether or not the table is paginated\n  if (!nextPage) {\n    return null;\n  }\n\n  const pageIndex = state?.pageIndex;\n\n  return (\n    <Pagination\n      variant=\"minimal\"\n      currentPage={pageIndex + 1}\n      pageCount={pageCount}\n      paginationLabel=\"table pagination\"\n      onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n      icons={{\n        leftIcon: ArrowBackIos,\n        rightIcon: ArrowForwardIos,\n      }}\n    />\n  );\n}\n\nexport default TablePaginationMinimal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,YAAY,EAAEC,eAAe,QAAQ,aAAa;AAE3D,SAASC,sBAAsBA,CAAA,EAAG;EAChC,MAAM;IACJC,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;IAAEC;EACjC,CAAC,GAAGT,UAAU,CAACC,gBAAgB,CAAC;;EAEhC;EACA,IAAI,CAACK,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,MAAMI,SAAS,GAAGD,KAAK,EAAEC,SAAS;EAElC,oBACEX,KAAA,CAAAY,aAAA,CAACT,UAAU;IACTU,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BH,SAAS,EAAEA,SAAU;IACrBO,eAAe,EAAC,kBAAkB;IAClCC,YAAY,EAAGC,OAAO,IAAKR,QAAQ,CAACQ,OAAO,GAAG,CAAC,CAAE;IACjDC,KAAK,EAAE;MACLC,QAAQ,EAAEf,YAAY;MACtBgB,SAAS,EAAEf;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAeC,sBAAsB","ignoreList":[]}
+{"version":3,"file":"TablePaginationMinimal.js","names":["React","useContext","useIntl","DataTableContext","Pagination","ArrowBackIos","ArrowForwardIos","messages","TablePaginationMinimal","intl","nextPage","pageCount","gotoPage","state","pageIndex","createElement","variant","currentPage","paginationLabel","formatMessage","onPageSelect","pageNum","icons","leftIcon","rightIcon"],"sources":["../../src/DataTable/TablePaginationMinimal.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useIntl } from 'react-intl';\nimport DataTableContext from './DataTableContext';\nimport Pagination from '../Pagination';\nimport { ArrowBackIos, ArrowForwardIos } from '../../icons';\nimport messages from './messages';\n\nfunction TablePaginationMinimal() {\n  const intl = useIntl();\n\n  const {\n    nextPage, pageCount, gotoPage, state,\n  } = useContext(DataTableContext);\n\n  // Use nextPage as a proxy for whether or not the table is paginated\n  if (!nextPage) {\n    return null;\n  }\n\n  const pageIndex = state?.pageIndex;\n\n  return (\n    <Pagination\n      variant=\"minimal\"\n      currentPage={pageIndex + 1}\n      pageCount={pageCount}\n      paginationLabel={intl.formatMessage(messages.paginationLabel)}\n      onPageSelect={(pageNum) => gotoPage(pageNum - 1)}\n      icons={{\n        leftIcon: ArrowBackIos,\n        rightIcon: ArrowForwardIos,\n      }}\n    />\n  );\n}\n\nexport default TablePaginationMinimal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,OAAO,QAAQ,YAAY;AACpC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,UAAU,MAAM,eAAe;AACtC,SAASC,YAAY,EAAEC,eAAe,QAAQ,aAAa;AAC3D,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,sBAAsBA,CAAA,EAAG;EAChC,MAAMC,IAAI,GAAGP,OAAO,CAAC,CAAC;EAEtB,MAAM;IACJQ,QAAQ;IAAEC,SAAS;IAAEC,QAAQ;IAAEC;EACjC,CAAC,GAAGZ,UAAU,CAACE,gBAAgB,CAAC;;EAEhC;EACA,IAAI,CAACO,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,MAAMI,SAAS,GAAGD,KAAK,EAAEC,SAAS;EAElC,oBACEd,KAAA,CAAAe,aAAA,CAACX,UAAU;IACTY,OAAO,EAAC,SAAS;IACjBC,WAAW,EAAEH,SAAS,GAAG,CAAE;IAC3BH,SAAS,EAAEA,SAAU;IACrBO,eAAe,EAAET,IAAI,CAACU,aAAa,CAACZ,QAAQ,CAACW,eAAe,CAAE;IAC9DE,YAAY,EAAGC,OAAO,IAAKT,QAAQ,CAACS,OAAO,GAAG,CAAC,CAAE;IACjDC,KAAK,EAAE;MACLC,QAAQ,EAAElB,YAAY;MACtBmB,SAAS,EAAElB;IACb;EAAE,CACH,CAAC;AAEN;AAEA,eAAeE,sBAAsB","ignoreList":[]}

package/dist/DataTable/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  paginationLabel: {
+    id: 'pgn.DataTable.paginationLabel',
+    defaultMessage: 'table pagination',
+    description: 'Accessibile name for the navigation element of a pagination component',
+  },
+});
+
+export default messages;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.15.0",
+  "version": "22.15.1",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/DataTable/TablePagination.jsx

@@ -1,8 +1,12 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
+import messages from './messages';
 
 function TablePagination() {
+  const intl = useIntl();
+
   const {
     pageCount, state, gotoPage,
   } = useContext(DataTableContext);
@@ -19,6 +23,7 @@ function TablePagination() {
       currentPage={pageIndex + 1}
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       pageCount={pageCount}
+      paginationLabel={intl.formatMessage(messages.paginationLabel)}
       icons={{
         leftIcon: null,
         rightIcon: null,

package/src/DataTable/TablePaginationMinimal.jsx

@@ -1,9 +1,13 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
 import { ArrowBackIos, ArrowForwardIos } from '../../icons';
+import messages from './messages';
 
 function TablePaginationMinimal() {
+  const intl = useIntl();
+
   const {
     nextPage, pageCount, gotoPage, state,
   } = useContext(DataTableContext);
@@ -20,7 +24,7 @@ function TablePaginationMinimal() {
       variant="minimal"
       currentPage={pageIndex + 1}
       pageCount={pageCount}
-      paginationLabel="table pagination"
+      paginationLabel={intl.formatMessage(messages.paginationLabel)}
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       icons={{
         leftIcon: ArrowBackIos,

package/src/DataTable/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  paginationLabel: {
+    id: 'pgn.DataTable.paginationLabel',
+    defaultMessage: 'table pagination',
+    description: 'Accessibile name for the navigation element of a pagination component',
+  },
+});
+
+export default messages;

package/src/DataTable/tests/TableFooter.test.jsx

@@ -32,7 +32,11 @@ describe('<TableFooter />', () => {
   it('Renders the default footer', () => {
     render(<TableFooterWrapper />);
     expect(screen.getByTestId('row-status')).toBeInTheDocument();
-    expect(screen.getByLabelText('table pagination')).toBeInTheDocument();
+
+    // The TableFooter contains two components that have the aria-label
+    // "table pagination" - DataTable and DataTableMinimal.
+    const tables = screen.getAllByLabelText('table pagination');
+    tables.forEach(table => expect(table).toBeInTheDocument());
   });
 
   it('accepts a class name', () => {

package/src/DataTable/tests/TablePagination.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, act, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 
 import TablePagination from '../TablePagination';
@@ -14,9 +15,11 @@ const instance = {
 // eslint-disable-next-line react/prop-types
 function PaginationWrapper({ value }) {
   return (
-    <DataTableContext.Provider value={value}>
-      <TablePagination />
-    </DataTableContext.Provider>
+    <IntlProvider>
+      <DataTableContext.Provider value={value}>
+        <TablePagination />
+      </DataTableContext.Provider>
+    </IntlProvider>
   );
 }