@bspk/ui 1.2.0 → 1.3.1

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,177 @@
+import './carousel.scss';
+import { SvgChevronLeft } from '@bspk/icons/ChevronLeft';
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { Children, CSSProperties, ReactNode, useMemo, useRef, useState } from 'react';
+import { Button } from '-/components/Button';
+import { PageControl } from '-/components/PageControl';
+import { useSwipe } from '-/hooks/useSwipe';
+import { cssWithVars } from '-/utils/cwv';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+
+export type CarouselProps = {
+    /**
+     * A label for the carousel for screen readers.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The content of the carousel.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The width of each item/child.
+     *
+     * If number is provided, it is treated as pixels.
+     *
+     * If string is provided, it is treated as a CSS width value (%, px, em, rem, etc).
+     *
+     * If a percentage (%) is provided, the item is sized based on the carousel container's width
+     *
+     * @default 80%
+     *
+     * @type string
+     */
+    itemWidth?: number | string;
+    /**
+     * The gap between items in pixels.
+     *
+     * @default 16
+     */
+    gap?: number;
+    /** Additional styles to apply to the carousel container. */
+    style?: CSSProperties;
+};
+
+/**
+ * A carousel component for displaying a horizontal list of items with navigation controls.
+ *
+ * @example
+ *     import { Carousel } from '@bspk/ui/Carousel';
+ *
+ *     function Example() {
+ *         return (
+ *             <Carousel label="Example Carousel" width="1/2">
+ *                 <div>child 1</div>
+ *                 <div>child 2</div>
+ *                 <div>child 3</div>
+ *                 <div>child 4</div>
+ *                 <div>child 5</div>
+ *                 <div>child 6</div>
+ *                 <div>child 7</div>
+ *             </Carousel>
+ *         );
+ *     }
+ *
+ * @name Carousel
+ * @phase UXReview
+ */
+
+export function Carousel({
+    label = 'carousel',
+    children,
+    itemWidth: widthProp = '80%',
+    gap: gapProp,
+    style,
+}: CarouselProps) {
+    const gap = gapProp || 16;
+    const widthValue = typeof widthProp === 'number' ? `${widthProp}px` : widthProp;
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const { items, total } = useMemo(() => {
+        const nextItems = Children.toArray(children);
+        return {
+            items: nextItems,
+            total: nextItems.length,
+        };
+    }, [children]);
+
+    const setCurrent = (dir: 'next' | 'prev') => () => {
+        setCurrentIndex((prev) => {
+            const nextVal = Math.max(0, Math.min(total - 1, dir === 'next' ? prev + 1 : prev - 1));
+            const nextElement = containerRef.current?.children[nextVal] as HTMLElement | undefined;
+            nextElement?.focus();
+            nextElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+            return nextVal;
+        });
+    };
+
+    const swipeProps = useSwipe(setCurrent('next'), setCurrent('prev'));
+
+    return (
+        <div
+            aria-label={label}
+            aria-roledescription="carousel"
+            data-bspk="carousel"
+            role="region"
+            style={cssWithVars({
+                ...style,
+                '--gap': gap ? `${gap}px` : 'var(--spacing-sizing-04)',
+                '--item-width': widthValue,
+            })}
+        >
+            <div data-items-container>
+                <div
+                    data-items-track
+                    {...swipeProps}
+                    onKeyDownCapture={handleKeyDown(
+                        {
+                            ArrowLeft: setCurrent('prev'),
+                            ArrowRight: setCurrent('next'),
+                        },
+                        {
+                            preventDefault: true,
+                            stopPropagation: true,
+                        },
+                    )}
+                    ref={(node) => (containerRef.current = node)}
+                >
+                    {items.map((child, index) => (
+                        <div
+                            aria-label={`Slide ${index + 1} of ${total}`}
+                            aria-roledescription="slide"
+                            data-active={currentIndex === index || undefined}
+                            data-item-wrapper
+                            key={index}
+                            role="tabpanel"
+                            tabIndex={currentIndex === index ? 0 : -1}
+                        >
+                            {child}
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <div data-controls>
+                <Button
+                    aria-label="Previous Slide"
+                    disabled={currentIndex === 0}
+                    icon={<SvgChevronLeft aria-hidden />}
+                    iconOnly
+                    label="Previous"
+                    onClick={setCurrent('prev')}
+                    variant="tertiary"
+                />
+                <PageControl currentPage={currentIndex + 1} numPages={total} />
+                <Button
+                    aria-label="Next Slide"
+                    disabled={currentIndex === total - 1}
+                    icon={<SvgChevronRight aria-hidden />}
+                    iconOnly
+                    label="Next"
+                    onClick={setCurrent('next')}
+                    variant="tertiary"
+                />
+            </div>
+            <span aria-live="polite" data-sr-only>
+                {`Slide ${currentIndex + 1} of ${total}`}
+            </span>
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Carousel/CarouselExample.tsx

@@ -0,0 +1,82 @@
+import { CarouselProps } from '.';
+import { Button } from '-/components/Button';
+
+import { COLOR_VARIANTS } from '-/utils/colorVariants';
+import { ComponentExampleFn } from '-/utils/demo';
+
+function ExampleSlide({ number, onClick }: { number: number; onClick?: (message: string) => void }) {
+    return (
+        <div
+            data-color={COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length]}
+            style={{
+                backgroundColor: 'var(--background)',
+                color: 'var(--foreground)',
+                borderRadius: '8px',
+                minHeight: '180px',
+                padding: 20,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            Slide {number}
+            {onClick && (
+                <Button label="Click me" onClick={() => onClick(`Slide ${number} clicked`)} variant="tertiary" />
+            )}
+        </div>
+    );
+}
+
+export const CarouselExample: ComponentExampleFn<CarouselProps & { slideCount: number }> = ({ action }) => {
+    return {
+        containerStyle: { width: '100%', padding: '16px', overflow: 'hidden' },
+        render: ({ props, Component }) => (
+            <Component {...props}>
+                {Array.from({ length: props.slideCount || 7 }, (_, i) => i + 1).map((num) => (
+                    <ExampleSlide key={num} number={num} onClick={action} />
+                ))}
+            </Component>
+        ),
+        sections: [],
+        variants: false,
+        presets: [
+            {
+                label: 'Mobile',
+                propState: { style: { width: '375px' }, slideCount: 7, itemWidth: '90%' } as CarouselProps & {
+                    slideCount: number;
+                },
+            },
+            {
+                label: '300px Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '300px' } as CarouselProps & {
+                    slideCount: number;
+                },
+            },
+            {
+                label: 'Full Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '100%' } as CarouselProps & {
+                    slideCount: number;
+                },
+            },
+            {
+                label: '3/4 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '75%' } as CarouselProps & {
+                    slideCount: number;
+                },
+            },
+            {
+                label: '1/2 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '50%' } as CarouselProps & {
+                    slideCount: number;
+                },
+            },
+            {
+                label: '1/4 Width',
+                propState: { style: { width: '100%' }, slideCount: 7, itemWidth: '25%' } as CarouselProps & {
+                    slideCount: number;
+                },
+            },
+        ],
+    };
+};

package/src/components/Carousel/carousel.scss

@@ -0,0 +1,39 @@
+[data-bspk='carousel'] {
+    /*! 
+    --gap: is set via inline style
+    --item-width: is set via inline style
+    */
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    background: #fff;
+    gap: var(--spacing-sizing-02);
+
+    [data-items-container] {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    [data-items-track] {
+        display: flex;
+        align-items: center;
+        gap: var(--gap);
+        min-width: 0;
+    }
+
+    [data-item-wrapper] {
+        min-width: var(--item-width);
+        overflow: hidden;
+    }
+
+    [data-controls] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-sizing-02);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Carousel/index.tsx

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

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

@@ -0,0 +1,27 @@
+import { Checkbox } from './Checkbox';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <label htmlFor="sample-checkbox">
+        <Checkbox
+            aria-label="Sample"
+            checked={true}
+            id="sample-checkbox"
+            name="sample-checkbox"
+            onChange={() => {}}
+            value="sample"
+        />
+        Checkbox Label
+    </label>
+);
+
+describe('Checkbox', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Checkbox Label')).toBeInTheDocument();
+    });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -1,10 +1,8 @@
+import './checkbox.scss';
 import { ChangeEvent, useEffect, useRef } from 'react';
-
 import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
 
-import './checkbox.scss';
-
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly'> &
     FormFieldControlProps &
     RequiredCommonProps<'value'> & {
         /**
@@ -66,6 +64,7 @@ export function Checkbox({
     indeterminate: indeterminateProp,
     invalid,
     disabled,
+    readOnly,
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
     const indeterminate = !!indeterminateProp;
@@ -90,8 +89,9 @@ export function Checkbox({
                 aria-invalid={invalid || undefined}
                 checked={checked}
                 data-indeterminate={indeterminate || undefined}
-                disabled={disabled || undefined}
+                disabled={disabled || readOnly || undefined}
                 onChange={(event) => props.onChange(!!event.target.checked, event)}
+                readOnly={readOnly}
                 ref={(node) => {
                     if (!node) return;
                     inputRef.current = node;

package/src/components/Checkbox/checkbox.scss

@@ -45,7 +45,7 @@
         color: var(--color);
     }
 
-    input[type='checkbox']:not(:checked, :indeterminate, :disabled) {
+    input[type='checkbox']:not(:checked, :indeterminate, [disabled], [readOnly]) {
         &:hover + span {
             background-color: var(--interactions-neutral-hover-opacity);
         }
@@ -61,8 +61,9 @@
         --background: var(--surface-brand-primary);
     }
 
-    input[type='checkbox']:disabled {
-        pointer-events: none;
+    input[type='checkbox'][disabled],
+    input[type='checkbox'][readOnly] {
+        cursor: not-allowed;
 
         & + span {
             --stroke: var(--stroke-neutral-interactions-disabled-light);
@@ -75,7 +76,7 @@
         }
     }
 
-    input[type='checkbox'][aria-invalid]:not(:disabled) {
+    input[type='checkbox'][aria-invalid]:not([disabled], [readOnly]) {
         &:checked + span,
         &:indeterminate + span {
             --background: var(--status-error);

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

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

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -103,7 +103,7 @@ export function CheckboxGroup({
         >
             {selectAll && (
                 <>
-                    <ToggleOption label={selectAllProps?.label || 'All'}>
+                    <ToggleOption label={selectAllProps?.label || 'All'} readOnly={readOnly}>
                         <Checkbox
                             aria-label={selectAllProps?.label || 'All'}
                             checked={!!values.length && values.length === options.length}
@@ -119,7 +119,13 @@ export function CheckboxGroup({
                 </>
             )}
             {options.map(({ label, description, value, disabled }) => (
-                <ToggleOption description={description} disabled={disabled || disabledGroup} key={value} label={label}>
+                <ToggleOption
+                    description={description}
+                    disabled={disabled || disabledGroup}
+                    key={value}
+                    label={label}
+                    readOnly={readOnly}
+                >
                     <Checkbox
                         aria-label={label}
                         checked={values.includes(value)}

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -1,49 +1,57 @@
 import { CheckboxGroupProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
-    presets: [
-        {
-            label: 'With Descriptions',
-            propState: {
-                disabled: false,
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    {
-                        label: 'Option 2',
-                        value: 'option2',
-                        description: 'Description for option 2 (disabled)',
-                        disabled: true,
-                    },
-                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
-                ],
-            },
+export const presets: Preset<CheckboxGroupProps>[] = [
+    {
+        label: 'With Descriptions',
+        propState: {
+            disabled: false,
+            options: [
+                { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                {
+                    label: 'Option 2',
+                    value: 'option2',
+                    description: 'Description for option 2 (disabled)',
+                    disabled: true,
+                },
+                { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-        {
-            label: 'Group disabled',
-            propState: {
-                disabled: true,
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    {
-                        label: 'Option 2',
-                        value: 'option2',
-                        description: 'Description for option 2 (disabled)',
-                    },
-                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
-                ],
-            },
+    },
+    {
+        label: 'Group disabled',
+        propState: {
+            disabled: true,
+            options: [
+                { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                {
+                    label: 'Option 2',
+                    value: 'option2',
+                    description: 'Description for option 2 (disabled)',
+                },
+                { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-        {
-            label: 'Long labels',
-            propState: {
-                disabled: false,
-                options: [
-                    { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
-                    { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
-                    { label: 'This is a very long label for option 3', value: 'option3' },
-                ],
-            },
+    },
+    {
+        label: 'Long labels',
+        propState: {
+            disabled: false,
+            options: [
+                { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
+                { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },
+                { label: 'This is a very long label for option 3', value: 'option3' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-    ],
+    },
+];
+
+export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
+    presets,
 };

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

@@ -0,0 +1,24 @@
+import { CheckboxOption } from './CheckboxOption';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <CheckboxOption
+        checked
+        description="This is an example checkbox option."
+        label="Example Checkbox"
+        name="example-checkbox-name"
+        onChange={() => {}}
+        value="example-checkbox-value"
+    />
+);
+
+describe('CheckboxOption', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example Checkbox')).toBeInTheDocument();
+    });
+});

package/src/components/CheckboxOption/CheckboxOption.tsx

@@ -31,13 +31,25 @@ export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
  * @name CheckboxOption
  * @phase UXReview
  */
-export function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }: CheckboxOptionProps) {
+export function CheckboxOption({
+    label: labelProp,
+    description,
+    disabled,
+    readOnly,
+    ...checkboxProps
+}: CheckboxOptionProps) {
     const label = labelProp || description;
     const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
     return (
         label && (
-            <ToggleOption data-bspk="checkbox-option" description={description} disabled={disabled} label={label}>
-                <Checkbox {...checkboxProps} aria-label={ariaLabel} />
+            <ToggleOption
+                data-bspk="checkbox-option"
+                description={description}
+                disabled={disabled}
+                label={label}
+                readOnly={readOnly}
+            >
+                <Checkbox {...checkboxProps} aria-label={ariaLabel} disabled={disabled} readOnly={readOnly} />
             </ToggleOption>
         )
     );

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

@@ -0,0 +1,16 @@
+import { ChipAssist } from './ChipAssist';
+import { presets } from './ChipAssistExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ChipAssist (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ChipAssist {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<ChipAssist {...presets[0].propState} />);
+
+        expect(getByText('chip option')).toBeInTheDocument();
+    });
+});

package/src/components/ChipAssist/ChipAssistExample.tsx

@@ -1,32 +1,34 @@
 import { ChipAssistProps } from '.';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<ChipAssistProps>[] = [
+    {
+        label: 'Basic ChipAssist',
+        propState: {
+            label: 'chip option',
+        },
+    },
+    {
+        label: 'with leadingIcon',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
+        },
+    },
+    {
+        label: 'disabled',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
+            disabled: true,
+        },
+    },
+];
 
 export const ChipAssistExample: ComponentExampleFn<ChipAssistProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
         return <Component {...props} onClick={() => action('ChipAssist clicked!')} />;
     },
-    presets: [
-        {
-            label: 'Basic ChipAssist',
-            propState: {
-                label: 'chip option',
-            },
-        },
-        {
-            label: 'with leadingIcon',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-            },
-        },
-        {
-            label: 'disabled',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-                disabled: true,
-            },
-        },
-    ],
+    presets,
 });