@spothero/ui 17.1.0-beta.5 → 17.1.1

package/dist/components/Toast/Toast.stories.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Toast = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Alert = _interopRequireDefault(require("../Alert/Alert"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _react2 = require("@chakra-ui/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = {
+  title: 'v2/Toast',
+  component: _Alert.default,
+  parameters: {
+    importBy: 'useToast',
+    removeBaseHtmlClass: true,
+    chakraLink: 'https://chakra-ui.com/docs/components/toast'
+  }
+};
+exports.default = _default;
+const Template = props => {
+  const toast = (0, _react2.useToast)();
+  const addToast = () => {
+    const toastRef = /*#__PURE__*/(0, _react.createRef)();
+    const close = () => {
+      if (toastRef.current) {
+        toast.close(toastRef.current);
+      }
+    };
+    toastRef.current = toast({
+      position: 'bottom-left',
+      duration: 5000,
+      render: () => /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({}, props, {
+        onDismissClick: close
+      }))
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
+    alignItems: "flex-start",
+    marginBottom: 4
+  }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Note that Toast is not actually a component in and of itself. The \"Toast\" in these examples is created by using the useToast hook provided by Chakra and then using our Alert component as the custom component that is is rendered.")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: addToast
+  }, "Show Toast"));
+};
+const Toast = Template.bind({});
+exports.Toast = Toast;
+Toast.argTypes = {
+  buttonProps: {
+    table: {
+      disable: true
+    }
+  },
+  buttonText: {
+    table: {
+      disable: true
+    }
+  },
+  buttonOnBottom: {
+    table: {
+      disable: true
+    }
+  },
+  onDismissClick: {
+    table: {
+      disable: true
+    }
+  }
+};
+Toast.args = {
+  title: 'Default Title',
+  description: 'This is a basic description',
+  status: 'neutral',
+  showDismiss: true,
+  showIcon: true
+};