@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
88 lines (82 loc) • 1.99 kB
text/typescript
import {
commonMdcButton,
commonHTMLAttributes,
commonStyles,
} from '../../storybook/helper.stories.argtypes';
import { BUTTON_VARIANTS, ICON_BUTTON_SIZES, BUTTON_COLORS } from '@momentum-design/components';
// buttoncircle does not support children
delete commonMdcButton.children;
const buttonCircleArgTypes = {
prefixIcon: {
description: 'The icon to display in the button.',
control: { type: 'text' },
table: {
type: {
summary: 'string',
},
defaultValue: {
summary: undefined,
},
},
},
variant: {
description: 'Modifies the variant of this component.',
options: [undefined, ...Object.values(BUTTON_VARIANTS)],
control: { type: 'select' },
table: {
type: {
summary: 'string',
},
defaultValue: {
summary: 'undefined',
},
},
},
size: {
description:
'Modifies the size of this component. \n\n**NOTE:** Size 20 is only supported for `variant="tertiary"`',
options: [undefined, ...Object.values(ICON_BUTTON_SIZES)],
control: { type: 'select' },
table: {
type: {
summary: 'number',
},
defaultValue: {
summary: 32,
},
},
},
color: {
description:
'Modifies the color of this component. \n\n**NOTE:** Coloring is only supported for variants `primary` & `secondary`',
options: [undefined, ...Object.values(BUTTON_COLORS)],
control: { type: 'select' },
table: {
type: {
summary: 'string',
},
defaultValue: {
summary: 'undefined',
},
},
},
inverted: {
description: 'Inverts the color of the button.',
control: { type: 'boolean' },
table: {
type: {
summary: 'boolean',
},
defaultValue: {
summary: false,
},
},
},
};
export { buttonCircleArgTypes };
export default {
...commonStyles,
...commonMdcButton,
...commonHTMLAttributes,
...buttonCircleArgTypes,
};