glide-design-system/src/stories/textField/TextField.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import { TextField } from "../../lib/components/textField/TextField";

export default {
  title: "Components/TextField",
  component: TextField,
  tags: ["autodocs"],
  argTypes: {
    size: {
      options: ["small", "medium", "large"],
      control: "select",
      description: "Determines the size of the text field.",
    },
    disabled: {
      control: "boolean",
      description:
        "Disables the text field component, making it uninteractive.",
    },
    icon: {
      control: "",
      description: "You can add a google icons here.",
    },
    iconPosition: {
      control: "select",
      options: ["left", "right"],
      description: "You can set the position of the icon.",
    },
    onChange: {
      action: "changed",
      description:
        "Function to handle changes in the text field input.eg (onChange={(e) => setValue(e.target.value)})",
    },
    value: {
      control: "text",
      description: "Value of the text field input field.",
    },
    label: {
      control: "text",
      description: "Label of the text field input field.",
    },
    required: {
      control: "boolean",
      description: "Specifies if the fields are required.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the text field component for custom styling.",
    },
    textFieldStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the text field component for custom styling.",
    },
    placeholder: {
      control: "text",
      description: "Place holder of the text field input field.",
    },
    width: {
      control: "text",
      description: "Custom width of the text field input field.",
    },
    id: {
      control: "",
      description: "The unique identifier for the text field.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the text field component for custom styling.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Speed Dial Button component for custom styling.",
    },
    type: {
      control: false,
      description: "Type of the text field.",
    },
    name: {
      control: "",
      description: "The name attribute for the text field.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The Text field component is used to display and manage text input fields. It accepts various props for customization, including onChange, required, label, value, Place Holders and disabled",
      },
    },
  },
};

const Template = ({
  onChange,
  required,
  label,
  value,
  disabled,
  placeholder,
  style,
  textFieldStyle,
  size,
  icon,
  iconPosition,
  width,
}) => {
  return (
    <TextField
      onChange={onChange}
      required={required}
      label={label}
      value={value}
      disabled={disabled}
      placeholder={placeholder}
      style={style}
      textFieldStyle={textFieldStyle}
      size={size}
      icon={icon}
      iconPosition={iconPosition}
      width={width}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  onChange: function (event) {
    return event;
  },
  required: false,
  label: "Enter text",
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the text field component with default configuration.",
    },
  },
};

export const Required = Template.bind({});
Required.args = {
  required: true,
  label: "Enter text",
};

Required.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with required property.",
    },
  },
};

export const Style = Template.bind({});
Style.args = {
  style: { width: "250px" },
  label: "Enter text",
};

Style.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with custom style.",
    },
  },
};

export const TextFieldStyle = Template.bind({});
TextFieldStyle.args = {
  textFieldStyle: { color: "blue", fontSize: "18px" },
  label: "Enter text",
};

TextFieldStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use text field with custom text field style.",
    },
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  value: "text",
};
Disabled.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with disabled property.",
    },
  },
};

export const Label = Template.bind({});
Label.args = {
  label: "Label",
};
Label.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with custom label.",
    },
  },
};

export const Value = Template.bind({});
Value.args = {
  value: "Text",
};
Value.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with custom value.",
    },
  },
};

export const Size = Template.bind({});
Size.args = {
  label: "Text Field-Size",
  size: "small",
};
Size.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with custom size.",
    },
  },
};

export const Width = Template.bind({});
Width.args = {
  label: "Custom width",
  width: "220px",
};
Width.parameters = {
  docs: {
    description: {
      story: "This example shows how to use text field with custom width.",
    },
  },
};

export const Placeholder = Template.bind({});
Placeholder.args = {
  label: "Placeholder",
  placeholder: "Text Field",
};
Placeholder.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use text field with custom placeholder.",
    },
  },
};