@pingux/astro 1.42.1 → 1.42.2-alpha.0

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -36,7 +36,7 @@ var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
 
 var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
 
-var _index = require("../index");
+var _ = require("../");
 
 var _hooks = require("../hooks");
 
@@ -173,7 +173,8 @@ var sx = {
   },
   listElement: {
     wrapper: {
-      minHeight: '60px'
+      minHeight: '60px',
+      pl: '14px'
     },
     iconWrapper: {
       mr: 'auto',
@@ -187,7 +188,7 @@ var sx = {
     avatar: {
       width: '25px',
       height: '25px',
-      mr: 'md'
+      mr: '14px'
     },
     title: {
       alignSelf: 'start',
@@ -200,69 +201,127 @@ var sx = {
       alignSelf: 'start'
     },
     menuWrapper: {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      pr: '4px'
     }
   }
 };
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
+      isHoverable = _ref.isHoverable,
       onClosePanel = _ref.onClosePanel;
-  return (0, _react2.jsx)(_index.Box, {
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      mousePosition = _useState4[0],
+      setMousePosition = _useState4[1];
+
+  var listItemRef = (0, _react.useRef)();
+
+  var handleMenuHoverEnd = function handleMenuHoverEnd() {
+    var currentPositionX = mousePosition.currentPositionX,
+        currentPositionY = mousePosition.currentPositionY;
+
+    var _listItemRef$current$ = listItemRef.current.getBoundingClientRect(),
+        height = _listItemRef$current$.height,
+        right = _listItemRef$current$.right,
+        top = _listItemRef$current$.top;
+
+    var hasMovedBackToRow = currentPositionY < top + height && currentPositionX < right;
+
+    if (hasMovedBackToRow) {
+      setIsHovered(true);
+      return;
+    }
+
+    setIsHovered(false);
+  };
+
+  var handleMouseMove = function handleMouseMove(e) {
+    setMousePosition({
+      currentPositionX: e.clientX,
+      currentPositionY: e.clientY
+    });
+  };
+
+  var handleHoveEnd = function handleHoveEnd() {
+    setIsHovered(false);
+  };
+
+  var handleHoveStart = function handleHoveStart() {
+    setIsHovered(true);
+  };
+
+  return (0, _react2.jsx)(_.ListItem, {
+    isHovered: isHoverable && isHovered,
     isRow: true,
+    onHoverEnd: handleHoveEnd,
+    onHoverStart: handleHoveStart,
+    onMouseMove: handleMouseMove,
+    ref: listItemRef,
     sx: sx.listElement.wrapper
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_.Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: item.avatar,
     size: "md",
     sx: sx.listElement.icon
-  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+  }), (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
-  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
+  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_.Text, {
     variant: "subtitle",
     sx: sx.listElement.subtitle
-  }, item.email))), (0, _react2.jsx)(_index.Box, {
+  }, item.email))), (0, _react2.jsx)(_.Box, {
     isRow: true,
     sx: sx.listElement.menuWrapper
-  }, (0, _react2.jsx)(_index.SwitchField, {
+  }, (0, _react2.jsx)(_.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
     alignSelf: "center",
     mr: "sm"
-  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
+  }), (0, _react2.jsx)(_.PopoverMenu, null, (0, _react2.jsx)(_.IconButton, {
     "aria-label": "more icon button",
     mr: onClosePanel ? 'sm' : 0
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: _MoreVertIcon["default"],
     size: "md"
-  })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_collections.Item, {
+  })), (0, _react2.jsx)(_.Menu, {
+    onAction: handleHoveEnd,
+    onHoverEnd: handleMenuHoverEnd,
+    onHoverStart: handleHoveStart
+  }, (0, _react2.jsx)(_collections.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
     key: "disable"
   }, "Disable user"), (0, _react2.jsx)(_collections.Item, {
     key: "delete"
-  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
+  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_.IconButton, {
     "aria-label": "close icon button",
     onPress: onClosePanel
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     size: "sm",
     icon: _CloseIcon["default"]
   }))));
 };
 
 var Default = function Default() {
-  var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedItemId = _useState2[0],
-      setSelectedItemId = _useState2[1];
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      selectedItemId = _useState6[0],
+      setSelectedItemId = _useState6[1];
 
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      selectedKeys = _useState4[0],
-      setSelectedKeys = _useState4[1];
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedKeys = _useState8[0],
+      setSelectedKeys = _useState8[1];
 
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
       panelState = _useOverlayPanelState.state,
@@ -290,62 +349,65 @@ var Default = function Default() {
     }
   };
 
-  return (0, _react2.jsx)(_index.Box, {
-    sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  var title = (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_.Text, {
     fontSize: "xx",
     fontWeight: 3,
     fontColor: "text.primary"
-  }, heading), (0, _react2.jsx)(_index.IconButton, {
+  }, heading), (0, _react2.jsx)(_.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
     variant: "inverted"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_.Icon, {
     icon: _PlusIcon["default"],
     size: "sm"
-  }))), (0, _react2.jsx)(_index.Text, {
+  }))), (0, _react2.jsx)(_.Text, {
     fontSize: "sm",
     color: "text.secondary",
     fontWeight: 0,
     width: "800px"
-  }, description, (0, _react2.jsx)(_index.Link, {
+  }, description, (0, _react2.jsx)(_.Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
       fontSize: '13px'
     }
-  }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
+  }, " Learn more")));
+  return (0, _react2.jsx)(_.Box, {
+    sx: sx.wrapper
+  }, title, (0, _react2.jsx)(_.SearchField, {
     position: "fixed",
     mb: "lg",
     mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
-  }), (0, _react2.jsx)(_index.Separator, {
+  }), (0, _react2.jsx)(_.Separator, {
     margin: 0
-  }), (0, _react2.jsx)(_index.ListView, {
+  }), (0, _react2.jsx)(_.ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
     ref: panelTriggerRef,
-    selectedKeys: selectedKeys
+    selectedKeys: selectedKeys,
+    isHoverable: false
   }, function (item) {
     return (0, _react2.jsx)(_collections.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: true,
+      hasSeparator: item.hasSeparator,
       listItemProps: {
-        pl: 15,
-        minHeight: 75
+        minHeight: 75,
+        padding: 1
       }
     }, (0, _react2.jsx)(ListElement, {
+      isHoverable: true,
       item: item
     }));
-  }), (0, _react2.jsx)(_index.OverlayPanel, {
+  }), (0, _react2.jsx)(_.OverlayPanel, {
     isOpen: panelState.isOpen,
     state: panelState,
     triggerRef: panelTriggerRef,
@@ -355,17 +417,17 @@ var Default = function Default() {
     contain: true,
     restoreFocus: true,
     autoFocus: true
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_.Box, {
     sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
-  })), (0, _react2.jsx)(_index.Separator, {
+  })), (0, _react2.jsx)(_.Separator, {
     margin: 0,
     sx: sx.separator
-  }), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_.Box, {
     sx: sx.tabsWrapper
-  }, (0, _react2.jsx)(_index.Tabs, {
+  }, (0, _react2.jsx)(_.Tabs, {
     tabListProps: {
       justifyContent: 'center'
     },
@@ -374,43 +436,43 @@ var Default = function Default() {
         position: 'relative'
       }
     }
-  }, (0, _react2.jsx)(_index.Tab, {
+  }, (0, _react2.jsx)(_.Tab, {
     title: "Profile"
-  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
+  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.IconButton, {
     variant: "inverted",
     "aria-label": "pencil icon button",
     sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
-  })), (0, _react2.jsx)(_index.Text, {
+  })), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
+  }, "Full Name"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "First Name"), (0, _react2.jsx)(_index.Text, {
+  }, "First Name"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].firstName), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
+  }, "Last Name"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+  }, items[selectedItemId].lastName), (0, _react2.jsx)(_.Text, {
     sx: sx.itemLabel,
     variant: "base"
-  }, "Email"), (0, _react2.jsx)(_index.Text, {
+  }, "Email"), (0, _react2.jsx)(_.Text, {
     sx: sx.itemValue,
     variant: "base"
-  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
+  }, items[selectedItemId].email))), (0, _react2.jsx)(_.Tab, {
     title: "Group Memberships"
-  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
+  }, (0, _react2.jsx)(_.Text, null, "Group Memberships")), (0, _react2.jsx)(_.Tab, {
     title: "Account Info"
-  }, (0, _react2.jsx)(_index.Text, null, "Account Info"))))))));
+  }, (0, _react2.jsx)(_.Text, null, "Account Info"))))))));
 };
 
 exports.Default = Default;

package/lib/cjs/styles/variants/boxes.js

@@ -88,7 +88,10 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'accent.99',
   outline: 'none',
   '&.is-selected': {
-    bg: 'white'
+    bg: 'white',
+    '& li': {
+      bg: 'white'
+    }
   },
   '&.is-hovered': {
     bg: 'white',

package/lib/cjs/utils/devUtils/props/hoverProps.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.onHoverPropTypes = exports.onHoverArgTypes = exports.baseDocSettings = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var descriptions = {
+  onHoverStart: 'Handler that is called when a hover interaction starts.',
+  onHoverEnd: 'Handler that is called when a hover interaction ends.',
+  onHoverChange: 'Handler that is called when the hover state changes.'
+};
+var baseDocSettings = {
+  type: {
+    summary: 'func'
+  },
+  control: {
+    type: null
+  },
+  table: {
+    category: 'Hover Handlers'
+  }
+};
+exports.baseDocSettings = baseDocSettings;
+var onHoverArgTypes = {
+  'onHoverStart': _objectSpread({
+    description: descriptions.onHoverStart
+  }, baseDocSettings),
+  'onHoverEnd': _objectSpread({
+    description: descriptions.onHoverEnd
+  }, baseDocSettings),
+  'onHoverChange': _objectSpread({
+    description: descriptions.onHoverChange
+  }, baseDocSettings)
+};
+exports.onHoverArgTypes = onHoverArgTypes;
+var onHoverPropTypes = {
+  onHoverStart: _propTypes["default"].func,
+  onHoverEnd: _propTypes["default"].func,
+  onHoverChange: _propTypes["default"].func
+};
+exports.onHoverPropTypes = onHoverPropTypes;

package/lib/components/ListItem/ListItem.js

@@ -1,26 +1,48 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "isSelected"];
+var _excluded = ["children", "className", "isHovered", "isSelected", "onHoverChange", "onHoverEnd", "onHoverStart"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useHover } from '@react-aria/interactions';
 import Box from '../Box/Box';
 import { useStatusClasses } from '../../hooks';
+import { onHoverPropTypes } from '../../utils/devUtils/props/hoverProps';
 /**
  * List Item component.
  * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
 */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-      className = props.className,
-      isSelected = props.isSelected,
-      others = _objectWithoutProperties(props, _excluded);
+var ListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      isHovered = _ref.isHovered,
+      isSelected = _ref.isSelected,
+      onHoverChange = _ref.onHoverChange,
+      onHoverEnd = _ref.onHoverEnd,
+      onHoverStart = _ref.onHoverStart,
+      others = _objectWithoutProperties(_ref, _excluded);
 
-  var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
+  var _useHover = useHover({
+    onHoverChange: onHoverChange,
+    onHoverEnd: onHoverEnd,
+    onHoverStart: onHoverStart
+  }),
+      hoverProps = _useHover.hoverProps;
 
   var _useStatusClasses = useStatusClasses(className, {
     isHovered: isHovered,
@@ -30,14 +52,12 @@ var ListItem = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Box, _extends({
     className: classNames,
-    role: "listitem",
     ref: ref,
-    as: "li",
     variant: "boxes.listItem",
     isRow: true
   }, hoverProps, others), children);
 });
-ListItem.propTypes = {
+ListItem.propTypes = _objectSpread({
   /**
    * A list of class names to apply to the element
    */
@@ -47,7 +67,7 @@ ListItem.propTypes = {
    * Sets the selected state of the ListItem
    */
   isSelected: PropTypes.bool
-};
+}, onHoverPropTypes);
 ListItem.defaultProps = {
   isSelected: false
 };

package/lib/components/ListItem/ListItem.stories.js

@@ -1,12 +1,24 @@
-import React from 'react';
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState } from 'react';
 import AccountIcon from 'mdi-react/AccountIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
-import ListItem from './ListItem';
-import Box from '../Box';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import Text from '../Text';
-import Separator from '../Separator';
+import { Box, Icon, IconButton, ListItem, Separator, Text } from '../..';
+import { onHoverArgTypes } from '../../utils/devUtils/props/hoverProps';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/ListItem',
@@ -17,7 +29,8 @@ export default {
         type: 'code'
       }
     }
-  }
+  },
+  argTypes: _objectSpread({}, onHoverArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
@@ -74,4 +87,57 @@ export var WithSubtitle = function WithSubtitle(args) {
   })))), ___EmotionJSX(Separator, {
     margin: 0
   }));
+};
+export var WithHoverHandlers = function WithHoverHandlers(args) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var handleHoverChange = function handleHoverChange() {
+    setIsHovered(function (previousIsHovered) {
+      return !previousIsHovered;
+    });
+  };
+
+  var sx = function sx(shouldTranslate) {
+    return {
+      transform: "".concat(shouldTranslate ? 'translate(15px)' : 'translate(0)')
+    };
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
+    margin: 0
+  }), ___EmotionJSX(ListItem, _extends({}, args, {
+    onHoverEnd: handleHoverChange,
+    onHoverStart: handleHoverChange
+  }), ___EmotionJSX(Box, {
+    isRow: true,
+    mr: "auto",
+    alignSelf: "center"
+  }, ___EmotionJSX(Icon, {
+    icon: AccountIcon,
+    alignSelf: "center",
+    mr: "sm",
+    color: "accent.40",
+    size: 32
+  }), ___EmotionJSX(Box, {
+    sx: sx(isHovered)
+  }, ___EmotionJSX(Text, {
+    variant: "itemTitle"
+  }, "Fons Vernall"), ___EmotionJSX(Text, {
+    variant: "itemSubtitle",
+    mt: 1
+  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center"
+  }, ___EmotionJSX(IconButton, {
+    size: 26
+  }, ___EmotionJSX(Icon, {
+    icon: MoreVertIcon,
+    size: 20,
+    color: "neutral.20"
+  })))), ___EmotionJSX(Separator, {
+    margin: 0
+  }));
 };