import React from 'react';
import { Button } from './react';
export default {
    title: 'Buttons/Button',
    render(args) {
        return React.createElement(Button, { ...args }, "Button Text");
    },
    component: Button,
};
export const Primary = {
    args: {
        variant: 'primary',
        type: 'button',
    },
};
export const Secondary = {
    args: {
        variant: 'secondary',
        type: 'button',
    },
};
export const Negative = {
    args: {
        variant: 'negative',
        type: 'button',
    },
};
export const Utility = {
    args: {
        variant: 'utility',
        type: 'button',
    },
};
export const Link = {
    args: {
        variant: 'link',
        type: 'button',
        href: 'https://developer.mozilla.org/en-US/docs/Web/API/Web_components',
        target: '_new',
    },
};
export const Pill = {
    args: {
        variant: 'pill',
        type: 'button',
    },
    render(args) {
        return React.createElement(Button, { ...args }, "\uD83D\uDC99");
    },
};
export const Small = {
    args: {
        variant: 'primary',
        small: true,
        type: 'button',
    },
};
export const Quiet = {
    args: {
        variant: 'secondary',
        quiet: true,
        type: 'button',
    },
};
export const Loading = {
    args: {
        variant: 'primary',
        loading: true,
        type: 'button',
    },
};
export const FullWidth = {
    args: {
        variant: 'primary',
        fullWidth: true,
        type: 'button',
    },
    render(args) {
        return (React.createElement("div", { className: "w-full flex flex-col gap-8" },
            React.createElement(Button, { ...args }, "Full width")));
    },
};
export const AsLink = {
    args: {
        variant: 'primary',
        href: 'https://example.com',
        target: '_blank',
        type: 'button',
    },
    render(args) {
        return React.createElement(Button, { ...args }, "Visit Example");
    },
};
export const FormControl = {
    args: {},
    render() {
        return (React.createElement("form", { name: "form-control" },
            React.createElement("input", { type: "text", defaultValue: "I am an input field", name: "demoValue", style: { border: '1px solid lime' } }),
            React.createElement(Button, { type: "reset", name: "resetButton", value: "fooyoo" }, "Reset"),
            React.createElement(Button, { type: "submit", name: "submuitButtton", value: "fooyoo" }, "Send thing")));
    },
};
