@bspk/ui 1.1.34 → 1.3.0

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,140 @@
+import './accordion.scss';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { randomString } from '-/utils/random';
+
+export type AccordionSection = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The subtitle of the accordion. */
+    subtitle?: string;
+    /** The leading element to display in the accordion header. */
+    leading?: ReactNode;
+    /** The trailing element to display in the accordion header. */
+    trailing?: ReactNode;
+    /**
+     * If the accordion is initially open.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * If not provided it will be generated automatically.
+     */
+    id?: string;
+};
+
+export type AccordionProps = {
+    /**
+     * Array of accordion sections
+     *
+     * @type Array<AccordionSection>
+     * @required
+     */
+    items: AccordionSection[];
+    /**
+     * If true only one accordion section can be opened at a time
+     *
+     * @default true
+     */
+    singleOpen?: boolean;
+};
+
+/**
+ * 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 items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
+ *     }
+ *
+ * @name Accordion
+ * @phase UXReview
+ */
+export function Accordion({ items: itemsProp, singleOpen = true }: AccordionProps) {
+    const items = useMemo(
+        () =>
+            itemsProp.map((item) => ({
+                ...item,
+                id: item.id || `accordion-item-${randomString(8)}`,
+            })),
+        [itemsProp],
+    );
+
+    const [openSections, setOpenSections] = useState<string[]>(() => {
+        return items.filter((item) => item.isOpen).map((item) => item.id);
+    });
+
+    useEffect(() => {
+        // Update open sections based on the items prop
+        setOpenSections(items.filter((item) => item.isOpen).map((item) => item.id));
+    }, [items]);
+
+    const toggleOpen = (itemId: string) => () =>
+        setOpenSections((prev) => {
+            const isSectionOpen = prev.includes(itemId);
+
+            // If singleOpen is true, reset activeItems to only include the clicked item or empty if it was already active
+            if (singleOpen) return isSectionOpen ? [] : [itemId];
+
+            // If singleOpen is false, toggle the clicked item and keep others active
+            return isSectionOpen ? prev.filter((activeItemId) => activeItemId !== itemId) : [...prev, itemId];
+        });
+
+    return (
+        <div data-bspk="accordion">
+            {items.map(({ children, title, subtitle: subtitle, leading, trailing, disabled, id }, index) => {
+                const isOpen = openSections.includes(id);
+                return (
+                    <section data-disabled={disabled || undefined} id={id} key={id || index}>
+                        <button
+                            aria-controls={`${id}-content`}
+                            aria-expanded={isOpen}
+                            data-header
+                            disabled={disabled || undefined}
+                            onClick={!disabled ? toggleOpen(id) : undefined}
+                        >
+                            {leading && <span data-leading>{leading}</span>}
+                            <span data-title-subtitle>
+                                <span data-title>{title}</span>
+                                {subtitle && <span data-subtitle>{subtitle}</span>}
+                            </span>
+                            {trailing && <span data-trailing>{trailing}</span>}
+                            <span data-arrow>{isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}</span>
+                        </button>
+                        {isOpen && (
+                            <div data-content data-hidden={!isOpen || undefined} id={`${id}-content`}>
+                                {children}
+                            </div>
+                        )}
+                        <span data-divider />
+                    </section>
+                );
+            })}
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Accordion/AccordionExample.tsx

@@ -0,0 +1,93 @@
+import { AccordionProps } from '.';
+import { Avatar } from '-/components/Avatar';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+const AccordionContent = () => (
+    <p>
+        Actualize the plan and markets. Going forward, we should harness the asset. Leverage skillsets to achieve
+        maximum market share.
+    </p>
+);
+
+export const presets: Preset<AccordionProps>[] = [
+    {
+        label: 'Multiple Sections',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    subtitle: 'Subtitle',
+                    children: <AccordionContent />,
+                },
+                {
+                    id: '2',
+                    title: 'Section 2',
+                    children: <AccordionContent />,
+                    leading: <Avatar name="Avatar" size="small" />,
+                    trailing: <span>Trailing</span>,
+                },
+                {
+                    id: '3',
+                    title: 'Section 3',
+                    children: <AccordionContent />,
+                },
+            ],
+        },
+    },
+    {
+        label: 'Multiple Sections with 1 disabled',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: <AccordionContent />,
+                },
+                { id: '2', title: 'Section 2', disabled: true, children: <AccordionContent /> },
+                { id: '3', title: 'Section 3', children: <AccordionContent /> },
+            ],
+        },
+    },
+    {
+        label: 'Multiple Sections with 1 disabled and open',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: <AccordionContent />,
+                },
+                { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: <AccordionContent /> },
+                { id: '3', title: 'Section 3', children: <AccordionContent /> },
+            ],
+        },
+    },
+];
+
+export const AccordionExample: ComponentExampleFn<AccordionProps> = () => ({
+    containerStyle: { minHeight: 225 },
+    defaultState: {
+        items: [
+            {
+                id: '1',
+                title: `Section 1`,
+                children: <AccordionContent />,
+            },
+            {
+                id: '2',
+                title: 'Section 2',
+                children: <AccordionContent />,
+                leading: <Avatar name="Avatar" size="small" />,
+                trailing: <span>Trailing</span>,
+            },
+            {
+                id: '3',
+                title: 'Section 3',
+                children: <AccordionContent />,
+            },
+        ],
+    },
+    presets,
+    variants: false,
+});

package/src/components/Accordion/accordion.scss

@@ -0,0 +1,106 @@
+[data-bspk='accordion'] {
+    width: 100%;
+    padding: var(--spacing-sizing-02);
+
+    > section {
+        --border-bottom-color: var(--stroke-neutral-base);
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: var(--foreground-neutral-on-surface);
+
+        &[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);
+        }
+
+        button[data-header] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0 var(--spacing-sizing-02);
+            gap: var(--spacing-sizing-02);
+            font: inherit;
+            cursor: pointer;
+            outline: none;
+            min-height: var(--spacing-sizing-12);
+
+            [data-title-subtitle] {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                flex: 1;
+
+                [data-title] {
+                    font: var(--labels-base);
+                }
+
+                [data-subtitle] {
+                    font: var(--body-x-small);
+                    color: var(--foreground-neutral-on-surface-variant-01);
+                }
+            }
+
+            [data-arrow] {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-left: var(--spacing-sizing-02);
+            }
+
+            &: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));
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: var(--foreground-neutral-disabled-on-surface);
+                border-color: var(--stroke-neutral-disabled-light);
+            }
+        }
+
+        &:has(:focus-visible) {
+            outline: 2px solid var(--stroke-neutral-focus);
+            border-color: var(--stroke-neutral-focus);
+            margin-bottom: 1px;
+        }
+
+        [data-content] {
+            padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+        }
+    }
+
+    [data-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);
+    }
+}
+
+/** 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.rtl.test.tsx

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

package/src/components/Avatar/Avatar.tsx

@@ -1,15 +1,10 @@
+import './avatar.scss';
 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 = {
-    size: 'small',
-    color: 'grey',
-    showTooltip: true,
-} as const;
 
 export type SizeVariant =
     | 'large'
@@ -22,7 +17,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,16 +40,19 @@ 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;
      */
     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
      */
@@ -62,16 +60,24 @@ export type AvatarProps = {
     /**
      * 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 represeneetd user's name as a tooltip.
+     * Whether to hide the represented user's name as a tooltip.
      *
-     * @default true
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * The function to call when the avatar is clicked.
+     *
+     * @type () => void
      */
-    showTooltip?: boolean;
+    onClick?: () => void;
 };
 
 /**
@@ -89,7 +95,7 @@ export type AvatarProps = {
  *                 image="/profile.jpg"
  *                 initials="AR"
  *                 name="Andre Giant"
- *                 showTooltip={true}
+ *                 showTooltip
  *                 size="large"
  *             />
  *         );
@@ -98,23 +104,26 @@ 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,
+    color = 'grey',
+    size = 'small',
     showIcon,
     image,
     name: ariaLabel,
-    showTooltip = DEFAULT.showTooltip,
+    hideTooltip = false,
+    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>
             );
@@ -129,24 +138,38 @@ 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 = (
-        <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
+    const avatar = (triggerProps: TooltipTriggerProps) => (
+        <div
+            {...props}
+            {...triggerProps}
+            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}
+            onClickCapture={disabled ? undefined : onClick}
+            role={onClick ? 'button' : ''}
+            tabIndex={onClick && !disabled ? 0 : undefined}
+        >
             {children}
         </div>
     );
 
-    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar;
+    return !hideTooltip ? <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,42 +1,52 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { AvatarProps } from '.';
+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: 'With Initials',
-            propState: {
-                name: 'Andre Giant',
-                initials: 'GA',
-                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/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 */