tycho-storybook 0.2.0 → 0.2.2

package/dist/IconButton/IconButton.js

@@ -9,7 +9,14 @@ export default function IconButton({ name, className, disabled = false, active =
     const getClassNames = cx("ds-icon-button", className, size, mode, color, {
         active: !disabled && active,
     });
-    const renderButton = () => (_jsx("button", { type: "button", disabled: disabled, className: getClassNames, onClick: onClick, children: _jsx(Icon, { name: name, size: size, filled: filledIcon, className: spin ? "spin" : "" }) }));
+    const getIconSize = () => {
+        if (size === "large")
+            return "small";
+        if (size === "medium")
+            return "small";
+        return size;
+    };
+    const renderButton = () => (_jsx("button", { type: "button", disabled: disabled, className: getClassNames, onClick: onClick, children: _jsx(Icon, { name: name, size: getIconSize(), filled: filledIcon, className: spin ? "spin" : "" }) }));
     if (disabled)
         return renderButton();
     return (_jsx(Tooltip, { title: title, placement: "top", arrow: true, children: renderButton() }));

package/dist/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
 import { UseFormReturn } from 'react-hook-form';
 import './styles.scss';
-type DefaultEndAdornmentType = 'password' | 'info' | 'close';
+type DefaultEndAdornmentType = 'password' | 'close';
 type Props = {
     attr: string;
     label: string;
@@ -16,7 +16,6 @@ type Props = {
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode[];
     defaultEndAdornments?: DefaultEndAdornmentType[];
-    defaultValue?: any;
     onChange?: (attr: string, value: any) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
@@ -25,5 +24,5 @@ type Props = {
     infoIcon?: string;
     inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
 };
-export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments, defaultValue, showEndAdornment, onChange, onFocus, onKeyDown, onRemove, rows, infoIcon, inputRef, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments, showEndAdornment, onChange, onFocus, onKeyDown, onRemove, rows, infoIcon, inputRef, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/TextField/TextField.js

@@ -10,7 +10,7 @@ import Tooltip from '../Tooltip';
 import { textFieldTheme } from './TextFieldTheme';
 import { setCurrentInput } from './inputRefManager';
 import './styles.scss';
-export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments = ['close'], defaultValue, showEndAdornment = true, onChange, onFocus, onKeyDown, onRemove, rows = 4, infoIcon, inputRef, }) {
+export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments = ['close'], showEndAdornment = true, onChange, onFocus, onKeyDown, onRemove, rows = 4, infoIcon, inputRef, }) {
     const outerTheme = useTheme();
     const [showPassword, setShowPassword] = useState(false);
     const [active, setActive] = useState(false);
@@ -28,9 +28,9 @@ export default function TextField({ className, attr, label, createdForm, disable
                 adornments.push(_jsx(Icon, { name: showPassword ? 'visibility_off' : 'visibility', size: "small", onClick: () => setShowPassword(!showPassword), className: "pointer" }, "password"));
             }
             // Check for info adornment
-            if (defaultEndAdornments.includes('info') && infoIcon) {
+            if (infoIcon) {
                 const infoIconElement = (_jsx(Icon, { name: "info", size: "small", className: `icon-info pointer ${disabled ? 'd-none' : ''}` }));
-                adornments.push(_jsx(Tooltip, { title: infoIcon, mode: "simple", children: infoIconElement }, "info"));
+                adornments.push(_jsx(Tooltip, { title: infoIcon, mode: "simple", children: _jsx("span", { children: infoIconElement }) }, "info"));
             }
             // Check for close adornment - show when value is not undefined and value is not equal to defaultValue
             if (defaultEndAdornments.includes('close') &&

package/dist/TextField/TextField.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof TextField>;
 export declare const Default: Story;
 export declare const WithEndAdornment: Story;
+export declare const WithInfoIcon: Story;

package/dist/TextField/TextField.stories.js

@@ -61,3 +61,22 @@ export const WithEndAdornment = {
             ] }));
     },
 };
+export const WithInfoIcon = {
+    args: {
+        attr: 'email',
+        label: 'Email Address',
+        placeholder: 'Enter your email...',
+        infoIcon: 'Please enter a valid email address',
+    },
+    render: (args) => {
+        const createdForm = useForm({
+            defaultValues: {
+                [args.attr]: '',
+            },
+        });
+        const handleChange = (attr, value) => {
+            console.log(`Attribute: ${attr}, Value: ${String(value)}`);
+        };
+        return (_jsx(TextField, { ...args, createdForm: createdForm, onChange: handleChange }));
+    },
+};

package/dist/TextField/styles.scss

@@ -2,6 +2,10 @@
   width: 100%;
   position: relative;
 
+  span {
+    line-height: 1 !important;
+  }
+
   > .helper {
     @include helper-small-1;
     margin-top: 4px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-storybook",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {