@pingux/astro 2.9.1 → 2.13.0-alpha.10

package/lib/cjs/docs/theme/AstroTheme.stories.mdx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/addon-docs';
+import { JSONTree } from 'react-json-tree';
+import ThemeView from './ThemeView';
+
+<Meta title="Docs/Theme/Astro Theme" />
+
+# Theme Overview
+Astro utilizes [Theme UI](https://theme-ui.com/) to apply styles consistently using their
+[theme specification](https://theme-ui.com/theme-spec). This allows us to specify reusable colors,
+font sizes, component variants, and so much more. This document will focus on how we structure
+our theme object to align with the Theme UI paradigm and is meant to serve as a reference for any
+developers wishing to add or edit the theme.
+
+# Theme Values
+
+This is the raw theme object that is passed in the Astro wrapper. Its values can be referenced in `styled-system` properties. See [https://styled-system.com/table](https://styled-system.com/table) for details.
+
+For example, to set a background color on a `Box` component, you can reference one of the keys under the `colors` section. Like: `bg="black"`, `bg="accent.20"`, `bg="decorative.4"`, or `bg="critical.bright"`.
+
+<ThemeView />

package/lib/cjs/docs/theme/CustomThemes.stories.mdx

@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Docs/Theme/Custom Themes" />
+
+# Custom Themes
+<br/>
+
+## Creating Theme Overrides
+
+The Astro component library ships with [a default theme](./?path=/docs/docs-theme-astro-theme--page) based on Ping's 
+Astro design system. To extend, modify, or replace the theme to change the visual look 
+of components then there are two options:
+
+1. `themeOverrides` - this prop on the `AstroWrapper` component facilitates extending and modifying the base theme. 
+See AstroWrapper custom theme story for more information.
+The `themeOverrides` prop uses [the merge function from ThemeUI](https://theme-ui.com/guides/merging-themes/).
+With this approach, only variants that you specifically target within your new theme will be changed, 
+but those not targeted will still inherit styles from the default theme. If you are attempting to keep the majority of styling from the 
+Astro Design System (and therefore base astroTheme), but wish to override a few global styles, this is the favored approach. 
+
+2. `defaultTheme` - this is another prop on the `AstroWrapper` component, 
+but this _replaces_ the base theme with the object passed in. We discourage using this in most situations.
+
+
+To assist in customizing the theme, Astro includes the following objects:
+- astroTheme - The base Astro theme, includes all styles from the Astro design system: `@pingux/astro/lib/styles/theme`
+- endUserTheme - An alternative theme which matches Ping's End User library styling: `@pingux/astro/lib/styles/themes/end-user`
+- overrideUILib - An override object to address conflicting styles between Astro and Ping's UI Library CSS: `@pingux/astro/lib/styles/themeOverrides/uiLibraryOverride`
+
+
+
+
+## How to Customize Astro Styles
+
+Components typically use a custom variant to apply styles. See the [Astro Theme](./?path=/docs/docs-theme-astro-theme--page) documentation for more information on this. To override these styles, 
+the variant included within the component will need to be targeted. For example, to override the border color on all primary buttons, 
+search within the /theme file for the button structure. Within this file, `buttons` is not nested within another object so,
+the theme structure is straight forward and would look like:
+
+```
+const myThemeOverride = {
+    buttons: {
+        primary: {
+            borderColor: 'red',
+        }
+    }
+}
+```
+
+Some components and their variants are nested, for example components within /Forms. To change the hovered border color on a TextArea component, the following would be added to myThemeOverride.
+
+
+```
+const myThemeOverride = {
+    forms: {
+        textarea: {
+            '&:hover': {
+                borderColor: 'red',
+            }
+        }
+    },
+    buttons: {
+        primary: {
+            borderColor: 'red',
+        }
+    }
+}
+```
+
+These overrides can then be passed to the `themeOverrides` prop on the `AstroWrapper` as mentioned above.

package/lib/cjs/docs/theme/StylingGuideline.stories.mdx

@@ -0,0 +1,116 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Docs/Theme/Styling Guideline" />
+
+# Styling Guidelines
+
+<br />
+
+## Sx prop
+
+The majority of Astro components are built using `<Box>` from Theme UI as their foundation. Therefore, the `sx` prop can be passed directly to these components. More information about how the sx prop works can be found on the [ThemeUI site](https://theme-ui.com/sx-prop/).
+There are a few different approaches developers can take for adding custom styles utilizing the SX prop which are listed below. Each approach comes with different benefits and caveats. 
+
+It is always best practice to check if a styling variant exists before adding custom styling. It is rare that a style included within the Astro Design System does not have a matching style variant in the Astro Component Library.
+If you often find yourself reusing the same custom styles often, 
+reach out to the UX Dev team (via slack channel : #ui-astro) to discuss having the styles added as a reusable component variant.
+<br />
+
+### Passing inline styles to the Sx prop
+
+**Example:** 
+
+`<Box sx={{marginRight: ‘sm’}} />`
+
+**This approach works best for**
+
+- Small style adjustments
+- Adding or overwriting less than 3 additional styles to a component
+- Overwriting specific styles that have been passed in through a custom theme
+
+**Considerations**
+
+- Styles passed through the sx prop are not maintained by the library, so if a theme change occurs, these inline styles with not be adjusted accordingly. 
+- Styles passed through the sx prop are not reusable unless saved as an object.
+
+<br />
+
+### Passing a style object to the sx prop
+
+**Example:** 
+```
+const ExampleStoryComponent = () => {
+  const sx = {
+    boxOne: {
+      bg: 'blue',
+      height: '35px',
+      fontSize: 3,
+      p: 'md',
+    },
+    boxTwo: {
+      bg: 'red',
+      height: '10px',
+      fontSize: 2,
+      s: 'sm',
+    },
+  };
+
+  return (
+    <>
+      <BoxOne sx={sx.boxOne} />
+      <BoxTwo sx={sx.boxTwo} />
+    </>
+  );
+};
+```
+
+**This approach works best for**
+
+- Applying the same styles to multiple components
+- Adding 3 or greater additional styles
+- Cleaner code presentation; separating style from logic
+- Overwriting multiple styles that have been passed in through a custom theme
+- Added maintainability
+
+**Considerations**
+
+- Style objects passed through the sx prop are not maintained by the library, so if a theme change occurs, these inline styles with not be adjusted accordingly. 
+
+<br/>
+
+### Dos & Don’ts for SX Prop
+
+Astro components have been built using [Theme UI](https://theme-ui.com/guides/variants) which enables the use of variants.
+Using pre-existing variants to match design mocks is considered the best pratice as these styles are maintained by the library and match the Astro Design System.
+
+If a component has variants, they can be found in that individual component's documentation table within Storybook. You can also find the full list of Astro theme variants and pre-defined design tokens here:
+
+- [Astro Base Theme](./?path=/docs/docs-theme-astro-theme--page)
+- [Container Sizes](./?path=/story/docs-design-container-sizes--container-sizes)
+- [Spacing Sizes](./?path=/story/docs-design-spacing--spacing)
+- [Typography](./?path=/story/docs-design-typography--typography-tokens)
+- [Colors](./?path=/story/docs-design-color-schema--colors)
+
+If the pre-existing variants don’t meet your needs, and you wish to apply styling using [Theme UI](https://theme-ui.com/sx-prop)'s Sx prop, the following are best practices for applying CSS rules to children components and elements.
+
+- When possible pass styles directly to a components sx prop either inline or via an object as mentioned in the above sections. In composed components, [controlProps or containerProps](./?path=/story/docs-props--page) may help you more
+accurately target elements.
+- If you can’t style a component directly through the sx prop, try to use [CSS selectors to style select elements](https://www.w3schools.com/cssref/css_selectors.php). Please avoid targeting aria attributes or other attributes that are likely to change or be translated.
+- If you can’t target an element for styling with the above suggestions, do not hesitate to reach out to the UX development team and they will assess the best approach, be it adding a theme variant or adding a dedicated prop.
+
+<br />
+
+## Custom Themes
+	
+**When to create a custom theme?**<br />
+Custom themes are ideal for adding styles to components consistently throughout your app. You can learn more about creating a custom theme and pre-existing themes available to you [here](./?path=/docs/docs-theme-custom-themes--page).
+
+**This approach works best for**
+- Applying styling changes to components consistently throughout an application
+
+**Considerations**
+- Unless you’re using a custom theme exported by the Astro library, your custom themes will not be maintained by the library. 
+- If you create a theme or theme adjustments that you believe could be beneficial to others, please let the UX Dev team know. Several developers have contributed to the UiLibraryOverride and EndUser themes.
+This helps us keep styling consistent across products.
+- Keep in mind, similar to inline hierarchical CSS, if styles are passed in through the SX prop, 
+they will overwrite your custom theme styling. 

package/lib/cjs/docs/utils/messagesReducer.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta, Title, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="Docs/Utils/MessagesReducer" />
+
+# Messages Reducer
+
+<br />
+
+## Usage
+
+To use Messages Reducer, import it from `@pingux/astro`.
+
+`import { messagesReducer, multiMessagesReducer } from '@pingux/astro';`
+
+<br />
+
+## Overview
+
+`messagesReducer` provides a reducer to store a list of messages.
+
+`messagesReducer.actions` provides actions that can be dispatched to the reducer. By default the next actions are available:
+
+* **addMessage**
+
+Create an action to add a message
+
+`addMessage(message: {key: string, text: string, status: string})`
+
+* **removeMessage**
+
+Create an action to remove a message by key
+
+`removeMessage(key: string)`
+
+* **showMessage**
+
+Create an action to add a message and then remove it if there's a timeout
+
+`showMessage(message: {key: string, text: string, status: string}, timeout: number)`
+
+* **clearMessages**
+
+Create an action to clear all messages
+
+`clearMessages()`
+
+<br />
+
+## Example
+
+See the [Messages with Reducer](./?path=/story/components-messages--use-reducer) for an example of implementation.
+
+<br />
+
+## Multiple messages reducer
+
+`multiMessagesReducer` is used for storing messages in different containers.
+
+`multiMessagesReducer.actions` utilizes the same actions as `messagesReducer`, only needs to provide container name, as a first argument, e.g.:
+
+`addMessage(container: string, message: {key: string, text: string, status: string})`
+
+See the [story](./?path=/story/components-messages--use-reducer-with-multiple-containers) for an example of implementation.

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.