@kadconsulting/dry
Version:
KAD Reusable Component Library
97 lines • 12.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import Button from './Button';
import { ThemeProvider } from '~components/ThemeProvider';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
// TODO-DRY: icon needs to be easer to use
import Icon from '../Icons/Icon/Icon';
import { FaceFrown, FaceHappy } from '../Icons/paths';
import { IconSizes } from '../Icons/Icon/IconTypes';
export default {
title: 'Components/FormInputs/Button',
tags: ['autodocs'],
component: Button,
argTypes: {
text: { control: 'text' },
isLoading: { control: 'boolean' },
isError: { control: 'boolean' },
disabled: { control: 'boolean' },
buttonType: {
control: 'select',
options: [
'primary',
'secondary-grey',
'secondary',
'tertiary-grey',
'tertiary',
'link-grey',
'link',
'danger',
'ghost-danger',
'ghost-info',
'outline-transparent',
'ghost-text',
// Add more options here as we implement them
],
},
size: {
control: 'select',
options: ['small', 'medium', 'large', 'xl', 'xxl'],
},
fullWidth: { control: 'boolean' },
closeButton: { control: 'boolean' },
socialText: { control: 'boolean' },
destructive: { control: 'boolean' },
adornmentLeft: {
control: 'boolean',
mapping: {
false: null,
true: (_jsx(Icon, { color: 'light-contrast', Path: FaceFrown, size: IconSizes.SMALL })),
},
},
adornmentRight: {
control: 'boolean',
mapping: {
false: null,
true: _jsx(Icon, { color: '#6c2d91', Path: FaceHappy, size: IconSizes.SMALL }),
},
},
},
};
export const Default = {
render: (args) => (_jsx(ThemeProvider, { themes: { light: lightTheme, dark: darkTheme }, children: _jsx(Button, { ...args }) })),
args: {
text: 'Click Me',
buttonType: 'primary',
size: 'medium',
},
};
export const WithAdornments = {
render: (args) => (_jsx(ThemeProvider, { themes: { light: lightTheme, dark: darkTheme }, children: _jsx(Button, { ...args, adornmentLeft: _jsx(Icon, { color: 'light-contrast', Path: FaceFrown, size: IconSizes.SMALL }), adornmentRight: _jsx(Icon, { color: '#6c2d91', Path: FaceHappy, size: IconSizes.SMALL }) }) })),
args: {
...Default.args,
text: 'Button with Adornments',
},
};
const DemoComponent = (args, context) => {
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const handleButtonClick = () => {
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
setIsError(true);
}, 2000);
};
return (_jsx(ThemeProvider, { themes: { light: lightTheme, dark: darkTheme }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: [_jsx(Button, { ...args, onClick: handleButtonClick, isLoading: isLoading, isError: isError }), _jsx(Button, { text: 'Secondary', buttonType: 'secondary-grey', size: 'medium' }), _jsx(Button, { text: 'Tertiary', buttonType: 'tertiary', size: 'medium' }), _jsx(Button, { text: 'Disabled', disabled: true, size: 'medium' }), _jsx(Button, { text: 'Small', buttonType: 'primary', size: 'small' }), _jsx(Button, { text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { text: 'primary', buttonType: 'primary', size: 'large' }), _jsx(Button, { text: 'secondary-grey', buttonType: 'secondary-grey', size: 'large' }), _jsx(Button, { text: 'secondary', buttonType: 'secondary', size: 'large' }), _jsx(Button, { text: 'tertiary-grey', buttonType: 'tertiary-grey', size: 'large' }), _jsx(Button, { text: 'tertiary', buttonType: 'tertiary', size: 'large' }), _jsx(Button, { text: 'link', buttonType: 'link', size: 'large' }), _jsx(Button, { text: 'link-grey', buttonType: 'link-grey', size: 'large' }), _jsx(Button, { text: 'danger', buttonType: 'danger', size: 'large' }), _jsx(Button, { text: 'ghost-danger', buttonType: 'ghost-danger', size: 'large' }), _jsx(Button, { text: 'ghost-info', buttonType: 'ghost-info', size: 'large' }), _jsx(Button, { text: 'outline-transparent', buttonType: 'outline-transparent', size: 'large' }), _jsx(Button, { text: 'ghost-text', buttonType: 'ghost-text', size: 'large' }), _jsx(Button, { text: 'icon', buttonType: 'icon', size: 'large' }), _jsx(Button, { text: 'warning', buttonType: 'warning', size: 'large' }), _jsx(Button, { text: 'success', buttonType: 'success', size: 'large' }), _jsx(Button, { text: 'info', buttonType: 'info', size: 'large' }), _jsx(Button, { text: 'light', buttonType: 'light', size: 'large' }), _jsx(Button, { text: 'dark', buttonType: 'dark', size: 'large' }), _jsx(Button, { text: 'link', buttonType: 'link', size: 'large' }), _jsx(Button, { text: 'outline-primary', buttonType: 'outline-primary', size: 'large' }), _jsx(Button, { text: 'outline-secondary', buttonType: 'outline-secondary', size: 'large' }), _jsx(Button, { text: 'outline-tertiary', buttonType: 'outline-tertiary', size: 'large' }), _jsx(Button, { text: 'outline-danger', buttonType: 'outline-danger', size: 'large' }), _jsx(Button, { text: 'outline-warning', buttonType: 'outline-warning', size: 'large' }), _jsx(Button, { text: 'outline-success', buttonType: 'outline-success', size: 'large' }), _jsx(Button, { text: 'outline-info', buttonType: 'outline-info', size: 'large' }), _jsx(Button, { text: 'outline-light', buttonType: 'outline-light', size: 'large' }), _jsx(Button, { text: 'outline-dark', buttonType: 'outline-dark', size: 'large' }), _jsx(Button, { text: 'outline-link', buttonType: 'outline-link', size: 'large' }), _jsx(Button, { text: 'ghost-primary', buttonType: 'ghost-primary', size: 'large' }), _jsx(Button, { text: 'ghost-secondary', buttonType: 'ghost-secondary', size: 'large' }), _jsx(Button, { text: 'ghost-tertiary', buttonType: 'ghost-tertiary', size: 'large' }), _jsx(Button, { text: 'ghost-warning', buttonType: 'ghost-warning', size: 'large' }), _jsx(Button, { text: 'ghost-success', buttonType: 'ghost-success', size: 'large' }), _jsx(Button, { text: 'ghost-light', buttonType: 'ghost-light', size: 'large' }), _jsx(Button, { text: 'ghost-dark', buttonType: 'ghost-dark', size: 'large' }), _jsx(Button, { text: 'ghost-link', buttonType: 'ghost-link', size: 'large' }), _jsx(Button, { text: 'text-primary', buttonType: 'text-primary', size: 'large' }), _jsx(Button, { text: 'text-secondary', buttonType: 'text-secondary', size: 'large' }), _jsx(Button, { text: 'text-tertiary', buttonType: 'text-tertiary', size: 'large' }), _jsx(Button, { text: 'text-danger', buttonType: 'text-danger', size: 'large' }), _jsx(Button, { text: 'text-warning', buttonType: 'text-warning', size: 'large' }), _jsx(Button, { text: 'text-success', buttonType: 'text-success', size: 'large' }), _jsx(Button, { text: 'text-info', buttonType: 'text-info', size: 'large' }), _jsx(Button, { text: 'text-light', buttonType: 'text-light', size: 'large' }), _jsx(Button, { text: 'text-dark', buttonType: 'text-dark', size: 'large' }), _jsx(Button, { text: 'text-link', buttonType: 'text-link', size: 'large' }), _jsx(Button, { text: 'text-outline-primary', buttonType: 'text-outline-primary', size: 'large' }), _jsx(Button, { text: 'text-outline-secondary', buttonType: 'text-outline-secondary', size: 'large' }), _jsx(Button, { text: 'text-outline-tertiary', buttonType: 'text-outline-tertiary', size: 'large' }), _jsx(Button, { text: 'text-outline-danger', buttonType: 'text-outline-danger', size: 'large' }), _jsx(Button, { text: 'text-outline-warning', buttonType: 'text-outline-warning', size: 'large' }), _jsx(Button, { text: 'text-outline-success', buttonType: 'text-outline-success', size: 'large' }), _jsx(Button, { text: 'text-outline-info', buttonType: 'text-outline-info', size: 'large' }), _jsx(Button, { text: 'text-outline-light', buttonType: 'text-outline-light', size: 'large' }), _jsx(Button, { text: 'text-outline-dark', buttonType: 'text-outline-dark', size: 'large' }), _jsx(Button, { text: 'text-outline-link', buttonType: 'text-outline-link', size: 'large' }), _jsx(Button, { text: 'text-ghost-primary', buttonType: 'text-ghost-primary', size: 'large' }), _jsx(Button, { text: 'text-ghost-secondary', buttonType: 'text-ghost-secondary', size: 'large' }), _jsx(Button, { text: 'text-ghost-tertiary', buttonType: 'text-ghost-tertiary', size: 'large' }), _jsx(Button, { text: 'text-ghost-danger', buttonType: 'text-ghost-danger', size: 'large' }), _jsx(Button, { text: 'text-ghost-warning', buttonType: 'text-ghost-warning', size: 'large' }), _jsx(Button, { text: 'text-ghost-success', buttonType: 'text-ghost-success', size: 'large' }), _jsx(Button, { text: 'text-ghost-info', buttonType: 'text-ghost-info', size: 'large' }), _jsx(Button, { text: 'text-ghost-light', buttonType: 'text-ghost-light', size: 'large' }), _jsx(Button, { text: 'text-ghost-dark', buttonType: 'text-ghost-dark', size: 'large' }), _jsx(Button, { text: 'text-ghost-link', buttonType: 'text-ghost-link', size: 'large' }), _jsx(Button, { socialVariant: 'brand', socialText: true, social: 'google', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'brand', socialText: true, social: 'facebook', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'brand', socialText: true, social: 'apple', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'brand', socialText: true, social: 'twitter', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'brand', socialText: true, social: 'figma', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'brand', socialText: true, social: 'dribbble', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'color', socialText: true, social: 'google', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'color', socialText: true, social: 'facebook', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'color', socialText: true, social: 'apple', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'color', socialText: true, social: 'twitter', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'color', socialText: true, social: 'figma', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'color', socialText: true, social: 'dribbble', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'colorWithBrand', socialText: true, social: 'google', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'colorWithBrand', socialText: true, social: 'facebook', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'colorWithBrand', socialText: true, social: 'apple', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'colorWithBrand', socialText: true, social: 'twitter', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'colorWithBrand', socialText: true, social: 'figma', text: 'Large', buttonType: 'primary', size: 'large' }), _jsx(Button, { socialVariant: 'colorWithBrand', socialText: true, social: 'dribbble', text: 'Large', buttonType: 'primary', size: 'large' })] }) }));
};
export const Demo = {
render: (args, context) => DemoComponent(args, context),
parameters: {
controls: {
disable: true,
},
},
};
//# sourceMappingURL=Button.stories.js.map