@aegov/design-system-react/dist/components/Alert/Alert.stories.js

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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithTitle = exports.WithDismiss = exports.WithAction = exports.WarningWithIcon = exports.Warning = exports.SuccessWithIcon = exports.Success = exports.Solid = exports.InfoWithIcon = exports.Info = exports.ErrorWithIcon = exports.Error = exports.DismissibleWarning = exports.DismissibleSuccess = exports.DismissibleInfo = exports.DismissibleError = exports.Complex = void 0;
var _react = _interopRequireDefault(require("react"));
var _Alert = require("./Alert");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Alert',
  component: _Alert.Alert,
  parameters: {
    layout: 'padded'
  },
  argTypes: {
    variant: {
      control: 'select',
      options: ['info', 'warning', 'success', 'error']
    },
    size: {
      control: 'select',
      options: ['sm', 'base', 'lg']
    },
    style: {
      control: 'select',
      options: ['soft', 'solid']
    },
    showIcon: {
      control: 'boolean'
    }
  }
};
const Template = args => /*#__PURE__*/_react.default.createElement(_Alert.Alert, args);
const Info = exports.Info = Template.bind({});
Info.args = {
  variant: 'info',
  children: "The conference starts at 10:00 AM in Hall B. Don't be late!",
  showIcon: false
};
const Warning = exports.Warning = Template.bind({});
Warning.args = {
  variant: 'warning',
  children: 'Your password will expire in 3 days. Consider updating it now.',
  showIcon: false
};
const Success = exports.Success = Template.bind({});
Success.args = {
  variant: 'success',
  children: 'Your payment was processed successfully. Thank you!',
  showIcon: false
};
const Error = exports.Error = Template.bind({});
Error.args = {
  variant: 'error',
  children: 'Unable to connect to the server. Please try again later or contact support.',
  showIcon: false
};
const InfoWithIcon = exports.InfoWithIcon = Template.bind({});
InfoWithIcon.args = {
  variant: 'info',
  children: "The conference starts at 10:00 AM in Hall B. Don't be late!"
};
const WarningWithIcon = exports.WarningWithIcon = Template.bind({});
WarningWithIcon.args = {
  variant: 'warning',
  children: 'Your password will expire in 3 days. Consider updating it now.'
};
const SuccessWithIcon = exports.SuccessWithIcon = Template.bind({});
SuccessWithIcon.args = {
  variant: 'success',
  children: 'Your payment was processed successfully. Thank you!'
};
const ErrorWithIcon = exports.ErrorWithIcon = Template.bind({});
ErrorWithIcon.args = {
  variant: 'error',
  children: 'Unable to connect to the server. Please try again later or contact support.'
};
const WithTitle = exports.WithTitle = Template.bind({});
WithTitle.args = {
  variant: 'error',
  title: 'There were 3 errors that were encountered regarding your registration',
  children: /*#__PURE__*/_react.default.createElement("ul", {
    className: "list-disc mt-3 space-y-2 ps-4"
  }, /*#__PURE__*/_react.default.createElement("li", null, "Your password must be at least 8 characters"), /*#__PURE__*/_react.default.createElement("li", null, "Your password must include at least 1 numeric value"), /*#__PURE__*/_react.default.createElement("li", null, "Your last name is blank. Kindly add your last name to proceed with the registration."))
};
const WithAction = exports.WithAction = Template.bind({});
WithAction.args = {
  variant: 'warning',
  children: 'Your password will expire in 3 days. Consider updating it now.',
  action: {
    text: 'Change password',
    href: '#'
  }
};
const WithDismiss = exports.WithDismiss = Template.bind({});
WithDismiss.args = {
  variant: 'info',
  children: "The conference starts at 10:00 AM in Hall B. Don't be late!",
  onDismiss: () => console.log('Alert dismissed')
};
const Solid = exports.Solid = Template.bind({});
Solid.args = {
  variant: 'error',
  style: 'solid',
  children: 'Unable to connect to the server. Please try again later or contact support.'
};

// export const Large = Template.bind({});
// Large.args = {
//   variant: 'success',
//   size: 'lg',
//   children: 'Your payment was processed successfully. Thank you!',
// };

// export const Small = Template.bind({});
// Small.args = {
//   variant: 'info',
//   size: 'sm',
//   children: 'The conference starts at 10:00 AM in Hall B.',
// };

const Complex = exports.Complex = Template.bind({});
Complex.args = {
  variant: 'error',
  title: 'Oh snap! there seems to be a road block',
  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "So this is embarrassing, but looks that we have come across an unexpected situation causing a system error. We have logged this event and will be looking into fixing this."), /*#__PURE__*/_react.default.createElement("p", {
    className: "mt-2"
  }, "In the meantime, you may also report this as an error using our feedback system."), /*#__PURE__*/_react.default.createElement("div", {
    className: "mt-6 flex items-center space-x-6"
  }, /*#__PURE__*/_react.default.createElement("a", {
    href: "#",
    className: "font-bold underline underline-offset-1 hover:underline hover:underline-offset-2"
  }, "Report this error"), /*#__PURE__*/_react.default.createElement("a", {
    href: "#",
    className: "font-bold underline underline-offset-1 hover:underline hover:underline-offset-2"
  }, "Capture a screenshot")))
};
const DismissibleInfo = exports.DismissibleInfo = Template.bind({});
DismissibleInfo.args = {
  variant: 'info',
  children: /*#__PURE__*/_react.default.createElement("p", null, "This is a warning that can be closed. Please take necessary action if required."),
  onDismiss: () => alert('Alert dismissed')
};
const DismissibleError = exports.DismissibleError = Template.bind({});
DismissibleError.args = {
  variant: 'error',
  children: /*#__PURE__*/_react.default.createElement("p", null, "This is a warning that can be closed. Please take necessary action if required."),
  onDismiss: () => alert('Alert dismissed')
};
const DismissibleSuccess = exports.DismissibleSuccess = Template.bind({});
DismissibleSuccess.args = {
  variant: 'success',
  children: /*#__PURE__*/_react.default.createElement("p", null, "This is a warning that can be closed. Please take necessary action if required."),
  onDismiss: () => alert('Alert dismissed')
};
const DismissibleWarning = exports.DismissibleWarning = Template.bind({});
DismissibleWarning.args = {
  variant: 'warning',
  children: /*#__PURE__*/_react.default.createElement("p", null, "This is a warning that can be closed. Please take necessary action if required."),
  onDismiss: () => alert('Alert dismissed')
};