@iabbb/bds-react 0.38.0-alpha.0

package/src/Pagination/Pagination.js

@@ -0,0 +1,107 @@
+// import clsx from 'clsx';
+import * as React from 'react';
+
+function usePages(currentPage, totalPages) {
+  const pages = [1, currentPage - 1, currentPage, currentPage + 1, totalPages].filter(
+    (x) => x >= 1 && x <= totalPages,
+  );
+  return [...new Set(pages)];
+}
+
+export default function Pagination({ buildPageUrl, className, currentPage, onPageClick, totalPages, ...props }) {
+  const pages = usePages(currentPage, totalPages);
+
+  return (
+    <nav
+      aria-label="pagination"
+      // className={clsx('bds-pagination', className)}
+      className="bds-pagination"
+      {...props}
+    >
+      {currentPage !== 1 && (
+        <>
+          <a href={buildPageUrl(1)} className="bds-first-page">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              focusable="false"
+              height="1em"
+              width="auto"
+              viewBox="0 63.95 512 384.1"
+            >
+              <path d="M459.5 440.6c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4L288 214.3v83.4l171.5 142.9zM256 352V96c0-12.4-7.2-23.7-18.4-29s-24.5-3.6-34.1 4.4l-192 160C4.2 237.5 0 246.5 0 256s4.2 18.5 11.5 24.6l192 160c9.5 7.9 22.8 9.7 34.1 4.4s18.4-16.6 18.4-29v-64z" />
+            </svg>
+            First
+          </a>
+          <a aria-label="previous" href={buildPageUrl(currentPage - 1)} rel="prev">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              focusable="false"
+              width="auto"
+              height="1em"
+              viewBox="0.02 95.9 192.08 320.17"
+            >
+              <path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6v256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z" />
+            </svg>
+            Prev.
+          </a>
+        </>
+      )}
+      <ul>
+        {pages.map((page, index) => {
+          const handlePageClick = () => {
+            if (!onPageClick) return;
+
+            onPageClick(page);
+          };
+
+          return (
+            <React.Fragment key={page}>
+              <li>
+                <a
+                  aria-current={page === currentPage ? 'page' : undefined}
+                  href={buildPageUrl(page)}
+                  onClick={handlePageClick}
+                >
+                  <span className="visually-hidden">Page</span> {page}
+                </a>
+              </li>
+              {pages[index + 1] > page + 1 ? <li data-overflow="">...</li> : null}
+            </React.Fragment>
+          );
+        })}
+      </ul>
+      {currentPage !== totalPages && (
+        <>
+          <a href={buildPageUrl(currentPage + 1)} rel="next">
+            Next
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              focusable="false"
+              viewBox="63.9 95.9 192.1 320.17"
+              width="auto"
+              height="1em"
+            >
+              <path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9S63.9 115 63.9 128v256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z" />
+            </svg>
+          </a>
+          <a href={buildPageUrl(totalPages)} className="bds-last-page">
+            Last
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+              focusable="false"
+              width="auto"
+              height="1em"
+              viewBox="0 63.95 512 384.1"
+            >
+              <path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4L224 214.3v83.4L52.5 440.6zM256 352V96c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4l192 160c7.3 6.1 11.5 15.1 11.5 24.6s-4.2 18.5-11.5 24.6l-192 160c-9.5 7.9-22.8 9.7-34.1 4.4S256 428.4 256 416v-64z" />
+            </svg>
+          </a>
+        </>
+      )}
+    </nav>
+  );
+}

package/src/Pagination/index.js

@@ -0,0 +1 @@
+export { default } from './Pagination';

package/src/Typography/Typography.js

@@ -0,0 +1,34 @@
+// import clsx from 'clsx';
+import * as React from 'react';
+
+const componentMap = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  body: 'p',
+};
+
+const classMap = {
+  h1: 'bds-h1',
+  h2: 'bds-h2',
+  h3: 'bds-h3',
+  h4: 'bds-h4',
+  h5: 'bds-h5',
+  body: 'bds-body',
+};
+
+const Typography = React.forwardRef(({ className, component, variant = 'body', ...props }, ref) => {
+  const Component = component ?? componentMap[variant];
+  return (
+    <Component
+      // className={clsx(classMap[variant], className)}
+      className={classMap[variant]}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export default Typography;

package/src/Typography/index.js

@@ -0,0 +1 @@
+export { default } from './Typography';

package/src/index.js

@@ -0,0 +1,6 @@
+export { default as Button } from './Button/index';
+export { default as CallToAction } from './CallToAction/index';
+export { default as ErrorSummary } from './ErrorSummary/index';
+export { default as FieldTextInput } from './FieldTextInput/index';
+export { default as Pagination } from './Pagination/index';
+export { default as Typography } from './Typography/index';