glide-design-system/src/stories/accordion/Accordion.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 Accordion from "../../lib/components/accordion/Accrodian";

export default {
  title: "Components/Accordion",
  component: Accordion,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Accordion component is used to display collapsible content panels. It accepts a title and children as its props.",
      },
    },
  },
  argTypes: {
    title: {
      control: "text",
      description: "The title of the Accordion section",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the accordion component for custom styling.",
    },
    titleStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the title of the accordion component for custom styling.",
    },
    children: {
      control: false,
      description: "Content rendered inside the accordion section.",
    },
    id: {
      control: "",
      description: "The unique identifier for the Accordian.",
    },
    name: {
      control: "",
      description: "The name attribute for the Accordian.",
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  title: "Section1",
  children: (
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris.
    </p>
  ),
};
Default.parameters = {
  docs: {
    description: {
      story:
        "This is the default configuration of the Accordion component, displaying a simple section with text content.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  title: "Custom Style",
  children: (
    <p>This is a custom section content for the Accordion component.</p>
  ),
  style: {
    color: "blue",
  },
};
CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Accordion component with a custom title, custom style and content.",
    },
  },
};

export const CustomTitleStyle = Template.bind({});
CustomTitleStyle.args = {
  title: "Custom Title Style",
  children: (
    <p>This is a custom section content for the Accordion component.</p>
  ),
  titleStyle: {
    backgroundColor: "#d7d7d7",
  },
};
CustomTitleStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Accordion component with a custom title, custom title style and content.",
    },
  },
};