@bspk/ui 1.2.0 → 1.3.0

package/src/components/BottomNavigation/BottomNavigationExample.tsx

@@ -0,0 +1,121 @@
+import { SvgCloud } from '@bspk/icons/Cloud';
+import { SvgCloudFill } from '@bspk/icons/CloudFill';
+import { SvgEvent } from '@bspk/icons/Event';
+import { SvgEventFill } from '@bspk/icons/EventFill';
+import { SvgPerson } from '@bspk/icons/Person';
+import { SvgPersonFill } from '@bspk/icons/PersonFill';
+import { SvgSettings } from '@bspk/icons/Settings';
+import { SvgSettingsFill } from '@bspk/icons/SettingsFill';
+import { SvgSmartphone } from '@bspk/icons/Smartphone';
+import { SvgSmartphoneFill } from '@bspk/icons/SmartphoneFill';
+import { BottomNavigationProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<BottomNavigationProps>[] = [
+    {
+        label: 'Three options',
+        propState: {
+            options: [
+                {
+                    value: '1',
+                    label: 'Item 1',
+                    icon: <SvgSettings />,
+                    iconSelected: <SvgSettingsFill />,
+                },
+                {
+                    value: '2',
+                    label: 'Item 2',
+                    icon: <SvgCloud />,
+                    iconSelected: <SvgCloudFill />,
+                },
+                {
+                    value: '3',
+                    label: 'Item 3',
+                    icon: <SvgSmartphone />,
+                    iconSelected: <SvgSmartphoneFill />,
+                },
+            ],
+            value: '1',
+            label: 'Single Icon',
+        },
+    },
+    {
+        label: 'Five options',
+        propState: {
+            options: [
+                {
+                    value: '1',
+                    label: 'Item 1',
+                    icon: <SvgSettings />,
+                    iconSelected: <SvgSettingsFill />,
+                },
+                {
+                    value: '2',
+                    label: 'Item 2',
+                    icon: <SvgCloud />,
+                    iconSelected: <SvgCloudFill />,
+                },
+                {
+                    value: '3',
+                    label: 'Item 3',
+                    icon: <SvgSmartphone />,
+                    iconSelected: <SvgSmartphoneFill />,
+                },
+                {
+                    value: '4',
+                    label: 'Item 4',
+                    icon: <SvgEvent />,
+                    iconSelected: <SvgEventFill />,
+                },
+                {
+                    value: '5',
+                    label: 'Item 5',
+                    icon: <SvgPerson />,
+                    iconSelected: <SvgPersonFill />,
+                },
+            ],
+            value: '1',
+            label: 'Single Icon',
+        },
+    },
+    {
+        label: 'Disabled option',
+        propState: {
+            options: [
+                {
+                    value: '1',
+                    label: 'Item 1',
+                    icon: <SvgSettings />,
+                    iconSelected: <SvgSettingsFill />,
+                },
+                {
+                    value: '2',
+                    label: 'Item 2',
+                    icon: <SvgCloud />,
+                    iconSelected: <SvgCloudFill />,
+                    disabled: true,
+                },
+            ],
+            value: '1',
+            label: 'Single Icon',
+        },
+    },
+];
+
+export const BottomNavigationExample: ComponentExample<BottomNavigationProps> = {
+    containerStyle: {
+        height: '200px',
+        width: '100%',
+        padding: 0,
+        justifyContent: 'end',
+    },
+    defaultState: {
+        value: '1',
+        options: presets[0].propState.options,
+    },
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => <Component {...props} />,
+    sections: [],
+    variants: false,
+};

package/src/components/BottomNavigation/bottom-navigation.scss

@@ -0,0 +1,87 @@
+ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
+    width: 100%;
+    border-top: solid 1px var(--stroke-neutral-low);
+    box-sizing: border-box;
+    background-color: var(--background-base);
+    height: var(--spacing-sizing-13);
+
+    &[data-variant='elevated'] {
+        box-shadow: var(--drop-shadow-north);
+    }
+
+    &:has(:focus-visible) {
+        outline: none;
+    }
+
+    li {
+        flex: 1;
+        position: relative;
+        height: var(--spacing-sizing-13);
+        color: var(--foreground-neutral-on-surface-variant-02);
+        font: var(--labels-x-small);
+        flex-direction: column;
+        gap: 0;
+        overflow: hidden;
+
+        &[data-pseudo='focus'] > &,
+        &:focus-visible {
+            outline: solid 2px var(--stroke-neutral-focus);
+        }
+
+        &[aria-selected='true'] {
+            color: var(--foreground-brand-primary);
+        }
+
+        &[aria-selected='true']::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: var(--spacing-sizing-06);
+            height: 2px;
+            border-radius: 0 0 2px 2px;
+            background-color: var(--foreground-brand-primary);
+        }
+
+        &[aria-disabled='true'] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        &:not([aria-disabled='true']) {
+            [data-pseudo='hover'] &,
+            &:hover {
+                background-color: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] &,
+            &:active {
+                background-color: var(--interactions-neutral-press-opacity);
+            }
+        }
+    }
+
+    &[data-mode='fixed'] {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        background: var(--surface-neutral-t1-base);
+        box-shadow: var(--drop-shadow-north);
+        z-index: var(--z-index-button-dock);
+    }
+}
+
+@media (width >= 640px) {
+    ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
+        li {
+            flex-direction: row;
+            align-items: center;
+            gap: var(--spacing-sizing-02);
+
+            &[data-active='true']::after {
+                width: var(--spacing-sizing-12);
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BottomNavigation/index.tsx

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

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

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

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,17 +1,13 @@
+import './breadcrumb.scss';
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
-
 import { Button } from '-/components/Button';
 import { Link } from '-/components/Link';
-import { ListItem } from '-/components/ListItem';
-import { Menu } from '-/components/Menu';
+import { ListItemMenu, ListItemMenuProps } from '-/components/ListItemMenu';
 import { Txt } from '-/components/Txt';
-import { useCombobox } from '-/hooks/useCombobox';
 import { useId } from '-/hooks/useId';
 import { CommonProps } from '-/types/common';
-
-import './breadcrumb.scss';
-import '-/components/ListItem/list-item.scss';
+import { useIds } from '-/utils/useIds';
 
 export type BreadcrumbItem = {
     /**
@@ -34,32 +30,33 @@ export type BreadcrumbItem = {
     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
-     */
+export type BreadcrumbProps = CommonProps<'id'> &
+    Pick<ListItemMenuProps, 'scrollLimit'> & {
+        /**
+         * 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[];
-};
+        items: BreadcrumbItem[];
+    };
 
 /**
  * Used to indicate the current page's location within a navigational hierarchy.
@@ -89,17 +86,12 @@ export type BreadcrumbProps = CommonProps<'id'> & {
  * @name Breadcrumb
  * @phase UXReview
  */
-export function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
+export function Breadcrumb({ id: propId, items: itemsProp = [], scrollLimit }: 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);
+    const items = useIds(`breadcrumb-${id}`, itemsProp);
 
-    if (items.length < 2) return null; // No items to render
+    if (items.length < 2) return null;
 
     return (
         <nav aria-label="Breadcrumb" data-bspk="breadcrumb" id={id}>
@@ -110,42 +102,34 @@ export function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
                 </li>
                 {items.length > 5 ? (
                     <li>
-                        <Button
-                            icon={<SvgMoreHoriz />}
-                            iconOnly
-                            innerRef={elements.setReference}
-                            label={`Access to ${middleItems.length} pages`}
-                            size="small"
-                            toolTip={`${middleItems.length} pages`}
-                            variant="tertiary"
-                            {...toggleProps}
-                        />
-                        {isOpen && (
-                            <Menu
-                                innerRef={elements.setFloating}
-                                itemCount={middleItems.length}
-                                itemDisplayCount={middleItems.length <= 10 ? middleItems.length : 10}
-                                {...menuProps}
-                                role="navigation"
-                                style={{
-                                    ...menuProps.style,
-                                    width: '200px',
-                                }}
-                            >
-                                {middleItems.map((item, idx) => (
-                                    <ListItem
-                                        key={`Breadcrumb-${idx}`}
-                                        {...item}
-                                        active={activeIndex === idx || undefined}
-                                        id={`${id}-item-${idx}`}
-                                    />
-                                ))}
-                            </Menu>
-                        )}
+                        <ListItemMenu
+                            hideWhenClosed
+                            itemOnClick={({ setShow }) => setShow(false)}
+                            items={items.slice(1, items.length - 1)}
+                            label="Expanded breadcrumb"
+                            owner="Breadcrumb"
+                            placement="bottom"
+                            role="menu"
+                            scrollLimit={scrollLimit}
+                            width="200px"
+                        >
+                            {(triggerProps, { setRef, itemCount }) => (
+                                <Button
+                                    {...triggerProps}
+                                    icon={<SvgMoreHoriz />}
+                                    iconOnly
+                                    innerRef={setRef}
+                                    label={`Access to ${itemCount} pages`}
+                                    onClick={triggerProps.onClick}
+                                    size="small"
+                                    variant="tertiary"
+                                />
+                            )}
+                        </ListItemMenu>
                         <SvgChevronRight aria-hidden />
                     </li>
                 ) : (
-                    middleItems.map((item, idx) => (
+                    items.slice(1, items.length - 1).map((item, idx) => (
                         <li key={`Breadcrumb-${idx}`}>
                             <Link {...item} />
                             <SvgChevronRight aria-hidden />