fix(pagination): use styled anchors instead of Button Pill

package.json

@@ -109,9 +109,9 @@
     "@chbphone55/classnames": "2.0.0",
     "@lingui/core": "4.7.0",
     "@warp-ds/core": "1.0.2",
-    "@warp-ds/css": "1.8.0",
+    "@warp-ds/css": "1.8.2-next.2",
     "@warp-ds/icons": "2.0.0",
-    "@warp-ds/uno": "1.8.0",
+    "@warp-ds/uno": "1.8.1",
     "react-focus-lock": "2.9.7",
     "resize-observer-polyfill": "1.5.1",
     "scroll-doctor": "2.0.2"

packages/pagination/src/CurrentPage.tsx

@@ -15,7 +15,7 @@ const CurrentPage = React.forwardRef<HTMLDivElement, CurrentPageProps>(
   ({ children, className, ...props }, ref) => {
     const { currentPage } = usePagination();
 
-    if (currentPage <= 1) {
+    if (currentPage < 1) {
       return null;
     }
 

packages/pagination/src/FirstPage.tsx

@@ -1,9 +1,9 @@
-import { Button } from '../../button/src/index.js';
+import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
 import IconChevronDoubleLeft16 from '@warp-ds/icons/react/chevron-double-left-16';
-import React from 'react';
+import React, { Ref } from 'react';
 
 type FirstPageProps = {
   /**
@@ -38,20 +38,30 @@ const FirstPage = React.forwardRef<
     id: 'pagination.aria.first-page',
     message: 'First page',
     comment:
-      'Default screenreader message for first page button in the pagination component',
+      'Default screenreader message for first page link in the pagination component',
   });
 
+  const iconSuffix =
+    i18n._({
+      id: 'pagination.aria.icon-suffix',
+      message: 'icon',
+      comment:
+        'Suffix added at the end of icon titles when img semantics are lost on an html element',
+    });
+
   return (
-    <Button
-      pill
-      ref={ref}
+    <a
+      ref={ref as Ref<HTMLAnchorElement>}
       {...props}
-      aria-label={ariaLabel}
-      className={className}
+      className={classNames(className, ccPagination.link, ccPagination.icon)}
       rel="start"
     >
-      <IconChevronDoubleLeft16 className={ccPagination.icon} />
-    </Button>
+      <span className={ccPagination.a11y}>
+        {ariaLabel},
+      </span>
+      <IconChevronDoubleLeft16 />
+      <span className={ccPagination.a11y}>{iconSuffix}</span>
+    </a>
   );
 });
 

packages/pagination/src/NextPage.tsx

@@ -1,22 +1,16 @@
-import { Button } from '../../button/src/index.js';
-import { classNames } from "@chbphone55/classnames";
+import { classNames } from '@chbphone55/classnames';
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
 import IconChevronRight16 from '@warp-ds/icons/react/chevron-right-16';
-import React from 'react';
+import React, { Ref } from 'react';
 
 type NextPageProps = {
   /**
    * @default Next page
    */
   'aria-label'?: string;
 
-  /**
-   * Butto label to render on mobile
-   */
-  children?: React.ReactNode;
-
   /** Additional CSS class for the element. */
   className?: string;
 
@@ -33,7 +27,7 @@ type NextPageProps = {
 const NextPage = React.forwardRef<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   NextPageProps
->(({ children, className, ...props }, ref) => {
+>(({ className, ...props }, ref) => {
   const { currentPage, lastPage } = usePagination();
 
   if (currentPage >= lastPage) {
@@ -44,41 +38,31 @@ const NextPage = React.forwardRef<
     id: 'pagination.aria.next-page',
     message: 'Next page',
     comment:
-      'Default screenreader message for next page button in the pagination component',
+      'Default screenreader message for next page link in the pagination component',
   });
 
-  const label =
-    children ??
+  const iconSuffix =
     i18n._({
-      id: 'pagination.button.next-page',
-      message: 'Next page',
+      id: 'pagination.aria.icon-suffix',
+      message: 'icon',
       comment:
-        'Default message for next page button in the pagination component',
+        'Suffix added at the end of icon titles when img semantics are lost on an html element',
     });
 
   return (
     <>
-      {currentPage <= 1 && (
-        <Button
-          link
-          {...props}
-          ref={ref}
-          rel="next nofollow"
-          className={classNames(ccPagination.firstPageButton, className)}
-        >
-          <span className={ccPagination.firstPageLabel}>{label}</span>
-        </Button>
-      )}
-      <Button
-        pill
-        aria-label={ariaLabel}
+      <a
         {...props}
-        ref={ref}
+        ref={ref as Ref<HTMLAnchorElement>}
         rel="next nofollow"
-        className={classNames(ccPagination.nextPage, className)}
+        className={classNames(className, ccPagination.link, ccPagination.icon)}
       >
-        <IconChevronRight16 className={ccPagination.icon} />
-      </Button>
+        <span className={ccPagination.a11y}>
+          {ariaLabel},
+        </span>
+        <IconChevronRight16 />
+        <span className={ccPagination.a11y}>{iconSuffix}</span>
+      </a>
     </>
   );
 });

packages/pagination/src/Page.tsx

@@ -1,8 +1,7 @@
-import { Button } from '../../button/src/index.js';
 import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
-import React from 'react';
+import React, { Ref } from 'react';
 
 export type PageProps = {
   /**
@@ -40,25 +39,22 @@ const Page = React.forwardRef<
   const ariaLabel = props['aria-label'] ?? i18n._({
     id: 'pagination.aria.page',
     message: 'Page {currentPage}',
-    values: { currentPage },
+    values: { currentPage: page },
     comment:
-      'Default screenreader message for page button in the pagination component',
+      'Default screenreader message for page link in the pagination component',
   });
 
   return (
-    <Button
-      pill
+    <a
       aria-label={ariaLabel}
       {...props}
-      ref={ref}
+      ref={ref as Ref<HTMLAnchorElement>}
       rel="nofollow"
       aria-current={isCurrentPage ? 'page' : undefined}
-      className={classNames(className, ccPagination.defaultPage, {
-        [ccPagination.active]: isCurrentPage,
-      })}
+      className={classNames(className, ccPagination.link, [isCurrentPage ? ccPagination.active : ccPagination.notActive])}
     >
       {page}
-    </Button>
+    </a>
   );
 });
 

packages/pagination/src/PaginationContainer.tsx

@@ -83,7 +83,7 @@ const PaginationContainer = React.forwardRef<
         aria-labelledby={ariaLabelledBy}
         ref={ref}
       >
-        <h1 className={ccPagination.heading} id={ariaLabelledBy}>
+        <h1 className={ccPagination.a11y} id={ariaLabelledBy}>
           {ariaLabel}
         </h1>
         <PaginationContext.Provider value={context}>

packages/pagination/src/PrevPage.tsx

@@ -1,9 +1,9 @@
-import { Button } from '../../button/src/index.js';
+import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
 import IconChevronLeft16 from '@warp-ds/icons/react/chevron-left-16';
-import React from 'react';
+import React, { Ref } from 'react';
 
 type PrevPageProps = {
   /**
@@ -34,24 +34,36 @@ const PrevPage = React.forwardRef<
     return null;
   }
 
-  const ariaLabel = i18n._({
-    id: 'pagination.aria.prev-page',
-    message: 'Previous page',
-    comment:
-      'Default screenreader message for previous page button in the pagination component',
-  });
+  const ariaLabel = 
+    props['aria-label'] ??
+    i18n._({
+      id: 'pagination.aria.prev-page',
+      message: 'Previous page',
+      comment:
+        'Default screenreader message for previous page link in the pagination component',
+    });
+
+  const iconSuffix =
+    i18n._({
+      id: 'pagination.aria.icon-suffix',
+      message: 'icon',
+      comment:
+        'Suffix added at the end of icon titles when img semantics are lost on an html element',
+    });
 
   return (
-    <Button
-      pill
-      aria-label={ariaLabel}
+    <a
       {...props}
-      ref={ref}
-      className={className}
+      ref={ref as Ref<HTMLAnchorElement>}
+      className={classNames(className, ccPagination.link, ccPagination.icon)}
       rel="prev nofollow"
     >
-      <IconChevronLeft16 className={ccPagination.icon} />
-    </Button>
+      <span className={ccPagination.a11y}>
+        {ariaLabel},
+      </span>
+      <IconChevronLeft16 />
+      <span className={ccPagination.a11y}>{iconSuffix}</span>
+    </a>
   );
 });
 

packages/pagination/src/locales/en/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"First page\",\"pagination.aria.next-page\":\"Next page\",\"pagination.button.next-page\":\"Next page\",\"pagination.label.current-page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Pages\",\"pagination.aria.prev-page\":\"Previous page\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"First page\",\"pagination.aria.icon-suffix\":\"icon\",\"pagination.aria.next-page\":\"Next page\",\"pagination.label.current-page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Pages\",\"pagination.aria.prev-page\":\"Previous page\"}");

packages/pagination/src/locales/en/messages.po

@@ -14,45 +14,48 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Crowdin-SourceKey: msgstr\n"
 
-#. Default screenreader message for first page button in the pagination component
+#. Default screenreader message for first page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/FirstPage.tsx:36
+#: packages/pagination/src/FirstPage.tsx:37
 msgid "pagination.aria.first-page"
 msgstr "First page"
 
-#. Default screenreader message for next page button in the pagination component
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:42
-msgid "pagination.aria.next-page"
-msgstr "Next page"
+#: packages/pagination/src/FirstPage.tsx:45
+#: packages/pagination/src/NextPage.tsx:45
+#: packages/pagination/src/PrevPage.tsx:47
+msgid "pagination.aria.icon-suffix"
+msgstr "icon"
 
-#. Default message for next page button in the pagination component
+#. Default screenreader message for next page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:51
-msgid "pagination.button.next-page"
+#: packages/pagination/src/NextPage.tsx:37
+msgid "pagination.aria.next-page"
 msgstr "Next page"
 
 #. Default message for current page label in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/CurrentPage.tsx:23
+#: packages/pagination/src/CurrentPage.tsx:24
 msgid "pagination.label.current-page"
 msgstr "Page {currentPage}"
 
-#. Default screenreader message for page button in the pagination component
+#. Default screenreader message for page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/Page.tsx:43
+#: packages/pagination/src/Page.tsx:39
 msgid "pagination.aria.page"
 msgstr "Page {currentPage}"
 
 #. Default screenreader message for pagination container in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PaginationContainer.tsx:68
+#: packages/pagination/src/PaginationContainer.tsx:69
 msgid "pagination.aria.pagination"
 msgstr "Pages"
 
-#. Default screenreader message for previous page button in the pagination component
+#. Default screenreader message for previous page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PrevPage.tsx:36
+#: packages/pagination/src/PrevPage.tsx:39
 msgid "pagination.aria.prev-page"
 msgstr "Previous page"
-

packages/pagination/src/locales/fi/messages.mjs

@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Ensimmäinen sivu\",\"pagination.aria.next-page\":\"Seuraava sivu\",\"pagination.button.next-page\":\"Seuraava sivu\",\"pagination.label.current-page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sivut\",\"pagination.aria.prev-page\":\"Edellinen sivu\"}");
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Ensimmäinen sivu\",\"pagination.aria.icon-suffix\":\"kuvake\",\"pagination.aria.next-page\":\"Seuraava sivu\",\"pagination.label.current-page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sivut\",\"pagination.aria.prev-page\":\"Edellinen sivu\",\"pagination.button.next-page\":\"Seuraava sivu\"}");