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

export default {
  title: "Components/Tab",
  component: Tab,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    controls: { expanded: true },
    docs: {
      description: {
        component:
          "The Tab component displays a set of tabs with only one active at a time. It supports props like indicatorStyle, activeIndex, children, onTabChange, iconPosition, disabled, className, and showIndicator.",
      },
    },
  },
  argTypes: {
    indicatorStyle: {
      control: { type: "select", options: ["simple", "bottomLine"] },
      description: "The style of the tab indicator.",
    },
    activeIndex: {
      control: "number",
      description:
        "The index of the active tab when the component is rendered.",
    },
    children: {
      control: false,
      description:
        "The content of the Tab component, which should be one or more TabItem components.",
    },
    onTabChange: {
      action: "changed",
      description:
        "Function called when the active tab is changed. You can get index like this (eg const onTabChamge=(index)=>setIndex(index)))",
    },

    disabled: {
      control: "boolean",
      description: "Disables all tabs if set to true.",
    },

    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the Tab component for custom styling.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the Tab component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the Tab component for custom styling.",
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  indicatorStyle: "simple",
  activeIndex: 0,
  children: [
    <div key={0} label={"Tab1"}>
      {" "}
      Tab1
    </div>,
    <div key={1} label={"Tab2"}>
      Tab2
    </div>,
    <div key={2} label={"Tab3"}>
      Tab3
    </div>,
  ],
  onTabChange: (index) => console.log("Tab changed to index:", index),
};

export const BottomLineIndicator = Template.bind({});
BottomLineIndicator.args = {
  ...Default.args,
  indicatorStyle: "bottomLine",
};
BottomLineIndicator.parameters = {
  docs: {
    description: {
      story:
        "This story demonstrates the Tab component with a bottom line indicator style.",
    },
  },
};

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

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  ...Default.args,
  style: { backgroundColor: "#f0f0f0", padding: "10px" },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Tab component with custom styles.",
    },
  },
};