@kadconsulting/dry
Version:
KAD Reusable Component Library
53 lines (51 loc) • 3.47 kB
TypeScript
/// <reference types="react" />
import './TextInputStories.scss';
import type { StoryObj } from '@storybook/react';
import type { TextInputProps } from './TextInputTypes';
declare const _default: {
title: string;
tab: string;
tags: string[];
component: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLDivElement>>;
argTypes: {};
};
export default _default;
type Story = StoryObj<TextInputProps>;
/** The default is a bare-bones input with no adornments or icons */
export declare const Default: Story;
/**
* Untitled UI's inputs pair a help icon right adornment with the bottom helper text when the input is valid / not dirty,
* and an error icon with error text when the input is invalid. While we could codify this relationship within a
* component assembly, at the time of writing, we don't have any examples of this Untitled UI usage, so here is how the
* constituent components can be composed to produce that experience.
*
* Type in the input to make it "invalid"; notice the icon change and the color change of the constituent components:
**/
export declare const UntitledHintOrErrorUX: Story;
/** A simple string can be passed for the Label prop; if so, the text element will be an Untitled TextSm/Medium (see [the Figma file](https://www.figma.com/file/Xt05q1xny4SbE2HHOEFe2j/KAD-MASTER-Untitled-UI?node-id=3531%3A403182&mode=dev)) */
export declare const SimpleTextLabel: Story;
/** You can however pass whatever component hierarchy you want if you need to support links, icons, or format parts of text within a label. */
export declare const ComplexLabels: Story;
export declare const ComplexLabelsWithIcon: Story;
/** There isn't really a use case for this within Untitled, but you'll see it pretty pervasively on the web. The whole label (title and description) is clickable to focus the input. */
export declare const ComplexLabelsTextHierarchy: Story;
/** Also not exemplified in Untitled, but another common use case for complex labels is to be able to support red required asterisks. */
export declare const ComplexLabelsRequiredIndicator: Story;
/** A simple string can be passed for the HintText prop; if so, the text element will be an Untitled TextSm/Medium (see [the Figma file](https://www.figma.com/file/Xt05q1xny4SbE2HHOEFe2j/KAD-MASTER-Untitled-UI?node-id=3531%3A403182&mode=dev)) */
export declare const SimpleHintText: Story;
/** Similar to labels, you can pass whatever component hierarchy you want if you need to support links, icons, or format parts of text within the helper text. */
export declare const ComplexHintText: Story;
export declare const InputAdornmentLeftSimple: Story;
/** A more complex example of how multiple adornment children can be composed. A select is used as the first child to select the user's funding source, and the second child is used to indicate the user need not worry about including the unit of currency. */
export declare const InputAdornmentLeftComplex: Story;
export declare const InputAdornmentRight: Story;
/**
* The `disabled` prop is not propagated to interactive elements in adornments automatically,
* in case some UIs need their input to be disabled while maintaining its inner adornment's
* interactivity. How exactly an adornment's interactivity should be disabled should
* be left up to the consumer defining the adornment.
*/
export declare const Disabled: Story;
/**
*/
export declare const ColorUpdates: Story;