@beydesign/storybook 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/stories/StripeProduct/StripeProduct.js +2 -2
  2. package/dist/stories/StripeProduct/types.d.ts +2 -0
  3. package/package.json +1 -1
package/dist/stories/StripeProduct/StripeProduct.js CHANGED
@@ -5,12 +5,12 @@ import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
5
5
  import { getIconComponent } from '../../utils';
6
6
  import React from 'react';
7
7
  import { Badge, BadgeColor, BadgeSize } from '../UI';
8
- export const StripeProduct = ({ className, description, features, isMostPopular, isEnterprisePlan, style, title, duration, price, buttonProps, bubbleText, bubbleTooltip, }) => {
8
+ export const StripeProduct = ({ className, description, features, isMostPopular, isEnterprisePlan, style, title, duration, price, buttonProps, bubbleText, bubbleTooltip, bubbleTopOffset, }) => {
9
9
  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
10
10
  ? 'var(--primitives-desktop-primary-brand-violet-50)'
11
11
  : 'var(--colors-light-background-bg-white)', border: isMostPopular
12
12
  ? '1.5px solid var(--colors-light-border-border-brand)'
13
- : '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: '-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' }, 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, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
13
+ : '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' }, 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, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
14
14
  margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0',
15
15
  } })), 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) => {
16
16
  const isHeading = feature?.startsWith('-');
package/dist/stories/StripeProduct/types.d.ts CHANGED
@@ -24,6 +24,8 @@ export interface StripeProductProps {
24
24
  bubbleText?: string;
25
25
  /** Tooltip of the bubble */
26
26
  bubbleTooltip?: JSX.Element;
27
+ /** Top offset of the bubble */
28
+ bubbleTopOffset?: React.CSSProperties['top'];
27
29
  /** Style of the product */
28
30
  style?: React.CSSProperties;
29
31
  /** Class name of the product */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@beydesign/storybook",
3
3
  "private": false,
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",