@bspk/ui 1.2.0 → 1.3.1

package/src/components/Popover/PopoverExample.tsx

@@ -10,7 +10,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
             <>
                 <Txt style={{ marginBottom: `var(--spacing-sizing-02)` }}>Click button for a Popover</Txt>
                 <Component {...props}>
-                    <Button label={`${props.placement}`} variant="secondary" />
+                    {(triggerProps) => <Button label={`${props.placement}`} variant="secondary" {...triggerProps} />}
                 </Component>
             </>
         );
@@ -19,15 +19,20 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
         {
             label: 'With CallToAction',
             propState: {
+                header: 'With CallToAction',
+                content: 'With CallToAction body',
                 callToAction: {
                     label: 'CTA Button',
                     onClick: () => action('Call to action clicked!'),
                 },
+                children: () => <></>,
             },
         },
         {
             label: 'With both CallToActions',
             propState: {
+                header: 'With both CallToActions',
+                content: 'With both CallToActions body',
                 callToAction: {
                     label: 'Primary',
                     onClick: () => action('Primary call to action clicked!'),
@@ -36,6 +41,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
                     label: 'Secondary',
                     onClick: () => action('Secondary call to action clicked!'),
                 },
+                children: () => <></>,
             },
         },
     ],

package/src/components/Popover/popover.scss

@@ -16,19 +16,9 @@
         margin-bottom: var(--spacing-sizing-02);
         gap: var(--spacing-sizing-04);
 
-        button {
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 0;
-            color: var(--foreground-neutral-on-surface-variant-01);
-            height: var(--spacing-sizing-06);
-            width: var(--spacing-sizing-06);
-
-            svg {
-                width: var(--spacing-sizing-06);
-                height: var(--spacing-sizing-06);
-            }
+        [data-bspk='button'][data-close] {
+            margin-right: calc(var(--spacing-sizing-02) * -1);
+            margin-top: calc(var(--spacing-sizing-02) * -1);
         }
     }
 

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

@@ -0,0 +1,15 @@
+import { Portal } from './Portal';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Portal>Child content</Portal>;
+
+describe('Portal (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Child content')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,15 @@
+import { ProgressBar } from './ProgressBar';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <ProgressBar completion={50} label="Example label" />;
+
+describe('ProgressBar (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,8 +1,7 @@
+import './progress-bar.scss';
 import { useId } from '-/hooks/useId';
 import { cssWithVars } from '-/utils/cwv';
 
-import './progress-bar.scss';
-
 export type ProgressBarProps = {
     /**
      * The size of the progressbar.

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

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

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,10 +1,9 @@
+import './progress-circle.scss';
 import { ProgressCircleSVG } from './ProgressCircleSVG';
 import { Txt } from '-/components/Txt';
 import { useId } from '-/hooks/useId';
 import { TxtVariant } from '-/utils/txtVariants';
 
-import './progress-circle.scss';
-
 export type ProgressCircleProps = {
     /** The label of the progress circle. */
     label: string;

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

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

package/src/components/ProgressionStepper/ProgressionStepper.tsx

@@ -1,9 +1,7 @@
+import './progression-stepper.scss';
 import { SvgCheck } from '@bspk/icons/Check';
-
 import { ElementProps } from '-/types/common';
 
-import './progression-stepper.scss';
-
 /** A progress stepper item is a single step in the progress bar. */
 export type ProgressionStepperItem = {
     /**
@@ -85,7 +83,7 @@ export function ProgressionStepper({
                 <label>
                     <span data-title>{steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name}</span>
                     <span data-subtitle>
-                        {currentStep >= steps.length ? (
+                        {currentStep > steps.length ? (
                             'Completed'
                         ) : (
                             <>

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -1,53 +1,55 @@
 import { ProgressionStepperProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps> = {
-    containerStyle: { width: '100%' },
-    presets: [
-        {
-            label: 'Horizontal',
-            propState: {
-                variant: 'horizontal',
-                currentStep: 2,
-                steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
-            },
+export const presets: Preset<ProgressionStepperProps>[] = [
+    {
+        label: 'Horizontal',
+        propState: {
+            variant: 'horizontal',
+            currentStep: 2,
+            steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
         },
-        {
-            label: 'Vertical',
-            propState: {
-                variant: 'vertical',
-                currentStep: 2,
-                steps: [
-                    {
-                        name: 'Name of step 1',
-                        subtext: `Subtext of step 1`,
-                    },
-                    {
-                        name: 'Name of step 2',
-                        subtext: `Subtext of step 2`,
-                    },
-                    {
-                        name: 'Name of step 3',
-                        subtext: `Subtext of step 3`,
-                    },
-                ],
-            },
+    },
+    {
+        label: 'Vertical',
+        propState: {
+            variant: 'vertical',
+            currentStep: 2,
+            steps: [
+                {
+                    name: 'Name of step 1',
+                    subtext: `Subtext of step 1`,
+                },
+                {
+                    name: 'Name of step 2',
+                    subtext: `Subtext of step 2`,
+                },
+                {
+                    name: 'Name of step 3',
+                    subtext: `Subtext of step 3`,
+                },
+            ],
         },
-        {
-            label: 'Widget',
-            propState: {
-                variant: 'widget',
-                currentStep: 3,
-                steps: [
-                    { name: 'Name of step 1' },
-                    { name: 'Name of step 2' },
-                    { name: 'Name of step 3' },
-                    { name: 'Name of step 4' },
-                    { name: 'Name of step 5' },
-                    { name: 'Name of step 6' },
-                    { name: 'Name of step 7' },
-                ],
-            },
+    },
+    {
+        label: 'Widget',
+        propState: {
+            variant: 'widget',
+            currentStep: 3,
+            steps: [
+                { name: 'Name of step 1' },
+                { name: 'Name of step 2' },
+                { name: 'Name of step 3' },
+                { name: 'Name of step 4' },
+                { name: 'Name of step 5' },
+                { name: 'Name of step 6' },
+                { name: 'Name of step 7' },
+            ],
         },
-    ],
+    },
+];
+
+export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps> = {
+    containerStyle: { width: '100%' },
+    presets,
 };

package/src/components/ProgressionStepper/progression-stepper.scss

@@ -166,9 +166,23 @@
             min-height: var(--spacing-sizing-09);
 
             li {
+                flex-grow: 1;
+
                 [data-line-circle] {
-                    [data-line] {
-                        width: 10px;
+                    [data-line='after'] {
+                        flex-grow: 1;
+                    }
+
+                    [data-line='before'] {
+                        display: none;
+                    }
+                }
+
+                &:last-of-type {
+                    flex-grow: 0;
+
+                    [data-line='after'] {
+                        display: none;
                     }
                 }
 

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

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

package/src/components/ProgressionStepperBar/ProgressionStepperBar.tsx

@@ -1,6 +1,5 @@
-import { cssWithVars } from '-/utils/cwv';
-
 import './progression-stepper-bar.scss';
+import { cssWithVars } from '-/utils/cwv';
 
 export type ProgressionStepperBarProps = {
     /**
@@ -42,18 +41,24 @@ export function ProgressionStepperBar({
     stepCount,
     stepCompleted: stepCompletedProp = 0,
     size = 'large',
+    ...containerProps
 }: ProgressionStepperBarProps) {
     const stepCompleted = Math.min(stepCompletedProp, stepCount);
 
     return (
-        <div data-bspk="progression-stepper-bar" data-size={size} style={cssWithVars({ '--steps': stepCount })}>
+        <div
+            data-bspk="progression-stepper-bar"
+            data-size={size}
+            style={cssWithVars({ '--steps': stepCount })}
+            {...containerProps}
+        >
             <div data-steps>
                 {Array.from({ length: stepCount }, (_, i) => (
                     <div data-complete={i < stepCompleted || undefined} data-step={i} key={i} />
                 ))}
             </div>
             <span data-label>
-                {stepCompleted} of {stepCount} steps completed.
+                {String(stepCompleted)} of {String(stepCount)} steps completed.
             </span>
         </div>
     );

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

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

package/src/components/Radio/Radio.tsx

@@ -1,9 +1,7 @@
+import './radio.scss';
 import { ChangeEvent } from 'react';
-
 import { ElementProps, CommonProps } from '-/types/common';
 
-import './radio.scss';
-
 export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
     Required<CommonProps<'value'>> & {
         /**

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

@@ -0,0 +1,32 @@
+import { RadioGroup } from './RadioGroup';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <RadioGroup
+        label="Example label"
+        name="Example name"
+        onChange={() => {}}
+        options={[
+            {
+                value: '1',
+                label: 'Option 1',
+                name: 'Option 1',
+                description: 'Description here',
+            },
+            { value: '2', label: 'Option 2', name: 'Option 2' },
+            { value: '3', label: 'Option 3', name: 'Option 3' },
+        ]}
+        value="2"
+    />
+);
+
+describe('RadioGroup (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,9 +1,8 @@
+import './radio-group.scss';
 import { RadioOption, RadioOptionProps } from '-/components/RadioOption';
 import { useId } from '-/hooks/useId';
 import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 
-import './radio-group.scss';
-
 export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> &
     Required<CommonProps<'value'>>;
 
@@ -117,7 +116,7 @@ export function RadioGroup({
             role="radiogroup"
         >
             {!hideLabelProp && <label id={`${id}-label`}>{groupLabel}</label>}
-            <div role="radiogroup">
+            <div role="presentation">
                 {options.map(({ label, description, disabled, value }, index) => {
                     return (
                         <RadioOption

package/src/components/RadioGroup/RadioGroupExample.tsx

@@ -3,7 +3,9 @@ import { CheckboxGroupExample } from '-/components/CheckboxGroup/CheckboxGroupEx
 import { RadioExample } from '-/components/Radio/RadioExample';
 import { ComponentExample } from '-/utils/demo';
 
+export const presets = (CheckboxGroupExample.presets as ComponentExample<RadioGroupProps>['presets']) || [];
+
 export const RadioGroupExample: ComponentExample<RadioGroupProps> = {
     render: RadioExample.render,
-    presets: CheckboxGroupExample.presets as ComponentExample<RadioGroupProps>['presets'],
+    presets,
 };

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

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

package/src/components/RadioOption/RadioOption.tsx

@@ -17,7 +17,7 @@ export function RadioOption({ label: labelProp, description, disabled, ...radioP
     return (
         label && (
             <ToggleOption data-bspk="radio-option" description={description} disabled={disabled} label={label}>
-                <Radio {...radioProps} aria-label={ariaLabel} />
+                <Radio {...radioProps} aria-label={ariaLabel} disabled={disabled} />
             </ToggleOption>
         )
     );

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

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

package/src/components/Rating/Rating.tsx

@@ -1,18 +1,8 @@
+import './rating.scss';
 import { SvgStarFill } from '@bspk/icons/StarFill';
 import { ElementType } from 'react';
 
-import './rating.scss';
-
-const MAX_STARS = 5;
-
 export type RatingSize = 'large' | 'medium' | 'small';
-
-const iconWidths: Record<RatingSize, number> = {
-    large: 32,
-    medium: 24,
-    small: 16,
-};
-
 export type RatingProps = {
     /**
      * The value of the rating between 0 and 5.
@@ -35,6 +25,13 @@ export type RatingProps = {
     size?: RatingSize;
 };
 
+const MAX_STARS = 5;
+const iconWidths: Record<RatingSize, number> = {
+    large: 32,
+    medium: 24,
+    small: 16,
+};
+
 /**
  * Descriptive and interactive controls that allow customers to indicate their feelings about an experience or product
  * on a scale of 1 to 5. Half sizes are displayed when interactive is false.
@@ -54,7 +51,7 @@ export function Rating({ size = 'medium', value, onChange }: RatingProps) {
 
     return (
         <div
-            aria-label={onChange ? 'Select a star rating' : `${value} out of ${MAX_STARS} stars`}
+            aria-label={onChange ? 'Select a star rating' : value ? `${value} out of ${MAX_STARS} stars` : 'Rating'}
             data-bspk="rating"
             data-size={size}
             role={onChange ? 'radiogroup' : 'img'}

package/src/components/Rating/RatingExample.tsx

@@ -1,18 +1,20 @@
 import { RatingProps } from './Rating';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<RatingProps>[] = [
+    {
+        label: 'Non interactive',
+        propState: {
+            onChange: undefined,
+        },
+    },
+];
 
 export const RatingExample: ComponentExampleFn<RatingProps> = () => {
     return {
         render: ({ props, Component }) => {
             return <Component {...props} />;
         },
-        presets: [
-            {
-                label: 'Non interactive',
-                propState: {
-                    onChange: undefined,
-                },
-            },
-        ],
+        presets,
     };
 };

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

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

package/src/components/Scrim/Scrim.tsx

@@ -1,6 +1,5 @@
-import { CommonProps } from '-/types/common';
-
 import './scrim.scss';
+import { CommonProps } from '-/types/common';
 
 export type ScrimProps = CommonProps<'owner'> & {
     /**
@@ -27,8 +26,16 @@ export type ScrimProps = CommonProps<'owner'> & {
  *
  * @phase Utility
  */
-export function Scrim({ visible = true, ...props }: ScrimProps) {
-    return <div {...props} aria-hidden="true" data-bspk="scrim" data-hidden={!visible || undefined} />;
+export function Scrim({ visible = true, owner, ...props }: ScrimProps) {
+    return (
+        <div
+            {...props}
+            aria-hidden="true"
+            data-bspk="scrim"
+            data-bspk-owner={owner || undefined}
+            data-hidden={!visible || undefined}
+        />
+    );
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Scrim/scrim.scss

@@ -14,10 +14,6 @@
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
 
-    &[data-hidden] {
-        display: none;
-    }
-
     @keyframes fade-in {
         0% {
             opacity: 0;