@bspk/ui 1.2.0 → 1.3.0

package/src/components/Breadcrumb/BreadcrumbExample.tsx

@@ -1,158 +1,160 @@
 import { BreadcrumbProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
-    presets: [
-        {
-            label: '1 Item (nothing visible)',
-            propState: {
-                items: [
-                    {
-                        label: 'Item 1',
-                        href: '#link-1',
-                    },
-                ],
-            },
+export const presets: Preset<BreadcrumbProps>[] = [
+    {
+        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: '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: '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',
-                    },
-                ],
-            },
+    },
+    {
+        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',
+                },
+            ],
         },
-        {
-            label: 'NOT recommended',
-            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',
-                    },
-                    {
-                        label: 'Item 7',
-                        href: '#link-7',
-                    },
-                    {
-                        label: 'Item 8',
-                        href: '#link-8',
-                    },
-                    {
-                        label: 'Item 9',
-                        href: '#link-9',
-                    },
-                    {
-                        label: 'Item 10',
-                        href: '#link-10',
-                    },
-                    {
-                        label: 'Item 11',
-                        href: '#link-11',
-                    },
-                    {
-                        label: 'Item 12',
-                        href: '#link-12',
-                    },
-                    {
-                        label: 'Item 13',
-                        href: '#link-13',
-                    },
-                    {
-                        label: 'Item 14',
-                        href: '#link-14',
-                    },
-                    {
-                        label: 'Item 15',
-                        href: '#link-15',
-                    },
-                ],
-            },
+    },
+    {
+        label: 'NOT recommended',
+        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',
+                },
+                {
+                    label: 'Item 7',
+                    href: '#link-7',
+                },
+                {
+                    label: 'Item 8',
+                    href: '#link-8',
+                },
+                {
+                    label: 'Item 9',
+                    href: '#link-9',
+                },
+                {
+                    label: 'Item 10',
+                    href: '#link-10',
+                },
+                {
+                    label: 'Item 11',
+                    href: '#link-11',
+                },
+                {
+                    label: 'Item 12',
+                    href: '#link-12',
+                },
+                {
+                    label: 'Item 13',
+                    href: '#link-13',
+                },
+                {
+                    label: 'Item 14',
+                    href: '#link-14',
+                },
+                {
+                    label: 'Item 15',
+                    href: '#link-15',
+                },
+            ],
         },
-    ],
+    },
+];
+
+export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
+    presets,
 };

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

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

package/src/components/Button/Button.tsx

@@ -1,10 +1,8 @@
+import './button.scss';
 import { AriaAttributes, ElementType, ReactNode, isValidElement } from 'react';
-
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
-import './button.scss';
-
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
 export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
@@ -119,13 +117,14 @@ export function Button<As extends ElementType = 'button'>(
 
     // ignore iconOnly if there is no icon
     const iconOnly = iconOnlyProp === true && !!icon;
-    // if toolTip label is not provided and iconOnly is true, toolTip should be label
+
+    // if toolTip text is not provided and iconOnly is true, toolTip text should be label
     const toolTip = toolTipProp || (iconOnly ? label : undefined);
 
     const button = (triggerProps: TooltipTriggerProps) => (
         <As
             {...containerProps}
-            aria-describedby={triggerProps['aria-describedby'] || containerProps['aria-describedby']}
+            {...triggerProps}
             aria-label={label}
             data-bspk="button"
             data-bspk-owner={owner || undefined}
@@ -135,6 +134,10 @@ export function Button<As extends ElementType = 'button'>(
             data-variant={variant}
             data-width={width}
             disabled={disabled || undefined}
+            onBlur={(e) => {
+                triggerProps.onBlur?.();
+                containerProps.onBlur?.(e);
+            }}
             onFocus={(e) => {
                 triggerProps.onFocus?.();
                 containerProps.onFocus?.(e);

package/src/components/Button/ButtonExample.tsx

@@ -1,34 +1,36 @@
 import { SvgPerson } from '@bspk/icons/Person';
 import { ButtonProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-export const ButtonExample: ComponentExample<ButtonProps> = {
-    presets: [
-        {
-            label: 'Icon & Text',
-            propState: {
-                icon: 'Add',
-                label: 'Add',
-                iconOnly: false,
-            },
+export const presets: Preset<ButtonProps>[] = [
+    {
+        label: 'Icon & Text',
+        propState: {
+            icon: 'Add',
+            label: 'Add',
+            iconOnly: false,
         },
-        {
-            label: 'Text only',
-            propState: {
-                label: 'Add',
-                icon: undefined,
-                iconOnly: false,
-            },
+    },
+    {
+        label: 'Text only',
+        propState: {
+            label: 'Add',
+            icon: undefined,
+            iconOnly: false,
         },
-        {
-            label: 'Icon only',
-            propState: {
-                iconOnly: true,
-                icon: 'Add',
-                label: 'Add',
-            },
+    },
+    {
+        label: 'Icon only',
+        propState: {
+            iconOnly: true,
+            icon: 'Add',
+            label: 'Add',
         },
-    ],
+    },
+];
+
+export const ButtonExample: ComponentExample<ButtonProps> = {
+    presets,
     variants: {
         iconOnly: () => ({ icon: <SvgPerson />, label: 'Person' }),
     },

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

@@ -0,0 +1,18 @@
+import { ButtonDock } from './ButtonDock';
+import { presets } from './ButtonDockExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('ButtonDock (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ButtonDock {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<ButtonDock {...presets[0].propState} />);
+
+        expect(getByText('Send')).toBeInTheDocument();
+    });
+});
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ButtonDock/ButtonDock.tsx

@@ -0,0 +1,68 @@
+import './button-dock.scss';
+import { Button, ButtonProps } from '-/components/Button/Button';
+
+export type ButtonDockProps = {
+    /**
+     * The primary button in the dock. If a secondary button is provided the primary will render on the right side.
+     *
+     * @required
+     */
+    primaryButton: ButtonProps;
+    /**
+     * Secondary button. If provided will render on the left side.
+     *
+     * @required
+     */
+    secondaryButton?: ButtonProps;
+    /**
+     * If more than one button is provided defines how the buttons should be arranged.
+     *
+     * @default fill
+     */
+    arrangement?: 'fill' | 'spread';
+    /**
+     * If the dock should render inline or fixed to the bottom of the viewport.
+     *
+     * @default inline
+     */
+    mode?: 'fixed' | 'inline';
+};
+
+/**
+ * A sticky or fixed bar containing action buttons that are to remain on the screen while the page scrolls. Alternative
+ * option to house the bar within the bottom of a page’s body content.
+ *
+ * @example
+ *     import { ButtonDock } from '@bspk/ui/ButtonDock';
+ *
+ *     function Example() {
+ *         return (
+ *             <ButtonDock
+ *                 primaryButton={{
+ *                     children: 'Send',
+ *                     label: 'send',
+ *                 }}
+ *                 secondaryButton={{
+ *                     children: 'Cancel',
+ *                     label: 'cancel',
+ *                 }}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ButtonDock
+ * @phase Dev
+ */
+export function ButtonDock({ primaryButton, secondaryButton, arrangement = 'fill', mode = 'inline' }: ButtonDockProps) {
+    const finalArrangement = secondaryButton ? arrangement : 'fill';
+
+    return (
+        <div data-arrangement={finalArrangement} data-bspk="button-dock" data-mode={mode}>
+            {secondaryButton && <Button {...{ size: 'medium', variant: 'secondary', ...secondaryButton }} />}
+
+            <Button {...{ size: 'medium', variant: 'primary', ...primaryButton }} />
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ButtonDock/ButtonDockExample.tsx

@@ -0,0 +1,77 @@
+import { ButtonDockProps } from '.';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+
+export const presets: Preset<ButtonDockProps>[] = [
+    {
+        label: 'One Button',
+        propState: {
+            mode: 'inline',
+            primaryButton: {
+                children: 'Send',
+                label: 'send',
+            },
+            secondaryButton: undefined,
+        },
+    },
+    {
+        label: 'Two Buttons',
+        propState: {
+            mode: 'inline',
+            arrangement: 'fill',
+            secondaryButton: {
+                children: 'Cancel',
+                label: 'cancel',
+            },
+            primaryButton: {
+                children: 'Send',
+                label: 'send',
+            },
+        },
+    },
+    {
+        label: 'Two Buttons Spread',
+        propState: {
+            mode: 'inline',
+            arrangement: 'spread',
+            secondaryButton: {
+                children: 'Cancel',
+                label: 'cancel',
+            },
+            primaryButton: {
+                children: 'Send',
+                label: 'send',
+            },
+        },
+    },
+];
+
+export const ButtonDockExample: ComponentExampleFn<ButtonDockProps> = ({ action }) => ({
+    containerStyle: {
+        height: '200px',
+        width: '100%',
+        padding: '0 0 16px 0',
+        justifyContent: 'end',
+        overflow: 'hidden',
+    },
+    defaultState: presets[1].propState,
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => {
+        const newProps = { ...props };
+        if (newProps.primaryButton) {
+            newProps.primaryButton = {
+                ...newProps.primaryButton,
+                onClick: () => action('Primary button clicked!'),
+            };
+        }
+        if (newProps.secondaryButton) {
+            newProps.secondaryButton = {
+                ...newProps.secondaryButton,
+                onClick: () => action('Secondary button clicked!'),
+            };
+        }
+        return <Component {...newProps} />;
+    },
+    sections: [],
+    variants: false,
+});

package/src/components/ButtonDock/button-dock.scss

@@ -0,0 +1,49 @@
+[data-bspk='button-dock'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
+    gap: var(--spacing-sizing-04);
+
+    &[data-arrangement='fill'] {
+        display: flex;
+
+        [data-bspk='button'] {
+            flex: 1;
+        }
+    }
+
+    &[data-arrangement='spread'] {
+        display: grid;
+        grid-template-columns: max-content 1fr max-content;
+        align-items: center;
+        width: 100%;
+
+        [data-bspk='button'] {
+            min-width: var(--spacing-sizing-12);
+            justify-self: stretch;
+        }
+
+        [data-bspk='button']:first-child {
+            grid-column: 1;
+        }
+
+        [data-bspk='button']:last-child {
+            grid-column: 3;
+        }
+    }
+
+    &[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);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ButtonDock/index.tsx

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

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

@@ -0,0 +1,15 @@
+import { CalendarPicker } from './CalendarPicker';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <CalendarPicker onChange={() => {}} value={new Date()} />;
+
+describe('CalendarPicker', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Previous Year')).toBeInTheDocument();
+    });
+});