@aegov/design-system-react/dist/components/Toast/Toast.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.WithDescription = exports.WithAction = exports.Error = exports.Default = void 0;
var React = _interopRequireWildcard(require("react"));
var _Toast = require("./Toast");
var RadixToast = _interopRequireWildcard(require("@radix-ui/react-toast"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var _default = exports.default = {
  title: 'Components/Toast',
  component: _Toast.Toast,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered'
  },
  argTypes: {
    duration: {
      control: 'number',
      description: 'Duration in milliseconds before the toast disappears'
    },
    children: {
      control: 'text',
      description: 'The content of the toast'
    }
  }
};
const Template = args => {
  const [showToast, setShowToast] = React.useState(false);
  const handleShowToast = () => {
    setShowToast(false);
    setTimeout(() => {
      setShowToast(true);
    }, 100);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "flex flex-col items-center gap-4"
  }, /*#__PURE__*/React.createElement("button", {
    onClick: handleShowToast,
    className: "px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors"
  }, "Show Toast"), /*#__PURE__*/React.createElement(_Toast.Toast, _extends({}, args, {
    showToast: showToast
  })));
};
const Default = exports.Default = Template.bind({});
Default.args = {
  children: /*#__PURE__*/React.createElement(RadixToast.Title, {
    className: "text-gray-900 font-semibold text-sm"
  }, "Simple toast message"),
  duration: 5000
};
const WithDescription = exports.WithDescription = Template.bind({});
WithDescription.args = {
  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadixToast.Title, {
    className: "text-gray-900 font-semibold text-sm mb-1"
  }, "File Deleted"), /*#__PURE__*/React.createElement(RadixToast.Description, {
    className: "text-gray-600 text-sm"
  }, "The file has been moved to trash.")),
  duration: 5000
};
const WithAction = exports.WithAction = Template.bind({});
WithAction.args = {
  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadixToast.Title, {
    className: "text-gray-900 font-semibold text-sm mb-1"
  }, "Changes saved"), /*#__PURE__*/React.createElement(RadixToast.Description, {
    className: "text-gray-600 text-sm mb-3"
  }, "Your changes have been saved successfully."), /*#__PURE__*/React.createElement(RadixToast.Action, {
    altText: "Undo",
    className: "inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors",
    onClick: () => console.log('Undo clicked')
  }, "Undo")),
  duration: 5000
};
const Error = exports.Error = Template.bind({});
Error.args = {
  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadixToast.Title, {
    className: "text-gray-900 font-semibold text-sm mb-1"
  }, "Error"), /*#__PURE__*/React.createElement(RadixToast.Description, {
    className: "text-gray-600 text-sm mb-3"
  }, "Something went wrong. Please try again."), /*#__PURE__*/React.createElement(RadixToast.Action, {
    altText: "Retry",
    className: "inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors",
    onClick: () => console.log('Retry clicked')
  }, "Retry")),
  duration: 6000
};