import { Select, Option, ThemeOverride } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Select',
    component: Select,
    excludeStories: ['ConfigurableSelect']
};
export const SelectDemo = (args) => {
    return (<Select additionalInfo={args.showAdditionalInfo
            ? {
                content: 'Some additional info'
            }
            : undefined} id='select-demo' label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} actions={args.showAction
            ? [
                {
                    id: 'config',
                    text: 'Configure',
                    icon: 'gear'
                }
            ]
            : undefined}>
      <Option value=''>Choose an option…</Option>
      <Option value='1'>Option 1</Option>
      <Option value='2'>Option 2</Option>
      <Option value='3'>Option 3</Option>
    </Select>);
};
SelectDemo.args = {
    showAction: false,
    label: 'Select input',
    labelHidden: false,
    info: 'Choose a value',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
SelectDemo.argTypes = {
    showAction: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
export const ConfigurableSelect = (args) => {
    return (<ThemeOverride theme={{
            components: {
                select: {
                    height: args.height,
                    padding: args.padding,
                    'border-color': args.borderColor,
                    'border-width': args.borderWidth,
                    'border-radius': args.borderRadius
                }
            }
        }}>
      <Select label='Select input' info='Choose a value'>
        <Option value=''>Choose an option…</Option>
        <Option value='1'>Option 1</Option>
        <Option value='2'>Option 2</Option>
        <Option value='3'>Option 3</Option>
      </Select>
    </ThemeOverride>);
};
ConfigurableSelect.args = {
    height: '2rem',
    padding: '0.5rem',
    borderColor: '#939393',
    borderWidth: '0.0625rem',
    borderRadius: '0.5'
};
ConfigurableSelect.argTypes = {
    height: { control: { type: 'text' } },
    padding: { control: { type: 'text' } },
    borderColor: { control: { type: 'color' } },
    borderWidth: { control: { type: 'text' } },
    borderRadius: { control: { type: 'text' } }
};
//# sourceMappingURL=Select.stories.jsx.map