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

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

@@ -1,174 +0,0 @@
-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 '@pingux/mdi-react/AccountIcon';
-import MoreVertIcon from '@pingux/mdi-react/MoreVertIcon';
-import { withDesign } from 'storybook-addon-designs';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, Icon, IconButton, ListItem, Separator, Text } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
-import { onHoverArgTypes } from '../../utils/docUtils/hoverProps';
-import ListItemReadme from './ListItem.mdx';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/ListItem',
-  component: ListItem,
-  decorators: [withDesign],
-  parameters: {
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListItemReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
-      }
-    }
-  },
-  argTypes: _objectSpread({}, onHoverArgTypes)
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
-    margin: 0
-  }), ___EmotionJSX(ListItem, args, ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center"
-  }, "Fons Vernall")), ___EmotionJSX(Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "filter"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "sm",
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), ___EmotionJSX(Separator, {
-    margin: 0
-  }));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.listItem["default"]
-  }
-};
-export var WithSubtitle = function WithSubtitle(args) {
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Separator, {
-    margin: 0
-  }), ___EmotionJSX(ListItem, args, ___EmotionJSX(Box, {
-    isRow: true,
-    mr: "auto",
-    alignSelf: "center"
-  }, ___EmotionJSX(Icon, {
-    icon: AccountIcon,
-    alignSelf: "center",
-    mr: "sm",
-    color: "accent.40",
-    size: 32,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    variant: "itemTitle"
-  }, "Fons Vernall"), ___EmotionJSX(Text, {
-    variant: "itemSubtitle",
-    mt: 1
-  }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
-    isRow: true,
-    alignSelf: "center"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "filter"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: "sm",
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), ___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,
-    title: {
-      name: 'Account Icon'
-    }
-  }), ___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,
-    "aria-label": "filter"
-  }, ___EmotionJSX(Icon, {
-    icon: MoreVertIcon,
-    size: 20,
-    color: "neutral.20",
-    title: {
-      name: 'More Vertical Icon'
-    }
-  })))), ___EmotionJSX(Separator, {
-    margin: 0
-  }));
-};

package/lib/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.