@bspk/ui 1.1.34 → 1.3.0

package/src/components/OTPInput/OTPInput.tsx

@@ -0,0 +1,120 @@
+import './otp-input.scss';
+import { useRef } from 'react';
+import { useId } from '-/hooks/useId';
+import { CommonProps } from '-/types/common';
+
+export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
+    /**
+     * The value of the otp-input.
+     *
+     * @example
+     *     867530;
+     *
+     * @required
+     */
+    value: string;
+    /**
+     * Callback when the value changes.
+     *
+     * @required
+     */
+    onChange: (value: string) => void;
+    /**
+     * The length of the otp-input.
+     *
+     * @default 6
+     * @maximum 10
+     */
+    length?: number;
+};
+
+/**
+ * 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';
+ *
+ *     function Example() {
+ *         return <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     }
+ *
+ * @name OTPInput
+ * @phase UXReview
+ */
+export function OTPInput({
+    value: valueProp,
+    onChange,
+    name,
+    id: idProp,
+    length = 6,
+    size = 'medium',
+    invalid = false,
+}: OTPInputProps) {
+    const id = useId(idProp);
+    const value = valueProp?.slice(0, length) || '';
+    const parentRef = useRef<HTMLDivElement | null>(null);
+
+    const element = (index: number) => parentRef.current?.children[index + 1] as HTMLElement;
+
+    const setIndex = (index: number, character: string) => {
+        const charArray = value.split('');
+        charArray[index] = character;
+        return charArray.join('');
+    };
+
+    const updateValue = (next: string) => onChange(next.slice(0, length).toUpperCase());
+
+    return (
+        <div
+            data-bspk="otp-input"
+            data-invalid={invalid || undefined}
+            data-size={size || 'medium'}
+            id={id}
+            ref={parentRef}
+        >
+            <input name={name} type="hidden" value={value} />
+            {Array.from({ length }, (_, index) => (
+                <span
+                    aria-label={`OTP digit ${index + 1}`}
+                    data-digit={index + 1}
+                    key={index}
+                    onClick={(e) => {
+                        if (value[index]) return;
+                        // if a digit does not exist for the previous index then focus the previous input
+                        if (!value[index - 1]) {
+                            e.preventDefault();
+                            element(value.length)?.focus();
+                        }
+                    }}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Backspace') {
+                            if (value) {
+                                // delete the last value if there is one and focus the first empty input
+                                const next = value.slice(0, -1);
+                                updateValue(next);
+                                element(next.length)?.focus();
+                            }
+                        }
+
+                        // if a single character key is pressed at at the current index and focus the next input
+                        if (event.key.length === 1) {
+                            updateValue(setIndex(index, event.key));
+                            element(index + 1)?.focus();
+                        }
+                    }}
+                    onPaste={(event) => {
+                        const pastedData = event.clipboardData.getData('text').trim();
+                        updateValue(pastedData);
+                        element(length - 1)?.focus();
+                    }}
+                    role="textbox"
+                    tabIndex={0}
+                >
+                    {value?.[index] || ''}
+                </span>
+            ))}
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/OTPInput/OTPInputExample.tsx

@@ -0,0 +1,30 @@
+import { OTPInputProps } from '.';
+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,
+    render: ({ props, Component }) => <Component {...props} />,
+    sections: [],
+};

package/src/components/OTPInput/index.tsx

@@ -0,0 +1 @@
+export * from './OTPInput';

package/src/components/OTPInput/otp-input.scss

@@ -0,0 +1,87 @@
+[data-bspk='otp-input'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: var(--spacing-sizing-02);
+    font: var(--font);
+    width: fit-content;
+
+    [data-digit] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--stroke-neutral-base);
+        flex-grow: 1;
+        aspect-ratio: 1;
+        width: var(--width);
+        position: relative;
+        outline: none;
+
+        &:hover:not(:focus)::after {
+            background: var(--interaction-hover-opacity);
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius-sm);
+        }
+
+        &:active::after {
+            background: var(--interaction-press-opacity);
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius-sm);
+        }
+
+        &:focus:not(:active) {
+            outline: solid 2px var(--stroke-neutral-focus);
+
+            &:empty::before {
+                // caret
+                content: '';
+                width: 2px;
+                height: calc(var(--caret-height) - 8px);
+                background: var(--stroke-neutral-high);
+                animation: blink-caret 1s step-end infinite;
+
+                @keyframes blink-caret {
+                    0%,
+                    100% {
+                        opacity: 0;
+                    }
+
+                    50% {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    &[data-size='small'] {
+        --width: var(--spacing-sizing-08);
+        --font: var(--subheader-medium);
+        --caret-height: var(--subheader-medium-line-height);
+    }
+
+    &[data-size='medium'] {
+        --width: var(--spacing-sizing-10);
+        --font: var(--subheader-large);
+        --caret-height: var(--subheader-large-line-height);
+    }
+
+    &[data-size='large'] {
+        --width: var(--spacing-sizing-12);
+        --font: var(--subheader-x-large);
+        --caret-height: var(--subheader-x-large-line-height);
+    }
+
+    &[data-invalid] {
+        [data-digit] {
+            border-color: var(--status-error);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,98 @@
+import './page-control.scss';
+
+const MAX_DOT_COUNT = 5 as const;
+
+export type PageControlProps = {
+    /**
+     * The current page (NOT zero-based).
+     *
+     * @example
+     *     1;
+     *
+     * @min 1
+     * @required
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     *
+     * @example
+     *     5;
+     *
+     * @min 1
+     * @required
+     */
+    numPages: number;
+    /**
+     * The variant of the page-control.
+     *
+     * @default flat
+     */
+    variant?: 'flat' | 'floating';
+};
+
+type DotSize = 'medium' | 'small' | 'x-small';
+
+/**
+ * A visual indicator that displays a series of dots representing the number of pages or elements within a moving
+ * carousel or flow. The active page is often differentiated with a usage of a high contrasting color.
+ *
+ * @example
+ *     import { PageControl } from '@bspk/ui/PageControl';
+ *
+ *     function Example() {
+ *         return <PageControl value={1} numPages={3} />;
+ *     }
+ *
+ * @name PageControl
+ * @phase UXReview
+ */
+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 ${current} of ${numPages}`}
+            data-bspk="page-control"
+            data-variant={variant || undefined}
+            role="img"
+        >
+            {getDots(current - 1, numPages).map(({ pageIndex, size }, index) => (
+                <span
+                    aria-hidden="true"
+                    data-active={pageIndex + 1 === current || undefined}
+                    data-dot={pageIndex}
+                    data-size={size}
+                    key={index + 1}
+                    role="presentation"
+                />
+            ))}
+        </span>
+    );
+}
+
+function getDots(currentIndex: number, totalPages: number) {
+    if (totalPages <= MAX_DOT_COUNT) {
+        return Array.from({ length: totalPages }, (_, i) => ({
+            size: 'medium' as DotSize,
+            pageIndex: 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 && 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 { pageIndex, size };
+    });
+}
+
+/** 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/PageControl/index.tsx

@@ -0,0 +1 @@
+export * from './PageControl';

package/src/components/PageControl/page-control.scss

@@ -0,0 +1,38 @@
+[data-bspk='page-control'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--stroke-neutral-low);
+    padding: var(--spacing-sizing-02);
+    gap: var(--spacing-sizing-02);
+    width: fit-content;
+    background-color: var(--surface-neutral-t1-base);
+
+    [data-dot] {
+        background-color: var(--surface-neutral-t3-low);
+        border-radius: var(--radius-full);
+        width: var(--spacing-sizing-02);
+        height: var(--spacing-sizing-02);
+
+        &[data-active] {
+            background-color: var(--foreground-brand-primary);
+        }
+
+        &[data-size='x-small'] {
+            width: var(--spacing-sizing-01);
+            height: var(--spacing-sizing-01);
+        }
+
+        &[data-size='small'] {
+            width: 6px;
+            height: 6px;
+        }
+    }
+
+    &[data-variant='floating'] {
+        box-shadow: var(--drop-shadow-float);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Pagination/PageInput.tsx

@@ -0,0 +1,65 @@
+import { FC, useEffect, useState } from 'react';
+
+import { PaginationProps } from './Pagination';
+import { TextInput } from '-/components/TextInput';
+import { Txt } from '-/components/Txt';
+
+type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+
+export const PageInput: FC<PageInputProps> = ({ numPages, onChange, value }) => {
+    const [page, setPage] = useState<string>(String(value));
+
+    useEffect(() => {
+        const stringValue = String(value);
+
+        if (stringValue !== page) {
+            setPage(stringValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
+    const handleChange = (val: string) => {
+        const pageNumber = parseInt(val, 10);
+        const isValidPageNumber = !isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages;
+
+        if (isValidPageNumber || val === '') {
+            setPage(val);
+        }
+    };
+
+    const handleSubmit = () => {
+        const pageNumber = parseInt(page, 10);
+
+        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages) {
+            onChange(pageNumber);
+        } else {
+            setPage(String(value));
+        }
+    };
+
+    const pageCountMessage = `of ${numPages}`;
+
+    return (
+        <form
+            onSubmit={(e) => {
+                e.preventDefault();
+                handleSubmit();
+            }}
+            style={{ display: 'contents' }}
+        >
+            <div data-bspk="page-input">
+                <TextInput
+                    aria-label="Page input"
+                    name="page-input"
+                    onBlur={handleSubmit}
+                    onChange={handleChange}
+                    showClearButton={false}
+                    size="small"
+                    value={page}
+                />
+
+                <Txt variant="body-small">{pageCountMessage}</Txt>
+            </div>
+        </form>
+    );
+};

package/src/components/Pagination/PageList.tsx

@@ -0,0 +1,21 @@
+import { PaginationProps } from './Pagination';
+import { Button } from '-/components/Button';
+
+export type PageListProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+
+export function PageList({ numPages, onChange, value }: PageListProps) {
+    return Array.from({ length: numPages }, (_, index) => {
+        const page = index + 1;
+        return (
+            <Button
+                aria-label={`Page ${page}`}
+                key={page}
+                label={String(page)}
+                onClick={() => onChange(page)}
+                owner="pagination"
+                size="small"
+                variant={value === page ? 'primary' : 'tertiary'}
+            />
+        );
+    });
+}

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

@@ -0,0 +1,99 @@
+import './pagination.scss';
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import { AriaAttributes } from 'react';
+import { PageInput } from './PageInput';
+import { PageList } from './PageList';
+import { Button } from '-/components/Button';
+
+// After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
+const INPUT_TYPE_THRESHOLD = 7;
+
+export type PaginationProps = {
+    /**
+     * The number of pages to display in the pagination component.
+     *
+     * @default 1
+     */
+    numPages: number;
+    /**
+     * The current page number.
+     *
+     * @default 1
+     */
+    value: number;
+
+    /** Called when the page changes. */
+    onChange: (newPageNumber: number) => void;
+};
+
+/**
+ * A navigation component that allows customers to move between a range of listed content within a page into smaller
+ * multiple micro pages.
+ *
+ * @example
+ *     import { Pagination } from '@bspk/ui/Pagination';
+ *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
+ *
+ *     function Example() {
+ *         const numPages = 10;
+ *
+ *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
+ *
+ *         return <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages} />;
+ *     }
+ *
+ * @name Pagination
+ * @phase UXReview
+ */
+export function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps) {
+    const nextPage = () => {
+        if (value < numPages) {
+            onChange(value + 1);
+        }
+    };
+
+    const previousPage = () => {
+        if (value > 1) {
+            onChange(value - 1);
+        }
+    };
+
+    const isFirstPage = value === 1;
+    const isLastPage = value === numPages;
+    const isOutOfBoundsValue = value < 1 || value > numPages;
+    const isOneOrFewerPages = numPages <= 1;
+
+    return (
+        <span data-bspk="pagination" role="group" {...ariaProps}>
+            <Button
+                disabled={isOutOfBoundsValue || isOneOrFewerPages || isFirstPage}
+                icon={<SvgIcon name="ChevronLeft" />}
+                iconOnly
+                label={isFirstPage ? 'First page' : `Previous page (${value - 1})`}
+                onClick={previousPage}
+                owner="pagination"
+                size="small"
+                variant="tertiary"
+            />
+
+            {numPages > INPUT_TYPE_THRESHOLD ? (
+                <PageInput numPages={numPages} onChange={onChange} value={value} />
+            ) : (
+                <PageList numPages={numPages} onChange={onChange} value={value} />
+            )}
+
+            <Button
+                disabled={isOutOfBoundsValue || isOneOrFewerPages || isLastPage}
+                icon={<SvgIcon name="ChevronRight" />}
+                iconOnly
+                label={isLastPage ? 'Last page' : `Next page (${value + 1})`}
+                onClick={nextPage}
+                owner="pagination"
+                size="small"
+                variant="tertiary"
+            />
+        </span>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Pagination/index.tsx

@@ -0,0 +1 @@
+export * from './Pagination';

package/src/components/Pagination/pagination.scss

@@ -0,0 +1,36 @@
+[data-bspk='pagination'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sizing-01);
+    flex: 1;
+
+    [data-bspk='page-input'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-sizing-01);
+
+        [data-bspk='txt'] {
+            color: var(--foreground-neutral-on-surface-variant-02);
+            text-wrap: nowrap;
+        }
+
+        [data-bspk='text-input'] {
+            width: var(--spacing-sizing-12);
+
+            input {
+                text-align: center;
+                flex: 1;
+            }
+        }
+    }
+
+    button[data-bspk-owner='pagination'][data-bspk='button'][data-size='small'] {
+        padding: 6px 0;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */