@bspk/ui 1.2.0 → 1.3.0

package/src/components/Select/select.scss

@@ -10,9 +10,9 @@
     --select-padding: var(--spacing-sizing-03);
     --select-icon-width: var(--spacing-sizing-05);
 
+    overflow: hidden;
     position: relative;
     width: 100%;
-    max-width: 280px;
     outline: unset;
     min-height: var(--select-height);
     max-height: var(--select-height);
@@ -28,34 +28,20 @@
     border-radius: var(--radius-sm);
     background: var(--select-background);
     padding: 0 var(--select-padding);
+    cursor: pointer;
 
-    * {
-        pointer-events: none;
-    }
-
-    [data-bspk='list-item'][data-bspk-owner='select'] {
-        display: block;
-        max-width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding: 0;
-        min-height: auto;
-
-        [data-item-label] [data-text] {
-            color: var(--select-text-color);
-        }
-
-        &[data-placeholder] {
-            [data-item-label] [data-text] {
-                color: var(--foreground-neutral-on-surface-variant-03);
-            }
-        }
+    [data-input] {
+        position: absolute;
+        opacity: 0;
+        inset: 0;
+        cursor: pointer;
     }
 
     [data-icon] {
         display: flex;
         flex-direction: column;
         justify-content: center;
+        pointer-events: none;
 
         svg {
             transform: rotate(90deg);
@@ -63,6 +49,10 @@
         }
     }
 
+    [data-bspk='list-item'][data-bspk-owner='select'] {
+        background: transparent;
+    }
+
     [data-bspk='list-item'][data-selected] {
         background: var(--surface-brand-primary-highlight);
     }
@@ -95,7 +85,7 @@
     }
 
     &:not(:disabled) {
-        &:focus {
+        &:focus-within {
             --select-border-color: var(--stroke-neutral-focus);
 
             border-width: 1px;

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

@@ -0,0 +1,25 @@
+import { SelectField } from './SelectField';
+import { presets } from './SelectFieldExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const nonPresetProps = {
+    name: 'Example name',
+    onChange: () => {},
+    placeholder: 'Select an option',
+};
+
+describe('SelectField (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<SelectField {...preset.propState} {...nonPresetProps} />),
+        );
+    });
+
+    it('renders', () => {
+        const { queryByText } = render(<SelectField {...presets[0].propState} {...nonPresetProps} />);
+
+        expect(queryByText(nonPresetProps.placeholder)).toBeInTheDocument();
+    });
+});

package/src/components/SelectField/SelectFieldExample.tsx

@@ -0,0 +1,16 @@
+import { SelectFieldProps } from '.';
+import { presets as selectPresets, SelectExample } from '-/components/Select/SelectExample';
+import { ComponentExample } from '-/utils/demo';
+
+export const presets = selectPresets.map((preset, index) => ({
+    ...preset,
+    propState: {
+        ...preset.propState,
+        controlId: `example-select-${index}`,
+    },
+}));
+
+export const SelectFieldExample: ComponentExample<SelectFieldProps> = {
+    defaultState: SelectExample.defaultState,
+    presets,
+};

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

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

package/src/components/Skeleton/SkeletonExample.tsx

@@ -3,7 +3,17 @@ import { SkeletonProps, SkeletonVariant } from '.';
 import { Avatar } from '-/components/Avatar';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
 import { useTimeout } from '-/hooks/useTimeout';
-import { ComponentExample, ComponentExampleRenderProps } from '-/utils/demo';
+import { ComponentExample, ComponentExampleRenderProps, Preset } from '-/utils/demo';
+
+export const presets: Preset<SkeletonProps>[] = [
+    {
+        label: 'Loading Transition',
+        propState: {
+            width: '100px',
+            height: '100px',
+        },
+    },
+];
 
 export const SkeletonExample: ComponentExample<SkeletonProps> = {
     render: ({ props, preset, Component }) => {
@@ -11,15 +21,7 @@ export const SkeletonExample: ComponentExample<SkeletonProps> = {
 
         return <Component {...props} />;
     },
-    presets: [
-        {
-            label: 'Loading Transition',
-            propState: {
-                width: '100px',
-                height: '100px',
-            },
-        },
-    ],
+    presets,
 };
 
 function SkeletonTransition({

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

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

package/src/components/SkeletonText/SkeletonTextExample.tsx

@@ -1,23 +1,24 @@
-/* eslint-disable @cspell/spellchecker */ import { useState, useEffect } from 'react';
-
+import { useState, useEffect } from 'react';
 import { SkeletonTextProps } from '.';
 import { useTimeout } from '-/hooks/useTimeout';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<SkeletonTextProps>[] = [
+    {
+        label: 'Loading Transition',
+        propState: {
+            variant: 'body-base' as SkeletonTextProps['variant'],
+            lines: 3,
+        },
+    },
+];
 
 export const SkeletonTextExample: ComponentExample<SkeletonTextProps> = {
     render: ({ props, preset, Component }) => {
         if (preset?.label === 'Loading Transition') return <SkeletonTextTransition {...props} Component={Component} />;
         return <Component {...props} />;
     },
-    presets: [
-        {
-            label: 'Loading Transition',
-            propState: {
-                variant: 'body-base',
-                lines: 3,
-            },
-        },
-    ],
+    presets,
 };
 
 function SkeletonTextTransition({
@@ -35,7 +36,7 @@ function SkeletonTextTransition({
         <Component {...props}>
             {loaded && (
                 <p>
-                    Synergestic actionables turn the ship, or vertical integration, offerings locked and loaded, so get
+                    Synergetic actionables turn the ship, or vertical integration, offerings locked and loaded, so get
                     buy-in.
                 </p>
             )}

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

@@ -0,0 +1,8 @@
+import { Slider } from './Slider';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+
+const TestBed = () => <Slider label="Slider Example" max={100} min={0} name="Slider" onChange={() => {}} value={5} />;
+
+describe('Slider (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+});

package/src/components/Slider/Slider.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef } from 'react';
-
 import './slider.scss';
+import { useEffect, useRef } from 'react';
 import { SliderIntervalDots } from './SliderIntervalDots';
 import { useNormalizeSliderValue } from './useNormalizeSliderValue';
 import { Txt } from '-/components/Txt';

package/src/components/Slider/SliderExample.tsx

@@ -30,6 +30,7 @@ export const SliderExample: ComponentExample<SliderProps<number | [number, numbe
                 step: 1,
                 value: 30,
                 formatNumber: (num) => `$${num}`,
+                name: 'basic-slider',
             },
         },
         {
@@ -43,6 +44,7 @@ export const SliderExample: ComponentExample<SliderProps<number | [number, numbe
                 formatNumber: (num) => {
                     return `${num}%`;
                 },
+                name: 'range-slider',
             },
         },
         {
@@ -57,6 +59,7 @@ export const SliderExample: ComponentExample<SliderProps<number | [number, numbe
                     if (context === 'max') return `${num}% Passing`;
                     return `${num}%`;
                 },
+                name: 'undefined-slider',
             },
         },
     ],

package/src/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,48 @@
+import './snackbar.scss';
+import { Button } from '-/components/Button';
+import { Txt } from '-/components/Txt';
+import { SnackbarData } from '-/utils/snackbarContext';
+
+export type SnackbarProps = {
+    /** Text to be shown in the snackbar */
+    text: string;
+    /** Optional action button */
+    button?: SnackbarData['button'];
+    /** Callback when the snackbar is dismissed */
+    onClose: () => void;
+};
+
+/**
+ * Snackbars are intended to provide feedback about an action without interrupting the customer experience. NOTE: While
+ * they can be imported and used directly, they are intended to be used via the SnackbarProvider and the
+ * useSnackbarContext hook.
+ *
+ * @example
+ *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *
+ *     function Example() {
+ *         return <Snackbar text="Something happened!" />;
+ *     }
+ *
+ * @name Snackbar
+ * @phase Utility
+ */
+export function Snackbar({ text, button, onClose }: SnackbarProps) {
+    return (
+        <span data-bspk="snackbar" role="alert">
+            <Txt variant="body-small">{text}</Txt>
+
+            {button && (
+                <Button
+                    label={button.label}
+                    onClick={button.onClick === 'close' ? onClose : button.onClick}
+                    variant="tertiary"
+                >
+                    {button.label}
+                </Button>
+            )}
+        </span>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Snackbar/SnackbarExample.tsx

@@ -0,0 +1,12 @@
+import { SnackbarProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const SnackbarExample: ComponentExample<SnackbarProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [],
+    render: ({ props, Component }) => <Component {...props} />,
+    sections: [],
+    variants: {},
+};

package/src/components/Snackbar/index.tsx

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

package/src/components/Snackbar/snackbar.scss

@@ -0,0 +1,22 @@
+[data-bspk='snackbar'] {
+    pointer-events: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+    gap: var(--spacing-sizing-03);
+    width: 600px;
+    max-width: 100%;
+    box-shadow:
+        0 0 1px 0 var(--shadow-variant-05),
+        0 0 12px 0 var(--shadow-variant-03);
+    background-color: var(--surface-neutral-inverse);
+    color: var(--foreground-neutral-on-inverse-surface);
+    height: var(--spacing-sizing-14);
+
+    [data-bspk='button'][data-variant='tertiary'] {
+        color: inherit;
+    }
+}

package/src/components/SnackbarProvider/SnackbarProvider.tsx

@@ -0,0 +1,160 @@
+import './snackbar-provider.scss';
+import { useState, ReactNode, useRef, useEffect } from 'react';
+import { Portal } from '-/components/Portal';
+import { Snackbar } from '-/components/Snackbar';
+import { randomString } from '-/utils/random';
+import { SnackbarContext, SnackbarData, SnackbarInput } from '-/utils/snackbarContext';
+
+export type SnackbarProviderProps = {
+    /** Content to be rendered inside the provider */
+    children: ReactNode;
+    /**
+     * Default time in milliseconds after which the snackbar will auto dismiss. If a Snackbar is sent with a timeout
+     * property that value will be used instead. If you want to disable the timeout for a specific snackbar, set its
+     * timeout to null.
+     */
+    timeout?: number | null;
+    /**
+     * Maximum number of snackbars to show at once
+     *
+     * @default 10
+     */
+    countLimit?: number;
+};
+
+/**
+ * Snackbar context provider. Snackbars are intended to provide feedback about an action without interrupting the
+ * customer experience.
+ *
+ * @example
+ *     import { SnackbarProvider } from '@bspk/ui/SnackbarProvider';
+ *
+ *     // In your application root
+ *     function Example() {
+ *         return (
+ *             <SnackbarProvider timeout={5000} countLimit={1}>
+ *                 <App />
+ *             </SnackbarProvider>
+ *         );
+ *     }
+ *
+ *     // In a descendent component
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *
+ *     function ExampleComponent() {
+ *         // The useSnackbarContext provides access to the sendSnackbar function
+ *         const { sendSnackbar } = useSnackbarContext();
+ *
+ *         return (
+ *             <button
+ *                 onClick={() =>
+ *                     sendSnackbar({
+ *                         text: 'Example snackbar',
+ *                         button: { text: 'Dismiss', onClick: 'close' },
+ *                         timeout: 3000,
+ *                     })
+ *                 }
+ *             >
+ *                 Show snackbar
+ *             </button>
+ *         );
+ *     }
+ *
+ *     // You can also programatically dismiss a Snackbar by calling clearSnackbar with the Snackbar's id.
+ *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleClearComponent() {
+ *         const [snackbarId, setSnackbarId] = useState<string | null>(null);
+ *
+ *         const { sendSnackbar, clearSnackbar } = useSnackbarContext();
+ *
+ *         const sendAndStoreId = () => {
+ *             const id = sendSnackbar({
+ *                 text: 'Without a button or timeout I can only be closed programatically',
+ *             });
+ *             setSnackbarId(id);
+ *         };
+ *
+ *         const clear = () => {
+ *             if (snackbarId) {
+ *                 clearSnackbar(snackbarId);
+ *                 setSnackbarId(null);
+ *             }
+ *         };
+ *
+ *         return snackbarId ? (
+ *             <button onClick={clear}>Clear snackbar</button>
+ *         ) : (
+ *             <button onClick={sendAndStoreId}>Send snackbar</button>
+ *         );
+ *     }
+ *
+ * @name SnackbarProvider
+ * @phase UXReview
+ */
+export function SnackbarProvider({ children, timeout, countLimit = 10 }: SnackbarProviderProps) {
+    const [snackbars, setSnackbars] = useState<SnackbarData[]>([]);
+    const timeouts = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+    const baseTimeout = timeout ?? 0;
+
+    const sendSnackbar = (data: SnackbarInput): string => {
+        const id = randomString(8);
+
+        setSnackbars((prevState) => prevState.concat([{ id, ...data }]));
+
+        const nextTimeout = data.timeout ?? baseTimeout;
+        if (data.timeout !== null && nextTimeout) {
+            timeouts.current.set(
+                id,
+                setTimeout(() => {
+                    clearSnackbar(id);
+                    timeouts.current.delete(id);
+                }, data.timeout ?? baseTimeout),
+            );
+        }
+
+        return id;
+    };
+
+    const clearSnackbar = (id: string) => {
+        setSnackbars((prevState) => prevState.filter((snackbarData) => snackbarData.id !== id));
+    };
+
+    const clearAll = () => {
+        setSnackbars([]);
+    };
+
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to run this on dismount
+            timeouts.current.forEach((timeoutToClear) => clearTimeout(timeoutToClear));
+        };
+    }, []);
+
+    const visibleSnackbars = countLimit ? snackbars.slice(0, countLimit) : snackbars;
+
+    return (
+        <SnackbarContext.Provider
+            value={{
+                snackbars,
+                sendSnackbar,
+                clearSnackbar,
+                clearAll,
+            }}
+        >
+            {visibleSnackbars.length > 0 && (
+                <Portal>
+                    <div aria-live="off" data-bspk="snackbar-provider">
+                        {visibleSnackbars.map(({ button, text, id }) => (
+                            <Snackbar button={button} key={id} onClose={() => clearSnackbar(id)} text={text} />
+                        ))}
+                    </div>
+                </Portal>
+            )}
+
+            {children}
+        </SnackbarContext.Provider>
+    );
+}

package/src/components/SnackbarProvider/SnackbarProviderExample.tsx

@@ -0,0 +1,127 @@
+import { useRef, useState } from 'react';
+import { SnackbarProvider, SnackbarProviderProps } from './SnackbarProvider';
+import { Button } from '-/components/Button';
+import { CheckboxGroup } from '-/components/CheckboxGroup';
+import { NumberField } from '-/components/NumberField';
+import { TextField } from '-/components/TextField';
+import { Txt } from '-/components/Txt';
+import { useSnackbarContext } from '-/hooks/useSnackbarContext';
+import { ComponentExample } from '-/utils/demo';
+import './snackbar-provider-example.scss';
+
+export const SnackbarProviderExample: ComponentExample<SnackbarProviderProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [],
+    render: ({ props }) => (
+        <SnackbarProvider countLimit={props.countLimit} timeout={props.timeout || 5000}>
+            <ExampleForm />
+        </SnackbarProvider>
+    ),
+    sections: [],
+    variants: {},
+};
+
+function ExampleForm() {
+    const countRef = useRef(0);
+    const [snackbarText, setSnackbarText] = useState('Full send!');
+    const [options, setOptions] = useState<string[]>(['enableTimeout']);
+    const [dismissButtonText, setDismissButtonText] = useState('Dismiss');
+    const [timeout, setTimeout] = useState(5000);
+
+    const { sendSnackbar } = useSnackbarContext();
+
+    const enableTimeout = options.includes('enableTimeout');
+    const enableDismiss = options.includes('dismissButton');
+    const enableCount = options.includes('showCount');
+
+    const onButtonClick = () => {
+        if (enableCount) {
+            countRef.current += 1;
+        }
+
+        sendSnackbar({
+            text: snackbarText + (enableCount ? ` (${countRef.current})` : ''),
+            timeout: enableTimeout ? timeout : null,
+            button: enableDismiss
+                ? {
+                      label: dismissButtonText,
+                      onClick: 'close',
+                  }
+                : undefined,
+        });
+    };
+
+    return (
+        <div data-snackbar-provider-example="">
+            <TextField
+                aria-label="Snackbar Text"
+                controlId="text"
+                label="Snackbar Text"
+                name="text"
+                onChange={setSnackbarText}
+                size="small"
+                value={snackbarText}
+            />
+
+            <CheckboxGroup
+                aria-label="Example Checkbox Group"
+                name="example-checkbox-group"
+                onChange={(nextValues: string[]) => {
+                    setOptions(nextValues);
+                }}
+                options={[
+                    { label: 'Enable timeout', value: 'enableTimeout' },
+                    {
+                        label: 'Include dismiss button',
+                        value: 'dismissButton',
+                    },
+                    {
+                        label: 'Count sends (diagnostic)',
+                        value: 'showCount',
+                    },
+                ]}
+                values={options}
+            />
+
+            {enableTimeout && (
+                <NumberField
+                    aria-label="Timeout"
+                    controlId="timeout"
+                    label="Timeout (ms)"
+                    max={60000}
+                    min={0}
+                    name="timeout"
+                    onChange={(val) => setTimeout(parseInt(`${val}`) || 0)}
+                    size="small"
+                    step={1000}
+                    value={timeout}
+                />
+            )}
+
+            {enableDismiss && (
+                <TextField
+                    aria-label="Dismiss button Text"
+                    controlId="text"
+                    label="Dismiss Button Text"
+                    name="text"
+                    onChange={setDismissButtonText}
+                    size="small"
+                    value={dismissButtonText}
+                />
+            )}
+
+            {!enableDismiss && !enableTimeout && (
+                <Txt data-warning="" variant="body-small">
+                    Note: Without a timeout or dismiss button the snackbar can only be closed programatically using the
+                    useSnackbarContext hook.
+                </Txt>
+            )}
+
+            <div data-button-wrapper="">
+                <Button label="Send it!" onClick={onButtonClick} size="medium" title="Snackbar" />
+            </div>
+        </div>
+    );
+}

package/src/components/SnackbarProvider/index.tsx

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

package/src/components/SnackbarProvider/snackbar-provider-example.scss

@@ -0,0 +1,17 @@
+[data-snackbar-provider-example] {
+    display: flex;
+    gap: var(--spacing-sizing-03);
+    flex-direction: column;
+    width: 300px;
+    flex: 1;
+
+    [data-warning] {
+        color: var(--status-error);
+    }
+
+    [data-button-wrapper] {
+        display: flex;
+        justify-content: center;
+        margin-top: var(--spacing-sizing-02);
+    }
+}