@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/stories/Text.stories.js

@@ -0,0 +1,262 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Body () {
+        return Body;
+    },
+    get Bold () {
+        return Bold;
+    },
+    get Caption () {
+        return Caption;
+    },
+    get Centered () {
+        return Centered;
+    },
+    get Critical () {
+        return Critical;
+    },
+    get Default () {
+        return Default;
+    },
+    get Display () {
+        return Display;
+    },
+    get Heading () {
+        return Heading;
+    },
+    get Subdued () {
+        return Subdued;
+    },
+    get Success () {
+        return Success;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _transformers = require("../utilities/transformers.js");
+var _ = require("../");
+var _default = {
+    title: 'Litho/Text',
+    component: _.Text,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: "A Text component that renders customizable text with different variants, colors, and font weights. The text can be configured with different sizes, weights, and alignment options."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: 'text',
+            description: 'The text content to display'
+        },
+        variant: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'heading4xl',
+                'heading2xl',
+                'headingXl',
+                'headingLg',
+                'headingMd',
+                'headingSm',
+                'headingXs',
+                'bodyXl',
+                'bodyLg',
+                'bodyMd',
+                'bodySm',
+                'bodyXs'
+            ],
+            description: 'Text size and style variant'
+        },
+        color: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'default',
+                'subdued',
+                'normal',
+                'critical',
+                'success',
+                'warning',
+                'alternate',
+                'link',
+                'low',
+                'lower',
+                'lowest',
+                'disabled',
+                'success-fg',
+                'critical-fg',
+                'warning-fg',
+                'attention-fg',
+                'info-fg',
+                'highlight-fg',
+                'insight-fg',
+                'neutral-fg',
+                'success-alt-fg',
+                'critical-alt-fg',
+                'warning-alt-fg',
+                'attention-alt-fg',
+                'info-alt-fg',
+                'highlight-alt-fg',
+                'insight-alt-fg',
+                'neutral-alt-fg',
+                'btn-secondary-fg',
+                'tab-active-fg',
+                'text-inverse'
+            ],
+            description: 'Text color variant'
+        },
+        fontWeight: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'normal',
+                'regular',
+                'medium',
+                'semibold',
+                'bold'
+            ],
+            description: 'Font weight'
+        },
+        alignment: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'left',
+                'center',
+                'right',
+                'start',
+                'end'
+            ],
+            description: 'Text alignment'
+        },
+        as: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'p',
+                'span',
+                'div',
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6'
+            ],
+            description: 'HTML element to render as'
+        },
+        truncate: {
+            control: 'boolean',
+            description: 'Whether to truncate text with ellipsis'
+        },
+        visuallyHidden: {
+            control: 'boolean',
+            description: 'Visually hides text for accessibility'
+        },
+        clampLines: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                1,
+                2,
+                3,
+                4,
+                5,
+                false
+            ],
+            description: 'Number of lines to clamp (false to disable)'
+        },
+        strike: {
+            control: 'boolean',
+            description: 'Whether to strike through the text'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class names'
+        }
+    }
+};
+var Default = {
+    args: {
+        children: 'Default text'
+    }
+};
+var Heading = {
+    args: {
+        variant: 'headingLg',
+        children: 'Large Heading'
+    }
+};
+var Display = {
+    args: {
+        variant: 'displayMedium',
+        children: 'Display Text'
+    }
+};
+var Body = {
+    args: {
+        variant: 'bodyMd',
+        children: 'Body text for regular content'
+    }
+};
+var Caption = {
+    args: {
+        variant: 'captionMd',
+        children: 'Caption text'
+    }
+};
+var Subdued = {
+    args: {
+        color: 'subdued',
+        children: 'Subdued text color'
+    }
+};
+var Critical = {
+    args: {
+        color: 'critical',
+        children: 'Critical text color'
+    }
+};
+var Success = {
+    args: {
+        color: 'success',
+        children: 'Success text color'
+    }
+};
+var Bold = {
+    args: {
+        fontWeight: 'bold',
+        children: 'Bold text'
+    }
+};
+var Centered = {
+    args: {
+        alignment: 'center',
+        children: 'Centered text'
+    }
+};

package/dist/cjs/stories/TextField.stories.js

@@ -0,0 +1,377 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Default () {
+        return Default;
+    },
+    get Disabled () {
+        return Disabled;
+    },
+    get Multiline () {
+        return Multiline;
+    },
+    get Number () {
+        return Number;
+    },
+    get ReadOnly () {
+        return ReadOnly;
+    },
+    get Required () {
+        return Required;
+    },
+    get Search () {
+        return Search;
+    },
+    get WithError () {
+        return WithError;
+    },
+    get WithHelpText () {
+        return WithHelpText;
+    },
+    get WithValue () {
+        return WithValue;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _transformers = require("../utilities/transformers.js");
+var _ = require("../");
+var _default = {
+    title: 'Litho/TextField',
+    component: _.TextField,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A TextField component that renders a customizable text input field with a label, placeholder, and optional help text. The field can be configured with different types, values, and states."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Field label'
+        },
+        labelVariant: {
+            control: 'select',
+            options: [
+                'bodyXs',
+                'bodySm',
+                'bodyMd',
+                'bodyLg',
+                'headingXs',
+                'headingSm',
+                'headingMd',
+                'headingLg'
+            ],
+            description: 'Visual variant for the label text'
+        },
+        labelAction: {
+            control: 'object',
+            description: 'Action button to display next to the label'
+        },
+        labelHidden: {
+            control: 'boolean',
+            description: 'Whether to visually hide the label'
+        },
+        type: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'text',
+                'email',
+                'password',
+                'search',
+                'tel',
+                'url',
+                'number'
+            ],
+            description: 'Input type'
+        },
+        value: {
+            control: 'text',
+            description: 'Field value'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text'
+        },
+        prefix: {
+            control: 'text',
+            description: 'Text content to display before the input'
+        },
+        suffix: {
+            control: 'text',
+            description: 'Text content to display after the input'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Help text below the field'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disabled state'
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Read-only state'
+        },
+        requiredIndicator: {
+            control: 'boolean',
+            description: 'Whether to show a required field indicator'
+        },
+        clearButton: {
+            control: 'boolean',
+            description: 'Whether to show a clear button'
+        },
+        autoFocus: {
+            control: 'boolean',
+            description: 'Whether to focus the input on mount'
+        },
+        focused: {
+            control: 'boolean',
+            description: 'Whether the input is focused'
+        },
+        multiline: {
+            control: 'number',
+            description: 'Number of lines for multiline input (1 for single line)'
+        },
+        autoGrow: {
+            control: 'boolean',
+            description: 'Whether textarea should automatically grow with content'
+        },
+        maxHeight: {
+            control: 'number',
+            description: 'Maximum height in pixels before scrolling starts'
+        },
+        subdued: {
+            control: 'boolean',
+            description: 'Whether to use subdued styling'
+        },
+        transparent: {
+            control: 'boolean',
+            description: 'Whether to use transparent background'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'left',
+                'center',
+                'right'
+            ],
+            description: 'Text alignment within the input'
+        },
+        selectTextOnFocus: {
+            control: 'boolean',
+            description: 'Whether to select all text when focused'
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for the input'
+        },
+        id: {
+            control: 'text',
+            description: 'ID for the input element'
+        },
+        role: {
+            control: 'text',
+            description: 'ARIA role'
+        },
+        step: {
+            control: 'number',
+            description: 'Step value for number inputs'
+        },
+        largeStep: {
+            control: 'number',
+            description: 'Large step value when using shift + arrows'
+        },
+        autoComplete: {
+            control: 'text',
+            description: 'Autocomplete attribute'
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value for number inputs'
+        },
+        maxLength: {
+            control: 'number',
+            description: 'Maximum length for text input'
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value for number inputs'
+        },
+        minLength: {
+            control: 'number',
+            description: 'Minimum length for text input'
+        },
+        pattern: {
+            control: 'text',
+            description: 'Input validation pattern'
+        },
+        spellCheck: {
+            control: 'boolean',
+            description: 'Whether to enable spell checking'
+        },
+        showCharacterCount: {
+            control: 'boolean',
+            description: 'Whether to show character count'
+        },
+        showNumberSteppers: {
+            control: 'boolean',
+            description: 'Whether to show number steppers for number inputs'
+        },
+        connectedRight: {
+            control: 'object',
+            description: 'React element to connect to the right of the input'
+        },
+        connectedLeft: {
+            control: 'object',
+            description: 'React element to connect to the left of the input'
+        },
+        icon: {
+            control: 'object',
+            description: 'Icon component to display within the input'
+        },
+        tooltip: {
+            control: 'object',
+            description: 'Tooltip content for the label'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        },
+        ariaOwns: {
+            control: 'text',
+            description: 'ARIA owns attribute'
+        },
+        ariaControls: {
+            control: 'text',
+            description: 'ARIA controls attribute'
+        },
+        ariaExpanded: {
+            control: 'boolean',
+            description: 'ARIA expanded attribute'
+        },
+        ariaActiveDescendant: {
+            control: 'text',
+            description: 'ARIA active descendant attribute'
+        },
+        ariaAutocomplete: {
+            control: 'text',
+            description: 'ARIA autocomplete attribute'
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Handler for value changes'
+        },
+        onFocus: {
+            action: 'focused',
+            description: 'Handler for input focus'
+        },
+        onBlur: {
+            action: 'blurred',
+            description: 'Handler for input blur'
+        },
+        onKeyDown: {
+            action: 'keyDown',
+            description: 'Handler for key down'
+        },
+        onClearButtonClick: {
+            action: 'clearClicked',
+            description: 'Handler for clear button click'
+        }
+    }
+};
+var Default = {
+    args: {
+        label: 'Name',
+        placeholder: 'Enter your name'
+    }
+};
+var WithValue = {
+    args: {
+        label: 'Email',
+        type: 'email',
+        value: 'user@example.com',
+        placeholder: 'Enter your email'
+    }
+};
+var WithHelpText = {
+    args: {
+        label: 'Username',
+        placeholder: 'Enter username',
+        helpText: 'Must be at least 3 characters long'
+    }
+};
+var WithError = {
+    args: {
+        label: 'Password',
+        type: 'password',
+        placeholder: 'Enter password',
+        error: 'Password must be at least 8 characters'
+    }
+};
+var Required = {
+    args: {
+        label: 'Full Name',
+        placeholder: 'Enter your full name',
+        required: true
+    }
+};
+var Disabled = {
+    args: {
+        label: 'Disabled Field',
+        value: 'This field is disabled',
+        disabled: true
+    }
+};
+var ReadOnly = {
+    args: {
+        label: 'Read Only Field',
+        value: 'This field is read-only',
+        readOnly: true
+    }
+};
+var Multiline = {
+    args: {
+        label: 'Description',
+        placeholder: 'Enter a description...',
+        multiline: true,
+        helpText: 'Provide a detailed description'
+    }
+};
+var Number = {
+    args: {
+        label: 'Age',
+        type: 'number',
+        placeholder: 'Enter your age'
+    }
+};
+var Search = {
+    args: {
+        label: 'Search',
+        type: 'search',
+        placeholder: 'Search products...'
+    }
+};