@spothero/ui 17.1.0-beta.5 → 17.1.1

package/dist/components/Accordion/Accordion.stories.js

@@ -1,86 +1,94 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Accordion = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@chakra-ui/react");
-
+var _faker = require("@faker-js/faker");
 var _Text = _interopRequireDefault(require("../Text/Text"));
-
 var _Heading = _interopRequireDefault(require("../Heading/Heading"));
-
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-
+var _createControl = require("storybook/utils/create-control");
 var _index = require("./index");
-
 var _default = {
   title: 'v2/Accordion',
   parameters: {
     removeBaseHtmlClass: true
-  },
-  argTypes: {
-    accordionText: {
-      control: {
-        type: 'text'
-      }
-    },
-    allowMultiple: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    allowToggle: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    index: {
-      control: {
-        type: 'number'
-      }
-    }
   }
 };
 exports.default = _default;
-
-var AccordionTemplate = function AccordionTemplate(_ref) {
-  var accordionText = _ref.accordionText,
-      allowMultiple = _ref.allowMultiple,
-      index = _ref.index,
-      allowToggle = _ref.allowToggle;
-  var multipleOptions = allowMultiple ? {
-    allowMultiple: allowMultiple,
+const AccordionTemplate = _ref => {
+  let {
+    index,
+    variant,
+    allowToggle,
+    accordionText,
+    allowMultiple
+  } = _ref;
+  const multipleOptions = allowMultiple ? {
+    allowMultiple,
     defaultIndex: index
   } : '';
-  var toggleOptions = allowToggle ? {
-    allowToggle: allowToggle
+  const toggleOptions = allowToggle ? {
+    allowToggle
   } : '';
-  return /*#__PURE__*/_react.default.createElement(_Accordion.default, (0, _extends2.default)({}, toggleOptions, multipleOptions), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+  const handleOnClick = () => {
+    // eslint-disable-next-line no-alert
+    alert('Hello World');
+  };
+  return /*#__PURE__*/_react.default.createElement(_index.Accordion, (0, _extends2.default)({}, toggleOptions, multipleOptions, {
+    variant: variant
+  }), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
     as: "h3"
   }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
     flex: "1",
     textAlign: "left"
-  }, "Accordion Item 1 Title"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+  }, "Default Accordion"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
+    as: "h3"
+  }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null), /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    flex: "1",
+    textAlign: "left"
+  }, "Right Aligned Accordion Icon"))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
     as: "h3"
   }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
     flex: "1",
     textAlign: "left"
-  }, "Accordion Item 2 Title"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))));
+  }, "Accordion with Additional Action Button"), /*#__PURE__*/_react.default.createElement(_index.AccordionActionButton, {
+    onClick: handleOnClick
+  }, "Action"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))));
 };
-
-var Accordion = AccordionTemplate.bind({});
+const Accordion = AccordionTemplate.bind({});
 exports.Accordion = Accordion;
+Accordion.argTypes = {
+  accordionText: {
+    control: {
+      type: 'text'
+    }
+  },
+  allowMultiple: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  allowToggle: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  index: {
+    control: {
+      type: 'number'
+    }
+  },
+  ...(0, _createControl.createSelectControl)('variant', ['lined', 'contained'])
+};
 Accordion.args = {
-  accordionText: "You must come along now, Artoo. There's really nothing more we can do. And my joints are freezing up. Don't say thing like that! Of course we'll see Master Luke again. He'll be quite all right, you'll see. Stupid little short-circuit. He'll be quite all right. Sir, all the patrols are in. There's still no contact from Skywalker or Solo. Mistress Leia, Artoo says he's been quite unable to pick up any signals, although he does admit that his own range is far too weak to abandon all hope. Your Highness, there's nothing more we can do tonight. The shield doors must be closed. Close the doors. Yes, sir.",
+  accordionText: _faker.faker.random.words(100),
   allowMultiple: true,
   allowToggle: true,
-  index: [1]
+  index: [0],
+  variant: 'lined'
 };

package/dist/components/Accordion/AccordionActionButton.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@chakra-ui/react");
+var _react2 = _interopRequireWildcard(require("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; }
+const AccordionActionButton = /*#__PURE__*/(0, _react2.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  const handleOnClick = e => {
+    if (onClick) {
+      e.preventDefault();
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick();
+  };
+  return /*#__PURE__*/_react2.default.createElement(_react.Box, {
+    ref: ref,
+    fontSize: "sm",
+    role: "button",
+    onClick: handleOnClick,
+    color: "primary.default"
+  }, children);
+});
+var _default = AccordionActionButton;
+exports.default = _default;

package/dist/components/Accordion/index.js

@@ -1,41 +1,44 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _react.Accordion;
+  }
+});
+Object.defineProperty(exports, "AccordionActionButton", {
+  enumerable: true,
+  get: function () {
+    return _AccordionActionButton.default;
+  }
+});
 Object.defineProperty(exports, "AccordionButton", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _react.AccordionButton;
   }
 });
 Object.defineProperty(exports, "AccordionIcon", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _react.AccordionIcon;
   }
 });
 Object.defineProperty(exports, "AccordionItem", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _react.AccordionItem;
   }
 });
 Object.defineProperty(exports, "AccordionPanel", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _react.AccordionPanel;
   }
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _Accordion.default;
-  }
-});
-
-var _Accordion = _interopRequireDefault(require("./Accordion"));
-
+var _AccordionActionButton = _interopRequireDefault(require("./AccordionActionButton"));
 var _react = require("@chakra-ui/react");

package/dist/components/Accordion/styles/index.js

@@ -1,32 +1,77 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _merge = _interopRequireDefault(require("lodash/merge"));
-
 var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
-
-var _panel = _interopRequireDefault(require("./panel"));
-
-var _button = _interopRequireDefault(require("./button"));
-
-var _container = _interopRequireDefault(require("./container"));
-
-var parts = ['container', 'button', 'panel'];
-var baseStyle = {
-  panel: _panel.default,
-  button: _button.default,
-  container: _container.default
+const baseStyle = {
+  icon: {
+    color: 'primary.default'
+  },
+  button: {
+    display: 'flex',
+    gridGap: 3.5,
+    alignItems: 'center',
+    fontSize: 'sm',
+    fontWeight: 'semibold',
+    _hover: {
+      backgroundColor: 'gray.50'
+    }
+  },
+  container: {
+    borderColor: 'gray.medium'
+  }
+};
+const variants = {
+  lined: {
+    button: {
+      px: 2,
+      py: 3
+    },
+    container: {
+      borderTopWidth: 1,
+      _last: {
+        borderBottomWidth: 1
+      }
+    },
+    panel: {
+      px: 2,
+      py: 3
+    }
+  },
+  contained: {
+    button: {
+      px: 4,
+      py: 3
+    },
+    container: {
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      _first: {
+        borderTopLeftRadius: 4,
+        borderTopRightRadius: 4
+      },
+      _last: {
+        borderBottomLeftRadius: 4,
+        borderBottomRightRadius: 4
+      }
+    },
+    panel: {
+      p: 4,
+      borderColor: 'gray.medium',
+      borderTopWidth: 1
+    }
+  }
+};
+const defaultProps = {
+  variant: 'lined'
 };
-
 var _default = (0, _merge.default)(_theme.default.components.Accordion, {
-  parts: parts,
-  baseStyle: baseStyle
+  variants,
+  baseStyle,
+  defaultProps
 });
-
 exports.default = _default;

package/dist/components/Alert/Alert.js

@@ -1,89 +1,67 @@
 "use strict";
 
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _merge = _interopRequireDefault(require("lodash/merge"));
 var _react2 = require("@chakra-ui/react");
-
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
 var _times = _interopRequireDefault(require("@spothero/icons/times"));
-
 var _filledInfoCircle = _interopRequireDefault(require("@spothero/icons/filled-info-circle"));
-
 var _filledExclamationCircle = _interopRequireDefault(require("@spothero/icons/filled-exclamation-circle"));
-
 var _filledCheckCircle = _interopRequireDefault(require("@spothero/icons/filled-check-circle"));
-
 var _Button = _interopRequireDefault(require("../Button/Button"));
-
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-
-var _styles = require("./styles");
-
-var _excluded = ["status", "title", "buttonProps", "buttonText", "buttonOnBottom", "showDismiss", "onDismissClick", "showIcon", "description"];
-
-var _statusIconMapping;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 statusIconMapping = (_statusIconMapping = {}, (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.WARNING, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.SUCCESS, _filledCheckCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.ERROR, _filledExclamationCircle.default), (0, _defineProperty2.default)(_statusIconMapping, _styles.STATUSES.NEUTRAL, _filledInfoCircle.default), _statusIconMapping);
-var Alert = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var status = _ref.status,
-      title = _ref.title,
-      buttonProps = _ref.buttonProps,
-      buttonText = _ref.buttonText,
-      buttonOnBottom = _ref.buttonOnBottom,
-      showDismiss = _ref.showDismiss,
-      onDismissClick = _ref.onDismissClick,
-      showIcon = _ref.showIcon,
-      description = _ref.description,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var style = (0, _react2.useStyleConfig)('Alert', {
-    'data-status': status
-  });
-  var IconVariant = statusIconMapping[status];
-  return /*#__PURE__*/_react.default.createElement(_react2.Alert, (0, _extends2.default)({
+var _notifications = require("../../theme/base/notifications");
+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; }
+const statusIconMapping = {
+  [_notifications.NOTIFICATION_STATUSES.WARNING]: _filledExclamationCircle.default,
+  [_notifications.NOTIFICATION_STATUSES.SUCCESS]: _filledCheckCircle.default,
+  [_notifications.NOTIFICATION_STATUSES.ERROR]: _filledExclamationCircle.default,
+  [_notifications.NOTIFICATION_STATUSES.NEUTRAL]: _filledInfoCircle.default
+};
+const Alert = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    status,
+    title,
+    buttonProps,
+    buttonText,
+    buttonOnBottom,
+    showDismiss,
+    onDismissClick,
+    showIcon,
+    description,
+    ...props
+  } = _ref;
+  const IconVariant = statusIconMapping[status];
+  // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
+  const style = (0, _merge.default)({
+    ..._theme.default.components.Alert.baseStyle
+  }, _notifications.notificationBaseStyle, (0, _notifications.notificationStatusStyles)(status), (0, _notifications.notificationSizeStyles)(props.size));
+  return /*#__PURE__*/_react.default.createElement(_react2.Alert, (0, _extends2.default)({}, style.container, {
     "data-status": status
   }, props, {
     ref: ref
-  }), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    sx: style.icon,
+  }), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({}, style.icon, {
     as: IconVariant
-  }) : null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
+  })) : null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
     spacing: 0,
     alignItems: "flex-start"
-  }, title ? /*#__PURE__*/_react.default.createElement(_react2.AlertTitle, null, title) : null, description ? /*#__PURE__*/_react.default.createElement(_react2.AlertDescription, null, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
-    sx: style.actionButton,
+  }, title ? /*#__PURE__*/_react.default.createElement(_react2.AlertTitle, style.title, title) : null, description ? /*#__PURE__*/_react.default.createElement(_react2.AlertDescription, style.description, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.actionButton, {
     variant: "tertiary"
   }, buttonProps), buttonText) : null), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
     alignItems: "center",
     marginLeft: "auto"
-  }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({
-    sx: style.actionButton,
+  }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.actionButton, {
     variant: "tertiary"
-  }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react.default.createElement(_Button.default, {
-    sx: style.dismissButton,
+  }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.dismissButton, {
     onClick: onDismissClick
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     width: 3,
     height: "auto",
     as: _times.default

package/dist/components/Alert/Alert.stories.js

@@ -1,63 +1,51 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Alert = void 0;
-
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@chakra-ui/react");
-
-// import {createSelectControl} from 'storybook/utils/create-control';
-// import disableArgs from 'storybook/utils/disable-args';
-// import Component from './Alert';
+var _createControl = require("storybook/utils/create-control");
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _Alert = _interopRequireDefault(require("./Alert"));
 var _default = {
   title: 'v2/Alert',
-  // component: Component,
+  component: _Alert.default,
   parameters: {
     removeBaseHtmlClass: true
   }
 };
 exports.default = _default;
-
-var AlertTemplate = function AlertTemplate(props) {
-  return /*#__PURE__*/_react.default.createElement(_react2.VStack, {
-    alignItems: "flex-start"
-  }, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Alert story currently broken due to issues between current version of storybook, forwardref, and hooks. Updating storybook will likely help."));
-}; // const AlertTemplate = props => (
-//     <VStack alignItems="flex-start">
-//         <Text>Status: Success</Text>
-//         <Component status="success" {...props} />
-//         <Text>Status: Error</Text>
-//         <Component status="error" {...props} />
-//         <Text>Status: Warning</Text>
-//         <Component status="warning" {...props} />
-//         <Text>Status: Neutral</Text>
-//         <Component status="neutral" {...props} />
-//     </VStack>
-// );
-// AlertTemplate.propTypes = {};
-
-
-var Alert = AlertTemplate.bind({}); // Alert.argTypes = {
-//     ...createSelectControl('size', ['sm', 'md', 'lg']),
-//     ...disableArgs(['buttonProps', 'onDismissClick', 'status']),
-// };
-// Alert.args = {
-//     title: 'Hello',
-//     buttonOnBottom: false,
-//     buttonText: 'Action',
-//     description: 'This is an alert.',
-//     buttonProps: {
-//         onClick: () => console.log('Action clicked'),
-//     },
-//     showDismiss: true,
-//     onDismissClick: () => console.log('dismissed'),
-//     showIcon: true,
-//     size: 'md',
-// };
-
-exports.Alert = Alert;
+const AlertTemplate = props => /*#__PURE__*/_react.default.createElement(_react2.VStack, {
+  alignItems: "flex-start"
+}, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Success"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
+  status: "success"
+}, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Error"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
+  status: "error"
+}, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Warning"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
+  status: "warning"
+}, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Neutral"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
+  status: "neutral"
+}, props)));
+const Alert = AlertTemplate.bind({});
+exports.Alert = Alert;
+Alert.argTypes = {
+  ...(0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg']),
+  ...(0, _disableArgs.default)(['buttonProps', 'onDismissClick', 'status'])
+};
+Alert.args = {
+  title: 'Hello',
+  buttonOnBottom: false,
+  buttonText: 'Action',
+  description: 'This is an alert.',
+  buttonProps: {
+    onClick: () => console.log('Action clicked')
+  },
+  showDismiss: true,
+  onDismissClick: () => console.log('dismissed'),
+  showIcon: true,
+  size: 'md'
+};

package/dist/components/Alert/index.js

@@ -1,15 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Alert.default;
   }
 });
-
 var _Alert = _interopRequireDefault(require("./Alert"));