@aegov/design-system-react
Version:
A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.
93 lines (92 loc) • 4.56 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Success = exports.Simple = exports.Alert = void 0;
var _react = _interopRequireDefault(require("react"));
var _Modal = _interopRequireDefault(require("./Modal"));
var _Button = _interopRequireDefault(require("../Button/Button"));
var _react2 = require("@phosphor-icons/react");
var _reactDialog = require("@radix-ui/react-dialog");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
title: 'Components/Modal',
component: _Modal.default,
parameters: {
layout: 'centered'
}
};
const Simple = () => {
return /*#__PURE__*/_react.default.createElement(_Modal.default, {
title: "Hello",
trigger: /*#__PURE__*/_react.default.createElement(_Button.default, {
variant: "solid"
}, "Open Modal")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "space-y-4"
}, /*#__PURE__*/_react.default.createElement("p", {
className: "text-gray-600"
}, "To close the modal, you can use any of the following methods:"), /*#__PURE__*/_react.default.createElement("ul", {
className: "list-decimal space-y-2 ml-4 text-gray-600"
}, /*#__PURE__*/_react.default.createElement("li", null, "Press the \"ESC\" key on your keyboard"), /*#__PURE__*/_react.default.createElement("li", null, "Click the close button"), /*#__PURE__*/_react.default.createElement("li", null, "Click outside the modal")), /*#__PURE__*/_react.default.createElement("div", {
className: "flex justify-end gap-3 mt-6"
}, /*#__PURE__*/_react.default.createElement(_reactDialog.Close, {
asChild: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Close")))));
};
exports.Simple = Simple;
const Success = () => {
return /*#__PURE__*/_react.default.createElement(_Modal.default, {
size: "sm",
trigger: /*#__PURE__*/_react.default.createElement(_Button.default, {
variant: "solid"
}, "Success Modal")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "text-center"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"
}, /*#__PURE__*/_react.default.createElement(_react2.Check, {
className: "w-8 h-8 text-green-600"
})), /*#__PURE__*/_react.default.createElement("h3", {
className: "mt-4 text-lg font-semibold text-gray-900"
}, "Payment successful"), /*#__PURE__*/_react.default.createElement("p", {
className: "mt-2 text-gray-600"
}, "Your payment has been successfully processed"), /*#__PURE__*/_react.default.createElement(_reactDialog.Close, {
asChild: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
className: "w-full mt-6",
variant: "solid"
}, "Continue"))));
};
exports.Success = Success;
const Alert = () => {
return /*#__PURE__*/_react.default.createElement(_Modal.default, {
variant: "danger",
trigger: /*#__PURE__*/_react.default.createElement(_Button.default, {
variant: "outline"
}, "Alert Modal")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "sm:flex sm:items-start"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0"
}, /*#__PURE__*/_react.default.createElement(_react2.Warning, {
className: "h-8 w-8 text-red-600"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left rtl:text-right rtl:sm:ml-0 rtl:sm:mr-4"
}, /*#__PURE__*/_react.default.createElement("h3", {
className: "text-lg font-semibold text-gray-900"
}, "Deactivate account"), /*#__PURE__*/_react.default.createElement("p", {
className: "mt-2 text-gray-600"
}, "Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone."))), /*#__PURE__*/_react.default.createElement("div", {
className: "mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
}, /*#__PURE__*/_react.default.createElement(_reactDialog.Close, {
asChild: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
variant: "soft"
}, "Cancel")), /*#__PURE__*/_react.default.createElement(_reactDialog.Close, {
asChild: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
variant: "solid"
}, "Deactivate"))));
};
exports.Alert = Alert;