@cimpress/react-components
Version:
React components to support the MCP styleguide
16 lines • 1.52 kB
JavaScript
import React, { useState } from 'react';
import { Alert, Button } from '@cimpress/react-components';
const AlertDemo = () => {
const [alertDismissed, setAlertDismissed] = useState(true);
const toggleDismissed = () => setAlertDismissed(!alertDismissed);
return (React.createElement("div", null,
React.createElement(Alert, { title: "Title: Dismissible alert", message: "There is a button on the right to 'hide' this alert", dismissible: true }),
React.createElement(Alert, { title: "Title: Non-dismissible alert", message: "The button on the right to 'hide' this alert is not shown", dismissible: false }),
['danger', 'info'].map(status => (React.createElement(Alert, { key: status, status: status, message: `This is '${status}' alert`, dismissible: true }))),
['warning', 'success'].map(status => (React.createElement(Alert, { key: status, status: status, message: `This is '${status}' alert`, dismissible: true }))),
React.createElement(Alert, { title: "Title: Dismissible alert using an onDismiss callback", message: "'Hiding' this alert will trigger a popup", dismissible: true, onDismiss: () => alert("The alert has been 'hidden'.") }),
React.createElement(Alert, { title: "Props control", message: "you can control me with a button", dismissible: true, dismissed: alertDismissed, onDismiss: toggleDismissed }),
React.createElement(Button, { onClick: toggleDismissed }, "Toggle me")));
};
export default AlertDemo;
//# sourceMappingURL=alert.js.map