@nypl/design-system-react-components 0.25.11 → 0.25.12

package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
     id="column"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -81,7 +81,7 @@ exports[`Checkbox renders the UI snapshot correctly 1`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -165,7 +165,7 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
     id="row"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -226,7 +226,7 @@ exports[`Checkbox renders the UI snapshot correctly 2`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -310,7 +310,7 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
     id="noLabel"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -371,7 +371,7 @@ exports[`Checkbox renders the UI snapshot correctly 3`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -455,7 +455,7 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
     id="helperText"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -516,7 +516,7 @@ exports[`Checkbox renders the UI snapshot correctly 4`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -616,7 +616,7 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
     id="invalidText"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -677,7 +677,7 @@ exports[`Checkbox renders the UI snapshot correctly 5`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -756,7 +756,7 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
     id="optReq"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -817,7 +817,7 @@ exports[`Checkbox renders the UI snapshot correctly 6`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -901,7 +901,7 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
     id="required"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -962,7 +962,7 @@ exports[`Checkbox renders the UI snapshot correctly 7`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       onClick={[Function]}
     >
       <input
@@ -1046,7 +1046,7 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
     id="invalid"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-invalid=""
       onClick={[Function]}
     >
@@ -1110,7 +1110,7 @@ exports[`Checkbox renders the UI snapshot correctly 8`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-invalid=""
       onClick={[Function]}
     >
@@ -1197,7 +1197,7 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
     id="disabled"
   >
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-disabled=""
       onClick={[Function]}
     >
@@ -1261,7 +1261,7 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
       </span>
     </label>
     <label
-      className="chakra-checkbox css-1uiwwan"
+      className="chakra-checkbox css-g8du1g"
       data-disabled=""
       onClick={[Function]}
     >

package/src/components/Fieldset/Fieldset.stories.mdx

@@ -39,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.3`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Fieldset} />
 

package/src/components/Icons/Icon.stories.mdx

@@ -89,7 +89,7 @@ export const rotationEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Icon} />
 

package/src/components/Icons/IconTypes.tsx

@@ -22,19 +22,21 @@ export enum IconColors {
   UiWhite = "ui.white",
   BrandPrimary = "brand.primary",
   BrandSecondary = "brand.secondary",
-  SectionWhatsOnPrimary = "section.whats-on.primary",
-  SectionWhatsOnSecondary = "section.whats-on.secondary",
+  SectionBlogsPrimary = "section.blogs.primary",
+  SectionBlogsSecondary = "section.blogs.secondary",
   SectionBooksAndMorePrimary = "section.books-and-more.primary",
   SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
-  SectionResearchPrimary = "section.research.primary",
-  SectionResearchSecondary = "section.research.secondary",
+  SectionEducationPrimary = "section.education.primary",
+  SectionEducationSecondary = "section.education.secondary",
   SectionLocationsPrimary = "section.locations.primary",
   SectionLocationsSecondary = "section.locations.secondary",
-  SectionBlogsPrimary = "section.blogs.primary",
-  SectionBlogsSecondary = "section.blogs.secondary",
+  SectionResearchPrimary = "section.research.primary",
+  SectionResearchSecondary = "section.research.secondary",
   SectionResearchLibraryLpa = "section.research-library.lpa",
   SectionResearchLibrarySchomburg = "section.research-library.schomburg",
   SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
+  SectionWhatsOnPrimary = "section.whats-on.primary",
+  SectionWhatsOnSecondary = "section.whats-on.secondary",
 }
 
 export enum IconSizes {

package/src/components/List/List.stories.mdx

@@ -51,7 +51,7 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.12`  |
 
 <Description of={List} />
 

package/src/components/Logo/Logo.stories.mdx

@@ -57,7 +57,7 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Logo} />
 

package/src/components/Logo/LogoSvgs.tsx

@@ -3,6 +3,8 @@ import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
 import logo_bpl_white from "../../../icons/svg/logo_bpl_white.svg";
 import logo_clever_color from "../../../icons/svg/logo_clever_color.svg";
 import logo_clever_white from "../../../icons/svg/logo_clever_white.svg";
+import logo_firstbook_color from "../../../icons/svg/logo_firstbook_color.svg";
+import logo_firstbook_color_negative from "../../../icons/svg/logo_firstbook_color_negative.svg";
 import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
 import logo_lpa_black from "../../../icons/svg/logo_lpa_black.svg";
 import logo_lpa_white from "../../../icons/svg/logo_lpa_white.svg";
@@ -12,6 +14,10 @@ import logo_nypl_full_black from "../../../icons/svg/logo_nypl_full_black.svg";
 import logo_nypl_full_white from "../../../icons/svg/logo_nypl_full_white.svg";
 import logo_nypl_lion_black from "../../../icons/svg/logo_nypl_lion_black.svg";
 import logo_nypl_lion_white from "../../../icons/svg/logo_nypl_lion_white.svg";
+import logo_openebooks_color from "../../../icons/svg/logo_openebooks_color.svg";
+import logo_openebooks_negative from "../../../icons/svg/logo_openebooks_negative.svg";
+import logo_openebooks_wtext_color from "../../../icons/svg/logo_openebooks_wtext_color.svg";
+import logo_openebooks_wtext_negative from "../../../icons/svg/logo_openebooks_wtext_negative.svg";
 import logo_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
 import logo_qpl_alt_white from "../../../icons/svg/logo_qpl_alt_white.svg";
 import logo_qpl_black from "../../../icons/svg/logo_qpl_black.svg";
@@ -36,6 +42,8 @@ export default {
   logo_bpl_white,
   logo_clever_color,
   logo_clever_white,
+  logo_firstbook_color,
+  logo_firstbook_color_negative,
   logo_lpa_black,
   logo_lpa_color,
   logo_lpa_white,
@@ -45,6 +53,10 @@ export default {
   logo_nypl_full_white,
   logo_nypl_lion_black,
   logo_nypl_lion_white,
+  logo_openebooks_color,
+  logo_openebooks_negative,
+  logo_openebooks_wtext_color,
+  logo_openebooks_wtext_negative,
   logo_qpl_alt_black,
   logo_qpl_alt_white,
   logo_qpl_black,

package/src/components/Logo/LogoTypes.tsx

@@ -18,6 +18,8 @@ export enum LogoNames {
   BrooklynPublicLibraryWhite = "logo_bpl_white",
   CleverColor = "logo_clever_color",
   CleverWhite = "logo_clever_white",
+  FirstBookColor = "logo_firstbook_color",
+  FirstBookColorNegative = "logo_firstbook_color_negative",
   LPAColor = "logo_lpa_color",
   LPABlack = "logo_lpa_black",
   LPAWhite = "logo_lpa_white",
@@ -27,6 +29,10 @@ export enum LogoNames {
   NYPLWhite = "logo_nypl_full_white",
   NYPLLionBlack = "logo_nypl_lion_black",
   NYPLLionWhite = "logo_nypl_lion_white",
+  OpenEBooksColor = "logo_openebooks_color",
+  OpenEBooksNegative = "logo_openebooks_negative",
+  OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
+  OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
   QueensPublicLibraryColor = "logo_qpl_color",
   QueensPublicLibraryBlack = "logo_qpl_black",
   QueensPublicLibraryWhite = "logo_qpl_white",

package/src/components/Notification/Notification.stories.mdx

@@ -59,7 +59,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Notification} />
 
@@ -118,6 +118,11 @@ be rendered inside other landmark elements such as the `header` and `footer`
 landmark elements. Adding a `Notification` component inside an HTML `main` landmark
 element is acceptable.
 
+Icons rendered in the `Notification` component are decorative by default which
+means that they are hidden to screen readers. Since the "X" close icon inside the
+dismissible button is decorative and because there is no discernible text inside
+the button, an `aria-label` attribute is added to the button.
+
 ## Variants
 
 ### With NotificationHeading

package/src/components/Notification/Notification.test.tsx

@@ -77,8 +77,12 @@ describe("Notification", () => {
   });
 
   it("renders with an Icon", () => {
-    // The Icon's role is "img".
-    expect(screen.queryByRole("img")).toBeInTheDocument();
+    // Since the icon has aria-hidden set to true, we can't get it
+    // by its "img" role.
+    const icon = utils.container.querySelector(
+      "#notificationID-notification-icon"
+    );
+    expect(icon).toBeInTheDocument();
   });
 
   it("does not render an Icon", () => {
@@ -90,8 +94,10 @@ describe("Notification", () => {
         showIcon={false}
       />
     );
-    // The Icon's role is "img".
-    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    const icon = utils.container.querySelector(
+      "#notificationID-notification-icon"
+    );
+    expect(icon).not.toBeInTheDocument();
   });
 
   it("renders a custom Icon component", () => {
@@ -111,7 +117,11 @@ describe("Notification", () => {
         notificationHeading="Notification Heading"
       />
     );
-    expect(utils.container.querySelector(".custom-icon")).toBeInTheDocument();
+
+    const customIcon = utils.container.querySelector(
+      "#notificationID-custom-notification-icon"
+    );
+    expect(customIcon).toBeInTheDocument();
   });
 
   it("renders the announcement Notification type", () => {
@@ -163,14 +173,15 @@ describe("Notification", () => {
         notificationType={NotificationTypes.Standard}
       />
     );
-    const icons = screen.queryAllByRole("img");
 
-    expect(icons).toHaveLength(2);
-    expect(screen.getByTitle("Notification standard icon")).toBeInTheDocument();
+    const dismissibleIcon = utils.container.querySelector(
+      "#notificationID-dismissible-notification-icon"
+    );
+    expect(dismissibleIcon).toBeInTheDocument();
     expect(screen.getByTitle("Notification close icon")).toBeInTheDocument();
   });
 
-  it.skip("renders the UI snapshot correctly", () => {
+  it("renders the UI snapshot correctly", () => {
     const standard = renderer
       .create(
         <Notification

package/src/components/Notification/Notification.tsx

@@ -124,7 +124,6 @@ export default function Notification(props: NotificationProps) {
   const iconElement = () => {
     const baseIconProps = {
       additionalStyles: styles.icon,
-      decorative: false,
       size: IconSizes.Large,
     };
     // If the icon should not display, return null.
@@ -164,13 +163,16 @@ export default function Notification(props: NotificationProps) {
   };
   const dismissibleButton = dismissible && (
     <Button
+      additionalStyles={styles.dismissibleButton}
+      attributes={{
+        "aria-label": "Close the notification",
+      }}
       buttonType={ButtonTypes.Link}
+      id={`${id}-notification-dismissible-button`}
       onClick={handleClose}
-      additionalStyles={styles.dismissibleButton}
     >
       <Icon
-        decorative={false}
-        id={`${id}-notification-dismissible-icon`}
+        id={`${id}-dismissible-notification-icon`}
         name={IconNames.Close}
         size={IconSizes.Large}
         title="Notification close icon"

package/src/components/Notification/__snapshots__/Notification.test.tsx.snap

@@ -13,12 +13,12 @@ exports[`Notification renders the UI snapshot correctly 1`] = `
       className="css-0"
     >
       <svg
-        aria-hidden={false}
+        aria-hidden={true}
         className="chakra-icon css-onkibi"
         focusable={false}
         id="notificationID1-notification-icon"
         role="img"
-        title="alert_notification_important icon"
+        title="Notification standard icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -77,12 +77,12 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
       className="css-0"
     >
       <svg
-        aria-hidden={false}
+        aria-hidden={true}
         className="chakra-icon css-onkibi"
         focusable={false}
         id="notificationID2-notification-icon"
         role="img"
-        title="speaker_notes icon"
+        title="Notification announcement icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -141,12 +141,12 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
       className="css-0"
     >
       <svg
-        aria-hidden={false}
+        aria-hidden={true}
         className="chakra-icon css-onkibi"
         focusable={false}
         id="notificationID3-notification-icon"
         role="img"
-        title="error_filled icon"
+        title="Notification warning icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -205,12 +205,12 @@ exports[`Notification renders the UI snapshot correctly 4`] = `
       className="css-0"
     >
       <svg
-        aria-hidden={false}
+        aria-hidden={true}
         className="chakra-icon css-onkibi"
         focusable={false}
         id="notificationID4-notification-icon"
         role="img"
-        title="alert_notification_important icon"
+        title="Notification standard icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -299,3 +299,98 @@ exports[`Notification renders the UI snapshot correctly 6`] = `
   </div>
 </aside>
 `;
+
+exports[`Notification renders the UI snapshot correctly 7`] = `
+<aside
+  className="css-0"
+  data-type="standard"
+  id="notificationID7"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="notificationID7-notification-icon"
+        role="img"
+        title="Notification standard icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+      <div
+        className="css-0"
+      >
+        Notification content.
+      </div>
+    </div>
+  </div>
+  <button
+    aria-label="Close the notification"
+    className="chakra-button css-0"
+    data-testid="button"
+    id="notificationID7-notification-dismissible-button"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      aria-hidden={true}
+      className="chakra-icon css-onkibi"
+      focusable={false}
+      id="notificationID7-dismissible-notification-icon"
+      role="img"
+      title="Notification close icon"
+      viewBox="0 0 24 24"
+    >
+      <g
+        stroke="currentColor"
+        strokeWidth="1.5"
+      >
+        <path
+          d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+          fill="none"
+          strokeLinecap="round"
+        />
+        <path
+          d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+          fill="currentColor"
+          strokeLinecap="round"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="11.25"
+          strokeMiterlimit="10"
+        />
+      </g>
+    </svg>
+  </button>
+</aside>
+`;

package/src/components/Pagination/Pagination.stories.mdx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   ArgsTable,
   Canvas,
@@ -8,9 +9,13 @@ import {
 import { withDesign } from "storybook-addon-designs";
 import { withQuery } from "@storybook/addon-queryparams";
 
+import Button from "../Button/Button";
+import DSProvider from "../../theme/provider";
 import Pagination from "./Pagination";
-import * as stories from "./Pagination.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
+import { getStorybookHrefProps } from "../../utils/utils";
+
+export const hrefProps = getStorybookHrefProps(10);
 
 <Meta
   title={getCategory("Pagination")}
@@ -25,6 +30,7 @@ import { getCategory } from "../../utils/componentCategories";
   }}
   argTypes={{
     className: { control: false },
+    currentPage: { control: false },
     getPageHref: { control: false },
     id: { control: false },
     initialPage: { table: { defaultValue: { summary: 1 } } },
@@ -37,7 +43,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Pagination} />
 
@@ -73,14 +79,13 @@ const getPageHref = (selectedPage: number) => {
     name="Pagination with URL Updates"
     args={{
       className: undefined,
-      getPageHref: undefined,
+      getPageHref: hrefProps.getPageHref,
       id: "pagination-id",
-      initialPage: 1,
-      onPageChange: undefined,
+      initialPage: hrefProps.computedCurrentPage || 1,
       pageCount: 10,
     }}
   >
-    {(args) => stories.PaginationGetPageHref(args)}
+    {(args) => <Pagination {...args} />}
   </Story>
 </Canvas>
 
@@ -93,14 +98,14 @@ function passed as a prop and that the URL is updated whenever a page is
 changed. However, the optional `onPageChange` prop is available in case URL
 updating is not desired.
 
-In the following example, the `onPageChange` function gets the current page as
+In the following example, the `onPageChange` function gets the selected page as
 its only function argument. This is computed internally in the `Pagination`
 component through its own state.
 
 ```tsx
 // Example in a search results page.
-const onPageChange = (currentPage: number) => {
-  console.log(`Current page: ${currentPage}`);
+const onPageChange = (selectedPage: number) => {
+  console.log(`Current page: ${selectedPage}`);
   // Do what you need to with the `currentPage` value.
 };
 ```
@@ -110,13 +115,50 @@ const onPageChange = (currentPage: number) => {
     name="Pagination with Unchanging URL"
     args={{
       className: undefined,
-      getPageHref: undefined,
       id: "pagination-id-2",
       initialPage: 7,
-      onPageChange: undefined,
+      onPageChange: (selectedPage) => {
+        console.log(`Current page: ${selectedPage}`);
+      },
       pageCount: 100,
     }}
   >
-    {(args) => stories.PaginationOnPageChange(args)}
+    {(args) => <Pagination {...args} />}
   </Story>
 </Canvas>
+
+### Forcing a Page Change Programmatically
+
+There may be circumstances when you want to programmatically force the page
+number to change without the user explicitly requesting it (for example, if
+you want a user to be brought back to page 1 after entering a new search term).
+You can use the `currentPage` prop to do this. Note, the `currentPage` prop can
+only be used with the client-side, unchanging URL version of the `Pagination`
+component, and in combination with the `onPageChange` function.
+
+The following example shows that the user can be brought to page 1 without clicking
+on the `Pagination` component.
+
+export function CurrentPagePaginationExample() {
+  const [page, setPage] = useState(1);
+  const handleClick = () => setPage(1);
+  const handleSelection = (selectedPage) => setPage(selectedPage);
+  return (
+    <>
+      <Pagination
+        pageCount={10}
+        currentPage={page}
+        onPageChange={(selectedPage) => handleSelection(selectedPage)}
+      />
+      <Button type="button" buttonType="primary" onClick={handleClick}>
+        Go to Page 1
+      </Button>
+    </>
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <CurrentPagePaginationExample />
+  </DSProvider>
+</Canvas>