glide-design-system/src/stories/fullName/FullName.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 { FullName } from "../../lib";

export default {
  title: "Components/Full Name",
  component: FullName,
  tags: ["autodocs"],
  argTypes: {
    onChange: {
      action: "changed",
      description:
        "Function to handle changes in the full name input.eg (onChange=(name)=>{consoloe.log(name)})",
    },
    value: {
      control: "text",
      description: "Value of the full name input field.",
    },
    label: {
      control: "text",
      description: "Label of the full name input field.",
    },
    required: {
      control: "boolean",
      description: "Specifies if the fields are required.",
      defaultValue: false,
    },
    firstNameLabel: {
      control: "text",
      description: "Label for the first name of the component.",
    },
    lastNameLabel: {
      control: "text",
      description: "Label for the last name of the component.",
    },
    firstNamePlaceholder: {
      control: "text",
      description: "PlaceHolder for the first name of the component.",
    },
    lastNamePlaceholder: {
      control: "text",
      description: "PlaceHolder for the last name of the component.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Fullname component for custom styling.",
    },

    conatinerStyle: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Fullname component for custom styling.",
    },
    disabled: {
      control: "boolean",
      description: "Disables the fullname input field.",
    },
    width: {
      control: "",
      description: "Custom width of the input field.",
    },
    height: {
      control: "",
      description: "Custom height of the input field.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The Full name component is used to display and manage name input fields. It accepts various props for customization, including onChange, required, label, value, place holders, and disabled.",
      },
    },
  },
};

const Template = ({
  onChange,
  required,
  label,
  firstNameLabel,
  lastNameLabel,
  firstNamePlaceholder,
  lastNamePlaceholder,
  value,
  disabled,
  style,
  conatinerStyle,
}) => {
  return (
    <FullName
      onChange={onChange}
      required={required}
      label={label}
      firstNameLabel={firstNameLabel}
      lastNameLabel={lastNameLabel}
      firstNamePlaceholder={firstNamePlaceholder}
      lastNamePlaceholder={lastNamePlaceholder}
      value={value}
      disabled={disabled}
      style={style}
      conatinerStyle={conatinerStyle}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  onChange: function (event) {
    return event;
  },
  required: false,
  label: "Full Name",
  value: "John Doe",
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Fullname component with default configuration.",
    },
  },
};

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

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

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

Style.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Fullname component with custom width.",
    },
  },
};

export const ContainerStyle = Template.bind({});
ContainerStyle.args = {
  conatinerStyle: { display: "flex", flexDirection: "column" },
  label: "Full Name",
};

ContainerStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Fullname component with custom container style.",
    },
  },
};

export const Labels = Template.bind({});
Labels.args = {
  firstNameLabel: "First Name",
  lastNameLabel: "Last Name",
};

Labels.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Fullname component with custom labels.",
    },
  },
};

export const Placeholders = Template.bind({});
Placeholders.args = {
  firstNamePlaceholder: "First Name",
  lastNamePlaceholder: "Last Name",
};

Placeholders.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Fullname component with custom placeholders.",
    },
  },
};

export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  label: "Full Name",
  value: "John Doe",
};
Disabled.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Fullname component with disabled property.",
    },
  },
};

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