@bspk/ui 1.1.33 → 1.2.0

package/src/components/Popover/Popover.tsx

@@ -1,43 +1,53 @@
 import { SvgClose } from '@bspk/icons/Close';
-import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 'react';
+import { ReactElement, cloneElement, useMemo, useRef, useState } from 'react';
 
-import { CallToActionButton, CommonProps } from '-';
 import { Button } from '-/components/Button';
 import { Portal } from '-/components/Portal';
 import { Txt } from '-/components/Txt';
-import { Placement, useFloating } from '-/hooks/useFloating';
+import { Placement, useFloating, UseFloatingProps } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { CallToActionButton, CommonProps, ElementProps } from '-/types/common';
+import { cssWithVars } from '-/utils/cwv';
+
 import './popover.scss';
 
-export type PopoverProps = CommonProps<'disabled'> & {
-    /**
-     * The placement of the popover.
-     *
-     * @default top
-     */
-    placement?: Placement;
-    /** The popover header. */
-    header: string;
-    /**
-     * The content of the popover.
-     *
-     * @type multiline
-     */
-    content: string;
-    /**
-     * The call to action button properties.
-     *
-     * @type CallToActionButton
-     */
-    callToAction?: CallToActionButton;
-    /**
-     * A single element that will trigger the popover when clicked.
-     *
-     * @type ReactElement
-     * @required
-     */
-    children: ReactElement;
-};
+export type PopoverProps = CommonProps<'disabled'> &
+    Pick<UseFloatingProps, 'refWidth'> & {
+        /**
+         * The placement of the popover.
+         *
+         * @default top
+         */
+        placement?: Placement;
+        /** The popover header. */
+        header: string;
+        /**
+         * The content of the popover.
+         *
+         * @type multiline
+         */
+        content: string;
+        /**
+         * The call to action button properties.
+         *
+         * @type CallToActionButton
+         */
+        callToAction?: CallToActionButton;
+        /**
+         * The secondary call to action button properties.
+         *
+         * @type CallToActionButton
+         */
+        secondaryCallToAction?: CallToActionButton;
+        /**
+         * A single element that will trigger the popover when clicked.
+         *
+         * @type ReactElement
+         * @required
+         */
+        children: ReactElement;
+    };
 
 /**
  * Brief message that provide additional guidance and helps users perform an action if needed.
@@ -69,9 +79,19 @@ export type PopoverProps = CommonProps<'disabled'> & {
  *     }
  *
  * @name Popover
- * @phase DesignReview
+ * @phase UXReview
  */
-function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }: PopoverProps) {
+export function Popover({
+    placement = 'top',
+    header,
+    content,
+    callToAction,
+    secondaryCallToAction,
+    children,
+    disabled = false,
+    refWidth = false,
+    ...props
+}: ElementProps<PopoverProps, 'div'>) {
     const id = useId();
     const [show, setShow] = useState(false);
     const arrowRef = useRef<HTMLElement | null>(null);
@@ -82,9 +102,13 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
         offsetOptions: 22,
         arrowRef,
         hide: !show,
+        refWidth: refWidth,
     });
 
-    useOutsideClick([elements.floating], () => setShow(false));
+    useOutsideClick({
+        elements: [elements.floating],
+        callback: () => setShow(false),
+    });
 
     const child = useMemo(
         () =>
@@ -97,6 +121,18 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
         [children, disabled, id],
     );
 
+    const basicArrowX = middlewareData?.arrow?.x ? `${middlewareData.arrow.x}px` : '0px';
+
+    const getArrowX = () => {
+        if (middlewareData?.arrow?.x) {
+            if (placement === 'top-start' || placement === 'bottom-start') return '16px';
+            if (placement === 'top' || placement === 'bottom') return `${middlewareData.arrow.x}px`;
+            if (placement === 'top-end' || placement === 'bottom-end')
+                return `${(middlewareData.arrow.x * 2 || 32) - 16}px`;
+        }
+        return '0px';
+    };
+
     return disabled ? (
         children
     ) : (
@@ -111,7 +147,7 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
                         elements.setFloating(node);
                         elements.setReference(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
                     }}
-                    style={floatingStyles}
+                    style={{ ...floatingStyles, ...props.style }}
                 >
                     <header>
                         <Txt variant="heading-h6">{header}</Txt>
@@ -123,25 +159,34 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
                         <Txt as="div" variant="body-small">
                             {content}
                         </Txt>
-                        {callToAction?.label && callToAction?.onClick && (
-                            <Button
-                                data-call-to-action
-                                label={callToAction.label}
-                                onClick={callToAction.onClick}
-                                size="small"
-                                variant="secondary"
-                            />
-                        )}
+                        <div data-cta-row>
+                            {secondaryCallToAction?.label && secondaryCallToAction?.onClick && (
+                                <Button
+                                    label={secondaryCallToAction.label}
+                                    onClick={secondaryCallToAction.onClick}
+                                    size="small"
+                                    variant="secondary"
+                                />
+                            )}
+                            {callToAction?.label && callToAction?.onClick && (
+                                <Button
+                                    label={callToAction.label}
+                                    onClick={callToAction.onClick}
+                                    size="small"
+                                    variant="primary"
+                                />
+                            )}
+                        </div>
                     </div>
                     <div
                         data-arrow
                         ref={(node) => {
                             arrowRef.current = node;
                         }}
-                        style={{
-                            left: `${middlewareData?.arrow?.x}px`,
-                            top: `${middlewareData?.arrow?.y}px`,
-                        }}
+                        style={cssWithVars({
+                            '--position-left': refWidth ? getArrowX() : basicArrowX,
+                            '--position-top': `${middlewareData?.arrow?.y || 0}px`,
+                        })}
                     />
                 </div>
             </Portal>
@@ -149,8 +194,4 @@ function Popover({ placement = 'top', header, content, callToAction, children, d
     );
 }
 
-Popover.bspkName = 'Popover';
-
-export { Popover };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Popover/PopoverExample.tsx

@@ -1,14 +1,16 @@
+import { PopoverProps } from '.';
 import { Button } from '-/components/Button';
+import { Txt } from '-/components/Txt';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { PopoverProps } from '.';
-
 export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) => ({
+    containerStyle: { width: '100%' },
     render: ({ props, Component }) => {
         return (
             <>
+                <Txt style={{ marginBottom: `var(--spacing-sizing-02)` }}>Click button for a Popover</Txt>
                 <Component {...props}>
-                    <Button label={`Click me (${props.placement})`} variant="secondary" />
+                    <Button label={`${props.placement}`} variant="secondary" />
                 </Component>
             </>
         );
@@ -18,10 +20,24 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
             label: 'With CallToAction',
             propState: {
                 callToAction: {
-                    label: 'Click me',
+                    label: 'CTA Button',
                     onClick: () => action('Call to action clicked!'),
                 },
             },
         },
+        {
+            label: 'With both CallToActions',
+            propState: {
+                callToAction: {
+                    label: 'Primary',
+                    onClick: () => action('Primary call to action clicked!'),
+                },
+                secondaryCallToAction: {
+                    label: 'Secondary',
+                    onClick: () => action('Secondary call to action clicked!'),
+                },
+            },
+        },
     ],
+    variants: false,
 });

package/src/components/Popover/popover.scss

@@ -4,10 +4,10 @@
     background: var(--surface-neutral-t1-base);
     box-shadow: var(--drop-shadow-float);
     padding: var(--spacing-sizing-04);
-    width: 300px;
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-lg);
     display: flex;
     flex-direction: column;
+    max-width: 300px;
 
     header {
         display: flex;
@@ -21,7 +21,6 @@
             border: none;
             cursor: pointer;
             padding: 0;
-            margin: 0 0 0 auto;
             color: var(--foreground-neutral-on-surface-variant-01);
             height: var(--spacing-sizing-06);
             width: var(--spacing-sizing-06);
@@ -36,6 +35,8 @@
     --arrow-size: var(--spacing-sizing-02);
     --arrow-offset: calc(var(--arrow-size) * -2);
     --arrow-background-color: var(--surface-neutral-t1-base);
+    --position-left: 0px;
+    --position-top: 0px;
 
     [data-arrow] {
         z-index: 1;
@@ -50,44 +51,36 @@
     &[data-placement^='top'] {
         [data-arrow] {
             bottom: var(--arrow-offset);
+            left: var(--position-left);
             border-top-color: var(--arrow-background-color);
-            filter: drop-shadow(0 2px 1px var(--shadow-10));
+            filter: drop-shadow(0 1px 1px var(--shadow-10));
         }
     }
 
     &[data-placement^='right'] {
         [data-arrow] {
+            top: var(--position-top);
             margin-left: calc(var(--arrow-offset) * 2);
             border-right-color: var(--arrow-background-color);
-            filter: drop-shadow(-2px 0 1px var(--shadow-10));
+            filter: drop-shadow(-1px 0 1px var(--shadow-10));
         }
     }
 
     &[data-placement^='bottom'] {
         [data-arrow] {
-            top: var(--arrow-offset);
+            left: var(--position-left);
+            top: -15px;
             border-bottom-color: var(--arrow-background-color);
-            filter: drop-shadow(0 -2px 1px var(--shadow-10));
-        }
-    }
-
-    &[data-placement='bottom-start'] {
-        [data-arrow] {
-            margin-left: var(--arrow-offset);
-        }
-    }
-
-    &[data-placement='bottom-end'] {
-        [data-arrow] {
-            margin-left: calc(var(--arrow-offset) * -1);
+            filter: drop-shadow(0 -1px 1px var(--shadow-10));
         }
     }
 
     &[data-placement^='left'] {
         [data-arrow] {
+            top: var(--position-top);
             right: var(--arrow-offset);
             border-left-color: var(--arrow-background-color);
-            filter: drop-shadow(2px 0 1px var(--shadow-10));
+            filter: drop-shadow(1px 0 1px var(--shadow-10));
         }
     }
 
@@ -97,16 +90,11 @@
         flex-direction: column;
     }
 
-    [data-call-to-action] {
+    [data-cta-row] {
+        display: flex;
+        align-items: end;
+        gap: var(--spacing-sizing-02);
         margin: 0 0 0 auto;
-
-        /* background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0 var(--spacing-sizing-03);
-    height: var(--spacing-sizing-12);
-    font: var(--labels-small);
-    color: var(--foreground-brand-primary); */
     }
 }
 

package/src/components/Portal/Portal.tsx

@@ -24,19 +24,17 @@ export type PortalProps = {
  * @name Portal
  * @phase Utility
  */
-function Portal({ children, container }: PortalProps) {
+export function Portal({ children, container }: PortalProps) {
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(container || null);
 
     useEffect(() => {
         if (!portalContainer && typeof window !== 'undefined') setPortalContainer(document.body);
     }, [portalContainer]);
 
+    if (!portalContainer) return null;
+
     // data-bspk="portal" can't be used here
-    return portalContainer && createPortal(children, portalContainer);
+    return <>{createPortal(children, portalContainer)}</>;
 }
 
-Portal.bspkName = 'Portal';
-
-export { Portal };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,5 +1,4 @@
-import { useId } from 'react';
-
+import { useId } from '-/hooks/useId';
 import { cssWithVars } from '-/utils/cwv';
 
 import './progress-bar.scss';
@@ -32,6 +31,20 @@ export type ProgressBarProps = {
     align?: 'center' | 'left';
     /** The label of the progressbar. */
     label: string;
+    /**
+     * If true and completion = 100, displays the progress bar in the success color.
+     *
+     * @deprecated This has a very narrow use-case. See guidelines for more information.
+     * @default false
+     */
+    successColor?: boolean;
+    /**
+     * Whether to hide the success color when the progress bar is complete.
+     *
+     * @deprecated This has a very narrow use-case. See guidelines for more information.
+     * @default false
+     */
+    successHidden?: boolean;
 };
 
 /**
@@ -46,13 +59,28 @@ export type ProgressBarProps = {
  *     }
  *
  * @name ProgressBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function ProgressBar({ size = 'large', completion = 0, align = 'center', label }: ProgressBarProps) {
+export function ProgressBar({
+    size = 'large',
+    completion: completionProp = 0,
+    align = 'center',
+    label,
+    successColor = false,
+    successHidden = false,
+}: ProgressBarProps) {
     const id = useId();
+    const completion = Math.max(0, Math.min(100, Math.round(completionProp))); // Ensure completion is between 0 and 100
+
+    if (successHidden && completion === 100) return null;
 
     return (
-        <div data-align={align} data-bspk="progress-bar" data-size={size}>
+        <div
+            data-align={align}
+            data-bspk="progress-bar"
+            data-size={size}
+            data-success={successColor && completion === 100 ? 'color' : undefined}
+        >
             <progress
                 aria-busy={completion < 100}
                 aria-label="A bounded progress bar from 0 to 100"
@@ -71,8 +99,4 @@ function ProgressBar({ size = 'large', completion = 0, align = 'center', label }
     );
 }
 
-ProgressBar.bspkName = 'ProgressBar';
-
-export { ProgressBar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressBar/progress-bar.scss

@@ -15,14 +15,14 @@
         width: 100%;
         height: var(--spacing-sizing-02);
         background-color: var(--surface-neutral-t3-low);
-        border-radius: var(--radius-small);
+        border-radius: var(--radius-sm);
 
         &::after {
             content: '';
             display: block;
             height: 100%;
             background-color: var(--foreground-brand-primary);
-            border-radius: var(--radius-small);
+            border-radius: var(--radius-sm);
             width: var(--width);
             transition: width 0.3s;
         }
@@ -34,6 +34,12 @@
         }
     }
 
+    &[data-success='color'] {
+        [data-bar]::after {
+            background-color: var(--status-success);
+        }
+    }
+
     label {
         font-size: var(--labels-small);
         width: 100%;

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,7 +1,8 @@
-/* eslint-disable react/no-multi-comp */ import { useId } from 'react';
-
+import { ProgressCircleSVG } from './ProgressCircleSVG';
 import { Txt } from '-/components/Txt';
+import { useId } from '-/hooks/useId';
 import { TxtVariant } from '-/utils/txtVariants';
+
 import './progress-circle.scss';
 
 export type ProgressCircleProps = {
@@ -32,7 +33,7 @@ export type ProgressCircleProps = {
  *     }
  *
  * @name ProgressCircle
- * @phase AccessibilityReview
+ * @phase UXReview
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircleProps) {
     let variant: TxtVariant = 'labels-base';
@@ -58,47 +59,8 @@ function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircl
     );
 }
 
-ProgressCircle.bspkName = 'ProgressCircle';
+ProgressCircle.SVG = ProgressCircleSVG;
 
 export { ProgressCircle };
 
-const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
-    const strokeWidth = props.strokeWidth || 10;
-    const width = 100;
-    const id = useId();
-
-    return (
-        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
-            <defs>
-                <linearGradient id={`${id}spinner-secondHalf`}>
-                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
-                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
-                </linearGradient>
-                <linearGradient id={`${id}spinner-firstHalf`}>
-                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
-                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
-                </linearGradient>
-            </defs>
-            <g strokeWidth={strokeWidth * 2}>
-                <path
-                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
-                    stroke={`url(#${id}spinner-secondHalf)`}
-                />
-                <path
-                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
-                    stroke={`url(#${id}spinner-firstHalf)`}
-                />
-                {/* 1deg extra path to have the round end cap */}
-                <path
-                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                />
-            </g>
-        </svg>
-    );
-};
-
-ProgressCircle.SVG = ProgressCircleSVG;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ProgressCircle/ProgressCircleSVG.tsx

@@ -0,0 +1,38 @@
+import { useId } from '-/hooks/useId';
+
+export const ProgressCircleSVG = (props: { strokeWidth?: number }) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+
+    return (
+        <svg {...props} data-animated fill="none" viewBox={`0 0 ${width * 2} ${width * 2}`}>
+            <defs>
+                <linearGradient id={`${id}spinner-secondHalf`}>
+                    <stop offset="50%" stopColor="currentColor" stopOpacity={0} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+                <linearGradient id={`${id}spinner-firstHalf`}>
+                    <stop offset="0%" stopColor="currentColor" stopOpacity={1} />
+                    <stop offset="100%" stopColor="currentColor" stopOpacity="0.375" />
+                </linearGradient>
+            </defs>
+            <g strokeWidth={strokeWidth * 2}>
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`}
+                    stroke={`url(#${id}spinner-secondHalf)`}
+                />
+                <path
+                    d={`M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`}
+                    stroke={`url(#${id}spinner-firstHalf)`}
+                />
+                {/* 1deg extra path to have the round end cap */}
+                <path
+                    d={`M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`}
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                />
+            </g>
+        </svg>
+    );
+};

package/src/components/ProgressionStepper/ProgressionStepper.tsx

@@ -1,6 +1,7 @@
 import { SvgCheck } from '@bspk/icons/Check';
 
-import { ElementProps } from '-';
+import { ElementProps } from '-/types/common';
+
 import './progression-stepper.scss';
 
 /** A progress stepper item is a single step in the progress bar. */
@@ -31,11 +32,7 @@ export type ProgressionStepperProps = {
      * The steps to display in the progress bar.
      *
      * @example
-     *     [
-     *         { name: '[Name of step to proceed forward 1]' },
-     *         { name: '[Name of step to proceed forward 2]' },
-     *         { name: '[Name of step to proceed forward 3]' },
-     *     ];
+     *     [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }];
      *
      * @type Array<ProgressionStepperItem>
      * @required
@@ -73,9 +70,9 @@ export type ProgressionStepperProps = {
  *     }
  *
  * @name ProgressionStepper
- * @phase Backlog
+ * @phase UXReview
  */
-function ProgressionStepper({
+export function ProgressionStepper({
     steps = [],
     currentStep: currentStepProp = 0,
     variant = 'horizontal',
@@ -99,19 +96,27 @@ function ProgressionStepper({
                 </label>
             )}
             <ol>
-                {steps.flatMap(({ name, subtext }, index) => {
+                {steps.map(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status: 'complete' | 'current' | 'incomplete' = 'incomplete';
-                    if (stepNum < currentStep) status = 'complete';
-                    else if (stepNum === currentStep) status = 'current';
+                    if (currentStep > stepNum) status = 'complete';
+                    else if (currentStep === stepNum) status = 'current';
 
                     return (
-                        <li data-status={status} data-step={stepNum} key={`step-${index}`}>
-                            <span aria-hidden data-line-circle>
+                        <li
+                            aria-current={status === 'current' ? 'step' : undefined}
+                            data-status={status}
+                            data-step={stepNum}
+                            key={`step-${index}`}
+                        >
+                            <span data-line-circle>
                                 <span data-line="before" />
                                 <span data-circle>
-                                    <span>{stepNum}</span>
-                                    {status === 'complete' && <SvgCheck />}
+                                    {status === 'complete' ? (
+                                        <SvgCheck aria-hidden={true} />
+                                    ) : (
+                                        (variant !== 'widget' || status === 'current') && <span>{stepNum}</span>
+                                    )}
                                 </span>
                                 <span data-line="after" />
                             </span>
@@ -129,8 +134,4 @@ function ProgressionStepper({
     );
 }
 
-ProgressionStepper.bspkName = 'ProgressionStepper';
-
-export { ProgressionStepper };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */