@cimpress/react-components
Version:
React components to support the MCP styleguide
52 lines • 2.73 kB
JavaScript
import React from 'react';
import { Button } from '../Button';
const meta = {
title: 'Components/Button',
component: Button,
};
export default meta;
export const Default = {
args: {
children: 'Click me',
},
};
function ButtonStory(props) {
return (
// Wrap in `div` so that `flex` doesn't affect `Button`
React.createElement("div", null,
React.createElement(Button, Object.assign({}, props))));
}
export const Variants = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: '1rem' } },
React.createElement(ButtonStory, { variant: "default" }, "Default"),
React.createElement(ButtonStory, { variant: "primary" }, "Primary"),
React.createElement(ButtonStory, { variant: "secondary" }, "Secondary"),
React.createElement(ButtonStory, { variant: "link" }, "Link"),
React.createElement(ButtonStory, { variant: "anchor" }, "Anchor"))),
};
export const SizeVariants = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: '1rem' } },
React.createElement(ButtonStory, { size: "default" }, "Default"),
React.createElement(ButtonStory, { size: "lg" }, "Large"),
React.createElement(ButtonStory, { size: "sm" }, "Small"))),
};
export const Danger = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: '1rem' } },
React.createElement(ButtonStory, { variant: "default", color: "danger" }, "Default"),
React.createElement(ButtonStory, { variant: "primary", color: "danger" }, "Primary"),
React.createElement(ButtonStory, { variant: "secondary", color: "danger" }, "Secondary"),
React.createElement(ButtonStory, { variant: "link", color: "danger" }, "Link"),
React.createElement(ButtonStory, { variant: "anchor", color: "danger" }, "Anchor"))),
};
export const Disabled = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: '1rem' } },
React.createElement(ButtonStory, { variant: "default", color: "danger", disabled: true }, "Default"),
React.createElement(ButtonStory, { variant: "primary", color: "danger", disabled: true }, "Primary"),
React.createElement(ButtonStory, { variant: "secondary", color: "danger", disabled: true }, "Secondary"),
React.createElement(ButtonStory, { variant: "link", color: "danger", disabled: true }, "Link"),
React.createElement(ButtonStory, { variant: "anchor", color: "danger", disabled: true }, "Anchor"))),
};
export const Anchor = {
render: () => (React.createElement(ButtonStory, { variant: "anchor", href: "https://example.com", target: "_blank" }, "Anchor")),
};
//# sourceMappingURL=Button.stories.js.map