@beydesign/storybook 0.2.3 → 0.2.5

package/dist/stories/UI/Popover.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Tooltip, ClickAwayListener } from '@mui/material';
+import { PopoverVariant } from './types';
+/** Composed from the semantic `shadow-sm` design token. */
+const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
+const VARIANT_BG = {
+    [PopoverVariant.Dark]: 'var(--color-background-bg-black)',
+    [PopoverVariant.Light]: 'var(--color-background-bg-page-contrast)',
+};
+const VARIANT_COLOR = {
+    [PopoverVariant.Dark]: 'var(--color-text-text-white)',
+    [PopoverVariant.Light]: 'var(--color-text-text-title)',
+};
+/**
+ * Design-system popover: a floating panel anchored to a trigger element that
+ * renders arbitrary content. Wraps MUI `Tooltip` for positioning and the arrow,
+ * then applies theme-aware token styling. Opens on hover/focus (default) or on
+ * click (menu-style, dismissed by an outside click). Supports a dark or light
+ * surface and an optional controlled open state.
+ */
+export const Popover = ({ content, children, variant = PopoverVariant.Dark, placement = 'top', trigger = 'hover', arrow = true, maxWidth = 280, padding = 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', open, onOpenChange, disableInteractive = false, className, }) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+    const setOpen = (next) => {
+        if (!isControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const background = VARIANT_BG[variant];
+    const slotProps = {
+        tooltip: {
+            className,
+            sx: {
+                backgroundColor: background,
+                color: VARIANT_COLOR[variant],
+                padding,
+                borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)',
+                boxShadow: SHADOW_SM,
+                maxWidth,
+                border: variant === PopoverVariant.Light
+                    ? '1px solid var(--color-border-border-subtle)'
+                    : 'none',
+            },
+        },
+        arrow: { sx: { color: background } },
+    };
+    if (trigger === 'click') {
+        const triggerEl = React.cloneElement(children, {
+            onClick: (event) => {
+                children.props.onClick?.(event);
+                setOpen(!isOpen);
+            },
+        });
+        return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Tooltip, { open: isOpen, placement: placement, arrow: arrow, title: content, disableHoverListener: true, disableFocusListener: true, disableTouchListener: true, slotProps: slotProps, children: triggerEl }) }));
+    }
+    const controlledProps = isControlled
+        ? {
+            open,
+            onOpen: () => onOpenChange?.(true),
+            onClose: () => onOpenChange?.(false),
+        }
+        : {};
+    return (_jsx(Tooltip, { arrow: arrow, placement: placement, disableInteractive: disableInteractive, title: content, ...controlledProps, slotProps: slotProps, children: children }));
+};

package/dist/stories/UI/Popover.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Popover } from './Popover';
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+export declare const Dark: Story;
+export declare const Light: Story;

package/dist/stories/UI/Popover.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Popover } from './Popover';
+import { PopoverVariant } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+const meta = {
+    title: 'Design System/Components/UI/Popover',
+    component: Popover,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'inline-radio',
+            options: Object.values(PopoverVariant),
+            table: { defaultValue: { summary: 'Dark' } },
+        },
+        placement: {
+            control: 'select',
+            options: ['top', 'right', 'bottom', 'left'],
+            table: { defaultValue: { summary: 'top' } },
+        },
+        arrow: { control: 'boolean', table: { defaultValue: { summary: 'true' } } },
+        maxWidth: {
+            control: 'number',
+            table: { defaultValue: { summary: '280' } },
+        },
+        content: { control: false },
+        children: { control: false },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { padding: 80 }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+// MUI Tooltip injects a ref + hover handlers into its child, so the trigger
+// must forward the ref and spread the received props onto a DOM node.
+const Trigger = React.forwardRef((props, ref) => (_jsx("button", { ...props, ref: ref, type: "button", style: {
+        padding: '8px 16px',
+        borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)',
+        border: '1px solid var(--color-border-border-component)',
+        background: 'var(--color-background-bg-page-contrast)',
+        color: 'var(--color-text-text-title)',
+        cursor: 'pointer',
+    }, children: "Hover me" })));
+Trigger.displayName = 'Trigger';
+const RichContent = () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", children: "Credit rates" }), _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-white)", children: "Managed Agents 1 Min = 100 Credits" })] }));
+export const Dark = {
+    args: {
+        variant: PopoverVariant.Dark,
+        placement: 'top',
+        content: _jsx(RichContent, {}),
+        children: _jsx(Trigger, {}),
+    },
+};
+export const Light = {
+    args: {
+        variant: PopoverVariant.Light,
+        placement: 'right',
+        content: (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", children: "A light popover surface." })),
+        children: _jsx(Trigger, {}),
+    },
+};

package/dist/stories/UI/ProgressIndicator.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProgressIndicatorMode } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overriddenText = null, currentValue = 40, maxValue = 100, fillColor = 'var(--color-background-bg-brand-primary)', backgroundColor = 'var(--color-background-bg-component)', text = 'used', textColor = 'var(--color-text-text-title)', style, textStyle, testId, }) => {
+export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overriddenText = null, currentValue = 40, maxValue = 100, fillColor = 'var(--color-background-bg-brand-primary)', backgroundColor = 'var(--color-background-bg-component)', minWidth = 200, animated = false, text = 'used', textColor = 'var(--color-text-text-title)', style, textStyle, testId, }) => {
     let errorText = '';
     const calculateFill = () => {
         if (currentValue > maxValue)
@@ -29,7 +29,11 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overridd
     if (errorText) {
         return (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, children: errorText }));
     }
-    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, "data-testid": testId, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: textStyle, children: overriddenText ||
-                    `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}` })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: textStyle, children: overriddenText ||
+    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: minWidth, "data-testid": testId, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: textStyle, children: overriddenText ||
+                    `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}` })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)', sx: {
+                        backgroundColor: fillColor,
+                        width: `${calculateFill()}%`,
+                        transition: animated ? 'width 0.3s ease-in-out' : undefined,
+                    } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: textStyle, children: overriddenText ||
                     `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
 };

package/dist/stories/UI/ProgressIndicator.stories.d.ts

@@ -6,5 +6,6 @@ type Story = StoryObj<typeof ProgressIndicator>;
 export declare const Default: Story;
 export declare const ValueWithOverriddenText: Story;
 export declare const Percentage: Story;
+export declare const BarOnly: Story;
 export declare const PercentageWithOverriddenText: Story;
 export declare const Custom: Story;

package/dist/stories/UI/ProgressIndicator.stories.js

@@ -75,6 +75,15 @@ export const Percentage = {
         maxValue: 100,
     },
 };
+export const BarOnly = {
+    args: {
+        mode: ProgressIndicatorMode.Bar,
+        currentValue: 500,
+        maxValue: 2000,
+        minWidth: 0,
+        style: { width: '206px' },
+    },
+};
 export const PercentageWithOverriddenText = {
     args: {
         mode: ProgressIndicatorMode.Percentage,

package/dist/stories/UI/index.d.ts

@@ -5,6 +5,7 @@ export * from './FeatureBanner';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';
+export * from './Popover';
 export * from './ProgressIndicator';
 export * from './PromoBanner';
 export * from './SkeletonLoader';

package/dist/stories/UI/index.js

@@ -5,6 +5,7 @@ export * from './FeatureBanner';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';
+export * from './Popover';
 export * from './ProgressIndicator';
 export * from './PromoBanner';
 export * from './SkeletonLoader';

package/dist/stories/UI/types.d.ts

@@ -1,6 +1,47 @@
-import { Theme, SxProps } from '@mui/material';
+import { Theme, SxProps, TooltipProps } from '@mui/material';
+import { ReactElement, ReactNode } from 'react';
 import { IconName } from '../../utils';
 import { ButtonSize, ButtonHierarchy } from '../Buttons';
+/**
+ * Colour scheme for the {@link Popover}.
+ */
+export declare enum PopoverVariant {
+    Dark = "Dark",
+    Light = "Light"
+}
+/**
+ * Props for the {@link Popover} component — a hover/focus-triggered floating
+ * panel that anchors to a trigger element and renders arbitrary content.
+ */
+export interface PopoverProps {
+    /** Floating content shown inside the popover. */
+    content: ReactNode;
+    /** The trigger element the popover anchors to (must forward a ref). */
+    children: ReactElement;
+    /** Colour scheme. Defaults to `Dark`. */
+    variant?: PopoverVariant;
+    /** Placement relative to the trigger. Defaults to `top`. */
+    placement?: TooltipProps['placement'];
+    /** How the popover opens. `hover` (default) or `click` (menu-style). */
+    trigger?: 'hover' | 'click';
+    /** Show the arrow pointer. Defaults to `true`. */
+    arrow?: boolean;
+    /** Max width of the popover in pixels. Defaults to `280`. */
+    maxWidth?: number;
+    /** Padding of the popover surface. Defaults to the `spacing-lg` token. */
+    padding?: string;
+    /** Controlled open state. Omit for uncontrolled hover/focus behaviour. */
+    open?: boolean;
+    /** Called with the next open state (controlled usage). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * When true the popover closes as soon as the pointer leaves the trigger.
+     * Leave false (default) so users can move into interactive content.
+     */
+    disableInteractive?: boolean;
+    /** Applied to the popover surface. */
+    className?: string;
+}
 /**
  * Badge size variants
  */
@@ -216,7 +257,9 @@ export interface CheckIconProps {
  */
 export declare enum ProgressIndicatorMode {
     Value = "Value",
-    Percentage = "Percentage"
+    Percentage = "Percentage",
+    /** Renders only the bar, with no accompanying value text. */
+    Bar = "Bar"
 }
 /**
  * Progress indicator component props
@@ -232,6 +275,10 @@ export type ProgressIndicatorProps = {
     fillColor?: string;
     /** Background color of the progress indicator */
     backgroundColor?: string;
+    /** Minimum width of the indicator in px. Defaults to `200`. */
+    minWidth?: number;
+    /** Animate the fill width when the value changes. Defaults to `false`. */
+    animated?: boolean;
     /** Text of the progress indicator */
     text?: string;
     /** Overridden text of the progress indicator */

package/dist/stories/UI/types.js

@@ -1,3 +1,11 @@
+/**
+ * Colour scheme for the {@link Popover}.
+ */
+export var PopoverVariant;
+(function (PopoverVariant) {
+    PopoverVariant["Dark"] = "Dark";
+    PopoverVariant["Light"] = "Light";
+})(PopoverVariant || (PopoverVariant = {}));
 /**
  * Badge size variants
  */
@@ -98,6 +106,8 @@ export var ProgressIndicatorMode;
 (function (ProgressIndicatorMode) {
     ProgressIndicatorMode["Value"] = "Value";
     ProgressIndicatorMode["Percentage"] = "Percentage";
+    /** Renders only the bar, with no accompanying value text. */
+    ProgressIndicatorMode["Bar"] = "Bar";
 })(ProgressIndicatorMode || (ProgressIndicatorMode = {}));
 /**
  * FeatureBanner media variants

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",