@beydesign/storybook 0.0.47 → 0.0.48

package/dist/stories/Form/TextArea.js

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, }) => {
+export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, trailingElement: labelTrailingElement })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
                         ? 'var(--colors-light-border-border-error)'
                         : focused
                             ? 'var(--colors-light-border-border-component-active)'

package/dist/stories/Form/TextArea.stories.d.ts

@@ -132,6 +132,15 @@ declare const meta: {
                 };
             };
         };
+        labelTrailingElement: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;

package/dist/stories/Form/TextArea.stories.js

@@ -104,6 +104,13 @@ const meta = {
                 type: { summary: 'object' },
             },
         },
+        labelTrailingElement: {
+            control: 'object',
+            description: 'The trailing element of the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
     },
 };
 export default meta;

package/dist/stories/Form/TextInput.js

@@ -3,9 +3,9 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsx(Typography, { text: label, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, trailingElement: labelTrailingElement })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
                         : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Box, { display: 'flex', flexDirection: 'row', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
                                 ? '1px solid var(--colors-light-border-border-error)'

package/dist/stories/Form/TextInput.stories.d.ts

@@ -114,6 +114,15 @@ declare const meta: {
                 };
             };
         };
+        labelTrailingElement: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;

package/dist/stories/Form/TextInput.stories.js

@@ -90,6 +90,13 @@ const meta = {
                 type: { summary: 'object' },
             },
         },
+        labelTrailingElement: {
+            control: 'object',
+            description: 'The trailing element of the label',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
     },
 };
 export default meta;

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

@@ -32,6 +32,8 @@ export type TextAreaProps = {
     style?: SxProps<Theme>;
     /** Whether the text area is required */
     required?: boolean;
+    /** Text area label trailing element */
+    labelTrailingElement?: React.ReactNode;
 };
 /**
  * Text input component props
@@ -61,6 +63,8 @@ export type TextInputProps = {
     style?: SxProps<Theme>;
     /** Whether the text input is required */
     required?: boolean;
+    /** Text input label trailing element */
+    labelTrailingElement?: React.ReactNode;
 };
 /**
  * Toggle position variants

package/dist/stories/Typography/Typography.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight } from './types';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, }) => {
+import { Box } from '@mui/material';
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, required = false, style, trailingElement = null, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
         if (sizeLc.includes('heading')) {
@@ -29,26 +30,33 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
     const paragraphIndent = `var(--global-${sizeToken}-${weightToken}-paragraph-indent)`;
     const paragraphSpacing = `var(--global-${sizeToken}-${weightToken}-paragraph-spacing)`;
     const textDecoration = `var(--global-${sizeToken}-${weightToken}-text-decoration)`;
+    const requiredColor = 'var(--colors-light-text-text-error)';
     const getTextTransform = () => {
         const computedValue = getComputedStyle(document.documentElement)
             .getPropertyValue(`--global-${sizeToken}-${weightToken}-text-case`)
             .trim();
         return (computedValue === 'uppercase' ? 'uppercase' : 'none');
     };
-    return (_jsxs("span", { className: className, style: {
-            display: 'flex',
-            alignItems: 'center',
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily + ', sans-serif',
-            lineHeight: lineHeight + 'px',
-            letterSpacing: letterSpacing,
-            textIndent: paragraphIndent,
-            marginBottom: paragraphSpacing,
-            textTransform: getTextTransform(),
-            textDecoration: textDecoration,
-            color: color || 'var(--global-text-text-title)',
-            gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
-            ...style,
-        }, children: [text, required && (_jsx("span", { style: { color: 'var(--colors-light-text-text-error)' }, children: "*" }))] }));
+    const Label = () => {
+        return (_jsxs("span", { className: className, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontFamily: fontFamily + ', sans-serif',
+                lineHeight: lineHeight + 'px',
+                letterSpacing: letterSpacing,
+                textIndent: paragraphIndent,
+                marginBottom: paragraphSpacing,
+                textTransform: getTextTransform(),
+                textDecoration: textDecoration,
+                color: color || 'var(--global-text-text-title)',
+                ...style,
+            }, children: [text, required && _jsx("span", { style: { color: requiredColor }, children: "*" })] }));
+    };
+    if (!trailingElement) {
+        return _jsx(Label, {});
+    }
+    return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)", children: [_jsx(Label, {}), trailingElement] }));
 };

package/dist/stories/Typography/Typography.stories.js

@@ -1,5 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types';
+import { Info } from '@phosphor-icons/react';
 const meta = {
     title: 'Design System/Components/Typography/Typography',
     component: Typography,
@@ -65,6 +67,12 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        trailingElement: {
+            description: 'Trailing element of the typography',
+            table: {
+                type: { summary: 'ReactNode' },
+            },
+        },
     },
 };
 export default meta;
@@ -73,6 +81,8 @@ export const HeadingXLBold = {
         text: 'Typography',
         size: TypographySize.HeadingXL,
         weight: TypographyWeight.Bold,
+        trailingElement: _jsx(Info, { size: 24 }),
+        required: true,
     },
 };
 export const HeadingXLSemiBold = {

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

@@ -41,4 +41,6 @@ export interface TypographyProps {
     style?: React.CSSProperties;
     /** Whether the typography is required */
     required?: boolean;
+    /** Whether the typography has a trailing element */
+    trailingElement?: React.ReactNode;
 }

package/package.json

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