@pingux/astro 2.9.1 → 2.13.0-alpha.3

package/lib/cjs/experimental/EditButton/EditButton.js

@@ -0,0 +1,63 @@
+"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.IconSize = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _iconButtonAttributes = require("../../components/IconButton/iconButtonAttributes");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["size"];
+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 IconSize = {
+  sm: 10,
+  md: 15,
+  lg: 20
+};
+exports.IconSize = IconSize;
+var EditButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var size = props.size,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return (0, _react2.jsx)(_index.Box, {
+    ref: ref
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+    "aria-label": "Edit",
+    variant: "inverted"
+  }, other), (0, _react2.jsx)(_index.Icon, {
+    icon: _PencilIcon["default"],
+    size: IconSize[size] || size,
+    title: {
+      name: 'Pencil Icon'
+    }
+  })));
+});
+EditButton.propTypes = _objectSpread(_objectSpread({}, _iconButtonAttributes.iconButtonPropTypes), {}, {
+  /**  Determines the icon size */
+  size: _propTypes["default"].string
+});
+EditButton.defaultProps = {
+  size: 'md'
+};
+EditButton.displayName = 'EditButton';
+var _default = EditButton;
+exports["default"] = _default;

package/lib/cjs/experimental/EditButton/EditButton.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/EditButton/EditButton" />
+
+# EditButton
+
+EditButton component is an IconButton used specifically for editing content.
+
+It accepts all IconButton props. Additionally, the `size` prop adjusts the icon SGV size and responds to t-shirt sizes.

package/lib/cjs/experimental/EditButton/EditButton.stories.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys2 = 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.WithSizeProp = exports.WithButtonProp = exports.Default = void 0;
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _iconButtonAttributes = require("../../components/IconButton/iconButtonAttributes");
+var _index = require("../../index");
+var _EditButton = require("./EditButton");
+var _EditButton2 = _interopRequireDefault(require("./EditButton.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$keys2(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 variant = _iconButtonAttributes.iconButtonArgTypes.variant,
+  other = (0, _objectWithoutProperties2["default"])(_iconButtonAttributes.iconButtonArgTypes, ["variant"]);
+var _default = {
+  title: 'experimental/EditButton',
+  component: _index.EditButton,
+  decorators: [_storybookAddonDesigns.withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_EditButton2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread({}, other), {}, {
+    size: {
+      control: {
+        type: 'select',
+        options: (0, _keys["default"])(_EditButton.IconSize)
+      },
+      description: "The size of the icon container.\n        T-shirt sizing is recommended and can be passed to the size prop as \"sm\" , \"md\" and \"lg\"\n        rendering 10, 15, and 20 pixel svg containers."
+    }
+  })
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.EditButton, (0, _extends2["default"])({}, args, {
+    "aria-label": "edit"
+  }));
+};
+exports.Default = Default;
+var WithSizeProp = function WithSizeProp(args) {
+  return (0, _react2.jsx)(_index.EditButton, (0, _extends2["default"])({}, args, {
+    size: "lg",
+    "aria-label": "edit"
+  }));
+};
+exports.WithSizeProp = WithSizeProp;
+var WithButtonProp = function WithButtonProp(args) {
+  var _useState = (0, _react.useState)('I am a Text'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Text, null, text), (0, _react2.jsx)(_index.EditButton, (0, _extends2["default"])({}, args, {
+    mx: "sm",
+    "aria-label": "edit",
+    onPress: function onPress() {
+      return setText('I am a changed Text');
+    }
+  })));
+};
+exports.WithButtonProp = WithButtonProp;

package/lib/cjs/experimental/EditButton/EditButton.test.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _react2 = require("@emotion/react");
+var testId = 'test-edit-button';
+var defaultProps = {
+  'data-testid': testId,
+  'aria-label': 'Test edit button'
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.EditButton, (0, _extends2["default"])({}, defaultProps, props)));
+};
+(0, _testAxe["default"])(getComponent);
+test('renders edit button', function () {
+  getComponent();
+  var button = _testWrapper.screen.getByRole('button');
+  expect(button).toHaveAttribute('data-testid', testId);
+  expect(button).toBeInstanceOf(HTMLButtonElement);
+  expect(button).toBeInTheDocument();
+});
+test('the component displays the small icon size', function () {
+  getComponent({
+    size: 'sm'
+  });
+  var svg = _testWrapper.screen.getByRole('img');
+  expect(svg).toHaveAttribute('width', '10');
+  expect(svg).toHaveAttribute('height', '10');
+});
+test('the component displays the medium icon size', function () {
+  getComponent({
+    size: 'md'
+  });
+  var svg = _testWrapper.screen.getByRole('img');
+  expect(svg).toHaveAttribute('width', '15');
+  expect(svg).toHaveAttribute('height', '15');
+});
+test('the component displays the large icon size', function () {
+  getComponent({
+    size: 'lg'
+  });
+  var svg = _testWrapper.screen.getByRole('img');
+  expect(svg).toHaveAttribute('width', '20');
+  expect(svg).toHaveAttribute('height', '20');
+});
+test('the component displays the correct icon size', function () {
+  getComponent({
+    size: '22px'
+  });
+  var svg = _testWrapper.screen.getByRole('img');
+  expect(svg).toHaveAttribute('width', '22px');
+  expect(svg).toHaveAttribute('height', '22px');
+});
+test('the component accepts IconButton Props', function () {
+  var onPress = jest.fn();
+  getComponent({
+    onPress: onPress
+  });
+  var button = _testWrapper.screen.getByRole('button');
+
+  // Hold down the button to test is-pressed class
+  _testWrapper.fireEvent.mouseDown(button);
+  expect(button).toHaveClass('is-pressed');
+  _testWrapper.fireEvent.mouseUp(button);
+  expect(onPress).toHaveBeenCalledTimes(1);
+});

package/lib/cjs/experimental/EditButton/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+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
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _EditButton["default"];
+  }
+});
+var _EditButton = _interopRequireDefault(require("./EditButton"));

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

@@ -0,0 +1,47 @@
+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.