@beydesign/storybook 0.2.25 → 0.2.26

package/dist/stories/PlanCard/PlanCard.js

@@ -9,5 +9,10 @@ export const PlanCard = ({ title, description, price, priceSuffix = '/month', ba
             ? 'var(--color-background-bg-card-highlight)'
             : 'var(--color-background-bg-component)', border: `1px solid ${highlighted
             ? 'var(--color-border-border-brand)'
-            : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: feature })] }, `${index}-${feature}`)))] }))] }));
+            : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => {
+                        const isHeading = feature?.startsWith('-');
+                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [!isHeading && (_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone })), _jsx(Typography, { size: TypographySize.TextM, weight: isHeading
+                                        ? TypographyWeight.Medium
+                                        : TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}-${feature}`));
+                    })] }))] }));
 };

package/dist/stories/PlanCard/PlanCard.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Pro: Story;
 export declare const Free: Story;
 export declare const Personal: Story;
 export declare const Custom: Story;
+export declare const WithSubheadings: Story;

package/dist/stories/PlanCard/PlanCard.stories.js

@@ -123,3 +123,29 @@ export const Custom = {
         },
     },
 };
+export const WithSubheadings = {
+    args: {
+        title: 'Starter',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '€100',
+        priceSuffix: '/month',
+        buttonText: 'Upgrade',
+        features: [
+            '-E2E Agent API',
+            'Included mins: 90',
+            'Bundle €/min: €0.54',
+            'Overage €/min: €0.33',
+            '-A2V API',
+            'Included mins: 180',
+            'Bundle €/min: €0.27',
+            'Overage €/min: €0.18',
+        ],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Prefix a feature with "-" to render it as a subheading (bold, no check icon) that groups the items below it.',
+            },
+        },
+    },
+};

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

@@ -21,7 +21,7 @@ export interface PlanCardProps {
     highlighted?: boolean;
     /** Heading above the feature list */
     featuresTitle?: string;
-    /** Feature list */
+    /** Feature list. Prefix an item with "-" to render it as a subheading (no check icon). */
     features?: string[];
     /** Action button label (defaults to "Upgrade"); hidden when omitted */
     buttonText?: string;

package/package.json

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