@beydesign/storybook 0.7.0 → 0.7.1

package/README.md

@@ -1,6 +1,6 @@
 # BeyDesign Storybook
-[![Lint](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml)   [![Deploy Storybook to GitHub Pages](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml)   [![Publish Package to NPM](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)  
 
+[![Lint](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/lint.yml) [![Deploy Storybook to GitHub Pages](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/storybook.yml) [![Publish Package to NPM](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/Beyond-Presence/bey-design-system/actions/workflows/publish.yml)
 
 A React component library implementing the Beyond Presence Design System. This package provides a collection of reusable components that follow the design specifications from our [Figma Design System](https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4295-3110&p=f&m=dev).
 
@@ -48,6 +48,35 @@ function App() {
 }
 ```
 
+## Color pairing
+
+Color tokens come in three families, and they are not interchangeable. Pick the
+text token by the surface it sits on:
+
+| Surface      | Example                                          | Text token                                                   |
+| ------------ | ------------------------------------------------ | ------------------------------------------------------------ |
+| Solid fill   | `bg-success`, `bg-error`                         | `text-success-on-color`, `text-red-on-color`                 |
+| Subtle tint  | `bg-badge-accent-success`, `bg-badge-accent-red` | `text-success`, `text-error`                                 |
+| Page or card | `bg-page`, `bg-page-contrast`                    | `text-success`, `text-error`, `text-title`, `text-paragraph` |
+
+The trap: a solid fill and its accent text resolve to the **same** primitive.
+`bg-success` and `text-success` are both `Primary.Success.500`, so pairing them
+renders invisible text. That is what the `-on-color` family is for — it is the
+darker step (`Primary.Success.800`) meant to sit on the solid fill.
+
+There is an `-on-color` token per accent: `text-success-on-color`,
+`text-red-on-color`, `text-yellow-on-color`, `text-violet-on-color`,
+`text-lemon-on-color`, `text-blue-on-color`, `text-cyan-on-color` and
+`text-pink-on-color`.
+
+Two related notes:
+
+- Some tokens are relative to the page rather than absolute. `bg-error-subtle`
+  is a near-white `Red.25` in light but a solid `Red.700` in dark — subtle
+  _against its own page_, not subtle in isolation. Check both themes.
+- `bg-component` is pure white in light, so it disappears on a card
+  (`bg-page-contrast`). Use `bg-element` for insets on a card.
+
 ## Development
 
 To run the Storybook development environment locally:

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

@@ -15,5 +15,4 @@ export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
-export * from './Stepper';
 export * from './TabMenu';

package/dist/stories/UI/index.js

@@ -15,5 +15,4 @@ export * from './SelectAvatarCard';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
-export * from './Stepper';
 export * from './TabMenu';

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

@@ -449,38 +449,6 @@ export interface ConversationalVoiceAgentsBannerProps {
     /** Test ID of the banner */
     testId?: string;
 }
-export interface StepProps {
-    /** Current step of the stepper */
-    currentStep: number;
-    /** Total steps of the stepper */
-    totalSteps: number;
-    /** Index of the step */
-    index: number;
-    /** Title of the step */
-    title: string;
-    /** On click of the step */
-    onClick?: () => void;
-    /** Connector width of the step */
-    connectorWidth?: string | number;
-    /** Style of the step */
-    stepStyle?: SxProps<Theme>;
-}
-export interface StepperProps {
-    /** Steps of the stepper */
-    steps: string[];
-    /** Current step of the stepper */
-    currentStep: number;
-    /** On click of the step */
-    onStepClick?: (step: number) => void;
-    /** Style of the stepper */
-    style?: SxProps<Theme>;
-    /** Style of the step */
-    stepStyle?: SxProps<Theme>;
-    /** Test ID of the stepper */
-    testId?: string;
-    /** Connector width of the stepper */
-    connectorWidth?: string | number;
-}
 /**
  * TabMenu size variants
  */

package/package.json

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

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { StepperProps } from './types';
-export declare const Stepper: React.FC<StepperProps>;

package/dist/stories/UI/Stepper.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { getIconComponent } from '../../utils';
-export const Stepper = ({ steps, currentStep, onStepClick, style, testId, connectorWidth, stepStyle, }) => {
-    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, "data-testid": testId, display: 'flex', flexDirection: 'row', alignItems: 'center', children: steps.map((step, index) => (_jsx(Step, { currentStep: currentStep, index: index, title: step, onClick: onStepClick ? () => onStepClick(index + 1) : undefined, totalSteps: steps.length, connectorWidth: connectorWidth, stepStyle: stepStyle }, index))) }));
-};
-const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth = '70px', stepStyle, }) => {
-    const thisStep = index + 1;
-    const isDisabled = currentStep < thisStep;
-    const isCurrent = currentStep === thisStep;
-    const isCompleted = currentStep > thisStep;
-    const getTextColor = () => {
-        if (isDisabled)
-            return 'var(--color-text-text-paragraph)';
-        else if (isCurrent)
-            return 'var(--color-text-text-clicable)';
-        else if (isCompleted)
-            return 'var(--color-text-text-title)';
-        else
-            return 'var(--color-text-text-paragraph)';
-    };
-    const getIconColor = () => {
-        if (isDisabled)
-            return 'var(--color-foreground-fg-disabled)';
-        else if (isCurrent)
-            return 'var(--color-background-bg-brand-primary)';
-        else if (isCompleted)
-            return 'var(--color-background-bg-brand-primary)';
-        else
-            return 'var(--color-foreground-fg-secondary)';
-    };
-    const IconComponent = getIconComponent('CheckCircle', {
-        size: '24px',
-        color: getIconColor(),
-        weight: isCompleted ? 'fill' : 'regular',
-        onClick: () => onClick?.(),
-        style: { cursor: onClick ? 'pointer' : 'default' },
-    });
-    const getConnectorColor = (position) => {
-        if (position === 'left') {
-            if (thisStep === 1)
-                return 'transparent';
-            else if (thisStep <= currentStep)
-                return 'var(--color-background-bg-brand-primary)';
-            else
-                return 'var(--color-foreground-fg-disabled)';
-        }
-        else if (position === 'right') {
-            if (thisStep === totalSteps)
-                return 'transparent';
-            else if (thisStep < currentStep)
-                return 'var(--color-background-bg-brand-primary)';
-            else
-                return 'var(--color-foreground-fg-disabled)';
-        }
-    };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: onClick ? () => onClick() : undefined, sx: {
-            cursor: onClick ? 'pointer' : 'default',
-            '&:hover': {
-                border: '1px solid #6938EF33',
-                borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
-                backgroundColor: '#6938EF1A',
-            },
-            ...stepStyle,
-        }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Box, { height: '1px', bgcolor: getConnectorColor('left'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), IconComponent, _jsx(Box, { height: '1px', bgcolor: getConnectorColor('right'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, color: getTextColor(), children: title })] }));
-};

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

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

package/dist/stories/UI/Stepper.stories.js

@@ -1,65 +0,0 @@
-import { Stepper } from './Stepper';
-const meta = {
-    title: 'Design System/Components/UI/Stepper',
-    component: Stepper,
-    parameters: {
-        layout: 'centered',
-        design: {
-            type: 'figspec',
-            url: '',
-        },
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        currentStep: {
-            control: 'number',
-            description: 'Current step of the stepper',
-            table: {
-                type: { summary: 'number' },
-            },
-        },
-        steps: {
-            control: 'object',
-            description: 'Steps of the stepper',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-        onStepClick: {
-            description: 'Function to call when a step is clicked',
-            table: {
-                type: { summary: 'function' },
-            },
-        },
-        style: {
-            control: 'object',
-            description: 'Style of the stepper',
-            table: {
-                type: { summary: 'object' },
-            },
-        },
-        testId: {
-            control: 'text',
-            description: 'Test ID of the stepper',
-            table: {
-                type: { summary: 'string' },
-            },
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {
-        currentStep: 1,
-        steps: [
-            'Lighting, Audio & Setup',
-            'Beginning',
-            'Speaking Phase',
-            'Ending',
-            'Final Checklist',
-        ],
-        onStepClick: () => { },
-        style: {},
-        testId: 'stepper',
-    },
-};