@beydesign/storybook 0.2.5 → 0.2.6

package/dist/stories/Form/TextInput.js

@@ -4,7 +4,7 @@ import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
 import { getIconComponent } from '../../utils';
-export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, fullWidth = false, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, fullWidth = false, leadingIcon, }) => {
     const [focused, setFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const isPassword = type === 'password';
@@ -30,7 +30,13 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
                                 ? '1px solid var(--color-border-border-error)'
                                 : focused
                                     ? '1px solid var(--color-border-border-component-active)'
-                                    : 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    : 'transparent'}`, children: [leadingIcon &&
+                                    getIconComponent(leadingIcon, {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: iconColor,
+                                        'aria-hidden': 'true',
+                                    }), _jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                         border: 'none',
                                         outline: 'none',
                                         width: '100%',

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

@@ -157,11 +157,21 @@ declare const meta: {
                 };
             };
         };
+        leadingIcon: {
+            control: "text";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithLeadingIcon: Story;
 export declare const Password: Story;
 export declare const PasswordWithoutToggle: Story;
 export declare const Email: Story;

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

@@ -122,6 +122,13 @@ const meta = {
                 defaultValue: { summary: 'false' },
             },
         },
+        leadingIcon: {
+            control: 'text',
+            description: 'Icon rendered before the input value (e.g. a search glass). Accepts a Phosphor icon name.',
+            table: {
+                type: { summary: 'IconName' },
+            },
+        },
     },
 };
 export default meta;
@@ -133,6 +140,14 @@ export const Default = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const WithLeadingIcon = {
+    args: {
+        value: '',
+        placeholder: 'Search',
+        leadingIcon: 'MagnifyingGlass',
+        onChange: () => { },
+    },
+};
 export const Password = {
     args: {
         label: 'Password',

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

@@ -85,6 +85,8 @@ export type TextInputProps = {
      * min-width. Use for side-by-side fields in a flex row. Defaults to `false`.
      */
     fullWidth?: boolean;
+    /** Icon rendered before the input value (e.g. a search glass). */
+    leadingIcon?: IconName;
 };
 /**
  * Toggle position variants

package/package.json

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