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

export default {
  title: "Components/Pagination",
  component: Pagination,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Pagination component is used to navigate through a large set of items or data by dividing it into pages. It provides controls for moving between pages, allowing users to easily access different segments of content. The component supports various customization options, including the number of pages, current page, styling, and event handling.",
      },
    },
  },
  argTypes: {
    onChange: {
      control: "",
      description:
        "Function to call when the page is changed. It typically receives the new page number as an argument.",
    },
    page: {
      control: "",
      description: "The current active page number.",
    },
    count: {
      control: "",
      description: " The total number of pages available.",
    },
    color: {
      control: "",
      description: "Color of the active page.",
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the pagination component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class names to apply to the pagination component for custom styling.",
    },
    containerClass: {
      control: "",
      description:
        "Additional CSS class names to apply to the container of the pagination component for custom styling.",
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  count: 10,
  page: 2,
};

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

export const CustomStyleAndColor = Template.bind({});
CustomStyleAndColor.args = {
  count: 10,
  page: 2,
  style: {
    border: "1px solid #3f51b5",
  },
  color: "#9fa8da",
};

CustomStyleAndColor.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Icon Button with custom style and color.",
    },
  },
};