v3/packages/design-system/atoms/fader/Fader.stories.tsx

import { Button } from '@roleypoly/design-system/atoms/button';
import { action } from '@storybook/addon-actions';
import * as React from 'react';
import { FaderOpacity, FaderSlide } from './Fader';

export default {
    title: 'Atoms/Fader',
    component: FaderSlide,
    args: {
        isVisible: true,
    },
};

export const Opacity = (args) => {
    return (
        <FaderOpacity {...args}>
            <Button onClick={action('onClick')}>Click me!</Button>
        </FaderOpacity>
    );
};

export const Slide = (args) => {
    return (
        <FaderSlide {...args}>
            <Button onClick={action('onClick')}>Click me!</Button>
        </FaderSlide>
    );
};