@bspk/ui 1.2.0 → 1.3.0

package/src/components/Avatar/Avatar.tsx

@@ -1,3 +1,4 @@
+import './avatar.scss';
 import { SvgPerson } from '@bspk/icons/Person';
 import { useMemo } from 'react';
 
@@ -5,14 +6,6 @@ import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { CommonProps } from '-/types/common';
 import { ColorVariant } from '-/utils/colorVariants';
 
-import './avatar.scss';
-
-const DEFAULT = {
-    size: 'small',
-    color: 'grey',
-    showTooltip: true,
-} as const;
-
 export type SizeVariant =
     | 'large'
     | 'medium'
@@ -57,7 +50,9 @@ export type AvatarProps = CommonProps<'disabled'> & {
      */
     initials?: string;
     /**
-     * Whether to show the icon in the avatar.
+     * Whether to show the icon in the avatar instead of the initials.
+     *
+     * If an image is provided, the image will be shown instead of the icon.
      *
      * @default true
      */
@@ -65,16 +60,18 @@ export type AvatarProps = CommonProps<'disabled'> & {
     /**
      * The url to the image to display in the avatar.
      *
+     * When provided the image will be displayed instead of the icon or initials.
+     *
      * @example
      *     /profile.jpg
      */
     image?: string;
     /**
-     * Whether to show the represented user's name as a tooltip.
+     * Whether to hide the represented user's name as a tooltip.
      *
-     * @default true
+     * @default false
      */
-    showTooltip?: boolean;
+    hideTooltip?: boolean;
     /**
      * The function to call when the avatar is clicked.
      *
@@ -111,12 +108,12 @@ export type AvatarProps = CommonProps<'disabled'> & {
  */
 export function Avatar({
     initials: initialsProp,
-    color = DEFAULT.color,
-    size = DEFAULT.size,
+    color = 'grey',
+    size = 'small',
     showIcon,
     image,
     name: ariaLabel,
-    showTooltip = DEFAULT.showTooltip,
+    hideTooltip = false,
     onClick,
     disabled,
     ...props
@@ -141,31 +138,38 @@ export function Avatar({
                 .join('')
                 .toUpperCase();
 
-        if (initials) return <span data-initials>{initials.slice(0, 2)}</span>;
+        if (initials)
+            return (
+                <span aria-hidden={true} data-initials>
+                    {initials.slice(0, 2)}
+                </span>
+            );
 
         return null;
     }, [ariaLabel, showIcon, image, initialsProp]);
 
     if (!children) return null;
 
-    const avatar = (triggerProps?: TooltipTriggerProps) => (
-        <button
+    const avatar = (triggerProps: TooltipTriggerProps) => (
+        <div
+            {...props}
             {...triggerProps}
-            aria-describedby={triggerProps?.['aria-describedby'] || ariaLabel}
-            aria-label={ariaLabel}
+            aria-disabled={disabled || undefined}
+            aria-label={onClick ? ariaLabel : undefined}
+            aria-labelledby={onClick ? triggerProps['aria-labelledby'] : undefined}
+            aria-roledescription="person"
             data-bspk="avatar"
             data-color={color}
             data-size={size}
-            disabled={disabled || undefined}
-            onClick={disabled ? undefined : onClick}
-            tabIndex={0}
-            {...props}
+            onClickCapture={disabled ? undefined : onClick}
+            role={onClick ? 'button' : ''}
+            tabIndex={onClick && !disabled ? 0 : undefined}
         >
             {children}
-        </button>
+        </div>
     );
 
-    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar();
+    return !hideTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar({});
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Avatar/AvatarExample.tsx

@@ -1,50 +1,52 @@
 import { AvatarProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const AvatarExample: ComponentExample<AvatarProps> = {
-    presets: [
-        {
-            label: 'Name Only',
-            propState: {
-                name: 'Andre Giant',
-                image: undefined, // Ensure no image is set
-                initials: undefined, // Ensure no initials are set
-                showIcon: false,
-            },
+export const presets: Preset<AvatarProps>[] = [
+    {
+        label: 'Name Only',
+        propState: {
+            name: 'Andre Giant',
+            image: undefined, // Ensure no image is set
+            initials: undefined, // Ensure no initials are set
+            showIcon: false,
         },
-        {
-            label: 'One Word Name',
-            propState: {
-                name: 'Andre',
-                image: undefined, // Ensure no image is set
-                initials: undefined, // Ensure no initials are set
-                showIcon: false,
-            },
+    },
+    {
+        label: 'One Word Name',
+        propState: {
+            name: 'Andre',
+            image: undefined, // Ensure no image is set
+            initials: undefined, // Ensure no initials are set
+            showIcon: false,
         },
-        {
-            label: 'With Initials',
-            propState: {
-                name: 'Andre The Giant',
-                initials: 'AG',
-                image: undefined, // Ensure no image is set
-                showIcon: false,
-            },
+    },
+    {
+        label: 'With Initials',
+        propState: {
+            name: 'Andre The Giant',
+            initials: 'AG',
+            image: undefined, // Ensure no image is set
+            showIcon: false,
         },
-        {
-            label: 'With Icon',
-            propState: {
-                name: 'Andre Giant',
-                showIcon: true,
-                image: undefined, // Ensure no image is set
-            },
+    },
+    {
+        label: 'With Icon',
+        propState: {
+            name: 'Andre Giant',
+            showIcon: true,
+            image: undefined, // Ensure no image is set
         },
-        {
-            label: 'With Image',
-            propState: {
-                name: 'Andre Giant',
-                image: '/profile.jpg',
-                showIcon: false,
-            },
+    },
+    {
+        label: 'With Image',
+        propState: {
+            name: 'Andre Giant',
+            image: '/profile.jpg',
+            showIcon: false,
         },
-    ],
+    },
+];
+
+export const AvatarExample: ComponentExample<AvatarProps> = {
+    presets,
 };

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

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

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,6 +1,5 @@
-import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
-
 import './avatar-group.scss';
+import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
 
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
 

package/src/components/AvatarGroup/AvatarGroupExample.tsx

@@ -1,33 +1,41 @@
 import { AvatarGroupProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { COLOR_VARIANTS } from '-/utils/colorVariants';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const AvatarGroupExample: ComponentExample<AvatarGroupProps> = {
-    presets: [
-        {
-            label: 'Stacked',
-            propState: {
-                items: [
-                    { name: 'Fezzik', image: '/profile.jpg' },
-                    { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
-                    { name: 'Miracle Max', initials: 'MM', showIcon: false, color: 'green' },
-                    { name: 'Princess Buttercup', showIcon: true, color: 'purple' },
-                ],
-                variant: 'stacked',
-            },
+const BLUE = COLOR_VARIANTS[4];
+const GREEN = COLOR_VARIANTS[5];
+const GREY = COLOR_VARIANTS[0];
+const PURPLE = COLOR_VARIANTS[10];
+
+export const presets: Preset<AvatarGroupProps>[] = [
+    {
+        label: 'Stacked',
+        propState: {
+            items: [
+                { name: 'Fezzik', image: '/profile.jpg' },
+                { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
+                { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
+                { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
+            ],
+            variant: 'stacked' as AvatarGroupProps['variant'],
         },
-        {
-            label: 'Stacked + Overflow',
-            propState: {
-                items: [
-                    { name: 'Fezzik', image: '/profile.jpg' },
-                    { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
-                    { name: 'Miracle Max', initials: 'MM', showIcon: false, color: 'green' },
-                    { name: 'Westley Man In Black', initials: 'WB', color: 'grey' },
-                    { name: 'Princess Buttercup', showIcon: true, color: 'purple' },
-                ],
-                max: 3,
-                variant: 'stacked',
-            },
+    },
+    {
+        label: 'Stacked + Overflow',
+        propState: {
+            items: [
+                { name: 'Fezzik', image: '/profile.jpg' },
+                { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
+                { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
+                { name: 'Westley Man In Black', initials: 'WB', color: GREY },
+                { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
+            ],
+            max: 3,
+            variant: 'stacked' as AvatarGroupProps['variant'],
         },
-    ],
+    },
+];
+
+export const AvatarGroupExample: ComponentExample<AvatarGroupProps> = {
+    presets,
 };

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

@@ -0,0 +1,19 @@
+import { Badge } from './Badge';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Badge color="primary" size="small">
+        Example Content
+    </Badge>
+);
+
+describe('Badge (RTL)', () => {
+    it(`has no basic a11y issues`, hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example Content')).toBeInTheDocument();
+    });
+});

package/src/components/Badge/Badge.tsx

@@ -1,9 +1,8 @@
+import './badge.scss';
 import { ReactNode } from 'react';
 
 import { tryIntParse } from '-/utils/tryIntPsrse';
 
-import './badge.scss';
-
 export type BadgeProps = {
     /**
      * The content of the badge. If larger than 99, the badge will display '99+'.

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

@@ -0,0 +1,19 @@
+import { BadgeDot } from './BadgeDot';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <BadgeDot>
+        <div>dot content</div>
+    </BadgeDot>
+);
+
+describe('BadgeDot', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders its child content ', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('dot content')).toBeInTheDocument();
+    });
+});

package/src/components/BadgeDot/BadgeDot.tsx

@@ -1,8 +1,7 @@
+import './badge-dot.scss';
 import { ReactNode } from 'react';
 import { cssWithVars } from '-/utils/cwv';
 
-import './badge-dot.scss';
-
 type BadgeDotSize = 6 | 8 | 10 | 12;
 
 const OUTLINE_WIDTHS: Record<BadgeDotSize, number> = {

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

@@ -0,0 +1,26 @@
+import { BannerAlert } from './BannerAlert';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <BannerAlert
+        body="There was an error processing your request."
+        callToAction={{
+            label: 'Click me',
+            onClick: () => {},
+        }}
+        header="Error"
+        onClose={() => {}}
+        variant="error"
+    />
+);
+
+describe('BannerAlert', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders its child content ', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Click me')).toBeInTheDocument();
+    });
+});

package/src/components/BannerAlert/BannerAlert.tsx

@@ -1,13 +1,12 @@
+import './banner-alert.scss';
 import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
 import { SvgClose } from '@bspk/icons/Close';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningFill } from '@bspk/icons/WarningFill';
-
+import { Button } from '-/components/Button';
 import { ElementProps, AlertVariant, CallToActionButton } from '-/types/common';
 
-import './banner-alert.scss';
-
 export type BannerAlertProps = {
     /**
      * The color variant of the banner alert.
@@ -97,16 +96,26 @@ export function BannerAlert({
                     <header>
                         <span>{header}</span>
                         {typeof onClose === 'function' && (
-                            <button aria-label="Close" onClick={onClose} type="button">
-                                <SvgClose />
-                            </button>
+                            <Button
+                                icon={<SvgClose />}
+                                iconOnly
+                                label="Close"
+                                onClick={onClose}
+                                size="small"
+                                variant="tertiary"
+                            />
                         )}
                     </header>
                 )}
                 <div data-body>
                     <span>{body}</span>
                     {callToAction?.label && callToAction?.onClick && (
-                        <button onClick={callToAction.onClick}>{callToAction.label}</button>
+                        <Button
+                            label={callToAction.label}
+                            onClick={callToAction.onClick}
+                            size="small"
+                            variant="tertiary"
+                        />
                     )}
                 </div>
             </div>

package/src/components/BannerAlert/BannerAlertExample.tsx

@@ -17,6 +17,8 @@ export const BannerAlertExample: ComponentExampleFn<BannerAlertProps> = ({ actio
         {
             label: 'With CallToAction',
             propState: {
+                header: 'With CallToAction Header',
+                body: 'With CallToAction body',
                 callToAction: {
                     label: 'Click me',
                     onClick: () => action('Call to action clicked!'),
@@ -26,6 +28,8 @@ export const BannerAlertExample: ComponentExampleFn<BannerAlertProps> = ({ actio
         {
             label: 'Without OnClose',
             propState: {
+                header: 'Without OnClose Header',
+                body: 'Without OnClose body',
                 onClose: undefined,
             },
         },

package/src/components/BannerAlert/banner-alert.scss

@@ -64,28 +64,6 @@
                     font: var(--heading-h6);
                 }
             }
-
-            // close button
-            button {
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: 0;
-                margin: 0 0 0 auto;
-                color: var(--foreground-neutral-on-surface-variant-01);
-                height: var(--spacing-sizing-08);
-                width: var(--spacing-sizing-08);
-
-                @media (any-pointer: coarse) {
-                    height: var(--spacing-sizing-12);
-                    width: var(--spacing-sizing-12);
-                }
-
-                svg {
-                    width: var(--spacing-sizing-04);
-                    height: var(--spacing-sizing-04);
-                }
-            }
         }
 
         [data-body] {
@@ -100,12 +78,6 @@
 
             button {
                 margin-left: auto;
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: 0 var(--spacing-sizing-03);
-                height: var(--spacing-sizing-12);
-                font: var(--labels-small);
             }
         }
     }

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

@@ -0,0 +1,21 @@
+import { BottomNavigation } from './BottomNavigation';
+import { presets } from './BottomNavigationExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('BottomNavigation (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<BottomNavigation onChange={() => {}} {...preset.propState} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<BottomNavigation onChange={() => {}} {...presets[0].propState} />);
+
+        expect(getByText('Item 1')).toBeInTheDocument();
+    });
+});
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,60 @@
+import './bottom-navigation.scss';
+import { TabList, TabListProps } from '-/components/TabList';
+
+export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'options' | 'value'> & {
+    /**
+     * Determines how the BottomNavigation will appear.
+     *
+     * @default flat
+     */
+    variant?: 'elevated' | 'flat';
+    /**
+     * If the bottom navigation should render inline or fixed to the bottom of the viewport.
+     *
+     * @default inline
+     */
+    mode?: 'fixed' | 'inline';
+};
+
+/**
+ * A bottom bar displaying three to five top level destinations at the bottom of screen for a mobile application.
+ *
+ * @example
+ *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState<string>('1');
+ *
+ *         return (
+ *             <BottomNavigation
+ *                 value={value}
+ *                 onChange={onChange}
+ *                 options={[
+ *                     {
+ *                         value: '1',
+ *                         label: 'Item 1',
+ *                         icon: <SvgSettings />,
+ *                         iconSelected: <SvgSettingsFill />,
+ *                     },
+ *                     {
+ *                         value: '2',
+ *                         label: 'Item 2',
+ *                         icon: <SvgCloud />,
+ *                         iconSelected: <SvgCloudFill />,
+ *                     },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name BottomNavigation
+ * @phase Dev
+ */
+export function BottomNavigation({ mode = 'inline', variant = 'flat', ...tabListProps }: BottomNavigationProps) {
+    return (
+        <TabList data-bspk="bottom-navigation" data-mode={mode} data-variant={variant} size="large" {...tabListProps} />
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */