@cimpress/react-components
Version:
React components to support the MCP styleguide
58 lines • 3.34 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Anchor = exports.Disabled = exports.Danger = exports.SizeVariants = exports.Variants = exports.Default = void 0;
const react_1 = __importDefault(require("react"));
const Button_1 = require("../Button");
const meta = {
title: 'Components/Button',
component: Button_1.Button,
};
exports.default = meta;
exports.Default = {
args: {
children: 'Click me',
},
};
function ButtonStory(props) {
return (
// Wrap in `div` so that `flex` doesn't affect `Button`
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.Button, Object.assign({}, props))));
}
exports.Variants = {
render: () => (react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
react_1.default.createElement(ButtonStory, { variant: "default" }, "Default"),
react_1.default.createElement(ButtonStory, { variant: "primary" }, "Primary"),
react_1.default.createElement(ButtonStory, { variant: "secondary" }, "Secondary"),
react_1.default.createElement(ButtonStory, { variant: "link" }, "Link"),
react_1.default.createElement(ButtonStory, { variant: "anchor" }, "Anchor"))),
};
exports.SizeVariants = {
render: () => (react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
react_1.default.createElement(ButtonStory, { size: "default" }, "Default"),
react_1.default.createElement(ButtonStory, { size: "lg" }, "Large"),
react_1.default.createElement(ButtonStory, { size: "sm" }, "Small"))),
};
exports.Danger = {
render: () => (react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
react_1.default.createElement(ButtonStory, { variant: "default", color: "danger" }, "Default"),
react_1.default.createElement(ButtonStory, { variant: "primary", color: "danger" }, "Primary"),
react_1.default.createElement(ButtonStory, { variant: "secondary", color: "danger" }, "Secondary"),
react_1.default.createElement(ButtonStory, { variant: "link", color: "danger" }, "Link"),
react_1.default.createElement(ButtonStory, { variant: "anchor", color: "danger" }, "Anchor"))),
};
exports.Disabled = {
render: () => (react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem' } },
react_1.default.createElement(ButtonStory, { variant: "default", color: "danger", disabled: true }, "Default"),
react_1.default.createElement(ButtonStory, { variant: "primary", color: "danger", disabled: true }, "Primary"),
react_1.default.createElement(ButtonStory, { variant: "secondary", color: "danger", disabled: true }, "Secondary"),
react_1.default.createElement(ButtonStory, { variant: "link", color: "danger", disabled: true }, "Link"),
react_1.default.createElement(ButtonStory, { variant: "anchor", color: "danger", disabled: true }, "Anchor"))),
};
exports.Anchor = {
render: () => (react_1.default.createElement(ButtonStory, { variant: "anchor", href: "https://example.com", target: "_blank" }, "Anchor")),
};
//# sourceMappingURL=Button.stories.js.map