@bspk/ui 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -9,10 +9,13 @@
         "README.md",
         "LICENSE",
         "meta.ts",
-        "meta-types.ts",
         "build.ts",
-        "tsconfig.json"
+        "tsconfig.json",
+        "tsconfig.build.json"
     ],
+    "bin": {
+        "ui": "./.scripts/index.ts"
+    },
     "scripts": {
         "sass": "npx sass --no-source-map --silence-deprecation=mixed-decls src:dist",
         "build": "npx tsx build.ts",
@@ -21,14 +24,15 @@
         "lint": "eslint && tsc --noEmit && stylelint '**/*.scss'",
         "lint:fix": "eslint --fix",
         "semantic-release": "semantic-release",
-        "test": "jest",
+        "test": "NODE_NO_WARNINGS=1 node --experimental-vm-modules ./node_modules/.bin/jest",
         "prepare": "husky",
         "pre:commit": "tsx .scripts/pre-commit.ts",
         "meta": "tsx meta.ts",
         "pretty": "npx prettier --write src/",
         "newc": "tsx .scripts/tasks/new-component.ts",
+        "create:tests": "tsx .scripts/tasks/create-tests.ts",
         "clean": "tsx .scripts/clean.ts",
-        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build"
+        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build && npm run test"
     },
     "static-exports": {
         "./*": "./dist/*.js"
@@ -47,12 +51,20 @@
         "./BadgeDot/*": "./dist/components/BadgeDot/*.js",
         "./BannerAlert": "./dist/components/BannerAlert/index.js",
         "./BannerAlert/*": "./dist/components/BannerAlert/*.js",
+        "./BottomNavigation": "./dist/components/BottomNavigation/index.js",
+        "./BottomNavigation/*": "./dist/components/BottomNavigation/*.js",
         "./Breadcrumb": "./dist/components/Breadcrumb/index.js",
         "./Breadcrumb/*": "./dist/components/Breadcrumb/*.js",
         "./Button": "./dist/components/Button/index.js",
         "./Button/*": "./dist/components/Button/*.js",
+        "./ButtonDock": "./dist/components/ButtonDock/index.js",
+        "./ButtonDock/*": "./dist/components/ButtonDock/*.js",
+        "./CalendarPicker": "./dist/components/CalendarPicker/index.js",
+        "./CalendarPicker/*": "./dist/components/CalendarPicker/*.js",
         "./Card": "./dist/components/Card/index.js",
         "./Card/*": "./dist/components/Card/*.js",
+        "./Carousel": "./dist/components/Carousel/index.js",
+        "./Carousel/*": "./dist/components/Carousel/*.js",
         "./Checkbox": "./dist/components/Checkbox/index.js",
         "./Checkbox/*": "./dist/components/Checkbox/*.js",
         "./CheckboxGroup": "./dist/components/CheckboxGroup/index.js",
@@ -71,12 +83,16 @@
         "./ChipSuggestion/*": "./dist/components/ChipSuggestion/*.js",
         "./ChipUtility": "./dist/components/ChipUtility/index.js",
         "./ChipUtility/*": "./dist/components/ChipUtility/*.js",
-        "./Combobox": "./dist/components/Combobox/index.js",
-        "./Combobox/*": "./dist/components/Combobox/*.js",
+        "./DateField": "./dist/components/DateField/index.js",
+        "./DateField/*": "./dist/components/DateField/*.js",
+        "./DateInput": "./dist/components/DateInput/index.js",
+        "./DateInput/*": "./dist/components/DateInput/*.js",
         "./Dialog": "./dist/components/Dialog/index.js",
         "./Dialog/*": "./dist/components/Dialog/*.js",
         "./Divider": "./dist/components/Divider/index.js",
         "./Divider/*": "./dist/components/Divider/*.js",
+        "./Drawer": "./dist/components/Drawer/index.js",
+        "./Drawer/*": "./dist/components/Drawer/*.js",
         "./EmptyState": "./dist/components/EmptyState/index.js",
         "./EmptyState/*": "./dist/components/EmptyState/*.js",
         "./ExamplePlaceholder": "./dist/components/ExamplePlaceholder/index.js",
@@ -97,10 +113,10 @@
         "./Layout/*": "./dist/components/Layout/*.js",
         "./Link": "./dist/components/Link/index.js",
         "./Link/*": "./dist/components/Link/*.js",
-        "./Listbox": "./dist/components/Listbox/index.js",
-        "./Listbox/*": "./dist/components/Listbox/*.js",
         "./ListItem": "./dist/components/ListItem/index.js",
         "./ListItem/*": "./dist/components/ListItem/*.js",
+        "./ListItemMenu": "./dist/components/ListItemMenu/index.js",
+        "./ListItemMenu/*": "./dist/components/ListItemMenu/*.js",
         "./Menu": "./dist/components/Menu/index.js",
         "./Menu/*": "./dist/components/Menu/*.js",
         "./MenuButton": "./dist/components/MenuButton/index.js",
@@ -161,6 +177,10 @@
         "./SkeletonText/*": "./dist/components/SkeletonText/*.js",
         "./Slider": "./dist/components/Slider/index.js",
         "./Slider/*": "./dist/components/Slider/*.js",
+        "./Snackbar": "./dist/components/Snackbar/index.js",
+        "./Snackbar/*": "./dist/components/Snackbar/*.js",
+        "./SnackbarProvider": "./dist/components/SnackbarProvider/index.js",
+        "./SnackbarProvider/*": "./dist/components/SnackbarProvider/*.js",
         "./StylesProviderAnywhere": "./dist/components/StylesProviderAnywhere/index.js",
         "./StylesProviderAnywhere/*": "./dist/components/StylesProviderAnywhere/*.js",
         "./StylesProviderBetterHomesGardens": "./dist/components/StylesProviderBetterHomesGardens/index.js",
@@ -223,13 +243,14 @@
         "node": ">=20"
     },
     "dependencies": {
+        "@bspk/icons": "^1.0.5",
         "@bspk/styles": "^1.0.2",
         "@floating-ui/dom": "^1.6.13",
+        "date-fns": "^4.1.0",
         "focus-trap-react": "^11.0.1",
         "libphonenumber-js": "^1.12.9"
     },
     "peerDependencies": {
-        "@bspk/icons": "^1.0.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
@@ -241,9 +262,13 @@
         "@semantic-release/git": "^10.0.1",
         "@semantic-release/github": "^11.0.2",
         "@semantic-release/npm": "^12.0.1",
+        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/eslint-plugin-jsx-a11y": "^6.10.0",
         "@types/jest": "^29.5.14",
+        "@types/jest-axe": "^3.5.9",
         "@types/node": "^22.10.2",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.5",
@@ -257,14 +282,18 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "globals": "^15.12.0",
         "husky": "^9.1.7",
-        "jest": "^29.7.0",
+        "identity-obj-proxy": "^3.0.0",
+        "inquirer": "^12.9.6",
+        "jest": "^30.0.0",
+        "jest-axe": "^10.0.0",
+        "jest-environment-jsdom": "^30.1.2",
         "prettier-plugin-jsdoc": "^1.3.0",
         "sass": "^1.89.2",
         "semantic-release": "^24.2.0",
         "stylelint": "^16.19.1",
         "stylelint-config-standard": "^38.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
-        "ts-jest": "^29.2.5",
+        "ts-jest": "^29.4.3",
         "tslib": "^2.8.1",
         "tsx": "^4.19.4",
         "typescript": "5.6.3",

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

@@ -0,0 +1,17 @@
+import { Accordion } from './Accordion';
+import { presets } from './AccordionExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Accordion (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Accordion {...preset.propState} />));
+    });
+
+    it('renders its sections', () => {
+        const { getByText } = render(<Accordion {...presets[0].propState} />);
+
+        expect(getByText('Section 2')).toBeInTheDocument();
+        expect(getByText('Section 3')).toBeInTheDocument();
+    });
+});

package/src/components/Accordion/Accordion.tsx

@@ -1,17 +1,56 @@
-import { useEffect, useState } from 'react';
-import { AccordionSectionProps, AccordionSection } from './AccordionSection';
 import './accordion.scss';
+import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
+import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { randomString } from '-/utils/random';
 
-export type AccordionItem = Omit<AccordionSectionProps, 'toggleOpen'>;
+export type AccordionSection = {
+    /**
+     * The content of the accordion.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * The title of the accordion.
+     *
+     * @required
+     */
+    title: string;
+    /** The subtitle of the accordion. */
+    subtitle?: string;
+    /** The leading element to display in the accordion header. */
+    leading?: ReactNode;
+    /** The trailing element to display in the accordion header. */
+    trailing?: ReactNode;
+    /**
+     * If the accordion is initially open.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Indicates whether the accordion is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The unique identifier for the accordion item.
+     *
+     * If not provided it will be generated automatically.
+     */
+    id?: string;
+};
 
 export type AccordionProps = {
     /**
      * Array of accordion sections
      *
-     * @type Array<AccordionItem>
+     * @type Array<AccordionSection>
      * @required
      */
-    items: AccordionItem[];
+    items: AccordionSection[];
     /**
      * If true only one accordion section can be opened at a time
      *
@@ -34,40 +73,64 @@ export type AccordionProps = {
  * @name Accordion
  * @phase UXReview
  */
-export function Accordion({ items, singleOpen = true }: AccordionProps) {
-    const [activeItems, setActiveItems] = useState<(number | string)[]>(() => {
+export function Accordion({ items: itemsProp, singleOpen = true }: AccordionProps) {
+    const items = useMemo(
+        () =>
+            itemsProp.map((item) => ({
+                ...item,
+                id: item.id || `accordion-item-${randomString(8)}`,
+            })),
+        [itemsProp],
+    );
+
+    const [openSections, setOpenSections] = useState<string[]>(() => {
         return items.filter((item) => item.isOpen).map((item) => item.id);
     });
 
     useEffect(() => {
-        // Update active items based on the items prop
-        setActiveItems(items.filter((item) => item.isOpen).map((item) => item.id));
+        // Update open sections based on the items prop
+        setOpenSections(items.filter((item) => item.isOpen).map((item) => item.id));
     }, [items]);
 
-    const toggleOpen = (itemId: number | string) => {
-        setActiveItems((prevItems) => {
-            const isItemActive = prevItems.includes(itemId);
+    const toggleOpen = (itemId: string) => () =>
+        setOpenSections((prev) => {
+            const isSectionOpen = prev.includes(itemId);
 
             // If singleOpen is true, reset activeItems to only include the clicked item or empty if it was already active
-            if (singleOpen) return isItemActive ? [] : [itemId];
+            if (singleOpen) return isSectionOpen ? [] : [itemId];
 
             // If singleOpen is false, toggle the clicked item and keep others active
-            return isItemActive ? prevItems.filter((activeItemId) => activeItemId !== itemId) : [...prevItems, itemId];
+            return isSectionOpen ? prev.filter((activeItemId) => activeItemId !== itemId) : [...prev, itemId];
         });
-    };
 
     return (
         <div data-bspk="accordion">
-            {items.map((item, index) => {
+            {items.map(({ children, title, subtitle: subtitle, leading, trailing, disabled, id }, index) => {
+                const isOpen = openSections.includes(id);
                 return (
-                    <AccordionSection
-                        {...item}
-                        isOpen={activeItems.includes(item.id)}
-                        key={`${item.id}-${index}`}
-                        toggleOpen={() => toggleOpen(item.id)}
-                    >
-                        {item.children}
-                    </AccordionSection>
+                    <section data-disabled={disabled || undefined} id={id} key={id || index}>
+                        <button
+                            aria-controls={`${id}-content`}
+                            aria-expanded={isOpen}
+                            data-header
+                            disabled={disabled || undefined}
+                            onClick={!disabled ? toggleOpen(id) : undefined}
+                        >
+                            {leading && <span data-leading>{leading}</span>}
+                            <span data-title-subtitle>
+                                <span data-title>{title}</span>
+                                {subtitle && <span data-subtitle>{subtitle}</span>}
+                            </span>
+                            {trailing && <span data-trailing>{trailing}</span>}
+                            <span data-arrow>{isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}</span>
+                        </button>
+                        {isOpen && (
+                            <div data-content data-hidden={!isOpen || undefined} id={`${id}-content`}>
+                                {children}
+                            </div>
+                        )}
+                        <span data-divider />
+                    </section>
                 );
             })}
         </div>

package/src/components/Accordion/AccordionExample.tsx

@@ -1,6 +1,6 @@
 import { AccordionProps } from '.';
-import { createExampleChildElement } from '-/utils/createExampleChildElement';
-import { ComponentExampleFn } from '-/utils/demo';
+import { Avatar } from '-/components/Avatar';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 const AccordionContent = () => (
     <p>
@@ -9,79 +9,85 @@ const AccordionContent = () => (
     </p>
 );
 
-export const AccordionExample: ComponentExampleFn<AccordionProps> = ({ action, setState }) => ({
-    containerStyle: { minHeight: 225 },
-    render: ({ props, Component, id, preset }) => {
-        const trailing = createExampleChildElement({
-            exampleState: props,
-            name: 'trailing',
-            setState,
-            action,
-            id,
-        });
-        const leading = createExampleChildElement({
-            exampleState: props,
-            name: 'leading',
-            setState,
-            action,
-            id,
-        });
-
-        return (
-            <>
-                <Component
-                    {...props}
-                    items={[
-                        {
-                            id: '1',
-                            title: `Section 1`,
-                            leading: leading.element,
-                            trailing: trailing.element,
-                            children: <AccordionContent />,
-                        },
-                        ...(props.items ?? []),
-                    ]}
-                    key={preset?.label}
-                />
-            </>
-        );
+export const presets: Preset<AccordionProps>[] = [
+    {
+        label: 'Multiple Sections',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    subtitle: 'Subtitle',
+                    children: <AccordionContent />,
+                },
+                {
+                    id: '2',
+                    title: 'Section 2',
+                    children: <AccordionContent />,
+                    leading: <Avatar name="Avatar" size="small" />,
+                    trailing: <span>Trailing</span>,
+                },
+                {
+                    id: '3',
+                    title: 'Section 3',
+                    children: <AccordionContent />,
+                },
+            ],
+        },
     },
-    presets: [
-        {
-            label: 'Multiple Sections',
-            propState: {
-                items: [
-                    {
-                        id: '2',
-                        title: 'Section 2',
-                        children: <AccordionContent />,
-                    },
-                    {
-                        id: '3',
-                        title: 'Section 3',
-                        children: <AccordionContent />,
-                    },
-                ],
-            },
+    {
+        label: 'Multiple Sections with 1 disabled',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: <AccordionContent />,
+                },
+                { id: '2', title: 'Section 2', disabled: true, children: <AccordionContent /> },
+                { id: '3', title: 'Section 3', children: <AccordionContent /> },
+            ],
         },
-        {
-            label: 'Multiple Sections with 1 disabled',
-            propState: {
-                items: [
-                    { id: '2', title: 'Section 2', disabled: true, children: <AccordionContent /> },
-                    { id: '3', title: 'Section 3', children: <AccordionContent /> },
-                ],
-            },
+    },
+    {
+        label: 'Multiple Sections with 1 disabled and open',
+        propState: {
+            items: [
+                {
+                    id: '1',
+                    title: `Section 1`,
+                    children: <AccordionContent />,
+                },
+                { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: <AccordionContent /> },
+                { id: '3', title: 'Section 3', children: <AccordionContent /> },
+            ],
         },
-        {
-            label: 'Multiple Sections with 1 disabled and open',
-            propState: {
-                items: [
-                    { id: '2', title: 'Section 2', disabled: true, isOpen: true, children: <AccordionContent /> },
-                    { id: '3', title: 'Section 3', children: <AccordionContent /> },
-                ],
+    },
+];
+
+export const AccordionExample: ComponentExampleFn<AccordionProps> = () => ({
+    containerStyle: { minHeight: 225 },
+    defaultState: {
+        items: [
+            {
+                id: '1',
+                title: `Section 1`,
+                children: <AccordionContent />,
             },
-        },
-    ],
+            {
+                id: '2',
+                title: 'Section 2',
+                children: <AccordionContent />,
+                leading: <Avatar name="Avatar" size="small" />,
+                trailing: <span>Trailing</span>,
+            },
+            {
+                id: '3',
+                title: 'Section 3',
+                children: <AccordionContent />,
+            },
+        ],
+    },
+    presets,
     variants: false,
 });

package/src/components/Accordion/accordion.scss

@@ -1,22 +1,14 @@
 [data-bspk='accordion'] {
     width: 100%;
+    padding: var(--spacing-sizing-02);
 
-    [data-accordion-section] {
+    > section {
         --border-bottom-color: var(--stroke-neutral-base);
 
         display: flex;
         flex-direction: column;
         justify-content: center;
-
-        &[data-divider] {
-            [data-not-a-divider-divider] {
-                display: block;
-                height: 1px;
-                width: calc(100% - var(--spacing-sizing-04));
-                margin: -1px var(--spacing-sizing-02) 0;
-                background-color: var(--border-bottom-color);
-            }
-        }
+        color: var(--foreground-neutral-on-surface);
 
         &[data-disabled] {
             --border-bottom-color: var(--stroke-neutral-disabled-light);
@@ -27,38 +19,43 @@
             color: var(--foreground-neutral-disabled-on-surface);
         }
 
-        [data-accordion-header] {
+        button[data-header] {
             display: flex;
             flex-direction: row;
             align-items: center;
             background: none;
             color: inherit;
             border: none;
-            padding: var(--spacing-sizing-02);
-            gap: var(--spacing-sizing-04);
+            padding: 0 var(--spacing-sizing-02);
+            gap: var(--spacing-sizing-02);
             font: inherit;
-            outline: inherit;
             cursor: pointer;
+            outline: none;
+            min-height: var(--spacing-sizing-12);
 
-            [data-accordion-header-body] {
-                display: flex;
-                align-items: center;
-                flex-direction: row;
-                flex: 1;
-                gap: var(--spacing-sizing-03);
-            }
-
-            [data-accordion-title-wrapper] {
+            [data-title-subtitle] {
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
                 flex: 1;
 
-                [data-bspk='txt'] {
-                    text-align: left;
+                [data-title] {
+                    font: var(--labels-base);
+                }
+
+                [data-subtitle] {
+                    font: var(--body-x-small);
+                    color: var(--foreground-neutral-on-surface-variant-01);
                 }
             }
 
+            [data-arrow] {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-left: var(--spacing-sizing-02);
+            }
+
             &:not(:disabled) {
                 &:hover {
                     background-image:
@@ -77,12 +74,6 @@
                         ),
                         linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
                 }
-
-                &:focus-visible {
-                    outline: 2px solid var(--stroke-neutral-focus);
-                    border-color: var(--stroke-neutral-focus);
-                    margin-bottom: 1px;
-                }
             }
 
             &:disabled {
@@ -92,14 +83,24 @@
             }
         }
 
-        [data-accordion-content] {
-            padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+        &:has(:focus-visible) {
+            outline: 2px solid var(--stroke-neutral-focus);
+            border-color: var(--stroke-neutral-focus);
+            margin-bottom: 1px;
         }
 
-        [data-not-a-divider-divider] {
-            display: none;
+        [data-content] {
+            padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
         }
     }
+
+    [data-divider] {
+        display: block;
+        height: 1px;
+        width: calc(100% - var(--spacing-sizing-04));
+        margin: -1px var(--spacing-sizing-02) 0;
+        background-color: var(--border-bottom-color);
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

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