@beydesign/storybook 0.2.8 → 0.2.9

package/dist/stories/Form/TextInput.js

@@ -24,9 +24,9 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
     const iconColor = disabled
         ? 'var(--color-text-text-disabled)'
         : 'var(--color-foreground-fg-secondary)';
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : undefined, sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : undefined, sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: '40px', bgcolor: 'var(--color-background-bg-component)', border: errorText
                         ? 'none'
-                        : '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', 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(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: { boxSizing: 'border-box' }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', height: '100%', width: '100%', sx: { boxSizing: 'border-box' }, 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(--color-border-border-error)'
                                 : focused
                                     ? '1px solid var(--color-border-border-component-active)'
@@ -59,5 +59,5 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
                                         height: '20px',
                                         color: iconColor,
                                         'aria-hidden': 'true',
-                                    }) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
+                                    }) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', sx: { boxSizing: 'border-box' }, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
 };

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

@@ -175,4 +175,9 @@ export declare const WithLeadingIcon: Story;
 export declare const Password: Story;
 export declare const PasswordWithoutToggle: Story;
 export declare const Email: Story;
+/**
+ * Search field next to a `MainButton` (size `md`), mirroring the API keys
+ * search row. Both controls are 40px tall, so their tops and bottoms align.
+ */
+export declare const SearchWithButton: Story;
 export declare const SideBySideFullWidth: Story;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextInput } from './TextInput';
+import { ButtonHierarchy, ButtonSize, ButtonType, MainButton, } from '../Buttons';
 const meta = {
     title: 'Design System/Components/Form/TextInput',
     component: TextInput,
@@ -177,6 +178,25 @@ export const Email = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+/**
+ * Search field next to a `MainButton` (size `md`), mirroring the API keys
+ * search row. Both controls are 40px tall, so their tops and bottoms align.
+ */
+export const SearchWithButton = {
+    args: {
+        value: '',
+        placeholder: 'Search your API Keys',
+        leadingIcon: 'MagnifyingGlass',
+        fullWidth: true,
+        onChange: () => { },
+    },
+    render: (args) => (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            width: '560px',
+        }, children: [_jsx("div", { style: { minWidth: 0, flex: 1 }, children: _jsx(TextInput, { ...args }) }), _jsx(MainButton, { text: "Create API Key", type: ButtonType.Button, hierarchy: ButtonHierarchy.PrimaryLemon, size: ButtonSize.md, onClick: () => { } })] })),
+};
 export const SideBySideFullWidth = {
     args: {
         label: 'First name',

package/package.json

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