import { ThemeOverride, Flex, Text } from '@pega/cosmos-react-core';
export default {
    title: 'Core/Text',
    component: Text,
    excludeStories: ['ConfigurableText']
};
export const TextDemo = (args) => {
    return (<Text variant={args.variant} status={args.status}>
      Pega Constellation
    </Text>);
};
TextDemo.args = {
    variant: 'primary',
    status: undefined
};
TextDemo.argTypes = {
    variant: {
        options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        control: { type: 'select' }
    },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
};
export const ConfigurableText = (args) => {
    return (<ThemeOverride theme={{
            components: {
                text: {
                    primary: {
                        'font-size': args.primaryFontSize,
                        'font-weight': args.primaryFontWeight
                    },
                    secondary: {
                        'font-size': args.secondaryFontSize,
                        'font-weight': args.secondaryFontWeight
                    },
                    h1: {
                        'font-size': args.h1FontSize,
                        'font-weight': args.h1FontWeight
                    },
                    h2: {
                        'font-size': args.h2FontSize,
                        'font-weight': args.h2FontWeight
                    },
                    h3: {
                        'font-size': args.h3FontSize,
                        'font-weight': args.h3FontWeight
                    },
                    h4: {
                        'font-size': args.h4FontSize,
                        'font-weight': args.h4FontWeight
                    },
                    h5: {
                        'font-size': args.h5FontSize,
                        'font-weight': args.h5FontWeight
                    },
                    h6: {
                        'font-size': args.h6FontSize,
                        'font-weight': args.h6FontWeight
                    }
                }
            }
        }}>
      <Flex container={{ gap: 2, alignItems: 'end' }}>
        <Text variant='primary'>Primary</Text>
        <Text variant='secondary'>Secondary</Text>
        <Text variant='h1'>h1</Text>
        <Text variant='h2'>h2</Text>
        <Text variant='h3'>h3</Text>
        <Text variant='h4'>h4</Text>
        <Text variant='h5'>h5</Text>
        <Text variant='h6'>h6</Text>
      </Flex>
    </ThemeOverride>);
};
ConfigurableText.args = {
    primaryFontSize: 's',
    primaryFontWeight: '400',
    secondaryFontSize: 'xs',
    secondaryFontWeight: '400',
    h1FontSize: 'xl',
    h1FontWeight: '600',
    h2FontSize: 'l',
    h2FontWeight: '600',
    h3FontSize: 'm',
    h3FontWeight: '600',
    h4FontSize: 's',
    h4FontWeight: '600',
    h5FontSize: 'xs',
    h5FontWeight: '600',
    h6FontSize: 'xxs',
    h6FontWeight: '600'
};
ConfigurableText.argTypes = {
    primaryFontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    primaryFontWeight: { control: { type: 'text' } },
    secondaryFontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    secondaryFontWeight: { control: { type: 'text' } },
    h1FontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    h1FontWeight: { control: { type: 'text' } },
    h2FontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    h2FontWeight: { control: { type: 'text' } },
    h3FontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    h3FontWeight: { control: { type: 'text' } },
    h4FontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    h4FontWeight: { control: { type: 'text' } },
    h5FontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    h5FontWeight: { control: { type: 'text' } },
    h6FontSize: {
        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
        control: { type: 'select' }
    },
    h6FontWeight: { control: { type: 'text' } }
};
//# sourceMappingURL=Text.stories.jsx.map