@cimpress/react-components/dist/esm/docs/components/button/button.js

React components to support the MCP styleguide

import React, { Component } from 'react';
import { Button } from '@cimpress/react-components';
export default class ButtonDemo extends Component {
    constructor() {
        super(...arguments);
        Object.defineProperty(this, "state", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: {
                demoText: 'Welcome, click some buttons!',
            }
        });
        Object.defineProperty(this, "buttonClicked", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: button => {
                this.setState({
                    demoText: `"${button.target.innerText}" was just clicked.`,
                });
            }
        });
    }
    render() {
        return (React.createElement("div", { className: "row" },
            React.createElement("div", { className: "col-md-12" },
                React.createElement("div", { className: "well", style: { marginBottom: '20px' } }, this.state.demoText)),
            React.createElement("div", { className: "col-md-12", style: {
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                    alignContent: 'space-around',
                    alignItems: 'center',
                } },
                React.createElement(Button, { variant: "default", onClick: this.buttonClicked }, "Default"),
                React.createElement(Button, { variant: "primary", onClick: this.buttonClicked }, "Primary"),
                React.createElement(Button, { href: "#", variant: "link", onClick: this.buttonClicked }, "Link"),
                React.createElement(Button, { href: "#", target: "_blank", variant: "link", onClick: this.buttonClicked }, "Link in new tab"),
                React.createElement(Button, { variant: "anchor", onClick: this.buttonClicked }, "Anchor"),
                React.createElement(Button, { disabled: true, onClick: this.buttonClicked }, "Disabled")),
            React.createElement("div", { className: "col-md-12", style: {
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                    alignContent: 'space-around',
                    alignItems: 'center',
                } },
                React.createElement(Button, { variant: "primary", size: "lg", onClick: this.buttonClicked }, "Large button"),
                React.createElement(Button, { variant: "primary", size: "sm", onClick: this.buttonClicked }, "Small button"),
                React.createElement(Button, { className: "custom-additional-classes my-button", onClick: this.buttonClicked }, "Custom Classes Added")),
            React.createElement("div", { className: "col-md-12", style: { margin: '5px' } },
                React.createElement(Button, { variant: "primary", blockLevel: true, onClick: this.buttonClicked }, "Block level Button"))));
    }
}
//# sourceMappingURL=button.js.map