@iabbb/bds-react 0.39.0-alpha → 0.39.0-alpha-1

package/{Button → dist/Button}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iabbb/bds-react/Button",
   "private": true,
-  "main": "../index.cjs",
+  "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts"
 }

package/{CallToAction → dist/CallToAction}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iabbb/bds-react/CallToAction",
   "private": true,
-  "main": "../index.cjs",
+  "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts"
 }

package/{ErrorSummary → dist/ErrorSummary}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iabbb/bds-react/ErrorSummary",
   "private": true,
-  "main": "../index.cjs",
+  "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts"
 }

package/{FieldTextInput → dist/FieldTextInput}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iabbb/bds-react/FieldTextInput",
   "private": true,
-  "main": "../index.cjs",
+  "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts"
 }

package/{Pagination → dist/Pagination}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iabbb/bds-react/Pagination",
   "private": true,
-  "main": "../index.cjs",
+  "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts"
 }

package/{Typography → dist/Typography}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iabbb/bds-react/Typography",
   "private": true,
-  "main": "../index.cjs",
+  "main": "./index.cjs",
   "module": "./index.mjs",
   "types": "./index.d.ts"
 }

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@iabbb/bds-react",
-  "version": "0.39.0-alpha",
-  "main": "index.js",
+  "version": "0.39.0-alpha-1",
+  "main": "dist/index.js",
+  "exports": {
+    "./*": "./dist/*",
+    "./package.json": "./package.json",
+    "./README.md": "./README.md"
+  },
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
     "dev": "rollup -c -w"

package/rollup.config.mjs

@@ -0,0 +1,92 @@
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import { globSync } from 'glob';
+import del from 'rollup-plugin-delete';
+import generatePackageJson from 'rollup-plugin-generate-package-json';
+import external from 'rollup-plugin-peer-deps-external';
+import summary from 'rollup-plugin-summary';
+
+import packageJson from './package.json' assert { type: 'json' };
+
+const plugins = [
+  external(),
+  resolve({
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  }),
+  babel({
+    babelHelpers: 'bundled',
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    presets: ['@babel/env', '@babel/preset-react', '@babel/preset-typescript'],
+  }),
+  commonjs(),
+  summary(),
+];
+
+const getFolders = (dir) => {
+  return globSync(`${dir}/*/`).map((x) => x.replace('src\\', ''));
+};
+
+const folderBuilds = getFolders('./src').map((folder) => {
+  return {
+    input: [`src/${folder}/index.ts`],
+    output: [
+      {
+        file: `dist/${folder}/index.mjs`,
+        format: 'esm',
+        sourcemap: true,
+      },
+      {
+        file: `dist/${folder}/index.cjs`,
+        format: 'cjs',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      ...plugins,
+      generatePackageJson({
+        baseContents: {
+          name: `${packageJson.name}/${folder}`,
+          private: true,
+          main: './index.cjs', // --> points to cjs format entry point of individual component
+          module: './index.mjs', // --> points to esm format entry point of individual component
+          types: './index.d.ts', // --> points to types definition file of individual component
+        },
+      }),
+    ],
+    external: ['react'],
+  };
+});
+
+export default [
+  {
+    input: ['src/index.ts'],
+    output: [
+      {
+        file: 'dist/index.mjs',
+        format: 'esm',
+        sourcemap: true,
+        exports: 'named',
+      },
+      {
+        file: 'dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+      },
+    ],
+    plugins: [
+      del({ targets: 'dist/*' }),
+      ...plugins,
+      typescript({
+        declaration: true,
+        declarationDir: `./dist`,
+        emitDeclarationOnly: true,
+        noForceEmit: true,
+      }),
+    ],
+    external: ['react'],
+  },
+  ...folderBuilds,
+];

package/src/Button/Button.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
+
+export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+  preventDoubleClick?: boolean;
+  variant?: 'cancel' | 'featured' | 'quote' | 'search' | 'standard' | 'unstyled';
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, onClick, preventDoubleClick = false, variant = 'standard', ...props }, ref) => {
+    const debounceClicks = React.useRef(false);
+
+    const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+      // 👇 button is not configured to ignore double clicks
+      if (!preventDoubleClick) {
+        if (onClick) {
+          onClick(event);
+        }
+
+        return;
+      }
+
+      // 👇 button has been clicked recently, and subsequent clicks are prevented
+      if (debounceClicks.current) {
+        event.preventDefault();
+        return;
+      }
+
+      if (onClick) {
+        onClick(event);
+      }
+
+      // 👇 block from double clicks
+      debounceClicks.current = true;
+
+      // 👇 and remove the block after a given amount of seconds
+      setTimeout(() => {
+        debounceClicks.current = false;
+      }, DEBOUNCE_TIMEOUT_IN_SECONDS * 1000);
+    };
+
+    return (
+      <button
+        className={[variant === 'unstyled' ? 'bds-button-unstyled' : 'bds-button', className]
+          .filter((x) => x)
+          .join(' ')}
+        data-type={variant !== 'standard' && variant !== 'unstyled' ? variant : null}
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+export default Button;

package/src/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export * from './Button';

package/src/CallToAction/CallToAction.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export interface CallToActionProps extends React.ComponentPropsWithoutRef<'a'> {
+  variant?: 'featured' | 'quote' | 'standard';
+}
+
+const CallToAction = React.forwardRef<HTMLAnchorElement, CallToActionProps>(
+  ({ children, className, variant = 'standard', ...props }, ref) => {
+    return (
+      <a
+        className={['bds-cta', className].filter((x) => x).join(' ')}
+        data-type={variant !== 'standard' ? variant : null}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  },
+);
+
+export default CallToAction;

package/src/CallToAction/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CallToAction';
+export * from './CallToAction';

package/src/ErrorSummary/ErrorSummary.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import { getAssociatedLegendOrLabel, getFragmentFromUrl } from './utils';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bds-error-summary': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    }
+  }
+}
+
+export const FormErrorKey = '_form';
+
+const FINAL_FORM_ERROR = 'FINAL_FORM/form-error';
+
+export type ErrorSummaryProps = {
+  errors: Record<string, Array<string> | string> | null;
+  mapNameToId?: (name: string) => string;
+};
+
+export default function BdsErrorSummary({
+  className,
+  errors,
+  mapNameToId = (name) => name,
+  ...props
+}: ErrorSummaryProps & React.ComponentPropsWithoutRef<'div'>) {
+  const headingId = React.useId();
+  const groupRef = React.useRef<HTMLElement>(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/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ErrorSummary';
+export * from './ErrorSummary';

package/src/ErrorSummary/utils.ts

@@ -0,0 +1,42 @@
+export function getFragmentFromUrl(url: string) {
+  return url.includes('#') ? url.split('#').pop() : undefined;
+}
+
+export function getAssociatedLegendOrLabel(input: HTMLElement) {
+  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.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+export type FieldTextInputProps<C> = {
+  as?: C;
+  error?: string;
+  hint?: string;
+  id?: string;
+  isOptional?: boolean;
+  label: string;
+};
+
+export default function FieldTextInput<C extends React.ElementType>({
+  as,
+  error,
+  hint,
+  id,
+  isOptional = false,
+  label,
+  ...props
+}: FieldTextInputProps<C> & React.ComponentPropsWithoutRef<C>) {
+  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/FieldTextInput/index.ts

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

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+
+export type PaginationProps = {
+  buildPageUrl: (page: number) => string;
+  currentPage: number;
+  onPageClick?: (page: number) => void;
+  totalPages: number;
+};
+
+function usePages(currentPage: number, totalPages: number) {
+  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
+}: PaginationProps & React.ComponentPropsWithoutRef<'nav'>) {
+  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/Pagination/index.ts

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

package/src/Typography/Typography.tsx

@@ -0,0 +1,35 @@
+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',
+};
+
+export type TypographyProps = {
+  component?: React.ElementType;
+  variant?: 'body' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+};
+
+const Typography = React.forwardRef<HTMLOrSVGElement, React.HTMLAttributes<HTMLOrSVGElement> & TypographyProps>(
+  ({ className, component, variant = 'body', ...props }, ref) => {
+    const Component = component ?? (componentMap[variant] as React.ElementType);
+    return (
+      <Component className={[classMap[variant], className].filter((x) => x).join(' ')} ref={ref} {...props} />
+    );
+  },
+);
+
+export default Typography;

package/src/Typography/index.ts

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

package/src/index.ts

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

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist/**/*"]
+}