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

export default {
  title: "Components/Select",
  component: Select,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    controls: { expanded: true },
    docs: {
      description: {
        component:
          "The Select component provides a dropdown interface for selecting options. It supports props like children, style, value, onChange, disabled, size, label, and required.",
      },
    },
  },
  argTypes: {
    children: {
      control: "select",
      description: "The options to be displayed in the select.",
    },
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the select component for custom styling.",
    },
    value: {
      control: "text",
      description: "The currently selected value in the select.",
    },
    onChange: {
      action: "changed",
      description:
        "Callback function triggered when the selection changes.eg (onChange={(e) => console.log(e)})",
    },
    disabled: {
      control: "boolean",
      description: "Determines whether the select is disabled or not.",
    },
    size: {
      control: { type: "select", options: ["small", "medium", "large"] },
      description: 'Size variant of the select ("small", "medium", "large").',
    },
    label: {
      control: "text",
      description: "Label to be displayed for the select component.",
    },
    required: {
      control: "boolean",
      description: "Indicates whether the select field is required or not.",
    },
    id: {
      control: "",
      description: "The unique identifier for the select field.",
    },
    name: {
      control: "",
      description: "The name attribute for the select field.",
    },
    className: {
      control: false,
      description:
        "Additional CSS class names to apply to the select component for custom styling.",
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  children: [
    <option key="1" value="option1">
      Option 1
    </option>,
    <option key="2" value="option2">
      Option 2
    </option>,
    <option key="3" value="option3">
      Option 3
    </option>,
  ],
  value: "option2",
  onChange: (selectedValue) => console.log("Selected value:", selectedValue),
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Select component with default configuration.",
    },
  },
};

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

export const Size = Template.bind({});
Size.args = {
  ...Default.args,
  size: "large",
};
Size.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Select with custom size.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  ...Default.args,
  style: {
    border: "1px solid #ccc",
    borderRadius: "4px",
    padding: "8px",
    width: "200px",
  },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Select with custom style.",
    },
  },
};

export const RequiredField = Template.bind({});
RequiredField.args = {
  ...Default.args,
  required: true,
  label: "Select an option",
};
RequiredField.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Select with required property.",
    },
  },
};