glide-design-system/src/stories/address/Address.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, { useState } from "react";
import { Address } from "../../lib";

export default {
  title: "Components/Address",
  component: Address,
  tags: ["autodocs"],
  argTypes: {
    onChange: {
      action: "changed",
      description:
        "Function to handle changes in the address input.eg (onChange=(fullAddress)=>{consoloe.log(fullAddress)})",
    },
    required: {
      control: "boolean",
      description: "Specifies if the address fields are required.",
      defaultValue: false,
    },
    containerStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the container of the address component for custom styling.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the address component for custom styling.",
    },
    label: {
      control: "text",
      description: "Label for the address component.",
    },
    labels: {
      control: "object",
      description: "Custom labels for address fields.",
    },
    width: {
      control: "",
      description: "Custom width of the input field.",
    },
    height: {
      control: "",
      description: "Custom height of the input field.",
    },
    address: {
      control: "object",
      description: "Initial address data to populate the fields.",
    },
    placeHolders: {
      control: "object",
      description: "Placeholder texts for address fields.",
    },
    disabled: {
      control: "boolean",
      description: "Disables the address input fields.",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The Address component is used to display and manage address input fields. It accepts various props for customization, including onChange, required, label, labels, address, placeHolders, and disabled.",
      },
    },
  },
};

const Template = ({
  onChange,
  required,
  label,
  labels,
  address,
  placeHolders,
  disabled,
}) => {
  return (
    <Address
      onChange={onChange}
      required={required}
      label={label}
      labels={labels}
      address={address}
      placeHolders={placeHolders}
      disabled={disabled}
    />
  );
};

export const Default = Template.bind({});
Default.args = {
  onChange: function (event) {
    return event;
  },
  required: false,
  label: "Address",

  address: {
    addressLine1: "Line11",
    addressLine2: "Line82",
    city: "city77",
    postalCode: "641032",
    state: "Tamil Nadu",
  },
};
Default.parameters = {
  docs: {
    description: {
      story: "This is the default configuration for the address component.",
    },
  },
};

export const required = Template.bind({});
required.args = {
  required: true,
};
required.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Address component  with required fields.",
    },
  },
};

export const Placeholders = Template.bind({});
Placeholders.args = {
  required: true,
  placeHolders: {
    addressLine1Placeholder: "Enter Address Line 1",
    addressLine2Placeholder: "Enter Address Line 2",
    cityPlaceholder: "Enter City",
    statePlaceholder: "Enter State",
    postalCodePlaceholder: "Enter Postal Code",
  },
};
Placeholders.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Address component with placeholders for address fields.",
    },
  },
};

export const CustomLabels = Template.bind({});
CustomLabels.args = {
  labels: {
    addressLine1: "Street",
    addressLine2: "Street2",
    city: "City",
    postalCode: "Postal Area",
    state: "Province",
  },
};
CustomLabels.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Address component  with custom labels for address fields.",
    },
  },
};

export const Label = Template.bind({});
Label.args = {
  label: "Label",
};
Label.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Address component with a custom label.",
    },
  },
};
export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  address: {
    addressLine1: "Line11",
    addressLine2: "Line82",
    city: "city77",
    postalCode: "641032",
    state: "Tamil Nadu",
  },
};
Disabled.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Address component with disabled state and default configuration.",
    },
  },
};