@bspk/ui 1.3.19 → 1.3.20

package/src/components/Drawer/Drawer.tsx

@@ -1,127 +0,0 @@
-import './drawer.scss';
-import { SvgClose } from '@bspk/icons/Close';
-import { ReactNode } from 'react';
-import { Button } from '-/components/Button';
-import { Dialog, DialogProps } from '-/components/Dialog';
-
-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 { Button } from '@bspk/ui/Button';
- *     import { Drawer } from '@bspk/ui/Drawer';
- *
- *     () => {
- *         const [open, setOpen] = useState(false);
- *
- *         return (
- *             <div style={{ width: '100%', height: 180 }}>
- *                 <Button label="Toggle Drawer" onClick={() => setOpen(!open)} />
- *                 <Drawer
- *                     closeButton={true}
- *                     header="Example Drawer"
- *                     id="exampleId"
- *                     modal={false}
- *                     onClose={() => setOpen(false)}
- *                     open={open}
- *                     placement="right"
- *                 >
- *                     <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
- *                 </Drawer>
- *             </div>
- *         );
- *     };
- *
- * @name Drawer
- * @phase Stable
- */
-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 && <div data-drawer-title>{header}</div>}
-                    {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

@@ -1,117 +0,0 @@
-import { useState } from 'react';
-import { Drawer, DrawerProps } from '.';
-import { Button } from '-/components/Button';
-import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
-import { ComponentExampleFn, Preset } from '-/utils/demo';
-
-export const presets: Preset<DrawerProps>[] = [
-    {
-        label: 'Left Responsive',
-        propState: { closeButton: true, modal: false, placement: 'left', children: null },
-    },
-    {
-        label: 'Right Responsive',
-        propState: { closeButton: true, modal: false, placement: 'right', children: null },
-    },
-];
-
-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 handleOnClose = () => {
-            action('Drawer closed');
-            setState({ open: false });
-        };
-
-        const toggleButton = <Button label="Toggle Drawer" onClick={() => setState({ open: !props.open })} />;
-
-        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,
-                            }}
-                        >
-                            {toggleButton}
-                        </div>
-                    </>
-                );
-            case 'Right Responsive':
-                return (
-                    <>
-                        <div
-                            style={{
-                                transition: 'margin 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
-                                marginRight: props.open ? `280px` : 0,
-                            }}
-                        >
-                            {toggleButton}
-                        </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)' }}>
-                            {toggleButton}
-                        </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,
-});
-
-export const Usage = () => {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <div style={{ width: '100%', height: 180 }}>
-            <Button label="Toggle Drawer" onClick={() => setOpen(!open)} />
-            <Drawer
-                closeButton={true}
-                header="Example Drawer"
-                id="exampleId"
-                modal={false}
-                onClose={() => setOpen(false)}
-                open={open}
-                placement="right"
-            >
-                <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
-            </Drawer>
-        </div>
-    );
-};

package/src/components/Drawer/drawer.scss

@@ -1,74 +0,0 @@
-[data-bspk='drawer'] {
-    padding: var(--spacing-sizing-03);
-    color: var(--foreground-neutral-on-surface);
-    background: var(--surface-neutral-t1-base);
-    display: flex;
-    flex-direction: column;
-
-    &[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;
-            top: 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;
-        }
-
-        [data-drawer-title] {
-            font: var(--heading-h4);
-        }
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Drawer/index.tsx

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