import React from "react";
import Icon from "../../../public/images/button.alert.react.svg";
import Button from "./";
export default {
title: "Components/Button",
component: Button,
parameters: {
docs: {
description: {
component: "Button is used for a action on a page.",
},
},
},
};
const sizes = ["extraSmall", "small", "normal", "medium"];
const Wrapper = (props) => (
{props.children}
);
const Template = (args) => ;
const PrimaryTemplate = (args) => {
return (
{sizes.map((size) => (
))}
);
};
const SecondaryTemplate = (args) => {
return (
{sizes.map((size) => (
))}
);
};
const WithIconTemplate = (args) => {
return (
{sizes.map((size) => (
}
label={`With Icon ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
{sizes.map((size) => (
}
label={`With Icon ${size[0].toUpperCase()}${size.slice(1)}`}
/>
))}
);
};
const IsLoadingTemplate = (args) => {
return (
{sizes.map((size) => (
))}
{sizes.map((size) => (
))}
);
};
const ScaleTemplate = (args) => {
return (
{sizes.map((size) => (
))}
{sizes.map((size) => (
))}
);
};
const DisabledTemplate = (args) => {
return (
{sizes.map((size) => (
))}
{sizes.map((size) => (
))}
);
};
const ClickedTemplate = (args) => {
return (
{sizes.map((size) => (
))}
{sizes.map((size) => (
))}
);
};
const HoveredTemplate = (args) => {
return (
{sizes.map((size) => (
))}
{sizes.map((size) => (
))}
);
};
export const Default = Template.bind({});
Default.args = {
size: "extraSmall",
label: "Button",
};
export const PrimaryButtons = PrimaryTemplate.bind({});
export const SecondaryButtons = SecondaryTemplate.bind({});
export const WithIconButtons = WithIconTemplate.bind({});
export const IsLoadingButtons = IsLoadingTemplate.bind({});
export const ScaleButtons = ScaleTemplate.bind({});
export const DisabledButtons = DisabledTemplate.bind({});
export const ClickedButtons = ClickedTemplate.bind({});
export const HoveredButtons = HoveredTemplate.bind({});
HoveredButtons.argTypes = {
isHovered: { table: { disable: true } },
};