2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
2021-03-01 18:37:56 +00:00
|
|
|
|
2021-03-02 13:27:45 +00:00
|
|
|
import Icon from "../../../public/images/button.alert.react.svg";
|
2021-03-01 18:37:56 +00:00
|
|
|
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 = ["base", "medium", "big", "large"];
|
|
|
|
|
|
|
|
const Wrapper = (props) => (
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
display: "grid",
|
|
|
|
gridTemplateColumns: props.isScale
|
|
|
|
? "1fr"
|
|
|
|
: "repeat( auto-fill, minmax(180px, 1fr) )",
|
|
|
|
gridGap: "16px",
|
|
|
|
alignItems: "center",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{props.children}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
const Template = (args) => <Button {...args} />;
|
|
|
|
const PrimaryTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-primary-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
scale={false}
|
|
|
|
size={size}
|
|
|
|
label={`Primary ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const SecondaryTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-secondary-${size}`}
|
|
|
|
{...args}
|
|
|
|
scale={false}
|
|
|
|
size={size}
|
|
|
|
label={`Secondary ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const WithIconTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-icon-prim-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
size={size}
|
2021-03-02 13:27:45 +00:00
|
|
|
icon={<Icon />}
|
2021-03-01 18:37:56 +00:00
|
|
|
label={`With Icon ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-icon-sec-${size}`}
|
|
|
|
{...args}
|
|
|
|
size={size}
|
2021-03-02 13:27:45 +00:00
|
|
|
icon={<Icon />}
|
2021-03-01 18:37:56 +00:00
|
|
|
label={`With Icon ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const IsLoadingTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-load-prim-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
size={size}
|
|
|
|
isLoading={true}
|
|
|
|
label={`Loading ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-load-sec-${size}`}
|
|
|
|
{...args}
|
|
|
|
size={size}
|
|
|
|
isLoading={true}
|
|
|
|
label={`Loading ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const ScaleTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper isScale>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-scale-prim-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
size={size}
|
|
|
|
isLoading={true}
|
|
|
|
label={`Scale ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-scale-sec-${size}`}
|
|
|
|
{...args}
|
|
|
|
size={size}
|
|
|
|
isLoading={true}
|
|
|
|
label={`Scale ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const DisabledTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-disabled-prim-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
size={size}
|
|
|
|
isDisabled={true}
|
|
|
|
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-disabled-sec-${size}`}
|
|
|
|
{...args}
|
|
|
|
size={size}
|
|
|
|
isDisabled={true}
|
|
|
|
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const ClickedTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-clicked-prim-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
size={size}
|
|
|
|
isClicked={true}
|
|
|
|
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-clicked-sec-${size}`}
|
|
|
|
{...args}
|
|
|
|
size={size}
|
|
|
|
isClicked={true}
|
|
|
|
label={`Clicked ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const HoveredTemplate = (args) => {
|
|
|
|
return (
|
|
|
|
<Wrapper>
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-hovered-prim-${size}`}
|
|
|
|
{...args}
|
|
|
|
primary
|
|
|
|
size={size}
|
|
|
|
isHovered={true}
|
|
|
|
label={`Disabled ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{sizes.map((size) => (
|
|
|
|
<Button
|
|
|
|
key={`all-hovered-sec-${size}`}
|
|
|
|
{...args}
|
|
|
|
size={size}
|
|
|
|
isHovered={true}
|
|
|
|
label={`Clicked ${size[0].toUpperCase()}${size.slice(1)}`}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</Wrapper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Default = Template.bind({});
|
2021-03-07 11:57:26 +00:00
|
|
|
Default.args = {
|
|
|
|
size: "base",
|
|
|
|
label: "Base Button",
|
|
|
|
};
|
2021-03-01 18:37:56 +00:00
|
|
|
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({});
|
2021-03-02 13:27:45 +00:00
|
|
|
HoveredButtons.argTypes = {
|
|
|
|
isHovered: { table: { disable: true } },
|
|
|
|
};
|