@iabbb/bds-react 0.38.6 → 0.39.0-alpha

package/src/ErrorSummary/ErrorSummary.js

@@ -1,102 +0,0 @@
-import * as React from 'react';
-
-import { getAssociatedLegendOrLabel, getFragmentFromUrl } from './utils';
-
-export const FormErrorKey = '_form';
-
-const FINAL_FORM_ERROR = 'FINAL_FORM/form-error';
-
-export default function BdsErrorSummary({ className, errors, mapNameToId = (name) => name, ...props }) {
-  const headingId = React.useId();
-  const groupRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!errors || Object.keys(errors).length === 0) return;
-    if (!groupRef.current) return;
-
-    groupRef.current.focus();
-  }, [errors]);
-
-  if (!errors || Object.keys(errors).length === 0) return null;
-
-  const handleLinkClick = (e) => {
-    const inputId = getFragmentFromUrl(e.currentTarget.href);
-
-    if (!inputId) {
-      return;
-    }
-
-    const input = document.getElementById(inputId);
-
-    if (!input) {
-      return;
-    }
-
-    const legendOrLabel = getAssociatedLegendOrLabel(input);
-
-    if (!legendOrLabel) {
-      return;
-    }
-
-    e.preventDefault();
-
-    legendOrLabel.scrollIntoView();
-    input.focus({ preventScroll: true });
-  };
-
-  return (
-    <bds-error-summary
-      className={['stack', className].filter((x) => x).join(' ')}
-      role="group"
-      aria-labelledby={headingId}
-      ref={groupRef}
-      tabIndex={-1}
-      {...props}
-    >
-      <h2 className="bds-h5" id={headingId}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-          aria-hidden="true"
-          height="1em"
-          width="1em"
-          fill="currentColor"
-        >
-          <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" />
-        </svg>
-        Issue
-      </h2>
-      <ul>
-        {Object.keys(errors).map((errorKey) => {
-          const message = errors[errorKey];
-          const isFormError = [FINAL_FORM_ERROR, FormErrorKey].includes(errorKey);
-
-          if (isFormError) {
-            return <li key={errorKey} dangerouslySetInnerHTML={{ __html: message }} />;
-          }
-
-          const isArrayField = Array.isArray(message);
-
-          const messages = isArrayField ? message : [message];
-
-          return (
-            <React.Fragment key={errorKey}>
-              {messages.map((fieldMessage, index) => {
-                const inputId = `${mapNameToId(errorKey)}${isArrayField ? `[${index}]` : ''}`;
-
-                return (
-                  <li key={inputId}>
-                    <a href={`#${inputId}`} onClick={handleLinkClick}>
-                      {fieldMessage}
-                      {messages.length > 1 ? ` (${index + 1} of ${messages.length})` : undefined}
-                    </a>
-                  </li>
-                );
-              })}
-            </React.Fragment>
-          );
-        })}
-      </ul>
-    </bds-error-summary>
-  );
-}

package/src/ErrorSummary/utils.js

@@ -1,42 +0,0 @@
-export function getFragmentFromUrl(url) {
-  return url.includes('#') ? url.split('#').pop() : undefined;
-}
-
-export function getAssociatedLegendOrLabel(input) {
-  const fieldset = input.closest('fieldset');
-
-  if (fieldset) {
-    const legends = fieldset.getElementsByTagName('legend');
-
-    if (legends.length) {
-      const candidateLegend = legends[0];
-
-      // If the input type is radio or checkbox, always use the legend if there
-      // is one.
-      if (input instanceof HTMLInputElement && (input.type === 'checkbox' || input.type === 'radio')) {
-        return candidateLegend;
-      }
-
-      // For other input types, only scroll to the fieldset’s legend (instead of
-      // the label associated with the input) if the input would end up in the
-      // top half of the screen.
-      //
-      // This should avoid situations where the input either ends up off the
-      // screen, or obscured by a software keyboard.
-      const legendTop = candidateLegend.getBoundingClientRect().top;
-      const inputRect = input.getBoundingClientRect();
-
-      // If the browser doesn't support Element.getBoundingClientRect().height
-      // or window.innerHeight (like IE8), bail and just link to the label.
-      if (inputRect.height && window.innerHeight) {
-        const inputBottom = inputRect.top + inputRect.height;
-
-        if (inputBottom - legendTop < window.innerHeight / 2) {
-          return candidateLegend;
-        }
-      }
-    }
-  }
-
-  return document.querySelector(`label[for='${input.getAttribute('id')}']`) ?? input.closest('label');
-}

package/src/FieldTextInput/FieldTextInput.js

@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-export default function FieldTextInput({ as, error, hint, id, isOptional = false, label, ...props }) {
-  id = id ?? props.name;
-
-  const errorId = React.useId();
-  const hintId = React.useId();
-
-  const InputComponent = as ?? 'input';
-
-  return (
-    <div className="bds-text-input stack">
-      <label htmlFor={id}>
-        {label}
-        {isOptional && ' (optional)'}
-      </label>
-      {hint && (
-        <span className="bds-hint" id={hintId}>
-          {hint}
-        </span>
-      )}
-      {error && (
-        <span className="bds-error" id={errorId}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            aria-hidden="true"
-            height="1em"
-            width="1em"
-            fill="currentColor"
-          >
-            <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" />
-          </svg>
-          {error}
-        </span>
-      )}
-      <InputComponent
-        aria-invalid={error ? true : undefined}
-        aria-describedby={error && hint ? `${hintId} ${errorId}` : error ? errorId : hint ? hintId : undefined}
-        aria-required={isOptional ? undefined : true}
-        id={id}
-        {...props}
-      />
-    </div>
-  );
-}

package/src/Pagination/Pagination.js

@@ -1,101 +0,0 @@
-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={['bds-pagination', className].filter((x) => x).join(' ')} {...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="100%"
-              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="100%"
-              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="100%"
-              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="100%"
-              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/Typography/Typography.js

@@ -1,26 +0,0 @@
-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={[classMap[variant], className].filter((x) => x).join(' ')} ref={ref} {...props} />;
-});
-
-export default Typography;

package/src/index.js

@@ -1,6 +0,0 @@
-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';