2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import MainButton from ".";
|
|
|
|
import DropDownItem from "../drop-down-item";
|
2021-03-08 20:18:45 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
title: "Components/MainButton",
|
|
|
|
component: MainButton,
|
|
|
|
subcomponents: { DropDownItem },
|
|
|
|
parameters: { docs: { description: { component: "Components/MainButton" } } },
|
|
|
|
clickAction: { action: "clickAction" },
|
|
|
|
clickActionSecondary: { action: "clickActionSecondary" },
|
|
|
|
clickItem: { action: "clickItem", table: { disable: true } },
|
|
|
|
};
|
|
|
|
|
|
|
|
const Template = ({
|
|
|
|
clickAction,
|
|
|
|
clickActionSecondary,
|
|
|
|
clickItem,
|
|
|
|
...args
|
|
|
|
}) => {
|
|
|
|
const clickMainButtonHandler = (e, credentials) => {
|
|
|
|
clickAction(e, credentials);
|
|
|
|
};
|
|
|
|
|
|
|
|
const clickSecondaryButtonHandler = (e, credentials) => {
|
|
|
|
clickActionSecondary(e, credentials);
|
|
|
|
};
|
|
|
|
|
|
|
|
let icon = !args.isDropdown
|
|
|
|
? {
|
|
|
|
iconName: "static/images/people.react.svg",
|
|
|
|
}
|
|
|
|
: {};
|
|
|
|
return (
|
|
|
|
<div style={{ width: "280px" }}>
|
|
|
|
<MainButton
|
|
|
|
{...args}
|
|
|
|
clickAction={clickMainButtonHandler}
|
|
|
|
clickActionSecondary={clickSecondaryButtonHandler}
|
|
|
|
iconName
|
|
|
|
{...icon}
|
|
|
|
>
|
|
|
|
<DropDownItem
|
|
|
|
icon="static/images/catalog.employee.react.svg"
|
|
|
|
label="New employee"
|
|
|
|
onClick={() => clickItem("New employee clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem
|
|
|
|
icon="static/images/catalog.departments.react.svg"
|
|
|
|
label="New department"
|
|
|
|
onClick={() => clickItem("New department clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem isSeparator />
|
|
|
|
<DropDownItem
|
|
|
|
icon="static/images/invitation.link.react.svg"
|
|
|
|
label="Invitation link"
|
|
|
|
onClick={() => clickItem("Invitation link clicked")}
|
|
|
|
/>
|
|
|
|
</MainButton>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|
|
|
|
Default.args = {
|
|
|
|
isDisabled: false,
|
|
|
|
isDropdown: true,
|
|
|
|
text: "Actions",
|
|
|
|
iconName: "static/images/people.react.svg",
|
|
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
import { storiesOf } from "@storybook/react";
|
|
|
|
import { action } from "@storybook/addon-actions";
|
|
|
|
import { text, boolean, withKnobs, select } from "@storybook/addon-knobs/react";
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
import Section from "../../../.storybook/decorators/section";
|
|
|
|
import withReadme from "storybook-readme/with-readme";
|
|
|
|
import Readme from "./README.md";
|
2019-06-19 14:28:00 +00:00
|
|
|
|
2019-06-25 10:28:28 +00:00
|
|
|
const iconNames = Object.keys(Icons);
|
2019-06-19 14:28:00 +00:00
|
|
|
|
2019-06-20 08:24:31 +00:00
|
|
|
function ClickMainButton(e, credentials) {
|
|
|
|
console.log("ClickMainButton", e, credentials);
|
|
|
|
}
|
|
|
|
|
|
|
|
function ClickSecondaryButton(e, credentials) {
|
|
|
|
console.log("ClickSecondaryButton", e, credentials);
|
|
|
|
}
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
storiesOf("Components|MainButton", module)
|
2019-06-19 14:28:00 +00:00
|
|
|
.addDecorator(withKnobs)
|
2019-06-20 14:25:45 +00:00
|
|
|
.addDecorator(withReadme(Readme))
|
2020-10-16 13:16:01 +00:00
|
|
|
.add("base", () => {
|
|
|
|
let isDropdown = boolean("isDropdown", true);
|
2019-06-25 13:25:27 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
let icon = !isDropdown
|
2021-02-20 08:46:32 +00:00
|
|
|
? {
|
|
|
|
iconName: `${select(
|
|
|
|
"iconName",
|
|
|
|
iconNames,
|
|
|
|
"static/images/people.react.svg"
|
|
|
|
)}`,
|
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
: {};
|
2019-06-25 13:25:27 +00:00
|
|
|
|
|
|
|
return (
|
2020-10-16 13:16:01 +00:00
|
|
|
<Section>
|
|
|
|
<MainButton
|
|
|
|
isDisabled={boolean("isDisabled", false)}
|
|
|
|
isDropdown={isDropdown}
|
|
|
|
text={text("text", "Actions")}
|
|
|
|
clickAction={ClickMainButton}
|
|
|
|
clickActionSecondary={ClickSecondaryButton}
|
|
|
|
{...icon}
|
|
|
|
>
|
|
|
|
<DropDownItem
|
2021-02-20 08:46:32 +00:00
|
|
|
icon="static/images/catalog.employee.react.svg"
|
2020-10-16 13:16:01 +00:00
|
|
|
label="New employee"
|
|
|
|
onClick={() => action("New employee clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem
|
|
|
|
icon="CatalogGuestIcon"
|
|
|
|
label="New quest"
|
|
|
|
onClick={() => action("New quest clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem
|
2021-02-20 08:46:32 +00:00
|
|
|
icon="static/images/catalog.departments.react.svg"
|
2020-10-16 13:16:01 +00:00
|
|
|
label="New department"
|
|
|
|
onClick={() => action("New department clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem isSeparator />
|
|
|
|
<DropDownItem
|
2021-02-20 08:46:32 +00:00
|
|
|
icon="static/images/invitation.link.react.svg"
|
2020-10-16 13:16:01 +00:00
|
|
|
label="Invitation link"
|
|
|
|
onClick={() => action("Invitation link clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem
|
|
|
|
icon="PlaneIcon"
|
|
|
|
label="Invite again"
|
|
|
|
onClick={() => action("Invite again clicked")}
|
|
|
|
/>
|
|
|
|
<DropDownItem
|
|
|
|
icon="ImportIcon"
|
|
|
|
label="Import people"
|
|
|
|
onClick={() => action("Import people clicked")}
|
|
|
|
/>
|
|
|
|
</MainButton>
|
|
|
|
</Section>
|
|
|
|
);
|
|
|
|
});
|
2021-03-08 20:18:45 +00:00
|
|
|
*/
|