@beydesign/storybook 0.1.3 → 0.1.5

package/dist/stories/Credits/CreditsCard.js

@@ -6,6 +6,7 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Box } from '@mui/material';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { formatNumberShort } from '../../utils';
+import { SkeletonLoader } from '../UI';
 const StyledCard = styled.div `
   display: flex;
   flex-direction: column;
@@ -41,7 +42,7 @@ const TextWrapper = styled.span `
   display: inline-block;
   white-space: nowrap;
 `;
-export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0, }) => {
+export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0, loading = false, }) => {
     const isCollapsed = size === CreditsCardSize.Collapsed;
     const creditsLimitReached = usedCredits >= maxCredits;
     const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
@@ -49,5 +50,5 @@ export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCre
     const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
     const availableCredits = creditsLimitReached ? 0 : maxCredits - usedCredits;
     const isValid = maxCredits !== undefined && availableCredits !== undefined;
-    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), !case2 && (_jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }))] }), case1 && (_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) })), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: managedAgentsInfoText }) }) }), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: speechToVideoInfoText }) }) })] })), isCollapsed && isValid && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${formatNumberShort(availableCredits)}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${formatNumberShort(maxCredits)}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${formatNumberShort(overUsedCredits)}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })] }))] }));
+    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [loading && !isCollapsed && (_jsxs(React.Fragment, { children: [_jsx(Box, { display: "flex", justifyContent: "flex-end", children: _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "120px", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "100%", height: "12px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "100%", height: "12px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })] })), loading && isCollapsed && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [_jsx(SkeletonLoader, { width: "80px", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), !loading && !isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: "Credits Limit Reached" }) })), !case2 && (_jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }))] }), case1 && (_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) })), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: managedAgentsInfoText }) }) }), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: speechToVideoInfoText }) }) })] })), !loading && isCollapsed && isValid && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${formatNumberShort(availableCredits)}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", children: `${formatNumberShort(maxCredits)}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)", children: `${formatNumberShort(overUsedCredits)}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })] }))] }));
 };

package/dist/stories/Credits/CreditsCard.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof CreditsCard>;
 export declare const Default: Story;
 export declare const Collapsed: Story;
+export declare const Loading: Story;

package/dist/stories/Credits/CreditsCard.stories.js

@@ -32,3 +32,9 @@ export const Collapsed = {
         size: CreditsCardSize.Collapsed,
     },
 };
+export const Loading = {
+    args: {
+        ...Default.args,
+        loading: true,
+    },
+};

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

@@ -44,4 +44,8 @@ export interface CreditsCardProps {
      * Over used credits
      */
     overUsedCredits?: number;
+    /**
+     * Whether to show loading skeleton
+     */
+    loading?: boolean;
 }

package/dist/stories/StripeProduct/StripeProduct.js

@@ -5,12 +5,12 @@ import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
 import { getIconComponent } from '../../utils';
 import React from 'react';
 import { Badge, BadgeColor, BadgeSize } from '../UI';
-export const StripeProduct = ({ className, description, features, isMostPopular, isEnterprisePlan, style, title, duration, price, buttonProps, bubbleText, bubbleTooltip, bubbleTopOffset, }) => {
+export const StripeProduct = ({ className, description, features, isMostPopular, isEnterprisePlan, style, title, duration, price, buttonProps, bubbleText, bubbleTooltip, bubbleTopOffset, testId, }) => {
     return (_jsxs(Box, { display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: isMostPopular
             ? 'var(--primitives-desktop-primary-brand-violet-50)'
             : 'var(--colors-light-background-bg-white)', border: isMostPopular
             ? '1.5px solid var(--colors-light-border-border-brand)'
-            : 'none', position: 'relative', boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, className: className, children: [bubbleText && (_jsx(Box, { position: 'absolute', top: bubbleTopOffset || '-4%', right: 0, left: 0, children: _jsx(Badge, { text: bubbleText, color: BadgeColor.Yellow, children: bubbleTooltip, size: BadgeSize.xs, fill: true }) })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: title }), isMostPopular && (_jsx(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', bgcolor: 'var(--primitives-desktop-primary-brand-violet-200)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-accent)', children: "Most popular" }) }))] }), _jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left', minHeight: '100px' }, children: description }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'end', children: isEnterprisePlan ? (_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: "Custom" })) : (_jsxs(React.Fragment, { children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: price }), _jsxs(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: ["/", duration] })] })) }), buttonProps && (_jsx(MainButton, { disabled: buttonProps?.disabled, loading: buttonProps?.loading, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
+            : 'none', position: 'relative', boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, className: className, "data-testid": testId, children: [bubbleText && (_jsx(Box, { position: 'absolute', top: bubbleTopOffset || '-4%', right: 0, left: 0, children: _jsx(Badge, { text: bubbleText, color: BadgeColor.Yellow, children: bubbleTooltip, size: BadgeSize.xs, fill: true }) })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: title }), isMostPopular && (_jsx(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', bgcolor: 'var(--primitives-desktop-primary-brand-violet-200)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-accent)', children: "Most popular" }) }))] }), _jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left', minHeight: '100px' }, children: description }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'end', children: isEnterprisePlan ? (_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: "Custom" })) : (_jsxs(React.Fragment, { children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: price }), _jsxs(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: ["/", duration] })] })) }), buttonProps && (_jsx(MainButton, { disabled: buttonProps?.disabled, loading: buttonProps?.loading, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
                     margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0',
                 } })), features && features?.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', children: "This includes:" }), features.map((feature, index) => {
                         const isHeading = feature?.startsWith('-');

package/dist/stories/StripeProduct/StripeProductCardSkeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { SkeletonLoader } from '../UI';
-export const StripeProductCardSkeleton = ({ width = 'auto', showMostPopular = false, showBubble = false, showButton = true, showFeatures = true, featuresCount = 5, style, }) => {
-    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: "var(--colors-light-background-bg-white)", position: "relative", boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, children: [showBubble && (_jsx(Box, { position: "absolute", top: "-4%", left: "50%", sx: { transform: 'translateX(-50%)' }, width: "50%", children: _jsx(SkeletonLoader, { height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })), _jsxs(Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(SkeletonLoader, { width: "40%", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showMostPopular && (_jsx(SkeletonLoader, { width: "100px", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)" }))] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", minHeight: "100px", children: [_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "95%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "end", gap: "4px", children: [_jsx(SkeletonLoader, { width: "80px", height: "36px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), showButton && (_jsx(Box, { margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0', children: _jsx(SkeletonLoader, { width: "100%", height: "44px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)" }) })), showFeatures && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", alignItems: "flex-start", children: [_jsx(SkeletonLoader, { width: "120px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [_jsx(SkeletonLoader, { width: "18px", height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)" }), _jsx(SkeletonLoader, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '75%' : '90%', height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }, index)))] }))] }));
+export const StripeProductCardSkeleton = ({ width = 'auto', showMostPopular = false, showBubble = false, showButton = true, showFeatures = true, featuresCount = 5, style, testId, }) => {
+    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: "var(--colors-light-background-bg-white)", position: "relative", boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, "data-testid": testId, children: [showBubble && (_jsx(Box, { position: "absolute", top: "-4%", left: "50%", sx: { transform: 'translateX(-50%)' }, width: "50%", children: _jsx(SkeletonLoader, { height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })), _jsxs(Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(SkeletonLoader, { width: "40%", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showMostPopular && (_jsx(SkeletonLoader, { width: "100px", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)" }))] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", minHeight: "100px", children: [_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "95%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "end", gap: "4px", children: [_jsx(SkeletonLoader, { width: "80px", height: "36px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), showButton && (_jsx(Box, { margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0', children: _jsx(SkeletonLoader, { width: "100%", height: "44px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)" }) })), showFeatures && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", alignItems: "flex-start", children: [_jsx(SkeletonLoader, { width: "120px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [_jsx(SkeletonLoader, { width: "18px", height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)" }), _jsx(SkeletonLoader, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '75%' : '90%', height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }, index)))] }))] }));
 };

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

@@ -30,6 +30,8 @@ export interface StripeProductProps {
     style?: React.CSSProperties;
     /** Class name of the product */
     className?: string;
+    /** Test ID of the product */
+    testId?: string;
 }
 /**
  * Stripe product card skeleton component props
@@ -49,4 +51,6 @@ export interface StripeProductCardSkeletonProps {
     featuresCount?: number;
     /** Custom style for the skeleton */
     style?: React.CSSProperties;
+    /** Test ID of the skeleton card */
+    testId?: string;
 }

package/dist/stories/UI/Badge.js

@@ -3,7 +3,7 @@ import { BadgeColor, BadgeSize } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, children, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, }) => {
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, children, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, iconWeight = 'regular', iconSize, iconColor, testId, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {
             case BadgeColor.Default:
@@ -114,5 +114,5 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
         color: iconColor || getTextColor(),
         weight: iconWeight,
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, margin: 0, gap: "4px", sx: customStyle, "data-testid": testId, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor(), children: text })), children] }));
 };

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, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, }) => {
+export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, testId, }) => {
     let errorText = '';
     const calculateFill = () => {
         if (currentValue > maxValue)
@@ -29,5 +29,5 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentV
     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, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, children: `${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, children: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
+    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, children: `${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, children: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
 };

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

@@ -47,6 +47,8 @@ export type BadgeProps = {
     iconSize?: string | number;
     /** Custom icon color (overrides the default color based on badge color) */
     iconColor?: string;
+    /** Test ID of the badge */
+    testId?: string;
 };
 /**
  * Avatar size variants
@@ -189,6 +191,8 @@ export type ProgressIndicatorProps = {
     textColor?: string;
     /** Style of the progress indicator */
     style?: SxProps<Theme>;
+    /** Test ID of the progress indicator */
+    testId?: string;
 };
 export interface SkeletonLoaderProps {
     /**

package/package.json

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