@bspk/ui 1.1.33 → 1.2.0

package/src/components/Badge/BadgeExample.tsx

@@ -1,73 +1,18 @@
+import { BadgeProps } from '.';
 import { Avatar } from '-/components/Avatar';
 import { ComponentExample } from '-/utils/demo';
 
-import { BadgeProps } from '.';
-
 export const BadgeExample: ComponentExample<BadgeProps> = {
+    render: ({ props, Component }) => {
+        return (
+            <Component {...props}>
+                <Avatar image="/profile.jpg" name="Andre Giant" />
+            </Component>
+        );
+    },
     containerStyle: { width: '100%' },
-    render: ({ props, Component, preset }) => {
-        if (preset?.label === 'Borders') return <ExampleBadgeVariants Component={Component} props={props} />;
-
-        if (preset?.label === 'With Context') {
-            return (
-                <>
-                    <Component {...props}>
-                        <Avatar image="/profile.jpg" name="Andre Giant" />
-                    </Component>
-                </>
-            );
-        }
-        return <Component {...props} />;
+    variants: {
+        surfaceBorder: { color: { options: ['primary', 'secondary'] } },
+        size: { count: { options: [9, 99, 999] } },
     },
-    presets: [
-        {
-            label: 'With Context',
-        },
-        {
-            label: 'Borders',
-        },
-    ],
 };
-
-function ExampleBadgeVariants({
-    Component,
-    ...props
-}: {
-    Component: React.ComponentType<Record<string, unknown>>;
-    props: BadgeProps;
-}) {
-    const cells = [
-        ['', 'Small', 'X-Small'],
-        ['None', { size: 'small', surfaceBorder: false }, { size: 'x-small', surfaceBorder: false }],
-        ['Border', { size: 'small', surfaceBorder: true }, { size: 'x-small', surfaceBorder: true }],
-    ] as (BadgeProps | string)[][];
-
-    let border = false;
-    return (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
-            {cells.flat().map((content, idx) => {
-                if (typeof content === 'string' && content === 'Border') border = true;
-                return (
-                    <div
-                        key={idx}
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: '8px',
-                            padding: '8px',
-                            background:
-                                typeof content !== 'string' && border ? 'var(--surface-neutral-t3-low)' : 'transparent',
-                        }}
-                    >
-                        {typeof content === 'string'
-                            ? content
-                            : [9, 99, 999].map((count, idx2) => (
-                                  <Component count={count} key={idx2} {...props} {...(content as BadgeProps)} />
-                              ))}
-                    </div>
-                );
-            })}
-        </div>
-    );
-}

package/src/components/Badge/badge.scss

@@ -4,14 +4,24 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-circular);
+    border-radius: var(--radius-full);
     height: var(--size);
     width: fit-content;
     min-width: var(--size);
     font: var(--labels-x-small);
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
     padding: 0 var(--spacing-sizing-02);
+    background-color: var(--background);
+    color: var(--foreground);
+
+    &[data-color='primary'] {
+        --foreground: var(--foreground-brand-on-primary);
+        --background: var(--foreground-brand-primary);
+    }
+
+    &[data-color='secondary'] {
+        --foreground: var(--foreground-brand-on-secondary);
+        --background: var(--foreground-brand-secondary);
+    }
 
     &[data-size='x-small'] {
         --size: var(--spacing-sizing-05);
@@ -19,9 +29,11 @@
         padding: 2px var(--spacing-sizing-01);
     }
 
-    &[data-variant='secondary'] {
-        color: var(--foreground-brand-on-secondary);
-        background: var(--surface-brand-secondary);
+    &[data-variant='notification'] {
+        --size: 6px;
+
+        padding: 0;
+        display: block;
     }
 
     &[data-surface-border] {
@@ -29,23 +41,4 @@
     }
 }
 
-[data-bspk='badge-wrapper'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: fit-content;
-    height: fit-content;
-    flex-shrink: 0;
-
-    [data-bspk='badge'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: scale(1) translate(50%, -50%);
-        transform-origin: 100% 0%;
-        z-index: 2;
-    }
-}
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/BadgeDot.tsx

@@ -0,0 +1,83 @@
+import { ReactNode } from 'react';
+import { cssWithVars } from '-/utils/cwv';
+
+import './badge-dot.scss';
+
+type BadgeDotSize = 6 | 8 | 10 | 12;
+
+const OUTLINE_WIDTHS: Record<BadgeDotSize, number> = {
+    6: 1,
+    8: 2,
+    10: 2,
+    12: 2,
+};
+
+export type BadgeDotProps = {
+    /**
+     * The color variant of the badge-dot.
+     *
+     * @default primary
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The context for which the badge-dot is applied.
+     *
+     * Could be a button, link, or any other element that the badge-dot is associated with.
+     */
+    children?: ReactNode;
+    /**
+     * The size of the badge-dot.
+     *
+     * @default 6
+     */
+    size?: BadgeDotSize;
+    /**
+     * Whether the badge-dot should have an outline.
+     *
+     * @default false
+     */
+    outline?: boolean;
+};
+
+/**
+ * A non-numeric badge used to indicate something new or its current status.
+ *
+ * @example
+ *     import { BadgeDot } from '@bspk/ui/BadgeDot';
+ *
+ *     function Example() {
+ *         return <BadgeDot color="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
+ *
+ * @name BadgeDot
+ * @phase UXReview
+ */
+export function BadgeDot({ children, color = 'primary', size = 6, outline = false }: BadgeDotProps) {
+    const badgeDot = (
+        <sup
+            data-attachment={!!children || undefined}
+            data-bspk="badge-dot"
+            data-color={color}
+            data-outline={outline || undefined}
+            style={cssWithVars({
+                '--size': `${size}px`,
+                '--outline-width': `${OUTLINE_WIDTHS[size]}px`,
+            })}
+        />
+    );
+
+    if (children) {
+        return (
+            <span data-attachment-wrapper>
+                {children}
+                {badgeDot}
+            </span>
+        );
+    }
+
+    return badgeDot;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -0,0 +1,25 @@
+import { BadgeDotProps } from '.';
+import { Avatar } from '-/components/Avatar';
+import { Button } from '-/components/Button';
+import { ComponentExample } from '-/utils/demo';
+
+export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    render: ({ props, Component }) => {
+        return (
+            <Component {...props}>
+                {props.outline === true ? (
+                    <Button label="Button" size="large" />
+                ) : (
+                    <Avatar image="/profile.jpg" name="Andre Giant" />
+                )}
+            </Component>
+        );
+    },
+    sections: [],
+    variants: {
+        outline: { size: { options: [6, 8, 10, 12] } },
+    },
+};

package/src/components/BadgeDot/badge-dot.scss

@@ -0,0 +1,26 @@
+[data-bspk='badge-dot'] {
+    /*! 
+    --size: is set via inline style 
+    --outline-width: is set via inline style
+    */
+
+    display: block;
+    width: var(--size, 6px);
+    height: var(--size, 6px);
+    border-radius: var(--radius-full);
+    background-color: var(--background);
+
+    &[data-color='primary'] {
+        --background: var(--foreground-brand-primary);
+    }
+
+    &[data-color='secondary'] {
+        --background: var(--foreground-brand-secondary);
+    }
+
+    &[data-outline] {
+        border: var(--outline-width) solid var(--surface-neutral-t1-base);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BadgeDot/index.tsx

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

package/src/components/BannerAlert/BannerAlert.tsx

@@ -4,7 +4,8 @@ import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningFill } from '@bspk/icons/WarningFill';
 
-import { ElementProps, AlertVariant, CallToActionButton } from '-';
+import { ElementProps, AlertVariant, CallToActionButton } from '-/types/common';
+
 import './banner-alert.scss';
 
 export type BannerAlertProps = {
@@ -60,6 +61,10 @@ export type BannerAlertProps = {
  *             header="Error"
  *             body="There was an error processing your request."
  *             onClose={() => console.log('Alert closed')}
+ *             callToAction={{
+ *                 label = 'Click me',
+ *                 onClick = () => action('Call to action clicked!'),
+ *             }}
  *         />;
  *     }
  *
@@ -69,9 +74,9 @@ export type BannerAlertProps = {
  *
  *
  * @name BannerAlert
- * @phase DesignReview
+ * @phase UXReview
  */
-function BannerAlert({
+export function BannerAlert({
     variant = 'informational',
     onClose,
     header,
@@ -80,7 +85,7 @@ function BannerAlert({
     elevated = false,
 }: ElementProps<BannerAlertProps, 'div'>) {
     return (
-        <article data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant}>
+        <div data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant} role="alert">
             <div data-icon-bar>
                 {variant === 'error' && <SvgErrorFill />}
                 {variant === 'informational' && <SvgInfoFill />}
@@ -105,12 +110,8 @@ function BannerAlert({
                     )}
                 </div>
             </div>
-        </article>
+        </div>
     );
 }
 
-BannerAlert.bspkName = 'BannerAlert';
-
-export { BannerAlert };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/BannerAlert/BannerAlertExample.tsx

@@ -1,16 +1,15 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { BannerAlertProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 
 export const BannerAlertExample: ComponentExampleFn<BannerAlertProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
-    render: ({ props, context, Component }) => {
+    render: ({ props, variant, Component }) => {
         let nextHeader = props.header || 'This is a banner alert';
-        if (context?.variantName === 'variant') {
-            if (context?.variantValue === 'informational') nextHeader = 'This is informational banner';
-            if (context?.variantValue === 'success') nextHeader = 'This is success banner';
-            if (context?.variantValue === 'warning') nextHeader = 'This is warning banner';
-            if (context?.variantValue === 'error') nextHeader = 'This is error banner';
+        if (variant && variant.name === 'variant') {
+            if (variant.value === 'informational') nextHeader = 'This is informational banner';
+            if (variant.value === 'success') nextHeader = 'This is success banner';
+            if (variant.value === 'warning') nextHeader = 'This is warning banner';
+            if (variant.value === 'error') nextHeader = 'This is error banner';
         }
         return <Component {...props} header={nextHeader} />;
     },

package/src/components/BannerAlert/banner-alert.scss

@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: row;
     border: 2px solid var(--color);
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-md);
     background-color: var(--surface-neutral-t1-base);
     width: 100%;
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable react/no-multi-comp */ import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+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';
@@ -9,14 +8,17 @@ import { Menu } from '-/components/Menu';
 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';
 
 export type BreadcrumbItem = {
     /**
      * The label of the breadcrumb item.
      *
      * @example
-     *     'Page 1';
+     *     Page 1
      *
      * @required
      */
@@ -25,7 +27,7 @@ export type BreadcrumbItem = {
      * The href of the breadcrumb item.
      *
      * @example
-     *     'https://bspk.anywhere.re';
+     *     https://bspk.anywhere.re
      *
      * @required
      */
@@ -59,8 +61,6 @@ export type BreadcrumbProps = CommonProps<'id'> & {
     items: BreadcrumbItem[];
 };
 
-const BreadcrumbDivider = () => <SvgChevronRight aria-hidden={true} />;
-
 /**
  * Used to indicate the current page's location within a navigational hierarchy.
  *
@@ -87,9 +87,9 @@ const BreadcrumbDivider = () => <SvgChevronRight aria-hidden={true} />;
  *     }
  *
  * @name Breadcrumb
- * @phase DesignReview
+ * @phase UXReview
  */
-function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
+export function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
     const id = useId(propId);
     const items = Array.isArray(itemsProp) ? itemsProp : [];
 
@@ -106,15 +106,15 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
             <ol>
                 <li>
                     <Link href={items[0].href} label={items[0].label} />
-                    <BreadcrumbDivider />
+                    <SvgChevronRight aria-hidden />
                 </li>
                 {items.length > 5 ? (
                     <li>
                         <Button
                             icon={<SvgMoreHoriz />}
+                            iconOnly
                             innerRef={elements.setReference}
                             label={`Access to ${middleItems.length} pages`}
-                            showLabel={false}
                             size="small"
                             toolTip={`${middleItems.length} pages`}
                             variant="tertiary"
@@ -123,8 +123,10 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
                         {isOpen && (
                             <Menu
                                 innerRef={elements.setFloating}
-                                itemDisplayCount={false}
+                                itemCount={middleItems.length}
+                                itemDisplayCount={middleItems.length <= 10 ? middleItems.length : 10}
                                 {...menuProps}
+                                role="navigation"
                                 style={{
                                     ...menuProps.style,
                                     width: '200px',
@@ -140,13 +142,13 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
                                 ))}
                             </Menu>
                         )}
-                        <BreadcrumbDivider />
+                        <SvgChevronRight aria-hidden />
                     </li>
                 ) : (
                     middleItems.map((item, idx) => (
                         <li key={`Breadcrumb-${idx}`}>
                             <Link {...item} />
-                            <BreadcrumbDivider />
+                            <SvgChevronRight aria-hidden />
                         </li>
                     ))
                 )}
@@ -158,8 +160,4 @@ function Breadcrumb({ id: propId, items: itemsProp }: BreadcrumbProps) {
     );
 }
 
-Breadcrumb.bspkName = 'Breadcrumb';
-
-export { Breadcrumb };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Breadcrumb/BreadcrumbExample.tsx

@@ -1,6 +1,5 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { BreadcrumbProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
     presets: [
@@ -88,5 +87,72 @@ export const BreadcrumbExample: ComponentExample<BreadcrumbProps> = {
                 ],
             },
         },
+        {
+            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',
+                    },
+                ],
+            },
+        },
     ],
 };