glide-design-system/src/stories/multiSelect/MultiSelect.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 MultiSelect from "../../lib/components/multi-select/MultiSelect";

export default {
  title: "Components/MultiSelect",
  component: MultiSelect,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The MultiSelect component allows users to select multiple options from a dropdown list. It is useful in scenarios where multiple selections are required, such as choosing multiple tags, categories, or items. The component supports various customization options such as options list, selected values, placeholder text, and event handling for selection changes.",
      },
    },
  },
  argTypes: {
    onChange: {
      control: "",
      description: "Function to be called when value changes.",
    },
    value: {
      control: "",
      description: "Value of the multi-select.",
    },
    options: {
      control: "",
      description:
        "An array of options to be displayed in the dropdown. Each option can have properties like label and value.",
    },
    placeholder: {
      control: "",
      description: "Placeholder for the multi-select.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the multi-select component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the menu item component for custom styling.",
    },
    required: {
      control: "",
      description: "If true, the multi-select is marked as required.",
    },
    label: {
      control: "text",
      description: "Label of the multi-select field.",
    },
    name: {
      control: "",
      description: "The name attribute for the multi-select field.",
    },
  },
};

const Template = (args) => <MultiSelect {...args} />;

export const Default = Template.bind({});
Default.args = {
  options: [
    { value: "checkBox1", label: "checkBox1" },
    { value: "checkBox2", label: "CheckBox2" },
    { value: "checkBox3", label: "CheckBox3" },
    { value: "checkBox4", label: "CheckBox4" },
    { value: "checkBox5", label: "CheckBox5" },
    { value: "checkBox6", label: "CheckBox6" },
    { value: "checkBox7", label: "CheckBox7" },
  ],
  label: "Choose from below...",
  placeholder: "Choose from below...",
};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Multi-Select component.",
    },
  },
};

export const Required = Template.bind({});
Required.args = {
  options: [
    { value: "checkBox1", label: "checkBox1" },
    { value: "checkBox2", label: "CheckBox2" },
    { value: "checkBox3", label: "CheckBox3" },
    { value: "checkBox4", label: "CheckBox4" },
    { value: "checkBox5", label: "CheckBox5" },
    { value: "checkBox6", label: "CheckBox6" },
    { value: "checkBox7", label: "CheckBox7" },
  ],
  label: "Choose from below...",
  placeholder: "Choose from below...",
  required: true,
};

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

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  options: [
    { value: "checkBox1", label: "checkBox1" },
    { value: "checkBox2", label: "CheckBox2" },
    { value: "checkBox3", label: "CheckBox3" },
    { value: "checkBox4", label: "CheckBox4" },
    { value: "checkBox5", label: "CheckBox5" },
    { value: "checkBox6", label: "CheckBox6" },
    { value: "checkBox7", label: "CheckBox7" },
  ],
  label: "Choose from below...",
  placeholder: "Choose from below...",
  style: {
    backgroundColor: "#d7d7d7",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Multi-Select with custom style.",
    },
  },
};