glide-design-system/src/stories/card/Card.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 { Card } from "../../lib/components/card/Card";
import { Text } from "../../lib/components/text/Text";

export default {
  title: "Components/Card",
  component: Card,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The Card component is used to display content in a card-like layout.",
      },
    },
  },
  argTypes: {
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the card for custom styling.",
    },
    className: {
      control: "text",
      description: "Custom class names that can be applied to the card.",
    },
    children: {
      description: "React elements or nodes to be displayed within the card.",
      control: { type: "element" },
    },
  },
};

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

export const Default = Template.bind({});
Default.args = {
  children: (
    <>
      <Text>Card Title</Text>
      <Text>Card Content</Text>
    </>
  ),
};

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

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    backgroundColor: "#d7d7d7",
  },
  children: (
    <>
      <Text>Custom Title</Text>
      <Text>Custom Content</Text>
    </>
  ),
};

CustomStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use the Card component with custom styles.",
    },
  },
};