@cimpress/react-components
Version:
React components to support the MCP styleguide
37 lines • 2.85 kB
JavaScript
import React from 'react';
import { css } from '@emotion/css';
import { Button, FlexBox } from '@cimpress/react-components';
import IconArrowButtonRight from '@cimpress-technology/react-streamline-icons/lib/IconArrowButtonRight';
import IconNavigationMenuVertical from '@cimpress-technology/react-streamline-icons/lib/IconNavigationMenuVertical';
import IconRemove from '@cimpress-technology/react-streamline-icons/lib/IconRemove';
import IconSearch from '@cimpress-technology/react-streamline-icons/lib/IconSearch';
const containerStyle = 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.createElement(FlexBox, { spaceBetween: true, noGrow: true },
React.createElement("div", { className: containerStyle },
React.createElement(Button, { size: "sm", icon: React.createElement(IconSearch, null), onClick: onClick }),
React.createElement(Button, { icon: React.createElement(IconSearch, null), onClick: onClick }),
React.createElement(Button, { size: "lg", icon: React.createElement(IconSearch, null), onClick: onClick })),
React.createElement("div", { className: containerStyle },
React.createElement(Button, { size: "sm", variant: "primary", icon: React.createElement(IconRemove, null), onClick: onClick }),
React.createElement(Button, { icon: React.createElement(IconRemove, null), variant: "primary", onClick: onClick }),
React.createElement(Button, { icon: React.createElement(IconRemove, null), size: "lg", variant: "primary", onClick: onClick })),
React.createElement("div", { className: containerStyle },
React.createElement(Button, { size: "sm", variant: "link", icon: React.createElement(IconNavigationMenuVertical, null), onClick: onClick }),
React.createElement(Button, { icon: React.createElement(IconNavigationMenuVertical, null), variant: "link", onClick: onClick }),
React.createElement(Button, { size: "lg", variant: "link", icon: React.createElement(IconNavigationMenuVertical, null), onClick: onClick })),
React.createElement("div", { className: containerStyle },
React.createElement(Button, { size: "sm", variant: "anchor", icon: React.createElement(IconArrowButtonRight, null), onClick: onClick }),
React.createElement(Button, { icon: React.createElement(IconArrowButtonRight, null), variant: "anchor", onClick: onClick }),
React.createElement(Button, { size: "lg", variant: "anchor", icon: React.createElement(IconArrowButtonRight, null), onClick: onClick }))));
};
export default IconButton;
//# sourceMappingURL=IconButton.js.map