glide-design-system/src/stories/phoneNumberInput/PhoneNumberInput.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 React from "react";
import PhoneNumberInput from "../../lib/components/phoneNumber/PhoneNumberInput";

export default {
  title: "PhoneNumberInput",
  component: PhoneNumberInput,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Phone Number Input component is used to capture and validate phone number inputs from users. It typically includes functionality for selecting a country code and entering the phone number in a standardized format. The component supports various customization options, including styling, labeling, and event handling for value changes.",
      },
    },
  },
  argTypes: {
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the phone number input component.",
    },
    id: {
      control: "",
      description: "The unique identifier for the input element.",
    },
    name: {
      control: "",
      description: "The name attribute for the input element.",
    },
    value: {
      control: "",
      description: "The current value of the phone number input.",
    },
    setCountryCode: {
      control: "",
      description: "Function to call when the country code is changed.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the phone number input component for custom styling.",
    },
    onChange: {
      control: "",
      description:
        "Function to call when the phone number value changes. It typically receives the new value as an argument.",
    },
    label: {
      control: "",
      description: "The label text to display above the phone number input.",
    },
    required: {
      control: "",
      description:
        " A boolean indicating whether the phone number input is required.",
    },
  },
};

const Template = (args) => {
  return <PhoneNumberInput setCountryCode={() => {}} {...args} />;
};

export const Default = Template.bind({});
Default.args = {};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Phone number component.",
    },
  },
};