108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
import React from "react";
|
|
import GroupButton from "./";
|
|
import DropDownItem from "../drop-down-item";
|
|
|
|
export default {
|
|
title: "Components/GroupButton",
|
|
component: GroupButton,
|
|
subcomponents: { DropDownItem },
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: `Base Button is used for a group action on a page
|
|
|
|
It can be used as selector with checkbox for this following properties are combined: _isDropdown_, _isSeparato
|
|
_isSeparator_ will add vertical bar after button.
|
|
|
|
_isDropdown_ allows adding items to dropdown list in children.
|
|
|
|
For health of checkbox, button inherits part of properties of this component.
|
|
`,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const Template = (args) => {
|
|
return (
|
|
<div style={{ height: "200px", position: "relative" }}>
|
|
<GroupButton {...args}>
|
|
<DropDownItem label="Action 1" />
|
|
<DropDownItem label="Action 2" />
|
|
<DropDownItem label="Action 3" />
|
|
</GroupButton>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
label: "Base group button",
|
|
disabled: false,
|
|
isDropdown: true,
|
|
opened: true,
|
|
};
|
|
|
|
const AllTemplate = (args) => {
|
|
const rowStyle = { marginTop: 8 };
|
|
const headerStyle = { marginLeft: 16 };
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "8px 0 0 40px",
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr 1fr 1fr",
|
|
height: "200px",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<div style={rowStyle}>
|
|
<div style={headerStyle}>Active</div>
|
|
<div>
|
|
<GroupButton />
|
|
</div>
|
|
<div>
|
|
<GroupButton isDropdown>
|
|
<DropDownItem label="Action 1" />
|
|
</GroupButton>
|
|
</div>
|
|
</div>
|
|
<div style={rowStyle}>
|
|
<div style={headerStyle}>Hover</div>
|
|
<div>
|
|
<GroupButton hovered />
|
|
</div>
|
|
<div>
|
|
<GroupButton isDropdown hovered>
|
|
<DropDownItem label="Action 2" />
|
|
</GroupButton>
|
|
</div>
|
|
</div>
|
|
<div style={rowStyle}>
|
|
<div style={headerStyle}>Click*(Press)</div>
|
|
<div>
|
|
<GroupButton activated />
|
|
</div>
|
|
<div>
|
|
<GroupButton isDropdown activated>
|
|
<DropDownItem label="Action 3" />
|
|
</GroupButton>
|
|
</div>
|
|
</div>
|
|
<div style={rowStyle}>
|
|
<div style={headerStyle}>Disable</div>
|
|
<div>
|
|
<GroupButton disabled />
|
|
</div>
|
|
<div>
|
|
<GroupButton isDropdown disabled>
|
|
<DropDownItem label="Action 4" />
|
|
</GroupButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const All = AllTemplate.bind({});
|