@storybook/addon-interactions 6.4.0-beta.14 → 6.4.0-beta.18

package/dist/cjs/Panel.js

@@ -23,12 +23,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Panel = void 0;
 
-require("core-js/modules/es.array.includes.js");
-
-require("core-js/modules/es.object.assign.js");
-
-require("core-js/modules/es.string.starts-with.js");
-
 require("core-js/modules/es.map.js");
 
 require("core-js/modules/es.object.to-string.js");
@@ -41,12 +35,16 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.object.assign.js");
+
 require("core-js/modules/es.array.slice.js");
 
 require("core-js/modules/es.string.split.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
+require("core-js/modules/es.array.includes.js");
+
 require("core-js/modules/es.string.includes.js");
 
 var _global = _interopRequireDefault(require("global"));
@@ -65,16 +63,12 @@ var _instrumenter = require("@storybook/instrumenter");
 
 var _theming = require("@storybook/theming");
 
-var _polished = require("polished");
-
-var _MatcherResult = require("./components/MatcherResult");
-
-var _MethodCall = require("./components/MethodCall");
-
 var _StatusIcon = require("./components/StatusIcon/StatusIcon");
 
 var _Subnav = require("./components/Subnav/Subnav");
 
+var _Interaction = require("./components/Interaction/Interaction");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -105,93 +99,6 @@ var TabIcon = (0, _theming.styled)(_StatusIcon.StatusIcon)({
   marginLeft: 5
 });
 
-var MethodCallWrapper = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    fontFamily: _theming.typography.fonts.mono,
-    fontSize: _theming.typography.size.s1
-  };
-});
-
-var RowContainer = (0, _theming.styled)('div', {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !['call'].includes(prop);
-  }
-})(function (_ref2) {
-  var theme = _ref2.theme,
-      call = _ref2.call;
-  return Object.assign({
-    display: 'flex',
-    flexDirection: 'column',
-    borderBottom: "1px solid ".concat(theme.appBorderColor),
-    fontFamily: _theming.typography.fonts.base,
-    fontSize: 13
-  }, call.state === _instrumenter.CallStates.ERROR && {
-    backgroundColor: theme.base === 'dark' ? (0, _polished.transparentize)(0.93, theme.color.negative) : theme.background.warning
-  });
-});
-var RowLabel = (0, _theming.styled)('button', {
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !['call'].includes(prop);
-  }
-})(function (_ref3) {
-  var theme = _ref3.theme,
-      disabled = _ref3.disabled,
-      call = _ref3.call;
-  return {
-    display: 'grid',
-    background: 'none',
-    border: 0,
-    gridTemplateColumns: '15px 1fr',
-    alignItems: 'center',
-    minHeight: 40,
-    margin: 0,
-    padding: '8px 15px',
-    textAlign: 'start',
-    cursor: disabled || call.state === _instrumenter.CallStates.ERROR ? 'default' : 'pointer',
-    '&:hover': {
-      background: theme.base === 'dark' ? (0, _polished.transparentize)(0.9, theme.color.secondary) : '#F3FAFF'
-    },
-    '&:focus-visible': {
-      outline: 0,
-      boxShadow: "inset 3px 0 0 0 ".concat(call.state === _instrumenter.CallStates.ERROR ? theme.color.warning : theme.color.secondary),
-      background: call.state === _instrumenter.CallStates.ERROR ? 'transparent' : '#F3FAFF'
-    },
-    '& > div': {
-      opacity: call.state === _instrumenter.CallStates.WAITING ? 0.5 : 1
-    }
-  };
-});
-var RowMessage = (0, _theming.styled)('pre')({
-  margin: 0,
-  padding: '8px 10px 8px 30px',
-  fontSize: _theming.typography.size.s1
-});
-
-var Interaction = function Interaction(_ref4) {
-  var call = _ref4.call,
-      callsById = _ref4.callsById,
-      onClick = _ref4.onClick,
-      isDisabled = _ref4.isDisabled;
-  return /*#__PURE__*/React.createElement(RowContainer, {
-    call: call
-  }, /*#__PURE__*/React.createElement(RowLabel, {
-    call: call,
-    onClick: onClick,
-    disabled: isDisabled
-  }, /*#__PURE__*/React.createElement(_StatusIcon.StatusIcon, {
-    status: call.state
-  }), /*#__PURE__*/React.createElement(MethodCallWrapper, {
-    style: {
-      marginLeft: 6,
-      marginBottom: 1
-    }
-  }, /*#__PURE__*/React.createElement(_MethodCall.MethodCall, {
-    call: call,
-    callsById: callsById
-  }))), call.state === _instrumenter.CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(_MatcherResult.MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
-};
-
 var Panel = function Panel(props) {
   var _useChannel;
 
@@ -212,9 +119,9 @@ var Panel = function Panel(props) {
 
   var calls = React.useRef(new Map());
 
-  var setCall = function setCall(_ref5) {
-    var state = _ref5.state,
-        call = _objectWithoutProperties(_ref5, ["state"]);
+  var setCall = function setCall(_ref) {
+    var state = _ref.state,
+        call = _objectWithoutProperties(_ref, ["state"]);
 
     return calls.current.set(call.id, call);
   };
@@ -224,18 +131,18 @@ var Panel = function Panel(props) {
       log = _React$useState8[0],
       setLog = _React$useState8[1];
 
-  var interactions = log.map(function (_ref6) {
-    var callId = _ref6.callId,
-        state = _ref6.state;
+  var interactions = log.map(function (_ref2) {
+    var callId = _ref2.callId,
+        state = _ref2.state;
     return Object.assign({}, calls.current.get(callId), {
       state: state
     });
   });
   var endRef = React.useRef();
   React.useEffect(function () {
-    var observer = new _global.default.window.IntersectionObserver(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 1),
-          end = _ref8[0];
+    var observer = new _global.default.window.IntersectionObserver(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 1),
+          end = _ref4[0];
 
       return setScrollTarget(end.isIntersecting ? undefined : end.target);
     }, {
@@ -246,8 +153,8 @@ var Panel = function Panel(props) {
       return observer.disconnect();
     };
   }, []);
-  var emit = (0, _api.useChannel)((_useChannel = {}, _defineProperty(_useChannel, _instrumenter.EVENTS.CALL, setCall), _defineProperty(_useChannel, _instrumenter.EVENTS.SYNC, setLog), _defineProperty(_useChannel, _instrumenter.EVENTS.LOCK, setLock), _defineProperty(_useChannel, _coreEvents.STORY_RENDER_PHASE_CHANGED, function (_ref9) {
-    var newPhase = _ref9.newPhase;
+  var emit = (0, _api.useChannel)((_useChannel = {}, _defineProperty(_useChannel, _instrumenter.EVENTS.CALL, setCall), _defineProperty(_useChannel, _instrumenter.EVENTS.SYNC, setLog), _defineProperty(_useChannel, _instrumenter.EVENTS.LOCK, setLock), _defineProperty(_useChannel, _coreEvents.STORY_RENDER_PHASE_CHANGED, function (_ref5) {
+    var newPhase = _ref5.newPhase;
     setLock(false);
     setPlaying(newPhase === 'playing');
   }), _useChannel));
@@ -318,7 +225,7 @@ var Panel = function Panel(props) {
     },
     onScrollToEnd: scrollTarget && scrollToTarget
   }), interactions.map(function (call) {
-    return /*#__PURE__*/React.createElement(Interaction, {
+    return /*#__PURE__*/React.createElement(_Interaction.Interaction, {
       key: call.id,
       call: call,
       callsById: calls.current,

package/dist/cjs/components/Interaction/Interaction.js

@@ -0,0 +1,168 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Interaction = void 0;
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.string.starts-with.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _instrumenter = require("@storybook/instrumenter");
+
+var _theming = require("@storybook/theming");
+
+var _polished = require("polished");
+
+var _MatcherResult = require("../MatcherResult");
+
+var _MethodCall = require("../MethodCall");
+
+var _StatusIcon = require("../StatusIcon/StatusIcon");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var MethodCallWrapper = _theming.styled.div(function () {
+  return {
+    fontFamily: _theming.typography.fonts.mono,
+    fontSize: _theming.typography.size.s1
+  };
+});
+
+var RowContainer = (0, _theming.styled)('div', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['call'].includes(prop);
+  }
+})(function (_ref) {
+  var theme = _ref.theme,
+      call = _ref.call;
+  return Object.assign({
+    display: 'flex',
+    flexDirection: 'column',
+    borderBottom: "1px solid ".concat(theme.appBorderColor),
+    fontFamily: _theming.typography.fonts.base,
+    fontSize: 13
+  }, call.state === _instrumenter.CallStates.ERROR && {
+    backgroundColor: theme.base === 'dark' ? (0, _polished.transparentize)(0.93, theme.color.negative) : theme.background.warning
+  });
+});
+var RowLabel = (0, _theming.styled)('button', {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['call'].includes(prop);
+  }
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      disabled = _ref2.disabled,
+      call = _ref2.call;
+  return {
+    display: 'grid',
+    background: 'none',
+    border: 0,
+    gridTemplateColumns: '15px 1fr',
+    alignItems: 'center',
+    minHeight: 40,
+    margin: 0,
+    padding: '8px 15px',
+    textAlign: 'start',
+    cursor: disabled || call.state === _instrumenter.CallStates.ERROR ? 'default' : 'pointer',
+    '&:hover': {
+      background: theme.background.hoverable
+    },
+    '&:focus-visible': {
+      outline: 0,
+      boxShadow: "inset 3px 0 0 0 ".concat(call.state === _instrumenter.CallStates.ERROR ? theme.color.warning : theme.color.secondary),
+      background: call.state === _instrumenter.CallStates.ERROR ? 'transparent' : theme.background.hoverable
+    },
+    '& > div': {
+      opacity: call.state === _instrumenter.CallStates.WAITING ? 0.5 : 1
+    }
+  };
+});
+var RowMessage = (0, _theming.styled)('pre')({
+  margin: 0,
+  padding: '8px 10px 8px 30px',
+  fontSize: _theming.typography.size.s1
+});
+
+var Interaction = function Interaction(_ref3) {
+  var call = _ref3.call,
+      callsById = _ref3.callsById,
+      onClick = _ref3.onClick,
+      isDisabled = _ref3.isDisabled;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isHovered = _React$useState2[0],
+      setIsHovered = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(RowContainer, {
+    call: call
+  }, /*#__PURE__*/React.createElement(RowLabel, {
+    call: call,
+    onClick: onClick,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    disabled: isDisabled
+  }, /*#__PURE__*/React.createElement(_StatusIcon.StatusIcon, {
+    status: isHovered ? _instrumenter.CallStates.ACTIVE : call.state
+  }), /*#__PURE__*/React.createElement(MethodCallWrapper, {
+    style: {
+      marginLeft: 6,
+      marginBottom: 1
+    }
+  }, /*#__PURE__*/React.createElement(_MethodCall.MethodCall, {
+    call: call,
+    callsById: callsById
+  }))), call.state === _instrumenter.CallStates.ERROR && call.exception && (call.exception.message.startsWith('expect(') ? /*#__PURE__*/React.createElement(_MatcherResult.MatcherResult, call.exception) : /*#__PURE__*/React.createElement(RowMessage, null, call.exception.message)));
+};
+
+exports.Interaction = Interaction;

package/dist/cjs/components/Interaction/Interaction.stories.js

@@ -0,0 +1,140 @@
+"use strict";
+
+require("core-js/modules/es.promise.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Hovered = exports.Disabled = exports.Done = exports.Failed = exports.Waiting = exports.Active = exports.default = void 0;
+
+require("regenerator-runtime/runtime.js");
+
+require("core-js/modules/es.map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _jest = require("@storybook/jest");
+
+var _instrumenter = require("@storybook/instrumenter");
+
+var _testingLibrary = require("@storybook/testing-library");
+
+var _Interaction = require("./Interaction");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var _default = {
+  title: 'Addons/Interactions/Interaction',
+  component: _Interaction.Interaction,
+  args: {
+    callsById: new Map(),
+    isDisabled: false
+  }
+};
+exports.default = _default;
+
+var getCallMock = function getCallMock(state) {
+  var defaultData = {
+    id: 'addons-interactions-accountform--standard-email-filled [3] change',
+    path: ['fireEvent'],
+    method: 'change',
+    storyId: 'addons-interactions-accountform--standard-email-filled',
+    args: [{
+      __callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
+      retain: false
+    }, {
+      target: {
+        value: 'michael@chromatic.com'
+      }
+    }],
+    interceptable: true,
+    retain: false,
+    state: state
+  };
+  var overrides = _instrumenter.CallStates.ERROR ? {
+    exception: {
+      callId: '',
+      stack: '',
+      message: "Things didn't work!"
+    }
+  } : {};
+  return Object.assign({}, defaultData, overrides);
+};
+
+var Active = {
+  args: {
+    call: getCallMock(_instrumenter.CallStates.ACTIVE)
+  }
+};
+exports.Active = Active;
+var Waiting = {
+  args: {
+    call: getCallMock(_instrumenter.CallStates.WAITING)
+  }
+};
+exports.Waiting = Waiting;
+var Failed = {
+  args: {
+    call: getCallMock(_instrumenter.CallStates.ERROR)
+  }
+};
+exports.Failed = Failed;
+var Done = {
+  args: {
+    call: getCallMock(_instrumenter.CallStates.DONE)
+  }
+};
+exports.Done = Done;
+var Disabled = {
+  args: Object.assign({}, Done.args, {
+    isDisabled: true
+  })
+};
+exports.Disabled = Disabled;
+var Hovered = Object.assign({}, Done, {
+  parameters: {
+    // Set light theme to avoid stacked theme in chromatic
+    theme: 'light'
+  },
+  play: function () {
+    var _play = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
+      var canvasElement, canvas;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              canvasElement = _ref.canvasElement;
+              canvas = (0, _testingLibrary.within)(canvasElement);
+              _context.next = 4;
+              return _testingLibrary.userEvent.hover(canvas.getByRole('button'));
+
+            case 4:
+              _context.next = 6;
+              return (0, _jest.expect)(canvas.getByTestId('icon-active')).not.toBeNull();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    function play(_x) {
+      return _play.apply(this, arguments);
+    }
+
+    return play;
+  }()
+});
+exports.Hovered = Hovered;

package/dist/cjs/components/StatusIcon/StatusIcon.js

@@ -42,6 +42,7 @@ var StatusIcon = function StatusIcon(_ref2) {
   var status = _ref2.status;
   var icon = (_CallStates$DONE$Call2 = {}, _defineProperty(_CallStates$DONE$Call2, _instrumenter.CallStates.DONE, 'check'), _defineProperty(_CallStates$DONE$Call2, _instrumenter.CallStates.ERROR, 'stopalt'), _defineProperty(_CallStates$DONE$Call2, _instrumenter.CallStates.ACTIVE, 'play'), _defineProperty(_CallStates$DONE$Call2, _instrumenter.CallStates.WAITING, 'circle'), _CallStates$DONE$Call2)[status];
   return /*#__PURE__*/_react.default.createElement(StyledStatusIcon, {
+    "data-testid": "icon-".concat(status),
     status: status,
     icon: icon
   });

package/dist/cjs/components/Subnav/Subnav.js

@@ -13,8 +13,6 @@ var _instrumenter = require("@storybook/instrumenter");
 
 var _theming = require("@storybook/theming");
 
-var _polished = require("polished");
-
 var _StatusBadge = require("../StatusBadge/StatusBadge");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -61,7 +59,7 @@ var StyledIconButton = (0, _theming.styled)(StyledButton)(function (_ref4) {
     margin: '0 3px',
     '&:not(:disabled)': {
       '&:hover,&:focus-visible': {
-        background: (0, _polished.transparentize)(0.9, theme.color.secondary)
+        background: theme.background.hoverable
       }
     }
   };