@pingux/astro 2.16.1-alpha.0 → 2.17.0-alpha.0

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

@@ -1,189 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.WithSubtitle = exports.WithHoverHandlers = exports.Default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
-var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
-var _storybookAddonDesigns = require("storybook-addon-designs");
-var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
-var _index = require("../../index");
-var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
-var _hoverProps = require("../../utils/docUtils/hoverProps");
-var _ListItem = _interopRequireDefault(require("./ListItem.mdx"));
-var _react2 = require("@emotion/react");
-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; }
-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 _default = {
-  title: 'Components/ListItem',
-  component: _index.ListItem,
-  decorators: [_storybookAddonDesigns.withDesign],
-  parameters: {
-    docs: {
-      page: function page() {
-        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ListItem["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
-      }
-    }
-  },
-  argTypes: _objectSpread({}, _hoverProps.onHoverArgTypes)
-};
-exports["default"] = _default;
-var Default = function Default(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }), (0, _react2.jsx)(_index.ListItem, args, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _AccountIcon["default"],
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    alignSelf: "center"
-  }, "Fons Vernall")), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "filter"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: "sm",
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }));
-};
-exports.Default = Default;
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.listItem["default"]
-  }
-};
-var WithSubtitle = function WithSubtitle(args) {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }), (0, _react2.jsx)(_index.ListItem, args, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _AccountIcon["default"],
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle"
-  }, "Fons Vernall"), (0, _react2.jsx)(_index.Text, {
-    variant: "itemSubtitle",
-    mt: 1
-  }, "fvernall0@google.it"))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "filter"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: "sm",
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }));
-};
-exports.WithSubtitle = WithSubtitle;
-var WithHoverHandlers = function WithHoverHandlers(args) {
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_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 (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }), (0, _react2.jsx)(_index.ListItem, (0, _extends2["default"])({}, args, {
-    onHoverEnd: handleHoverChange,
-    onHoverStart: handleHoverChange
-  }), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _AccountIcon["default"],
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), (0, _react2.jsx)(_index.Box, {
-    sx: sx(isHovered)
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle"
-  }, "Fons Vernall"), (0, _react2.jsx)(_index.Text, {
-    variant: "itemSubtitle",
-    mt: 1
-  }, "fvernall0@google.it"))), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, (0, _react2.jsx)(_index.IconButton, {
-    size: 26,
-    "aria-label": "filter"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _MoreVertIcon["default"],
-    size: 20,
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }));
-};
-exports.WithHoverHandlers = WithHoverHandlers;

package/lib/cjs/experimental/ListView/ListView.mdx

@@ -1,47 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Components/ListView/ListView" />
-
-# ListView
-
-ListViews are used to display a list of items. Users can select, view, or edit items in this list.
-This virtualized component supports asynchronous data in infinitely scrollable lists. 
-
-This component should:
-- Be used to list items that contain a significant amount of information within them.
-- Be able to access ListItem information.
-
-It shouldn’t be used to list items that only have a single piece of information.
-
-### Required Components
-
-This component requires [ListViewItem](./?path=/story/experimental-listviewitem--default).
-
-### Accessibility
-
-This component should adhere to the [WAI-ARIA ListBox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) accessibility guidelines. 
-
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Key | Functions |
-| ---- | ---- |
-| Space or Enter | Selects the item. |
-| Tab | Focuses item and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Arrow keys | Can be used to move the selection in the menu.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first row. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last visible row. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The **`aria-rowcount`**  and **`aria-columncount`**  attributes are used to indicate the total number of rows and columns in the grid structure. 
-- The **`aria-multiselectable`**  attribute is used to indicate that users can toggle between items in the grid. 
-- Each ListViewItem uses the **`aria-rowindex`**  attribute, which defines a component's position in the total number of rows. 
-- Each item also uses the aria-label, **`aria-colindex`**  attributes to indicate the component’s column position and aria-selected to indicate the currently selected state.
-
-#### NOTES:
-- See the [ListAndPanel](./?path=/story/experimental-recipes-listandpanel--list-and-panel) and [ScrollableListView](./?path=/story/experimental-recipes-scrollablelistview--scrollable-list-view) recipes for more detailed examples.