@cimpress/react-components
Version:
React components to support the MCP styleguide
24 lines • 2.18 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("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
React.createElement(Alert, { title: "Title: Dismissible alert", message: "There is a button on the right to 'hide' this alert", dismissible: true })),
React.createElement("div", { className: "col-md-6" },
React.createElement(Alert, { title: "Title: Non-dismissible alert", message: "The button on the right to 'hide' this alert is not shown", dismissible: false }))),
React.createElement("div", { className: "row" }, ['danger', 'info'].map(status => (React.createElement("div", { key: status, className: "col-md-6" },
React.createElement(Alert, { status: status, message: `This is '${status}' alert`, dismissible: true }))))),
React.createElement("div", { className: "row" }, ['warning', 'success'].map(status => (React.createElement("div", { key: status, className: "col-md-6" },
React.createElement(Alert, { status: status, message: `This is '${status}' alert`, dismissible: true }))))),
React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-6" },
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("div", { className: "col-md-6" },
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