mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 17:05:18 +00:00
384c987389
* clean up routes and useless components * component clean up * removed redux from routes * rename file * moved useDeepEffect hook with others * removed redux, fleet, app_constants dirs; added types to utilities * style cleanup * typo fix * removed unused ts-ignore comments * removed redux packages!!! * formatting * fixed typing for simple search function * updated frontend readme
105 lines
2.1 KiB
TypeScript
105 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import { Meta, Story } from "@storybook/react";
|
|
import { noop } from "lodash";
|
|
|
|
import { DEFAULT_GRAVATAR_LINK } from "utilities/constants";
|
|
import Avatar from "components/Avatar";
|
|
// @ts-ignore
|
|
import DropdownButton from ".";
|
|
|
|
import "../../../index.scss";
|
|
|
|
interface IOptions {
|
|
disabled: boolean;
|
|
label: string;
|
|
onClick: (evt: React.MouseEvent<HTMLButtonElement>) => void;
|
|
}
|
|
|
|
interface IDropdownButtonProps {
|
|
children: React.ReactChild;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
options: IOptions[];
|
|
size?: string;
|
|
tabIndex?: number;
|
|
type?: string;
|
|
variant?: string;
|
|
}
|
|
|
|
const options = [
|
|
{
|
|
label: "My account",
|
|
onClick: noop,
|
|
},
|
|
{
|
|
label: "Documentation",
|
|
onClick: () => window.open("https://fleetdm.com/docs", "_blank"),
|
|
},
|
|
{
|
|
label: "Sign out",
|
|
onClick: noop,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
component: DropdownButton,
|
|
title: "Components/DropdownButton",
|
|
argTypes: {
|
|
variant: {
|
|
options: [
|
|
"brand",
|
|
"success",
|
|
"alert",
|
|
"blue-green",
|
|
"grey",
|
|
"warning",
|
|
"link",
|
|
"label",
|
|
"text-link",
|
|
"text-icon",
|
|
"inverse",
|
|
"inverse-alert",
|
|
"block",
|
|
"unstyled",
|
|
"unstyled-modal-query",
|
|
"contextual-nav-item",
|
|
"small-text-icon",
|
|
],
|
|
control: "select",
|
|
},
|
|
type: {
|
|
options: ["button", "submit", "reset"],
|
|
control: "select",
|
|
},
|
|
},
|
|
parameters: {
|
|
backgrounds: {
|
|
default: "header",
|
|
values: [
|
|
{
|
|
name: "header",
|
|
value: "linear-gradient(270deg, #201e43 0%, #353d62 100%)",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
args: {
|
|
variant: "unstyled",
|
|
className: "story",
|
|
size: "",
|
|
tabIndex: 0,
|
|
options,
|
|
},
|
|
} as Meta;
|
|
|
|
const Template: Story<IDropdownButtonProps> = (props) => (
|
|
<DropdownButton {...props}>
|
|
<Avatar user={{ gravatarURL: DEFAULT_GRAVATAR_LINK }} size="small" />
|
|
</DropdownButton>
|
|
);
|
|
|
|
export const Default = Template.bind({});
|
|
|
|
export const Disabled = Template.bind({});
|
|
Disabled.args = { ...Default.args, disabled: true };
|