@cimpress/react-components
Version:
React components to support the MCP styleguide
42 lines • 3.87 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const react_components_1 = require("@cimpress/react-components");
const IconArrowButtonRight_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconArrowButtonRight"));
const IconNavigationMenuVertical_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconNavigationMenuVertical"));
const IconRemove_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconRemove"));
const IconSearch_1 = __importDefault(require("@cimpress-technology/react-streamline-icons/lib/IconSearch"));
const containerStyle = (0, css_1.css)({
display: 'flex',
justifyContent: 'space-between',
flexWrap: 'wrap',
alignContent: 'space-around',
alignItems: 'center',
width: '20%',
});
const IconButton = () => {
const onClick = () => console.log('Icon button clicked!');
return (react_1.default.createElement(react_components_1.FlexBox, { spaceBetween: true, noGrow: true },
react_1.default.createElement("div", { className: containerStyle },
react_1.default.createElement(react_components_1.Button, { size: "sm", icon: react_1.default.createElement(IconSearch_1.default, null), onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { icon: react_1.default.createElement(IconSearch_1.default, null), onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { size: "lg", icon: react_1.default.createElement(IconSearch_1.default, null), onClick: onClick })),
react_1.default.createElement("div", { className: containerStyle },
react_1.default.createElement(react_components_1.Button, { size: "sm", variant: "primary", icon: react_1.default.createElement(IconRemove_1.default, null), onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { icon: react_1.default.createElement(IconRemove_1.default, null), variant: "primary", onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { icon: react_1.default.createElement(IconRemove_1.default, null), size: "lg", variant: "primary", onClick: onClick })),
react_1.default.createElement("div", { className: containerStyle },
react_1.default.createElement(react_components_1.Button, { size: "sm", variant: "link", icon: react_1.default.createElement(IconNavigationMenuVertical_1.default, null), onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { icon: react_1.default.createElement(IconNavigationMenuVertical_1.default, null), variant: "link", onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { size: "lg", variant: "link", icon: react_1.default.createElement(IconNavigationMenuVertical_1.default, null), onClick: onClick })),
react_1.default.createElement("div", { className: containerStyle },
react_1.default.createElement(react_components_1.Button, { size: "sm", variant: "anchor", icon: react_1.default.createElement(IconArrowButtonRight_1.default, null), onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { icon: react_1.default.createElement(IconArrowButtonRight_1.default, null), variant: "anchor", onClick: onClick }),
react_1.default.createElement(react_components_1.Button, { size: "lg", variant: "anchor", icon: react_1.default.createElement(IconArrowButtonRight_1.default, null), onClick: onClick }))));
};
exports.default = IconButton;
//# sourceMappingURL=IconButton.js.map