@bspk/ui 1.1.34 → 1.3.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,65 +1,65 @@
-import { useId } from 'react';
-
-import { ElementProps, CommonProps } from '-';
-import { Radio } from '-/components/Radio';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
 import './radio-group.scss';
+import { RadioOption, RadioOptionProps } from '-/components/RadioOption';
+import { useId } from '-/hooks/useId';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
 
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> &
+    Required<CommonProps<'value'>>;
 
-export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
-    /**
-     * The value of the control.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: string;
-    /**
-     * The function to call when the radios are changed.
-     *
-     * @example
-     *     (value) => setState({ value }),
-     *
-     * @required
-     */
-    onChange: (value: string) => void;
-    /**
-     * The options for the radios.
-     *
-     * @example
-     *     [
-     *         {
-     *             value: '1',
-     *             label: 'Option 1',
-     *         },
-     *         {
-     *             value: '2',
-     *             label: 'Option 2',
-     *             description: 'Description here',
-     *         },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<RadioGroupOption>
-     * @required
-     */
-    options: RadioGroupOption[];
-    /**
-     * The label of the radio group.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
-     *
-     * @default true
-     */
-    showLabel?: boolean;
-};
+export type RadioGroupProps = CommonProps<'disabled' | 'name'> &
+    FormFieldControlProps & {
+        /**
+         * The value of the control.
+         *
+         * @example
+         *     1;
+         *
+         * @required
+         */
+        value: string;
+        /**
+         * The function to call when the radios are changed.
+         *
+         * @example
+         *     (value) => setState({ value }),
+         *
+         * @required
+         */
+        onChange: (value: string) => void;
+        /**
+         * The options for the radios.
+         *
+         * @example
+         *     [
+         *         {
+         *             value: '1',
+         *             label: 'Option 1',
+         *         },
+         *         {
+         *             value: '2',
+         *             label: 'Option 2',
+         *             description: 'Description here',
+         *         },
+         *         { value: '3', label: 'Option 3' },
+         *     ];
+         *
+         * @type Array<RadioGroupOption>
+         * @required
+         */
+        options: RadioGroupOption[];
+        /**
+         * The label of the radio group.
+         *
+         * @required
+         */
+        label: string;
+        /**
+         * Hides the RadioGroup label. When label isn't showing it is used as the aria-label prop.
+         *
+         * @default false
+         */
+        hideLabel?: boolean;
+    };
 
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
@@ -90,16 +90,16 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> & {
  *     }
  *
  * @name RadioGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function RadioGroup({
+export function RadioGroup({
     onChange,
     options = [],
     name,
     value: groupValue,
     label: groupLabel,
-    showLabel = true,
-    disabled,
+    hideLabel: hideLabelProp = false,
+    disabled: disabledGroup = false,
     ...props
 }: ElementProps<RadioGroupProps, 'div'>) {
     const id = `radio-group-${useId()}`;
@@ -107,27 +107,28 @@ function RadioGroup({
     return (
         <div
             {...props}
-            aria-label={!showLabel ? groupLabel : undefined}
-            aria-labelledby={showLabel ? `${id}-label` : undefined}
+            aria-describedby={props['aria-describedby']}
+            aria-errormessage={props['aria-errormessage']}
+            aria-label={hideLabelProp ? groupLabel : undefined}
+            aria-labelledby={!hideLabelProp ? `${id}-label` : undefined}
             data-bspk="radio-group"
-            data-disabled={disabled || undefined}
             id={id}
-            role="group"
+            role="radiogroup"
         >
-            {showLabel && <label id={`${id}-label`}>{groupLabel}</label>}
-            <div role="radiogroup">
-                {options.map(({ label, description, value }, index) => {
+            {!hideLabelProp && <label id={`${id}-label`}>{groupLabel}</label>}
+            <div role="presentation">
+                {options.map(({ label, description, disabled, value }, index) => {
                     return (
-                        <ToggleOption description={description} key={`toggle-option-${value || index}`} label={label}>
-                            <Radio
-                                aria-label={label}
-                                checked={groupValue === value}
-                                disabled={disabled}
-                                name={name}
-                                onChange={(checked) => checked && onChange(value)}
-                                value={value}
-                            />
-                        </ToggleOption>
+                        <RadioOption
+                            checked={groupValue === value}
+                            description={description}
+                            disabled={disabledGroup || disabled}
+                            key={`radio-option-${value || index}`}
+                            label={label}
+                            name={name}
+                            onChange={(checked) => checked && onChange(value)}
+                            value={value}
+                        />
                     );
                 })}
             </div>
@@ -135,8 +136,4 @@ function RadioGroup({
     );
 }
 
-RadioGroup.bspkName = 'RadioGroup';
-
-export { RadioGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/RadioGroup/RadioGroupExample.tsx

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

package/src/components/RadioGroup/radio-group.scss

@@ -3,5 +3,4 @@
     flex-direction: column;
     gap: var(--spacing-sizing-01);
     max-width: 100%;
-    overflow: hidden;
 }

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

@@ -1,19 +1,7 @@
-import { ChangeEvent } from 'react';
-
-import { InvalidPropsLibrary } from '-';
 import { RadioProps, Radio } from '-/components/Radio';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { ToggleOption, ToggleOptionControlProps } from '-/components/ToggleOption';
 
-export type RadioOptionProps = InvalidPropsLibrary &
-    Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'> & {
-        /**
-         * The function to call when the radio is checked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
+export type RadioOptionProps = ToggleOptionControlProps<RadioProps>;
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -23,19 +11,16 @@ export type RadioOptionProps = InvalidPropsLibrary &
  * @name RadioOption
  * @phase Utility
  */
-function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps) {
+export function RadioOption({ label: labelProp, description, disabled, ...radioProps }: RadioOptionProps) {
     const label = labelProp || description;
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
     return (
         label && (
-            <ToggleOption data-bspk="radio-option" description={description} label={label}>
-                <Radio {...checkboxProps} aria-label={label} />
+            <ToggleOption data-bspk="radio-option" description={description} disabled={disabled} label={label}>
+                <Radio {...radioProps} aria-label={ariaLabel} disabled={disabled} />
             </ToggleOption>
         )
     );
 }
 
-RadioOption.bspkName = 'RadioOption';
-
-export { RadioOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,97 @@
+import './rating.scss';
+import { SvgStarFill } from '@bspk/icons/StarFill';
+import { ElementType } from 'react';
+
+export type RatingSize = 'large' | 'medium' | 'small';
+export type RatingProps = {
+    /**
+     * The value of the rating between 0 and 5.
+     *
+     * @minimum 0
+     * @maximum 5
+     */
+    value?: number;
+    /**
+     * If included the component is in interactive mode and this callback is fired when a star is selected.
+     *
+     * @param value - The new value of the rating.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * The size of the rating.
+     *
+     * @default medium
+     */
+    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.
+ *
+ * @example
+ *     import { Rating } from '@bspk/ui/Rating';
+ *
+ *     function Example() {
+ *         return <Rating value={4.5} />;
+ *     }
+ *
+ * @name Rating
+ * @phase UXReview
+ */
+export function Rating({ size = 'medium', value, onChange }: RatingProps) {
+    const As: ElementType = onChange ? 'button' : 'div';
+
+    return (
+        <div
+            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'}
+        >
+            {Array.from({ length: MAX_STARS }, (_, index) => {
+                const fill = getFill(index + 1, value);
+                const selected = value !== undefined && Math.floor(value) === index;
+                return (
+                    <As
+                        aria-checked={selected}
+                        aria-hidden={!onChange}
+                        aria-label={onChange ? `Rate ${index + 1}` : undefined}
+                        data-fill={fill}
+                        data-star
+                        key={index}
+                        onClick={() => onChange?.(index + 1)}
+                        role={onChange ? 'radio' : 'presentation'}
+                        tabIndex={onChange ? (selected ? 0 : -1) : -1}
+                        type="button"
+                    >
+                        <SvgStarFill width={iconWidths[size]} />
+                        {fill === 'half' && (
+                            <div data-fill-half>
+                                <div data-star>
+                                    <SvgStarFill width={iconWidths[size]} />
+                                </div>
+                            </div>
+                        )}
+                    </As>
+                );
+            })}
+        </div>
+    );
+}
+
+function getFill(num: number, value?: number): 'full' | 'half' | undefined {
+    if (value === undefined) return undefined;
+    if (value >= num) return 'full';
+    if (value == num - 0.5) return 'half';
+    return undefined;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Rating/RatingExample.tsx

@@ -0,0 +1,20 @@
+import { RatingProps } from './Rating';
+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,
+    };
+};

package/src/components/Rating/index.tsx

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

package/src/components/Rating/rating.scss

@@ -0,0 +1,85 @@
+[data-bspk='rating'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: fit-content;
+
+    &[data-size='small'] {
+        [data-star] {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+
+        svg {
+            width: var(--spacing-sizing-04);
+            height: var(--spacing-sizing-04);
+        }
+    }
+
+    &[data-size='medium'] {
+        [data-star] {
+            width: var(--spacing-sizing-08);
+            height: var(--spacing-sizing-08);
+        }
+
+        svg {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+    }
+
+    &[data-size='large'] {
+        [data-star] {
+            width: var(--spacing-sizing-10);
+            height: var(--spacing-sizing-10);
+        }
+
+        svg {
+            width: var(--spacing-sizing-08);
+            height: var(--spacing-sizing-08);
+        }
+    }
+
+    [data-star] {
+        outline: none;
+        cursor: default;
+        background: none;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        color: var(--surface-neutral-t3-low);
+
+        &:is(button) {
+            cursor: pointer;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+
+            &:focus-visible {
+                outline: 1px solid var(--stroke-neutral-focus);
+                border-color: var(--stroke-neutral-focus);
+                margin-bottom: 1px;
+            }
+        }
+
+        &[data-fill='full'] {
+            color: var(--status-warning);
+        }
+
+        // half star fill
+        [data-fill-half] {
+            position: absolute;
+            inset: 0 50% 0 0;
+            overflow: hidden;
+
+            [data-star] {
+                color: var(--status-warning);
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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,21 +1,13 @@
-import { CommonProps } from '-';
 import './scrim.scss';
+import { CommonProps } from '-/types/common';
 
-export type ScrimProps = CommonProps<'data-bspk-owner'> & {
+export type ScrimProps = CommonProps<'owner'> & {
     /**
      * Whether the Scrim should be visible.
      *
      * @default true
      */
     visible?: boolean;
-    /**
-     * The variant of the Scrim.
-     *
-     * This determines how the Scrim is used in the application and effects its styling.
-     *
-     * @required
-     */
-    variant: 'dialog' | 'dropdown';
     /**
      * A function that is called when the Scrim is clicked.
      *
@@ -34,20 +26,16 @@ export type ScrimProps = CommonProps<'data-bspk-owner'> & {
  *
  * @phase Utility
  */
-function Scrim({ visible = true, variant, ...props }: ScrimProps) {
+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}
-            data-variant={variant}
         />
     );
 }
 
-Scrim.bspkName = 'Scrim';
-
-export { Scrim };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Scrim/scrim.scss

@@ -8,13 +8,20 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: var(--background-scrim);
+    animation-name: fade-in;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
 
-    &[data-variant='dialog'] {
-        background-color: var(--background-scrim);
-    }
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
 
-    &[data-hidden] {
-        display: none;
+        100% {
+            opacity: 1;
+        }
     }
 }
 

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

@@ -0,0 +1,41 @@
+import { SearchBar } from './SearchBar';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+import { useIds } from '-/utils/useIds';
+
+const TestBed = () => {
+    const items = useIds('search-bar-example', [
+        { value: '1', label: 'Apple Pie' },
+        { value: '2', label: 'Banana Split' },
+        { value: '3', label: 'Cherry Tart' },
+        { value: '4', label: 'Dragonfruit Sorbet' },
+        { value: '5', label: 'Elderberry Jam' },
+        { value: '6', label: 'Fig Newton' },
+        { value: '7', label: 'Grape Soda' },
+        { value: '8', label: 'Honeydew Smoothie' },
+        { value: '9', label: 'Ice Cream Sandwich' },
+        { value: '10', label: 'Jackfruit Pudding' },
+    ]);
+
+    return (
+        <SearchBar
+            aria-label="Example aria-label"
+            items={items}
+            name="Example name"
+            onChange={() => {}}
+            onSelect={() => {}}
+            placeholder="Search"
+            value=""
+        />
+    );
+};
+
+describe('SearchBar (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example aria-label')).toBeInTheDocument();
+    });
+});