@bspk/ui 1.1.34 → 1.3.0

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,135 @@
+import './drawer.scss';
+import { SvgClose } from '@bspk/icons/Close';
+import { ReactNode } from 'react';
+import { Button } from '-/components/Button';
+import { Dialog, DialogProps } from '-/components/Dialog';
+import { Txt } from '-/components/Txt';
+
+export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'id' | 'innerRef' | 'owner'> & {
+    /** Drawer header. */
+    header?: string;
+    /**
+     * The content of the drawer.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Controls whether the drawer is open.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * When true the drawer is temporarily displayed above all other content until closed.
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * If true, a close button will be displayed in the drawer header.
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * The placement of the drawer.
+     *
+     * @default right
+     */
+    placement?: 'bottom' | 'left' | 'right' | 'top';
+    /** Optional callback when the drawer requests to close. */
+    onClose?: () => void;
+};
+
+/**
+ * Drawer component displays a panel that slides in from the edge of the screen. It can be used to show additional
+ * content or actions without navigating away from the current view.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { Drawer } from '@bspk/ui/Drawer';
+ *
+ *     export function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Drawer" onClick={() => setOpen(true)} />
+ *                 <Drawer
+ *                     id="exampleId"
+ *                     onClose={() => setOpen(false)}
+ *                     open={open}
+ *                     placement="right"
+ *                     modal={false}
+ *                     header="Example Drawer"
+ *                     closeButton={true}
+ *                 >
+ *                     Example Drawer
+ *                 </Drawer>
+ *             </>
+ *         );
+ *     }
+ *
+ * @name Drawer
+ * @phase UXReview
+ */
+
+export function Drawer({
+    header,
+    children,
+    open = false,
+    modal = true,
+    closeButton = false,
+    placement = 'right',
+    onClose,
+    disableFocusTrap,
+    ...dialogProps
+}: DrawerProps) {
+    if (!open) return null;
+
+    const drawerContent = (
+        <section
+            aria-modal={modal ? 'true' : undefined}
+            data-bspk="drawer"
+            data-no-portal={modal ? null : true}
+            data-persistent-placement={modal ? null : placement}
+            role={modal ? 'dialog' : 'complementary'}
+        >
+            {(header || closeButton) && (
+                <div data-drawer-close-only={!header} data-drawer-header>
+                    {header && (
+                        <Txt as="div" data-drawer-title variant="heading-h4">
+                            {header}
+                        </Txt>
+                    )}
+                    {closeButton && (
+                        <Button icon={<SvgClose />} iconOnly label="close" onClick={onClose} variant="tertiary" />
+                    )}
+                </div>
+            )}
+
+            {children}
+        </section>
+    );
+
+    if (!modal) return drawerContent;
+
+    return (
+        <Dialog
+            {...dialogProps}
+            disableFocusTrap={disableFocusTrap}
+            onClose={onClose || (() => {})}
+            open={open}
+            placement={placement}
+            showScrim={true}
+            widthFull={placement === 'bottom' || placement === 'top'}
+        >
+            {drawerContent}
+        </Dialog>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Drawer/DrawerExample.tsx

@@ -0,0 +1,93 @@
+import { Drawer, DrawerProps } from '.';
+import { Button } from '-/components/Button';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<DrawerProps>[] = [
+    {
+        label: 'Left Responsive',
+        propState: { closeButton: true, modal: false, placement: 'left', children: <></> },
+    },
+    {
+        label: 'Right Responsive',
+        propState: { closeButton: true, modal: false, placement: 'right', children: <></> },
+    },
+];
+
+export const DrawerExample: ComponentExampleFn<DrawerProps> = ({ action }) => ({
+    containerStyle: {
+        height: '300px',
+        width: '100%',
+        padding: 0,
+        overflow: 'hidden', // hides box-shadow of drawer
+    },
+    presets,
+    render: ({ props, preset, setState, Component }) => {
+        if (!preset) return null;
+        const label = 'Open Drawer';
+        const handleOnClose = () => {
+            action('Drawer closed');
+            setState({ open: false });
+        };
+
+        switch (preset.label) {
+            case 'Left Responsive':
+                return (
+                    <>
+                        <Drawer {...props} onClose={handleOnClose}>
+                            <div style={{ width: '280px' }}>
+                                Hello, <br /> I am a {props.placement}, responsive drawer!
+                            </div>
+                        </Drawer>
+
+                        <div
+                            style={{
+                                transition: 'margin 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+                                marginLeft: props.open ? `280px` : 0,
+                            }}
+                        >
+                            <Button label={label} onClick={() => setState({ open: true })} />
+                        </div>
+                    </>
+                );
+            case 'Right Responsive':
+                return (
+                    <>
+                        <div
+                            style={{
+                                transition: 'margin 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+                                marginRight: props.open ? `280px` : 0,
+                            }}
+                        >
+                            <Button label={label} onClick={() => setState({ open: true })} />
+                        </div>
+                        <Drawer {...props} onClose={handleOnClose}>
+                            <div style={{ width: '280px' }}>
+                                Hello, <br /> I am a {props.placement}, responsive drawer!
+                            </div>
+                        </Drawer>
+                    </>
+                );
+            default:
+                return (
+                    <>
+                        <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--spacing-sizing-04)' }}>
+                            <Button label={label} onClick={() => setState({ open: true })} />
+                        </div>
+                        <Component
+                            data-example-component
+                            {...props}
+                            closeButton={props.closeButton ?? false}
+                            id="exampleId"
+                            modal={props.modal ?? true}
+                            onClose={handleOnClose}
+                            open={props.open ?? false}
+                            placement={props.placement ?? 'right'}
+                        >
+                            <div style={{}}>Hello, I am a ({props.placement}) drawer!</div>
+                        </Component>
+                    </>
+                );
+        }
+    },
+    variants: false,
+});

package/src/components/Drawer/drawer.scss

@@ -0,0 +1,67 @@
+[data-bspk='drawer'] {
+    padding: var(--spacing-sizing-03);
+    color: var(--foreground-neutral-on-surface);
+    background: var(--surface-neutral-t1-base);
+
+    &[data-no-portal] {
+        box-shadow: var(--drop-shadow-float);
+        animation-name: var(--box-animation-name);
+        animation-duration: 0.5s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+
+        &[data-persistent-placement='top'] {
+            --box-animation-name: placement-top;
+
+            position: absolute;
+            top: 0;
+            width: 100%;
+            border-bottom-left-radius: var(--radius-lg);
+            border-bottom-right-radius: var(--radius-lg);
+        }
+
+        &[data-persistent-placement='right'] {
+            --box-animation-name: placement-right;
+
+            position: absolute;
+            right: 0;
+            height: 100%;
+            border-top-left-radius: var(--radius-lg);
+            border-bottom-left-radius: var(--radius-lg);
+        }
+
+        &[data-persistent-placement='bottom'] {
+            --box-animation-name: placement-bottom;
+
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            border-top-left-radius: var(--radius-lg);
+            border-top-right-radius: var(--radius-lg);
+        }
+
+        &[data-persistent-placement='left'] {
+            --box-animation-name: placement-left;
+
+            position: absolute;
+            left: 0;
+            height: 100%;
+            border-top-right-radius: var(--radius-lg);
+            border-bottom-right-radius: var(--radius-lg);
+        }
+    }
+
+    [data-drawer-header] {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--spacing-sizing-04);
+
+        &[data-drawer-close-only='true'] {
+            justify-content: flex-end;
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Drawer/index.tsx

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

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

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

package/src/components/EmptyState/EmptyState.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 
-import { CallToActionButton } from '-';
 import { Button } from '-/components/Button';
 import { Layout } from '-/components/Layout';
 import { Txt } from '-/components/Txt';
+import { CallToActionButton } from '-/types/common';
 
 export type EmptyStateProps = {
     /** The image or icon to display in the empty state. */
@@ -50,9 +50,9 @@ export type EmptyStateProps = {
  *     }
  *
  * @name EmptyState
- * @phase DesignReview
+ * @phase UXReview
  */
-function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
+export function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }: EmptyStateProps) {
     return (
         <Layout
             align="center"
@@ -84,8 +84,4 @@ function EmptyState({ children, header, body, callToAction, bodyAlign = 'center'
     );
 }
 
-EmptyState.bspkName = 'EmptyState';
-
-export { EmptyState };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/EmptyState/EmptyStateExample.tsx

@@ -1,13 +1,15 @@
-import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { EmptyStateProps } from '.';
+import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 
-export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action }) => ({
-    containerStyle: { width: '100%' },
-    render: ({ props: { children, ...props }, context, Component }) => (
-        <Component {...props}>
-            {context?.preset?.label === 'With Image' ? (
+export const presets: Preset<EmptyStateProps>[] = [
+    {
+        label: 'With Custom Content',
+        propState: {
+            callToAction: undefined,
+            body: 'Example body',
+            header: 'Example header',
+            children: (
                 <ExamplePlaceholder
                     style={{
                         height: '200px',
@@ -15,23 +17,27 @@ export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action
                         minWidth: '250px',
                     }}
                 />
-            ) : (
-                children
-            )}
-        </Component>
-    ),
+            ),
+        },
+    },
+];
+
+export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props: { children, ...props }, Component }) => <Component {...props}>{children}</Component>,
     presets: [
         {
             label: 'With CallToAction',
             propState: {
+                body: 'Example body',
+                header: 'Example header',
                 callToAction: {
                     label: 'Add payment method',
                     onClick: () => action('Add payment method clicked!'),
                 },
+                children: undefined,
             },
         },
-        {
-            label: 'With Image',
-        },
+        ...presets,
     ],
 });

package/src/components/ExamplePlaceholder/ExamplePlaceholder.tsx

@@ -1,36 +1,58 @@
 import { useRef } from 'react';
 
-import { ElementProps } from '-';
 import { Txt } from '-/components/Txt';
+import { ElementProps } from '-/types/common';
 
 const dimension = (value: number | string) => (typeof value === 'number' ? `${value}px` : `${value}`);
 
+export type ExamplePlaceholderProps = {
+    /**
+     * Whether to hide the size text.
+     *
+     * @default false
+     */
+    hideSize?: boolean;
+    /**
+     * The height of the placeholder.
+     *
+     * @default 100
+     * @type string
+     */
+    height?: number | string;
+    /**
+     * The width of the placeholder.
+     *
+     * @default 100%
+     * @type string
+     */
+    width?: number | string;
+    /**
+     * The direction of the placeholder.
+     *
+     * @default 'row'
+     */
+    direction?: 'column' | 'row';
+};
+
 /**
  * A utility component that serves as a placeholder for examples.
  *
  * @name ExamplePlaceholder
  * @phase Utility
  */
-function ExamplePlaceholder({
+export function ExamplePlaceholder({
     hideSize = false,
     height = 100,
     width = '100%',
     direction = 'row',
     ...props
-}: ElementProps<
-    {
-        hideSize?: boolean;
-        height?: number | string;
-        width?: number | string;
-        direction?: 'column' | 'row';
-    },
-    'div'
->) {
+}: ElementProps<ExamplePlaceholderProps, 'div'>) {
     const ref = useRef<HTMLDivElement | null>(null);
 
     return (
         <div
             {...props}
+            data-bspk-utility="example-placeholder"
             data-example-placeholder
             ref={ref}
             style={{
@@ -50,7 +72,3 @@ function ExamplePlaceholder({
         </div>
     );
 }
-
-ExamplePlaceholder.bspkName = 'ExamplePlaceholder';
-
-export { ExamplePlaceholder };

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

@@ -0,0 +1,15 @@
+import { Fab } from './Fab';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Fab label="Example label" placement="bottom-right" variant="neutral" />;
+
+describe('Fab (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/Fab/Fab.tsx

@@ -1,17 +1,14 @@
-import { ElementType } from 'react';
-
-import { ElementProps } from '-';
-import { ButtonProps } from '-/components/Button';
-import { Tooltip } from '-/components/Tooltip';
-import { isValidIcon } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
 import './fab.scss';
+import { AriaAttributes, ElementType, isValidElement } from 'react';
+import { ButtonProps } from '-/components/Button';
+import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
+import { ElementProps } from '-/types/common';
 
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
 export type FabProps<As extends ElementType = 'button'> = Pick<
     ButtonProps<As>,
-    'as' | 'icon' | 'onClick' | 'showLabel' | 'toolTip'
+    'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'
 > &
     Required<Pick<ButtonProps<As>, 'label'>> & {
         /**
@@ -53,55 +50,70 @@ export type FabProps<As extends ElementType = 'button'> = Pick<
  *     }
  *
  * @name Fab
- * @phase DesignReview
+ * @phase UXReview
  */
-function Fab<As extends ElementType = 'button'>({
-    size = 'small',
-    variant = 'primary',
-    showLabel: showLabelProp = true,
-    as,
-    placement = 'bottom-right',
-    container = 'local',
-    label,
-    icon,
-    toolTip,
-    ...otherProps
-}: ElementProps<FabProps<As>, As>) {
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabelProp === false && icon;
-
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
+export function Fab<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<FabProps<As>, As>) {
+    const {
+        size = 'small',
+        variant = 'primary',
+        iconOnly: iconOnlyProp = false,
+        as: As = 'button',
+        placement = 'bottom-right',
+        container = 'local',
+        label,
+        icon,
+        toolTip,
+        ...otherProps
+    } = props;
 
-    const As: ElementType = as || 'button';
+    // ignore iconOnly=true if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
 
-    const button = (
+    const button = (triggerProps: TooltipTriggerProps) => (
         <As
             {...otherProps}
+            {...triggerProps}
             aria-label={label}
             data-bspk="fab"
             data-container={container}
             data-placement={placement}
-            data-round={hideLabel || undefined}
+            data-round={iconOnly || undefined}
             data-size={size}
             data-variant={variant}
+            onBlur={(e) => {
+                triggerProps.onBlur?.();
+                otherProps.onBlur?.(e);
+            }}
+            onFocus={(e) => {
+                triggerProps.onFocus?.();
+                otherProps.onFocus?.(e);
+            }}
+            onMouseLeave={(e) => {
+                triggerProps.onMouseLeave?.();
+                otherProps.onMouseLeave?.(e);
+            }}
+            onMouseOver={(e) => {
+                triggerProps.onMouseOver?.();
+                otherProps.onMouseOver?.(e);
+            }}
         >
-            {!!icon && <span data-fab-icon>{icon}</span>}
-            {!hideLabel && <span data-fab-label>{label}</span>}
+            {!!icon && isValidElement(icon) && (
+                <span aria-hidden={true} data-fab-icon>
+                    {icon}
+                </span>
+            )}
+            {!iconOnly && <span data-fab-label>{label}</span>}
         </As>
     );
 
-    return toolTip || hideLabel ? (
-        <Tooltip label={toolTip || label} placement="top">
-            {button}
-        </Tooltip>
-    ) : (
-        button
-    );
-}
+    if (toolTip || iconOnly)
+        return (
+            <Tooltip label={toolTip || label} placement="top">
+                {button}
+            </Tooltip>
+        );
 
-Fab.bspkName = 'Fab';
-
-export { Fab };
+    return button({});
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Fab/FabExample.tsx

@@ -1,7 +1,10 @@
 import { ButtonExample } from '-/components/Button/ButtonExample';
 import { ComponentExample } from '-/utils/demo';
 
+export const presets = ButtonExample.presets || [];
+
 export const FabExample: ComponentExample = {
-    containerStyle: { width: '100%' },
-    presets: ButtonExample.presets,
+    containerStyle: { display: 'block', height: '152px', width: '100%' },
+    presets,
+    variants: false,
 };

package/src/components/Fab/fab.scss

@@ -113,7 +113,7 @@
     }
 
     &[data-round] {
-        border-radius: var(--radius-circular);
+        border-radius: var(--radius-full);
         aspect-ratio: 1/1;
         padding: 0;
     }

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

@@ -0,0 +1,14 @@
+import { FileUpload } from './FileUpload';
+import { presets } from './FileUploadExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+
+describe('FileUpload (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(
+                <FileUpload onCancel={() => {}} onError={() => {}} onUpload={() => {}} {...preset.propState} />,
+            ),
+        );
+    });
+});