import { Button, ThemeOverride, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
registerIcon(plusIcon);
export default {
    title: 'Core/Button',
    component: Button,
    excludeStories: ['ConfigurableButton'],
    parameters: {
        layout: 'centered'
    }
};
export const ButtonVariants = (args) => {
    return (<Button variant={args.variant} compact={args.compact}>
      Click me
    </Button>);
};
ButtonVariants.args = {
    variant: 'primary',
    compact: false
};
ButtonVariants.argTypes = {
    variant: {
        options: ['primary', 'secondary', 'simple', 'link', 'text'],
        control: { type: 'select' }
    },
    compact: { control: { type: 'boolean' } }
};
export const DisabledButtons = () => {
    return (<>
      <Button variant='primary' disabled>
        Primary disabled
      </Button>
      <Button variant='secondary' disabled>
        Secondary disabled
      </Button>
      <Button variant='simple' disabled>
        Simple disabled
      </Button>
      <Button variant='link' disabled>
        Link disabled
      </Button>
      <Button variant='text' disabled>
        Text disabled
      </Button>
    </>);
};
export const IconButtons = (args) => {
    return (<Flex container={{ alignItems: 'center' }}>
      <Button variant='primary' label='Icon button primary' icon compact={args.compact}>
        <Icon name='plus'/>
      </Button>
      <Button variant='secondary' label='Icon button secondary' icon compact={args.compact}>
        <Icon name='plus'/>
      </Button>
      <Button variant='simple' label='Icon button simple' icon compact={args.compact}>
        <Icon name='plus'/>
      </Button>
      <Button variant='link' label='Icon button link' icon compact={args.compact}>
        <Icon name='plus'/>
      </Button>
      <Button variant='text' label='Icon button text' icon compact={args.compact}>
        <Icon name='plus'/>
      </Button>
    </Flex>);
};
IconButtons.args = {
    compact: false
};
IconButtons.argTypes = {
    compact: { control: { type: 'boolean' } }
};
export const ButtonAsLink = () => {
    return (<Button variant='primary' href='https://www.pega.com' target='_blank'>
      Go to pega.com
    </Button>);
};
export const ConfigurableButton = (args) => {
    return (<ThemeOverride theme={{
            components: {
                button: {
                    'border-width': args.borderWidth,
                    'border-radius': args.borderRadius,
                    color: args.color,
                    'secondary-color': args.secondaryColor,
                    padding: args.padding
                }
            }
        }}>
      <Button>Configurable Button</Button>
    </ThemeOverride>);
};
ConfigurableButton.args = {
    borderWidth: '0.0625rem',
    borderRadius: 9999,
    color: '#076bc9',
    secondaryColor: '#ffffff',
    padding: '0rem 1rem'
};
ConfigurableButton.argTypes = {
    borderWidth: { control: { type: 'text' } },
    borderRadius: { control: { type: 'number' } },
    color: { control: { type: 'color' } },
    secondaryColor: { control: { type: 'color' } },
    padding: { control: { type: 'text' } }
};
//# sourceMappingURL=Button.stories.jsx.map