@bspk/ui 1.1.32 → 1.1.33

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable react/no-multi-comp */ import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
+
+import { CommonProps } from '-';
+import { Button } from '-/components/Button';
+import { Link } from '-/components/Link';
+import { ListItem } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { Txt } from '-/components/Txt';
+import { useCombobox } from '-/hooks/useCombobox';
+import { useId } from '-/hooks/useId';
+import './breadcrumb.scss';
+
+export type BreadcrumbItem = {
+    /**
+     * The label of the breadcrumb item.
+     *
+     * @example
+     *     'Page 1';
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The href of the breadcrumb item.
+     *
+     * @example
+     *     'https://bspk.anywhere.re';
+     *
+     * @required
+     */
+    href: string;
+};
+
+export type BreadcrumbProps = CommonProps<'id'> & {
+    /**
+     * The array of breadcrumb items.
+     *
+     * If **less than 2** items are provided, the component will not render.
+     *
+     * @example
+     *     [
+     *         { label: 'Level 1', href: '#level-1' },
+     *         { label: 'Level 2', href: '#level-2' },
+     *         { label: 'Level 3', href: '#level-3' },
+     *         { label: 'Level 4', href: '#level-4' },
+     *         { label: 'Level 5', href: '#level-5' },
+     *         { label: 'Level 6', href: '#level-6' },
+     *         { label: 'Level 7', href: '#level-7' },
+     *         { label: 'Level 8', href: '#level-8' },
+     *         { label: 'Level 9', href: '#level-9' },
+     *         { label: 'Level 10', href: '#level-10' },
+     *     ];
+     *
+     * @type Array<BreadcrumbItem>
+     * @required
+     */
+
+    items: BreadcrumbItem[];
+};
+
+const BreadcrumbDivider = () => <SvgChevronRight aria-hidden={true} />;
+
+/**
+ * Used to indicate the current page's location within a navigational hierarchy.
+ *
+ * @example
+ *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
+ *
+ *     function Example() {
+ *         return (
+ *             <Breadcrumb
+ *                 items={[
+ *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
+ *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Breadcrumb
+ * @phase DesignReview
+ */
+function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
+    const id = useId(propId);
+    const items = Array.isArray(itemsProp) ? itemsProp : [];
+
+    const { elements, isOpen, menuProps, toggleProps, activeIndex } = useCombobox({
+        refWidth: false,
+    });
+
+    const middleItems = items.slice(1, items.length - 1);
+
+    if (items.length < 2) return null; // No items to render
+
+    return (
+        <nav aria-label="Breadcrumb" data-bspk="breadcrumb" id={id}>
+            <ol>
+                <li>
+                    <Link href={items[0].href} label={items[0].label} />
+                    <BreadcrumbDivider />
+                </li>
+                {items.length > 5 ? (
+                    <li>
+                        <Button
+                            icon={<SvgMoreHoriz />}
+                            innerRef={elements.setReference}
+                            label={`Access to ${middleItems.length} pages`}
+                            showLabel={false}
+                            size="small"
+                            toolTip={`${middleItems.length} pages`}
+                            variant="tertiary"
+                            {...toggleProps}
+                        />
+                        {isOpen && (
+                            <Menu
+                                innerRef={elements.setFloating}
+                                itemDisplayCount={false}
+                                {...menuProps}
+                                style={{
+                                    ...menuProps.style,
+                                    width: '200px',
+                                }}
+                            >
+                                {middleItems.map((item, idx) => (
+                                    <ListItem
+                                        key={`Breadcrumb-${idx}`}
+                                        {...item}
+                                        active={activeIndex === idx || undefined}
+                                        id={`${id}-item-${idx}`}
+                                    />
+                                ))}
+                            </Menu>
+                        )}
+                        <BreadcrumbDivider />
+                    </li>
+                ) : (
+                    middleItems.map((item, idx) => (
+                        <li key={`Breadcrumb-${idx}`}>
+                            <Link {...item} />
+                            <BreadcrumbDivider />
+                        </li>
+                    ))
+                )}
+                <li aria-current="true">
+                    <Txt variant="body-base">{items[items.length - 1].label}</Txt>
+                </li>
+            </ol>
+        </nav>
+    );
+}
+
+Breadcrumb.bspkName = 'Breadcrumb';
+
+export { Breadcrumb };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Breadcrumb/BreadcrumbExample.tsx

@@ -0,0 +1,92 @@
+import { ComponentExample } from '-/utils/demo';
+
+import { BreadcrumbProps } from '.';
+
+export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
+    presets: [
+        {
+            label: '1 Item (nothing visible)',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                ],
+            },
+        },
+        {
+            label: '2 Items (minimum)',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                ],
+            },
+        },
+        {
+            label: '5 Items',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                    {
+                        label: 'Item 3',
+                        href: '#link-3',
+                    },
+                    {
+                        label: 'Item 4',
+                        href: '#link-4',
+                    },
+                    {
+                        label: 'Item 5',
+                        href: '#link-5',
+                    },
+                ],
+            },
+        },
+        {
+            label: '6 Items',
+            propState: {
+                items: [
+                    {
+                        label: 'Item 1',
+                        href: '#link-1',
+                    },
+                    {
+                        label: 'Item 2',
+                        href: '#link-2',
+                    },
+                    {
+                        label: 'Item 3',
+                        href: '#link-3',
+                    },
+                    {
+                        label: 'Item 4',
+                        href: '#link-4',
+                    },
+                    {
+                        label: 'Item 5',
+                        href: '#link-5',
+                    },
+                    {
+                        label: 'Item 6',
+                        href: '#link-6',
+                    },
+                ],
+            },
+        },
+    ],
+};

package/src/components/Breadcrumb/breadcrumb.scss

@@ -0,0 +1,16 @@
+[data-bspk='breadcrumb'] {
+    width: 100%;
+
+    ol {
+        display: flex;
+        align-items: center;
+        flex-flow: row wrap;
+        list-style: none;
+        gap: var(--spacing-sizing-02);
+
+        li {
+            display: flex;
+            gap: var(--spacing-sizing-02);
+        }
+    }
+}

package/src/components/Breadcrumb/index.tsx

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

package/src/components/Button/Button.tsx

@@ -0,0 +1,163 @@
+import { ElementType, ReactNode, isValidElement } from 'react';
+
+import { ButtonSize, CommonProps, ElementProps, SetRef } from '-';
+import { Tooltip } from '-/components/Tooltip';
+import { isValidIcon } from '-/utils/children';
+import { useErrorLogger } from '-/utils/errors';
+import './button.scss';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+    /**
+     * The label of the button.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     *
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * The element type to render as.
+     *
+     * @default button
+     * @type ElementType
+     */
+    as?: As;
+    /**
+     * The function of the button is destructive.
+     *
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * The size of the button.
+     *
+     * @default medium
+     */
+    size?: ButtonSize;
+    /**
+     * The color variant of the button.
+     *
+     * @default primary
+     */
+    variant?: ButtonVariant;
+    /**
+     * The width of the button.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * If `string` is passed, it will be used as the label.
+     *
+     * If `ReactNode` is passed, it will override the default button content. (Not recommended)
+     */
+    children?: ReactNode;
+    /** The tool tip text that appears when hovered. */
+    toolTip?: string;
+    /** The function to call when the button is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** A ref to the Button element. */
+    innerRef?: SetRef<HTMLButtonElement>;
+};
+
+/**
+ * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
+ *
+ * @example
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { SvgPerson } from '@bspk/icons/Person';
+ *
+ *     function Example() {
+ *         return (
+ *             <Button
+ *                 label="Click Me"
+ *                 size="medium"
+ *                 variant="primary"
+ *                 onClick={() => console.log('Button clicked')}
+ *                 icon={<SvgPerson />}
+ *             />
+ *         );
+ *     }
+ *
+ * @name Button
+ * @phase DesignReview
+ */
+function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element {
+    const {
+        size = 'medium',
+        variant = 'primary',
+        destructive = false,
+        width = 'hug',
+        as: As = 'button',
+        disabled = false,
+        label: labelProp,
+        icon,
+        // showLabel: showLabelProp = true,
+        showLabel = true,
+        toolTip: toolTipProp,
+        children,
+        innerRef,
+        ...containerProps
+    } = props;
+    const label = typeof children === 'string' ? children : labelProp || '';
+
+    // ignore showLabel=false if there is no icon
+    const hideLabel = showLabel === false && icon;
+    const toolTip = toolTipProp || (hideLabel ? label : undefined);
+    const { logError } = useErrorLogger();
+    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
+    logError(!label, 'Button - The button must have a label.');
+
+    const button = (
+        <As
+            {...containerProps}
+            aria-label={label}
+            data-bspk="button"
+            data-destructive={destructive || undefined}
+            data-size={size}
+            data-touch-target-parent
+            data-variant={variant}
+            data-width={width}
+            disabled={disabled || undefined}
+            ref={innerRef}
+        >
+            {children && typeof children !== 'string' ? (
+                children
+            ) : (
+                <>
+                    {!!icon && isValidElement(icon) && <span data-button-icon>{icon}</span>}
+                    {!hideLabel && <span data-button-label>{label}</span>}
+                </>
+            )}
+            <span data-touch-target />
+        </As>
+    );
+
+    if (toolTip) {
+        return (
+            <Tooltip label={toolTip} placement="top">
+                {button}
+            </Tooltip>
+        );
+    }
+
+    return button;
+}
+
+Button.bspkName = 'Button';
+
+export { Button };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Button/ButtonExample.tsx

@@ -0,0 +1,30 @@
+import { ComponentExample } from '-/utils/demo';
+
+import { ButtonProps } from '.';
+
+export const ButtonExample: ComponentExample<ButtonProps> = {
+    presets: [
+        {
+            label: 'Icon & Text',
+            propState: {
+                icon: 'Add',
+                label: 'Add',
+            },
+        },
+        {
+            label: 'Text only',
+            propState: {
+                label: 'Add',
+                icon: undefined,
+            },
+        },
+        {
+            label: 'Icon only',
+            propState: {
+                showLabel: false,
+                icon: 'Add',
+                label: 'Add',
+            },
+        },
+    ],
+};

package/src/components/Button/button.scss

@@ -0,0 +1,214 @@
+[data-bspk='button'] {
+    flex-direction: row;
+    gap: var(--spacing-sizing-02);
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    text-decoration: none;
+    width: fit-content;
+    font-family: var(--typeface);
+
+    [data-touch-target] {
+        min-width: var(--spacing-sizing-12);
+        min-height: var(--spacing-sizing-12);
+    }
+
+    &[data-width='hug'] {
+        width: fit-content;
+    }
+
+    &[data-width='fill'] {
+        width: 100%;
+    }
+
+    &[data-size='x-small'] {
+        font-size: var(--typography-size-xs);
+        line-height: var(--typography-line-height-lh-1);
+        height: var(--spacing-sizing-06);
+        min-width: var(--spacing-sizing-06);
+        gap: var(--spacing-sizing-02);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: 0 var(--spacing-sizing-02);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-04);
+            height: var(--spacing-sizing-04);
+        }
+    }
+
+    &[data-size='small'] {
+        font-size: var(--typography-size-sm);
+        line-height: var(--typography-line-height-lh-2);
+        height: var(--spacing-sizing-08);
+        min-width: var(--spacing-sizing-08);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: 6px var(--spacing-sizing-04);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-05);
+            height: var(--spacing-sizing-05);
+        }
+    }
+
+    &[data-size='medium'] {
+        font-size: var(--typography-size-base);
+        line-height: var(--typography-line-height-lh-2);
+        height: var(--spacing-sizing-10);
+        min-width: var(--spacing-sizing-10);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-05);
+            height: var(--spacing-sizing-05);
+        }
+    }
+
+    &[data-size='large'] {
+        font-size: var(--typography-size-bp-md);
+        line-height: var(--typography-line-height-lh-4);
+        height: var(--spacing-sizing-12);
+        min-width: var(--spacing-sizing-12);
+
+        &:has([data-button-label]),
+        &[data-override] {
+            padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+        }
+
+        [data-button-icon] {
+            width: var(--spacing-sizing-06);
+            height: var(--spacing-sizing-06);
+        }
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+    }
+
+    [data-button-icon] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    [data-button-label] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    &[data-variant='primary'] {
+        --primary-background: var(--surface-brand-primary);
+
+        background: linear-gradient(var(--primary-background), var(--primary-background));
+        color: var(--foreground-brand-on-primary);
+        border-radius: var(--radius-small);
+
+        &[disabled] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            background: var(--interactions-disabled-opacity);
+        }
+
+        &:not([disabled]) {
+            [data-pseudo='hover'] > &,
+            &:hover {
+                background:
+                    linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),
+                    linear-gradient(var(--primary-background), var(--primary-background));
+            }
+
+            [data-pseudo='active'] > &,
+            &:active {
+                background:
+                    linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),
+                    linear-gradient(var(--primary-background), var(--primary-background));
+            }
+
+            [data-pseudo='focus'] > &,
+            &:focus-visible {
+                outline: solid 2px var(--stroke-neutral-focus);
+            }
+        }
+
+        &[data-destructive] {
+            --primary-background: var(--status-error);
+
+            color: var(--foreground-brand-on-primary);
+        }
+    }
+
+    &[data-variant='secondary'] {
+        border: solid 1px var(--stroke-neutral-base);
+        border-radius: var(--radius-small);
+        color: var(--foreground-neutral-on-surface-variant-01);
+
+        &[disabled] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            border: solid 1px var(--stroke-neutral-disabled-light);
+        }
+
+        &:not([disabled]) {
+            [data-pseudo='hover'] > &,
+            &:hover {
+                background-color: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] > &,
+            &:active {
+                background-color: var(--interactions-neutral-press-opacity);
+            }
+
+            [data-pseudo='focus'] > &,
+            &:focus-visible {
+                outline: solid 2px var(--stroke-neutral-focus);
+            }
+        }
+
+        &[data-destructive] {
+            background: transparent;
+            color: var(--status-error);
+            border: solid 1px var(--status-error);
+        }
+    }
+
+    &[data-variant='tertiary'] {
+        background: transparent;
+        color: var(--foreground-neutral-on-surface-variant-01);
+
+        &[disabled] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        &:not([disabled]) {
+            [data-pseudo='hover'] > &,
+            &:hover {
+                background: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] > &,
+            &:active {
+                background: var(--interactions-neutral-press-opacity);
+            }
+
+            [data-pseudo='focus'] > &,
+            &:focus-visible {
+                outline: solid 2px var(--stroke-neutral-focus);
+            }
+        }
+
+        &[data-destructive] {
+            color: var(--status-error);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Button/index.tsx

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