@bspk/ui 1.2.0 → 1.3.0

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
+import './modal.scss';
 import { SvgClose } from '@bspk/icons/Close';
 import { ReactNode, useMemo, useRef } from 'react';
-
 import { Button, ButtonProps } from '-/components/Button';
 import { DialogProps, Dialog } from '-/components/Dialog';
 import { Txt } from '-/components/Txt';
@@ -9,8 +9,6 @@ import { useDebounceCallback } from '-/hooks/useDebounceCallback';
 import { useUIContext } from '-/hooks/useUIContext';
 import { CallToActionButton } from '-/types/common';
 
-import './modal.scss';
-
 // This hook is used to set the height of the modal based on the dialog box height.
 // It listens to the resize event and updates the modal height accordingly.
 function useDialogHeight() {
@@ -46,7 +44,10 @@ function useDialogHeight() {
 
 export type ModalCallToAction = Pick<ButtonProps, 'destructive'> & Pick<CallToActionButton, 'label' | 'onClick'>;
 
-export type ModalProps = Pick<DialogProps, 'container' | 'id' | 'innerRef' | 'onClose' | 'open' | 'owner'> & {
+export type ModalProps = Pick<
+    DialogProps,
+    'container' | 'disableFocusTrap' | 'id' | 'innerRef' | 'onClose' | 'open' | 'owner'
+> & {
     /**
      * Modal header.
      *
@@ -118,7 +119,7 @@ export type ModalProps = Pick<DialogProps, 'container' | 'id' | 'innerRef' | 'on
  *
  *         return (
  *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Button label="Open Modal" onClick={() => setOpen(true)} />
  *                 <Modal
  *                     description="Example description"
  *                     header="Example header"
@@ -144,6 +145,7 @@ export function Modal({
     cancelButton,
     buttonFormat = 'horizontal',
     innerRef,
+    disableFocusTrap,
     ...dialogProps
 }: ModalProps) {
     const { isMobile } = useUIContext();
@@ -178,6 +180,7 @@ export function Modal({
             {...dialogProps}
             aria-description={description}
             aria-label={header}
+            disableFocusTrap={disableFocusTrap}
             innerRef={setModalRefs}
             placement="center"
             showScrim

package/src/components/NumberField/NumberField.rtl.test.tsx

@@ -0,0 +1,24 @@
+import { NumberField } from './NumberField';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <NumberField
+        aria-label="Example label"
+        controlId="Example controlId"
+        label="Example label"
+        name="Example name"
+        onChange={() => {}}
+        value={24}
+    />
+);
+
+describe('NumberField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/NumberInput/NumberInput.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { NumberInput } from './NumberInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <NumberInput aria-label="Example label" name="Example name" onChange={() => {}} value={24} />;
+
+describe('NumberInput (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/NumberInput/NumberInput.tsx

@@ -1,20 +1,9 @@
+import './number-input.scss';
 import { useCallback, useState } from 'react';
 import { IncrementButton } from './IncrementButton';
 import { useId } from '-/hooks/useId';
 import { CommonProps, FormFieldControlProps } from '-/types/common';
 
-import './number-input.scss';
-
-const MAX = 100;
-const MIN = 0;
-
-const DEFAULT = {
-    align: 'center',
-    size: 'medium',
-    disabled: false,
-    readOnly: false,
-} as const;
-
 function isNumber(value: unknown, fallbackValue: number | undefined = undefined): number | undefined {
     if (typeof value === 'number') return value;
     if (typeof value !== 'string') return fallbackValue;
@@ -43,8 +32,6 @@ export type NumberInputProps = CommonProps<
         /**
          * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
          * accepted.
-         *
-         * @default 99
          */
         max?: number;
         /**
@@ -54,6 +41,12 @@ export type NumberInputProps = CommonProps<
          * @default 0
          */
         min?: number;
+        /**
+         * The amount to increment or decrement the value by when the (+) or (-) buttons are pressed.
+         *
+         * @default 1
+         */
+        step?: number;
     };
 
 /**
@@ -84,31 +77,31 @@ export type NumberInputProps = CommonProps<
 export function NumberInput({
     value,
     onChange,
-    align = DEFAULT.align,
-    size = DEFAULT.size,
-    disabled = DEFAULT.disabled,
-    readOnly = DEFAULT.readOnly,
+    align = 'center',
+    size = 'medium',
+    disabled = false,
+    readOnly = false,
     name,
     id: inputIdProp,
     'aria-label': ariaLabel,
     max: maxProp,
-    min: minProp,
+    min = 0,
     invalid,
     'aria-describedby': ariaDescribedBy,
     'aria-errormessage': ariaErrorMessage,
+    step = 1,
     ...inputElementProps
 }: NumberInputProps) {
+    const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
     const inputId = useId(inputIdProp);
-    const max = Math.min(MAX, isNumber(maxProp) || MAX);
-    const min = Math.max(MIN, isNumber(minProp) || MIN);
     const valueNumber = isNumber(value) || 0;
 
     const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
 
     const handleIncrement = (increment: -1 | 1) => {
         if (!inputElement) return;
-        const nextValue = (isNumber(inputElement.value) || 0) + increment;
+        const nextValue = (isNumber(inputElement.value) || 0) + increment * step;
         handleUpdate(nextValue);
     };
 
@@ -159,6 +152,7 @@ export function NumberInput({
                 }}
                 readOnly={readOnly}
                 ref={(node) => node && setInputElement(node)}
+                step={step}
                 type="number"
             />
             {!centered && (

package/src/components/NumberInput/number-input.scss

@@ -13,7 +13,6 @@
     border: 1px solid var(--stroke-neutral-base);
     border-radius: var(--radius-sm);
     background: var(--surface-neutral-t1-base);
-    max-width: 280px;
 
     &:focus-within {
         outline: solid 2px var(--stroke-neutral-focus);

package/src/components/OTPInput/OTPInput.rtl.test.tsx

@@ -0,0 +1,19 @@
+import { OTPInput } from './OTPInput';
+import { presets } from './OTPInputExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('OTPInput (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<OTPInput onChange={() => {}} {...preset.propState} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByLabelText } = render(<OTPInput onChange={() => {}} {...presets[0].propState} />);
+
+        expect(getByLabelText('OTP digit 1')).toBeInTheDocument();
+    });
+});

package/src/components/OTPInput/OTPInput.tsx

@@ -1,9 +1,8 @@
+import './otp-input.scss';
 import { useRef } from 'react';
 import { useId } from '-/hooks/useId';
 import { CommonProps } from '-/types/common';
 
-import './otp-input.scss';
-
 export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
     /**
      * The value of the otp-input.
@@ -30,7 +29,7 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
 };
 
 /**
- * A row of numerical input fields that are used to input a temporary secure pin code sent to the customer.
+ * A row of input fields that are used to input a temporary secure pin code sent to the customer.
  *
  * @example
  *     import { OTPInput } from '@bspk/ui/OTPInput';
@@ -40,7 +39,7 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  *     }
  *
  * @name OTPInput
- * @phase QA
+ * @phase UXReview
  */
 export function OTPInput({
     value: valueProp,

package/src/components/OTPInput/OTPInputExample.tsx

@@ -1,26 +1,30 @@
 import { OTPInputProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<OTPInputProps>[] = [
+    {
+        label: '4 Characters',
+        propState: {
+            value: '',
+            length: 4,
+            name: 'OTP Input',
+        },
+    },
+    {
+        label: '6 Characters',
+        propState: {
+            value: '',
+            length: 6,
+            name: 'OTP Input',
+        },
+    },
+];
 
 export const OTPInputExample: ComponentExample<OTPInputProps> = {
     containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
-    presets: [
-        {
-            label: '4 Characters',
-            propState: {
-                value: '',
-                length: 4,
-            },
-        },
-        {
-            label: '6 Characters',
-            propState: {
-                value: '',
-                length: 6,
-            },
-        },
-    ],
+    presets,
     render: ({ props, Component }) => <Component {...props} />,
     sections: [],
 };

package/src/components/PageControl/PageControl.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { PageControl } from './PageControl';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <PageControl currentPage={1} numPages={3} />;
+
+describe('PageControl (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Page 1 of 3')).toBeInTheDocument();
+    });
+});

package/src/components/PageControl/PageControl.tsx

@@ -4,21 +4,22 @@ const MAX_DOT_COUNT = 5 as const;
 
 export type PageControlProps = {
     /**
-     * The current page number.
+     * The current page (NOT zero-based).
      *
      * @example
      *     1;
      *
+     * @min 1
      * @required
      */
-    value: number;
-
+    currentPage: number;
     /**
      * The total number of pages.
      *
      * @example
      *     5;
      *
+     * @min 1
      * @required
      */
     numPages: number;
@@ -46,21 +47,24 @@ type DotSize = 'medium' | 'small' | 'x-small';
  * @name PageControl
  * @phase UXReview
  */
-export function PageControl({ value, numPages, variant = 'flat' }: PageControlProps) {
-    if (numPages < 2) return null;
+export function PageControl({ currentPage: currentProp, numPages: numPagesProp, variant = 'flat' }: PageControlProps) {
+    const numPages = Number(numPagesProp);
+    const current = Number(currentProp);
+
+    if (numPages < 2 || current < 1 || current > numPages) return null;
 
     return (
         <span
-            aria-label={`Page ${value} of ${numPages}`}
+            aria-label={`Page ${current} of ${numPages}`}
             data-bspk="page-control"
             data-variant={variant || undefined}
             role="img"
         >
-            {getDots(value, numPages).map(({ page, size }, index) => (
+            {getDots(current - 1, numPages).map(({ pageIndex, size }, index) => (
                 <span
                     aria-hidden="true"
-                    data-active={page === Number(value) || undefined}
-                    data-dot={page}
+                    data-active={pageIndex + 1 === current || undefined}
+                    data-dot={pageIndex}
                     data-size={size}
                     key={index + 1}
                     role="presentation"
@@ -70,29 +74,25 @@ export function PageControl({ value, numPages, variant = 'flat' }: PageControlPr
     );
 }
 
-function getDots(currentPage: number, totalPages: number) {
+function getDots(currentIndex: number, totalPages: number) {
     if (totalPages <= MAX_DOT_COUNT) {
         return Array.from({ length: totalPages }, (_, i) => ({
             size: 'medium' as DotSize,
-            page: i + 1,
+            pageIndex: i,
         }));
     }
-
-    const start = Math.max(1, Math.min(currentPage - 2, totalPages - 4));
-
-    const dots = Array.from({ length: MAX_DOT_COUNT }, (_, i) => {
-        const page = start + i;
+    const start = Math.max(0, Math.min(currentIndex - 2, totalPages - MAX_DOT_COUNT));
+    return Array.from({ length: MAX_DOT_COUNT }, (_, i) => {
+        const pageIndex = start + i;
         let size: DotSize = 'medium';
 
-        if (i === 0 && page > 1) size = page > 1 ? 'x-small' : 'small';
-        if (i === 1 && page > 2) size = 'small';
-        if (i === 3 && page < totalPages - 1) size = 'small';
-        if (i === 4 && page < totalPages) size = page < totalPages ? 'x-small' : 'small';
+        if (i === 0 && pageIndex > 0) size = 'x-small';
+        if (i === 1 && pageIndex > 1) size = 'small';
+        if (i === 3 && pageIndex < totalPages - 2) size = 'small';
+        if (i === 4 && pageIndex < totalPages - 1) size = 'x-small';
 
-        return { page, size };
+        return { pageIndex, size };
     });
-
-    return dots;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PageControl/PageControlExample.tsx

@@ -0,0 +1,36 @@
+import { PageControlProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<PageControlProps>[] = [
+    {
+        label: '6 pages, on page 2',
+        propState: {
+            numPages: 6,
+            currentPage: 2,
+        },
+    },
+    {
+        label: '5 pages, on page 1',
+        propState: {
+            numPages: 5,
+            currentPage: 1,
+        },
+    },
+    {
+        label: '10 pages, on page 10',
+        propState: {
+            numPages: 10,
+            currentPage: 10,
+        },
+    },
+];
+
+export const PageControlExample: ComponentExample<PageControlProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => <Component {...props} />,
+    sections: [],
+    variants: {},
+};

package/src/components/Pagination/Pagination.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { Pagination } from './Pagination';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Pagination numPages={4} onChange={() => {}} value={1} />;
+
+describe('Pagination (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('First page')).toBeInTheDocument();
+    });
+});

package/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,5 @@
-import { SvgIcon } from '@bspk/icons/SvgIcon';
-
 import './pagination.scss';
+import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AriaAttributes } from 'react';
 import { PageInput } from './PageInput';
 import { PageList } from './PageList';
@@ -40,11 +39,7 @@ export type PaginationProps = {
  *
  *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
  *
- *         return (
- *             <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages}>
- *                 Example Pagination
- *             </Pagination>
- *         );
+ *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages} />;
  *     }
  *
  * @name Pagination

package/src/components/PasswordField/PasswordField.rtl.test.tsx

@@ -0,0 +1,24 @@
+import { PasswordField } from './PasswordField';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <PasswordField
+        aria-label="Password field"
+        controlId="Example controlId"
+        label="Password field"
+        name="Example name"
+        onChange={() => {}}
+        value="foo"
+    />
+);
+
+describe('PasswordField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Password field')).toBeInTheDocument();
+    });
+});

package/src/components/PasswordField/PasswordField.tsx

@@ -27,7 +27,7 @@ export type PasswordFieldProps = FormFieldWrapProps<PasswordInputProps>;
  *     }
  *
  * @name PasswordField
- * @phase QA
+ * @phase UXReview
  */
 export function PasswordField({
     controlId,
@@ -37,7 +37,7 @@ export function PasswordField({
     label,
     labelTrailing,
     required,
-    ...inputProps
+    ...passwordInputProps
 }: PasswordFieldProps) {
     return (
         <FormField
@@ -52,13 +52,12 @@ export function PasswordField({
         >
             {(fieldProps) => (
                 <PasswordInput
-                    {...inputProps}
+                    {...passwordInputProps}
                     {...fieldProps}
-                    aria-label={label}
                     id={controlId}
                     invalid={invalid}
                     required={required}
-                    value={inputProps.value ?? ''}
+                    value={passwordInputProps.value ?? ''}
                 />
             )}
         </FormField>

package/src/components/PasswordInput/PasswordInput.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { PasswordInput } from './PasswordInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <PasswordInput aria-label="Password field" name="Example name" onChange={() => {}} value="foo" />;
+
+describe('PasswordInput (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Password field')).toBeInTheDocument();
+    });
+});

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
 import './password-input.scss';
+import { useState } from 'react';
 import { Button } from '-/components/Button';
 import { TextInput, TextInputProps } from '-/components/TextInput';
 
@@ -36,7 +36,7 @@ export type PasswordInputProps = Pick<
  *     }
  *
  * @name PasswordInput
- * @phase QA
+ * @phase UXReview
  */
 export function PasswordInput({
     disabled,

package/src/components/PhoneNumberField/PhoneNumberField.rtl.test.tsx

@@ -0,0 +1,24 @@
+import { PhoneNumberField } from './PhoneNumberField';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <PhoneNumberField
+        aria-label="Phone number field"
+        controlId="Example controlId"
+        label="Phone number field"
+        name="Example name"
+        onChange={() => {}}
+        value="9375551060"
+    />
+);
+
+describe('PhoneNumberField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Phone number field')).toBeInTheDocument();
+    });
+});

package/src/components/PhoneNumberInput/PhoneNumberInput.rtl.test.tsx

@@ -0,0 +1,17 @@
+import { PhoneNumberInput } from './PhoneNumberInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <PhoneNumberInput aria-label="Phone number input" name="Example name" onChange={() => {}} value="9375551060" />
+);
+
+describe('PhoneNumberInput (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Phone number input')).toBeInTheDocument();
+    });
+});