104 lines
1.6 KiB
JavaScript
104 lines
1.6 KiB
JavaScript
// External dependencies.
|
|
import React from 'react';
|
|
|
|
// Internal dependencies.
|
|
import Button from '@common-ui/controls/button/button';
|
|
import ETCommonButtonGroup from '@common-ui/controls/button-group/button-group';
|
|
|
|
|
|
const Buttons = (
|
|
<>
|
|
<Button className='et-common-button et-common-button--primary'>Button 1</Button>
|
|
<Button className='et-common-button et-common-button--danger'>Button 2</Button>
|
|
<Button className='et-common-button et-common-button--success'>Button 3</Button>
|
|
<Button className='et-common-button et-common-button--tertiary'>Button 4</Button>
|
|
</>
|
|
);
|
|
|
|
export default {
|
|
title: 'Controls/Button Group',
|
|
component: ETCommonButtonGroup,
|
|
argTypes: {
|
|
onClick: {
|
|
action: 'clicked',
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
},
|
|
args: {
|
|
children: Buttons,
|
|
style: {
|
|
padding: '10px',
|
|
},
|
|
},
|
|
};
|
|
|
|
export const Horizontal = {};
|
|
|
|
export const Vertical = {
|
|
args: {
|
|
vertical: true,
|
|
},
|
|
};
|
|
|
|
export const Block = {
|
|
args: {
|
|
block: true,
|
|
},
|
|
};
|
|
|
|
export const Danger = {
|
|
args: {
|
|
danger: true,
|
|
},
|
|
};
|
|
|
|
export const Elevate = {
|
|
args: {
|
|
elevate: true,
|
|
},
|
|
};
|
|
|
|
export const Info = {
|
|
args: {
|
|
info: true,
|
|
},
|
|
};
|
|
|
|
export const Inverse = {
|
|
args: {
|
|
inverse: true,
|
|
},
|
|
};
|
|
|
|
export const Primary = {
|
|
args: {
|
|
primary: true,
|
|
},
|
|
};
|
|
|
|
export const Success = {
|
|
args: {
|
|
success: true,
|
|
},
|
|
};
|
|
|
|
export const Warning = {
|
|
args: {
|
|
warning: true,
|
|
},
|
|
};
|
|
|
|
export const WithCustomStyle = {
|
|
args: {
|
|
style: { backgroundColor: 'lightblue' },
|
|
},
|
|
};
|
|
|
|
export const WithOnClick = {
|
|
args: {
|
|
onClick: () => alert('Button group clicked!'),
|
|
},
|
|
};
|