@bspk/ui 1.1.34 → 1.3.0

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,16 +1,16 @@
-import { ChangeEvent, useEffect, useRef } from 'react';
-
-import { CommonProps, ElementProps, InvalidPropsLibrary } from '-';
-
 import './checkbox.scss';
+import { ChangeEvent, useEffect, useRef } from 'react';
+import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
 
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
-    Required<CommonProps<'value'>> & {
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
+    FormFieldControlProps &
+    RequiredCommonProps<'value'> & {
         /**
          * If the checkbox is partially checked or
          * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
          *
+         * This will override the `checked` prop.
+         *
          * @default false
          */
         indeterminate?: boolean;
@@ -57,15 +57,13 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
  * @element
  *
  * @name Checkbox
- * @phase DesignReview
+ * @phase UXReview
  */
-function Checkbox({
+export function Checkbox({
     checked: checkedProp = false,
     indeterminate: indeterminateProp,
     invalid,
     disabled,
-    errorMessage,
-
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
     const indeterminate = !!indeterminateProp;
@@ -85,9 +83,11 @@ function Checkbox({
         >
             <input
                 {...props}
-                aria-errormessage={errorMessage || undefined}
+                aria-describedby={props['aria-describedby'] || undefined}
+                aria-errormessage={props['aria-errormessage'] || undefined}
                 aria-invalid={invalid || undefined}
                 checked={checked}
+                data-indeterminate={indeterminate || undefined}
                 disabled={disabled || undefined}
                 onChange={(event) => props.onChange(!!event.target.checked, event)}
                 ref={(node) => {
@@ -98,25 +98,25 @@ function Checkbox({
                 type="checkbox"
             />
             <span aria-hidden>
-                <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
-                        fill="currentColor"
-                    />
-                </svg>
-                <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
-                        fill="currentColor"
-                    />
-                </svg>
+                {checked && (
+                    <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )}
+                {indeterminate && (
+                    <svg data-indeterminate fill="none" viewBox="0 0 12 4" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z"
+                            fill="currentColor"
+                        />
+                    </svg>
+                )}
             </span>
         </span>
     );
 }
 
-Checkbox.bspkName = 'Checkbox';
-
-export { Checkbox };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Checkbox/checkbox.scss

@@ -36,18 +36,16 @@
 
         svg[data-checked] {
             width: 14px;
-            display: none;
         }
 
         svg[data-indeterminate] {
             width: 12px;
-            display: none;
         }
 
         color: var(--color);
     }
 
-    input[type='checkbox']:not(:checked, :indeterminate, :disabled) {
+    input[type='checkbox']:not(:checked, :indeterminate, [disabled]) {
         &:hover + span {
             background-color: var(--interactions-neutral-hover-opacity);
         }
@@ -57,19 +55,14 @@
         }
     }
 
-    input[type='checkbox']:checked + span svg[data-checked],
-    input[type='checkbox']:indeterminate + span svg[data-indeterminate] {
-        display: block;
-    }
-
     input[type='checkbox']:checked + span,
     input[type='checkbox']:indeterminate + span {
         --stroke: var(--stroke-brand-primary);
         --background: var(--surface-brand-primary);
     }
 
-    input[type='checkbox']:disabled {
-        pointer-events: none;
+    input[type='checkbox'][disabled] {
+        cursor: not-allowed;
 
         & + span {
             --stroke: var(--stroke-neutral-interactions-disabled-light);
@@ -82,7 +75,7 @@
         }
     }
 
-    input[type='checkbox'][aria-invalid]:not(:disabled) {
+    input[type='checkbox'][aria-invalid]:not([disabled]) {
         &: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

@@ -1,54 +1,56 @@
-import { ElementProps, CommonProps } from '-';
 import { Checkbox } from '-/components/Checkbox';
 import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'> &
+    Required<CommonProps<'value'>>;
 
-export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & {
-    /**
-     * The function to call when the checkboxes are changed.
-     *
-     * @example
-     *     (values) => setState({ values });
-     *
-     * @required
-     */
-    onChange: (values: string[]) => void;
-    /**
-     * The input control name of the checkboxes.
-     *
-     * @required
-     */
-    name: string;
-    /**
-     * The options for the checkboxes.
-     *
-     * @example
-     *     [
-     *         { label: 'Option 1', value: 'option1' },
-     *         { label: 'Option 2', value: 'option2' },
-     *         { label: 'Option 3', value: 'option3' },
-     *     ];
-     *
-     * @type Array<CheckboxGroupOption>
-     * @required
-     */
-    options: CheckboxGroupOption[];
-    /**
-     * The values of the checked checkboxes.
-     *
-     * @type Array<string>
-     */
-    values?: CheckboxGroupProps['options'][number]['value'][];
-    /**
-     * Whether to show a select all checkbox at the top of the list.
-     *
-     * @default false
-     */
-    selectAll?: boolean;
-    /** The props for the select all checkbox. */
-    selectAllProps?: CheckboxGroupOption;
-};
+export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> &
+    FormFieldControlProps & {
+        /**
+         * The function to call when the checkboxes are changed.
+         *
+         * @example
+         *     (values) => setState({ values });
+         *
+         * @required
+         */
+        onChange: (values: string[]) => void;
+        /**
+         * The input control name of the checkboxes.
+         *
+         * @required
+         */
+        name: string;
+        /**
+         * The options for the checkboxes.
+         *
+         * @example
+         *     [
+         *         { label: 'Option 1', value: 'option1' },
+         *         { label: 'Option 2', value: 'option2' },
+         *         { label: 'Option 3', value: 'option3' },
+         *     ];
+         *
+         * @type Array<CheckboxGroupOption>
+         * @required
+         */
+        options: CheckboxGroupOption[];
+        /**
+         * The values of the checked checkboxes.
+         *
+         * @type Array<string>
+         */
+        values?: CheckboxGroupProps['options'][number]['value'][];
+        /**
+         * Whether to show a select all checkbox at the top of the list.
+         *
+         * @default false
+         */
+        selectAll?: boolean;
+        /** The props for the select all checkbox. */
+        selectAllProps?: CheckboxGroupOption;
+    };
 
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
@@ -77,28 +79,36 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  *     }
  *
  * @name CheckboxGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function CheckboxGroup({
+export function CheckboxGroup({
     onChange,
     options = [],
     name,
     values = [],
     selectAll,
     selectAllProps,
-    disabled,
+    disabled: disabledGroup = false,
     readOnly,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<CheckboxGroupProps, 'div'>) {
     return (
-        <div {...props} data-bspk="checkbox-group" role="group">
+        <div
+            {...props}
+            aria-describedby={ariaErrorMessage || ariaDescribedBy || undefined}
+            data-bspk="checkbox-group"
+            role="group"
+        >
             {selectAll && (
                 <>
                     <ToggleOption label={selectAllProps?.label || 'All'}>
                         <Checkbox
                             aria-label={selectAllProps?.label || 'All'}
                             checked={!!values.length && values.length === options.length}
-                            disabled={disabled}
+                            data-testid="selectAll-Checkbox"
+                            disabled={disabledGroup}
                             indeterminate={!!values.length && values.length < options.length}
                             name={name}
                             onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
@@ -108,12 +118,12 @@ function CheckboxGroup({
                     </ToggleOption>
                 </>
             )}
-            {options.map(({ label, description, value }) => (
-                <ToggleOption description={description} key={value} label={label}>
+            {options.map(({ label, description, value, disabled }) => (
+                <ToggleOption description={description} disabled={disabled || disabledGroup} key={value} label={label}>
                     <Checkbox
                         aria-label={label}
                         checked={values.includes(value)}
-                        disabled={disabled}
+                        disabled={disabled || disabledGroup}
                         name={name}
                         onChange={(checked) => {
                             onChange(checked ? [...values, value] : values.filter((v) => v !== value));
@@ -127,8 +137,4 @@ function CheckboxGroup({
     );
 }
 
-CheckboxGroup.bspkName = 'CheckboxGroup';
-
-export { CheckboxGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */