@pingux/astro 2.9.2 → 2.13.0-alpha.10

package/lib/experimental/EditButton/EditButton.js

@@ -0,0 +1,50 @@
+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 = ["size"];
+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 PencilIcon from '@pingux/mdi-react/PencilIcon';
+import PropTypes from 'prop-types';
+import { iconButtonPropTypes } from '../../components/IconButton/iconButtonAttributes';
+import { Box, Icon, IconButton } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var IconSize = {
+  sm: 10,
+  md: 15,
+  lg: 20
+};
+var EditButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var size = props.size,
+    other = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Box, {
+    ref: ref
+  }, ___EmotionJSX(IconButton, _extends({
+    "aria-label": "Edit",
+    variant: "inverted"
+  }, other), ___EmotionJSX(Icon, {
+    icon: PencilIcon,
+    size: IconSize[size] || size,
+    title: {
+      name: 'Pencil Icon'
+    }
+  })));
+});
+EditButton.propTypes = _objectSpread(_objectSpread({}, iconButtonPropTypes), {}, {
+  /**  Determines the icon size */
+  size: PropTypes.string
+});
+EditButton.defaultProps = {
+  size: 'md'
+};
+EditButton.displayName = 'EditButton';
+export default EditButton;

package/lib/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/experimental/EditButton/EditButton.stories.js

@@ -0,0 +1,75 @@
+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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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 { withDesign } from 'storybook-addon-designs';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { iconButtonArgTypes } from '../../components/IconButton/iconButtonAttributes';
+import { Box, EditButton, Text } from '../../index';
+import { IconSize } from './EditButton';
+import EditButtonReadme from './EditButton.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var variant = iconButtonArgTypes.variant,
+  other = _objectWithoutProperties(iconButtonArgTypes, ["variant"]);
+export default {
+  title: 'experimental/EditButton',
+  component: EditButton,
+  decorators: [withDesign],
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EditButtonReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread({}, other), {}, {
+    size: {
+      control: {
+        type: 'select',
+        options: _Object$keys(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."
+    }
+  })
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(EditButton, _extends({}, args, {
+    "aria-label": "edit"
+  }));
+};
+export var WithSizeProp = function WithSizeProp(args) {
+  return ___EmotionJSX(EditButton, _extends({}, args, {
+    size: "lg",
+    "aria-label": "edit"
+  }));
+};
+export var WithButtonProp = function WithButtonProp(args) {
+  var _useState = useState('I am a Text'),
+    _useState2 = _slicedToArray(_useState, 2),
+    text = _useState2[0],
+    setText = _useState2[1];
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center"
+  }, ___EmotionJSX(Text, null, text), ___EmotionJSX(EditButton, _extends({}, args, {
+    mx: "sm",
+    "aria-label": "edit",
+    onPress: function onPress() {
+      return setText('I am a changed Text');
+    }
+  })));
+};

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

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { EditButton } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(EditButton, _extends({}, defaultProps, props)));
+};
+axeTest(getComponent);
+test('renders edit button', function () {
+  getComponent();
+  var button = 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 = 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 = 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 = 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 = 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 = screen.getByRole('button');
+
+  // Hold down the button to test is-pressed class
+  fireEvent.mouseDown(button);
+  expect(button).toHaveClass('is-pressed');
+  fireEvent.mouseUp(button);
+  expect(onPress).toHaveBeenCalledTimes(1);
+});

package/lib/experimental/EditButton/index.js

@@ -0,0 +1 @@
+export { default } from './EditButton';

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