@bspk/ui 1.1.34 → 1.3.0

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -1,28 +1,57 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { CheckboxGroupProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
-    presets: [
-        {
-            label: 'With Descriptions',
-            propState: {
-                options: [
-                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    { label: 'Option 2', value: 'option2', description: 'Description for option 2' },
-                    { 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' },
+            ],
+            ['aria-label']: 'Checkbox group',
+            name: 'Checkbox group',
         },
-        {
-            label: 'Long labels',
-            propState: {
-                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

@@ -1,17 +1,7 @@
-import { InvalidPropsLibrary } from '-';
 import { CheckboxProps, Checkbox } from '-/components/Checkbox';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
 
-export type CheckboxOptionProps = InvalidPropsLibrary &
-    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'> & {
-        /**
-         * The function to call when the checkbox is checked or unchecked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-    };
+export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -39,21 +29,18 @@ export type CheckboxOptionProps = InvalidPropsLibrary &
  *     }
  *
  * @name CheckboxOption
- * @phase DesignReview
+ * @phase UXReview
  */
-function CheckboxOption({ label: labelProp, description, ...checkboxProps }: CheckboxOptionProps) {
+export function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }: CheckboxOptionProps) {
     const label = labelProp || description;
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
     return (
         label && (
-            <ToggleOption data-bspk="checkbox-option" description={description} label={label}>
-                <Checkbox {...checkboxProps} aria-label={label} />
+            <ToggleOption data-bspk="checkbox-option" description={description} disabled={disabled} label={label}>
+                <Checkbox {...checkboxProps} aria-label={ariaLabel} />
             </ToggleOption>
         )
     );
 }
 
-CheckboxOption.bspkName = 'CheckboxOption';
-
-export { CheckboxOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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/ChipAssist.tsx

@@ -20,14 +20,18 @@ export type ChipAssistProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lea
  *     }
  *
  * @name ChipAssist
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps) {
-    return <ChipUtility disabled={disabled} label={label} leadingIcon={leadingIcon} onClick={onClick} />;
+export function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps) {
+    return (
+        <ChipUtility
+            data-bspk="chip-assist"
+            disabled={disabled}
+            label={label}
+            leadingIcon={leadingIcon}
+            onClick={onClick}
+        />
+    );
 }
 
-ChipAssist.bspkName = 'ChipAssist';
-
-export { ChipAssist };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipAssist/ChipAssistExample.tsx

@@ -1,33 +1,34 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { ChipAssistProps } from '.';
+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,
 });

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

@@ -0,0 +1,15 @@
+import { ChipFilter } from './ChipFilter';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <ChipFilter label="FilterChip" onClick={() => {}} trailingIcon="SvgChevronRight" />;
+
+describe('ChipFilter', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('FilterChip')).toBeInTheDocument();
+    });
+});

package/src/components/ChipFilter/ChipFilter.tsx

@@ -41,9 +41,16 @@ export type ChipFilterProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lea
  *     }
  *
  * @name ChipFilter
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trailingBadgeCount }: ChipFilterProps) {
+export function ChipFilter({
+    disabled,
+    label,
+    leadingIcon,
+    onClick,
+    trailingIcon,
+    trailingBadgeCount,
+}: ChipFilterProps) {
     const trailingIconComponent =
         trailingIcon === 'SvgChevronRight' ? (
             <SvgChevronRight />
@@ -54,6 +61,7 @@ function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trail
         ) : undefined;
     return (
         <ChipUtility
+            data-bspk="chip-filter"
             disabled={disabled}
             label={label}
             leadingIcon={leadingIcon}
@@ -64,8 +72,4 @@ function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trail
     );
 }
 
-ChipFilter.bspkName = 'ChipFilter';
-
-export { ChipFilter };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipFilter/ChipFilterExample.tsx

@@ -1,7 +1,6 @@
+import { ChipFilterProps } from '.';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { ChipFilterProps } from './ChipFilter';
-
 export const ChipFilterExample: ComponentExampleFn<ChipFilterProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
@@ -12,6 +11,7 @@ export const ChipFilterExample: ComponentExampleFn<ChipFilterProps> = ({ action
             label: 'basic ChipFilter',
             propState: {
                 label: 'chip option',
+                trailingIcon: undefined,
             },
         },
         {
@@ -47,6 +47,7 @@ export const ChipFilterExample: ComponentExampleFn<ChipFilterProps> = ({ action
             propState: {
                 label: 'chip option',
                 trailingBadgeCount: 3,
+                trailingIcon: undefined,
             },
         },
         {
@@ -55,6 +56,7 @@ export const ChipFilterExample: ComponentExampleFn<ChipFilterProps> = ({ action
                 label: 'chip option',
                 trailingBadgeCount: 3,
                 disabled: true,
+                trailingIcon: undefined,
             },
         },
     ],

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

@@ -0,0 +1,32 @@
+import { ChipGroup } from './ChipGroup';
+import { presets } from './ChipGroupExample';
+import { ChipSuggestion } from '-/components/ChipSuggestion';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ChipGroup (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(
+                <ChipGroup {...preset.propState}>
+                    <ChipSuggestion label="suggestion 1" onClick={() => {}} />
+                    <ChipSuggestion label="suggestion 2" onClick={() => {}} />
+                    <ChipSuggestion label="suggestion 3" onClick={() => {}} />
+                </ChipGroup>,
+            ),
+        );
+    });
+
+    it('renders', () => {
+        const { getByText } = render(
+            <ChipGroup {...presets[1].propState}>
+                <ChipSuggestion label="suggestion 1" onClick={() => {}} />
+                <ChipSuggestion label="suggestion 2" onClick={() => {}} />
+                <ChipSuggestion label="suggestion 3" onClick={() => {}} />
+            </ChipGroup>,
+        );
+
+        expect(getByText('suggestion 1')).toBeInTheDocument();
+    });
+});

package/src/components/ChipGroup/ChipGroup.tsx

@@ -2,7 +2,7 @@ import './chip-group.scss';
 
 import { ReactNode } from 'react';
 
-import { ChipUtilityProps } from '../ChipUtility';
+import { ChipUtilityProps } from '-/components/ChipUtility';
 
 export type ChipGroupItem = Pick<
     ChipUtilityProps,
@@ -20,7 +20,7 @@ export type ChipGroupProps = {
     children?: ReactNode;
 };
 /**
- * Component description.
+ * A group of chips that can be used to display a set of related items or actions.
  *
  * @example
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
@@ -36,9 +36,9 @@ export type ChipGroupProps = {
  *     }
  *
  * @name ChipGroup
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function ChipGroup({ children, wrap = true }: ChipGroupProps) {
+export function ChipGroup({ children, wrap = true }: ChipGroupProps) {
     return (
         <div data-bspk="chip-group" data-wrap={wrap || undefined}>
             {children}
@@ -46,8 +46,4 @@ function ChipGroup({ children, wrap = true }: ChipGroupProps) {
     );
 }
 
-ChipGroup.bspkName = 'ChipGroup';
-
-export { ChipGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,24 +7,25 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
-import { ComponentExampleFn } from '-/utils/demo';
+import { ChipAssist } from '-/components/ChipAssist';
+import { ChipFilter } from '-/components/ChipFilter';
+import { ChipGroup, ChipGroupProps } from '-/components/ChipGroup';
+import { ChipInput } from '-/components/ChipInput';
+import { ChipSuggestion } from '-/components/ChipSuggestion';
+import { ChipUtility } from '-/components/ChipUtility';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 
-import { ChipAssist } from '../ChipAssist';
-import { ChipFilter } from '../ChipFilter';
-import { ChipGroup, ChipGroupProps } from '../ChipGroup';
-import { ChipInput } from '../ChipInput';
-import { ChipSuggestion } from '../ChipSuggestion';
-import { ChipUtility } from '../ChipUtility';
+export const presets: Preset<ChipGroupProps>[] = [
+    { label: 'wrap', propState: { wrap: true } },
+    { label: 'scroll', propState: { wrap: false } },
+    { label: 'suggestion', propState: { wrap: true } },
+    { label: 'assist', propState: { wrap: true } },
+    { label: 'input', propState: { wrap: true } },
+    { label: 'filter', propState: { wrap: true } },
+];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
-    presets: [
-        { label: 'wrap', propState: { wrap: true } },
-        { label: 'scroll', propState: { wrap: false } },
-        { label: 'suggestion', propState: { wrap: true } },
-        { label: 'assist', propState: { wrap: true } },
-        { label: 'input', propState: { wrap: true } },
-        { label: 'filter', propState: { wrap: true } },
-    ],
+    presets,
     // containerStyle: { width: '100%' },
     render: ({ props, preset }) => {
         if (!preset) return null;

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

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

package/src/components/ChipInput/ChipInput.tsx

@@ -29,11 +29,12 @@ export type ChipInputProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lead
  *     }
  *
  * @name ChipInput
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }: ChipInputProps) {
+export function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }: ChipInputProps) {
     return (
         <ChipUtility
+            data-bspk="chip-input"
             disabled={disabled}
             label={label}
             leadingIcon={leadingIcon}
@@ -43,8 +44,4 @@ function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }:
     );
 }
 
-ChipInput.bspkName = 'ChipInput';
-
-export { ChipInput };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipInput/ChipInputExample.tsx

@@ -1,48 +1,49 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { ChipInputProps } from '.';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 
-export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props, Component }) => {
-        return <Component {...props} onClick={() => action('ChipInput clicked!')} />;
-    },
-    presets: [
-        {
-            label: 'Basic ChipInput',
-            propState: {
-                label: 'chip option',
-            },
+export const presets: Preset<ChipInputProps>[] = [
+    {
+        label: 'Basic ChipInput',
+        propState: {
+            label: 'chip option',
         },
-        {
-            label: 'with leadingIcon',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-            },
+    },
+    {
+        label: 'with leadingIcon',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
         },
-        {
-            label: 'with removable = false',
-            propState: {
-                label: 'chip option',
-                removable: false,
-            },
+    },
+    {
+        label: 'with removable = false',
+        propState: {
+            label: 'chip option',
+            removable: false,
         },
-        {
-            label: 'with removable = false and leadingIcon',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-                removable: false,
-            },
+    },
+    {
+        label: 'with removable = false and leadingIcon',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
+            removable: false,
         },
-        {
-            label: 'disabled',
-            propState: {
-                label: 'chip option',
-                leadingIcon: 'SignLanguage',
-                disabled: true,
-            },
+    },
+    {
+        label: 'disabled',
+        propState: {
+            label: 'chip option',
+            leadingIcon: 'SignLanguage',
+            disabled: true,
         },
-    ],
+    },
+];
+
+export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return <Component {...props} onClick={() => action('ChipInput clicked!')} />;
+    },
+    presets,
 });

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

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

package/src/components/ChipSuggestion/ChipSuggestion.tsx

@@ -13,14 +13,10 @@ export type ChipSuggestionProps = Pick<ChipUtilityProps, 'disabled' | 'label' |
  *     }
  *
  * @name ChipSuggestion
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps) {
-    return <ChipUtility disabled={disabled} label={label} onClick={onClick} />;
+export function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps) {
+    return <ChipUtility data-bspk="chip-suggestion" disabled={disabled} label={label} onClick={onClick} />;
 }
 
-ChipSuggestion.bspkName = 'ChipSuggestion';
-
-export { ChipSuggestion };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */