import { Meta } from "@storybook/react";
import { RippleProps } from "./RippleProps";
import Ripple from "./Ripple";
import Button from "../Buttons/Button/Button";

export default {
  title: "Design System/Ripple",
  component: Ripple,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The KendoReact Ripple provides the Material ink ripple effect, its effect is applied to all components that are located inside the Ripple component, and is also fully compatible with all available KendoReact themes. \n\n```javascript\nimport { Ripple } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    id: {
      control: { type: "text" },
      description: "Prop description",
    },
    disabled: {
      control: { type: "boolean" },
      description:
        "Provides an option to disable the ripple effect on the children of the component. Defaults to false.",
    },
  },
} as Meta;

export const Default = (args: RippleProps): JSX.Element => (
  <Ripple {...args}>
    <Button themeColor="primary" fillMode="solid">
      Default Button
    </Button>
  </Ripple>
);

Default.args = {
  dataTestId: "ripple-data-testid",
  disabled: false,
};