@bspk/ui 1.1.33 → 1.2.0

package/src/components/Accordion/AccordionSection.tsx

@@ -0,0 +1,128 @@
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import { ReactNode } from 'react';
+import './accordion.scss';
+import { Txt } from '-/components/Txt';
+
+export type AccordionSectionProps = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The title of the accordion. */
+    subTitle?: string;
+    /**
+     * The leading element to display in the Accordion title.
+     *
+     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
+     *
+     * @exampleType select
+     * @options Icon, Img, Avatar
+     */
+    leading?: ReactNode;
+    /**
+     * The trailing element to display in the accordion header.
+     *
+     * @exampleType select
+     * @options Tag
+     */
+    trailing?: ReactNode;
+    /**
+     * If the accordion is open.
+     *
+     * @default false
+     * @required
+     */
+    isOpen?: boolean;
+    /**
+     * Fires when the accordion state changes.
+     *
+     * @required
+     */
+    toggleOpen: () => void;
+    /**
+     * If true, a divider will be shown below the accordion header.
+     *
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * @required
+     */
+    id: string;
+};
+
+/**
+ * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
+ * reveal or hide their content.
+ *
+ * @example
+ *     import { Accordion } from '@bspk/ui/Accordion';
+ *
+ *     function Example() {
+ *         return (
+ *             <Accordion title="Accordion Title" subTitle="Accordion Subtitle">
+ *                 Accordion Content
+ *             </Accordion>
+ *         );
+ *     }
+ *
+ * @name Accordion
+ * @phase WorkInProgress
+ */
+export function AccordionSection({
+    children,
+    title,
+    subTitle,
+    leading,
+    isOpen = false,
+    toggleOpen,
+    divider = true,
+    trailing,
+    disabled = false,
+    id,
+}: AccordionSectionProps) {
+    return (
+        <section
+            data-accordion-section
+            data-disabled={disabled || undefined}
+            data-divider={divider || undefined}
+            id={id}
+        >
+            <button
+                aria-expanded={isOpen ? true : false}
+                data-accordion-header
+                disabled={disabled}
+                onClick={!disabled ? toggleOpen : undefined}
+            >
+                <span data-accordion-header-body>
+                    {leading ?? null}
+                    <span data-accordion-title-wrapper>
+                        <Txt variant="labels-base">{title}</Txt>
+                        {!!subTitle && <Txt variant="body-x-small">{subTitle}</Txt>}
+                    </span>
+                    {trailing ?? null}
+                </span>
+                {isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}
+            </button>
+            {isOpen && <div data-accordion-content>{children}</div>}
+            <div data-not-a-divider-divider />
+        </section>
+    );
+}

package/src/components/Accordion/accordion.scss

@@ -0,0 +1,105 @@
+[data-bspk='accordion'] {
+    width: 100%;
+
+    [data-accordion-section] {
+        --border-bottom-color: var(--stroke-neutral-base);
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &[data-divider] {
+            [data-not-a-divider-divider] {
+                display: block;
+                height: 1px;
+                width: calc(100% - var(--spacing-sizing-04));
+                margin: -1px var(--spacing-sizing-02) 0;
+                background-color: var(--border-bottom-color);
+            }
+        }
+
+        &[data-disabled] {
+            --border-bottom-color: var(--stroke-neutral-disabled-light);
+
+            background:
+                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        [data-accordion-header] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            background: none;
+            color: inherit;
+            border: none;
+            padding: var(--spacing-sizing-02);
+            gap: var(--spacing-sizing-04);
+            font: inherit;
+            outline: inherit;
+            cursor: pointer;
+
+            [data-accordion-header-body] {
+                display: flex;
+                align-items: center;
+                flex-direction: row;
+                flex: 1;
+                gap: var(--spacing-sizing-03);
+            }
+
+            [data-accordion-title-wrapper] {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                flex: 1;
+
+                [data-bspk='txt'] {
+                    text-align: left;
+                }
+            }
+
+            &:not(:disabled) {
+                &:hover {
+                    background-image:
+                        linear-gradient(
+                            var(--interactions-neutral-hover-opacity),
+                            var(--interactions-neutral-hover-opacity)
+                        ),
+                        linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+                }
+
+                &:active {
+                    background-image:
+                        linear-gradient(
+                            var(--interactions-neutral-press-opacity),
+                            var(--interactions-neutral-press-opacity)
+                        ),
+                        linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+                }
+
+                &:focus-visible {
+                    outline: 2px solid var(--stroke-neutral-focus);
+                    border-color: var(--stroke-neutral-focus);
+                    margin-bottom: 1px;
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: var(--foreground-neutral-disabled-on-surface);
+                border-color: var(--stroke-neutral-disabled-light);
+            }
+        }
+
+        [data-accordion-content] {
+            padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+        }
+
+        [data-not-a-divider-divider] {
+            display: none;
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Accordion/index.tsx

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

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,10 @@
 import { SvgPerson } from '@bspk/icons/Person';
 import { useMemo } from 'react';
 
-import { Tooltip } from '-/components/Tooltip';
+import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
+import { CommonProps } from '-/types/common';
 import { ColorVariant } from '-/utils/colorVariants';
+
 import './avatar.scss';
 
 const DEFAULT = {
@@ -22,7 +24,7 @@ export type SizeVariant =
     | 'xxxx-large'
     | 'xxxxx-large';
 
-export type AvatarProps = {
+export type AvatarProps = CommonProps<'disabled'> & {
     /**
      * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
      *
@@ -45,9 +47,10 @@ export type AvatarProps = {
      */
     color?: Exclude<ColorVariant, 'white'>;
     /**
-     * The initials to display in the avatar limited to 2 characters.
+     * Customizable initials to display in the avatar limited to 2 characters.
      *
-     * If not provided, the first two letters of the name will be used as initials.
+     * By default, initials are the first letters of the first two words in the name. For a single-word name, only one
+     * initial is shown. Names with three or more words, only the first two initials are used.
      *
      * @example
      *     AG;
@@ -67,11 +70,17 @@ export type AvatarProps = {
      */
     image?: string;
     /**
-     * Whether to show the represeneetd user's name as a tooltip.
+     * Whether to show the represented user's name as a tooltip.
      *
      * @default true
      */
     showTooltip?: boolean;
+    /**
+     * The function to call when the avatar is clicked.
+     *
+     * @type () => void
+     */
+    onClick?: () => void;
 };
 
 /**
@@ -89,7 +98,7 @@ export type AvatarProps = {
  *                 image="/profile.jpg"
  *                 initials="AR"
  *                 name="Andre Giant"
- *                 showTooltip={true}
+ *                 showTooltip
  *                 size="large"
  *             />
  *         );
@@ -98,9 +107,9 @@ export type AvatarProps = {
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
- * @phase DesignReview
+ * @phase UXReview
  */
-function Avatar({
+export function Avatar({
     initials: initialsProp,
     color = DEFAULT.color,
     size = DEFAULT.size,
@@ -108,13 +117,16 @@ function Avatar({
     image,
     name: ariaLabel,
     showTooltip = DEFAULT.showTooltip,
+    onClick,
+    disabled,
+    ...props
 }: AvatarProps) {
     const children = useMemo(() => {
-        if (image) return <img alt={ariaLabel} src={image} />;
+        if (image) return <img alt={ariaLabel} aria-hidden={true} src={image} />;
 
         if (showIcon)
             return (
-                <span data-icon>
+                <span aria-hidden={true} data-icon>
                     <SvgPerson />
                 </span>
             );
@@ -136,17 +148,24 @@ function Avatar({
 
     if (!children) return null;
 
-    const avatar = (
-        <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
+    const avatar = (triggerProps?: TooltipTriggerProps) => (
+        <button
+            {...triggerProps}
+            aria-describedby={triggerProps?.['aria-describedby'] || ariaLabel}
+            aria-label={ariaLabel}
+            data-bspk="avatar"
+            data-color={color}
+            data-size={size}
+            disabled={disabled || undefined}
+            onClick={disabled ? undefined : onClick}
+            tabIndex={0}
+            {...props}
+        >
             {children}
-        </div>
+        </button>
     );
 
-    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar;
+    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar();
 }
 
-Avatar.bspkName = 'Avatar';
-
-export { Avatar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Avatar/AvatarExample.tsx

@@ -1,6 +1,5 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { AvatarProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const AvatarExample: ComponentExample<AvatarProps> = {
     presets: [
@@ -13,11 +12,20 @@ export const AvatarExample: ComponentExample<AvatarProps> = {
                 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 Giant',
-                initials: 'GA',
+                name: 'Andre The Giant',
+                initials: 'AG',
                 image: undefined, // Ensure no image is set
                 showIcon: false,
             },

package/src/components/Avatar/avatar.scss

@@ -3,6 +3,8 @@
     --font: var(--labels-base);
     --svg-size: var(--spacing-sizing-10);
 
+    border: unset;
+
     &:not([data-color]) {
         --foreground: var(--foreground-neutral-on-surface);
         --background: var(--surface-neutral-t3-low);
@@ -16,10 +18,13 @@
     height: var(--height);
     width: var(--height);
     aspect-ratio: 1 / 1;
-    border-radius: 999px;
+    border-radius: var(--radius-full);
     background-color: var(--background);
     color: var(--foreground);
     font: var(--font);
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: relative;
 
     &:has(img) {
         overflow: hidden;
@@ -30,6 +35,7 @@
     img {
         vertical-align: top;
         max-width: 100%;
+        height: auto;
     }
 
     svg {
@@ -96,6 +102,33 @@
         --font: var(--display-regular-large);
         --svg-size: var(--spacing-sizing-18);
     }
+
+    --state-background: transparent;
+
+    &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        inset: 0;
+        border-radius: var(--radius-full);
+        background: var(--state-background);
+    }
+
+    &:hover {
+        --state-background: var(--interactions-neutral-hover-opacity);
+    }
+
+    &:active {
+        --state-background: var(--interactions-neutral-press-opacity);
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+    }
+
+    &:focus:not(:active) {
+        outline: 2px solid var(--stroke-neutral-focus);
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,4 +1,5 @@
 import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
+
 import './avatar-group.scss';
 
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
@@ -9,8 +10,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 +31,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 +52,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 +90,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,33 @@
+import { AvatarGroupProps } from '.';
+import { ComponentExample } 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',
+            },
+        },
+        {
+            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',
+            },
+        },
+    ],
+};

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.tsx

@@ -6,8 +6,7 @@ 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 +14,6 @@ export type BadgeProps = {
      * @default 1
      *
      * @type number
-     * @minimum 1
      */
     count?: number;
     /**
@@ -29,7 +27,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 +48,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 +88,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 */