@bspk/ui 1.2.0 → 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/EmptyStateExample.tsx

@@ -1,6 +1,26 @@
 import { EmptyStateProps } from '.';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<EmptyStateProps>[] = [
+    {
+        label: 'With Custom Content',
+        propState: {
+            callToAction: undefined,
+            body: 'Example body',
+            header: 'Example header',
+            children: (
+                <ExamplePlaceholder
+                    style={{
+                        height: '200px',
+                        width: '60%',
+                        minWidth: '250px',
+                    }}
+                />
+            ),
+        },
+    },
+];
 
 export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
@@ -9,6 +29,8 @@ export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action
         {
             label: 'With CallToAction',
             propState: {
+                body: 'Example body',
+                header: 'Example header',
                 callToAction: {
                     label: 'Add payment method',
                     onClick: () => action('Add payment method clicked!'),
@@ -16,20 +38,6 @@ export const EmptyStateExample: ComponentExampleFn<EmptyStateProps> = ({ action
                 children: undefined,
             },
         },
-        {
-            label: 'With Custom Content',
-            propState: {
-                callToAction: undefined,
-                children: (
-                    <ExamplePlaceholder
-                        style={{
-                            height: '200px',
-                            width: '60%',
-                            minWidth: '250px',
-                        }}
-                    />
-                ),
-            },
-        },
+        ...presets,
     ],
 });

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,11 +1,9 @@
+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';
 
-import './fab.scss';
-
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
 
 export type FabProps<As extends ElementType = 'button'> = Pick<
@@ -74,7 +72,7 @@ export function Fab<As extends ElementType = 'button'>(props: AriaAttributes & E
     const button = (triggerProps: TooltipTriggerProps) => (
         <As
             {...otherProps}
-            aria-describedby={triggerProps['aria-describedby'] || otherProps['aria-describedby']}
+            {...triggerProps}
             aria-label={label}
             data-bspk="fab"
             data-container={container}
@@ -82,6 +80,10 @@ export function Fab<As extends ElementType = 'button'>(props: AriaAttributes & E
             data-round={iconOnly || undefined}
             data-size={size}
             data-variant={variant}
+            onBlur={(e) => {
+                triggerProps.onBlur?.();
+                otherProps.onBlur?.(e);
+            }}
             onFocus={(e) => {
                 triggerProps.onFocus?.();
                 otherProps.onFocus?.(e);

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

package/src/components/FileUpload/FileUpload.tsx

@@ -1,3 +1,4 @@
+import './file-upload.scss';
 import { SvgCloudUpload } from '@bspk/icons/CloudUpload';
 import { useRef, ChangeEvent, useState, useEffect } from 'react';
 import { Button } from '-/components/Button';
@@ -7,8 +8,6 @@ import { Txt } from '-/components/Txt';
 import { DEFAULT_ERROR_MESSAGE, FileEntry, FileUploadStatus, MimeType } from '-/utils/fileUploads';
 import { randomString } from '-/utils/random';
 
-import './file-upload.scss';
-
 const MB = 1048576 as const;
 
 export type FileEntryUpload = FileEntry & { file: File };

package/src/components/FileUpload/FileUploadExample.tsx

@@ -1,29 +1,31 @@
 import { useEffect, useState } from 'react';
 import { FileUpload, FileUploadProps } from '.';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 import { FileEntry } from '-/utils/fileUploads';
 import { randomNumber } from '-/utils/random';
 
+export const presets: Preset<FileUploadProps>[] = [
+    {
+        label: 'multiple files',
+        propState: {
+            dragAndDrop: false,
+            multipleFiles: true,
+        },
+    },
+    {
+        label: 'Drag and Drop Multiple Files',
+        propState: {
+            dragAndDrop: true,
+            multipleFiles: true,
+        },
+    },
+];
+
 export const FileUploadExample: ComponentExampleFn<FileUploadProps> = ({ action }) => ({
     render: ({ props, preset }) => {
         return <FileUploadExampleMockUpload key={preset?.label} {...props} action={action} />;
     },
-    presets: [
-        {
-            label: 'multiple files',
-            propState: {
-                dragAndDrop: false,
-                multipleFiles: true,
-            },
-        },
-        {
-            label: 'Drag and Drop Multiple Files',
-            propState: {
-                dragAndDrop: true,
-                multipleFiles: true,
-            },
-        },
-    ],
+    presets,
     variants: false,
 });
 

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

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

package/src/components/FileUploadItem/FileUploadItem.tsx

@@ -1,14 +1,12 @@
+import './file-upload-item.scss';
 import { SvgDelete } from '@bspk/icons/Delete';
 import { SvgDraft } from '@bspk/icons/Draft';
-
 import { Button } from '-/components/Button';
 import { InlineAlert } from '-/components/InlineAlert';
 import { ProgressBar } from '-/components/ProgressBar';
 import { Truncated } from '-/components/Truncated';
 import { DEFAULT_ERROR_MESSAGE, FileEntry } from '-/utils/fileUploads';
 
-import './file-upload-item.scss';
-
 export type FileUploadItemProps = FileEntry & {
     /**
      * The function to call when the Cancel button is clicked.

package/src/components/FileUploadItem/FileUploadItemExample.tsx

@@ -2,9 +2,54 @@ import { useState } from 'react';
 import { FileUploadItem } from './FileUploadItem';
 import { FileUploadItemProps } from '.';
 import { useTimeout } from '-/hooks/useTimeout';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+import { FileUploadStatus } from '-/utils/fileUploads';
 import { randomNumber } from '-/utils/random';
 
+export const presets: Preset<FileUploadItemProps>[] = [
+    {
+        label: 'long file name',
+        propState: {
+            fileName: 'I-think-this-is-a-long-file-name.txt',
+            status: 'uploading' as FileUploadStatus,
+            cancelButtonLabel: 'Close',
+            fileSize: 10,
+            id: '10',
+        },
+    },
+    {
+        label: 'state: uploading',
+        propState: {
+            fileName: 'basic-file.png',
+            status: 'uploading' as FileUploadStatus,
+            fileSize: 1.2,
+            cancelButtonLabel: 'Cancel',
+            id: '1.2',
+        },
+    },
+    {
+        label: 'state: success',
+        propState: {
+            fileName: 'success-story.pdf',
+            status: 'complete' as FileUploadStatus,
+            cancelButtonLabel: 'Bye',
+            fileSize: 42,
+            id: '42',
+        },
+    },
+    {
+        label: 'state: failed',
+        propState: {
+            fileName: 'file-name.txt',
+            status: 'error' as FileUploadStatus,
+            errorMessage: 'File too large. Please upload a smaller file.',
+            cancelButtonLabel: 'Escape',
+            fileSize: 10000000,
+            id: '10000000',
+        },
+    },
+];
+
 export const FileUploadItemExample: ComponentExampleFn<FileUploadItemProps> = ({ action }) => ({
     render: ({ props, preset }) => {
         let progress = props.progress;
@@ -20,45 +65,7 @@ export const FileUploadItemExample: ComponentExampleFn<FileUploadItemProps> = ({
             />
         );
     },
-    presets: [
-        {
-            label: 'long file name',
-            propState: {
-                fileName: 'I-think-this-is-a-long-file-name.txt',
-                status: 'uploading',
-                cancelButtonLabel: 'Close',
-                fileSize: 10,
-            },
-        },
-        {
-            label: 'state: uploading',
-            propState: {
-                fileName: 'basic-file.png',
-                status: 'uploading',
-                fileSize: 1.2,
-                cancelButtonLabel: 'Cancel',
-            },
-        },
-        {
-            label: 'state: success',
-            propState: {
-                fileName: 'success-story.pdf',
-                status: 'complete',
-                cancelButtonLabel: 'Bye',
-                fileSize: 42,
-            },
-        },
-        {
-            label: 'state: failed',
-            propState: {
-                fileName: 'file-name.txt',
-                status: 'error',
-                errorMessage: 'File too large. Please upload a smaller file.',
-                cancelButtonLabel: 'Escape',
-                fileSize: 10000000,
-            },
-        },
-    ],
+    presets,
     variants: false,
 });