@bspk/ui 1.1.34 → 1.3.0

package/src/components/ProgressCircle/ProgressCircleSVG.tsx

@@ -0,0 +1,38 @@
+import { useId } from '-/hooks/useId';
+
+export const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+
+    return (
+        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
+            <defs>
+                <linearGradient id={`${id}spinner-secondHalf`}>
+                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+                <linearGradient id={`${id}spinner-firstHalf`}>
+                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+            </defs>
+            <g strokeWidth={strokeWidth * 2}>
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
+                    stroke={`url(#${id}spinner-secondHalf)`}
+                />
+                <path
+                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
+                    stroke={`url(#${id}spinner-firstHalf)`}
+                />
+                {/* 1deg extra path to have the round end cap */}
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                />
+            </g>
+        </svg>
+    );
+};

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,7 +1,6 @@
-import { SvgCheck } from '@bspk/icons/Check';
-
-import { ElementProps } from '-';
 import './progression-stepper.scss';
+import { SvgCheck } from '@bspk/icons/Check';
+import { ElementProps } from '-/types/common';
 
 /** A progress stepper item is a single step in the progress bar. */
 export type ProgressionStepperItem = {
@@ -31,11 +30,7 @@ export type ProgressionStepperProps = {
      * The steps to display in the progress bar.
      *
      * @example
-     *     [
-     *         { name: '[Name of step to proceed forward 1]' },
-     *         { name: '[Name of step to proceed forward 2]' },
-     *         { name: '[Name of step to proceed forward 3]' },
-     *     ];
+     *     [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }];
      *
      * @type Array<ProgressionStepperItem>
      * @required
@@ -73,9 +68,9 @@ export type ProgressionStepperProps = {
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-function ProgressionStepper({
+export function ProgressionStepper({
     steps = [],
     currentStep: currentStepProp = 0,
     variant = 'horizontal',
@@ -88,7 +83,7 @@ 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'
                         ) : (
                             <>
@@ -99,19 +94,27 @@ function ProgressionStepper({
                 </label>
             )}
             <ol>
-                {steps.flatMap(({ name, subtext }, index) => {
+                {steps.map(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status: 'complete' | 'current' | 'incomplete' = 'incomplete';
-                    if (stepNum < currentStep) status = 'complete';
-                    else if (stepNum === currentStep) status = 'current';
+                    if (currentStep > stepNum) status = 'complete';
+                    else if (currentStep === stepNum) status = 'current';
 
                     return (
-                        <li data-status={status} data-step={stepNum} key={`step-${index}`}>
-                            <span aria-hidden data-line-circle>
+                        <li
+                            aria-current={status === 'current' ? 'step' : undefined}
+                            data-status={status}
+                            data-step={stepNum}
+                            key={`step-${index}`}
+                        >
+                            <span data-line-circle>
                                 <span data-line="before" />
                                 <span data-circle>
-                                    <span>{stepNum}</span>
-                                    {status === 'complete' && <SvgCheck />}
+                                    {status === 'complete' ? (
+                                        <SvgCheck aria-hidden={true} />
+                                    ) : (
+                                        (variant !== 'widget' || status === 'current') && <span>{stepNum}</span>
+                                    )}
                                 </span>
                                 <span data-line="after" />
                             </span>
@@ -129,8 +132,4 @@ function ProgressionStepper({
     );
 }
 
-ProgressionStepper.bspkName = 'ProgressionStepper';
-
-export { ProgressionStepper };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -1,53 +1,55 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { ProgressionStepperProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const ProgressionStepperExample: ComponentExample<ProgressionStepperProps> = {
-    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: 2,
-                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

@@ -9,6 +9,7 @@
 
     ol {
         display: flex;
+        flex-direction: row;
         width: 100%;
         margin: 0;
         padding: 0;
@@ -20,6 +21,7 @@
             margin: 0;
             padding: 0;
             gap: var(--spacing-sizing-02);
+            flex-grow: 1;
 
             [data-line-circle] {
                 display: flex;
@@ -54,8 +56,19 @@
 
             [data-content] {
                 display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                [data-variant='horizontal'] & {
+                    align-items: center;
+                    justify-content: center;
+                    width: 100%;
+                }
+
                 padding: 0 var(--spacing-sizing-10);
                 font: var(--body-small);
+                text-align: center;
             }
 
             &:first-of-type {

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,5 +1,5 @@
-import { cssWithVars } from '-/utils/cwv';
 import './progression-stepper-bar.scss';
+import { cssWithVars } from '-/utils/cwv';
 
 export type ProgressionStepperBarProps = {
     /**
@@ -35,31 +35,33 @@ export type ProgressionStepperBarProps = {
  * Component description coming soon.
  *
  * @name ProgressionStepperBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressionStepperBar({
+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>
-            <label>
-                {stepCompleted} of {stepCount} steps completed.
-            </label>
+            <span data-label>
+                {String(stepCompleted)} of {String(stepCount)} steps completed.
+            </span>
         </div>
     );
 }
 
-ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
-
-export { ProgressionStepperBar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressionStepperBar/progression-stepper-bar.scss

@@ -31,7 +31,7 @@
         }
     }
 
-    label {
+    [data-label] {
         font: var(--labels-small);
     }
 }

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,11 +1,8 @@
-import { ChangeEvent } from 'react';
-
-import { ElementProps, InvalidPropsLibrary, CommonProps } from '-';
-
 import './radio.scss';
+import { ChangeEvent } from 'react';
+import { ElementProps, CommonProps } from '-/types/common';
 
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
     Required<CommonProps<'value'>> & {
         /**
          * Marks the radio as checked.
@@ -30,15 +27,14 @@ export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
  * @name Radio
  * @phase Utility
  */
-function Radio(props: ElementProps<RadioProps, 'input'>) {
-    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
+export function Radio(props: ElementProps<RadioProps, 'input'>) {
+    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
 
     return (
         <span data-bspk="radio">
             <input
                 {...otherProps}
                 checked={!!checked}
-                data-errormessage={errorMessage || undefined}
                 data-invalid={invalid || undefined}
                 disabled={disabled || undefined}
                 onChange={(event) => onChange(!!event.target.checked, event)}
@@ -49,8 +45,4 @@ function Radio(props: ElementProps<RadioProps, 'input'>) {
     );
 }
 
-Radio.bspkName = 'Radio';
-
-export { Radio };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Radio/radio.scss

@@ -39,7 +39,7 @@
             width: var(--spacing-sizing-03);
             aspect-ratio: 1/1;
             background: var(--inner);
-            border-radius: var(--radius-circular);
+            border-radius: var(--radius-full);
             opacity: 0;
         }
     }

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();
+    });
+});