@bspk/ui 1.1.34 → 1.3.0

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,5 +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'>;
 
@@ -9,8 +9,10 @@ export type AvatarGroupProps = {
      *
      * @example
      *     [
-     *         { name: 'Jane Doe', image: '/profile.jpg' },
-     *         { name: 'John Smith', initials: 'JS' },
+     *         { name: 'Fezzik', image: '/profile.jpg' },
+     *         { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
+     *         { name: 'Miracle Max', initials: 'MM', color: 'green' },
+     *         { name: 'Princess Buttercup', showIcon: true },
      *     ];
      *
      * @type Array<AvatarItem>
@@ -28,8 +30,7 @@ export type AvatarGroupProps = {
      *
      * This is used to limit the number of avatars displayed in the group.
      *
-     * @minimum 3
-     * @maximum 5
+     * Recommended to set this to a value between 3 and 5 for optimal display.
      */
     max?: number;
     /**
@@ -50,27 +51,35 @@ export type AvatarGroupProps = {
  *         return (
  *             <AvatarGroup
  *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
  *                     { name: 'John Smith', initials: 'JS' },
+ *                     { name: 'Princess Buttercup' },
  *                 ]}
  *             />
  *         );
  *     }
  *
  * @name AvatarGroup
- * @phase Backlog
+ * @phase UXReview
  */
-function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupProps) {
+export function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupProps) {
     if (!Array.isArray(items) || !items?.length) return null;
 
     const overFlowCount = items.length - max;
+    const small = size === 'x-small' || size === 'small';
 
     return (
         <div data-bspk="avatar-group" data-max={max} data-size={size} data-variant={variant}>
-            <div data-wrap>
-                {items.map((item, index) => (
-                    <Avatar key={index} {...item} size={size} />
+            <div data-gap={variant === 'spread' ? (small ? '01' : '02') : undefined} data-wrap>
+                {items.slice(0, max).map((item, index) => (
+                    <Avatar
+                        data-stacked={variant === 'stacked' ? (small ? '01' : '02') : undefined}
+                        key={index}
+                        {...item}
+                        size={size}
+                    />
                 ))}
+
                 {overFlowCount > 0 && (
                     <div aria-hidden data-bspk="avatar" data-color="white" data-size={size}>
                         <span data-overflow-count>+{overFlowCount}</span>
@@ -80,7 +89,3 @@ function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupPro
         </div>
     );
 }
-
-AvatarGroup.bspkName = 'AvatarGroup';
-
-export { AvatarGroup };

package/src/components/AvatarGroup/AvatarGroupExample.tsx

@@ -0,0 +1,41 @@
+import { AvatarGroupProps } from '.';
+import { COLOR_VARIANTS } from '-/utils/colorVariants';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+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' as AvatarGroupProps['variant'],
+        },
+    },
+];
+
+export const AvatarGroupExample: ComponentExample<AvatarGroupProps> = {
+    presets,
+};

package/src/components/AvatarGroup/avatar-group.scss

@@ -7,7 +7,22 @@
         flex-direction: row;
         align-items: end;
         justify-content: end;
-        gap: var(--spacing-sizing-02);
         overflow: hidden;
     }
+
+    [data-gap='01'] {
+        gap: var(--spacing-sizing-01);
+    }
+
+    [data-gap='02'] {
+        gap: var(--spacing-sizing-02);
+    }
+
+    [data-stacked='02']:not(:last-child) {
+        margin-right: -8px;
+    }
+
+    [data-stacked='01']:not(:last-child) {
+        margin-right: -4px;
+    }
 }

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,13 +1,11 @@
+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+'. If null or undefined, the badge will
-     * be hidden.
+     * The content of the badge. If larger than 99, the badge will display '99+'.
      *
      * @example
      *     5;
@@ -15,7 +13,6 @@ export type BadgeProps = {
      * @default 1
      *
      * @type number
-     * @minimum 1
      */
     count?: number;
     /**
@@ -29,7 +26,7 @@ export type BadgeProps = {
      *
      * @default primary
      */
-    variant?: 'primary' | 'secondary';
+    color?: 'primary' | 'secondary';
     /**
      * Whether the badge should have a border that matches the surface color.
      *
@@ -50,31 +47,37 @@ export type BadgeProps = {
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
  * @example
- *     import { Badge } from '@bspk/ui/badge';
+ *     import { Badge } from '@bspk/ui/Badge';
  *
  *     function Example() {
- *         return <Badge count={5} size="small" variant="primary" />;
+ *         return <Badge count={5} size="small" color="primary" />;
  *     }
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *
  * @name Badge
- * @phase DesignReview
+ * @phase UXReview
  */
-function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }: BadgeProps) {
+export function Badge({ count: countProp, size = 'small', surfaceBorder, children, color = 'primary' }: BadgeProps) {
     const count: number | null = tryIntParse(countProp);
 
-    if (count === null) return;
+    if (typeof count === 'undefined') return children || null;
 
     const badge = (
-        <sup data-bspk="badge" data-size={size} data-surface-border={surfaceBorder || undefined} data-variant={variant}>
-            {count > 99 ? '99+' : count}
+        <sup
+            data-attachment={!!children || undefined}
+            data-bspk="badge"
+            data-color={color}
+            data-size={size}
+            data-surface-border={surfaceBorder || undefined}
+        >
+            {typeof count === 'number' && count > 99 ? '99+' : count}
         </sup>
     );
 
     if (children) {
         return (
-            <span data-bspk="badge-wrapper">
+            <span data-attachment-wrapper>
                 {children}
                 {badge}
             </span>
@@ -84,8 +87,4 @@ function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceB
     return badge;
 }
 
-Badge.bspkName = 'Badge';
-
-export { Badge };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Badge/BadgeExample.tsx

@@ -1,73 +1,18 @@
+import { BadgeProps } from '.';
 import { Avatar } from '-/components/Avatar';
 import { ComponentExample } from '-/utils/demo';
 
-import { BadgeProps } from '.';
-
 export const BadgeExample: ComponentExample<BadgeProps> = {
+    render: ({ props, Component }) => {
+        return (
+            <Component {...props}>
+                <Avatar image="/profile.jpg" name="Andre Giant" />
+            </Component>
+        );
+    },
     containerStyle: { width: '100%' },
-    render: ({ props, Component, preset }) => {
-        if (preset?.label === 'Borders') return <ExampleBadgeVariants Component={Component} props={props} />;
-
-        if (preset?.label === 'With Context') {
-            return (
-                <>
-                    <Component {...props}>
-                        <Avatar image="/profile.jpg" name="Andre Giant" />
-                    </Component>
-                </>
-            );
-        }
-        return <Component {...props} />;
+    variants: {
+        surfaceBorder: { color: { options: ['primary', 'secondary'] } },
+        size: { count: { options: [9, 99, 999] } },
     },
-    presets: [
-        {
-            label: 'With Context',
-        },
-        {
-            label: 'Borders',
-        },
-    ],
 };
-
-function ExampleBadgeVariants({
-    Component,
-    ...props
-}: {
-    Component: React.ComponentType<Record<string, unknown>>;
-    props: BadgeProps;
-}) {
-    const cells = [
-        ['', 'Small', 'X-Small'],
-        ['None', { size: 'small', surfaceBorder: false }, { size: 'x-small', surfaceBorder: false }],
-        ['Border', { size: 'small', surfaceBorder: true }, { size: 'x-small', surfaceBorder: true }],
-    ] as (BadgeProps | string)[][];
-
-    let border = false;
-    return (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
-            {cells.flat().map((content, idx) => {
-                if (typeof content === 'string' && content === 'Border') border = true;
-                return (
-                    <div
-                        key={idx}
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: '8px',
-                            padding: '8px',
-                            background:
-                                typeof content !== 'string' && border ? 'var(--surface-neutral-t3-low)' : 'transparent',
-                        }}
-                    >
-                        {typeof content === 'string'
-                            ? content
-                            : [9, 99, 999].map((count, idx2) => (
-                                  <Component count={count} key={idx2} {...props} {...(content as BadgeProps)} />
-                              ))}
-                    </div>
-                );
-            })}
-        </div>
-    );
-}

package/src/components/Badge/badge.scss

@@ -4,14 +4,24 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-circular);
+    border-radius: var(--radius-full);
     height: var(--size);
     width: fit-content;
     min-width: var(--size);
     font: var(--labels-x-small);
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
     padding: 0 var(--spacing-sizing-02);
+    background-color: var(--background);
+    color: var(--foreground);
+
+    &[data-color='primary'] {
+        --foreground: var(--foreground-brand-on-primary);
+        --background: var(--foreground-brand-primary);
+    }
+
+    &[data-color='secondary'] {
+        --foreground: var(--foreground-brand-on-secondary);
+        --background: var(--foreground-brand-secondary);
+    }
 
     &[data-size='x-small'] {
         --size: var(--spacing-sizing-05);
@@ -19,9 +29,11 @@
         padding: 2px var(--spacing-sizing-01);
     }
 
-    &[data-variant='secondary'] {
-        color: var(--foreground-brand-on-secondary);
-        background: var(--surface-brand-secondary);
+    &[data-variant='notification'] {
+        --size: 6px;
+
+        padding: 0;
+        display: block;
     }
 
     &[data-surface-border] {
@@ -29,23 +41,4 @@
     }
 }
 
-[data-bspk='badge-wrapper'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: fit-content;
-    height: fit-content;
-    flex-shrink: 0;
-
-    [data-bspk='badge'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: scale(1) translate(50%, -50%);
-        transform-origin: 100% 0%;
-        z-index: 2;
-    }
-}
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,82 @@
+import './badge-dot.scss';
+import { ReactNode } from 'react';
+import { cssWithVars } from '-/utils/cwv';
+
+type BadgeDotSize = 6 | 8 | 10 | 12;
+
+const OUTLINE_WIDTHS: Record<BadgeDotSize, number> = {
+    6: 1,
+    8: 2,
+    10: 2,
+    12: 2,
+};
+
+export type BadgeDotProps = {
+    /**
+     * The color variant of the badge-dot.
+     *
+     * @default primary
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The context for which the badge-dot is applied.
+     *
+     * Could be a button, link, or any other element that the badge-dot is associated with.
+     */
+    children?: ReactNode;
+    /**
+     * The size of the badge-dot.
+     *
+     * @default 6
+     */
+    size?: BadgeDotSize;
+    /**
+     * Whether the badge-dot should have an outline.
+     *
+     * @default false
+     */
+    outline?: boolean;
+};
+
+/**
+ * A non-numeric badge used to indicate something new or its current status.
+ *
+ * @example
+ *     import { BadgeDot } from '@bspk/ui/BadgeDot';
+ *
+ *     function Example() {
+ *         return <BadgeDot color="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
+ *
+ * @name BadgeDot
+ * @phase UXReview
+ */
+export function BadgeDot({ children, color = 'primary', size = 6, outline = false }: BadgeDotProps) {
+    const badgeDot = (
+        <sup
+            data-attachment={!!children || undefined}
+            data-bspk="badge-dot"
+            data-color={color}
+            data-outline={outline || undefined}
+            style={cssWithVars({
+                '--size': `${size}px`,
+                '--outline-width': `${OUTLINE_WIDTHS[size]}px`,
+            })}
+        />
+    );
+
+    if (children) {
+        return (
+            <span data-attachment-wrapper>
+                {children}
+                {badgeDot}
+            </span>
+        );
+    }
+
+    return badgeDot;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -0,0 +1,25 @@
+import { BadgeDotProps } from '.';
+import { Avatar } from '-/components/Avatar';
+import { Button } from '-/components/Button';
+import { ComponentExample } from '-/utils/demo';
+
+export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    render: ({ props, Component }) => {
+        return (
+            <Component {...props}>
+                {props.outline === true ? (
+                    <Button label="Button" size="large" />
+                ) : (
+                    <Avatar image="/profile.jpg" name="Andre Giant" />
+                )}
+            </Component>
+        );
+    },
+    sections: [],
+    variants: {
+        outline: { size: { options: [6, 8, 10, 12] } },
+    },
+};

package/src/components/BadgeDot/badge-dot.scss

@@ -0,0 +1,26 @@
+[data-bspk='badge-dot'] {
+    /*! 
+    --size: is set via inline style 
+    --outline-width: is set via inline style
+    */
+
+    display: block;
+    width: var(--size, 6px);
+    height: var(--size, 6px);
+    border-radius: var(--radius-full);
+    background-color: var(--background);
+
+    &[data-color='primary'] {
+        --background: var(--foreground-brand-primary);
+    }
+
+    &[data-color='secondary'] {
+        --background: var(--foreground-brand-secondary);
+    }
+
+    &[data-outline] {
+        border: var(--outline-width) solid var(--surface-neutral-t1-base);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/index.tsx

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

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